Scribd
Upload
156 views40 pages

Class: XII Subject: Computer: Features of HTML

HTML (Hypertext Markup Language) is the code that defines the structure and layout of web pages. It uses tags to annotate text and other content to indicate how it should be displayed. Some key HTML tags include headings, paragraphs, line breaks, horizontal rules, and preformatted text. Attributes can be added to tags to provide additional information to change features like text alignment. Formatting tags are used to style text elements with bold, italics, underlines, and strikethrough.

Uploaded by

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

Class: XII Subject: Computer: Features of HTML

HTML (Hypertext Markup Language) is the code that defines the structure and layout of web pages. It uses tags to annotate text and other content to indicate how it should be displayed. Some key HTML tags include headings, paragraphs, line breaks, horizontal rules, and preformatted text. Attributes can be added to tags to provide additional information to change features like text alignment. Formatting tags are used to style text elements with bold, italics, underlines, and strikethrough.

Uploaded by

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

Class: XII

Subject: Computer

Chapter 1: HTML
The Hypertext Mark-up Language (or HTML) is the language used to create
documents for the World Wide Web.
Tim Berners lee a researcher of particle physics of Cern lab, Geneva gave the
concept of html in 1989.
Features of html
HTML is the most common used language to write web pages. It has recently
gained popularity due to its advantages such as: -
1- It is the language which can be easily understand and can be modified.
2- Effective presentations can be made with the HTML with the help of its all
formatting tags.
3- It provides the more flexible way to design web pages along with the text.
4- Links can also be added to the web pages so it helps the readers to browse
the information of their interest.
5- You can display HTML documents on any platforms such as Windows and
Linux etc.
6-Graphics, videos and sounds can also be added to the web pages which give
an extra attractive look to your web pages .

HTML stands for HyperText Markup Language, and it is the most widely
used language to write Web Pages.

Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus, the link available on a webpage is called Hypertext.

As its name suggests, HTML is a Markup Language which means you use
HTML to simply "mark-up" a text document with tags that tell a Web browser
how to structure it to display.

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.
An HTML tag is commonly defined as a set of characters constituting a formatted
command for a Web page. At the core of HTML, tags provide the directions or recipes for
the visual content that one sees on the Webpage. Or we can say, HTML tags are the
hidden keywords within a web page that define how your web browser must format
and display the content.

Container and empty tags


There are two kinds of tags: container and empty. The container tag always
wraps around text or graphics and comes in a set with an opening and a closing.

<html> opening tag


</html> closing tag

The forward slash (/) on the closing tag tells the browser that the tag has ended.
On the other hand, the empty tags are stand alone. For ex. The tag <br> is
one that adds a line break. Empty tags do not have to be wrapped around text
and do not require a closing

HTML structure.
All HTML documents are divided into two main parts: the head and the body.
When you begin any new page, it must have a declaration: <!DOCTYPE
html>. It’s telling or declaring to the browser that the following file is an HTML
file.

To build any webpage you will need four primary tags: <html>, <head>, <title>
and <body>. These are all container tags and must appear as pairs with a
beginning and an ending.

Basic Structure of HTML document:


Here is a diagram, showing the two main parts and the primary tags.
---------------–--------------------------------------
Above example of HTML document uses the following tags −

Sr.No Tag & Description

1 <!DOCTYPE...>

This tag defines the document type and HTML version.

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

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

4 <title>
The <title> tag is used inside the <head> tag to mention the document title.

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

Some basic HTML tags

Heading Tags
Any document starts with a heading. We 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:
<html>

<head>
<title>Heading Example</title>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>

</html>

This will produce the following result –

This is heading 1
This is heading 2
This is heading 3

This is heading 4
This is heading 5

This is heading 6

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 −

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

</html>

This will produce the following result −

Here is a first paragraph of text.

Here is a second paragraph of text.


Line Break Tag
Whenever you use the <br> tag, anything following it starts from the next line. This
tag is an example of an empty tag, where you do not need opening and closing tags,
as there is nothing to go in between them.
<html>

