Scribd
Upload
3 views

IWT UNIT - 2 HTML RGPV

IWT UNIT - 2 HTML RGPV

Uploaded by

Nsjdgnskd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

IWT UNIT - 2 HTML RGPV

IWT UNIT - 2 HTML RGPV

Uploaded by

Nsjdgnskd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 66

V-Semester

Open Elective CS- 504 (A)


Internet and Web Technology

UNIT 02
HTML: Basics of HTML, formatting and fonts, commenting code, color,
hyperlink, lists, tables, images, forms, XHTML, Meta tags, Character entities,
frames and frame sets, Browser architecture and Web site structure. Overview
and features of HTML5

CIRT & CIST, CORPORATE GROUP BHOPAL 1


BASICS of HTML:
HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.

 Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus, the link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use
HTML to simply "mark-up" a text document with tags that tell a Web
browser how to structure it to display.

Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to facilitate the sharing
of scientific information between researchers.

Now, HTML is being widely used to format web pages with the help of different
tags available in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document:

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

HTML Tags

As told earlier, HTML is a mark-up language and makes use of various tags to
format the content. These tags are enclosed within angle braces <Tag Name>.

CIRT & CIST, CORPORATE GROUP BHOPAL 2


Except few tags, most of the tags have their corresponding closing tags. For
example, <html> has its closing tag</html> and <body> tag has its closing tag
</body> tag etc.

Above example of HTML document uses the following tags:

Tag Description

 <!DOCTYPE...> : This tag defines the document type and HTML version.
 <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.
 <head> This tag represents the document's header which can keep other
HTML tags like <title>, <link> etc.
 <title> The <title> tag is used inside the <head> tag to mention the
document title.
 <body> This tag represents the document's body which keeps other HTML
tags like <h1>, <div>, <p> etc.
 <h1> This tag represents the heading.
 <p> This tag represents a paragraph.

HTML Document Structure

A typical HTML document will have the following structure:

CIRT & CIST, CORPORATE GROUP BHOPAL 3


<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>

Heading Tags
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the elements H1, H2,
H3, H4, H5. While displaying any heading, browser adds one line before and one
line after that heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<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>
OUTPUR RESULTS OH HEADING tags

CIRT & CIST, CORPORATE GROUP BHOPAL 4


This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

CIRT & CIST, CORPORATE GROUP BHOPAL 5


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:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

OUTPUT:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

CIRT & CIST, CORPORATE GROUP BHOPAL 6


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

The <br /> tag has a space between the characters br and the forward slash. If you
omit this space, older browsers will have trouble rendering the line break, while
if you miss the forward slash character and just use <br> it is not valid in
XHTML.

Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Sachin </p>
</body>

This will produce the following result:


Hello

You delivered your assignment on time.

Thanks

Sachin

CIRT & CIST, CORPORATE GROUP BHOPAL 7


Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr>
tag creates a line from the current position in the document to the right margin
and breaks the line accordingly.
For example, you may want to give a line between two paragraphs as in the given
example below:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>

This will produce the following result:


This is paragraph one and should be on top

This is paragraph two and should be at bottom

Again <hr /> tag is an example of the empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.
The <hr /> element has a space between the characters hr and the forward slash.
If you omit this space, older browsers will have trouble rendering the horizontal
line, while if you miss the forward slash character and just use <hr> it is not valid
in XHTML

CIRT & CIST, CORPORATE GROUP BHOPAL 8


Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in
the HTML document. In these cases, you 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
<!DOCTYPE html>
<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 ){


HTML
24
alert (strText)
}

Try using the same code without keeping it inside <pre>...</pre> tags

CIRT & CIST, CORPORATE GROUP BHOPAL 9


HTML Formatting Elements\

 In the previous chapter, you learned about the HTML style attribute.
 HTML also defines special elements for defining text with a special
meaning.
 HTML uses elements like <b> and <i> for formatting output, like bold or
italic text.
 Formatting elements were designed to display special types of text:
o <b> - Bold text
o <strong> - Important text
o <i> - Italic text
o <em> - Emphasized text
o <mark> - Marked text
o <small> - Small text
o <del> - Deleted text
o <ins> - Inserted text
o <sub> - Subscript text
o <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example

