UNIT I

Unit-I
Introduction of HTML Documents
HTML stands for Hyper Text Markup Language which is most widely used language
on Web to develop Web pages.

 Hypertext refers to way in which web pages are linked together. Thus link available on
web page is called Hypertext.
 As name suggests, HTML is Markup Language which means you use the HTML to
“markup” a text document with tags that tell a web browser how to structure it to display.
 HTML describes the structure of web pages using mark up.
 HTML elements are represented by tags.
 HTML tags label pieces of content such as heading, paragraph, table and so on.
 Browsers do not display HTML tags, but use them to render the content of page.
HTML was created by Berners-Lee in late 1991 but “HTML 2.0” was first standard
HTML specification which was published in 1995.
Originally, HTML was developed with intent of defining structure of documents like
heading, paragraph, lists and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with help of different tags
available in HTML language. HTML is standard markup language for creating web pages.

1.1 Historical Roots of HTML

HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially
released. It was published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and
was major version of HTML.
HTML is very evolving markup language and have evolved with various versions
updating long before its revised standards and specifications are carried in, each version has
allowed its users to create web pages in much easier and prettier way and make sites very
efficient.
 HTML 1.0 was released in 1993 with intention of sharing information that can be
readable and accessible via web browsers. But not many of developers were involved in
creating websites. So language was not growing.
 UNIT I

 Then comes HTML 2.0, published in 1995, which contains all features of HTML 1.0,
along with few additional features, which remained the standard markup language for
designing and creating websites until January 1997 and refined various core features of
HTML.
 Then comes HTML 3.0, where Dave Raggett introduced a fresh paper or draft on HTML.
It included improved new features of HTML, giving more powerful characteristics for
webmasters in designing web pages. But these powerful features of new HTML slowed
down the browser on applying further improvements.
 Then comes HTML 4.1, which is widely used and was a successful version of HTML
before HTML 5.0, which is currently released and used worldwide.HTML 5.0 can be said
an extended version of HTML 4.01, which was published in year 2012.

1.2 Web Page and Web Site

 Web Page
A Web page is a document commonly written in Hyper Text Markup Language
(HTML) that is accessible through internet or other network using an Internet browser. A
web page is accessed by entering a URL address and may contain text, graphics and
hyperlinks to other web pages and files.
To view a web page requires a browser (Example-Internet Explorer, Edge, Safari,
Firefox, or Chrome). For example, you are reading this web page using a browser. Once in a
browser you can open a web page by entering the URL in the address bar. For example,
typing https://www.srtmun.ac.in/en/ opens the STRMU home page.
Every web page is different. Web page consist of Hypertext and Hyperlink.
Hypertext-Hypertext refers to digital text which includes text, graphics, sound, images and
videos.
Hyperlink-Hyperlink refers to a link from hypertext file to another such file upon clicking
where the linked document opens up.

Web page consists of following elements.

1) Page Title-This is a single line text which is displayed on title bar of the browser
displaying web page.

2) Header- This is generally one or two lines text defining the purpose of the web page.
 UNIT I

3) Body of Web page- This is section below the header of the web page and it contains the
actual content of the web page.

4) Navigational Links- These are the hyperlinks placed on the web page using which you can
move the linked web pages/ documents.

5) Footer- This is the bottom section of the web page. This is the section where usually the
copyright notice, website contact information etc. is put.

Fig 1.1 Main Parts of Web Page

Types of Web Pages
There are mainly two types of web pages based on functionality.
1. Static Webpages
2. Dynamic Webpages

Static Webpages
Static webpages are those webpages that cannot be modified or altered by the client. Users
can only load the page and read information but cannot perform any change on page.
Dynamic Webpages
As name suggests, Dynamic Webpages are dynamic, which means it shows different
information at different point of time.
 UNIT I

Creating a Web Page

Creating a simple web page is easy. A simple webpage can be created using HTML
code only.

Follow the below steps to create your webpage:

1) Open the Notepad application on your computer.

2) Write the code in HTML.

3) Save the file with any name and .html extension.

4) Go to the saved file, double click or right click and run it.

5) It will open on your default browser and will display the output.

 Web Site
A website is a collection of related web pages, multimedia content, identified with a
common domain name, and published on at least one web server. A website may be
accessible via a public Internet Protocol(IP) network, such as Internet or private local area
network (LAN), by referencing a uniform resource locator (URL) that identifies the site.
A site or website is a central location of various web pages that are related and can be
accessed by visiting the home page using a browser. For example, the Computer Hope
website address is https://www.computerhope.com .
A website can be personal website, a commercial website for company or government
website or non-profit organization website.

