Unit-1:

Introduction to HTML: Structure of HTML Program- Text Formatting Tags – List – Image –
Table – Colors – Links – Internal and External document Interface – Frames – Frame set-
Hyper Link.

1. Introduction to HTML
Software information is very dynamic and it keeps changing and re-changing all the time. To
resolve this, information needs to be stored in such a manner that whenever the information
changes, these changes can be incorporated with the least cost and time. It can be stored in the
form of computer based files at a central location. Once the file is stored, it can be referenced
when required. The files on the central location can be accessed via networks which connects
two or more computers.

1.1 Client Server Terminologies:

Client: A computer requesting for information is termed as client.

Server: The Computer serving information from a central location is termed as the Server.
Web pages: The information which internet carries from a server to a client that requests them
is called Web pages.
Web developer: The individual who develops web pages are called a web developer.

Web Server: The Server computer which runs special software is called a Web Server. It allows

o Web Site Management

o Accept a Client’s request for information.
o Respond to a client’s request by providing the page with required information.

Example for Web Server: Internet Information Server (IIS), Apache Web Server, Netscape
Server, Microsoft Personal Web Server.

Web Client: Computers that offer the facility to read information stored in web pages are called
Web Clients.

Web Browser: Web Clients run special software called a Web browser. It allows

o Connect to an appropriate Server.

o Query the Server for information.
o Provide the interface to read the information returned by the Server.

Example for Web Browser: Netscape Navigator, Internet Explorer, Google Chrome.
1.2 Browser Communication with a Web Server
A Web Server is responsible for sending web pages to a Web Browser on a client. When a
browser communicates with a web server. When a Browser communicates with a Web Server,
it results into a four step HTTP transaction.

1. Connect

2. Request

3. Reply

4. Close

1.2.1 Establish Connection:

TCP/IP is used to computers establish a link between a Web Server and a Web browser over the
internet.

To communicate with the web Server, the client machine must be given the IP address of the
Server along with the sub protocol that must be used .i.e. HTTP, FTP etc.

The Client browser will attempt to locate the server based on the IP address supplied and
establish a connection.

Each of the protocols (like HTTP, FTP) can be accessed by specifying protocol name and a
specifying “port number”. Example: 80 for HTTP and 21 for FTP.

If the protocols are configured on default port numbers, the connection to a Web Server can be
established by:

Protocol://IP address

Example: http://131.100.2.107

1.2.2 Client issues a request and Server sends a response:

Each Web Server controls a web site. From amongst the collection of several web pages, one
page is treated as a “Default Web Document”.

When a web browser connects to a Web Server using an appropriate protocol name, IP address
and port number, and the Web Server treats this connection to be a request for the “Default
Web Document”.
A Web page apart from text and HTML tags, can also include references to objects like GIF’s,
JPEG ‘s , Audio files and video files and so on.

The Web server try to locate the web page requested, and if the page exists, the server
responds by providing the page to the browser. If the Web page is not found, an appropriate
Error message is sent as a response to the browser request.

After receiving the Web page, the Browser will identify the external objects that are specified in
the web page if any and request the Server to deliver the external objects.

1.2.3 Server terminates the Connection:

It is the Server’s responsibility to terminate the TCP/IP connection with the Browser after it
responds to the Browser’s request.

1.3 Hyper Text Markup Language (HTML)

The language used to develop web pages is called Hypertext Markup Language (HTML).HTML is
the language interpreted by a browser. Web pages are called HTML documents. HTML is
specified as Tags in an HTML document.

1.3.1 HTML tags

Tags are instructions that are embedded directly into the text of the document. It signals
browser to do something other than just throw text up on the screen. By Convention all HTML
tags begin with an open angle bracket (<) and end with a close angle bracket (>).

Types of HTML tags:

HTML tags can be of two types.

Paired Tags
A tag is said to be a paired tag if it comes along with a companion tag, flanks the text. The effect
of the paired tag is applied only to the text they contain. The first tag is often called as the
opening tag which activates the effect and the second tag is called as the closing tag which
turns the effect off.

Example: The <B> tag with its companion tag </B> causes the text contained between to be
rendered in bold.

