Scribd
Upload
3 views

ch2 html (2)

Chapter two introduces HTML, the Hypertext Markup Language used for creating web pages, explaining its fundamental concepts such as hypertext, markup language, and the structure of HTML documents. It covers basic HTML syntax, including tags, elements, and attributes, as well as practical steps for creating and viewing HTML files using text editors. Additionally, it discusses various HTML elements for formatting text, structuring documents, and enhancing visual presentation.

Uploaded by

ebra4842
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

ch2 html (2)

Chapter two introduces HTML, the Hypertext Markup Language used for creating web pages, explaining its fundamental concepts such as hypertext, markup language, and the structure of HTML documents. It covers basic HTML syntax, including tags, elements, and attributes, as well as practical steps for creating and viewing HTML files using text editors. Additionally, it discusses various HTML elements for formatting text, structuring documents, and enhancing visual presentation.

Uploaded by

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

Chapter two

Introduction to HTML

05/26/2025 1
HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
• Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a
hypertext. Every time when you click on a word which brings you to a new webpage, you
have clicked on a hypertext.
• It is the way in which Web pages (HTML documents) are linked together. Thus the link
available on a webpage are called Hypertext
• Markup language: A markup language is a programming language that is used make text
more interactive and dynamic. It can turn a text into images, tables, links etc.
• HTML documents are described by HTML tags
• Each HTML tag describes different document content.
• As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark up" a text document with tags that tell a Web browser how to structure it to
display.
05/26/2025 2
HTML Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

05/26/2025 3
Example Explained
• The <!DOCTYPE html> declaration defines that this document is an HTML document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
• Using this description, a web browser can display a document with a heading and a
paragraph.

05/26/2025 4
HTML Editors
• We can write HTML Using Notepad or other TextEditor tools
• HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor or notepad ++
• However, for learning HTML it is recommend a text editor like Notepad (PC) or TextEdit
(Mac) or notepad++ since using a simple text editor is a good way to learn HTML.
4 main steps to create web page with Notepad
• Step 1: Open Notepad
• To open Notepad in Windows 7 or earlier:
• Click Start (bottom left on your screen).
• Click All Programs. Click Accessories. Click Notepad.
• To open Notepad in Windows 8 or later:
• Open the Start Screen (the window symbol at the bottom left on your screen). Type
Notepad.
05/26/2025 5
• Step 2: Write Some HTML
• Write or copy some HTML into Notepad notepad++.
• Step 3: Save the HTML Page
• Save the file on your computer.
• Select File > Save as in the Notepad menu.
• Name the file "index.htm" or any other name ending with htm.
• UTF-8 is the preferred encoding for HTML files.
• ANSI encoding covers US and Western European characters only.
• You can use either .htm or .html as file extension. There is no difference, it is up to you.
• Step 4: View HTML Page in Your Browser
• Open the saved HTML file in your favorite browser.
• To open a file in a browser, double click on the file, or right-click, and choose open with.
• All HTML documents must start with a type declaration: <!DOCTYPE html>.
• The HTML document itself begins with <html> and ends with </html>
• The visible part of the HTML document is between <body> and </body>.
05/26/2025 6
HTML Tags
• HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag (opening tag), the second tag is the end tag () closing tag
• The end tag is written like the start tag, but with a slash before the tag name.
• Some tags can admit attributes, being able to have a value each one of these attributes. This
value is written between quotation marks (“) if this value is alphanumeric.
• E.g. <tag attribute 1= numeric attribute 2 = “alphanumeric”>
• <FONT FACE="arial" SIZE=+2 color="red">

05/26/2025 7
Structure of documents
• Head : is used to facilitate information about the document and is defined for:
<head> foreword </head>
• Inside the head we can highlight the title that indicates the name of the document.
<title> </title>
<html>
<head>
<title> Welcome to our quick guide </title>
</head> </html>
• The title tag can be also used outside of the head.
<html> <head>
<!--made by John--> //comment
</head>
<title> Welcome to our quick guide </title>
05/26/2025 8
</html>
BODY : The rest of the document will reside between the tags <body> and </body>.
• This is the minimum structure that should have all HTML document.
<html><head><title> Welcome to our quick guide</title> </head>
<body> Document </body> </html>
New Lines/Spacing : are very important for making any website.
• In order to create a new line you would add the following code: <br> This element only
has initial tag and it indicates a line jump or a line break.
• When using HTML, you can use just a space, but only up to the first space, beyond the first
space, the web-browser will just ignore.
• So in order to do any amount, you must use the following code for each space wanted:
&nbsp;
• Example
<FONT FACE="arial" size="- 1">"This&nbsp;&nbsp;is&nbsp;&nbsp;my&nbsp;&
nbsp;house."

05/26/2025 9
Changing Font Color/Face/Size
• Changing the font color, face and size are all relatively simple, and are all contained within
the same HTML function. In order to just change the color, you can do the following:
• <FONT COLOR="red">This is the text that the color applies to</FONT>
• The output will be: This is the text that the color applies to
• Within the color field you may name a color, as shown, or you may use the HEX code of the
color, which is the preferred method, as seen below:
• <FONT COLOR="#FF0000">This is the text that the color applies to</FONT
• The output will be: This is the text that the color applies to
• The color in hex code has a lot more ability and it is recommended to use it so that you can
have a unique website.
• The hex code of red then green and blue, all up to 255 but in hexadecimal code but not all
monitors display all colors.

05/26/2025 10
• Colors codes

• Changing the face of a font is also very simple and useful. but if a user
does not have that font installed on their computer, then it will just show
the default font.
• You can change the face by using the following code:
<FONT FACE="Webdings">This is the text that it applies to</FONT>

