You are on page 1of 78

INTRODUCTION

HTML stands for Hyper Text Markup Language. HTML was developed by Tim Berners Lee. The information present in a page which contains links and graphics is called a Web Page.

Types of html

Static HTML contains only text . Static Graphical HTML contains text and graphics Active HTML - contains scripts which makes the html pages active. Dynamic HTML similar to active html, the only difference is that Dynamic Html has style sheets.

Html is made up of tags. There are two types of tags Paired Tags Unpaired Tags Paired tags-both the starting and ending tags should be present. Unpaired tag only staring tag is present. Tags should not overlap. The tag opened last should be closed first.

Requirement for HTML

An editor like Notepad. A browser There are different types of browser: Internet Explorer Netscape Navigator Opera Neo Planeton Line

The extension for html file is .htm or html. Html is not case sensitive.
How to work with html? Type the html file in notepad ,save as .htm file and run in a browser or type the contents of html file in Visual Interdev in source view and view the output in quick view .

HTML TAG An HTML file should start with html tag. The starting tag should be written as <html> and the ending tag should be specified as </html>. This tag contains the entire document. HEAD & TITLE TAG Contains document head information. Inside the <head> tag we should place the title Tag. The title appears at the top of the browser. Example: <html> <head> <title>My first HTML Page</title> </head> Output </html>

BODY TAG
Body Tag acts as a container for the body and the document. It appears after the head tag. This tag also sets various color settings and background characteristics of the document. Attributes: Bgcolor - To insert background color. Hexadecimal values can also be given. Background To insert a background image. HTML supports .jpg and .gif files. Text To change the color of the text

Example - bgcolor:
<html> <head> <title>Example for Body Tag</title> </head> <body bgcolor = cyan> </body> </html>

Output

Example - bgcolor: <html> <head> <title>Example for Body Tag</title> </head> <body bgcolor = #DDFGHA> </body> </html>

Output

Example - background:
<html> <head> <title>Example for Body Tag</title> </head> <body background = flower.jpg> </body> </html>

Output

HEADING TAGS

Specifies headings in a document. Headings are numbered 1 to 6 with <h1> representing the heading for the main heading in the document and <h3> representing a heading for a nested subtopic. Generally, text inside heading tags appear in bold face and may be larger than normal document text.
Example: <html> <body bgcolor = "cyan text=teal> <h1>Computer Software College</h1> <h2>Anna Nagar</h2> <h3>Chennai</h3> <h4>TamilNadu</h4> <h5>Asia</h5> <h6>India</h6 </body> </html>

Output

ATTRIBUTE INFORMATION IN HEADING TAG Align Positions the heading in the left, right or center of a document. Style Specifies style sheet commands that apply to the heading Example: <html> <body bgcolor = cyan text=red> <h1 align=center style=background:pink>Computer Software College</h1> <h2 align=right>Anna Nagar</h2> <h3 align=left>Chennai</h3> <h4>TamilNadu</h4> <h5>Asia</h5> Output <h6>India</h6 </body> </html>

FORMATTING TAGS Bold tag <b> indicates text that should appear in bold face. Italic tag<i> - Italicizes text. Underline tag <u> - Underlines text in a document. Strong tag Indicates strong emphasis. The browser will probably display the text in a boldface font. Strike, s tag Indicates a strikethrough text style. Del tag Indicates text marked for deletion in the document. Br tag Breaks a line of continuous text and prevents text alignment around images.

Example: <html> <body bgcolor = "pink" text="blue"> <b>Computer</b> <br> <i>Software</i> <br> <u>College</u> <br> <strong>School</strong> <br> <strike>Chennai</strike> <br> <s>Calcutta</s> <br> <del>Mumbai</del> <br> </body> </html>

Output

FORMATTING TAGS Cite tag Provides an in-text citation of a proper title such as the title of a book. Most browsers display the text inside the <cite> tag in italics.

Kbd tag This tag is used to display computer commands and arguments, especially those to be entered by the user. The text tagged by <kbd> is usually shown in fixed-width font.
Tt tag Tele typewriting tag Puts text in a tele type font. Em tag Emphasizes text. Makes the text stand out. Browsers usually do this with italic or bold face. Address tag In a document, distinguishes an address from normal document text. This tag can be used to specify the name, e-mail address, phone number, mailing address or other relevant information.