Singular tag
The second type of tag is the singular or stand alone tag. A stand alone tag does not have a
companion tag.

Example: <BR> tag will insert a line break. This tag does not have a companion tag.
1.3.2 The Structure of an HTML Program

Every HTML program has a rigid structure. The entire web page is enclosed within <HTML>
</HTML> tags. Within these tags, two distinct sections are created using the <HEAD> </HEAD>
tags and the <BODY> </BODY> tags.

Document Head
Information placed in this section is essential to the inner workings of the document and has
nothing to do with the content of the document.

With the exception of information contained within the<TITLE> </ TITLE> tags, all information
placed within the <HEAD> </HEAD> tags is not displayed in the browser.

The syntax of <HEAD> tag is of the form:

<HEAD>
. <TITLE> </TITLE>
.
</HEAD>

Document Body
The syntax of <BODY> tag is of the form:
<BODY>
.
.
</BODY>

Attributes of <BODY> tag:

Page defaults like background color, text color, font size, font weight and so on can be specified
as attributes of the <BODY> tag.

The attributes that <BODY> tag takes are BGCOLOR, BACKGROUND and TEXT>

BGCOLOR: Changes the default background color to the specified color.

BACKGROUND: Specifies the name of the gif file used as background.
TEXT: Changes the default text color to the specified color.

Example: < BODY BACKGROUND=“star.gif” TEXT= red>

TITLES AND FOOTERS

TITLE
The <TITLE> tag defines the title of the document and it is displayed in the title bar of the web
page.

The Syntax of <TITLE> tag is of the form:

<TITLE>SOME TEXT </TITLE>

Example: <TITLE>THE NEW COLLEGE </TITLE>

FOOTER
Copyright information, contact details of the creator and so on are the type of information kept
at the foot of the web page. The <ADDRESS> tag is used for placing this information in the web
page.
The Syntax of <ADDRESS> tag is of the form:
<ADDRESS>SOME TEXT </ADDRESS>
Example: <ADDRESS>THIS IS THE FOOTER </ADDRESS>

1.3.3 Text Formatting Tags

Paragraph Breaks
The <P> tag moves onto a new line, skipping one line between the previous line and the new
line.

Example
A tag is said to be a paired tag if it comes along with a companion tag, flanks the text. The effect
of the paired tag is applied only to the text they contain. <p> The first tag is often called as the
opening tag which activates the effect and the second tag is called as the closing tag which
turns the effect off.

Output
A tag is said to be a paired tag if it comes along with a companion tag, flanks the text. The effect
of the paired tag is applied only to the text they contain.

In paired tag, the first tag is often called as the opening tag which activates the effect and the
second tag is called as the closing tag which turns the effect off.

Line Breaks
When text needs to start from a new line and not continue on the same line(without skipping a
new line), the <BR> tag is used. This tag simply jumps to the start of the next line.

Example
Department of Computer Science, <BR>The New College, <BR> Royapettah, <BR> Chennai-14.
Output:
Department of Computer Science,
The New College,
Royapettah,
Chennai-14.

Emphasizing Material in a Web Page

HTML provides certain HEADING STYLES and HORIZONTAL RULES, which helps break text into
logical sections with visual appeal.

Heading Styles
HTML supports six different levels of headings. The highest level header format is <H1> and the
lowest level is <H6>. All the styles appear in BOLDFACE and the size of the heading depends on
the level chosen, i.e. <H1> to <H6>.

Example:
<H3> The New College<H3>

Output: The New College

Drawing Lines
The tag <HR> draws lines and horizontal rules. This tag draws a horizontal line across the whole
page, wherever specified.

The attributes to the <HR> tag are

(i) ALIGN: Aligns the line on the browser screen, which is by default, aligned to the center of the
screen.
ALIGN= LEFT will align the line to the left of the screen.
ALIGN= RIGHT will align the line to the right of the screen.
ALIGN=CENTER will align the line to the center of the screen.

(ii) SIZE: Changes the size of the rule.

(iii) WIDTH: Sets the width of the rule.