05/26/2025 11
• You can change the font size using two basic methods i.e. using the size attribute(can change
the font from 1 to 7), or by using the style attribute.
• Using size attribute: <FONT SIZE="5">This is the text that it applies to</FONT>
• Another method is make the font change, compared to what it was right before as can be
seen here: <FONT SIZE="+2">This is the text that it applies to</FONT>
• As you can notice the font size increased by two font sizes from what it was right before.
• You can go from -7 to +7, where the -7 decreases the font size by seven and the positive
increases it by seven.
• Another method of changing the font size it by using the following:
<SMALL>The small text</SMALL> --- to get the small text
<BIG>The big text</BIG> --- --- to get the small text
• The more commonly seen font size can be changed by using the font style attribute.
<FONT STYLE="Font-Size:20px;">This is the text that it applies to</FONT>
• By using this, you can easily modify the font size from 1 and on. This is what most
programs and websites use as their font size.
05/26/2025 12
Bolding/Italicizing/Underlining/Striking
• You may also want to bold, italicize, or underline some of you website. It is very good for
making things stand out.
• You can bold something using: <B> </B> or <STRONG> </STRONG>
e.g. <B>This is the text that it applies to</B>
<STRONG>This is the text that it applies to</STRONG>
• The output of both will be bold text like this: This is the text that it applies to
• You can italicize something using: <I> </I> or <EM> </EM>
e.g. <I>This is the text that it applies to</I>
<EM>This is the text that it applies to</EM>
• The output of both will be bold text like this: This is the text that it applies to
• You can underline something using: <U> </U> or <EM> </EM>
e.g. <U>This is the text that it applies to</U>
• The output will be like: This is the text that it applies to
05/26/2025 13
• You may also strikethrough text by using the following:
<STRIKE>This is the text that it applies to</STRIKE>
• The output will be :
• The purpose of a web browser like (Chrome, IE, Firefox, Safari) is to read HTML
documents and display them.
• The browser does not display the HTML tags, but uses them to determine how to display the
document.
Bgcolor
• The bgcolor attribute specifies a background-color for an HTML page. The value of this
attribute can be a hexadecimal number, an RGB value, or a color name:
• The following examples set the background color to black
• <body bgcolor="#000000">
• <body bgcolor="rgb(0,0,0)">
• <body bgcolor="black">

05/26/2025 14
• Background :The background attribute can also specify a background- image for an HTML
page.
• The value of this attribute is the URL of the image you want to use.
• If the image is smaller than the browser window, the image will repeat itself until it fills the
entire browser window.
• Examples <body background="clouds.gif">
<body background="http://prof.edu/html/graphics/clouds.gif">
• HTML Page Structure
• Only the <body> area (the white area) is
displayed by the browser.

05/26/2025 15
The <!DOCTYPE> Declaration : helps the browser to display a web page correctly.
• There are different document types on the web and to display a document correctly, the
browser must know both type and version.
• The doctype declaration is not case sensitive. All cases are acceptable.
Common Declarations
• HTML5 ---- <!DOCTYPE html>
• HTML 4.01 ---- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• XHTML 1.0 ---- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
• HTML versions : Since the early days of the web, there have been many versions of
HTML: HTML(1991), HTML 2.0 (1995), HTML 3.2(1997), HTML 4.01 (1999), XHTML
(2000), HTML5 (2014)

05/26/2025 16
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags:
Example : <h1>This is a heading</h1>, <h2>This is a heading</h2> etc
• Any document starts with a heading. You can use different sizes for your headings.
• HTML also have six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
• While displaying any heading, browser adds one line before and one line after that heading.
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
Example <p>This is a paragraph.</p> , <p>This is another paragraph.</p>
• The <p> tag offers a way to structure your text into different paragraphs.
• Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the
example:
This will produce following result:
<!DOCTYPE html>
<html> <head> <title>Paragraph Example</title> </head>
<body> <p>Here is a first paragraph of text.</p> <p>Here is a second paragraph of text.</p>
</body> </html>
05/26/2025 17
• Whenever you use the <br /> element, anything following it starts from the next line.
• This tag is an example of an empty element, where you do not need opening and closing
tags, as there is nothing to go in between them.
• The <br /> tag has a space between the characters br and the forward slash.
• If you omit this space, older browsers will have trouble rendering the line break, while if
you miss the forward slash character and just use <br> it is not valid in XHTML.
• E.g.
<!DOCTYPE html>
<html> <head>
<title>Line Break Example</title> </head>
<body> <p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p> </body> </html>
05/26/2025 18
• You can use <center> tag to put any content in the center of the page or any table cell.
<!DOCTYPE html>
<html> <head><title>Centring Content Example</title>
</head>
<body><p>This text is not in the center.</p><center>
<p>This text is in the center.</p>
</center></body>

• Horizontal lines are used to visually break up sections of a document. The <hr> tag
creates a line from the current position in the document to the right margin and breaks the
line accordingly.

05/26/2025 19
e.g.<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
• Again <hr /> tag is an example of the empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
• The <hr /> element has a space between the characters hr and the forward slash. If you omit
this space, older browsers will have trouble rendering the horizontal line, while if you miss
the forward slash character and just use <hr> it is not valid in XHTML.
• You can also change the width of the line as well as align them to the left, the center or the
right, as can be seen here: <HR ALIGN="left" WIDTH="50%">
• You can also change the height in pixels by using the size attribute in the following way: <HR
SIZE="5"><HR ALIGN="left" WIDTH="43%" >
• Width is thickness, size is height
05/26/2025 20
• You can also change the color of the line by using the color attribute
<HR ALIGN="left" WIDTH="43%" SIZE="40“ color="blue">
<HR ALIGN="left" WIDTH="43%" SIZE="40“ color=blue>
• Sometimes you want your text to follow the exact format of how it is written in the HTML
document. In those cases, you can use the preformatted tag.
• Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.
An HTML element is defined by a starting tag.
• If the element contains other content, it ends with a closing tag, where the element
name is preceded by a forward slash as shown below with few tags:
• <p>....</p> is an HTML element, <h1>...</h1> is another HTML element etc.
There are some HTML elements which don't need to be closed, such as
<img.../>, <hr /> and <br /> elements. These are known as void /empty
elements.