<head>
<title>Line Break Example</title>
</head>

<body>
<p>Hello<br>
You delivered your assignment ontime.<br>
Thanks<br>
</body>

</html>

This will produce the following result −


Hello
You delivered your assignment on time.
Thanks

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.
<hr> tag is an example of the empty element, where we do not need opening and
closing tags, as there is nothing to go in between them.
For example, you may want to give a line between two paragraphs as in the given
example below −
Example

<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>
This will produce the following result −

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Preserve Formatting
Sometimes, we want our text to follow the exact format of how it is written in the HTML
document. In these cases, we can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.
Example

<html>

<head>
<title>Preserve Formatting Example</title>
</head>

<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>

</html>

This will produce the following result –

function testFunction( strText ){


alert (strText)
}
Attributes

An attribute is used to define the characteristics of an HTML element and is placed


inside the element's opening tag. All attributes are made up of two parts −
a name and a value
• The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.
• The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left,
center and right.
Example
<html>

<head>
<title>Align Attribute Example</title>
</head>

<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>

</html>
This will display the following result –

This is left aligned

This is center aligned

This is right aligned

Formatting tags
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below
-
Example

<html>

<head>
<title>Bold Text Example</title>
</head>

<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>

</html>

This will produce the following result –

The following word uses a bold typeface.

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown
below −
Example

<html>

<head>
<title>Italic Text Example</title>
</head>

<body>
<p>The following word uses an <i>italicized</i>
typeface.</p>
</body>

</html>

This will produce the following result –

The following word uses an italicized typeface.

Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as
shown below −
Example

<html>

<head>
<title>Underlined Text Example</title>
</head>

<body>
<p>The following word uses an <u>underlined</u>
typeface.</p>
</body>

</html>

This will produce the following result –

The following word uses an underlined typeface.

Strike Text
Anything that appears within <strike>...</strike> element is displayed with
strikethrough, which is a thin line through the text as shown below −
Example

<html>

<head>
<title>Strike Text Example</title>
</head>

<body>
<p>The following word uses a <strike>strikethrough</strike>
typeface.</p>
</body>

</html>

This will produce the following result –