Example:
Welcome to the New College
<HR ALIGN=LEFT WIDTH=10 SIZE=4>
Output:
Welcome to the New College

TEXT STYLES

(i) Bold: Displays text in BOLDFACE style. The tags used are <B>……</B>
Example: <B>The New College</B>
Output: The New College

(ii) Italics: Displays text in ITALICS style. The tags used are <I>……</I>

Example: <I>The New College</I>

Output: The New College

(iii) Underline: Displays text Underlined. The tags used are <U>……</U>

Example: <U>The New College</U>

Output: The New College

TEXT EFFECTS
(i) Centering: <CENTER>……..</CENTER> tags are used to center everything found between
them- text, Lists, images, rules, tables or any other page element.

<CENTER>The New College</CENTER>

Output: The New College

Spacing: The tag used for inserting blank spaces in an html document is <SPACER>.This tag is
understood only by browser Netscape.

Its attributes are type and size.

(i) TYPE: To specify whether space has to be left horizontally or vertically.

TYPE=“HORIZONTAL” indicates that horizontal space has to be left.

TYPE=“VERTICAL” indicates that vertical space has to be left.

(ii) Size: Indicates the amount of space has to be left.

Example: The New College

<SPACER TYPE="HORIZONTAL” SIZE=90> Welcome to all

Output:
The New College
Welcome to all

Controlling Font Size and Color

All text specified within the tags <FONT> and</FONT> will appear in the font, size and color as
specified as attributes of the tag <FONT>.
Its attributes are:

(i) FACE: Sets the font to the specified font name.

(ii) SIZE: sets the size of the text. It can be 0 to 7.Default is 3.
(iii) COLOR: Sets the Color of the text.

Example:
<FONT FACE=“Comic Sans MS” SIZE=6 COLOR=RED>
The New College
</FONT>

Output: The New College

List
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements.

Types of Lists
There are three different types of HTML lists:

1. Unordered List or Numbered List (ul)

2. Ordered List or Bulleted List (ol)
3. Description List or Definition List (dl)

Unordered Lists (Bullets)

An unordered list starts with tag <UL> and ends with </UL> tag. Each List item starts with <LI>.

The attributes that can be specified with <LI> are

TYPE: Specifies the type of the bullet.

TYPE=FILLROUND will give a solid round black bullet.
TYPE=SQUARE will give a solid square black bullet.

Example: Some of these products include

<UL TYPE=FILLROUND>
<LI>Floppies
<LI>Hard Disks
<LI> Monitors
</UL>
Output:
Some of these products include
 Floppies
 Hard Disks
 Monitors

Ordered Lists (Numbering)

An ordered list starts with tag <OL> and ends with </OL> tag. Each List item starts with <LI>.

The attributes that can be specified with <LI> are

(i) TYPE: Controls the numbering scheme to be used.

TYPE= “I” will give counting numbers (1, 2 …)
TYPE= “A” will give counting Uppercase letters (A, B …)
TYPE= “a” will give counting Uppercase letters (a, b …)
TYPE= “I” will give counting Uppercase Roman letters (I, II …)
TYPE= “i” will give counting Uppercase Roman letters (i, ii …)

(ii) START: Alters the numbering sequence. Can be set to any numeric value.

(iii) VALUE: Changes the numbering sequence in the middle of an ordered list. It is to be
specified with the <LI> tag.

Example: Some of these products include

<OL TYPE=“1” START=3>
<LI>Floppies
<LI>Hard Disks
<LI> Monitors
</OL>
Output:
Some of these products include

3. Floppies
4. Hard Disks
5. Monitors

Definition Lists
Definition list values appear within tags <DL> and </DL>. Definition lists consists of two parts.

Definition term: appears after the tag <DT>

Definition description: appears after the tag <DD>

Example:
<DL>
<DT> Keyboard
 <DD> An input device
<DT> Printer
<DD> An output device
</DL>
Output:
Keyboard
An input device
Printer
An output device

IMAGE
HTML allows placing of static and/or animated pages in an HTML page.HTML accepts two
pictures file formats .gif and .jpg.

