Unit - 2

Unit -2
INTRODUCTION TO HTML: H I S T O RY TO
HTML, HTML G E N E R AT I O N S , HTML
D O C U M E N T S , A N C H O R TA G , H Y P E R L I N K S ,
HEADING, TITLE. LINKS, COLORFUL WEB
PA G E S , C O M M E N T L I N E S . D E S I G N I N G T H E
BODY SECTION: HEADING PRINTING,
ALIGNING THE HEADING, H O R I Z O N TA L
RULE, PA R A G R A P H , IMAGES &AMP;
PICTURES.
Introduction to HTML
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages

Introduction to HTML
HTML (Hypertext Markup Language) is used to create document on the World Wide Web. It is simply a collection of
certain key words called ‘Tags’ that are helpful in writing the document to be displayed using a browser on Internet.
It is a platform independent language that can be used on any platform such as Windows, Linux, Macintosh, and so
on. To display a document in web it is essential to mark-up the different elements of the document with the HTML
tags.
To view a mark-up document user has to open the document in a browser. A browser understands and interpret the
HTML tags, identifies the structure of the document (which part are which) and makes decision about presentation
(how the parts look) of the document
HTML also provides tags to make the document look attractive using graphics, font size and colours. User can make a
link to the other document or the different section of the same document by creating Hypertext Links also known as
Hyperlinks
History to HTML/ HTML generations
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 a major version
of HTML.
HTML 1.0 was released in 1993 with the intention of sharing information that can be readable
and accessible via web browsers. But not many of the developers were involved in creating
websites. So the language was also not growing.
Then comes HTML 2.0, published in 1995, which contains all the features of HTML 1.0 along
with a few additional features, which remained the standard markup language for designing and
creating websites until January 1997 and refined various core features of HTML.
History to HTML/ HTML generations
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 the new HTML slowed down the browser
in applying further improvements.
Then comes HTML 4.01, which is widely used and was a successful version of HTML before
HTML 5.0, which is currently released and used worldwide. HTML 5 can be said for an extended
version of HTML 4.01, which was published in the year 2012.
HTML documents
An HTML document is a file containing hypertext markup language. HTML code is based
on tags, or hidden keywords, which provide instructions for formatting the document.
A tag starts with an angle bracket and the 'less than' sign: '<'. The tag ends with an angle bracket
and the 'greater than' sign '>'. Tags tell the processing program, often the web browser, what to
do with the text.
For example, to make the word 'Hello' bold, you would use the opening bold tag <b> and then
the closing bold tag </b>, like this:
<b>Hello</b>
Structure of an HTML Document
An HTML Document is mainly divided into two parts:
HEAD: This contains the information about the HTML document. For
Example, the Title of the page, version of HTML, Meta Data, etc.
BODY: This contains everything you want to display on the Web Page.
<html> </html> : <html> is a root element of html.
It’s a biggest and main element in complete html language, all the tags ,
elements and attributes enclosed in it or we can say wrap in it , which is
used to structure a web page. <html> tag is parent tag of <head> and
<body> tag , other tags enclosed within <head > and <body>.
Anchor tag/ Hyperlinks
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:
•An unvisited link is underlined and blue
•A visited link is underlined and purple
•An active link is underlined and red
Syntax:
<a href = "link"> Link Name </a>
Example:
<html>
<body>
<h2>Welcome to MCC</h2>
<a href="https://www.mcc.edu.in/">Madras Christian College </a>
<h2>This is anchor Tag</h2>
</body>
</html>
Heading
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Title
The <title> tag defines the title of the document. The title must be
text-only, and it is shown in the browser's title bar or in the page's
tab. The <title> tag is required in HTML documents!
The contents of a page title is very important for search engine
optimization (SEO)! The page title is used by search engine
algorithms to decide the order when listing pages in search results.
The <title> element:
•defines a title in the browser toolbar
•provides a title for the page when it is added to favorites
•displays a title for the page in search-engine results
Example
<html>
<head>
<title>HTML Elements Reference</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Links
HTML links are hyperlinks.
We can click on a link and jump to another document. When we move the
mouse over a link, the mouse arrow will turn into a little hand.
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
By default, links will appear as follows in all browsers:

•An unvisited link is underlined and blue
•A visited link is underlined and purple
•An active link is underlined and red
Image as a Link
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link to an Email Address
Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program
(to let them send a new email):
Example
<a href="mailto:[email protected]">Send email</a>
Link Titles
The title attribute specifies extra information about an element. The information is most often
shown as a tooltip text when the mouse moves over the element.
Example
<a href="https://www.mcc.edu.in/" title="Go to MCC">Visit our College</a>
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of
a button:
Example
<button onclick="document.location='default.asp'">HTML Tutorial</button>

Colorful web pages,and comment lines
HTML supports 140 standard color names.
Example:
<h1 style="color:Tomato;">Hello World</h1>
We can set the color of borders:
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
<h3 style="border:1px dashed orange;">I have a border color.</h3>

