Scribd
Upload
20 views

Unit-2(HTML)..

Uploaded by

shalinikshalu6
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views

Unit-2(HTML)..

Uploaded by

shalinikshalu6
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 32

Web Programming(OET)

UNIT II
Introduction to HTML

Introduction to HTML, Essential Tags, Tags and Attributes, Text Styles and Text Arrangements, Text,
Effects, Exposure to Various Tags (DIV, MARQUEE, NOBR, DFN, HR, LISTING, Comment, IMG),
Color and Background of Web Pages, Lists and their Types, Attributes of Image Tag, Hypertext, Hyperlink
and Hypermedia, Links, Anchors and URLs, Links to External Documents, Different Section of a Page and
Graphics, Footnote and eMailing, Creating Table, Frame, Form and Style Sheet.
HTML Introduction

 HTML stands for Hypertext Markup Language, is the predominant markup language for web pages. It
is used to create web pages using markup language. HTML is a combination of Hypertext and Markup
language to create a structured web page content such as headings, paragraphs, lists, links, quotes, and
other so many items.

 HTML support to display image files, objects file such as audio, video that you embedded in HTML to
create an interactive web pages. Popular scripts languages JavaScript, as well as other scripting
languages, are you can use it to create a dynamic user interactive web pages.

 HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
Pages.Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus,
the link available on a webpage is called Hypertext.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.

The first version of HTML (HTML 1.0) was written by Tim Berners-Lee in 1993. Later many different HTML
versions are released. However, the most widely used version HTML 4.01 was released in 2000, which became
an official standard version of HTML.

HTML Versions
HTML Version Year

HTML 1.0 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

HTML 5.0 2014

1|Page
Web Programming(OET)

Basic HTML Document

In its simplest form, following is an example of an HTML document −


<!DOCTYPE html>

<html>

<head>

<title>This is document title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>Document content goes here.....</p>

</body>

</html>

HTML Tags

As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are
enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing
tags. For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.

Above example of HTML document uses the following tags −

Tag & Description

1 <!DOCTYPE...>

This tag defines the document type and HTML version.

2 <html>

This tag encloses the complete HTML document and mainly comprises of document header which is
represented by <head>...</head> and document body which is represented by <body>...</body> tags.

3 <head>

This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.

4 <title>

The <title> tag is used inside the <head> tag to mention the document title.
2|Page
Web Programming(OET)

5 <body>

This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.

6 <h1>

This tag represents the heading.

7 <p>

This tag represents a paragraph.

To learn HTML, you will need to study various tags and understand how they behave, while formatting a
textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format
the text or images to make a beautiful webpage.
HTML essential Tags

 All HTML tags are surrounding into opening <html> tag and closing </html> tag.
 HTML tags are two types, container tag, and non-container tag.
 Most of the HTML tags are container tags. They hold markup data. E.g. <p>This is
paragraph</p> contains "This is paragraph", which is called container tag.
 While few other non-container tags which are not hold anything. E.g. <br/> tag is non-container tag and
used to break line. Also, the non-container tags are self-closing.
 All HTML tags are written in lower alphabetical. As well as, all non-container tag (also called empty
tags) are always written in self-closing.

What are the tools requires to create an HTML?


You don't need to use any special software to write an HTML markup. Only you need a text editor or HTML
editor application. If you use HTML editor then it helps you to highlight HTML syntaxes to make readable for a
human.
Currently, Sublime Text 3, Notepad++, and Visual Studio Code HTML editor are widely used. They are
WYSIWYG (what you see is what you get) and lightweight.

HTML Head Elements

The HTML <head> Element


HTML <head> element is a container tag and is placed before the <body> tag. The <head> element contains
general information about the page, meta-information, style sheet URL and document type information.
HTML <head> tag inside elements does not display n a body part in a web browser.
HTML <head> tag contains following elements that describe the
metadata: <title>, <meta>, <link>, <style>, <script>, and <base>.

HTML <head> Element Structure

<!DOCTYPE html>
<html>

3|Page
Web Programming(OET)

<head>
<title>Document title</title>
<meta charset="UTF-8"/>
<meta name="description"content="Free Web tutorials"/>
<link rel="stylesheet"type="text/css"href="style.css"/>
<script type="text/javascript"src="script.js"></script>
</head>
<body>
<!-- Document body -->
</body>
</html>

HTML <title> Element

The HTML <title> element is used to represents the title of the HTML document and it is required in all HTML
documents.
The <title> element is displayed in a browser tab. Only one <title> element allowable per document and it's
required to defines within the <head> element.
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
</head>
<body>
<!-- Document body -->
</body>
</html>

HTML <meta> Element

HTML <meta> element is used to provide structured meta-information about a web page. It contains a variety
of information about the document.
The <meta> tag is used to specify page description, keywords, and other important information. It helps to
optimize the web page on the search engine. This process is known as search engine optimization (SEO).
<!DOCTYPE html>1
<html>
<head>
<meta charset="UTF-8"/>
<meta name="description"content="HTML meta element"/>
<meta name="keywords"content="html, css, js"/>
<meta name="author"content="way2tutorial"/>
</head>
<body>
<!-- Document body -->
</body>
</html>