05/26/2025 21
• HTML documents consist of a tree of these elements and they specify how HTML
documents should be built, and what kind of content should be placed in what part of an
HTML document.
• An HTML element is defined by a starting tag. If the element contains other content, it
ends with a closing tag.
• For example <p> is starting tag of a paragraph and </p> is closing tag of the same
paragraph but <p>This is paragraph</p> is a paragraph element.
• It is very much allowed to keep one HTML element inside another
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
• We have seen few HTML tags and their usage like heading tags <h1>, <h2> paragraph tag
<p> and other tags.
• We used them so far in their simplest form, but most of the HTML tags can also have
attributes,
05/26/2025 which are extra bits of information. 22
• An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag.
• All attributes are made up of two parts: a name and a value:
• The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the alignment of
paragraph on the page.
• The value is what you want the value of the property to be set and always put within quotations.
The below example shows three possible values of align attribute: left, center and right.
• Attribute names and attribute values are case-insensitive.
• However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute
values in their
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
05/26/2025 23
• The four core attributes that can be used on the majority of HTML elements (although
not all) are: id , title, class and style
Id Attribute
• The id attribute of an HTML tag can be used to uniquely identify any element within an
HTML page.
• There are two primary reasons that you might want to use an id attribute on an element:
• If an element carries an id attribute as a unique identifier it is possible to identify just that
element and its content.
• If you have two elements of the same name within a Web page (or style sheet), you can
use the id attribute to distinguish between elements that have the same name.
• let's use the id attribute to distinguish between two paragraph elements as shown below.
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>

05/26/2025 24
• The title Attribute : gives a suggested title for the element.
• The syntax for the title attribute is similar as explained for id attribute: The behavior of this
attribute will depend upon the element that carries it, although it is often displayed as a
tooltip when cursor comes over the element or while the element is loading.
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
• Now try to bring your cursor over "Titled Heading Tag Example" and you will see that
whatever title you used in your code is coming out as a tooltip of the cursor.
• The class Attribute : is used to associate an element with a style sheet, and specifies the
class of element. You will learn more about the use of the class attribute when you will
learn Cascading Style Sheet (CSS). The value of the attribute may also be a space-separated
list of class names.
• For example: class=“className1 className2 className3”
05/26/2025 25
• style Attribute : allows you to specify Cascading Style Sheet (CSS) rules within the
element.
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text</p>
</body> </html>
• The output will be : Some text

05/26/2025 26
The dir Attribute : determines how text will be presented within the entire document. When
used within another tag, it controls the text's direction for just the content of that tag.
allows you to indicate to the browser the direction in which the text should flow. It can take
one of two values, as you can see below
Value Meaning
• Ltr: Left to right (the default value)
• Rtl: Right to left (for languages such as Hebrew or Arabic that are read right to left)
• E.g.
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
05/26/2025 27
</html>
Generic attributes

05/26/2025 28
Monospaced Font
• The content of a <tt>…</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for
example, the letter ‘m’ is wider than the letter ‘i'). In a monospaced font, however, each
letter has the same width.
• <body>
• <p>The following word uses a <tt>monospaced</tt> typeface.</p>
• Output :
Superscript Text
• The content of a <sup>…</sup> element is written in superscript; the font size used is the
same size as the characters surrounding it but is displayed half a character's height above
the other characters.
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body> </html>
• Output :
05/26/2025 29
Subscript Text
• The content of a <sub>…</sub> element is written in subscript; the font size used is the same
as the characters surrounding it, but is displayed half a character's height beneath the other
characters.
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body> </html>
• Output :
Inserted Text : Anything that appears with-in <ins>...</ins> element is displayed as inserted
text.
 Deleted Text : Anything that appears within <del>...</del> element is displayed as deleted