HTML Colors
Colors are very important to give a good look and feel to your website. You can
specify colors on page level using <body> tag or you can set colors for individual
Example
tags using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors − <html>
<body bgcolor="blue">
• bgcolor − sets a color for the background of the page.
<h1>I am a Heading</h1>
• text − sets a color for the body text. </body>
</html>
• alink − sets a color for active links or selected links.
• link − sets a color for linked text.
• vlink − sets a color for visited links − that is, for linked text that you have already
clicked on.
Comments
In HTML, a comment is a section of text that is not processed by the web browser. Comments
are enclosed in  tags. These tags tell the browser that the text inside them is a comment
and should not be rendered on the front end.
HTML comments are not displayed in the browser, but they can help document your HTML
source code.
Comments are also great for debugging HTML, because you can comment out HTML lines of
code, one at a time, to search for errors.
syntax:


Comment- Example
<h1>Hello, world!</h1>

<button>Click me</button>
Designing the body section
HTML <body> tag
HTML <body> tag defines the main content of an HTML document which displays on the
browser. It can contain text content, paragraphs, headings, images, tables, links, videos, etc.
The <body> must be the second element after the <head> tag or it should be placed between
</head> and </html> tags. This tag is required for every HTML document and should only use
once in the whole HTML document.
Supporting Browsers
Element Chrome IE Firefox Opera Safari

<body> Yes Yes Yes Yes Yes
Example
<html>
<head>
<title>Body Tag</title>
</head>
<body>
<h2>Example of body tag</h2>
<p>This paragraph is written between the body tag</p>
</body>
</html>
Attribute Value Description
alink color It defines the color of the active link in a document. (Not supported in HTML5)
background URL It determines the background image for the document. (Not supported in
HTML5)
bgcolor color It determines the background color of the content. (Not supported in HTML5)
link color It determines the color of the unvisited link. (Not supported in HTML5)
text color It determines the color of the text in the document. (Not supported in HTML5)
vlink color It determines the color of the visited link. (Not supported in HTML5)
Heading Printing
An HTML heading tag is used to define the headings of a page. There are six levels of headings
defined by HTML. These 6 heading elements are h1, h2, h3, h4, h5, and h6; with h1 being the
highest level and h6 being the least.
•<h1> is used for the main heading. (Biggest in size)
•<h2> is used for subheadings, if there are further sections under the subheadings then
the <h3> elements are used.
•<h6> for the small heading (smallest one).
Example
<h1>Heading no. 1</h1>

Aligning the Heading
To set the heading alignment in HTML, we use the style attribute inside an HTML element.
The attribute is used with the HTML <h1> to <h6> tag, with the CSS property text-align for
setting alignment for an element.
Syntax
Following is the syntax for the heading alignment in HTML.
<h1 align="left | right | center | justify">
Example
<html>
<body>
<h1 align="center">Aligning my Heading</h1>
</body>
</html>
Horizontal Rule
The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a
thematic break in an HTML page to divide or separate document sections. The <hr> tag is an
empty tag, and it does not require an end tag.
Tag Attributes: The table given below describe the <hr> tag attributes. These attributes are not supported in HTML5:
Attribute Value Description

align left center right Used to specify the alignment of the horizontal rule.
noshade noshade Used to specify the bar without shading effect.
size pixels Used to specify the height of the horizontal rule.
width pixels Used to specify the width of the horizontal rule.
Paragraph
A paragraph always starts on a new line, and is usually a block of text. The
HTML <p> element defines a paragraph. A paragraph always starts on a new
line, and browsers automatically add some white space (a margin) before and
after a paragraph.
<p> <p>
This paragraph This paragraph
contains a lot of lines contains a lot of spaces
in the source code, in the source code,
but the browser but the browser
ignores it. ignores it.
</p> </p>
Images & pictures.
Images can improve the design and the appearance of a web page. We can use
PNG, JPEG or GIF image file based on our comfort but make sure we specify correct image file
name in src attribute. Image name is always case sensitive.
syntax
<img src = "Image URL" ... attributes-list/>
Alternative text
The next attribute we'll look at is alt. Its value is supposed to be a textual description of the
image, for use in situations where the image cannot be seen/displayed or takes a long time to
render because of a slow internet connection.
<img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth" />
Example
The <img> tag has two required attributes:
•src - Specifies the path to the image
•alt - Specifies an alternate text for the image, if the image for some reason cannot be
displayed
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" width=“150” height = “150”
border = “3” align = “right”/>
</body>
</html>

Unit - 2

Uploaded by

Copyright:

Available Formats

Unit - 2

Uploaded by

Document Information

Original Title

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

Unit - 2

Uploaded by

Copyright:

Available Formats

Unit -2

HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags

HTML uses markup tags to describe web pages

<html> </html> : <html> is a root element of html.

By default, links will appear as follows in all browsers:

Link to an Email Address

<button onclick="document.location='default.asp'">HTML Tutorial</button>

<h1 style="color:Tomato;">Hello World</h1>

We can set the color of borders:

<h1 style="border:2px solid Tomato;">Hello World</h1>

<h3 style="border:1px dashed orange;">I have a border color.</h3>

• link − sets a color for linked text.

please make all

including this one!

Element Chrome IE Firefox Opera Safari

<h2>Example of body tag</h2>

<p>This paragraph is written between the body tag</p>

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

Attribute Value Description

You might also like