The following word uses a strikethrough typeface.


Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts
are known as variable-width fonts because different letters are of different widths (for
example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however,
each letter has the same width.
Example

<html>

<head>
<title>Monospaced Font Example</title>
</head>

<body>
<p>The following word uses a <tt>monospaced</tt>
typeface.</p>
</body>

</html>

This will produce the following result –

The following word uses a monospaced typeface.

Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used
is the same size as the characters surrounding it but is displayed half a character's
height above the other characters.
Example
Live Demo

<!DOCTYPE html>
<html>

<head>
<title>Superscript Text Example</title>
</head>

<body>
<p>The following word uses a <sup>superscript</sup>
typeface.</p>
</body>

</html>

This will produce the following result –

The following word uses a superscript typeface.

Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is
the same as the characters surrounding it, but is displayed half a character's height
beneath the other characters.
Example

<html>

<head>
<title>Subscript Text Example</title>
</head>

<body>
<p>The following word uses a <sub>subscript</sub>
typeface.</p>
</body>

</html>

This will produce the following result –

The following word uses a subscript typeface.

Larger Text
The content of the <big>...</big> element is displayed one font size larger than the
rest of the text surrounding it as shown below −
Example

<html>

<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>

</html>

This will produce the following result –

The following word uses a big typeface.

Smaller Text
The content of the <small>...</small> element is displayed one font size smaller
than the rest of the text surrounding it as shown below −
Example

<html>

<head>
<title>Smaller Text Example</title>
</head>

<body>
<p>The following word uses a <small>small</small>
typeface.</p>
</body>

</html>
This will produce the following result –

The following word uses a small typeface.

Grouping Content
The <div> tag allows us to group together several elements to create sections or
subsections of a page.
For example, we might want to put all of the footnotes on a page within a <div>
element to indicate that all of the elements within that <div> element relate to the
footnotes. You might then attach a style to this <div> element so that they appear
using a special set of style rules.
Example

<html>

<head>
<title>Div Tag Example</title>
</head>

<body>
<div align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>

<div align = "left" bgcolor = "white">


<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>

</html>
This will produce the following result –

HOME | CONTACT | ABOUT


Content Articles

Actual content goes here.....

Meta Tags
The <meta> tag is used to provide such additional information. This tag is an empty
element and so does not have a closing tag but it carries information within its
attributes.
We can include one or more meta tags in our document based on what information
we want to keep in our document but in general, meta tags do not impact physical
appearance of the document so from appearance point of view, it does not matter if
we include them or not.
We can add metadata to our web pages by placing <meta> tags inside the header of
the document which is represented by <head> and </head> tags. A meta tag can
have following attributes in addition to core attributes −

Sr.No Attribute & Description

1
Name
Name for the property. Can be anything. Examples include, keywords, description, author, revised,
generator etc.

2
content
Specifies the property's value.

Specifying Keywords
You can use <meta> tag to specify important keywords related to the document and
later these keywords are used by the search engines while indexing your webpage
for searching purpose.

Example:
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />

Document Description
You can use <meta> tag to give a short description about the document. This again
can be used by various search engines while indexing your webpage for searching
purpose.

<meta name = "description" content = "Learning about Meta Tags."


/>

HTML - Comments
Comment is a piece of code which is ignored by any web browser. It is a good practice
to add comments into HTML code, especially in complex documents, to indicate
sections of a document, and any other notes to anyone looking at the code.
Comments help others to understand our code and increases code readability.
HTML comments are placed in between <!-- ... --> tags. So, any content placed with-
in <!-- ... --> tags will be treated as comment and will be completely ignored by the
browser.
Example

<!DOCTYPE html>
<html>

<head> <!-- Document Header Starts -->


<title>This is document title</title>
</head> <!-- Document Header Ends -->

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

</html>

This will produce the following result without displaying the content given as a part of
comments −
Document content goes here.....

HTML - Images
Images are very important to beautify as well as to depict many complex concepts in
simple way on your web page.

Insert Image
We can insert any image in our web page by using <img> tag. Following is the simple
syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes
and it has no closing tag.
Example
To try following example, let's keep our HTML file test.html and image file
htmlImage.png in the same directory −

<html>

<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/htmlImage.png" alt = "Test Image" />
</body>

</html>

We can use PNG, JPEG or GIF image file based on our comfort but make sure to
specify correct image file name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an
image, if the image cannot be displayed.

Set Image Width/Height


We can set image width and height based on our requirement
using width and height attributes. You can specify width and height of the image in
terms of either pixels or percentage of its actual size.
Example

<html>

<head>
<title>Set Image Width and Height</title>
</head>

<body>
<p>Setting image width and height</p>
<img src = "/html/htmlImage.png" alt = "Test Image" width =
"150" height = "100"/>
</body>

</html>

Set Image Border


By default, image will have a border around it, you can specify border thickness in
terms of pixels using border attribute. A thickness of 0 means, no border around the
picture.
Example

<!DOCTYPE html>
<html>

<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image"
border = "3"/>
</body>

</html>

Set Image Alignment


By default, image will align at the left side of the page, but we can use align attribute
to set it in the center or right.
Example

<!DOCTYPE html>
<html>

<head>
<title>Set Image Alignment</title>
</head>

<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image"
border = "3" align = "right"/>
</body>

</html>

HTML - Lists
HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more list elements. Lists may contain −
• <ul> − An unordered list. This will list items using plain bullets.
• <ol> − An ordered list. This will use different schemes of numbers to list items.
• <dl> − A definition list. This arranges items in the same way as they are arranged in a
dictionary.

HTML Unordered Lists


An unordered list is a collection of related items that have no special order or
sequence. This list is created by using HTML <ul> tag. Each item in the list is marked
with a bullet.
Example
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result –

• Beetroot
• Ginger
• Potato
• Radish

The type Attribute


You can use type attribute for <ul> tag to specify the type of bullet you like. By default,
it is a disc. Following are the possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example
Following is an example where we used <ul type = "square">

<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result −

▪ Beetroot
▪ Ginger
▪ Potato
▪ Radish

Example
Following is an example where we used <ul type = "disc"> −

<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result –

• Beetroot
• Ginger
• Potato
• Radish
Example
Following is an example where we used <ul type = "circle"> −

<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result –

o Beetroot
o Ginger
o Potato
o Radish

HTML Ordered Lists


If we are required to put our items in a numbered list instead of bulleted, then HTML
ordered list will be used. This list is created by using <ol> tag. The numbering starts
at one and is incremented by one for each successive ordered list element tagged
with <li>.
Example

<html>
<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

1. Beetroot
2. Ginger
3. Potato
4. Radish

The type Attribute


We can use type attribute for <ol> tag to specify the type of numbering we like. By
default, it is a number. Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example
Following is an example where we used <ol type = "1">

<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result –

1. Beetroot
2. Ginger
3. Potato
4. Radish

Example
Following is an example where we used <ol type = "I">

<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

I. Beetroot
II. Ginger
III. Potato
IV. Radish
Example
Following is an example where we used <ol type = "i">

<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result –

i. Beetroot
ii. Ginger
iii. Potato
iv. Radish

Example
Following is an example where we used <ol type = "A" >

<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result –

A. Beetroot
B. Ginger
C. Potato
D. Radish

Example
Following is an example where we used <ol type = "a">

<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result –

a. Beetroot
b. Ginger
c. Potato
d. Radish

The start Attribute


We can use start attribute for <ol> tag to specify the starting point of numbering we
need. Following are the possible options −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Example
Following is an example where we used <ol type = "i" start = "4" >

<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result –

iv. Beetroot
v. Ginger
vi. Potato
vii. Radish

HTML Definition Lists


HTML supports a list style which is called definition lists where entries are listed
like in a dictionary or encyclopedia. The definition list is the ideal way to present a
glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.

• <dl> − Defines the start of the list


• <dt> − A term
• <dd> − Term definition
• </dl> − Defines the end of the list
Example

<html>

<head>
<title>HTML Definition List</title>
</head>

<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>

</html>

This will produce the following result −


HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

Text Links
A webpage can contain various links that take us directly to other pages and even
specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words,
phrases, and images. Thus we can create hyperlinks using text or images available
on a webpage.

Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and anything
between the opening <a> tag and the closing </a> tag becomes part of the link and
a user can click that part to reach to the linked document. Following is the simple
syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
Example
Let's try following example which links http://www.tutorialspoint.com at our page −
<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target =
"_self">Tutorials Point</a>
</body>

</html>
This will produce the following result, where you can click on the link generated to
reach to the home page of Tutorials Point (in this example).

Click following link

Tutorials Point

The target Attribute


We have used target attribute in our previous example. This attribute is used to
specify the location where linked document is opened. Following are the possible
options −

Sr.No Option & Description

1
_blank
Opens the linked document in a new window or tab.

2
_self
Opens the linked document in the same frame.

3
_top
Opens the linked document in the full body of the window.
Linking to a Page Section
You can create a link to a particular section of a given webpage by
using name attribute. This is a two-step process.
First create a link to the place where you want to reach with-in a webpage and name
it using <a...> tag as follows −
<h1>HTML Text Links <a name = "top"></a></h1>
Second step is to create a hyperlink to link the document and place where you want
to reach −
<a href = "/html/html_text_links.htm#top">Go to the Top</a>
This will produce following link, where you can click on the link generated Go to the
Top to reach to the top of the HTML Text Link tutorial.
Go to the Top

Setting Link Colors


You can set colors of your links, active links and visited links
using link, alink and vlink attributes of <body> tag.
Example
Save the following in test.htm and open it in any web browser to see
how link, alink and vlink attributes work.
<html>

<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>

<body alink = "#54A250" link = "#040404" vlink = "#F40633">


<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML
Tutorial</a>
</body>

</html>
This will produce the following result. Just check color of the link before clicking on it,
next check its color when you activate it and when the link has been visited.

Image Links
We have seen how to create hypertext link using text and we also learnt how to use
images in our webpages. Now, we will learn how to use images to create hyperlinks.
Example
It's simple to use an image as hyperlink. We just need to use an image inside
hyperlink at the place of text as shown below −

<!DOCTYPE html>
<html>

<head>
<title>Image Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target =
"_self">
<img src = "/images/logo.png" alt = "Tutorials Point"
border = "0"/>
</a>
</body>

</html>

HTML Email Tag


HTML <a> tag provides you option to specify an email address to send an email.
While using <a> tag as an email tag, you will use mailto: email address along
with href attribute. Following is the syntax of using mailto instead of using http.
<a href = "mailto: [email protected]">Send Email</a>
This code will generate the following link which you can use to send email.
Send Email
Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook
Express etc. ) installed on your user's computer. There is another risk to use this
option to send email because if user do not have email client installed on their
computer then it would not be possible to send email.