<b>This text is bold</b>

The HTML <strong> element defines strong text, with added semantic
"strong" importance.

Example

<strong>This text is strong</strong>

CIRT & CIST, CORPORATE GROUP BHOPAL 10


HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

Example

<i>This text is italic</i>

The HTML <em> element defines emphasized text, with added semantic
importance.

Example

<em>This text is emphasized</em>

Note: Browsers display <strong> as <b>, and <em> as <i>. However, there
is a difference in the meaning of these tags: <b> and <i> defines bold and
italic text, but <strong> and <em> means that the text is "important".

HTML <small> Element

The HTML <small> element defines smaller text:

Example

<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element

The HTML <mark> element defines marked/highlighted text:

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>

CIRT & CIST, CORPORATE GROUP BHOPAL 11


HTML <del> Element

The HTML <del> element defines deleted/removed text.

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines inserted/added text.

Example

<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element

The HTML <sub> element defines subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element

The HTML <sup> element defines superscripted text.

Example

<p>This is <sup>superscripted</sup> text.</p>

CIRT & CIST, CORPORATE GROUP BHOPAL 12


HTML Text Formatting Elements
Formatting Elements Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

CIRT & CIST, CORPORATE GROUP BHOPAL 13


HTML Comments
Comment tags are used to insert comments in the HTML source code.

HTML Comment Tags


You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the opening tag, but not in the
closing tag.
Note: Comments are not displayed by the browser, but they can help document
your HTML source code.
With comments you can place notifications and reminders in your HTML:

Example

<!DOCTYPE html>

<html>

<body>

<!-- Do not display this at the moment

<img border="0" src="pic_trulli.jpg" alt="Trulli">

-->

</body>

</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 14


Color Names

In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

CIRT & CIST, CORPORATE GROUP BHOPAL 15


HTML Color Names

Color Names Supported by All Browsers


All modern browsers support the following 140 color names (click on a color
name, or a hex value, to view the color as the background-color along with
different text colors):

SN Color Name HEX Color SN Color Name HEX Color


1 AliceBlue #F0F8FF 26 DarkGrey #A9A9A9
2 AntiqueWhite #FAEBD7 27 DarkGreen #006400
3 Aqua #00FFFF 28 DarkKhaki #BDB76B
4 Aquamarine #7FFFD4 29 DarkMagenta #8B008B
5 Azure #F0FFFF 30 DarkOliveGreen #556B2F
6 Beige #F5F5DC 31 DarkOrange #FF8C00
7 Bisque #FFE4C4 32 DarkOrchid #9932CC
8 Black #000000 33 DarkRed #8B0000
9 BlanchedAlmond #FFEBCD 34 DarkSalmon #E9967A
10 Blue #0000FF 35 DarkSeaGreen #8FBC8F
11 BlueViolet #8A2BE2 36 DarkSlateBlue #483D8B
12 Brown #A52A2A 37 DarkSlateGray #2F4F4F
13 BurlyWood #DEB887 38 DarkSlateGrey #2F4F4F
14 CadetBlue #5F9EA0 39 DarkTurquoise #00CED1
15 Chartreuse #7FFF00 40 DarkViolet #9400D3
16 Chocolate #D2691E 41 DeepPink #FF1493
17 Coral #FF7F50 42 DeepSkyBlue #00BFFF
18 CornflowerBlue #6495ED 43 DimGray #696969
19 Cornsilk #FFF8DC 44 DimGrey #696969
20 Crimson #DC143C 45 DodgerBlue #1E90FF
21 Cyan #00FFFF 46 FireBrick #B22222
22 DarkBlue #00008B 47 FloralWhite #FFFAF0
23 DarkCyan #008B8B 48 ForestGreen #228B22
24 DarkGoldenRod #B8860B 49 Fuchsia #FF00FF
25 DarkGray #A9A9A9 50 Gainsboro #DCDCDC

CIRT & CIST, CORPORATE GROUP BHOPAL 16