Example: <html> <body bgcolor = aquamarine" text= brightgold> <cite>Visual Basic</cite> <br> <kbd>Ctrl + S</kbd> to save your document <br> <tt>HTML</tt> <br> <em>Markup Language</em> <br> <address>AD 5/2 II Avenue,Anna Nagar</address> </body> </html> Output

FORMATTING TAGS

Font Alters or sets font characteristics of the font the browser uses to display text.
Base font Provides a font setting for normal text within a document. Attributes: Color: Indicates the color the browser uses to display text. Color names can substitute for the RGB hexadecimal values. Face: Specifies a comma-separated list of font names the browser uses to render text. If the browser does not have access to the first named font, it tries the second, then the third and so forth. Size: Specifies the size of the text affected by the font tag. We can specify the size in the range 1 through 7.

Example: <html> <body bgcolor = "gray"> <font face = "Arial","Times New Roman", size = 6 color = Coral>COMPUTER SOFTWARE COLLEGE </font> <br> <br> <basefont face = "MsSansSerif" size = 7 color = Cornflowerblue>MULTIMEDIA</basefont> <br> <font face = "Arial" size = 7 onmouseover="this.color='yellow'"; onmouseout="this.color='orange'";>COMPUTERS</font> </body> </html> Output

FORMATTING TAGS Blockquote Provides left and right indention of affected text and is useful for quoting a direct source within a document.

Superscript - <sup> - Indicates superscript text.


Subscript - <sub> - Indicates subscript text. Big Indicates that text display in a larger font.

Small Specifies text that should appear in a small font.


Attribute : Style - Specifies style sheet commands that apply to the content within the above tags.

Example: <html> <body bgcolor = "brass"> Dr.Henry's remarks are below:<blockquote>I really like the procedure</blockquote> <br> 5x<sup>4</sup>+8x<sup>3</sup>+6x<sup>2</sup> <br> H<sub>2</sub>SO<sub>4</sub> <br> <big style="background:pink">CSC Computer Education</big> <br> <small style="background:cyan;color=blue">CSC Computer Education</small> </body> Output </html>

LIST TAGS
Lists are a great way to provide information in a structured, easy to read format. They help the visitor easily spot information, and they draw attention to important information. A list is a good form for a procedure.

There are three types of Lists


1.Ordered List (Numbered) 2.Unordered List (Bulleted)

3.Definition List

ORDERED LIST
<OL> Contains a numbered (ordered) List. Attribute: 1. Start Specifies the value at which the ordered list should start. 2. Type Specifies the numbering style of the ordered list. Possible values are 1 for arabic numbers, i for lower case roman numerals, I for Upper case roman numerals, a for lowercase letters, and A for uppercase letters.

<LI> Places items into ordered lists. Attribute: 1. Style Specifies style sheet commands that apply to the list item. 2. Title Specifies text assigned to the tag. We might use this attribute for context-sensitive help within the document. Browsers may use this to show tool tips over the list item. 3. Type Specifies the numbering for each ordered list item. If we omit the type attribute, the browser chooses a default type. 4. Value Sets a number in an ordered list. Use this attribute to continue a list after interrupting it with something else in our document.

Example: <html> <body bgcolor = cornflower blue text = "darkgreen"> <h1>Example for Ordered List</h1> <h2>Branches of CSC</h2> <ol> <li>Anna Nagar <li>Ambattur <li>Avadi <li>Mylapore </ol> <ol type="a"> <li>Anna Nagar <li>Ambattur <li>Avadi <li>Mylapore </ol>

Example (Contd): <ol type ="A"> <li>Anna Nagar <li>Ambattur <li>Avadi <li>Mylapore </ol> <ol type ="I" start =5> <li>Anna Nagar <li>Ambattur <li>Avadi <li>Mylapore </ol> </body> </html>

Output

Example:
<html> <body bgcolor = Cadet blue> <h2>Branches of CSC</h2> <ol> <li style="background:wheat">T.Nagar <li type = 1>Anna Nagar <li value=5>Ambattur <li title = "List Item">Mylapore </ol> </body> </html> Output