HTML - Backgrounds
By default, your webpage background is white in color. You may not like it, but no
worries. HTML provides you following two good ways to decorate your webpage
background.

• HTML Background with Colors


• HTML Background with Images
Now let's see both the approaches one by one using appropriate examples.

Html Background with Colors


The bgcolor attribute is used to control the background of an HTML element,
specifically page body and table backgrounds.
Following is the syntax to use bgcolor attribute with any HTML tag.
<tagname bgcolor = "color_value"...>
This color_value can be given in any of the following formats −
<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >

<!-- Format 2 - Use hex value -->


<table bgcolor = "#f1f1f1" >

<!-- Format 3 - Use color value in RGB terms -->


<table bgcolor = "rgb(0,0,120)" >
Example
Here are the examples to set background of an HTML tag −

<html>

<head>
<title>HTML Background Colors</title>
</head>

<body bgcolor = "yellow" >

This background is yellow

</body>

</html>

Html Background with Images


The background attribute can also be used to control the background of an HTML
element, specifically page body and table backgrounds. You can specify an image to
set background of your HTML page or table.
Following is the syntax to use background attribute with any HTML tag.
<tagname background = "Image URL"...>
The most frequently used image formats are JPEG, GIF and PNG images.
Example
Here are the examples to set background images of a table.
<html>