HTML <link> Element

4|Page
Web Programming(OET)

HTML <link> element is used to load an external style sheet into HTML document.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"type="text/css"href="style.css"/>
</head>
<body>
<!-- Document body -->
</body>
</html>

HTML <style> Element

HTML <style> element is used to write CSS style to an HTML document. It contains CSS properties.
<!DOCTYPE html>
<html>
<head>
<style>
p{
font-size: 15px;
color: red;
}
h2 {
font-weight: normal;
color: #196a8e;
}
</style>
</head>
<body>
<!-- Document body -->
</body>
</html>

HTML <script> Element

HTML <script> element used to defines client-side JavaScript that is specified within the document or
embedded external JavaScript file through the SRC attribute.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"src="script.js"></script>
</head>
<body>
<!-- Document body -->
</body>
</html>

5|Page
Web Programming(OET)

HTML <base> Element

HTML <base> element specifies a base URL for all the links within a web page.
<!DOCTYPE html>
<html>
<head>
<base href="https://way2tutorial.com/html/"target="_blank"/>
</head>
<body>
<p>Let's get started <a href="index.php">HTML Tutorial</a></p>
</body>
</html>

HTML Body Section

Definition
HTML body section is a main contain section of web page all contain that will be seen when the user loads the
webpage.
HTML body section supported all the contains such as text, hyper-links, images, Special Character, lists, tables,
frames, forms etc.
It's most powerful section and important section to display web page.

Body Section

<html>
<head>
<link rel="stylesheet"type="text/css"href="styles.css">
<title>Example for Body section elements</title>
</head>
<body>
<!-- Body Part -->
<p> This is Body Section </p>
<a href="../html_tutorial.php"> goto HTML Index Page </a>
</body>
</html>

Basic Body Section Tags

Tag Description

<a> Defines the internal link, external link and Subdirectory link.

<br /> Defines the single line break.

<code> Defines the computer code on text base.

6|Page
Web Programming(OET)

<div> Defines the division section in a document.

<form> Defines the HTML form for use in input documents

<frame> Defines the many individual part

<hr /> Defines the horizontal line.

<p> Defines the paragraph in web documents.

<pre> Defines the preformatted text.

<span> Defines a section in a web document.

<table> Defines the table.

<textarea> Defines the multiline text.

HTML Basic Tag List with Example

When you learn beginners HTML, It's important to have a basic HTML tags understanding. Here all Basic
HTML tags are listed to help you learn.
HTML Paragraph Tag
Defines a paragraph into web document. HTML paragraph define using <p> tag.
<body>
<p> This is first Paragraphs </p>
<p> This is Second Paragraphs </p>
</body>

HTML Comment Tag

Defines the Comments <!-- Your Comment --> tag.


<body>
<img src="../../images/w2t.png"width="380"height="70"/><!--Image file-->
</body>

HTML Images Tag

To display images into web document. HTML Images are define inside the <img /> tag.
<body>
<img src="../../images/w2t.png"width="380"height="70"/>
</body>

HTML Link Tag

Defines the Link in internal or External document. HTML Link are defined inside the <a> tag.
<body>
<a href="http://www.way2tutorial.com">Web Development Tutorial</a>
7|Page
Web Programming(OET)

</body>

HTML Headings Tags

Any document starts with a heading. You can use different sizes for your headings. HTML also has 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.

Defines the Heading <h1> to <h6> tags.


<body>
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>
</body>

Line Break Tag

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.
Example
<body>

<p>Hello<br/>

You delivered your assignment


ontime.<br/>

Thanks<br/>

Mahnaz</p>

</body>

Centering Content
<body>

<p>This text is not in the center.</p> You can use <center> tag to put any content in the center of the
page or any table cell.
<center> Example

<p>This text is in the center.</p>

</center>
8</body>
|Page
Web Programming(OET)

Horizontal Lines

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.
For example, you may want to give a line between two paragraphs as in the given example below −
Example

<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>

This will produce the following result −


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

HTML Attributes
Definition
 HTML tags contain have one or more attributes are support.
 HTML Attributes are added in tag to provide the more additional information about how the tag should
be appear or behavior.
 HTML Attributes are always specified in the start tag.
 HTML Attributes consist on name/value pairs like: i.e. name="value" and separated by an equals (=)
sign.
 Attribute values always be enclosed in double/single quotes.
 Double quotes are the most common use, but single quotes are also allowed.

HTML Attributes (Global Attributes)


Many attributes are in HTML elements, some are common attributes and others can only be used on certain
tags.
Some of the more common attributes are:

9|Page
Web Programming(OET)

Tag Value Description

Id ID Name Declared unique id for the element.

Class Class Name Used in Cascading Style Sheet (CSS).