UNORDERED LIST <UL> - Contains a bulleted (unordered) list. We can then use the <LI> (List Item) tag to add bulleted items to the list. Attribute: 1. Style Specifies Style sheet commands that apply to the contents of the unordered list. 2. Title Specifies text assigned to the tag. We might use this attribute for context-sensitive help within the document. Browsers may use this to show tool tips over the unordered list. 3. Type (square,circle,disc) Specifies the bullet type for ach unordered list item. If we omit this attribute, the browser chooses a default type.

<LI> Places items into unordered lists. Attribute: 1. Style Specifies style sheet commands that apply to the list item. 2. Title Specifies text assigned to the tag. We might use this attribute for context-sensitive help within the document. Browsers may use this to show tool tips over the list item. 3. Type Specifies the numbering for each ordered list item. If we omit the type attribute, the browser chooses a default type. 4. Value Sets a number in an ordered list. Use this attribute to continue a list after interrupting it with something else in our document.

Example:

<html><body bgcolor="darkturquoise"> <h1>Example for Unordered List</h1> <h2>Courses Offered in CSC</h2> <ul> <li>HDCA <li>DCA <li>PCP <li>.NET <li>J2EE </ul> <ul type="circle"> <li>HDCA <li>DCA <li>PCP <li>.NET <li>J2EE </ul>

Example (Contd): <ul type ="disc"> <li>HDCA <li>DCA <li>PCP <li>.NET <li>J2EE </ul> <ul type ="square"> <li>HDCA <li>DCA <li>PCP <li>.NET <li>J2EE </ul> </body> </html>

Output

<html> <body bgcolor =feldspar> <h2>Branches of CSC</h2> <ul> <li style="background:wheat">T.Nagar <li type = 1>Anna Nagar <li value=5>Ambattur <li title = "List Item">Mylapore </ul> <ul style="background:dusty rose" title = "Branches" type = "circle"> <li>Salem <li>Hosur <li>Thuraiyur <li>Trichy Output </ul> </body> </html>

Example:

DEFINITION LIST Definition List can be useful for providing two levels of information. We can think of definition lists as dictionary entries we have two levels of information; the entry, followed by a definition. We can use these lists to provide glossary type information, or we can use them to provide two-level lists. Definition List <DL> - Contains the <DT> and <DD> tags that form the term and definition portions of a definition list.

Definition Term <DT> - Contains the terms inside a definition list. Place the <DT> tags inside <DL> tags.
Definition Description <DD> - Contains a definition in a definition list. Use this tag inside <DL> tags. This tag can contain block level elements. Attribute: 1. Style & 2. Title

Example: <html> <body bgcolor = gold> <h2>Example for Definition List</h2> <dl> <dt>HTML <dd style = "background:blue;color:white">Hyper Text Markup Language <dt>XML <dd title = "Definition">Extensible Markup Language <dt>SGML <dd>Standard Generalised Markup Languages </dl> </body> Output </html>

MARQUEE TAG Displays a scrolling text message within a document. Only Internet Explorer recognizes this tag. Attributes: 1. Height Specifies the vertical dimension of the marquee. 2. Behavior Indicates the type of scrolling. a. Scroll Scrolls text from one side of the marquee, across, and off the opposite side. b. Slide Scrolls text from one side of the marquee, across, and stops when the text reaches the opposite side. c. Alternate Bounces the marquee text from one side to the other. 3. Bgcolor Specifies the background color of the marquee. 4. Direction Indicates the direction in which the marquee text scrolls. (Left, Right, Top, Bottom) 5. Width Specifies the horizontal dimension (in pixels) of the marquee.

Attributes (Contd): 6. Loop Controls the appearance of the marquee text. 7. Scroll amount Indicates how far (in pixels) the marquee text shifts between redraws. Decrease this value for a smoother (but slower) scroll; increase it for a faster (but bumpier) scroll. 8. Scroll Delay Indicates how often (in milliseconds) the marquee text redraws. Increase this value to slow the scrolling action; decrease it to speed the scrolling action. 9. Style Specifies style sheet commands that apply to the text within the <marquee> tags.

10. Title - Specifies text assigned to the tag. We might use this attribute for context-sensitive help within the document. Browsers may use this to show tool tips over the marquee.