text.
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
05/26/2025 30
• Output :
Marked Text : Anything that appears within <mark>...</mark> element, is marked with yellow
ink.
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body> </html>
Output :
Grouping Content
• The <div> and <span> elements allow you to group together several elements to create sections or
subsections of a page.
• The div tag is generally used by web developers to group HTML elements together and apply CSS
styles to many elements at once.(block elements like header and footer)
• For example, you might want to put all of the footnotes on a page within a <div> element to
indicate that all of the elements within that </div> element relate to the footnotes.
• You might then attach a style to this <div> element so that they appear using a special set of style
rules.
• The <span> element, on the other hand, can be used to group inline elements only. So, if you have
a part of a sentence or paragraph which you want to group together, you could use the <span>
05/26/2025 31
element.
<!DOCTYPE html>
<html> <head>
<title>Div tag</title>
<style>
div {
color: white;
background-color: #00FF00;
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<div> heading</div>
<div> sub heading</div>
<div> footer</div>
</body>
05/26/2025 32
</html>
<!DOCTYPE html>
<html>
<head>
<title>span tag</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<!-- Inside paragraph applying span tag
with different style -->
<p><span style="background-color:lightgreen">
GeeksforGeeks</span> is A Computer Science Portal
where you can<span style="color:blue;">
Publish</span> your own <span
style="background-color:lightblue;">articles</span>
and share your knowledge with the world!!
</p>
</body>
05/26/2025 33
</html>
Text Abbreviation : You can abbreviate a text by putting it inside opening <abbr> and
closing </abbr> tags. If present, the title attribute must contain this full description and
nothing else.
<body>
<p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>.</p>
</body>
• Output :
Acronym Element : allows you to indicate that the text between <acronym> and
</acronym> tags is an acronym. At present, the major browsers do not change the
appearance of the content of the <acronym> element.
• <body>
• <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
• </body> </html>
• Output :

05/26/2025 34
Text Direction : The <bdo>…</bdo> element stands for Bi-Directional Override and it is used to override the
current text direction.
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body> </html>
• Output :

• The <dfn>….</dfn>element (or HTML Definition Element) allows you to specify that you are introducing a
special term. Its usage is similar to italic words in the midst of a paragraph. Typically, you would use the
<dfn> element the first time you introduce a key term. Most recent browsers render the content of a <dfn>
element in an italic font.
Quoting Text : When you want to quote a passage from another source, you should put it in between
<blockquote>...</blockquote> tags.
• Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text,
and sometimes uses an italicized font.
• Short Quotations : The <q>…</q> element is used when you want to add a double quote within35a
05/26/2025
sentence.
Text Citations : If you are quoting a text, you can indicate the source placing it between
an opening< cite> tag and closing </cite> tag.
• As you would expect in a print publication, the content of the <cite> element is rendered
in italicized text by default.
Address Text :The <address>…</address> element is used to contain any address.
HTML Meta Tags : HTML lets you specify metadata - additional important information
about a document in a variety of ways.
• The META elements can be used to include name/value pairs describing properties of the
HTML document, such as author, expiry date, a list of keywords, document author etc.
• The <meta> tag is used to provide such additional information.
• This tag is an empty element and so does not have a closing tag but it carries information
within its attributes.
• You can include one or more meta tags in your document based on what information you
want to keep in your document but in general, meta tags do not impact physical
appearance of the document so from appearance point of view, it does not matter if you
include them or not.
05/26/2025 36
• Adding Meta Tags to Your Documents You can add metadata to your web pages by placing
<meta> tags inside the header of the document which is represented by <head> and
</head> tags.
• A meta tag can have following attributes in addition to core attributes:
Name : Name for the property. Can be anything. Examples include, keywords, description,
author, revised, generator etc.
Content : Specifies the property's value. scheme Specifies a scheme to interpret the
property's value (as declared in the content attribute).
http-equiv : Used for http response message headers. For example http-equiv can be used to
refresh the page or to set a cookie. Values include content-type, expires, refresh and set-
cookie.
• Specifying Keywords : You can use <meta> tag to specify important keywords related to
the document and later these keywords are used by the search engines while indexing your
webpage for searching purpose.
• Document Description: You can use <meta> tag to give a short description about the
document. This again can be used by various search engines while indexing your webpage
for searching purpose.
05/26/2025 37
• Document Revision Date : You can use <meta> tag to give information about when last
time the document was updated. This information can be used by various web browsers
while refreshing your webpage.
• Document Refreshing : A <meta> tag can be used to specify a duration after which your
web page will keep refreshing automatically.
HTML Comments
• Comment is a piece of code which is ignored by any web browser.
• It is a good practice to add comments into your HTML code, especially in complex
documents, to indicate sections of a document, and any other notes to anyone looking at the
code.
• Comments help you and others understand your code and increases code readability.
HTML comments are placed in between <!-- ... --> tag.
• So any content placed within <!-- ... --> tag will be treated as comment and will be
completely ignored by the browser.

05/26/2025 38
• Valid vs Invalid Comments : Comments do not nest which means a comment cannot be put
inside another comment.
• Second the double-dash sequence "--" may not appear inside a comment except as part of
the closing --> tag. You must also make sure that there are no spaces in the start- of-
comment string.
• But following line is not a valid comment and will be displayed by the browser. This is
because there is a space between the left angle bracket and the exclamation mark.
Multiline Comments : You can comment multiple lines comments by using beginning tag
<!-- and ending tag --> placed before the first line and end of the last line like single
comments.
• Marquee HTML tag is a non-standard HTML element which is used to scroll a image or
text horizontally or vertically.
• In simple words, you can say that it scrolls the image or text up, down, left or right
automatically.
Eg. <marquee direction="right" >This is an example of html marquee </marquee>
• Direction can be right, up or down and its default is left
05/26/2025 39
HTML Images
• Images are very important to beautify as well as to depict many complex concepts in
simple way on your web page.
• Insert Image : You can insert any image in your web page by using <img> tag. Following
is the simple syntax to use this tag.
<img src="Image URL" ... attributes-list>
<IMG SRC="images/one.gif" ALT="alternate text">
• The <img> tag is an empty tag, which means that it can contain only list of attributes and
it has no closing tag.
<body>
<p>Simple Image Insert</p>
<img src="test.jpg" alt="Test Image" >
</body>
• You can use PNG, JPEG or GIF image file based on your comfort but make sure you
specify correct image file name in src attribute.
05/26/2025 40
• Image name is always case sensitive. The alt attribute is a mandatory attribute which
specifies an alternate text for an image, if the image cannot be displayed.
• Set Image Width/Height : You can set image width and height based on your requirement
using width and height attributes.
• You can specify width and height of the image in terms of either pixels or percentage of its
actual size.
<img src="test.png" alt="Test Image" width="150" height="100"/>
• Set Image Border : By default image will have a border around it, you can specify border
thickness in terms of pixels using border attribute.
• A thickness of 0 means, no border around the picture.
<img src="test.png" alt="Test Image" border="3"/>
• Set Image Alignment : By default image will align at the left side of the page, but you can
use align attribute to set it in the center or right.
<img src="test.png" alt="Test Image" border="3" align="right"/>
• Free Web Graphics :For Free Web Graphics including patterns you can look into Free Web
Graphics.
05/26/2025 41
lang Attribute : allows you to indicate the main language used in a document, but
this attribute was kept in HTML only for backward compatibility with earlier
versions of HTML. es(spanish), en(english), fr(french)
• The values of the lang attribute are ISO-639 standard two- character language codes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>

05/26/2025 42
05/26/2025 43
HTML Tables
• The HTML tables allow web authors to arrange data like text, images, links, other tables,
etc. into rows and columns of cells.
• The HTML tables are created using the <table> tag in which the <tr> tag is used to create
table rows and the <td> tag is used to create data cells.
• A row is contained inside a <tr> tag , which stands for table row.
• And each cell is then written inside the row element using a <td> tag , which stands for table
data.
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
05/26/2025 44
</tr></table>
• NOTE: In the above example border is an attribute of <table> and it will put border across
all the cells.
• If you do not need a border then you can use border="0".
• The border attribute and other attributes also mentioned in this session are deprecated and
they have been replaced by CSS.
• So it is recommended to use CSS instead of using any attribute directly.
• Table Heading - The <th> Element: Table heading can be defined using <th> element.
• This tag will be put to replace <td> tag which is used to represent actual data.
• Normally you will put your top row as table heading as shown below, otherwise you can
use <th> element at any place

05/26/2025 45
<html><body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table> </body> </html>

05/26/2025 46
Cellpadding and Cellspacing Attributes :There are two attribiutes called cellpadding
and cellspacing which you will use to adjust the white space in your table cells.
• The cellspacing attribute defines the width of the border, while cellpadding represents the
distance between cell borders and the content within a cell.
Colspan and Rowspan Attributes : You will use colspan attribute if you want to merge
two or more columns into a single column. Similar way you will use rowspan if you want
to merge two or more rows.
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>

05/26/2025 47
Tables Backgrounds : You can set table background using one of the following two
ways:
• bgcolor attribute - You can set background color for whole table or just for one cell.
• background attribute - You can set background image for whole table or just for one
cell. You can also set border color also using bordercolor attribute.
<table border="1" bordercolor="green" bgcolor="yellow">
<table border="1" bordercolor="green" background="/images/test.png">
Table Height and Width : You can set a table width and height using width and height
attributes.
• You can specify table width or height in terms of pixels or in terms of percentage of
available screen area.
• <table border="1" width="400" height="150">
• Table Caption : will serve as a title or explanation for the table and it shows up at the top
of the table.
• This tag is deprecated in newer version of HTML/XHTML.
05/26/2025 48
Table Header, Body, and Footer
• Tables can be divided into three portions: a header, a body, and a footer.
• The head and foot are rather similar to headers and footers in a word-processed document
that remain the same for every page, while the body is the main content holder of the
table.
• The three elements for separating the head, body, and foot of a table are:
<thead> - to create a separate table header.
<tbody> - to indicate the main body of the table.
<tfoot> - to create a separate table footer.
• A table may contain several <tbody> elements to indicate different pages or groups of
data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>
• Nested Tables : You can use one table inside another table. Not recommended.
• Not only tables you can use almost all the tags inside table data tag <td>.

05/26/2025 49
HTML Lists
• HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more list elements. Lists may contain:
<ul> - An unordered list. This will list items using plain bullets.
<ol> - An ordered list. This will use different schemes of numbers to list your items.
<dl> - A definition list. This arranges your items in the same way as they are arranged in a
dictionary.
• HTML Unordered Lists : is a collection of related items that have no special order or
sequence. This list is created by using HTML <ul> tag. Each item in the list is marked
with a bullet.
• Unordered lists are similar to ordered lists, except that they have bullets like circle, disc,
square etc instead of numbers.
<UL>
<LI>Item one</LI>
<LI>Item two</LI>
<LI>Item three</LI>
05/26/2025 50
</UL>
• The type Attribute : You can use type attribute for <ul> tag to specify the type of bullet you like. By
default it is a disc. Following are the possible options: <ul type="square">, <ul type="disc"> or <ul
type="circle">
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
• HTML Ordered Lists
• If you are required to put your items in a numbered list instead of bulleted list then HTML
ordered list will be used. This list is created by using <ol> tag.
• The numbering starts at one and is incremented by one for each successive ordered list element
tagged with <li>.
<OL>
<LI>Item one</LI>
<LI>Item two</LI>
<LI>Item three</LI>
</OL>05/26/2025 51
• There are also different types of ordered lists since they can use different types of
numbered list like Numeric Number (1, 2, 3), Capital Roman Number (I II III), Small
Romal Number (i ii iii), Capital Alphabet (A B C), Small Alphabet (a b c).
<OL TYPE="I">
<LI>Item one</LI>
<LI>Item two</LI>
<LI>Item three</LI>
</OL>
• The 'TYPE' attribute can contain one the following types: 1, a, A, i, or I. Default is
numeric numbers
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
05/26/2025 52
HTML Definition Lists
• HTML and XHTML support a list style which is called definition lists where entries are
listed like in a dictionary. The definition list is the ideal way to present a glossary, list of
terms, or other name/value list/description.
• Definition List makes use of following three tags.
<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list
• Definition lists consist of two parts: a term and a description.

05/26/2025 53
To mark up a definition list, you need three HTML elements:
• ---a container <dl>,
• ---a definition term <dt>,
• ---and a definition description <dd>.
• Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks,
images, links, other lists, etc
<dl>
<dt>Cascading Style Sheets</dt>
<dd>Style sheets are used to provide
presentational suggestions for
documents marked up in HTML.
</dd>
</dl>

05/26/2025 54
HTML Text Links
• A webpage can contain various links that take you directly to other pages and even
specific parts of a given page. These links are known as hyperlinks.
• Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases,
and images.
• Thus you can create hyperlinks using text or images available on a webpage.
URL Linking Documents
• A link is specified using HTML tag <a>. This tag is called anchor tag and anything
between the opening <a> tag and the closing </a> tag becomes part of the link and a user
can click that part to reach to the linked document. Following is the simple syntax to use
<a> tag.
• <a href="Document URL" ... attributes-list>Link Text</a>
• <A HREF="tutorials.php">This is the text that it applies to</A>
<p>Click following link</p>
<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>
05/26/2025 55
• you can click on the link generated Tutorials Point to reach to the home page of Tutorials
Point.
• href (hyperlink reference) indicates the destination of the hyperlink
HTML Email Links
Making Links to email address : Many times you may also want to have a link to your
email address.
• To add a link to an email address, you can use the following code:
• <A HREF="mailto:[email protected]">E-mail me</A>

05/26/2025 56
• Create the home page
1. Create a new folder and open it.
2. Open the program Notepad, using the right click
3. At the top of the Notepad screen, type: <HTML>
4. Save the file, using the Save as option
5. When the Save as screen appears, in the File name textbox type index.html
6. In the Save as type drop-down list, select All files. When you are done select the Save
button
7. The file index.html has been create in the initial folder.
Home page file names
• All web pages have an .html extension (or .htm).
• All home page have the name index.html.
• Index.html comes up automatically when the address of a domain or directory where it is
located is typed into a browser.
• For instance, if you go to www.visibooks.com , the home page appears automatically. That
is because
05/26/2025
its file name is index.html. 57
Forms : Almost every time you want to collect information from a visitor to your site, you
need to use a form.
• Forms on the Web show a strong resemblance to paper forms you have to fill out.
• On paper, there are areas to enter text, boxes to check (or tick), options to choose from,
and so on.
• On the Web, you can create a form by combining what are known as form controls, such
as text boxes (to enter text into), checkboxes (to place a tick in), radio buttons (to choose
from different options), and so on.
• Web form allows us to accept information or answers from our users with varying levels
of guidance.
• Users can be asked to type answers, choose their answers from a list of possibilities you
create, or even be limited to choosing one answer from a number of options that you
specify.
• That data is then passed on to the Web server, which hands it to a script, or small program,
designed to act on the data and (in most cases) create an HTML page in response.

05/26/2025 58
• Creating a form : In an HTML document, forms are set between the <FORM>
container tags. The form container works as follows:
<FORM METHOD="how_to_send" ACTION="URL of
script">
...form data...
</FORM>
• Notice : that the <FORM> tag takes two attributes: METHOD and ACTION.
• The METHOD attribute accepts either POST or GET as its value.
• POST is by far the more popular, as it allows for a greater amount of data to be sent.
• GET is a little easier for Web programmers to deal with, and is best used with single
responses, like a single textbox.
• The second attribute is ACTION, which simply accepts the URL for the script that will
process the data from your form.

05/26/2025 59
• The GET Method : Note that query strings (name/value pairs) is sent in the URL of a GET request:
• name1=value1&name2=value2
• Some other notes on GET requests:
• GET requests can be cached (store temporarily which help to decrease access time)
• GET requests remain in the browser history
• GET requests should never be used when dealing with sensitive data (GET is less secure than
POST because sent data is part of the URL)
• GET requests have length restrictions (limited to a maximum of 2,048 characters,)
• GET requests can be bookmarked (data needed for the request is stored in the URL and the bookmark.)
• GET requests should be used only to retrieve data
• The POST Method : Note that query strings (name/value pairs) is sent in the HTTP message
body of a POST request:
• Host: w3schools.com name1=value1&name2=value2
• Some other notes on POST requests:
• POST requests are never cached
• POST requests do not remain in the browser history
• POST requests cannot be bookmarked
• POST requests have no restrictions on data length (no limit)
05/26/2025 60
1. Text Fields and Attributes : One of the more common uses for forms is to accept multiple lines of text
from a user, perhaps for feedback, bug reports, or other uses.
• To do this, use the <TEXTAREA> tag within your form.
• You can set this tag to control the number of rows and columns it displays, although it will generally
accept as many characters as the user desires to enter.
• It takes the following form:
<TEXTAREA NAME="variable_name" ROWS="number" COLS="number"> default text
</TEXTAREA>
• It may surprise you to find that <TEXTAREA> is a container tag, since it just puts a box for typing on the
page.
<FORM>
<TEXTAREA NAME="comments" ROWS="4" COLS="40">
Enter comments about this Web site. Good or Bad.
</TEXTAREA>
</FORM>
• The default text appears in the textbox just as typed.
• Notice in figure below that text inside the <TEXTAREA> tag works like <PRE> formatted
text.05/26/2025 61
• Any returns or spaces you add to the text are displayed in the browser
window.

• The NAME attribute is a variable name for this string of text.


• It gets passed on to your processing script on the Web server.
• ROWS and COLS can accept different numbers to change the size of the
textarea box, but you should take care that the majority of browsers can see
the entire box on- screen.

05/26/2025 62
2. The <INPUT> Tag
• Our next tag for HTML forms gives you the opportunity to be a bit more demanding about
the type of input you're going to accept from the user.
• The <INPUT> tag follows the following format:
<INPUT TYPE="type_of_box" NAME="variable" SIZE="number"
MAXLENGTH="number">
• Now, technically, the only required attributes are TYPE and NAME.
• Some other "types" of the input tag will also accept the attribute VALUE.
• <INPUT> is an empty tag and there's no </INPUT> element.
• There are different types of <INPUT>.
2.1. TEXT: The first possible value for the TYPE attribute is TEXT, which creates a single-
line textbox of a length you choose.
• Notice that the length of the box and the maximum length entered by the user can be set
separately.
• It's possible to have a box longer (or, more often, shorter) than the maximum number of
characters
05/26/2025 you allow to be entered. 63
• Here's an example of a textbox:
• <INPUT TYPE="TEXT" NAME="last_name" SIZE="40" MAXLENGTH="40">
• When appropriately entered between <FORM> tags, this <INPUT> produces a box similar to
this.
• If desired, the attribute VALUE can be used to give the textbox a default entry, as in the
following example:
• Type of Computer: <INPUT TYPE="TEXT" NAME="computer" SIZE="50"
MAXLENGTH="50" VALUE="Pentium">

2.2. PASSWORD
• The PASSWORD option is nearly identical to the TEXT option except that it responds to
typed letters with bullet points or a similar scheme (chosen by the browser) to keep the words
from being read.
• A sample password box could be the following:
Enter Password:
<INPUT TYPE="PASSWORD" NAME="password" SIZE="25" MAXLENGTH="25">
05/26/2025 64
3. CHECKBOX : This value for TYPE allows you to create a checkbox-style interface for
your form.
• This is best used when there are two possible values for a given choice - and no others.
• You can also determine whether or not a checkbox will already be checked (so that it must
be unchecked by the user, if desired), by using the attribute CHECKED.
• Here's an example of adding checkboxes to a form:
Type of computer(s) you own:<BR>
<INPUT TYPE="CHECKBOX" NAME="Pentium" CHECKED> Pentium
<INPUT TYPE="CHECKBOX" NAME="486"> 486-Series PC
<INPUT TYPE="CHECKBOX" NAME="Macintosh"> Macintosh
• In this example, it's possible to check as many of the options as are presented.
• CHECKBOX evaluates each item separately from any others.

05/26/2025 65
4. RADIO
• Like CHECKBOX, RADIO is designed to offer your user a choice from pre-determined
options.
• Unlike CHECKBOX, however, RADIO is also designed to accept only one response
from among its options.
• RADIO uses the same attributes and basic format as CHECKBOX.
• RADIO requires that you use the VALUE attribute, and that the NAME attribute be
the same for all of <INPUT> tags that are intended for the same group.
• VALUE, on the other hand, should be different for each choice.
• example: Choose the computer type you use most often:<BR>
<INPUT TYPE="RADIO" NAME="Computer" VALUE="P" CHECKED> Pentium
<INPUT TYPE="RADIO" NAME="Computer" VALUE="4"> 486-Series PC
<INPUT TYPE="RADIO" NAME="Computer" VALUE="M"> Macintosh
<INPUT TYPE="RADIO" NAME="Computer" VALUE="O"> Other

05/26/2025 66
• With RADIO, it's important to assign a default value, since it's possible that the user will
simply skip the entry altogether.
• While the user can't check more than one, he or she can check none.
• So choose the most common value and set it as CHECKED, just so that the form -
processing script doesn't have trouble.
5. HIDDEN
• This <INPUT> type technically isn't "input" at all.
• Rather, it's designed to pass some sort of value along to the Web server and script.
• It's generally used to send a keyword, validation number, or some other kind of
string to the script so that the script knows it's being accessed by a valid (or just a
particular) Web page.
• The <INPUT TYPE="Hidden"> tag takes the attributes NAME and
VALUE.