<head>
<title>HTML Background Images</title>
</head>

<body background = "/images/html.gif">


This background is filled up with HTML image.

</body>

</html>

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 tags
using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors −
• bgcolor − sets a color for the background of the page.
• text − sets a color for the body text.
• 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.

HTML Color Coding Methods


There are following three different methods to set colors in your web page −
• Color names − You can specify color names directly like green, blue or red.
• Hex codes − A six-digit code representing the amount of red, green, and blue that makes
up the color.
• Color decimal or percentage values − This value is specified using the rgb( ) property.

HTML Colors - Color Names


You can specify direct a color name to set text or background color. W3C has listed
16 basic color names that will validate with an HTML validator but there are over 200
different color names supported by major browsers.

HTML Colors - Hex Codes


A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent
a red value, the next two are a green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop,
Paintshop Pro or MS Paint.
Each hexadecimal code will be preceded by a pound or hash sign #.
Like #000000 for black, #FFFFFF for white etc.

Color Color HEX

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

HTML Colors - RGB Values


This color value is specified using the rgb( ) property. This property takes three
values, one each for red, green, and blue. The value can be an integer between 0
and 255 or a percentage.
Note − All the browsers does not support rgb() property of color so it is recommended not to use
it.

Following is a list to show few colors using RGB values.

Color Color RGB

rgb(0,0,0)
rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,0)

rgb(0,255,255)

rgb(255,0,255)

rgb(192,192,192)

rgb(255,255,255)