Style CSS properties CSS code specifies inline the HTML element is
presented.

Title Title Description Display on the "tooltip" for your elements.


Attributes is most cases they are optional. Many HTML elements assign a default value to it's attributes. Means
if you don't include that attribute, a value will be assigned default attributes.
Example
<html>
<head>
<title>HTML Attributes Example</title>
<style type="text/css">
#second {
color:#FF9966;
}
</style>
</head>
<body>
<p style="background-color:red;">First Attributes</p>
<p id="second">Second Attributes</p>
<p>Third Attributes</p>
<p>
<abbr title="Cascading Style Sheet">CSS</abbr>
</p>
</body>
</html>

HTML Comments - How to Write

Definition
 HTML comment tag use to insert a comment into a source code. It's good habit to write a comment into
a source code to improve user readability and understands.
 You can also write a specify information inside comments. In this case they will not be display on web
document and not visible for the user.
 A good habit is write comment text inside html pages, scripts and style elements.
 Comment Tag does not support any Standard Attributes.
HTML Comment Example
An HTML comment begins with "<!--" and ends with "-->".
<html>
<head>
<title> HTML Comment Tag </title>
</head>
<body>
</html>
10 | P a g e
Web Programming(OET)

<img src="images/jnj.png"width="365"height="86"/><!-- Image File -->


</body>

CSS Comment Example


A CSS comment start with "/*" and ends with "*/" in css file.
/* CSS Style */
h4 {
text-align: center;
color: purple;/* Font Color is purple */
font-family: verdana;
}

HTML Formatting Tags


Definition
 HTML formatting tags use for formatting a text style. It will become necessary to make minor changes
to the formatting of those elements.

HTML <b> tag use for formatting output bold text. Following are few common formatting tags.

Tag Example Results

<b> <b>Bold Text</b> An example of Bold Text

<big> <big>Big Text</big> An example of Big Text

<center> <center>Center Text</center> An example of


Center Text

<em> <em>Emphasized Text</em> An example of Emphasized Text

<i> <i>Italic Text</i> An example of Italic Text

<small> <small>Small Text</small> An example of Small Text

<strong> <strong>Strong Text</strong> An example of Strong Text

<sub> <sub>Subscript Text</sub> An example of Subscript Text

<sup> <sup>Superscript Text</sup> An example of Superscript Text

<del> <del>Delete Text</del> An example of Delete Text


<s> <s>Strike Text</s> An example of Strike Text
<strike> <strike>Strike Text</strike> An example of Strike Text

<u> <u>Underline Text</u> An example of Underline Text

<tt> <tt>Teletype Text</tt> An example of Teletype Text

11 | P a g e
Web Programming(OET)

<blockquote> <blockquote>Long An example of Long Quotation Text


Quotation</blockquote> An example of Short Quotation Text
<q>Short Quotation Text</q>

HTML Image Tag


 HTML <img /> tag is insert image into a web document.
 HTML image path define/declare inside <img /> tag.
 The <img /> tag is empty tag, that mean's no closing tag.
 <img /> tag have some attributes are use for display image on web page.
 The src attribute, src stands for "source", that is path of image URL.
 Alt Attribute used to define an "alternate text" for an image. This specifies text to be identified in the
image name.
 Width and Height specifies the size of image to display on webpage.

Image Tag Attribute

Attributes Values Description

Src "image source url path" Required, Image path should be absolute path.

Width "size_px" Specifies the Width to display the image.

Height "size_px" Specifies the Height to display the image.

Align "left" Specifies the image align side.


"right"

Border "Size" Specifies the image border size.


eg. "0"

Alt "alternate text" Required Attribute. Specifies text to be identify


the image.
Example
<html>
<head>
</head>
<body>
<img src="images/img_nat.png"width="120"height="70"alt="natural"/>
</body>
</html>

Image alignment (Right side)


Image can be align in left or right relative such as paragraphs text.
<html>
<head>
</head>
<body>
12 | P a g e
Web Programming(OET)

<img src="images/img_nat.png"width="120"height="80"alt="Natural"align="right"/>
<p>Natural resources (economically referred to as land or raw materials)
occur naturally within environments that exist relatively undisturbed
by mankind, in a natural form. A natural resource is often characterized
by amounts of biodiversity existent in various ecosystems.</p>
</body>
</html>

Image alignment (Left side)


<html>
<head>
</head>
<body>
<img src="images/img_nat.png"width="120"height="80"alt="Natural"align="left"/>
<p>Natural resources (economically referred to as land or raw materials)
occur naturally within environments that exist relatively undisturbed
by mankind, in a natural form. A natural resource is often characterized
by amounts of biodiversity existent in various ecosystems.</p>
</body>
</html>

Image alignment (Wrap around)