Example: <html> <body bgcolor = "yellow" text="red"> <marquee>Computer Software College</marquee> <br> <font face ="Arial" size = 6 color = "green"><marquee bgcolor = "lime">CSC Welcomes you</marquee></font> <br> <br> <marquee direction = "right">Welcome To the World of Computers</marquee> <br> <marquee direction = "left">Hello World</marquee> </body> </html> Output

Example: <html> <body bgcolor = goldenrod> <h2>Example for Marquee</h2> <br><marquee direction = "up">CSC - Boon for Middle Class</marquee><br> <marquee direction = "down">Computers - A must for Today's World</marquee><br> <marquee behavior = "slide">.Net has been introduced in CSC</marquee><br> <marquee behavior = "scroll">J2EE is an Advanced Java Course</marquee><br> <marquee behavior = "alternate">CSC - Best Software Training Centre</marquee> </body> Output </html>

Example: <html> <body bgcolor = "green copper"> <h2>Example for Marquee Tag</h2> <marquee loop=3 behavior="alternate">CSC - Boon for Middle Class</marquee><br> <marquee scrollamount=100 scrolldelay=1000>CSC - To study Computers is an Economical Way</marquee> <br> <marquee><img src = "c:\html\flower.jpg" height=100 width=100></marquee> <br> <marquee height=50 width=300>Tally - Accounting Software</marquee> </body> Output </html>

PARAGRAPH AND PREFORMATTED TAG <P> - Indicates a paragraph in a document. Attributes: 1. Align (Left, Right, Center) Aligns paragraph text flush left, flush right or in the center of the document. 2. Style & Title <PRE> - Contains preformatted plain text. This is useful for including computer program output or source code within our document. Attributes:

1. Style
2. Title

Example:

<html> <body bgcolor = "Khaki"> <h2>Example for Paragraph and Preformatted Tag</h2> <p align="center"> Notepad is a basic text editor that you can use to create simple documents. The most common use for Notepad is to view or edit text (.txt) files, but many users find Notepad a simple tool for creating Web pages.</p> <pre> #include<stdio.h> void main() { printf("Hello World \n"); } Output </pre> </body> </html>

LINK TAG Anchor tag <a> - Identifies a link or a location within a document. We commonly use this tag to create a hyperlink, using the href=attribute. We can also use the <A> tag to identify sections within a document, using the name = attribute. Attributes: 1. Href Specifies the relative or absolute location of a file to which we want to provide a hyperlink. 2. Style Specifies style sheet commands that apply to the contents within the <a> tags. 3. Target Specify _new to open the linked document in a new window or specify _self to open the linked documents in the same window. 4. Name Marks a location within the current document with a name. The browser can then quickly move to specific information within a document.

Example: <html> <body bgcolor = "hunter green" link="blue" alink=yellow" vlink="red"> <a href = "c:\html\third.html" style="background:pink" target=_new>CLICK HERE TO GO TO FIRST PAGE</a> </body> Output </html> Notes:alink stands for activelink i.e while clicking the color is displayed Vlink stands for visited link-after clicking the color is displayed Link is used to display the color before clicking the link.

LINKS WITHIN THE SAME PAGE

Example:
<html> <head> <title>Example for Link</title> </head> <body bgcolor = "lightgreen" link="red" alink="blue" vlink="yellow"> <a name = "first"> <h1>This is the first Paragraph</h1> <pre style="font-size:70"> Navigate a document with the Document Map Document headings must be formatted with built-in heading styles in order to display in the Document Map. On the View menu, click Document Map. Select the level of headings to display. Do any of the following:

Example (Contd): To display all headings at a specific level or below, right-click a heading in the Document Map, and then click a number on the shortcut menu. For example, click Show Heading 3 to display heading levels 1 through 3. </pre> </a> <a name = "second"> <h2>This is the Second Paragraph</h2> <pre style="font-size:70"> <font color="red">To collapse the subordinate headings under an individual heading, click the minus sign (-) next to the heading. To display the subordinate headings under an individual heading, click the plus sign (+) next to the heading

Example (Contd): Click a heading in the Document Map you want to navigate to. The insertion point in the document will move to the selected heading. When you're through, click Document Map on the View menu to close the pane </font> </pre> </a> <a href = link1.html#first">CLICK HERE FOR FIRST PARA</a> <br> <a href = link1.html#second">CLICK HERE FOR SECOND PARA</a> </body> Output </html>