05/26/2025 67
Example : Choose the computer type you use most often:<BR>
<INPUT TYPE="HIDDEN" NAME="Computer" VALUE="DELL">
<INPUT TYPE="RADIO" NAME="Computer" VALUE="P" CHECKED> Pentium
<INPUT TYPE="RADIO" NAME="Computer" VALUE="4"> 486-Series PC
<INPUT TYPE="RADIO" NAME="Computer" VALUE="M"> Macintosh
<INPUT TYPE="RADIO" NAME="Computer" VALUE="O"> Other

• Note: This isn't really terribly covert, since anyone could simply choose View Source to
see the value of the hidden field.
6. RESET
• The <INPUT> tag has built into it the ability to clear an HTML form.
• RESET simply creates a push button (named with the VALUE string) that resets all of the
elements in that particular FORM to their default values.
• RESET erases anything that the user has entered.

05/26/2025 68
• An example would be the following: <INPUT TYPE="RESET">
• With a VALUE statement, you could enter the following:
• <INPUT TYPE="RESET" VALUE="Reset"></br>
• <INPUT TYPE="RESET" VALUE="Reset the Form">
7. SUBMIT
• The <INPUT> tag also has a type that automatically submits the data that is been entered
into the HTML form.
• The SUBMIT type accepts only the attribute VALUE, which can be used to rename the
button.
• Otherwise, the only purpose of the Submit button is to send off all the other form
information that's been entered by your user.
• <input type="submit">