<html>
<head>
</head>
<body>
<img src="images/img_nat.png"width="120"height="80"alt="Natural"align="left"/>
<p>Natural resources (economically referred to as land or raw materials)
occur naturally within environments that exist relatively undisturbed
by mankind, in a natural form. A natural resource is often characterized
by amounts of biodiversity existent in various ecosystems. Natural
<br clear="all"/>
resources are derived from the environment. Many of
them are essential for our survival while others are used for satisfying
our wants. Natural resources may be further classified in different ways.
</p>
</body>
</html>

Image Link
<html>
<head>
</head>
<body>
<a href="http://www.way2tutorial.com/html/tutorial.php">
<img src="images/img_nat.png"width="120"height="70"alt="Natural"/>
</a>
</body>
</html>

13 | P a g e
Web Programming(OET)

HTML Link Tag


Internal Link
External Link
Mailto Link
Sub-Directory Link

HTML Links - HTML Internal Link

HTML internal link is linked within the same web page. This link can be an absolute path or relative path.
HTML internal link name is followed by the hash sign(#). You have to assign an id to refer section of your
page, which is referred to as an internal link to the same page.
When you click on an internal anchor link, you will scroll automatically to the referred section and display it on
your browser.
To understand internal link see the below examples.
 <a href="#lession1">Lession.1</a> link can be referred as <a id="lession1">Introduction of
Lession.1</a> automatically.
 <a href="#lession2">Lession.2</a> link can be referred as <div id="lession2">Introduction of
Lession.2</div> automatically.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#lession1">Lession.1</a><br />
<a href="#lession2">Lession.2</a><br />
<a href="#lession3">Lession.3</a><br />
<a href="#lession4">Lession.4</a><br />
<br />

<a id="lession1">Introduction of Lession.1</a>


<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<div id="lession2">Introduction of Lession.2</div>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<p id="lession3">Introduction of Lession.3</p>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>

14 | P a g e
Web Programming(OET)

<br />
<br />
<article id="lession4">Introduction of Lession.4</article>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
</body>
</html>

Linking to parts of other documents

You can set target to specific sections of the other pages by adding the #id at the end of the href. After adding
hash mark is known as a "fragment identifier". This helps a lot for example, you can link to the third section of
this tutorial from anywhere else, you have to write
<a href="https://way2tutorial.com/html/html_internal_links.php#section-id">

HTML External Links


 HTML Link - External HTML Links is linked to external web page. This link is may be absolute path or
relative link path.
 <a> tag is used for anchor name which is referred link to another web page.
 External link is great future to drive a webpage one to another and useful for surf many webpage in
website.
Example
<html>
<head>
</head>
<body>
<a href="html.php">HTML</a>
<br />
<br />
<a href="css.php">CSS</a>
<br />
<br />
<a href="javascript.php">Java Script</a>
<br />
</body>
</html>

HTML Mail to Link

 HTML Link also use for create a Mailto link to a send a email to a specific E-mail
address. href attributes value is set mailto link that followed to a e-mail address.
 When click on E-Mail link, it will open E-Mail application. E-Mail link is use to send E-Mail/Review
with subject, text message.
Example
<html>
<head>
</head>

15 | P a g e
Web Programming(OET)

<body>
<p>
<a href="mailto:[email protected]?
[email protected]&[email protected]&subject=Feedback&body=Message">Click Here </a>
for Feedback
</p>
</body>
</html>

HTML Subdirectory Link

 HTML directories are managed in logical hierarchical structure.


How to manage on your directory in website?
Main Level
http://www.domain.com/

First Level of Sub-Directories


http://www.domain.com/subdir1/

Second Level of Sub-Directories


http://www.domain.com/subdir1/subdir2/

Moving Down
 Document (Web page/document/image/resources etc..) call in the same directory.
 Linking to a document in same directory on your current web page:
<a href="firstpage.php">
 Linking to a document in one level below directory (subdirectory) on your current web page:
<a href="html/firstpage.php">
 Linking to a document in two level below directory (subdirectory to subdirectory ) on your current web
page:
<a href="html/basic/firstpage.php">
Moving Up
 Document (Web page/document/image/resources etc..) call in the above directory.
 Linking to a document in one level below directory (subdirectory) on your current web page:
<a href="../firstpage.php">
 Linking to a document in a two level above directory (subdirectory) on your current web page:
<a href="../../firstpage.php">

Moving Up/Down
 Document (Web page/document/image/resources etc..) call in the same directory to one above
directories or one sub directories.
 Linking to a document in a one level above and below one subdirectory on your current web page:
<a href="../basic/firstpage.php">
 Linking to a document in a two level above and below one subdirectory on your current web page:
<a href="../../css/firstpage.php">

HTML List Tags

16 | P a g e
Web Programming(OET)

Ordered List
Unordered List
Definition List

HTML Ordered List


 HTML <ol> tag define ordered list(list of Ordered items). HTML <ol> tag is a Container tag.
<ol> Tag Attributes
HTML <ol> tag specified Order list display list of item and its attribute help to change the type of order list.
Attributes Value Description

Type 1 Arabic number,


a Lowercase alphabet,
A Uppercase alphabet,
i Lowercase roman numeral,
I Uppercase roman numeral,
Default value is "1".

Start "1" define start sequence number of the list.


<li> Tag Attributes
HTML <li> tag specified list items and its attribute help to change the type of order list.
Attributes Value Description

Type 1 Arabic Number,


a Lowercase alphabet,
A Uppercase alphabet,
i Lowercase roman numeral,
I Uppercase roman numeral,
Default value is "1".

Start "1" define start sequence number of the list.


Example
<html>
<head>
</head>
<body>
<ol type="1"value="1">
<li>Arabic Number</li>
<li>Arabic Number</li>
</ol>

<ol type="a"value="1">
<li>Lower Alphabet</li>
<li>Lower Alphabet</li>
</ol>

<ol type="A"value="1">
<li>Upper Alphabet</li>
<li>Upper Alphabet</li>

17 | P a g e
Web Programming(OET)

</ol>

<ol type="i"value="1">
<li>Lower Roman numeral</li>
<li>Lower Roman numeral</li>
</ol>

<ol type="I"value="1">
<li>Upper Roman numeral</li>
<li>Upper Roman numeral</li>
</ol>
</body>
</html>

HTML Unordered List

 HTML <ul> tag define Unordered List(list of Unordered items). HTML <ul> tag is a Container tag.
 It is use to display list of item with bulleted style.
<ul> Tag Attributes
HTML <ul> tag specified Unordered list display list of item and its attribute help to change the different type of
list.
Attributes Value Description

Type disk Disk bullet,


circle Circle bullet,
square Square bullet
default value is "disk".
<li> Tag Attributes
HTML <li> tag specified list items and its attribute helps to change the unorder of the list.
Attributes Value Description

Type disk Disk bullet,


circle Circle bullet,
square Square bullet
default value is "disk".
Example
<html>
<head>
</head>
<body>
<ul type="disk">
<li>Disk Bullet</li>
<li>Disk Bullet</li>
</ul>

<ul type="circle">
<li>Circle Bullet</li>

18 | P a g e
Web Programming(OET)

<li>Circle Bullet</li>
</ul>

<ul type="square">
<li>Square Bullet</li>
<li>Square Bullet</li>
</ul>
</body>
</html>

HTML Definition List

Definition
 Definition list is use for create glossary list. Definition list are stars with <dl> tag and close
with </dl> tag.
 <dl> tag have two tag <dt> and <dd> defined inside tag.
 <dl> tag is a empty tag. Its use to define definition list. It does not have any attributes.
 <dt> tag is a empty tag. Its use to define definition team. It does not have any attributes.
 <dd> tag is a empty tag. Its use to define definition define. It does not have any attributes.
Example
<html>
<head>
</head>
<body>
<dl>
<dt>URL
<dd>Universal Resource Locator
<dt>W3C
<dd>World Wide Web Consortium
<dt>PNG
<dd>Portable Network Graphics
</dl>
</body>
</html>

HTML Marquee Tag

Definition
 HTML <marquee> tag use to create a scrolling text or scrolling image from left to right, right to left, top
to bottom, bottom to top. There is no limit. It's user define choice.
 <marquee> tag is a container tag to create scrolling text.
 <marquee> tag support following some attributes. This attributes use to add more special effect and easy
control.
Attributes Values Description

Behavior "slide" Start completely and stop as soon as text touches


the margin.

19 | P a g e
Web Programming(OET)

"scroll" Start completely and off one side.


"alternate" Text bounce as soon as touch both side margin.

Bgcolor "color code" Specifies the background color.

direction "left" Left to Right


"right" Right to Left
"up" Bottom to Top
"down" Top to Bottom

width "size" Specifies width in marquee.

height "size" Specifies height in marquee.

loop "2" Loop Continues in limited times.


"infinite" Loop Continues in Infinite.

scrollamount "3" Specifies Speed to scroll on the text.

scrolldelay "3" Specifies time wait long before each marquee.

hspace "size" Specifies left or right margin for outside marquee.

vspace "size" Specifies top or bottom margin for outside


marquee.
Use our Marquee code generator HTML Marquee Image Code Generator

Side Touch Margin Bounce Text

<html>
<head>
</head>
<body>
<marquee behavior="alternate"direction="left">Side Touch Margin Bounce Text</marquee>
</body>
</html>

Upside Text Scrolling

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="up">Upside Text Scrolling</marquee>
</body>
</html>

Marquee Text Scrolling Speed


20 | P a g e
Web Programming(OET)

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"scrollamount="3">Slow speed scroll speed</marquee>
<marquee behavior="scroll"direction="left"scrollamount="10">Medium speed scroll speed</marquee>
<marquee behavior="scroll"direction="left"scrollamount="17">Fast speed scroll speed</marquee>
</body>
</html>

Side Touch Margin Bounce Image

<html>
<head>
</head>
<body>
<marquee behavior="alternate"direction="left">
<img src="../images/img_nat.png"width="120"height="80"alt="Natural"/>
</marquee>
</body>
</html>

Upside Image Scrolling

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="up">
<img src="../images/img_nat.png"width="120"height="80"alt="Natural"/>
</marquee>
</body>
</html>

Change the Image Scrolling Speed

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"scrollamount="5">
<img src="../images/img_nat.png"width="120"height="80"alt="Natural"/>
</marquee>
<marquee behavior="scroll"direction="left"scrollamount="15">
<img src="../images/img_nat.png"width="120"height="80"alt="Natural"/>
</marquee>
</body>

21 | P a g e
Web Programming(OET)

</html>

Click and Hold to Stop Marquee

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"
onmousedown="this.stop();"
onmouseup="this.start();">Click and hold the mouse marquee stop</marquee>
</body>
</html>

Hover to Stop Marquee

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"
onmouseover="this.stop();"
onmouseout="this.start();">Hower over and hold the mouse marquee stop</marquee>
</body>
</html>

Marquee Start/Stop Buttons

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"id="marquee1"><p>Press Button</p></marquee>
<input type="button"value="Stop Marquee"onClick="document.getElementById('marquee1').stop();"/>
<input type="button"value="Start Marquee"onClick="document.getElementById('marquee1').start();"/>
</body>
</html>

Click to slow Marquee speed

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"
onmousedown="this.setAttribute('scrollamount', 3, 0);"
onmouseup="this.setAttribute('scrollamount', 10, 0);">Click and hold the mouse marquee speed
slow</marquee>
</body>
</html>

22 | P a g e
Web Programming(OET)

Hover over to slow Marquee speed

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"
onmouseover="this.setAttribute('scrollamount', 3, 0);"
onmouseout="this.setAttribute('scrollamount', 10, 0);">Hover over to slow Marquee Speed</marquee>
</body>
</html>

Marquee speed slow/fast using buttons

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"scrollamount="6"id="marquee5">Marquee slow/medium/fast speed
using buttons</marquee>
<input
type="button"value="Slower"onClick="document.getElementById('marquee5').setAttribute('scrollamount', 1,
0);"/>
<input
type="button"value="Medium"onClick="document.getElementById('marquee5').setAttribute('scrollamount', 5,
0);"/>
<input
type="button"value="Faster"onClick="document.getElementById('marquee5').setAttribute('scrollamount', 10,
0);"/>
</body>
</html>
Multiple Start/Stop Marquee

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"scrollamount="10"id="marquee2"><p>Marquee 1</p></marquee>
<marquee behavior="scroll"direction="left"scrollamount="15"id="marquee3"><p>Marquee 2</p></marquee>
<input type="button"value="Stop Marquee 1"onClick="document.getElementById('marquee2').stop();"/>
<input type="button"value="Start Marquee 1"onClick="document.getElementById('marquee2').start();"/><br
/>
<input type="button"value="Stop Marquee 2"onClick="document.getElementById('marquee3').stop();"/>
<input type="button"value="Start Marquee 2"onClick="document.getElementById('marquee3').start();"/>
</body>
</html>

