HTML Notes PDF

**[WEB DESIGNING USING HTML ]** **[INTRODUCTION]** We access web sites regularly to download information. We also observe that the content on the website is presented in different layouts, colors, fonts, size and web pages are created by writing simple text in HTML or Hyper Text Markup Language.HT...

**[WEB DESIGNING USING HTML ]** **[INTRODUCTION]** We access web sites regularly to download information. We also observe that the content on the website is presented in different layouts, colors, fonts, size and web pages are created by writing simple text in HTML or Hyper Text Markup Language.HTML is one of the several Markup languages such as RTF, PHP, PEARL, ASP, JAVASCRIPT, ACTIONSCRIPT. Used for designing websites on the WWW. **[3 Technologies used by World Wide Web are :]** 1. HTML (Hyper Text Markup Language) used to write Web pages. 2. HTTP (Hyper Text Transfer Protocol) to transmit those pages. 3. A web browser client program to receive the data, interpret it and display the results. **[Basic Web Terminology]** WWW(World Wide Web) : is a web of information that is interlinked through the hypertext links. HTTP : Hyper Text Transfer Protocol. Protocol used to transfer web pages. HTML : Hyper Text Markup Language. The language used to design web pages. Hypertext :Hypertext is the way we move around on the web by clicking on hyperlinks that take us to the next page and so on. Thus, the link available on a webpage is called Hypertext. These text are known as Link, Link, Hotlink, Hyperlink. Hyperlink : Used to jump to another part of same/different web page. Eg. This is a link to Google Uniform Resource Locator (URL) : Unique address of webpage. Eg. http//www.yahoo.com/index.html Web Browser : A  web browser (commonly referred to as a browser) is a software application for accessing information on the World Wide Web. When a user requests a web page from a particular website, the web browser retrieves the necessary content from a web server and then displays the page on the screen. The most popular web browsers that are used today are Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari and the Opera browser. Web Server : It is a computer having server software, which holds Web pages and 'serves' them out to computers that request them. Eg. Microsoft IIS, Apache. Website : A set of Web pages that are logically connected. Web Page : Electronic document carrying information and links to resources on Internetcreated using languages like HTML. Home Page : The starting, introductory or welcome page for a Web site. It is also known as index page. **[What is HTML ?]** HTML stands for [Hypertext Markup Language], and it is the most widely used language to write Web Pages. HTML is a Markup Language. HTML is the character-based method for describing and expressing the content. The content may be pictures, text, sound and video clips. Technically HTML is not a programming language but it has code-words and syntax like any other language. It consists of tags typed into a text-file by the site author. The text is then saved as an.html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. You can use anything from a text-editor such as Notepad to a powerful graphical editor to create HTML pages. **[Features of HTML:]** - HTML provides pre defined tags to create the layout of a web page such as headings, paragraphs, lists, tables, images, etc. - HTML is a markup language. Markup is what HTML tags do to the text inside them. The markups are read and interpreted by the browsers which display the marked elements as per the specifications used for developing web pages connected through hyperlinks. - HTML uses HYPERTEXT. **[Important Points :]** - - - - - - The text between the \ tags is displayed inside the browser window. **[What is an HTML DOCUMENT ?]** A HTML document corresponds to a web page. It contains HTML tags and plain text. They can be created using the text editor Notepad.A web browser (like Internet Explorer or Firefox) reads the HTML documents and displays them as web pages.The browser does not display the HTML tags, but uses the tags to interpret the content of the page. **[HTML Tag/ HTML Element :]** An HTML Tag/Element indicates structure in an HTML document and a way of hierarchically arranging content. It refers to the HTML codes that define the element in an HTML file, such as headings, images, paragraphs and list. **[5 Properties of HTML Tags]**: - HTML tags are keywords surrounded by angle brackets like \ - HTML tags normally come in pairs like \ and \ - The first tag in a pair is the start or opening tag, the second tag is the end or closing tag. - Some Tags can surround other tags. This is called **Nesting**. - HTML elements have properties: attributes and content. Attributes define desired behavior or indicate additional element properties And Content can be text or other elements **[HTML Tag Types]:There are two types of tags in HTML.** 1. Container tags:- container tags need both an opening tag \and a closing tag\. These tell the browser when to begin a command and when to end it. Example :\,........\,\........\ 2. Empty Tags:- They are made up of just opening tag. In these closing tag is not required. Example : The three most common empty tags are \ horizontal rule, \ Line Break, and \ paragraph. **[Attributes:]** HTML elements can have attributes. Attributes provide additional information about an element. Attributes are added to a tag to enhance the way the tag displays the content on the page. An attribute is included within the actual tag, either within a start tag or an empty tag and are always specified in the start tag. Attributes control the different properties of a tag. Each tag has some default values for its attributes. To modify these, you have to set the attributes to the new value. Syntax : Attribute = "value" **[Syntax Rules for Writing Tags:]** 1. Html tag consist of a left angle bracket(\). 2. Tags come in pairs e.g. \\...\...\..... \. The end tag is a closing tag with additional forward slash (/). 3. HTML tags are not case sensitive. You may type them in the lowercase or the Upper Case, the effect will be the same. 4. Attributes are optional. They are always added in the starting of the tag not in the closing tag. **[Creating an HTML file using Notepad application :-]** To write the web pages simple text editors like Note Pad, Word Pad can be used. To convert the text files (.txt) into html documents (.htm and.html) extension is used.View the html document by making use of web browsers like mozillafirefox, internet explorer, google chrome etc. **[Steps to create a HTML Document :]** - **Open Notepad ( Click Start** **Programs** **AccessoriesNotepad) and type the content.** - **In Notepad, click File Save As. The Save As dialog box gets displayed.** - **Go to your folder/sub-directory.** - **Type Filename as "Exercise.htm" Select 'All files' option from 'Save As Type' drop down menu and click 'Save'.** - **Open Windows Explorer and open the folder where file was saved.** - **Double click on the file. The output is displayed in your browser page.** **[Basic Structure Tags of an HTML Document:]** Basic structure tags are the tags required by the browser, without which the browser will not recognize the file as being an HTML file. If these basic structure tags are not in a document, the page loaded through it would not be displayed properly. **\\...\...\...\ Body Part** **All HTML files should include at least these basic structure tags :-** a. **The HTML Tag** b. **The Head Tag** c. **The Title Tag** d. **The Body Tag** **[The HTML Tag] : This tag is the container for the entire web page. This element contains other elements, the head and the body elements.** **Syntax :\ \...\....\** **[The HEAD Tag] : Contains contains metadata information about the web page. It may also contain other tags that help you to identify your HTML file to the outside world.** **Syntax :\ \...\....\** **[The TITLE Tag] : This tag is nested within the Head tag. It identifies your page to the rest of the world. The tag output is displayed on your browser's title bar but does not appear as part of the page.** **Syntax :\ \...\....\** **[The BODY Tag] :contains the visual aspects of the web page. This tag is the compliment of the Head tag and contains all the tags or elements that a browser actually displays as the body of your HTML document.** **Syntax :\ \...\....\** **[Attributes of \ Tag]** **Bgcolor sets background color for the entire page** **Background = " " Adds an image to the background** **(Image can be a.GIF or.JPEG or.BMP image file** **Text= sets the color of ordinary text on the page** **link= Sets the colour of ordinary links on the page** **alink= Sets the colour of active links** **vlink= Sets the colour of visited links** **[Comment Tag] :- This tag is used to add comments to various sections of your script. Browser does not display any text displayed between these tags.** **Syntax :\** **[Headings Tag :-] Headings help in defining the format and structure of the document.** They provide valuable tool in highlighting important topics & the nature of the document as a whole. There are six levels of headings in HTML specified by \, \, \, \, \ and \ tags. **Syntax :\ \...\...\...\... \** **where y is size of heading ranging from 1\....6.** **[Paragraph Tag] : Paragraph tag can be used to place blocks of text in HTML document. Syntax :\ \...\....\** **[Line break Tag :-] \ Tag is used to add line breaks in the HTML code. It is used to add blank lines to a document.** **[Text alignment :]Align attribute can be used with the Headings tag & Paragraph tag to align the text. Data can be aligned from left, right, center or justify by using any one of values such as LEFT, RIGHT, CENTER, JUSTIFY.** **[PHYSICAL TAGS] : Defines how the text should be displayed by the browser. They control the physical characteristics of the text.** **or \ \-\-\-\-\--\ Strikethrough ~~I am bold~~** **[LOGICAL TAGS] :Logical tags on the other hand indicate the 'type' of content they enclose.** **There are 9 logical tags each requiring a closing tag.** **Examples are :-** **\, \, \, \ ,\, \, \, \, \.** **[Horizontal Ruled Lines :] Horizontal Rules (Lines) are used to separate different areas of a web page.** **\ Tag : This** tag produces a horizontal line with a width of the browser window. This is useful for visually separating document sections. **[Attributes of \ Tag]** a. **\ empty tag without attribute makes line the full width** **of the screen.** b. **\ For fixed pixel width** c. **\ For percentage of screen width** d. **\ specify thickness of the horizontal line.** e. **\ Aligns ruler to value, which is left, right or center** f. **\ sets color of a line** g. **\ turns line's shading off** **[TEXT FORMATTING ]** **[The FONT Tag] :**The font tag enables you to set the font size, font color, and font family of the text placed inside the tag. **Syntax :\ \.....\** **[Attributes of\ Tag]** **FACE = "value" Value specifies the font type** **COLOR = "name" name specifies the color name** **SIZE = "n" n takes a number from 1 to 7** **[\TAG] : The content between the tags is centered on the current** **line.** **Syntax :\.......... \** **[\TAG] : Can enclose text and other HTML elements and divides the** **document into Sections. ALIGN attribute can be used with** **[MARQUEE TAG] : This tag creates an** HTML marquee which is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. **This tag provides some animated text to the page. It allows text to scroll on the web page and is supported only by Internet Explorer** **Syntax :\........ \** **[Attributes of \ Tag]** **Bgcolor = "name of color"** **Behaviour = "motion type" values can be alternate, scroll or slide Direction = "scroll direction down, up, left or right** **Width = " " in pixels or percentage** **Height = " " in pixels or percentage** **scrolldelay = "milliseconds"** **loop = "number" sets the no. of times the marquee text scrolls** 1. Blockquote tag **\** It provides left and right indention of affected text and is useful for quoting a direct source within a document. 2. Preformatted tag **\**It contains preformatted plain text. This is useful for including computer program output or source code without your document. **[HYPERLINKS AND ANCHORS]** **Hyperlink : A hyperlink is a reference (an address) to a resource on the web. Hyperlink text is used to jump to a specific place in either the same web page or another Web page, to display an image, download a program, send an e-mail message, run a script and so on.** **HTML documents contain certain 'hot spots'. These hot spots provide anchors that link to other document files on the Internet.** **[\ Tag] / [Anchor Tag] : is used to define both hyperlinks and anchors** **Syntax :\\...\** **[The href Attribute :] Defines the link address of a resource on the web** **Example: \ Visit Yahoo! \** **[\ TAG] : Used to insert graphics on a web page. The IMG tag has no** **closing tag** **URL points to the location where the image is stored. The browser puts the image where the image tag occurs in the document.** **[Attributes of \ tag]** **height and width \-- Used to set proper proportions for the image and takes** **values in pixels or in percentages** **alt \-- Defines \"alternate text\" for an image** **align \-\-- Aligns other HTML elements such as text around the image.** **Border \-- Draws a border around the image** **[Image As a Link] : Uses image to navigate to another page** **\** **\\** **[CREATING LISTS]** List:- A number of connected items or names which are written or printed one below the other. HTML supports 4 types of lists :- 1. Unordered list 2. Ordered list 3. Definition list 4. Nested List **Unordered list:** An Unordered list is a list of items which are marked with bullets (typically black small circles) **\ Tag : This tag defines a bulleted list of items. The \ (list item) tag is nested inside the UL tag and defines each item within the list.** Inside a list item you can put a paragraph line break, images, links, other list etc. **Three types of bullets can be displayed in an unordered list** 1. **disk (default) ** 2. **circle ○** 3. **square ** **[Ordered list:]** An ordered list is a list of items marked with numbers. An order list starts with \tag. **\Tag : This tag defines a sequentially numbered list of items. It is used with** **The type attribute is used to change bullet type. It takes one of the five values:** **The start attribute sets the starting number of the bullet. Default is 1.** **Definition list :**The definition list is the ideal way to present a glossary, list of terms (and their definition), in HTML. **\ Tag : This tag allows you to create glossaries or list of terms and definitions. A glossary consists of three tag elements: a tag to define the list (DL), a tag to define the term (DT) and a tag to define the definitions (DD).** **Nested List :** When one type is given inside or embedded inside another type of list. It is called as Nested list. You can also have a number of paragraphs, each containing a nested list, in a single list item. **[TABLES]** **Tables are used to make data easier to interpret and to control the layout of a page.** **[\ Tag] : This tag is used to create a table.** **Syntax :\ \...\...\...\...\...\** **A table is divided into rows and columns.** **\\.....\ Tag ==\> Table row tag** **\\....\ Tag ==\> Table data tag, which is the content of a data cell** **\ \...\... \ Tag ==\> Table heading tag** **[\](../../../../tags/tag_caption.asp) Defines a table caption** **[\](../../../../tags/tag_colgroup.asp) Defines groups of table columns** **[\](../../../../tags/tag_col.asp) Defines the attribute values for one or more columns in a table** **[\](../../../../tags/tag_thead.asp) Defines a table head** **[\](../../../../tags/tag_tbody.asp) Defines a table body** **[\](../../../../tags/tag_tfoot.asp) Defines a table footer** **\ Displays the table in the center** **[Attributes of \Tag :]** **Border = \"0\" means no border for the table & is the default setting** 5. **Alignment attributes ==\> Content in cells can be aligned using these** **attributes** **valign ==\> Specifies that the table can be either top or bottom** **aligned. The default is center aligned**