FORM TAG <Form> - Sets up a container for a form tag. Within the <form> tags we can place form input tags. Attributes: 1. Method (Post, Get) Changes how form data is transmitted to the form processor. When we use method=get, the form data is given to the form processor in the form of an environment variable (Query String). When we use method=post, the form data is given to the form processor as the standard input to the program. 2. Name Assigns the form a name. 3. Style & Title FIELDSET & LEGEND TAG <Fieldset> - Groups related form elements <Legend> - Specifies a description for a fieldset. Use inside <fieldset> tags.

INPUT TAG <Input> - Identifies several input methods for forms. This tag must appear between the opening and closing <form> tags. Attributes: 1. Checked Use with type = Radio or type = checkbox to set the default state of those input methods to true. 2. Maxlength = n Indicates the number of characters we can enter into a text input field and is only useful to input methods of type Text or Password. 3. Name Gives a name to the value we pass to the form processor. 4. Read Only Indicates that changes to the input method data cannot occur.

Attributes (Contd): 5. Size Specifies the width of the input method. This applies only to input methods of type Text or Password. 6. Style specifies Style Sheet commands that apply to the input element.

7. Tabindex Specifies where the input method appears in the tab order.
8. Title Specifies text assigned to the tag.

9. Type Indicates the kind of input method to use. Valid values are TEXT, PASSWORD, RADIO, CHECKBOX, SUBMIT, RESET, IMAGE, FILE, HIDDEN, and BUTTON. a. TEXT produces a simple one-line text input field that is useful for obtaining simple data. b. PASSWORD gives the visitor a simple one-line text input field similar to the TEXT type, but the user cannot see what they type.

Attributes (Contd): c. RADIO produces a small radio button that can be turned on and off. The user can select only one of the several items.

d. CHECKBOX to select multiple values.


e. SUBMIT produces a button that, when selected, submits all the name-value pairs to the form processor.

f. RESET sets all the input methods to their empty or default settings.
g. IMAGE replaces the submit button with an image.

h. BUTTON creates a button with no specific behavior that can interact with scripts.
10. Value Sets the default input value method.

Example: <html> <body bgcolor = "tan"> <form name = "frm"><fieldset> <legend>Student Details</legend> Enter your Name: <input type = text name = txt1 value="" size="10" maxlength=8 accesskey=T tabindex=20> <br> Enter your Name: <input type = text name = txt1 value="" size="10" maxlength=8 accesskey=T tabindex=20> <br> Enter the Password :<input type = password name = pwd> <br> Enter the Sex :<input type = radio name = r value="MALE">MALE <input type = radio name = r value="FEMALE">FEMALE <br> Select the Course :<input type = checkbox name = c1

Example (Contd): <input type = checkbox name = c2 value="DCA">DCA <input type = checkbox name = c3 value="PCP">PCP <br> <input type = file> <br> <input type = reset value = "CLEAR"> <br> <input type = button name = cmd value = "CLICK ME"> <br> <input type = hidden value="ABIRAMI"> <br> <input type = image src = "c:\html\flower1.jpg" height=200 width=200><br> <input type = submit value = SEND> </fieldset> Output </form></body></html>

SELECT TAG SELECT <select> - Specifies a selection list within a form. Use the <option> tags to specify items in the selection list. Attributes:

1. Accesskey Indicates a keystroke associated with the selection list.


2. Multiple Indicates that a visitor can select more than one selection list item at the same time. 3. Name Gives a name to the value we are passing to the form processor.

4. ReadOnly Indicates that the visitor cannot modify values within the selection list.
5. Size Specifies the number of visible items in the selection list.

OPTION TAG OPTION <option> - Indicates items in a fill-out form selection list.

Attributes:
1. Selected Marks a selection list item as preselected.

2. Title - Specifies text assigned to the tag. We might use this attribute for context-sensitive help within the document. Browsers may use this to show tool tips over the selection list option.
3. Value Indicates which data is sent to the form processor if we choose the selection list item. If the value=attribute is not present within the <option> tag, the text between the <option> tags is sent instead.

TEXTAREA TAG TEXTAREA <textarea> - Defines a multiple-line text input field within a form. Place the <textarea> tags inside the <form> tags. To specify a default value in a <textarea> field, place the text between the <textarea> tags.