How to open a website

To view a website requires a browser (e.g.:-Internet Explorer, Edge, Safari, Firefox,

or Chrome). Once in a browser, you can open a website by entering the URL in address bar.
For example, typing the “https://www.computerhope.com” opens the Computer Hope home
page.

Phases of Web Site Development

The phases of web site development consist of following steps.

1. Planning
2. Designing
 UNIT I

3. Testing
4. Publishing
5. Maintenance

1. Planning

Define the purpose of the website. It is the first step in planning. The purpose should
focus on what the website will accomplish and what the users will get from it.

Define Audience or End Users of Website. Defining the audience is a key step in
website planning process. The audience is the group of people who are expected to
visit your website.

Collect the information or content. Collect the contents or information according to

the requirements of end user and evaluate it. Any items that does not support the
defined purpose or accomplish the target audience objective should be removed.

2. Designing
After planning your HTML document format and deciding which information to
include and how to organize it, you are ready to create HTML documents. So first create
Master document that contain necessary information as well as general document format.
Under construction stage, you are always adding new pages, removing pages and
updating the contents.
3. Testing
Before publishing your pages on Web, you need to test your documents to see
how your documents will appear to your visitors.
Testing for overall appearance
Check for overall appearance of web page. If you want to change size of window,
color etc.
Test for Usability
Usability refers to how easily a visitor can find your site and use information.
Test for Readability
Readability refers to how easily a visitor can read information, text and images on a
web page.
Test for Accuracy
 UNIT I

Finally, be sure that the information on your site is accurate. The content should be
correct and up to date.
4. Publishing

Publishing means putting HTML documents on web server and telling people where
to look for them.

If you want only employee of your organization can access your web site, then
publish it on “Intranet”.

If you want your website to be visible or accessible to all over the world, then
publish it on “Internet”.

5. Maintenance
Maintaining the HTML document is the process of updating and revising existing
pages, adding new pages and deleting outdated pages.
Regularly maintain HTML documents is essential if you want visitors to keep
returning to your website.

1.3 Structure of HTML Documents and Basic Tags: HTML, HEAD,

TITLE, BODY

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output:
 UNIT I

HTML Documents

HTML is a markup language and makes use of various tags to format the content. These
tags are enclosed within angle braces <Tag Name>. All HTML documents must start with a
document type declaration: <!DOCTYPE html>.The HTML document itself begins
with <html> and ends with </html>.The visible part of the HTML document is
between <body> and </body>.

HTML <!DOCTYPE> Declaration

The <!DOCTYPE> declaration must be very first thing in your HTML document, before
the <html> tag. The <!DOCTYPE> declaration is not an HTML tag, it is an instruction to the web
browser about what version of HTML the page is written in. The DTD specifies the rule for the
mark up language, so that the browsers render the content correctly. The <!DOCTYPE> declaration
is not case sensitive.

Syntax : <!DOCTYPE html>

HTML <html> tag

Every html file starts with <html> tag. This tag tells the browser that content of the
file is in html format. The <html> tag represents the root of an HTML document.
Syntax: <html>. </html>

HTML <head> tag

The <head> element is container for all the head elements. The <head> tag is used to
indicate header area of the document.
 UNIT I

Syntax: <head> ........</head>

HTML <title > tag

The <title> tag is used to display text on the title bar of the browser. You can NOT
have more than one <title> element in an HTML document.
Syntax: <title>. </title>

HTML <body > tag

The < body> tag defines the document’s body. The body element contains all the
contents of an HTML document such as text, hyperlinks, images, tables, lists etc.

Attributes

1. alink attribute
The alink attribute specifies the color of an active link in a document (a link is activated
when it is clicked).

2. vlink attribute
The vlink attribute specifies the color of visited links in a document.

3. link attribute
The link attribute specifies the default color of unvisited links in a document.
Syntax: <body alink = ”color_name”>
<body vlink = ”color_name”>
<body link = ”color_name”>

4. background attribute
The background attribute specifies a background image for a document.
Syntax: <body background=”URL”>

5. bgcolor attribute
The bgcolor attribute specifies the background color of a document.
Syntax: <body bgcolor = ”color_name”>

6. text attribute
The text attribute specifies the color of the text in a document.
Syntax: <body text= ”color_name”>
 UNIT I

1.4 Formatting Tags

1. Paragraph Tags

The <p> tag in HTML defines a paragraph. These have both opening and closing tags.
So anything mentioned within <p> and </p> is treated as a paragraph. a browser itself add an
empty line before and after a paragraph. An HTML <p> tag indicates starting of new paragraph.