05/26/2025 69
Creating Pop-Up and Scrolling Menus
• The last types of input that you can offer to users of your Web page revolve around the <SELECT>
tag, which can be used to create different types of pop-up and scrolling menus.
• This is another element designed specifically for allowing users to make a choice - they can't enter
their own text.
• The <SELECT> tag requires a NAME attribute and allows you to decide how many options to
display at once with the SIZE attribute.
Using <SELECT>
• Also notice that, like <TEXTAREA>, <SELECT> is a container tag.
• Options are placed between the two <SELECT> tags, each with a particular VALUE that gets
associated with <SELECT>'s NAME attribute when chosen.
<SELECT NAME="variable">
<OPTION SELECTED VALUE="value"> Menu text
<OPTION VALUE="value"> Menu text
...
</SELECT>
• The attribute SELECTED is simply designed to show which value will be the default in the
menu listing.
05/26/2025 70
• VALUE can be anything you want to pass on to the Web server and associated script for
processing.
• Choose your favorite food:
<SELECT NAME="food">
<OPTION SELECTED VALUE="ital"> Italian
<OPTION VALUE="texm"> TexMex
<OPTION VALUE="stek"> SteakHouse
<OPTION VALUE="chin"> Chinese
</SELECT>
• You can also use the SIZE attribute to decide to display the menu in its entirety, by simply
changing the first line of the example to the following: <SELECT NAME="food"
SIZE="4"> if we make it “2“ two items will be displayed at a time.
• In the first example, selecting the menu item with the mouse causes the menu to pop-up on
the page.
• The user can then select from the choices.
• In the second example, it's necessary to click the desired item.
05/26/2025 71
• Frames : aren't overwhelmingly difficult to add to your pages, although they do require a
slight shift in thought.
• Although they seem similar to tables at first, frames are considerably more powerful.
• So much so, in fact, that frames can even divide your Web page so that it is accessing
more than one URL at a time.
• By dividing the page into different parts - each of which can be updated separately there
becomes a number of different interface elements you can offer.
• Even a simple use of the frame specification lets you add interface graphics or a corporate
logo to a site, while the rest of your page scrolls beneath it.
• Frames are ideal for the following:
---Table of Contents (TOC) : By placing the TOC in a "column" on your Web page, people
can click around your site or your documentation pages without being forced to constantly
move "back" to the contents page.
• Instead, users simply click a new content level in the static frame.