Attributes:
1. Accesskey - Assigns a keystroke sequence to the <textarea> element.

2. Cols Indicates the width of the text input field.


3. Name Names the value we pass to the form processor. 4. ReadOnly Specifies the visitor cannot change the contents of the text input field. 5. Rows Indicates the height of the text input field. 6. Tabindex Indicates where <textarea> appears in the tabing order.

Example:

<html> <body bgcolor = "Orange"> <center><h1>Example for TextArea and Select Tag</h1></center> <textarea name=txt title=Type the text></textarea> <br> <textarea rows=10 cols=10></textarea> <br> <select multiple name = "aaa" size = 3> <option value=1>HDCA <option value=2 selected>PCP <option value=3>DCA <option value=4 title=Web>DIWT </select> Output <input type = submit value = "SEND"> <br> </form></body></html>

FRAMESET TAG <Frameset> - Contains frame definitions and specifies frame spacing, dimensions, and attributes. Place <Frame> tags inside <Frameset> tags. Attributes:

1. Border Specifies the thickness of borders around frames defines within the frameset.
2. Bordercolor Sets the color of the frame borders.

3. Cols & Rows Specifies the number and dimensions of the vertical frames within the current frameset. Set Cols = to a comma separated list of numbers or percentages to indicate the width of each frame. Use the asterisk(*) to represent a variable width. Similarly Rows can also be given for horizontal frames.
4. FrameSpacing Specifies the space between frames within the browser window.

FRAME TAG

<Frame> - Defines a frame within a frameset. The <frame> tag specifies the source file and visual characteristics of a frame.
Attributes: 1.Marginheight Specifies the vertical dimension of the top and bottom margins in a frame. 2. Marginwidth Specifies the horizontal dimension of the left and right margins in a frame. 3. Name Gives the frame we are defining a name. 4. Noresize Makes a frames dimensions unchangeable.

5. Scrolling Yes/No Indicates whether a scrollbar is present within a frame.


6. Src Specifies the relative or absolute location of a document that we want to load within the defined frame.

Example 1: <html> <frameset cols = "40%,30%"> <frame src = "c:\html\form.html" name="frame" Output marginheight=5 marginwidth=10 noresize> <frame src = "c:\html\marquee.html" scrolling="yes"> </html> Example 2: <html> <frameset rows = "40%,*" framespacing=30> <frame src = "c:\html\link.html" scrolling="yes"> <frame src = "c:\html\link1.html" scrolling="no"> </html> Output

Example 3: <html> <frameset rows = "20%,50%" border=30 bordercolor="green"> <!-frameset rows = "40%,*" --> <frame src = "c:\html\form.html" scrolling="yes"> <frame src = "c:\html\marquee.html" scrolling="no"> </html>

Output

TABLE TAG Table - <Table> - Specifies a container for a table within our document. Inside these tags we can place <TR>,<TD>,<TH> and <CAPTION> tags. Attributes:

1. Align = Left,Centre,Right Positions the table flush left, flush right or in the center of the window.
2. Background Specifies the relative or absolute location of a graphic image file loaded as a background image for the entire table. 3. Bgcolor Specifies the background color within all table cells in the table. 4. Border Specifies the thickness of borders around each table cell. 5. Bordercolor Specifies the color of the borders of all the

Attributes (Contd): 6. Bordercolordark Specifies the darker color used to draw 3D borders around the table cells. 7. Bordercolorlight Specifies the lighter color used to draw 3D borders around the table cells. 8. CellPadding Specifies the space between the edges of the table cells and their contents.

9. Cellspacing Specifies the space between the borders of table cells and the borders of adjacent cells.
10. Cols Specifies the number of columns in the table.

11. Frame Specifies the external border lines around the table. For the frame=attribute to work, set the border=attribute with a non-zero value. (Void, Above, Below, Hsides, Vsides, Lhs, Rhs, Box)
12. Rules Specifies where rule lines appear inside the table. (None, All, rows, Cols).

TABLE ROW,TABLE HEADING,TABLE DATA TAGS TR - <tr> - Contains a row of cells in a table. We must place the <tr> tags inaide the <table> container which can contain <th> and <td> tags.