Images can be inserted into a webpage using the <img> which takes the name of the image file
(filename.gif, filename.jpg, filename.jpeg). HTML also allows control of the height, width,
border and so on, of every image placed on the web page.
The <img> tag takes the following attributes.

(i) ALIGN: Controls alignment of the text following the image. It can be top, middle or bottom. It
indicates the text after the image to be written at top, middle or bottom. It also controls the
alignment of the image with respect to the screen. It can be left, center or right.
(ii) BORDER: Specifies the size of the border to place around the image.
(iii) WIDTH: Specifies the width of the image in pixels.
(iv) HEIGHT: Specifies the height of the image in pixels.
(v) HSPACE: Indicates the amount of space to the left and right of the image.
(vi) VSPACE: Indicates the amount of space to the top and bottom of the image.
(vii) ALT: Indicates the text to be displayed in case the browser is unable to display the image
specified in the SRC attribute.

Example:
<h2>Beautiful Flower</h2>
<img src="image1.jpg" alt="Beautiful Flower" border=1 HSPACE=200 ALIGN=CENTER
WIDTH=200 HEIGHT=200 >

Output:
Beautiful Flower

Tables
A table is a two dimensional matrix, consisting of rows and columns. Tables are intended for
displaying data in columns on a web page. All table related tags are included between the
<TABLE> </TABLE> tags. Each row of a table is described between the <TR> </TR> tags. Each
column of a table is described between the <TD> </TD> tags.

Table rows can be of two types:

(i) Header rows: A row that spans across columns of a table. It is defined using <TH> </TH>
tags. The content of a header row is automatically centered and appears in boldface.
(ii) Data rows: Individual data cells placed in the horizontal plane creates a data row. There
could be a single data cell or multiple data cells.
The attributes of the <TABLE> tag are:

(i) ALIGN: Horizontal alignment is controlled by the ALIGN attribute. It can be set to LEFT,
CENTER, or RIGHT.
(ii) VALIGN: Controls the vertical alignment of cell contents. It accepts the values TOP, MIDDLE
or BOTTOM.
(iii) WIDTH: Sets the WIDTH to a specific number of pixels.
(iv) BORDER: Controls the border to be placed around the table.
(v) CELLPADDING: Controls the distance between the data in a cell and the boundaries of the
cell.
(vi) CELLSPACING: Controls the space between adjacent cells.
(vii) COLSPAN: This attribute inside a <TH> or <TD> tag instructs the browser to make the cell
defined by the tag to take up more than one column.
(viii) ROWSPAN: Same as COLUMN except it take up more than one row.

The Caption Tag: Table Headings are called Captions. Captions can be provided into a table
using the <CAPTION> </CAPTION> TAGS. It contains an attribute called ALIGN which controls
the placing of caption either by TOP or BOTTOM.

Example 1: Table using CELLPADDING and CELLSPACING Attributes

<HTML>
<HEAD> <TITLE> TABLE ATTRIBUTE </TITLE> </HEAD>
<BODY BGCOLOR= LIGHTGREY>
<B> TABLE ATTIBUTES</B><BR><BR><BR><BR>
<CENTER>
<TABLE BORDER=5 WIDTH=50% CELLSPACING=10 CELLPADDING=10>
<CAPTION ALIGN=BOTTOM>
<B> SUBJECT CODES </B>
</CAPTION>
<TR> <TH> SUBJECT CODE </TH>
<TH> SUBJECT TITLE </TH>
</TR>
<TR> <TD> 20BJM505 </TD
<TD> WEB PROGRAMMING USING PHP AND MYSQL</TD>
</TR>
<TR> <TD> 20BJMP505 </TD
<TD> WEB PROGRAMMING USING PHP AND MYSQL - LAB</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
OUTPUT:

TABLE ATTIBUTES

SUBJECT CODE SUBJECT TITLE

20BJM505 WEB PROGRAMMING USING PHP AND MYSQL

20BJMP505 WEB PROGRAMMING USING PHP AND MYSQL - LAB

SUBJECT CODES

Example 2: Table using COLSPAN and ROWSPAN Attributes

