WEB_PROGRAMMING_UNIT_I_HTML

Prepared by Dr.M.Wasim Raja, Asst. Professor, Dept. of Computer Science, Jamal Mohamed College,
 WEB_PROGRAMMING_UNIT_I_HTML

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. 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.2.1 Establish Connection:

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

Prepared by Dr.M.Wasim Raja, Asst. Professor, Dept. of Computer Science, Jamal Mohamed College,
 WEB_PROGRAMMING_UNIT_I_HTML

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.

1. Connect

2. Request

3. Reply

4. Close

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.

Prepared by Dr.M.Wasim Raja, Asst. Professor, Dept. of Computer Science, Jamal Mohamed College,
 WEB_PROGRAMMING_UNIT_I_HTML

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

Prepared by Dr.M.Wasim Raja, Asst. Professor, Dept. of Computer Science, Jamal Mohamed College,
 WEB_PROGRAMMING_UNIT_I_HTML

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> Jamal Mohamed College <BR> Kajanagar, <BR> Trichy-20
Output:
Department of Computer Science

Prepared by Dr.M.Wasim Raja, Asst. Professor, Dept. of Computer Science, Jamal Mohamed College,
 WEB_PROGRAMMING_UNIT_I_HTML

Jamal
MohamedCollege
Kajanagar,
Trichy-20

1.3.4 Emphasizing Material in a Web Page

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

(i) 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> Jamal Mohamed College<H3>

Output: Jamal Mohamed College

(ii) 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 Jamal Mohamed College

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

1.3.5 Text Styles

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

Example: <B> Jamal Mohamed College </B>

Output: Jamal Mohamed College

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

Example: <I> Jamal Mohamed College </I>

Output: Jamal Mohamed College

(ii) Underline: Displays text Underlined. The tags used are <U>……</U>
Prepared by Dr.M.Wasim Raja, Asst. Professor, Dept. of Computer Science, Jamal Mohamed College,
 WEB_PROGRAMMING_UNIT_I_HTML

Example: <U> Jamal Mohamed College </U>

Output: Jamal Mohamed College

1.3.6 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> Jamal Mohamed College </CENTER>

Output: Jamal Mohamed College

(ii) 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.

(a) 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.

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

Example: Jamal Mohamed College

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

Output:
Jamal Mohamed College
Welcome to all

1.4 Colors

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>
Jamal Mohamed College
</FONT>

Output: Jamal Mohamed College

Prepared by Dr.M.Wasim Raja, Asst. Professor, Dept. of Computer Science, Jamal Mohamed College,
 WEB_PROGRAMMING_UNIT_I_HTML

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.

Prepared by Dr.M.Wasim Raja, Asst. Professor, Dept. of Computer Science, Jamal Mohamed College,
 WEB_PROGRAMMING_UNIT_I_HTML

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>

Prepared by Dr.M.Wasim Raja, Asst. Professor, Dept. of Computer Science, Jamal Mohamed College,
 WEB_PROGRAMMING_UNIT_I_HTML

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

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

Prepared by Dr.M.Wasim Raja, Asst. Professor, Dept. of Computer Science, Jamal Mohamed College,