HTML Marquee Text Examples


Definition

23 | P a g e
Web Programming(OET)

 HTML <marquee> tag use to create a scrolling text from left to right, right to left, top to bottom, bottom
to top. There is no limit. HTML Marquee tag is use to display text in marquee style.
 <marquee> tag is a container tag.

Continuous Text scrolling

<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left">Continuous scrolling text</marquee>
</body>
</html>
Slide Stop text
<html>
<head>
</head>
<body>
<marquee behavior="slide"direction="left">Slide Stop text</marquee>
</body>
</html>
Side Touch Margin Bounce Text
<html>
<head>
</head>
<body>
<marquee behavior="alternate"direction="left">Side Touch Margin Bounce Text</marquee>
</body>
</html>
Upside Text Scrolling
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="up">Upside Text Scrolling</marquee>
</body>
</html>
Marquee Text Scrolling Speed
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"scrollamount="3">Slow speed scroll speed</marquee>
<marquee behavior="scroll"direction="left"scrollamount="10">Medium speed scroll speed</marquee>
<marquee behavior="scroll"direction="left"scrollamount="17">Fast speed scroll speed</marquee>
</body>
</html>

HTML Marquee Image


Definition

24 | P a g e
Web Programming(OET)

 HTML <marquee> tag is a container tag and use to create a scrolling image from left to right, right to