<HTML>
<HEAD>
<TITLE> TABLE ATTRIBUTE </TITLE>
</HEAD>
<BODY BGCOLOR= LIGHTGREY>
<B> TABLE ATTIBUTES</B>
<BR><BR><BR><BR>
<CENTER>
<TABLE BORDER=5 WIDTH=50% >
<CAPTION ALIGN=BOTTOM>
<B> SUBJECT CODES </B>
</CAPTION>
<TR> <TH ROWSPAN=2> REGNO
<TH COLSPAN=2> PHP MARKS
</TR>
<TR> <TH> PHP THEORY
<TH> PHP LAB
</TR>
<TR> <TD> 8001
<TD> 70
<TD> 90
</TR>
<TR> <TD> 8002
<TD> 80
<TD> 100
 </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

OUTPUT:
TABLE ATTIBUTES

PHP MARKS
REGNO
PHP THEORY PHP LAB
8001 70 90
8002 80 100
SUBJECT CODES

Links:
HTML allows linking to other HTML documents as well as images. Clicking on a section of text or
an image in one web page will open an entire web page or an image. The text or an image that
provides such linkages is called Hypertext, a Hyperlink or a Hotspot.

The browser distinguishes Hyperlink from normal text. Every hyperlink appears blue in color,
and underlined.

To change link colors, there are 3 attributes that can be specified along with <BODY> tag. They
are

(i) LINK: Changes the default color to a specified color. It can be a color name or a hexadecimal
number.

(ii) ALINK: Changes the default color of a Hyperlink that is activated to a specified color. It can
be a color name or a hexadecimal number.
(ii) VLINK: Changes the default color of a Hyperlink that is already visited to a specified color. It
can be a color name or a hexadecimal number.

Links are created in a web page by using the <A> </A> tags. Anything written between the <A>
</A> tags becomes a hyperlink/ hotspot.

The HREF attribute

The document to be navigated to needs to be specified. By using the HREF attribute of the <A>
tag the next navigable webpage or an image can be specified.

Syntax:
<A HREF=“filename.html”>
Types of Hyperlinks
Hyperlinks can be of two types.

(i) Links to an external document i.e. external document reference

(ii) Links to a specific place within the same document. i.e. internal document reference

External Document References

A hyperlink takes a user to the beginning of a new webpage. At times, it might be necessary to
jump to a particular location within the new webpage. To enable a jump to a specific location
on a web page named anchors can be set up. Anchors target hyperlinks to a specific point on a
web page.

Jumping to a particular location on a web page can be summarized in two steps.

Step 1: Name the location to be jumped using the NAME attribute of the <A> tag.

Syntax: <A NAME=“location name”>

Example: <A NAME=“point1”>

Step 2: The web page to jump requires a filename.htm along with the name of the location.

Syntax: <A HREF=“filename.html #location name”>………. </A>

Example: <a href=“https://www.google.com“> Click here </a>

Example Program:
<html>
<head>
<title> External Linking </title>
</head>
<body>
This is the home page. To go to the google page, please
<a href=“https://www.google.com“> click here</a>
</body>
</html>

Internal Document References

Sometimes, a jump is required to a different location in the same document. Since the jump has
to be targeted to a specific location, two steps are needed to perform.

Step 1: Identify a location with a name using the NAME attribute of the <A> tag.
Syntax: <A NAME=“location name”>
Example: <A NAME=“point1”>

Step 2: Jump to that location using the name.

Syntax: <A HREF=“#location name”>………. </A>

Here, filename.html is not needed as the location is in the same document.

Example Program:
<! DOCTYPE html>
<html>
<head>
<title> Internal link example </title>
</head>
<body>
<p>Welcome to my web-page. This is an example of internal link creation in html
web-page.</p><br>
<a name= “HTML Introduction”> Introduction to Html </a>
<p> Html is hyper text mark-up language.</p><br><br>
<a name= “CSS Introduction”> Introduction to CSS </a>
<p> Cascading Style Sheet is used for styling the web pages</p><br><br>
<a href= “#HTML Introduction”> html</a><br>
<a href= “#CSS Introduction”> css</a>
</body>
</html>

