Tag Basics 1 Page Structure HTML HEAD TITLE

Tag Basics

1. Page Structure <HTML> <HEAD> <TITLE> </HEAD> <BODY> </HTML> </TITLE> </BODY> General Structure of HTML page At a minimum, HTML document should contain 3 basic sets of tags

attributes of <BODY> tag (i) Background = "URL" • Sets the background image to the image found at URL • The image should be in. gif, . jpg, or. jpeg format Example: <BODY Background = “C: /images/abc. gif”>

attributes of <BODY> tag (ii) bgcolor = “#RRFFBB" OR “……. . ” • Indicates the color of a document’s background • The value of this attribute can be a hexadecimal number, an RGB value, or a color name Example: <body bgcolor="#000000"> <body bgcolor="RGB(0, 0, 0)"> <body bgcolor="black"> The lines above all set the background-color to black.

attributes of <BODY> tag (iii) LEFTMARGIN = “n” • Specifies the width (in pixels) of a margin (left edge) Example: . (iv) <body leftmargin = “ 30” > TOPMARGIN = “n” • Specifies the size (in pixels) of a margin (top edge) Example: <body topmargin = “ 30” >

attributes of <BODY> tag (v) LINK = “#RRFFBB" OR “……. . ” • Indicates the color of hyperlinks text within the document (vi) TEXT = “#RRFFBB" OR “……. . ” • Indicates the color of normal text within the document Example: <body bgcolor="#FFFFFF” text =“blue“ link =“red">

2. Adding Comments • The comment tag is used to insert a comment in the HTML source code. • A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. • HTML comments are placed in between <!--. . . --> tags. • Example: <!-- This is a comment -->

3. Working with Texts • To display text, it must be between the <BODY> and </BODY> tags. • Browser ignores every tab, carriage return, extra space placed in the text • Only HTML tags can format a web page • Example: <BODY> <CENTER> HELLO WORLD </CENTER> </BODY>

4. Paragraph and Line Breaks Paragraph • The <p> tag defines a paragraph • Browsers automatically add some space (margin) before and after each <p> tag. • Example: <p>This is some text in a paragraph. </p>

4. Paragraph and Line Breaks Attributes of <p> tag 1) ALIGN = {LEFT, RIGHT, and CENTER} The align attribute is used to set the alignment of the paragraph with respect to the page size. • Example: <p align="center">

4. Paragraph and Line Breaks Attributes of <p> tag 2) width = “n” Specifies the horizontal dimension of the paragraph (in pixels) • Example: <p width= 250 >

4. Paragraph and Line Breaks Line Break • The tag inserts a single line break. • The tag is an empty tag which means that it has no end tag. • Example: This is some text

5. Emphasizing Text • • <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text <mark> - Marked text <small> - Small text <sub> - Subscript text <sup> - Superscript text

5. Emphasizing Text

6. Heading and Horizontal Rules Heading • The <h 1> to <h 6> tags are used to define HTML headings. • <h 1> defines the most important heading. <h 6> defines the least important heading. • ALIGN= {LEFT, RIGHT, and CENTER} <h 1 align="center">This is heading 1</h 1>

6. Heading and Horizontal Rules Heading – Example: Output:

6. Heading and Horizontal Rules - Example • The HTML <hr> tag is used for creating a horizontal line. • This is also called Horizontal Rule in HTML.

6. Heading and Horizontal Rules - Example

6. Heading and Horizontal Rules Attributes of Horizontal Rules Attribute Value align left, right, center noshade Description Specifies the alignment of the horizontal rule. Removes the usual shading effect that most browsers display. size pixels or % Specifies the height of the horizontal rule. width pixels or % Specifies the width of the horizontal rule.