HTML - Fonts
Fonts play a very important role in making a website more user friendly and increasing
content readability. Font face and color depends entirely on the computer and
browser that is being used to view your page but you can use HTML <font> tag to
add style, size, and color to the text on your website. You can use a <basefont> tag
to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your
fonts. To change any of the font attributes at any time within your webpage, simply
use the <font> tag. The text that follows will remain changed until you close with the
</font> tag. You can change one or all of the font attributes within one <font> tag.
Note −The font and basefont tags are deprecated and it is supposed to be removed in a future
version of HTML. So they should not be used rather, it's suggested to use CSS styles to
manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont
tags in detail.

Set Font Size


You can set content font size using size attribute. The range of accepted values is
from 1(smallest) to 7(largest). The default size of a font is 3.
Example

<html>
<head>
<title>Setting Font Size</title>
</head>

<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>

</html>

This will produce the following result –

Font size = "1"


Font size = "2"
Font size = "3"
Font size = "4"
Font size = "5"
Font size = "6"
Font size = "7"

Setting Font Face


You can set font face using face attribute but be aware that if the user viewing the
page doesn't have the font installed, they will not be able to see it. Instead user will
see the default font face applicable to the user's computer.
Example

<html>

<head>
<title>Font Face</title>
</head>

<body>
<font face = "Times New Roman" size = "5">Times New
Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans
MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>

</html>

This will produce the following result –

Times New Roman


Verdana
Comic Sans MS
WildWest
Bedrock

Specify alternate font faces


A visitor will only be able to see your font if they have that font installed on their
computer. So, it is possible to specify two or more font face alternatives by listing the
font face names, separated by a comma.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">
When your page is loaded, their browser will display the first font face available. If
none of the given fonts are installed, then it will display the default font face Times
New Roman.

Setting Font Color


You can set any font color you like using color attribute. You can specify the color
that you want by either the color name or hexadecimal code for that color.

Example

<html>

<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>

</html>

This will produce the following result –


This text is in pink
This text is red

The <basefont> Element


The <basefont> element is supposed to set a default font size, color, and typeface
for any parts of the document that are not otherwise contained within a <font> tag.
You can use the <font> elements to override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support
relative font setting by giving size a value of +1 for a size larger or −2 for two sizes
smaller.
Example

<html>

<head>
<title>Setting Basefont Color</title>
</head>

<body>
<basefont face = "arial, verdana, sans-serif" size = "2"
color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the &lt;basefont&gt; Element</h2>

<p><font size = "+2" color = "darkgray">


This is darkgray text with two sizes larger
</font>
</p>

<p><font face = "courier" size = "-1" color = "#000000">


It is a courier font, a size smaller and black in
color.
</font>
</p>
</body>

</html>

This will produce the following result −

This is the page's default font.


Example of the <basefont> Element
This is darkgray text with two sizes larger
It is a courier font, a size smaller and black in color.

Basic Terms related to the chapter

INTERNET

The Internet is a worldwide system of interconnected computer networks. The