left, top to bottom, bottom to top. There is no limit and image display in marquee style.
Continuous scrolling image
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left">
<img src="../images/img_nat.png"width="120"height="80"alt="Natural"/>
</marquee>
</body>
</html>
Slide stop image
<html>
<head>
</head>
<body>
<marquee behavior="slide"direction="left">
<img src="../images/img_nat.png"width="120"height="80"alt="Natural"/>
</marquee>
</body>
</html>
Side Touch Margin Bounce Image
<html>
<head>
</head>
<body>
<marquee behavior="alternate"direction="left">
<img src="../images/img_nat.png"width="120"height="80"alt="Natural"/>
</marquee>
</body>
</html>
Upside Image Scrolling
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="up">
<img src="../images/img_nat.png"width="120"height="80"alt="Natural"/>
</marquee>
</body>
</html>
Change the Image Scrolling Speed
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"scrollamount="5">
<img src="../images/img_nat.png"width="120"height="80"alt="Natural"/>
</marquee>

25 | P a g e
Web Programming(OET)

<marquee behavior="scroll"direction="left"scrollamount="15">
<img src="../images/img_nat.png"width="120"height="80"alt="Natural"/>
</marquee>
</body>
</html>

HTML Marquee Text Start/Stop Examples


Definition
 HTML <marquee> tag use to create a scrolling text as well as you assign click, hover and button effect