TH - <th> - Contains table cell headings. The <th> tags are identical to the <td> tags except that text inside <th> is usually emphasized with bold face font and centered wihin a cell.
TD - <td> - Contains a table cell. These tags go inside the <tr> tags. Caption Use inside <table> tags to specify a description for a table. Attributes: Align, Bgcolor, Bordercolor, Style, Title, Bordercolordark, Bordercolorlight can be used inside the <TR> , <TH> and <TD> tags.

Example 1:

<html> <body bgcolor = sienna"> <table bgcolor=thistle border=10 bordercolor="green"rules="all" frame="box" cellpadding=10 cellspacing=8 align=center cols=3> <caption>STUDENT DETAILS</caption> <tr><th>SNO</th> <th>SNAME</th> <th>MARKS</th> </tr><tr> <td align="center">11</td> <td bordercolor=brown>abirami</td> <td bgcolor="yellow">89</td> Output </tr><tr> <td>22</td> <td>harini</td> <td><b>98</b></td> </tr></table></body></html>

Example 2: <html> <body bgcolor = sienna"> <table background = "c:\html\flower3.jpg" align="center" rules="all" frame="void"> <tr> <th>COURSE</th> <th>FEE</th> </tr><tr> <td>HDCA</td> <td>8000</td> </tr><tr> <td>DCA</td> Output <td>5400</td> </tr><tr> <td>PCP</td> <td>5400</td> </tr></table></body></html>

COL, COLGROUPTAGS Col Specifies attributes for a table column. Colgroup Specifies characteristics for a group of table columns Attributes: Align, Style, Title attributes can be used in the above tags. Rowspan & Colspan attributes can be used in <TH> and <TD> tags. Rowspan Specifies that a table cell occupy more rows than the default of 1. This is useful if several rows of information relate to one category. Colspan Specifies that a table cell occupy more columns than the default of one. This is useful if a category name applies to more than one column of data.

Example: <html> <body bgcolor = salmon> <table border=5 bordercolor="blue align=center color=silver> <colgroup><col align=center><col align = right></colgroup> <tr><th rowspan=2>ENO</th> <th rowspan=2>ENAME</th> <th colspan=2>NETPAY</th> </tr><tr><th>SALARY</th> <th>COMM</th></tr><tr> <td>1</td> <td>PRIYA</td><td>6780</td> <td>780</td></tr><tr><td>2</td> Output <td>ABI</td> <td>4880</td> <td>560</td> </tr><tr><td>3</td><td>GOWRI</td><td>9840</td> <td>875</td></tr></table></body></html>

IMG TAG TO INSERT IMAGES

IMG - <img> - Places an inline image in a document.


Attributes: 1. Align Specifies the appearance of text that is near an inline graphic image. For example, if we use RIGHT, the image appears flush to the right edge of the document, and the text appears to its left. (Left, Middle, Baseline, Absbottom) 2. Border Specifies the width of a border around an image. 3. Dynsrc Specifies the relative or absolute location of a dynamic image (Video file) 4. Height Specifies the vertical dimension of the image. If we dont use this attribute, the image appears in the default height. 5. Alt Provides a textual description of images, which is useful for visitors who have text-only browsers.

Attributes (Contd): 6. Hspace Establishes a margin of white space to the left and right of a graphic image. 7. Ismap Indicates that the graphic image functions as a clickable image map. 8. Loop Indicates the number of times a video file plays back. 9. Name Specifies a name by which bookmarks, scripts and applets can reference the image. 10. Src Specifies the relative or absolute location of a file that contains the graphic image we want to embed in a document.

11. Start = Mouse over starts playback when a visitor places the mouse pointer over the image.
12. Vspace Establishes a margin of white space above and below a graphic image. 13. Width Specifies the horizontal dimensions of the image.

Example:

<html> <body bgcolor = "deepskyblue"> <img src = "c:\html\flower3.jpg" height=200 width=200 border=10 alt=Picture of a Flower> <br> <br> <img dynsrc = "c:\html\clock.avi" loop=3> <br> <br> <img ismap src = "c:\html\flower2.jpg" height=150 width=150 vspace=100 hspace=50 name=img> </body> </html> Output