Syntax: <p>This is first paragraph.</p>

Attributes:

ALIGN:

This attribute specifies the alignment of text within the paragraph. The default value
is LEFT. The align attribute has three values LEFT, RIGHT and CENTER.

<p align=”center”>This is second paragraph.</p>

<p align=”right”>This is third paragraph.</p>

Output:

This is first paragraph.

This is second paragraph.

This is third paragraph.

2. List Tags

HTML Lists are used to specify lists of information. All lists may contain one or
more list elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

HTML Ordered List or Numbered List<OL>

In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also. The ordered list starts with <ol> tag and the list items start with
<li> tag.
 UNIT I

Syntax: <ol>
<li>Statistics</li>

<li>Office Automation</li>
<li>Web Technology</li>
<li>Oracle</li>

</ol>

Output:
1. Statistics
2. Office Automation
3. Web Technology
4. Oracle

Attributes

1. Type=1/a/A/i/I
The appearance of the number can be controlled with Type attribute.
Possible values are:
 1-Arabic Numbers(default) (1,2,3,4, 5,…..)
 a-Alphanumeric Lowercase (a, b, c, d, e,….)
 A- Alphanumeric Uppercase(A, B, C, D, E,….)
 i-Roman Numbers Lowercase(i, ii, iii…….)
 I- Roman Numbers Uppercase(I, II, III……)
2. Start
This attribute indicates where the list should start.

Syntax: <ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="i" start="5">

<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>

<li>SQL</li>

</ol>
Output:
 UNIT I

v. HTML
vi. Java

vii. JavaScript
viii. SQL

HTML Unordered List or Bulleted List<UL>

In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

Syntax: <ul>
<li> Statistics </li>
<li> Office Automation </li>
<li> Web Technology </li>
<li>Oracle</li>
</ul>
Output:
o Statistics
o Office Automation
o Web Technology
o Oracle
Attributes:

1. Type=Disc/Square/Circle

The type attribute is used to change the bullet style appearance from disc to square or
circle.

<ul type = ”square”>

<li> BCA</li>
<li>BCS</li>
</ul>

Output:
 BCA
 BCS
 UNIT I

HTML Description Lists<DL>

HTML also supports description lists. A description list is a list of terms, with a
description of each term. The <dl> tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term:

Syntax:<dl>

<dt>Defining Term</dt>

<dd>Definition</dd>

</dl>

<DT> Tag

This tag is used inside the DL tag. It contains a Defining term whose definition is
provided by the next <DD> tag.

Syntax: <DT>…. </DT>

<DD> Tag

This tag is used inside a <DL> tag. <DD> tag is used to provide the definition of the
text which is written in <DT > tag.

Syntax: <DD>…. </DD>

Example:

<html>

<head>

<title> Definition List</title>

</head>

<body>

<DL>

<DT> H.T.M.L.</DT>

<DD> HYPERTEXT MARKUP LANGUAGE<DD>

 UNIT I

<DT> C.S.S.</DT>

<DD>CASCADING STYLE SHEETS</DD>

</DL>

</body>

</html>

Output:

H.T.M.L.

HYPERTEXT MARKUP LANGUAGE

C.S.S.

CASCADING STYLE SHEETS

2. Horizontal Rule <HR> Tag

This element is used to insert a horizontal rule in web page. It visually separate
document sections. The horizontal rule does not have a closing tag.

Syntax: <HR>

Attributes:
1. Align:
The align attribute specifies the alignment of a horizontal line. The align attribute has
no effect unless the width attribute is less than 100%.
<hr align = ”left /center/right”>

2. Width:
The width attribute specifies the width of a horizontal line in pixels or percent.
<hr width=pixels/%>
Example: <hr width=”50”> in pixel
<hr width=”50%”> in percentage
 UNIT I

3. Size
The size attribute specifies the height of a horizontal line in pixels.
<hr size = ”pixels”>
Example: <hr size=”50”>

4. Noshade
This attribute is used to indicate that the rule should not get its usual shaded
appearance, but instead should be drawn as a thick line.
<hr noshade>

5. Color:
This attribute is used to specify the color of the horizontal line. The color should be
specified in color name or as a color code in hexadecimal notation.
<hr color = ”color name”/ ”#color code”>

Example:
<html>
<body>
<p> This is some text. </p>
<hr align = ”left” width=”50%” color=”brown”>
</body>
</html>
Output :
This is some text.

1.5 Heading Tags, Pre Tag, DIV Tag and SPAN Tag
 Heading Tags:
Headings are important in HTML documents. The <h1> to <h6> tags are used to
define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.
Browsers automatically add some white spaces before and after a heading.
It is important to use headings to show the document structure.
 UNIT I

<h1> headings should be used for main headings, followed by <h2> headings, then
less important<h3> and so on.
Syntax:
<h1 align =” left/right/center/justify”>……… </h1>
Attributes
1. Align
This attribute is used to align the heading in web page to left, right, center or justify.
Syntax:
<h1 align =” left/right/center/justify”>……… </h1>
Value Description
Left Left aligns the heading
Right Right aligns the heading
Center Center aligns the heading
Justify Heading is justified to both margins

Example:

<h1>Heading no. 1</h1>

<h2>Heading no. 2</h2>

<h3>Heading no. 3</h3>

<h4>Heading no. 4</h4>

<h5>Heading no. 5</h5>

<h6>Heading no. 6</h6>

Output

Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5
Heading no 6
 UNIT I

<Pre> tag:

The HTML <pre> tag is used to specify pre-formatted texts. Texts within <pre>. </pre>
tag is displayed in a fixed-width font. Usually it is displayed in Courier font. It maintains both space
and line break.

It is widely used to display language examples e.g. Java, C#, C, C++ etc because it displays
the code as it is typed.

Use the <pre> element when displaying text with unusual formatting or some sort of
computer code. The <pre> tag can be used to indicate that text shouldn’t be formatted by the
browser.

Syntax: <pre>……text….</pre>

Example:

<pre>

This is a formatted text

by using the HTML pre tag. It maintains

both space and line break.

</pre>

Output

This is a formatted text

by using the HTML pre tag. It maintains

both space and line break.

Attribute:

Width: The width attribute specifies the maximum number of characters per line.

Example: <pre width=”30”> …… </pre>

 UNIT I

Grouping Content:

The <div> and <span> elements allow you to group together several elements to
create sections or subsections of a page.

<div> Tag

The HTML <div> tag is used to group the large section of HTML elements together.

We know that every tag has a specific purpose e.g. p tag is used to specify paragraph,
<h1> to <h6> tag are used to specify headings but the <div> tag is just like a container unit
which is used to encapsulate other page elements and divides the HTML documents into
sections.

The div tag is generally used by web developers to group HTML elements together
and apply CSS styles to many elements at once. For example: If you wrap a set of paragraph
elements into a div element so you can take the advantage of CSS styles and apply font style
to all paragraphs at once instead of coding the same style for each paragraph element.

Attributes

Attribute Value Description

Align Left Not supported in HTML5

Right Specifies the alignment of the content inside a <div> element

Centre

Justify

Example:

<div style="border:1px solid pink; padding:20px; font-size:20px">

<p>Welcome to college, Here you get classes on latest technologies.</p>

<p>This is second paragraph</p>

</div>

Output
 UNIT I

Welcome to college, here you get classes on latest

technologies.This is second paragraph.

<span> Tag
HTML <span> tag is used as a generic container of inline elements. It is used for styling
purpose to the grouped inline elements (using class and id attribute or inline style).
The <span> tag does not have any default meaning or rendering.
The <span> tag can be useful for the following task:
o To change the language of a part of the text.

o To change the color, font, background of a part of text using CSS

o To apply the scripts to the particular part of the text.

HTML <span> is much similar as <div> tag, but <div> is used for block-level
elements and <span> tag is used for inline elements.

Syntax

<span>Write your content here ..... </span>

Example:
<!DOCTYPE html>

<html>
<head>
<title>Span Tag</title>

</head>

<body>
<h2>Example of span tag</h2>
<p>I have choosen only
<span style="color: red;">red</span>,
<span style="color: blue;">blue</span>, and

<span style="color: green;">green</span> colors for my painting.

</p>
 UNIT I

</body>
</html>

Output

1.6 FONT Tag, ADDRESS Tag and MARQUEE Tag

 FONT Tag

HTML <font> tag is used to define the font style for the text contained within it. It defines the
font size, color, and face or the text in an HTML document.

Syntax

<font size=" " color=" " face=" "> Content ... </font>

Example:

<!DOCTYPE html>

<html>
<head>
<title>Font Tag</title>

</head>
<body>
<h2>Example of font tag</h2>
<p>This is normal text without any font styling</p>

<p>
<font color="blue">Text with normal size and default face</font> </p>
 UNIT I

<p>
<font size="5" color="green">Text with Increased size and default face</font>

</p>
<p>
<font color="red" face="cursive">Text with Changed face</font> </p>

</body>
<html>

Output:

ADDRESS tag