to control start/stop marquee text/image. Lets see following some example.
Click and Hold to Stop Marquee
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"
onmousedown="this.stop();"
onmouseup="this.start();">Click and hold the mouse marquee stop</marquee>
</body>
</html>
Hover to Stop Marquee
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"
onmouseover="this.stop();"
onmouseout="this.start();">Hower over and hold the mouse marquee stop</marquee>
</body>
</html>
Marquee Start/Stop Buttons
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"id="marquee1"><p>Press Button</p></marquee>
<input type="button"value="Stop Marquee"onClick="document.getElementById('marquee1').stop();"/>
<input type="button"value="Start Marquee"onClick="document.getElementById('marquee1').start();"/>
</body>
</html>
Multiple Start/Stop Marquee
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"scrollamount="10"id="marquee2"><p>Marquee 1</p></marquee>
<marquee behavior="scroll"direction="left"scrollamount="15"id="marquee3"><p>Marquee 2</p></marquee>
<input type="button"value="Stop Marquee 1"onClick="document.getElementById('marquee2').stop();"/>
<input type="button"value="Start Marquee 1"onClick="document.getElementById('marquee2').start();"/><br
/>

26 | P a g e
Web Programming(OET)

<input type="button"value="Stop Marquee 2"onClick="document.getElementById('marquee3').stop();"/>


<input type="button"value="Start Marquee 2"onClick="document.getElementById('marquee3').start();"/>
</body>
</html>

HTML Marquee Text Speed Slow/Fast Examples


Definition
 HTML <marquee> tag use to create a scrolling text as well as you also allow to Click or Hover effect to
control the speed of marquee text or image.
Click to slow marquee speed
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"
onmousedown="this.setAttribute('scrollamount', 3, 0);"
onmouseup="this.setAttribute('scrollamount', 10, 0);">Click and hold the mouse marquee speed
slow</marquee>
</body>
</html>
Hover over to slow marquee speed
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"
onmouseover="this.setAttribute('scrollamount', 3, 0);"
onmouseout="this.setAttribute('scrollamount', 10, 0);">Hover over to slow Marquee Speed</marquee>
</body>
</html>
Marquee speed slow/fast using buttons
<html>
<head>
</head>
<body>
<marquee behavior="scroll"direction="left"scrollamount="6"id="marquee5">Marquee slow/medium/fast speed
using buttons</marquee>
<input
type="button"value="Slower"onClick="document.getElementById('marquee5').setAttribute('scrollamount', 1,
0);"/>
<input
type="button"value="Medium"onClick="document.getElementById('marquee5').setAttribute('scrollamount', 5,
0);"/>
<input
type="button"value="Faster"onClick="document.getElementById('marquee5').setAttribute('scrollamount', 10,
0);"/>
</body>
</html>

27 | P a g e
Web Programming(OET)

HTML Table
Definition
 The best way to split a page into different sections is to use HTML <table> tag.
 HTML Table section is top of (start with) <table> tag, and closed it right down at the </table> tag.
Everything in between those two tags is inside the table, as you can see in following screenshot.
 Look at the following figure, <table> tag inside you need two more tag first is <tr> tag, which stands for
table row. It is closed with the </tr> tag. And another one is <td> tag, which stands for table data.
 Every time you add a <tr> tag, when table will gain an extra row. In the table you just made, these is
only one row section, so these is only one row.
 HTML <td> tag stands for table data (also say table column), and it places one cell in your table row.
 HTML table you also merge two or more column or two or more row merge using
respectively colspan or rowspan attributes.
Understanding <table> Tags
<table> Attributes
Attributes Value Description

Align left, right, center Declared your alignment side.

Width "size_px" Specify the Width Size of the Table.

Height "size_px" Specify the Height Size of the Table.

Bgcolor "purple" Specify the Background Color.

Background "specified_URL" Specify the Background Image open for URL file.

Border "size_px" Specify the size of border thickness.

Bordercolor "yellow" Specify the color of border.

Cellspacing "size_px" Specify the space between two Cell.

Cellpadding "size_px" Specify the space between cell boundary and text.
<th> Attributes
Attributes Value Description

Bgcolor "purple" Specify the Background Color.