SN Color Name HEX Color SN Color Name HEX Color
51 GhostWhite #F8F8FF 76 LightSalmon #FFA07A
52 Gold #FFD700 77 LightSeaGreen #20B2AA
53 GoldenRod #DAA520 78 LightSkyBlue #87CEFA
54 Gray #808080 79 LightSlateGray #778899
55 Grey #808080 80 LightSlateGrey #778899
56 Green #008000 81 LightSteelBlue #B0C4DE
57 GreenYellow #ADFF2F 82 LightYellow #FFFFE0
58 HoneyDew #F0FFF0 83 Lime #00FF00
59 HotPink #FF69B4 84 LimeGreen #32CD32
60 IndianRed #CD5C5C 85 Linen #FAF0E6
61 Indigo #4B0082 86 Magenta #FF00FF
62 Ivory #FFFFF0 87 Maroon #800000
63 Khaki #F0E68C 88 MediumAquaMarine #66CDAA
64 Lavender #E6E6FA 89 MediumBlue #0000CD
65 LavenderBlush #FFF0F5 90 MediumOrchid #BA55D3
66 LawnGreen #7CFC00 91 MediumPurple #9370DB
67 LemonChiffon #FFFACD 92 MediumSeaGreen #3CB371
68 LightBlue #ADD8E6 93 MediumSlateBlue #7B68EE
69 LightCoral #F08080 94 MediumSpringGreen #00FA9A
70 LightCyan #E0FFFF 95 MediumTurquoise #48D1CC
71 LightGoldenRodYellow #FAFAD2 96 MediumVioletRed #C71585
72 LightGray #D3D3D3 97 MidnightBlue #191970
73 LightGrey #D3D3D3 98 MintCream #F5FFFA
74 LightGreen #90EE90 99 MistyRose #FFE4E1

CIRT & CIST, CORPORATE GROUP BHOPAL 17


SN Color Name HEX Color SN Color Name HEX Color
101 NavajoWhite #FFDEAD 126 SandyBrown #F4A460
102 Navy #000080 127 SeaGreen #2E8B57
103 OldLace #FDF5E6 128 SeaShell #FFF5EE
104 Olive #808000 129 Sienna #A0522D
105 OliveDrab #6B8E23 130 Silver #C0C0C0
106 Orange #FFA500 131 SkyBlue #87CEEB
107 OrangeRed #FF4500 132 SlateBlue #6A5ACD
108 Orchid #DA70D6 133 SlateGray #708090
109 PaleGoldenRod #EEE8AA 134 SlateGrey #708090
110 PaleGreen #98FB98 135 Snow #FFFAFA
111 PaleTurquoise #AFEEEE 136 SpringGreen #00FF7F
112 PaleVioletRed #DB7093 137 SteelBlue #4682B4
113 PapayaWhip #FFEFD5 138 Tan #D2B48C
114 PeachPuff #FFDAB9 139 Teal #008080
115 Peru #CD853F 140 Thistle #D8BFD8
116 Pink #FFC0CB 141 Tomato #FF6347
117 Plum #DDA0DD 142 Turquoise #40E0D0
118 PowderBlue #B0E0E6 143 Violet #EE82EE
119 Purple #800080 144 Wheat #F5DEB3
120 RebeccaPurple #663399 145 White #FFFFFF
121 Red #FF0000 146 WhiteSmoke #F5F5F5
122 RosyBrown #BC8F8F 147 Yellow #FFFF00
123 RoyalBlue #4169E1 148 YellowGreen #9ACD32
124 SaddleBrown #8B4513 75 LightPink #FFB6C1
125 Salmon #FA8072 100 Moccasin #FFE4B5

CIRT & CIST, CORPORATE GROUP BHOPAL 18


RGB Colors

RGB color values are supported in all browsers.


An RGB color value is specified with: rgb(red, green, blue).
Each parameter (red, green, and blue) defines the intensity of the color as an
integer between 0 and 255.
For example, rgb(0, 0, 255) is rendered as blue, because the blue parameter is set
to its highest value (255) and the others are set to 0.
Example
<style>
div {
background-color: rgb(0, 191, 255);
color: rgb(255, 255, 255);
}
</style>