IMAGES AS HYPERLINKS
An image can act as hyperlinks just like text. An image can be made a hyperlink by enclosing an
<img> tag within the <A> </A> tags. The <img> tag places the image on the screen because it is
enclosed within the <A> </A> tags, it becomes a hyperlink.

Syntax:
<a href="https://filename.html/">
<img src="imagefile" alt="Alt name">
</a>

Example Program:
<html>
<body>
<h2>Image as a Link</h2>
<p>The image is a link to The New College.</p>
<a href="https://thenewcollege.edu.in/">
<img src="smiley.gif" alt="The New College">
</a>
</body>
</html>

Frames
The HTML frame is a powerful feature that enables a web page to be broken into different
unique sections that, although related, operate independently of each other.

The <FRAMESET> Tag

The splitting of a browser screen into frames is accomplished with the <FRAMESET> and
</FRAMESET> tags embedded into the HTML document.
The attributes of <FRAMESET> tags are

(i) ROWS: This attribute is used to divide the screen into multiple rows. The values can be
number of pixels or percentage. The remaining space is indicated by *.
(ii) COLS: This attribute is used to divide the screen into multiple columns. The values can be
number of pixels or percentage. The remaining space is indicated by *.

The <FRAME> tag:

Once the browser screen is divided into rows and columns, each unique section defined can be
loaded with different HTML documents.

The attributes of <FRAME> tags are

(i) SRC=“url” – Indicates the URL of the document to be loaded into the frame.
(ii)MARGINHEIGHT=“n”- Specifies the amount of white space to be left at the top and bottom of
the frame.
(iii)MARGINWIDTH=“n”- Specifies the amount of white space to be left along the sides of the
frame.
(iv) NAME="n" – Gives the frame a unique name so it can be targeted by other documents.
(v) NORESIZE – Disables the frames resizing capability.
(vi) SCROLLING – Controls the appearance of horizontal and vertical scrollbars in a frame.

Example:
<FRAMESET ROWS="30 %,*">
<FRAMESET COLS="50%, 50 %">
<FRAME SRC="file1.htm">
<FRAME SRC="file2.htm">
</FRAMESET>
<FRAMESET COLS="50%, 50 %">
<FRAME SRC="file3.htm">
<FRAME SRC="file4.htm">
</FRAMESET>
</FRAMESET>

Hyperlinks in Frames:
Whenever a hyperlink, which loads a document in a frame, is created, the file referenced in the
hyperlink will be opened and will replace the current document that is in the frame.

In a situation where the new document needs to be opened in a different frame while keeping
the document from which the new document was navigated open in a different frame, a simple
HTML coding technique must be used.

Since the hyperlink must open an HTML file in another frame, the frame in which the HTML file
is to be opened needs to be named. This is done by using the NAME attribute of the <FRAME>
</FRAME> Tags. The NAME takes one parameter, which is its frame name.

The hyperlink tag will have to be supplied with the following information
1. The filename.html file that has to be opened (navigated to).
2. The name of the frame where the filename.HTML file has to be opened.

The attribute via which the frame name is specified is the TARGET attribute, which is a part of
the <A> </A> tag. This information is given as

TARGET=”Framename”

The attribute via which the HTML file name is specified is the HREF attribute, which is a part of
the <A> </A> tag. This information is given as

<A HREF =”index.html” TARGET=”Main”> Visit Us </A>

frameindex.html
<html>
The New College
<frameset rows="20%,80%">
<frame src="course.html"></frame>
<frame src="home.html" name="main"></frame>
</frameset>
</html>

course.html
<html>
The New College
<ul>
<li><a href="aided.html" target="main">Aided Courses</a></li>
<li><a href="self.html" target="main"> Self Financing Courses</a></li>
</ul>
</html>

home.html
<HTML>
Welcome to The New College
</HTML>

aided.html
<html>
<U>Aided Courses</U><br>
BCOM<BR>
BA<BR>
BSC<BR>
</html>

self.html
<html>
<u>Self Financing Courses</u><BR>
BCA<BR>
BBA<BR>
BBM<BR>
</html>