Scribd
Upload
28 views

HTML-Slide-Presentation

Uploaded by

deepika
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

HTML-Slide-Presentation

Uploaded by

deepika
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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>
</html> Output
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 Output
</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 Output
</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>
Output
<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 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> 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>
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> Output
</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
Output
</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. 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>
</html> Output
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");
}
</pre> Output
</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>
<input type = submit value = "SEND"> Output
<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 frame’s 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 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.
(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>
</tr><tr> Output
<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> Output
</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>
<td>ABI</td> Output
<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
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.
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>
</body> Output
</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> Output
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>

Output
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> Output
</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
-------------------
11 Abirami Output
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