KEMBAR78
Basic HTML | PDF | Hyperlink | Html Element
Scribd
Upload
8 views85 pages

Basic HTML

Uploaded by

shilpa1807d
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
8 views85 pages

Basic HTML

Uploaded by

shilpa1807d
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 85

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>
</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. Eg-
#000000
Background – To insert a background image.
HTML supports .jpg and .gif files.
Output
Output
Example - background:

<html>
<head>
<title>Example for Body
Tag</title> Output
</head>
<body background =
“flower.jpg”>
</body>
</html>
HEADING
Specifies headings TAGS
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
Example: text.
Output
<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>
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>
<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
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>
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
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>
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,
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>
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.
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>
</html>
Output
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
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> Output
</html>
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>
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
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>
Example:
<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
</ul>
</body>
</html>
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.
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>
</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
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
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>
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>
</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 -
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>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre></body>
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>
</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>
</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.
Attributes (Contd):
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.
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.
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.
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
value="HDCA">HDCA
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>
</form></body></html>
Output
SELECT TAG
SELECT <select> - Specifies a selection list within a form. Use the
<option> tags to specify items in the selection list.
Attributes:
1. Access key – 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. Read Only – 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. Access key - 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. Read Only – Specifies the visitor cannot change the contents of the text
input field.
5. Rows – Indicates the height of the text input field.
6. Tab index – Indicates where <textarea> appears in the tabing order.
<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>
<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. Border color – 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. Frame Spacing – 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 frame’s dimensions
unchangeable.
5. Scrolling – Yes/No – Indicates whether a scrollbar
is present within a frame.
Example
1:
<html>
<frameset cols = "40%,30%">
<frame src = "c:\html\form.html" name="frame"
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>
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>
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 table cells in
the table.
Attributes (Contd):
6. Bordercolordark – Specifies the darker color used to
draw 3-D borders around the table cells.
7. Bordercolorlight – Specifies the lighter color used to
draw 3-D 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 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>
</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>
<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
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>
<td>ABI</td>
<td>4880</td>
<td>560</td>
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 don’t 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.
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>
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>
</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>
</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:

Hint: In the Browser use the Tab


Key to view the shapes.
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>
</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>
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
-------------------
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>&trad
e;<br>
&yen;<br>&alpha;<br>&beta;<br>&rArr;<br>&lArr;<
br>
&sum;<br>&le;<br>&ge;<br>&pi;<br>
</body>
</html>

You might also like