HTML Notes Unit 2

HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to
develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard
HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was
published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5
version which is an extension to HTML 4.01, and this version was published in 2012.
Why to Learn HTML?
Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now,
HTML is being widely used to format web pages with the help of different tags available in HTML language.
HTML is a MUST for students and working professionals to become a great Software Engineer specially
when they are working in Web Development Domain. I will list down some of the key advantages of learning
HTML:
 Create Web site - You can create a website or customize an existing web template if you know HTML
well.
 Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS
designing is a must skill.
 Understand web - If you want to optimize your website, to boost its speed and performance, it is good
to know HTML to yield best results.
 Learn other languages - Once you understands the basic of HTML then other related technologies like
javascript, php, or angular are become easier to understand.
Hello World using HTML.
Just to give you a little excitement about HTML, I'm going to give you a small conventional HTML Hello
World program, You can try it using Demo link.
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>
Applications of HTML
As mentioned before, HTML is one of the most widely used language over the web. I'm going to list few of
them here:
 Web pages development - HTML is used to create pages which are rendered over the web. Almost
every page of web is having html tags in it to render its details in browser.
 Internet Navigation - HTML provides tags which are used to navigate from one page to another and is
heavily used in internet navigation.
 Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs, desktop or laptops
owing to responsive design strategy.

 Offline support HTML pages once loaded can be made available offline on the machine without any
need of internet.
 Game development- HTML5 has native support for rich experience and is now useful in gaming
developent arena as well.
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.
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

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

</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>
</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>
</body>
</html>
HTML <link> Element
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>
</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>
</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>
</body>
</html>
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>

<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.
<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  tag.
<body>
<img src="../../images/w2t.png" width="380" height="70" /> 
</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>
</body>
HTML Headings Tags
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>
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.
Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in HTML
language.
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 −
Sr.N Tag & Description
o
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.
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.
World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4.
HTML Document Structure
A typical HTML document will have the following structure −
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
We will study all the header and body tags in subsequent chapters, but for now let's see what is document
declaration tag.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in
the document. Current version of HTML is 5 and it makes use of the following declaration −
<!DOCTYPE html>
There are many other declaration types which can be used in HTML document depending on what version of
HTML is being used. We will see more details on this while discussing <!DOCTYPE...> tag along with other
HTML tags.
HTML - Basic Tags

Heading 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.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
This will produce the following result −
Paragraph Tag
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 −
Example
<!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>
<p>Here is a third paragraph of text.</p>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!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>
</html>
This will produce following result −
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
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<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
Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to split the "12,
Angry" and "Men" across two lines −
An example of this technique appears in the movie "12 Angry Men."
In cases, where you do not want the client browser to break text, you should use a nonbreaking space
entity instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, you
should use something similar to the following code −
Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
HTML - Elements
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 −
Start Tag Content End Tag
<p> This is paragraph content. </p>

<h1> This is heading content. </h1>
<div> This is division content. </div>
<br />
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML
elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known
as void elements.
HTML documents consists 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.
HTML Tag vs. Element
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.
Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML element −
Example
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
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:
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 Header Tags h1 to h6

Definition
HTML header tag h1 is used for specifying heading level 1. There are 6 levels of headings (h1 - h6) with h1 the
most important and h6 the least important.
Browsers are supported various headings in different sizes - with h1 being the largest and h6 being the smallest.
Example
<html>
<head>
<title>HTML Heading Tag</title>
</head>
<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>
</html>
Important of Heading
There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from
h1 for the most important Tag and h6 tag for the least important.
Don't use headings to make text <big> or <strong>.
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 "".
<html>
<head>
<title> HTML Comment Tag </title>
</head>
<body>
<img src="images/jnj.png" width="365" height="86" /> 
</body>
</html>
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
<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>
<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"/>
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"/>
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>
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 />
<br />
<a id="lession1">Introduction of Lession.1</a>

<p>This is sub topic.1</p>
<br />
<br />
<div id="lession2">Introduction of Lession.2</div>
<br />
<br />
<p id="lession3">Introduction of Lession.3</p>
<br />
<br />
<article id="lession4">Introduction of Lession.4</article>
</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 Mailto 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>
<body>
<p>
<a href="mailto:mail@way2tutorial.com?
cc=xyz@mail.com&bcc=abc@mail.com&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

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

Marquee Tag
Marquee Text
Marquee Image
Marquee Start/Stop
Marquee Slow/Fast Text
Falling Text Effect
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.
"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

<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">
</marquee>
</body>
</html>
Change the Image Scrolling Speed
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="5">
</marquee>
</marquee>
</body>
</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>
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>
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>
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"
<input type="button" value="Faster"
</body>
</html>
Multiple Start/Stop Marquee
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="10" id="marquee2"><p>Marquee
1</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="Start Marquee 2" onClick="document.getElementById('marquee3').start();"/>
</body>
</html>
HTML Marquee Text Examples
Definition
 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
 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">
</marquee>
</body>
</html>
Slide stop image
<html>
<head>
</head>
<body>
<marquee behavior="slide" direction="left">
</marquee>
</body>
</html>
Side Touch Margin Bounce Image
<html>
<head>
</head>
<body>
<marquee behavior="alternate" direction="left">
</marquee>
</body>
</html>
Upside Image Scrolling
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="up">
</marquee>
</body>
</html>
Change the Image Scrolling Speed
<html>
<head>
</head>
<body>
</marquee>
</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>
onmousedown="this.stop();"
onmouseup="this.start();">Click and hold the mouse marquee stop</marquee>
</body>
</html>
Hover to Stop Marquee
<html>
<head>
</head>
<body>
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>
1</p></marquee>
2</p></marquee>
<input type="button" value="Start Marquee 1" onClick="document.getElementById('marquee2').start();"/><br
/>
<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>
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>
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"
<input type="button" value="Medium"
<input type="button" value="Faster"
</body>
</html>
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
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
Colspan "Column_N" Specify the span of there column.
Rowspan "Row_N" Specify the span of there Row.

<tr> Attributes

HTML Frame Tutorial
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.
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.
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.
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" />
</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>
</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%">
</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)
<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>

HTML Notes Unit 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Notes Unit 2

Uploaded by

Copyright:

Available Formats

HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to

HTML 1.0 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

HTML 5.0 2014

HTML Head Elements

HTML <head> Element Structure

HTML <title> Element

HTML <meta> Element

HTML <style> Element

HTML <script> Element

HTML <base> Element

Basic Body Section Tags

<br /> Defines the single line break.

<code> Defines the computer code on text base.

<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

HTML Images Tag

HTML - Basic Tags

<p> This is paragraph content. </p>

<div> This is division content. </div>

HTML Attributes (Global Attributes)

Id ID Name Declared unique id for the element.

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

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

HTML Header Tags h1 to h6

HTML Comments - How to Write

CSS Comment Example

HTML 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

<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

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

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

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

HTML Image Tag

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.

Border "Size" Specifies the image border size.

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

Image alignment (Right side)

Image alignment (Left side)

Image alignment (Wrap around)

HTML Link Tag

HTML Links - HTML Internal Link

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

Linking to parts of other documents