Example 2: <html> <body bgcolor = "lavender"> <p> <img src = "c:\html\tree.jpg" height=300 width=300 align="right"> Internet Explorer makes it easier to get the most from the World Wide Web, whether you are searching for new information or browsing your favorite Web sites. Built-in IntelliSense technology can save you time completing routine Web tasks, such as automatically completing Web addresses and forms for you, and automatically detecting your network and connection status. </p> Output </body> </html>

BGSOUND TAG TO INSERT AUDIO

<bgsound> - Embeds a background sound file within documents.


Attributes: 1. Loop Specifies the number of times a background sound file repeats. The value infinite is the default. 2. Src Indicates the explicit or relative location of the sound file. Example: <html> <body bgcolor = "Olive"> <bgsound src = "barbie.mp3" loop=10> </body> Output </html>

MAP & AREA TAG Map <map> - Specifies a container for client-side image map data. Inside the <map> container, we place instances of the <area> tag. Attributes: 1. Name Establishes a name for the map information we can later reference by the usemap=attribute of the <img> tag. Area <area> - Defines an area withina client side image map definition. It indicates an area where visitors can choose to link to another document. Attributes: 1. Coords Identifies the coordinates within an image map that define the image map area.

2. Href Identifies the location of the document we want to load when the indicated image map area is selected.
3. Shape Specifies the type of shape used to represent the image map area. ( Rect, Circle, Poly)

Example: <html> <map name = "map2"> <img src = c:\html\flower.jpg" usemap = #map2> <area shape = "circle" coords="24,45,67,78" href=form.html"> <area shape = "rect" coords = "167,278,295,320" href=table.html"> <area shape = "poly" coords = "256,267,278,289,298,245" href=marquee.html"> </map> </html> Hint: In the Browser use the Tab Key to view the shapes. Output

IFRAME TAG Iframe Creates floating frames within a document. Floating frames differ from normal frames because they are independently manipulable elements within another HTML document. Attributes: 1. Align 2. Border, Bordercolor 3. Framespacing 4. Height, Hspace

5. Width, Vspace
6. Margin Height, Margin Width 7. Noresize, Name, Scrolling, Src

Example: <html> <body bgcolor = Teal"> <iframe src="img.html" hspace=100 vspace=100 border=5 bordercolor="Lawngreen"> </iframe> <br> <iframe scrolling = "yes" name = "f1" src = "map.html" align="center"> </iframe> <br><br> <iframe name = "f2" frameborder="15" height=350 width=300 src= "img2.html"> </iframe> Output </body> </html>

HR TAG Horizontal Ruler <hr> - Draws horizontal lines (rules) in our document. This is useful for visually separating document sections. Attributes:

1. Align Positions the line flush left, flush right or in the center of the document. These settings are irrelevant unless we use the width=attribute to make the line shorter than the width of the document.
2. Color Specifies the color of the line. 3. Noshade Specifies that the browser not shade the line.

4. Size Specifies the thickness of the line.


5. Width Specifies the length of the line. 6. Style Specifies style sheet commands that apply to the horizontal line.

Example: <html> <body bgcolor = "violet"> <hr color = "darkseagreen"> <hr size=30 color="yellow"> <hr width =50% color="orange"> <hr color="darkorchid" width="30%" align="right"> <hr color = "snow" noshade> <hr style="color:indigo" width="60%"> </body> </html> Output

MENU AND LISTING TAG

Menu Defines a Menu List. Use the <LI> tag to indicate list items. Listing Specifies preformatted text to include within a document Example: <html> <body bgcolor = "dimgray" text ="cornflowerblue"> <h2>Countries of Asia</h2> <menu> <li>India <li>Bhutan <li>SriLanka <li>Bangladesh</menu><listing> ------------------SNO NAME ------------------Output 11 Abirami 33 Priya -------------------</listing></body></html>

STANDARD HTML CHARACTERS <html> <body bgcolor=firewall> <center> <h2>Character Entities</h2></center> &gt;<br>&lt;<br>&quot;<br>&times;<br>&divide;<br>&amp; <br>&hearts;<br>&diams;<br>&spades;<br>&clubs;<br> &pound;<br>&cent;<br>&copy;<br>&reg;<br>&trade;<br> &yen;<br>&alpha;<br>&beta;<br>&rArr;<br>&lArr;<br> &sum;<br>&le;<br>&ge;<br>&pi;<br> </body> </html> Output

You might also like