CIRT & CIST, CORPORATE GROUP BHOPAL 19


HSL Colors
HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera
10+.
HSL stands for hue, saturation, and lightness.
HSL color values are specified with: hsl(hue, saturation, lightness).

Hue
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240
is blue.
Saturation
Saturation is a percentage value; 0% means a shade of gray and 100% is the
full color.
Lightness
Lightness is also a percentage; 0% is black, 100% is white.

Example
<style>
div {
background-color: hsl(180, 50%, 50%);
color: hsl(0, 0%, 100%);
}
</style>

CMYK Colors

CMYK colors is a combination of CYAN, MAGENTA, YELLOW , and


BLACK.
Computer screens display colors using RGB color values. Printers often presents
colors using CMYK color values.
CMYK is not supported in HTML, but it is suggested as a new standard in CSS4.
While waiting for CSS4, you can include W3Schools' Color library, and use
CMYK as an HTML attribute like this:

CIRT & CIST, CORPORATE GROUP BHOPAL 20


HTML <font> Tag

When writing in HTML, the <font> tag was an inline element used to change
certain qualities of a block of text on a web page. It was useful for changing a
font's size, face, and color. The following sections contain information about this
tag, including an example of it in use, as well as related attributes and browser
compatibility.
The <font> tag is not supported going forward; CSS should be used instead.

example

<font size="4" color="Green">Words and things.</font>


<font size="2" color="#c1c1c3">Text that looks
different.</font>
<font face="Arial" color="Orange">I am a sentence!</font>

Example result

Words and things.

Text that looks different.

I am a sentence!

CIRT & CIST, CORPORATE GROUP BHOPAL 21


Attributes of font TAG

Within an HTML tag, an attribute dictates certain aspects of


an HTML element. Attributes are made up of a name and value pair;
all tags support standard attributes. The <font> tag is deprecated, but
at one time it utilized the unique attributes contained in the following
table.

Attribute Description

color Designates the color of text.

face Designates the look of text.

size Designates the size of text.

CIRT & CIST, CORPORATE GROUP BHOPAL 22


<!DOCTYPE html>

<html>

<head>

<title>cist</title>

</head>

<body>

<p>

<font size="2" color="#1c87c9">Blue text</font>

</p>

<p>

<font size="3" color="red">Red text, font size increased.</font>

</p>

<p>

<font face="arial" color="#8ebf42">Green text, typeface changed.</font>

</p>

</body>

</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 23


HTML - Text Links

A webpage can contain various links that take you 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 you can create hyperlinks using text or images
available on a webpage.
Note − I recommend you to go through a short tutorial on Understanding URL

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.t corporatecollege.com at your page
−
<!DOCTYPE html>
<html>

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

<body>
<p>Click following link</p>
<a href = "https://www.corporatecollege.com" target = "_self"> corporate college </a>
</body>

</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 24


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
_parent
Opens the linked document in the parent frame.

4
_top
Opens the linked document in the full body of the window.

5
targetframe
Opens the linked document in a named targetframe.

CIRT & CIST, CORPORATE GROUP BHOPAL 25


<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.ajaysir.com/">
</head>

<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body
</html>

OUTPUT WINDOW

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body

CIRT & CIST, CORPORATE GROUP BHOPAL 26


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 your items.
 <dl> − A definition list. This arranges your 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.

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
This will produce the following result −

 Beetroot
 Ginger
 Potato
 Radish

CIRT & CIST, CORPORATE GROUP BHOPAL 27


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

<!DOCTYPE html>

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

Example

 Beetroot
 Ginger
 Potato
 Radish

CIRT & CIST, CORPORATE GROUP BHOPAL 28


HTML Ordered Lists

If you are required to put your 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
<!DOCTYPE html>
<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

CIRT & CIST, CORPORATE GROUP BHOPAL 29


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

<!DOCTYPE html>
<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

CIRT & CIST, CORPORATE GROUP BHOPAL 30


HTML – Tables

The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used
to create table rows and <td> tag is used to create data cells. The elements under
<td> are regular and left aligned by default
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

This will produce the following result –


Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