05/26/2025 72
---Fixed interface elements : As mentioned previously, you can force clickable graphics,
logos, and other information to stay in one fixed portion of the screen, while the rest of your
document scrolls in another frame.
---Better forms and results : Frames also enable you to create a form in one frame and
offer results in another frame.
• This is something we're beginning to see extensively with Web search pages.
• With the search text box always available, you're free to change search phrases or pinpoint
your search more quickly, without moving back in the hierarchy of the Web pages.
• Creating Frames : Probably most unique among the HTML - style tags so far is the
<FRAMESET> tag.
• This container is required for frames - style pages - but it also replaces the <BODY> tag
completely on these pages.
• When you use frames then, you're committed to using them completely - you cannot just
add frames to part of your page.

05/26/2025 73
• On a typical page, <FRAMESET> is added like this:
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
...Frames and other HTML markup...
</FRAMESET>
</HTML>
• The <FRAMESET> tag can accept two attributes: ROWS and COLS.
• Both attributes accept numerical values (size in pixels), percentages, or a combination of
both.
• The value can also be used to suggest that a particular row or column should take up the
rest of the page.
• The number of values suggests the number of rows or columns you give the attribute.

05/26/2025 74
• These attributes take the following format:
<FRAMESET ROWS="numbers,percentages,*" COLS="numbers,percentages,*">
• The <FRAME> Tag : is used within the <FRAMESET> container to determine what will
actually appear in a particular frame.
• Each <FRAME> tag is an empty tag - and it's not unlike the <LI> tags you add to HTML
lists.
• It's simply there, within the <FRAMESET> container, to determine what URL or name is
associated with the particular frame it defines.
• It takes the following format:
<FRAMESET COLS/ROWS="numbers">
<FRAME SRC="URL">
...
</FRAMESET>
• The SRC attribute is used to tell the frame what URL should be loaded in that frame.
• The <FRAME> tag assigns URLs to each frame window.
05/26/2025 75
Attributes for <FRAME>
• Aside from SRC, the <FRAME> tag can accept the attributes NAME, MARGINWIDTH,
MARGINHEIGHT, SCROLLING.
• The NAME attribute is used to name the frame windows that will be used as a target
windows when the attribute target is used; the others attributes are appearance oriented.
• MARGINWIDTH and MARGINHEIGHT are used to control the right/left margins and
the top/bottom margins of the text and graphics within a frame, respectively.
• Each takes a numerical value in pixels.
• For example: <FRAME SRC="text.html" MARGINWIDTH="5" MARGINHEIGHT="5">
• This creates a five-pixel border between the contents of text.html and the frame edges.
• SCROLLING can accept the values yes, no, and auto and is used to determine whether or
not scroll bars will appear in the frame window.
• The default value is auto, and this is probably the best to use in most cases.

05/26/2025 76
• Since users have all different screen resolutions and available browser window space,
even short documents will sometimes need to be scrolled.
• The NORESIZE attribute doesn't require a value assignment, and is used to keep the
user from resizing a frame window. (Frame windows can be resized by dragging the frame
with the mouse in the viewer window.)
• An example of SCROLLING and NORESIZE would be:<FRAME SRC="text.html"
SCROLLING="yes" NORESIZE>
• The <NOFRAMES> Tag : This container tag is used to contain HTML markup intended
for browsers that do not support the frames specification.
• Frames-capable browsers ignore text and HTML tags inside the <NOFRAMES>
container.
• All others should generally ignore the other frames tags (which they won't recognize), but
display the text in between the <NOFRAMES> tags.

05/26/2025 77
• The following is an example:
<FRAMESET ROWS="25%,75%">
<FRAME SRC="menu.html">
<FRAME SRC="index.html">
<NOFRAMES>
<P>This page requires a Frames capable browser to view. If you'd prefer, you can access our <a
href="2_index.html">HTML 3.0 compliant pages</a> to view this information without the frames
interface.</P>
</NOFRAMES>
</FRAMESET>

05/26/2025 78
05/26/2025 79

You might also like