MODULE II – HYPERTEXT MARKUP LANGUAGE
HTML DOCUMENT STRUCTURE
<html> <head> Heading goes here…</head>
<title> Title goes here…</title>
<body> Body goes here…</body></html>
HTML
Introduction
HTML stands for Hyper Text Markup Language. It is a formatting language used to define
the appearance and contents of a web page. It allows us to organize text, graphics, audio, and
video on a web page.
Key Points:
• The word Hypertext refers to the text which acts as a link.
• The word markup refers to the symbols that are used to define structure of the text. The
markup symbols tells the browser how to display the text and are often called tags.
• The word Language refers to the syntax that is similar to any other language.
HTML was created by Tim Berners-Lee at CERN.
HTML Versions
The following table shows the various versions of HTML:
Version Year
HTML 1.0 1991
TML 2.0 1995
HTML 3.2 1997
HTML 4.0 1999
XHTML 2000
HTML5 2012
HTML Tags
Tag is a command that tells the web browser how to display the text, audio, graphics or video on
a web page.
Key Points:
• Tags are indicated with pair of angle brackets.
• They start with a less than (<) character and end with a greater than (>) character.
• The tag name is specified between the angle brackets.
• Most of the tags usually occur in pair: the start tag and the closing tag.
• The start tag is simply the tag name is enclosed in angle bracket whereas the closing tag
is specified including a forward slash (/).
• Some tags are the empty i.e. they don’t have the closing tag.
• Tags are not case sensitive.
• The starting and closing tag name must be the same. For example <b> hello </i> is
invalid as both are different.
• If you don’t specify the angle brackets (<>) for a tag, the browser will treat the tag name
as a simple text.
• The tag can also have attributes to provide additional information about the tag to the
browser.
Basic tags
The following table shows the Basic HTML tags that define the basic web page:
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags:
Eg:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Output:
This is a heading
This is a heading
This is a heading
HTML Links
HTML links are defined with the <a> tag:
Eg:
<body>
<a href="[Link] is a link</a>
</body>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as
attributes:
Eg:
<body>
<img src="[Link]" alt="[Link]" width="104" height="142">
</body>
HTML Styling
Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to light grey:
Eg:
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Text Color
The color property defines the text color to be used for an HTML element:
Eg:
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>
HTML Text Size
The font-size property defines the text size to be used for an HTML element:
Eg:
<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
</body>
HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element:
Eg:
<body>
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
</body>
Formatting Tags
The following table shows the HTML tags used for formatting the text:
Tag Description
<b> </b> Specifies the text as bold. Eg. this is bold text
<em> </em> It is a phrase text. It specifies the emphasized text. Eg. Emphasized text
<strong> </strong> It is a phrase tag. It specifies an important text. Eg. this is strong text
<i> </i> The content of italic tag is displayed in italic. Eg. Italic text
<sub> </sub> Specifies the subscripted text. Eg. X1
<sup> </sup> Defines the superscripted text. Eg. X2
<ins> </ins> Specifies the inserted text. Eg. The price of pen is now 2015.
<del> </del> Specifies the deleted text. Eg. The price of pen is now 2015.
<mark> </mark> Specifies the marked text. Eg. It is raining
EXAMPLE:
<html>
<body>
1.<b>Hai </b><br>
2.<em>students </em><br>
3.<strong>good morning </strong><br>
4.<i>how</i><br>
5. hi<sub>Fine </sub><br>
[Link]<sup>about </sup><br>
[Link]<ins>how</ins>are you?<br>
[Link]<del>how </del>are you?<br>
9.<mark>testing </mark><br>
10.<i>hai</i>
</body>
</html>
Output:
[Link]
[Link]
[Link] morning
[Link]
[Link]
[Link]
[Link] you?
[Link] are you?
[Link]
[Link]
Table Tags
Following table describe the commonaly used table tags:
Tag Description
<table> </table> Specifies a table.
<tr> </tr> Specifies a row in the table.
<th> </th> Specifies header cell in the table.
<td> </td> Specifies the data in an cell of the table.
<caption> </caption> Specifies the table caption.
<colgroup> </colgroup> Specifies a group of columns in a table for formatting.
Example:
<html>
<body>
<table border="1">
<tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr>
<tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
</table>
</body>
</html>
Output:
Jill Smith 50
Eve Jackson 94
List tags
List is define as arrangement of items in certain way.
[Link] lists
[Link] lists
[Link] Lists
Following table describe the commonaly used list tags:
Tag Description
<ul> </ul> Specifies an unordered list.
<ol> </ol> Specifies an ordered list.
<li> </li> Specifies a list item.
<dl> </dl> Specifies a description list.
<dt> </dt> Specifies the term in a description list.
<dd> </dd> Specifies description of term in a description list.
[Link] lists
Eg:
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
• Coffee
• Tea
• Milk
A style attribute can be added to an unordered list, to define the style of the marker:
Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked
EG:
<html>
<body>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
▪ Coffee
▪ Tea
▪ Milk
[Link] lists
<html>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:
1. Coffee
2. Tea
3. Milk
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
<html>
<body>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:
A. Coffee
B. Tea
C. Milk
3. Description Lists
HTML also supports description lists.A description list is a list of terms, with a
description of each [Link] <dl> tag defines the description list, the <dt> tag defines
the term (name), and the <dd> tag describes each term:
Eg:
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Output:
Coffee
- black hot drink
Milk
- white cold drink
FRAMES
Frames help us to divide the browser’s window into multiple rectangular regions. Each region
contains separate html web page and each of them work independently.
Frameset
A set of frames in the entire browser is known as frameset. It tells the browser how to divide
browser window into frames and the web pages that each has to load.
The following table describes the various tags used for creating frames:
Tag Description
It is replacement of the <body> tag. It doesn’t contain the tags that are
<frameset>
normally used in <body> element; instead it contains the <frame> element
</frameset>
used to add each frame.
<frame>
Specifies the content of different frames in a web page.
</frame>
It is used to set the default target frame in any page that contains links whose
<base> </base>
contents are displayed in another frame.
EG:web page creation for xyz college using frames
PROGRAM:
[Link]
<html>
<head> <title>Home</title> </head>
<frameset rows="20%,*">
</frameset>
<frame src="[Link]">
<frameset cols="75%,*">
<frame src="[Link]" name="f2">
<frame src="[Link]" name="f3">
</frameset>
</html>
[Link]
<html>
<head><title>frame1</title> </head>
<body bgcolor="black">
<h1 "font-size:25pt">
<marquee bgcolor="grey" loop="100" scrollamount="6" width="100%">
BSA CRESCENT INSTITUTE OF SCIENCE AND TECHNOLOGY </marquee>
</h1>
</body>
</html>
[Link]
<html>
<head><title>frame2</title>
<style type="text/css">
h1
{
font-size:25pt;color:black;
}
</style>
</head>
<body bgcolor="black">
<h1>click the link</h1>
<a href="[Link]" target=f3>Introduction</a><br>
<a href="[Link]" target=f3>Departments</a><br>
<a href="[Link]" target=f3>Address</a><br>
<a href="[Link]" target=f3>Feedback</a><br>
<a href="[Link]" target=f3>Gallery</a><br>
</body>
</html>
[Link]
<html>
<head><title>1st page</title>
<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\Administrator\
Desktop\ab\[Link]"/>
</head>
<body bgcolor="tan">
<h2> <center>YOU ARE IN HOME PAGE</center></h2>
</body>
</html>
[Link]
<html>
<head><title>intro</title>
</head>
<body bgcolor="black">
<font color=red>
<p>
Welcome to BSA CRESCENT INSTITUTE OF SCIENCE AND
TECHNOLOGY<br>
<br>
“B.S. Abdur Rahman Crescent Institute of Science and Technology, formerly B. S. Abdur
Rahman Crescent University, is a deemed to be university located in Tamil Nadu, India.<br>
Previously, functioning under Madras University (1984–2001) and Anna University (2001–09)
as Crescent Engineering College, <br> the institute gained deemed status in 2008–09. It is
located in Vandalur near Tambaram, a suburban area of Chennai, India.”
</p>
</font>
</body>
</html>
[Link]
<html>
<head><title>Departments</title>
</head>
<body>
<div align="center">
<table border=2>
<tr>
<th>Dept code</th>
<th>Dept name</th>
</tr>
<tr>
<td>01</td> <td>CSE</td>
</tr>
<tr>
<td>02</td> <td>ECE</td>
</tr>
<tr>
<td>03</td> <td>EEE</td>
</tr>
<tr>
<td>04</td> <td>IT</td>
</tr>
<tr>
<td>05</td> <td>MECH</td>
</tr>
<tr>
<td>06</td> <td>AERO</td>
</tr>
</table>
</div>
</body>
</html>
[Link]
<html>
<head><title>ADDRESS</title>
</head>
<body bgcolor="black">
<p>
<font color=red>
[Link] Rahman Crescent Institute of Science & Technology<br>
GST Road, Vandalur, Chennai 600 048. Tamilnadu. INDIA<br>
E-Mail: admissions@[Link]<br>
Admission Help-Desk: +91 95432 77888<br>
</font>
</p>
</body>
</html>
[Link]
<html>
<head><title>feed</title>
</head>
<body bgcolor="yellow">
<p>
<font color=black>
To give your feedback mail to google_feedback@[Link]
</font>
</p>
</body>
</html>
[Link]
<html>
<head><title>gall</title>
</head>
<body bgcolor="red">
<p>
<font color=darkblue> University logo</font>
</p>
<img src="[Link]" height="100" width="100"/>
</body>
</html>
OUTPUT
HTML FORMS
HTML Forms
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and
more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
.....
input elements
....</form>
HTML Forms - The Input Element
The most important form element is the input element. The input element is used to select user
information. An input element can vary in many ways, depending on the type attribute. An input
element can be of type text field, checkbox, password, radio button, submit button, and more.
The most used input types are described below.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
How the HTML code above looks in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
Password Field
<input type="password" /> defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>
How the HTML code above looks in a browser:
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a
limited number of choices:
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
How the HTML code above looks in a browser:
Male
Female
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE
options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
How the HTML code above looks in a browser:
I have a bike
I have a car
Submit Button
<input type="submit" /> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
How the HTML code above looks in a browser:
Username:
HTML Form Tags
Tag Description
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button
Forms
<form action="[Link] method="post/get">
a)Text:
<input type="text" name="email" size="40" maxlength="50" />
b)Password:
<input type="password" />
c)Checkbox
<input type="checkbox" checked="checked" />
d)radio
<input type="radio" checked="checked" />
e)submit
<input type="submit" value="Send" />
f)reset
<input type="reset" />
g)hidden
<input type="hidden" />
h)select
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
i)Textarea
<textarea name="comment" rows="60" cols="20"></textarea>