CIRT & CIST, CORPORATE GROUP BHOPAL 31


Here, the border is an attribute of <table> tag and it is used to put a border across
all the cells. If you do not need a border, then you can use border = "0".

CIRT & CIST, CORPORATE GROUP BHOPAL 32


Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td>
tag, which is used to represent actual data cell. Normally you will put your top
row as table heading as shown below, otherwise you can use <th> element in any
row. Headings, which are defined in <th> tag are centered and bold by default.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Header</title>
</head>

<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 33


Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or
more rows.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Colspan/Rowspan</title>
</head>

<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 34


Tables Backgrounds
You can set table background using one of the following two ways −
 bgcolor attribute − You can set background color for whole table or just for one cell.
 background attribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use
these attributes.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 35


This will produce the following result –

CIRT & CIST, CORPORATE GROUP BHOPAL 36


Table Height and Width
You can set a table width and height using width and height attributes. You can
specify table width or height in terms of pixels or in terms of percentage of available
screen area. Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Width/Height</title>
</head>

<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 37


Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the
top of the table. This tag is deprecated in newer version of HTML/XHTML.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Caption</title>
</head>

<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>

<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>

<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>

</html>
This will produce the following result –

CIRT & CIST, CORPORATE GROUP BHOPAL 38


HTML – Forms

HTML Forms are required, when you want to collect some data from the site visitor.
For example, during user registration you would like to collect information such as
name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will perform
required processing on the passed data based on defined business logic inside the
application.
There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −

<form action = "Script URL" method = "GET|POST">


form elements like input, textarea etc.
</form>

HTML Form Controls


There are different types of form controls that you can use to collect data using HTML
form −

 Text Input Controls


 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

CIRT & CIST, CORPORATE GROUP BHOPAL 39


Text Input Controls
There are three types of text input used on forms −
 Single-line text input controls − This control is used for items that require only one line
of user input, such as search boxes or names. They are created using HTML <input> tag.
 Password input controls − This is also a single-line text input but it masks the character
as soon as a user enters it. They are also created using HTMl <input> tag.
 Multi-line text input controls − This is used when the user is required to give details that
may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.

Single-line text input controls


This control is used for items that require only one line of user input, such as search
boxes or names. They are created using HTML <input> tag.

Example
Here is a basic example of a single-line text input used to take first name and last
name −
<!DOCTYPE html>
<html>

<head>
<title>Text Input Control</title>
</head>

<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>

</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 40


Password input controls
This is also a single-line text input but it masks the character as soon as a user enters
it. They are also created using HTML <input>tag but type attribute is set to password.

Example
Here is a basic example of a single-line password input used to take user password
−
<!DOCTYPE html>
<html>

<head>
<title>Password Input Control</title>
</head>

<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>

</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 41


Multiple-Line Text Input Controls
This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.

Example
Here is a basic example of a multi-line text input used to take item description −
<!DOCTYPE html>
<html>

<head>
<title>Multiple-Line Input Control</title>
</head>

<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>

</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 42


Checkbox Control
Checkboxes are used when more than one option is required to be selected. They
are also created using HTML <input> tag but type attribute is set to checkbox..

Example
Here is an example HTML code for a form with two checkboxes −
<!DOCTYPE html>
<html>

<head>
<title>Checkbox Control</title>
</head>

<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>

</html>
This will produce the following result −

CIRT & CIST, CORPORATE GROUP BHOPAL 43


Radio Button Control
Radio buttons are used when out of many options, just one option is required to be
selected. They are also created using HTML <input> tag but type attribute is set
to radio.

Example
Here is example HTML code for a form with two radio buttons –

<!DOCTYPE html>
<html>

<head>
<title>Radio Box Control</title>
</head>

<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>

</html>

This will produce the following result –

CIRT & CIST, CORPORATE GROUP BHOPAL 44


Select Box Control
A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more
options.

Example
Here is example HTML code for a form with one drop down box

<!DOCTYPE html>
<html>

<head>
<title>Select Box Control</title>
</head>

<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>

</html>
This will produce the following result −

CIRT & CIST, CORPORATE GROUP BHOPAL 45


