Scribd
Upload
38 views21 pages

Unit - 2

HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text and other content for display in a web browser. Some key HTML tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <title> for the document title displayed in the browser tab. HTML documents also use <head> and <body> tags to define document structure and contain comments that are not displayed but help explain the code.

Uploaded by

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

Unit - 2

HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text and other content for display in a web browser. Some key HTML tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <title> for the document title displayed in the browser tab. HTML documents also use <head> and <body> tags to define document structure and contain comments that are not displayed but help explain the code.

Uploaded by

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

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:

<!-- Write your comments here -->


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

<!--

please make all

buttons orange,

including this one!

-->

<button>Click me</button>

You might also like