computers and computer networks exchange information using TCP/IP
(Transmission Control Protocol/Internet Protocol) to communicate with each
other. The computers are connected via the telecommunications networks,
and the Internet can be used for e-mailing, transferring files and accessing
information on the World Wide Web.
The World Wide Web is a system of Internet servers that use HTTP (Hypertext
Transfer Protocol) to transfer documents formatted in HTML (Hypertext Mark-
up Language). These are viewed by using software for web browsers such as
Netscape, Safari, Google Chrome and Internet Explorer. Hypertext enables a
document to be connected to other documents on the web through
hyperlinks. It is possible to move from one document to another by using
hyperlinked text found within web pages.
Basic elements of internet are-
1. Client server system
2.Www
3.web pages
4.websites
5.web server
6.web browser
7.search engine
8.url
9.XML
1. Client server system.
The client–server model is a distributed application structure that partitions
tasks or workloads between the providers of a resource or service,
called servers, and service requesters, called clients .Examples of computer
applications that use the client–server model are Email, network printing, and
the World Wide Web. When a bank customer accesses online bankingservices
with a web browser (the client), the client initiates a request to the bank's web
server. The customer's login credentials may be stored in a database, and the
web server accesses the database server as a client. An application
server interprets the returned data by applying the bank's business logic, and
provides the output to the web server. Finally, the web server returns the
result to the client web browser for display.
2.WWW
The World Wide Web (WWW) is a network of online content that is formatted
in HTML and accessed via HTTP. The term refers to all the interlinked HTML
pages that can be accessed over the Internet. The World Wide Web was
originally designed in 1991 by Tim Berners-Lee while he was a contractor at
CERN.
The World Wide Web is most often referred to simply as "the Web."The World
Wide Web (WWW) is a network of online content that is formatted in HTML
and accessed via HTTP. The term refers to all the interlinked HTML pages that
can be accessed over the Internet. The World Wide Web was originally
designed in 1991 by Tim Berners-Lee while he was a contractor at CERN.
The World Wide Web is most often referred to simply as "the Web."
3.web pages
A web page or web page is a document commonly written
in HyperText Markup Language (HTML) that is accessible through the 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.
●Hypertext is text that links to other information. By clicking on a link in a
hypertext document, a user can quickly jump to different content.
Hypermedia - Hypermedia is a superset of hypertext. Hypermedia documents
contain links not only to other pieces of text, but also to other forms of media -
sounds, images, and movies. Images themselves can be selected to link to
sounds or documents. This means that browsers might not display a text file,
but might display images or sound or animations. Hypermedia simply
combines hypertext and multimedia.
4.website
IT is a collection of publicly accessible, interlinked Web pages that share a
single domain name. Websites can be created and maintained by an individual,
group, business or organization to serve a variety of purposes. Together, all
publicly accessible websites constitute the World Wide Web.
5.web server
web server is a system that delivers content or services to end users over the
internet. A web server consists of a physical server, server operating system
(OS) and software used to facilitate HTTP communication.
A web server is also known as an internet server.
6.web browser
A web browser is a software program that allows a user to locate, access, and
display web pages. In common usage, a web browser is usually shortened to
"browser." Browsers are used primarily for displaying and accessing websites
on the Internet, as well as other content created using Hypertext Markup
Language (HTML) and Extensible Markup Language (XML), etc.
Browsers translate web pages and websites delivered using Hypertext Transfer
Protocol (HTTP) into human readable content. They also have the ability to
display other protocols and prefixes, such as secure HTTP (HTTPS), File Transfer
Protocol (FTP), email handling (mailto:), and files (file:). Common browsers
include Internet Explorer from Microsoft, Firefox from Mozilla, Google Chrome,
Safari from Apple, and Opera.
7.search engine
Search engine is a service that allows Internet users to search for content via
the World Wide Web (WWW). A user enters keywords or key phrases into a
search engine and receives a list of Web content results in the form of
websites, images, videos or other online data. The list of content returned via a
search engine to a user is known as a search engine results page (SERP).
What is the difference between web browser and search engine?
A browser is a software program installed on computer, mobile phone or any
other electronic device that can easily bring access to the the internet, on the
other hand, a search engine is also a program that can search for the entered
keyword and bring the matches document and web pages.
Google Chrome, Mozilla Firefox, Opera, Safari, etc. are the name of popular
web browsers whereas Google, Yahoo, Bing, NATE, DuckDuckGo, etc are the
most popular search engine.
Typically, a browsers is used to access various websites and web pages
whereas search engines are used for searching purpose on the internet.
There is another difference based on the dependency. A person require a
browser to open a search engine but for opening browser, a search engine is
not required.
8.url
uniform resource locator (URL) is the address of a resource on the Internet. A
URL indicates the location of a resource as well as the protocol used to access
it.
A URL contains the following information:
The protocol used to access the resource,the location of the server (whether
by IP address or domain name),The port number on the server (optional),The
location of the resource in the directory structure of the server,A fragment
identifier (optional) ,Also known as a Universal Resource Locator (URL) or Web
address.

9.XML

It is a software- and hardware-independent tool for storing and transporting


data. XML stands for eXtensible Markup Language. It is a markup language
much like HTML
Which was designed to store and transport data.
XML was designed to be self-descriptive.

You might also like