File Upload Box
If you want to allow a user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box. This is also created using the <input>
element but type attribute is set to file.

Example
Here is example HTML code for a form with one file upload box −

<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>

</html>
This will produce the following result −

CIRT & CIST, CORPORATE GROUP BHOPAL 46


Button Controls
There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input>tag by setting its type attribute to button. The type
attribute can take the following values –

Sr.No Type & Description

1
submit
This creates a button that automatically submits a form.

2
reset
This creates a button that automatically resets form controls to their initial values.

3
button
This creates a button that is used to trigger a client-side script when the user clicks that
button.

4
image
This creates a clickable button but we can use an image as background of the button.

CIRT & CIST, CORPORATE GROUP BHOPAL 47


Example
Here is example HTML code for a form with three types of buttons –

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>
This will produce the following result −

Regular HTML character codes

CIRT & CIST, CORPORATE GROUP BHOPAL 48


HTML Entities

Some characters are reserved in HTML.


If you use the less than (<) or greater than (>) signs in your text, the browser
might mix them with tags.
Character entities are used to display reserved characters in HTML.
A character entity looks like this:
&entity_name;
OR
&#entity_number;
Some characters are reserved in HTML and they have special meaning when used
in HTML document. For example, you cannot use the greater than and less than
signs or angle brackets within your HTML text because the browser will treat
them differently and will try to draw a meaning related to HTML tag.

HTML processors must support following five special characters listed in the
table that follows.
SYMBOL CODE NAME
&#32; space

! &#33; exclamation mark

" &#34; &quot; double quote

# &#35; number

$ &#36; dollar

% &#37; percent

& &#38; &amp; ampersand

' &#39; &apos; single quote

( &#40; left parenthesis

) &#41; right parenthesis

* &#42; asterisk

CIRT & CIST, CORPORATE GROUP BHOPAL 49


+ &#43; plus

, &#44; comma

- &#45; minus

. &#46; period

/ &#47; slash

0 &#48; zero

1 &#49; one

2 &#50; two

3 &#51; three

4 &#52; four

5 &#53; five

6 &#54; six

7 &#55; seven

8 &#56; eight

9 &#57; nine

: &#58; colon

; &#59; semicolon

< &#60; &lt; less than

= &#61; equality sign

> &#62; &gt; greater than

? &#63; question mark

@ &#64; at sign

A &#65;

B &#66;

C &#67;

D &#68;

E &#69;

F &#70;

CIRT & CIST, CORPORATE GROUP BHOPAL 50


G &#71;

H &#72;

I &#73;

J &#74;

K &#75;

L &#76;

M &#77;

N &#78;

O &#79;

P &#80;

Q &#81;

R &#82;

S &#83;

T &#84;

U &#85;

V &#86;

W &#87;

X &#88;

Y &#89;

Z &#90;

[ &#91; left square bracket

\ &#92; backslash

] &#93; right square bracket

^ &#94; caret / circumflex

_ &#95; underscore