Colspan "Column_N" Specify the span of there column.

Rowspan "Row_N" Specify the span of there Row.


<tr> Attributes
Attributes Value Description

Bgcolor "purple" Specify the Background Color.

28 | P a g e
Web Programming(OET)

HTML Frame
Definition
 HTML Frame used to split the browser window in several individual frames that can contain a separate
HTML web document.
 Frame is use to improve appearance and usability of a site.
 HTML document within frame include a other web pages link can be opened in the desired frame.
Advantages of Frames
 Frame Provides technical sophisticated appearance to the web site.
 It facility to reduce downloading time and improves the usability of the website.
 Frames generally include navigation link, header or footers, which help user to find and navigate to
required information.
 It separates content of website from navigation elements, which is useful for website maintenance and
content modification.
Disadvantages of Frames
 The web developer must be track of more HTML documents linked with main frame.
 It is difficult to print the entire page, which is developed using frame.
<frameset> tag Attributes
HTML <frameset> tag support following specific attributes.
Attributes Value Description

Cols * Specifies the number of columns and their width in a


% frameset.
pixels Default value is 100%.
*: Allocated remaining size of the window. Eg. Create
two vertical frames, use cols="35%, *". Here * will takes
remaining size of the window.

Rows * Specifies the number of rows and their height in a


% frameset.
pixels Default value is 100%.
*: Allocated remaining size of the window. Eg. Create
two horizontal frames, use cols="40%, *". Here * will
takes remaining size of the window.
<frame> tag Attributes
HTML <frame> tag support following specific attributes.
Attributes Value Description

Frameborder 0 Specify whether display a border or not.


1

Longdesc url Specify URL link to another page having a


long description of the frame contents.

marginheight pixel_size Specify the top and bottom margins of frame.

marginwidth pixel_size Specify the left and right margins of frame.

29 | P a g e
Web Programming(OET)

Name Name Specify the frame name.

Noresize noresize Specify that prevents to resize frame.

Scrolling auto Specify weather scrollbars should be display


yes or not.
no

Src url Specify web document URL to show in a


frame.
Frame Example 1
frame_1.html
<html>
<body style="background-color:#ff9900;">
<h2 align="center">First frame (frame_1.html)</h2>
</body>
</html>

frame_2.html
<html>
<body style="background-color:#ffcc00;">
<h2 align="center">Second frame (frame_2.html)</h2>
</body>
</html>

frame_example1.html
<html>
<head>
<title>Frameset Example 1<title>
</head>
<frameset rows="35%, 65%">
<frame src ="frame_1.html" />
<frame src ="frame_2.html" />
</frameset>
</html>
Run it... »
Frame Example 2
frame_1.html
<html>
<body style="background-color:#ff9900;">
<h2 align="center">First frame (frame_1.html)</h2>
</body>
</html>

frame_3.html
<html>
<body style="background-color:#a08029;">
<h2 align="center">Second frame (frame_3.html)</h2>
</body>

30 | P a g e
Web Programming(OET)

</html>

frame_4.html
<html>
<body style="background-color:#ffcc00;">
<h2 align="center">Third frame (frame_4.html)</h2>
</body>
</html>

frame_example2.html
<html>
<head>
<title>Frameset Example 2<title>
</head>
<frameset rows="35%, 65%">
<frameset cols="50%, 50%">
<frame src ="frame_3.html" />
<frame src ="frame_4.html" />
</frameset>
</frameset>
</html>
Run it... »
Frame Example 3 (Remove the frame border)
Top Navbar (top_nav.html)
<html>
<body style="background-color:#CCCC00;color:white;font-family:verdana; font-size:14px;">
<h3>Top Navbar</h3>
</body>
</html>

Menu List (menu_list.html)


<html>
<body style="background-color:#ff6600;color:white;font-family:verdana; font-size:14px;">
<h3>Menu List</h3>
</body>
</html>

Content (content.html)
<html>
<body style="background-color:#ffcc00;color:white;font-family:verdana;
font-size:14px;">
<h2>Content</h2>
<ul>
<li><a href="http://www.way2tutorial.com"target="_blank">
Online Web Developemnt Tutorial</a></li>
</ul>
</body>
</html>

Footer (footer.html)

31 | P a g e
Web Programming(OET)

<html>
<body style="background-color:#000000;color:white;font-family:verdana;font-size:14px;">
<h3>Footer</h3>
</body>
</html>

frame_example3.html
<html>
<head>
<title>Frame Example 3</title>
</head>
<frameset rows="100,*,75"frameborder="0"border="0">
<frame name="topNav"src="top_nav.html">
<frameset cols="200,*"frameborder="0"border="0">
<frame name="menu"src="menu_list.html"scrolling="auto"noresize>
<frame name="content"src="content.html"scrolling="auto"noresize>
</frameset>
<frame name="footer"src="footer.html">
</frameset>
<noframes></noframes>
</html>

-----------------****-----------------

32 | P a g e

You might also like