HTML <address> tag is used to specify the authorship information of the article or
webpage. It can contain any type of information, which is needed such as, URL, physical
address, phone number, email, other links, etc.

The <address> tag is useful for various contexts such as business contact information in the
header of the page, or author related contact information, etc.The contact information written
between <address> tags mostly renders in the italic form on the browser. The <address> tag
does not contain any specific attribute for it.

Syntax:

<address>………</address>

Example:
<!DOCTYPE html>
 UNIT I

<html>
<body>
<address>
Author<a href ="mailto:author@gmail.com">Mail Us</a><br>
Visit us at: <br>
Example.com <br>
Box 564, Kothrud <br>
Pune
</address>
</body>
</html>
Output:

Author Mail Us

Visit us at:

Example.com

Box 564, Kothrud

Pune

MARQUEE Tag

The Marquee HTML tag is a non-standard HTML element which is used to scroll an image
or text horizontally or vertically. In simple words, you can say that it scrolls the image or text
up, down, left or right automatically. Marquee tag was first introduced in early versions of
Microsoft's Internet Explorer. It is compared with Netscape's blink element.

Example:
<marquee width="100%" behavior="scroll" bgcolor="pink">
This is an example of a scroll marquee...

</marquee>

Output

This is an example of a scroll marquee...

Attributes:
 UNIT I

Attribute Description

It facilitates user to set the behavior of the marquee to one of the three different
behavior
types: scroll, slide and alternate.

direction defines direction for scrolling content. It may be left, right, up and down.

Width defines width of marquee in pixels or %.

Height defines height of marquee in pixels or %.

Hspace defines horizontal space in pixels around the marquee.

Vspace defines vertical space in pixels around the marquee.

scrolldelay defines scroll delay in seconds.

scrollamount defines scroll amount in number.

Loop defines loop for marquee content in number.

Bgcolor defines background color. It is now deprected.

1.7 Text–level Elements and other different formatting tags

HTML formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using CSS. There are many formatting tags
in HTML. These tags are used to make text bold, italic and underlined.

1. <b> (Bold)
The text written between <b> and </b> tag is used to represent text in bold font. It
is a physical tag which displays text in bold font.
Syntax: <b>……</b>
Example: <b> Write your first paragraph </b>

2. <strong>(Strong)
The text written between <strong> and </strong> tag is shown important text.
<strong> tag is a logical tag, which displays the content in bold font and informs browser
about its logical importance.
Syntax: <strong>……</strong>
Example: <strong> HTML stands for Hyper Text Markup Language</strong>
 UNIT I

3. <i>(Italic)
<i> element is the physical element which displays the enclosed text in italic font.
Syntax: <italic>……</italic>
Example: <i> Hyper Text Markup Language </i>

4. <em>(embedded)
<em> tag is a logical element which display the enclosed content in italic font
with added semantics importance.
Syntax: <em>……</em>
Example: <em> HTML</em>

5. <mark>(marked)
If you want to mark or highlight the text you should write content within <mark>
and </mark> tag.
Syntax: <mark>……</mark>
Example: <mark> Welcome</mark>

6. <u>(underlined)
If you write text between <u> and </u> is shown in underline text.
Syntax: <u>……</u>
Example: <u> This is my first book </u>

7. <strike> (strikethrough)
Anything written within <strike> and</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
Syntax: < strike >……</strike>
Example <strike> Welcome to HTML</strike>

8. <tt> (monospaced)
If you want that each letter has same width, then you should write content within
<tt> and </tt> element.
Syntax: < tt>……</tt>
Example: <tt> Welcome to HTML</tt>
 UNIT I

9. ^{(Superscript)
The text written between ^and is shown in superscript.
Syntax: < sup >……}
Example: ^{Welcome to HTML}

10. _{(Subscript)
The text written between <sub > and} is shown in subscript.
Syntax: < sub >……</sub>
Example: _{Welcome to HTML}

11. <del>(Delete)
The text written between <del> and </del> is displayed as deleted text.
Syntax: < del >……</del>
Example : <del> Welcome to HTML </del>

12. <ins>(Insert)
The text written between <ins> and </ins> is displayed as inserted text.
Syntax: < ins>……</ins>
Example: <ins> Welcome to HTML</ins>

13. <big> (Big Font)

The text written between <big> and </big> is used to display text in font size
bigger. It increases one font size than previous one.
Syntax: < big>……</big>
Example: <big> Welcome to HTML</big>

14. <small> (Small Font)

The text written between <small> and </small> is used to display text in font size
smaller. It reduces one font size than previous one.
Syntax: < small>……</small>
Example: <small> Welcome to HTML </small>