` &#96; grave / accent

a &#97;

b &#98;

CIRT & CIST, CORPORATE GROUP BHOPAL 51


c &#99;

d &#100;

e &#101;

f &#102;

g &#103;

h &#104;

i &#105;

j &#106;

k &#107;

l &#108;

m &#109;

n &#110;

o &#111;

p &#112;

q &#113;

r &#114;

s &#115;

t &#116;

u &#117

v &#118;

w &#119;

x &#120;

y &#121;

z &#122;

{ &#123; left curly bracket

| &#125; right curly bracket

~ &#126; tilde

CIRT & CIST, CORPORATE GROUP BHOPAL 52


Example

If you want to write <div id = "character"> as a code then you will have to write as
follows –

<!DOCTYPE html>
<html>

<head>
<title>HTML Entities</title>
</head>

<body>
&lt;div id = &quot;character&quot;&gt;
</body>

</html>
This will produce the following result –

<div id = "character">

CIRT & CIST, CORPORATE GROUP BHOPAL 53


HTML – META TAGS
HTML lets you specify metadata - additional important information about a
document in a variety of ways. The META elements can be used to include
name/value pairs describing properties of the HTML document, such as author,
expiry date, a list of keywords, document author etc.
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.
You can include one or more meta tags in your document based on what
information you want to keep in your 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 you include them or not.
Adding Meta Tags to Your Documents You can add metadata to your 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:

Attribute Description

Name Name for the property. Can be anything. Examples include,


keywords, description, author, revised, generator etc.

content Specifies the property's value.

scheme Specifies a scheme to interpret the property's value (as


declared in the content attribute).

httpequiv Used for http response message headers. For example, http-
equiv can be used to refresh the page or to set a cookie.
Values include content-type, expires, refresh and set-cookie.

Example

CIRT & CIST, CORPORATE GROUP BHOPAL 54


Following is an example, where we are adding HTML, Meta Tags, Metadata as
important keywords about the document.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

This will produce the following result:

Hello HTML5!

CIRT & CIST, CORPORATE GROUP BHOPAL 55


Document Description
We 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.

Example

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 56


Setting Cookies
Cookies are data, stored in small text files on your computer and it is exchanged
between web browser and web server to keep track of various information based
on your web application need.
You can use <meta> tag to store cookies on client side and later this information
can be used by the Web Server to track a site visitor.
Example
Following is an example of redirecting current page to another page after 5
seconds. If you want to redirect page immediately then do not specify content
attribute.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Corporate college, 3/7/2014" />

CIRT & CIST, CORPORATE GROUP BHOPAL 57


HTML Frames

With frames, you can display more than one Web page in the same browser
window.
Examples
Vertical frameset This example demonstrates how to make a vertical frameset
with three different documents.
Horizontal frameset This example demonstrates how to make a horizontal
frameset with three different documents.
How to use the <noframes> tag This example demonstrates how to use the
<noframes> tag.
Frames
With frames, you can display more than one HTML document in the same
browser window. Each HTML document is called a frame, and each frame is
independent of the others.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page

The Frameset Tag


The <frameset> tag defines how to divide the window into frames
Each frameset defines a set of rows or columns
The values of the rows/columns indicate the amount of screen area each
row/column will occupy

CIRT & CIST, CORPORATE GROUP BHOPAL 58


The Frame Tag
The <frame> tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column is
set to 25% of the width of the browser window. The second column is set to 75%
of the width of the browser window. The HTML document "frame_a.htm" is put
into the first column, and the HTML document "frame_b.htm" is put into the
second column:

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>

Frame Tags
Tag Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
<noframes> Defines a no frame section for browsers that do
not handle frames
<iframe> Defines an inline sub window (frame)

CIRT & CIST, CORPORATE GROUP BHOPAL 59


Web Browser
Web Browser is an application software that allows us to view and explore
information on the web. User can request for any web page by just entering a
URL into address bar.

Web browser can show text, audio, video, animation and more. It is the
responsibility of a web browser to interpret text and commands contained in the
web page.

Earlier the web browsers were text-based while now a days graphical-based or
voice-based web browsers are also available. Following are the most common
web browser available today:
Browser Vendor

Internet Explorer Microsoft

Google Chrome Google

Mozilla Firefox Mozilla

Netscape Navigator Netscape Communications Corp.

Opera Opera Software

Safari Apple

CIRT & CIST, CORPORATE GROUP BHOPAL 60


Architecture
There are a lot of web browser available in the market. All of them interpret and
display information on the screen however their capabilities and structure varies
depending upon implementation. But the most basic component that all web browser
must exhibit are listed below:
 Controller/Dispatcher
 Interpreter
 Client Programs

Controller works as a control unit in CPU. It takes input from the keyboard or mouse,
interpret it and make other services to work on the basis of input it receives.
Interpreter receives the information from the controller and execute the instruction
line by line. Some interpreter are mandatory while some are optional For example,
HTML interpreter program is mandatory and java interpreter is optional.
Client Program describes the specific protocol that will be used to access a particular
service. Following are the client programs tat are commonly used:
 HTTP
 SMTP
 FTP
 NNTP
 POP

CIRT & CIST, CORPORATE GROUP BHOPAL 61


Starting Internet Explorer
Internet explorer is a web browser developed by Microsoft. It is installed by default
with the windows operating system however, it can be downloaded and be upgraded.
To start internet explorer, follow the following steps:
 Go to Start button and click Internet Explorer.

CIRT & CIST, CORPORATE GROUP BHOPAL 62


Navigation
A web page may contain hyperlinks. When we click on these links other web page
is opened. These hyperlinks can be in form of text or image. When we take the mouse
over a hyperlink, pointer change its shape to hand.
Key Points
 In case, you have accessed many web pages and willing to see the previous webpage
then just click back button.
 You can open a new web page in the same tab, or different tab or in a new window.

Saving Webpage
You can save web page to use in future. In order to save a webpage, follow the steps
given below:
 Click File > Save As. Save Webpage dialog box appears.
 Choose the location where you want to save your webpage from save in: list box. Then
choose the folder where you want to save the webpage.
 Specify the file name in the File name box.
 Select the type from Save as type list box.
o Webpage, complete
o Web Archive
o Webpage HTML only
o Text File
 From the encoding list box, choose the character set which will be used with your
webpage. By default, Western European is selected.
 Click save button and the webpage is saved.

Saving Web Elements


Web elements are the pictures, links etc. In order to save these elements follow the
steps given below:
 Right click on the webpage element you want to save. Menu options will appear. These
options may vary depending on the element you want to save.

CIRT & CIST, CORPORATE GROUP BHOPAL 63


Favourites
The Favourites option helps to save addresses of the webpages you visited often.
Hence you need not to remember long and complex address of websites you visit
often.
In order to open any webpage, you just need to double click on the webpage that you
have marked from bookmarks list.

Adding a web page to your Favourites


In ordered to add website to your favourite list, follow the steps given below:
 Open webpage that you want to add to your favourite.
 Click on favourite menu and then click on Add to Favourites option. Add favourites
dialog box appears.
You can also click Favourites button available in the toolbar. Favourite’s panel will open in the
left corner of the internet explorer window. Click add button, Add Favourites dialog box will
appear.

 In Add Favourites dialog box, the Name: text box will contains the name of the web page
that you want to add to favourites.
 Click the Create in button, Favourites folder will appear. Move to the folder where you
want to store the favourites by clicking on the folder name.
 Now click OK button to save the favourites.

CIRT & CIST, CORPORATE GROUP BHOPAL 64


HTML5
HTML5 is the next major revision of the HTML standard superseding HTML
4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
presenting content on the World Wide Web.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and
the Web Hypertext Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as
Adobe Flash, Microsoft Silverlight, and Google Gears.

Browser Support
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and Android
phones all have excellent support for HTML5.

New Features of HTML5


HTML5 introduces a number of new elements and attributes that can help you in
building modern websites. Here is a set of some of the most prominent features
introduced in HTML5.
New Semantic Elements: These are like <nav> <header>, <footer>, and
<section>.
Forms 2.0: Improvements to HTML web forms where new attributes have been
introduced for <input> tag.
Persistent Local Storage: To achieve without resorting to third-party plugins.
WebSocket: A next-generation bidirectional communication technology for web
applications.
Server-Sent Events: HTML5 introduces events which flow from web server to
the web browsers and they are called Server-Sent Events (SSE).
Canvas: This supports a two-dimensional drawing surface that you can program
with JavaScript.
Audio & Video: You can embed audio or video on your webpages without
resorting to third-party plugins.
Geolocation: Now visitors can choose to share their physical location with your

CIRT & CIST, CORPORATE GROUP BHOPAL 65


web application.
Microdata: This lets you create your own vocabularies beyond HTML5 and
extend your web pages with custom semantics.
Drag and drop: Drag and drop the items from one location to another location
on the same webpage.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav> Navigation put here </nav>
<article>
<section>
DATA OF THE PAGE OR MAY CONTENDS PUT HERE
</section>
</article>
<aside> SIDE BAR OR Adv Items </aside>
<footer>here put your Footer Items</footer>
</body>
</html>

CIRT & CIST, CORPORATE GROUP BHOPAL 66

You might also like