Lecture Html-Lec1

Lecture No.
6
Hyper Text Markup Language (HTML)
1. Hyper Text Markup Language (HTML):

HTML – Hyper-Text Markup Language – The Language of Web Pages on the World Wide Web.
It defines the structure of webpages
determines how data is displayed in the browser.
HTML is a text formatting language.
It is a set of special instructions that can be added in the text to add formatting and linking
information. HTML is directly interpreted by the browser.
The name HTML defines the major functions of HTML which are
Hypertext: It allows for non-linear linking to other documents
Markup Language: Content is “marked up” or tagged to tell the browser how to display it
HTML standards are developed under the authority of the World Wide Web Consortium
(W3C), headed by Tim Lee (http://www.w3c.org)
1.1 History of HTML:
HTML was created in 1991 by Tim Berners-Lee at CERN in Switzerland. It was designed to allow
scientists to display and share their research. By 1995, lots of browsers had added their own
bits to HTML. Dan Connolly and colleagues collected all the HTML tags that were widely used
and collated them into a draft document. This release is called HTML-2. In 1997, the newer
version of HTML (HTML 3.2) was released. It was the first version developed and standardized
exclusively by the W3C. HTML 3.2 included the support for applets, text flow around images,
subscripts and superscripts etc. In 1999, HTML 4.1 was launched. It extends HTML with
mechanisms for style sheets, scripting, frames etc. The current version of HTML is HTML5
which is still under development.
2. HTML instructions:
 HTML is written in the form of HTML elements consisting of tags enclosed in angle
brackets (like <html>), within the web page contents.
 Tags are instructions that are directly embedded into the text of the document.
 It is a signal to a browser to do something before just throwing text on the screen.
 A HTML instruction begins with open angle bracket < and ends with close angle bracket
> while a closing instruction is written as </tag>.
 We can write a HTML instruction or tag as <html>, where html is the instruction
enclosed in angle brackets and its closing tag is written as </html>.
HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as
singular elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the
second tag is the end tag (they are also called opening tags and closing tags). In between these
tags web designers can add text, tags, comments and other types of text-based content.
The purpose of a web browser is to read HTML documents and compose them into visible or
audible web pages. The browser does not display the HTML tags, but uses the tags to interpret
the content of the page.
2.1 Basic structure of a HTML page:
We start a HTML page by <html> instruction and end the page by </html> instruction. Between
these tags, there are two section of the web page
The head section: The head section of the webpage includes all the stuff that does not show
directly on the resulting page. Usually, we add the following information about the web page in
the head section
 In head section we add the title of the page. The <title> and </title> tags encapsulate
the title of your page. The title is what shows in the top of your browser window when
the page is loaded
 Another thing you will often see in the head section is meta-tags. Meta-tags are used
for, among other things, to improve the rankings in search engines
 Usually, we write client-side scripts in the head section and CSS styles are also defined in
the head section
The body section: The body of the document contains all that can be seen when the user loads
the page.
Title of the p
The basic structure of a web page is given below
<html>
<head>
<title> title of the page</title>
</head>
<body> Conte
Contents of the page
</body>
</html>
2.2 How to create a basic web page:
1. Open Notepad
2. Click on File -> Save as…
3. In the File name pull-down box, type in webpage.html
4. Click on Save
5. Type in content for your file
6. Once you finished the content, click on File -> Save
1.3 Example of a basic HTML page:

Below is an example of a basic html page which displays a welcome message in the browser
window
<html>
<head>
<title> My first HTML page </title>
</head>
<body>
Welcome to HTML
</body>
</html>
Output of the above program is shown below
Title of the page
Contents of the body
Output of the example program

2. The body tag:
In HTML each instruction has some attributes. These attributes are used to control the behavior
of the instruction. We add these attributes inside the instruction. The body tag is used to start a
body section in the web page. When we use the body tag, it displays the contents of the page
on a white background and the default color of the text is black. HTML provides some attributes
to control the behavior of the body tag. These tags are used to control the background and text
color of the web page. The attributes of the body tag are
• BGCOLOR: Change the background color
• Example: <body bgcolor=”color-name”>
• BACKGROUND: Place an image at background
• Example: <body background=”image reference”>
• TEXT: Change the color of the body text
• Example: <body text=”text-color”>
If we replace the following line in the previous example, the output is shown below
<body bgcolor=”pink” text=”red”>
Text=“red”
bgcolor=“pink”
If we use the background attribute in the previous example where we set an image image.jpg at
the background of the page, the output will be:
<body background=”image.jpg”>
Image at background
3. Text formatting instructions in HTML:

Following are the basic text formatting instructions in HTML
4.1 Starting a paragraph: HTML provides <p> tag to start a paragraph while </p> tag ends
the paragraph. The major attribute of the <p> tag is align, which vertically align the paragraph.
The possible values of align attribute are center, left, right and justify
Example: <p align=:”justify”> paragraph text </p>
4.2 Break line: <br> tag is used to give one line break in the text. It is a singular tag (it does
not have a closing tag) and has no attribute
4.3 Heading: HTML provides heading tag to add heading tag in the web page. This tag is
paired tag and has six possible forms <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. <h1> displays the
greatest heading while <h6> is the smallest heading.
Example: <h1> heading text </h1>
4.4 Horizontal line: <hr> tag is used to draw a horizontal line. The attributes of the <hr> tag
are:
Size: fatness of the line
Width: controls the width of the line. Its value may be in pixels or percentage
Color: sets the color of the line
Align: horizontally aligns the line
Example: <hr color=”red” size=”4” width=”20%” align=”center”>
4.5 Text styles: These tags are used give style to text. <b> tag is used to make text bold, <i>
tag is used to make text italic and <u> tag is used underline the text. We can use these tags as
<b>Text </b>
4.6 Center: <center> tag is used to display contents at the center of the web page. Anything
written in <center> and </center> tags is displayed at the center of the web page.
4.7 Font: <font> tag is used to control the appearance of the font on the web page. The
common attributes of the <font> tag are
 FONTFACE: Sets the specified font name
 SIZE: Size of the text (between 1 and 7)
 COLOR: Set the color of the text
Example: <FONT FONTFACE=“COMIC SANS MS” SIZE=6 COLOR=RED> Welcome</FONT>
4.8 Some more text formatting tag:
<pre>…… </pre>: element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks.
<Strike>……</Strike>: The <strike> tag defines strikethrough text.
<SUB>……</SUB>: displays the text in subscript
<SUP>……</SUP>: displays the text in superscript format
4.9: Special characters:
 Non-breaking space:
 Copyright: © ©
 Registration mark: ® ®
 Fraction one qtr: frac14; ¼
 Greater-than sign: > >
 Less-than sign: < <
 Trademark sign: ™ ™
4. Lists in HTML:
HTML provides three types of lists.
5.1 un-ordered lists: An unordered list is simply a list of related items whose order
does not matter. We can start an unordered list with <ul> tag while <li> tag is used to add items
in the list. Type attribute is used to set the type of the mark which precedes the item. It has the
values fillround, square etc.
Example:
<html>
<head> Use of type attribute
<title> HTML lists </title>
</head>
<body> List items
<ul type="square">
<li>Punjab</li>
<li>KPK</li>
<li>Balochistan</li> Output: Un-ordered list
<li>Sindh</li>
</ul>
</body>
</html>
1.3 Ordered lists: An ordered list is defined using the <ol> tag, and list items placed inside of an
ordered list are preceded with numbers instead of bullets. An order is started with <ol> tag
while <li> tag is used to add items in the list. Type attribute is used to set the type of the
numbers, start attribute is used to set the number of the first list item and value attribute is
used to change the number sequence in the middle of an ordered list.
Example:
<html>
Start attribute
<head>
</head>
<body>
<ol type="1" start="4">
<li>Punjab</li> List attribute
<li>KPK</li>
<li>Balochistan</li>
<li value="10">Sindh</li>
</ol>
Value attribute
</body>
</html> Output: Ordered list
1.4 Description/definition lists: Another type of list seen online (but not as often as unordered
or ordered lists) is the description list. Description lists are used to outline multiple terms
and their descriptions, as in a glossary, for example. <dl> tag starts a description list, <dt>
adds description term and <dd> adds description of the term.
Example:
<html>
<head>
</head>
<body>
<dl>
<dt>Islamabad
<dd>It is the capital of Pakistan
<dt> Karachi
<dd> it is the largest city of Pakistan
<dt> Lahore
<dd> This city is famous for its historical background
</body>
</html>
Description term
description
Output: Description list
Reference:
• Chapter 1, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009,
ISBN: 978-0-470-54070-1.
Lecture No.12
Navigation in HTML
1. Navigation in HTML:
The crux of HTML is its capability to reference countless other pieces of information easily on
the internet. HTML provides us instructions or tags which can be used to link document with
each other. When you link to another page in your own web site, the link is known as an
internal link. When you link to a different site, it is known as an external link.
1.1 Internal link:
A web application consists of multiple pages. Each page contains links to other pages. When we
click at some link, the browser sends the request to the server for the linked page and displays
the response of the server. In this way, we see the linked page in the browser. We can link not
only pages of one website with each other but also pages of a website with any other page on
the World Wide Web (WWW). When we link the pages of one website, such linking is called
internal linking and when we link pages of a site with other pages on the WWW, such links are
called external links.
The element <a> is used to link another document. Anything between the opening <a> tag and
the closing </a> tag becomes part of the link that users can click in a browser. To link another
page, href attribute of opening tag of <a> is used. The value of the href attribute is the
reference of the file you are linking to. If both of the pages exists in the same directory or folder
we just write the name of the page in href attribute otherwise we will have to give the
complete reference of that page.
Suppose we want to link a page “abc.html” and abc.html exists in the same directory. We can
add this link by <a href=”abc.jpg”>Click here</a>. This line of code will display “Click here” text
in the browser and when user will click the text abc.html will be loaded in the browser.
In the following example we link a page second.html from first.html and similarly, we add a link
to first.html from second.html and we assume that both of the pages exists in the same
directory.
first.html second.html
<html> <html>
<head> <head>
<title> Internal Linking </title> <title> Internal Linking </title>
</head> </head>
<body> <body>
It is the first page. To go to the next page, It is the second page. To go to the first page
please , please
<a href="second.html"> click here</a> <a href="first.html"> click here</a>
</body> </body>
</html> </html>
1.2 External linking:

To link the page of another website, again the href attribute of opening tag of <a> is used. The
value of the href attribute is the full web address for the page you want to link to rather than
just the filename. To link the google.com.pk by adding the following line
<a href="https://www.google.com.pk"> Click here </a>
In the following example we create a web page which contains a link to the page
google.com.pk.
<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.pk"> click here</a>
</body>
</html>
2. Directory structure:
In the previous example we linked one page to another. While doing this we assumed that both
of the pages exist in the same directory or folder. We can link such pages just by giving the
name of the page in href attribute of <a> tag. If the pages we want to link exist in different
folders we will have to give the full path of the page instead of just the name of the page. In this
section we will discuss how can we give the path of the page? First we discuss basic
terminologies regarding directory structure and then we will discuss on the linking of
documents.
Directory: A directory is simply another name for a folder on a web site
Root directory: The root directory (or root folder) is the main directory that holds the whole of
your web site
Sub directory: A subdirectory is a directory that is within another directory
Parent directory: A parent directory is a directory that contains another directory
Consider the following diagram. In this diagram we have a main directory “Entertainment”
which contains a page index.html this directory is the root directory. In the root directory we
have a directory “Videos” which contains a web page videos.html and another directory “Films”
Entertainment
index.html
which has englishfilms.html and urdufilms.html pages. The videos directory is a subdirectory of
entertainment directory and is parent directory of videos directory.
Songs
Videos audio.html
videos.html video.html
Films
englishfilms.html
urdufilms.html
Example: Directory Structure
2.1 Setting the path of web pages:

By looking at the directory structure, we can see that there are three possibilities for the page
to be linked. Web page may be in the same directory, in parent directory or in subdirectory.
Let’s have a look at linking pages for these possibilities.
Same directory: if both of the pages exist in the same directory then we give the name of the
page in href attribute. In the above directory structure englishfilms.html and urdufilms.html
exist in the same directory. If we link englishfilms.html from urdufilms.html, we can do this by
<a href=”englishfilms.html”> link text </a>.
Sub-directory: The syntax to link a page in sub-directory is Sub-directory/……/filename. If we
link englishfilms.html from index.html we can do this by
<a href=”Films/englishfilms.html”>Link text </a>
Parent-directory: The syntax to link a page in parent-directory is ../……/filename. Here, ..
operator is used to go back in the parent directory. If we link index.html from englishfilms.html
we can do this by
<a href=”../../index.html”>Link text </a>
Sometimes, we have to include both parent and sub-directories in a path. For example if we link
audio.html from englishfilms.html in the example directory structure we can add this link as <a
href=”../../Songs/audio.html”> link text</a>.
3. Internal document reference:

Internal document references are used to link different portions of the same page. Usually,
when a page has huge contents and browser can’t display the whole contents in one window,
we add links within contents to facilitate the movement on the page. Such links are called
internal document references. Internal document reference can be added in two steps. First we
mark the locations where we have to move and then we add the links. We can mark a location
by <a name=”location-name”> while link to this location can be added by <a href=”#location-
name”> Link text </a>.
Following example shows the use of internal document reference
<html>
<head>
<title> Internal document reference </title>
</head>
<body>
<a name=”top”>
<p> the example text.
The example text.
The example text.
The example text.
The example text.
The example text.
</p>
<a href=”#top”> Go to top</a>
</body>
</html>
This code will display the contents and a link at the end. By clicking at the link user will reach at
the top of the page.
4. Some attributes of the <a> tag:
In this section we will discuss some important attributes of the <a> tag.
Target: this attribute is used to mention whether the linked page will display in the same tab or
in a new tag. If we want that the page should display in the same tab we use target=_self while
to open the linked page in a new tab we use target=_blank. For example, when we link a page
abc.html and we want that abc.html should open in a new tab, we can add this link as
<a href=”abc.html” target=”_blank”> link text </a>
Title: title attribute is used to set the title of the link. When we move the cursor on a link its title
is displayed. We can add title as <a href=”abc.html” title=”You can go to abc.html by clicking
here”> link text </a>
Tabindex: this attribute is used to set the sequence of tab key. In a web page when we press
the tab key a link in the web page is highlighted. Links in a page are highlighted in a sequence
when we press tab key multiple times. By using tabindex attribute we can set the sequence of
tabs. Example is <a href=”abc.html” tabindex=”1”>
Accesskey: this attribute is used to add a short key for a link. User can go to the linked page not
only by clicking the linking but also by “alt + mentioned key”. Example <a href=”abc.html”
accesskey=”a”>. In this example code, user can go to abc.html by pressing “alt + a”.
Reference:
• Chapter 2, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley
Publishing; 2009, ISBN: 978-0-470-54070-1.
Lecture No.13
Adding images, audio and video files in a HTML page
Contents are major building blocks of a web application. Contents may include text, images,
videos, audios, links and others. In previous lectures we have learned how to add text and links
in a webpage. In this lecture we will learn how to add images, audio and video files in a web
page.
1. Adding images to a web page:
HTML provides <img> tag to add images to web pages. SRC attribute of the <img> tag is used to
indicate the source of the image. We can add an image by <img src=“image-name”>. To add an
image abc.jpg in web page we write following code
<img src=“abc.jpg”>
If the web page and the image exist in the same directory we just write the name of the image
as the value of src attribute otherwise we have to give the full path (in similar way as we saw in
the previous lecture while linking documents).
1.1 Attribute of the <img> tag:
Following are the major attributes of <img> tag
Height and width: when we add an image in a web page, browser displays the image in its
actual size. We can use height and width attributes to control the dimension of the image in the
browser. We can use these attributes as <img src=“image-name” height=“100” width=“100”>.
Alt attribute: sometimes the browser cannot display the image. Alt attribute is used to set the
message for users when image is not displayed in the browser. We can use alt attribute as <img
src=“image-name” alt=“image description”>
Align attribute: The align attribute was created to align an image within the page. The align
attribute was particularly used by authors who wanted text to flow around an image. The
possible values for align attribute are left, right, top, middle and bottom. Example is <img
src=“image-name” align=“left”>
Border attribute: border attribute is used to draw a line or border around an image. We can use
the border attribute as <img src=“image-name” border=“2”>. The value of the border attribute
indicates the thickness of the border (larger value means thicker border).
Example:
<html> Image without border

<head>
</head>
<body>
<img src="map.jpg" height="100" width="100" >
<br>
<img src="map.jpg" height="100" width="100" border="3"> Image with border
</body>
</html>
Output of the example
1.1 Using images as links:

In previous lecture we learnt how to link document link document in web pages. We used <a>
tag to add a link. Between <a> and </a> tags we used text. When a user clicks at this text the
linked page is loaded in the browser. Similarly, we can use images instead of text to link
document. We can do this by adding an image instead of text between <a> and </a> tags.
Example:
<html>
<head>
<title>Image Links</title>
</head>
<body>
<hr>
<h1><font color="green">Pakistani Universities</font></h1>
<hr>
<p align="justify">The higher education in Pakistan is the systematic process of students
continuing their education beyond high schools, learned societies, and two-year colleges. The
governance of higher education is maintained under the Higher Education Commission (HEC)
which oversees the financial funding, research outputs, and teaching quality in the country.[1]
In Pakistan, the higher education system includes both the public, military, and private universities;
all accredited by the HEC.<br>Following are some of the Top universities in
Pakistan</p>
<a href="http://www.nust.edu.pk/Pages/Home.aspx">
<img src="../images/nust.jpg" align="middle" height="100" width="100"></a>
<a href="http://www.comsats.edu.pk/">
<img src="../images/comsats.jpg" align="middle" height="100" width="100"></a>
<a href="http://www.numl.edu.pk/">
<img src="../images/numl.jpg" align="middle" height="100" width="100"></a>
<a href="http://www.nust.edu.pk/Pages/Home.aspx">
<img src="../images/arid.jpg" align="middle" height="100" width="100"></a>
</body>
</html>
This example code contains some text at the start and then some external links. In links we
have added images instead of text. When user clicks at some image, the corresponding page is
loaded in the browser. Output of the code is given below
1.2 Image maps:

Image maps allow you to add multiple links to the same image, with each link pointing to a
different page. They are particularly helpful when the image needs to be divided up in irregular
shapes (such as maps). Each of these clickable areas is known as a hotspot.
To define an image map in a web page first we declare a map and then we use that map on
some image. The syntax of declaring a map is
<map name=“map-name”>
<area shape=“link-shape” coords=“coordinates of link area” href=“page-reference”>
</map>
While this map can be used as
<img src=“image-title” usermap=“#map-name”>
Example:
<html>
<head>
<title>Image maps</title>
</head>
<body>
<MAP NAME="MYMAP">
<AREA SHAPE="RECT" COORDS=“210,75,275,100”
HREF="http://ww3.comsats.edu.pk/library/" title="Library">
HREF="http://ww3.comsats.edu.pk/ee/" title="EE department">
HREF="http://ww3.comsats.edu.pk/ee/" title="CS department">
</MAP>
<center>
<img src="../images/map.jpg" usemap="#mymap">
</center>
</body>
</html>
2. Adding videos in a web page:

The <video> tag is used to add a video to a web page. This tag is provided in HTML5. The src
attribute of the <video> tag is used to indicate the source of the video. We can add a video to
our page as
<video src=“abc.mp4”>
Attributes of video tag:
Auto-play: when we use this attribute in <video> tag, the video is automatically played when
the page is loaded in the browser. <video src=“abc.mp4” autoplay>
Controls: this attribute is used to display the controls to control the video when it is displayed
in the browser. <video src=“abc.mp4” controls autoplay>
Height: this attribute is used to control the height the player in the browser.
<video src=“abc.mp4” height=”400”>
Loop: When this attribute is set, the video is automatically started again when it finishes
Example:
<html>
<head>
<title>adding video</title>
</head>
<body>
<h1>Adding Video</h1>
<br>
<video src="../video/vid.mp4"
autoplay loop controls height="300">
</video>
</body>
</html>
The output of the above code is given below

3. Adding audio files to web pages:
The <audio> tab is used to add a video to a web page. This tag is provided in HTML5. The src
attribute of the <audio> tag is used to indicate the source of the audio. We can add a video to
our page as
<audio src=“abc.mp3”>
Attributes:
Auto-play: the audio file is played automatically when the page is loaded in the web browser
Controls: this attribute is used to display the controls
Loop: this attribute is used to play the audio file in a loop
Example:
<html>
<head>
<title>adding audio</title>
</head>
<body>
<h1>Adding Audio Files</h1>
<br>
<video src="../audio/aud.mp3"
autoplay loop controls height="300">
</video>
</body>
</html>
The output of the example is
References:
Publishing; 2009, ISBN: 978-0-470-54070-1.
Lecture No.14
HTML tables
1. HTML tables:
Tables display information in rows and columns. Tables are commonly used to display all
manner of data that fits in a grid such as train schedules, television listings, financial reports etc.
In HTML <table> tag is used to start a table while </table> tag indicates the end of the table.
We can define a table as
<table>
Table Structure
</table>
After starting a table using <table> tag we add row in the table. In HTML <tr> tag starts a row in
the table while </tr> ends the row. Each row in a table consists of cells or columns. HTML
provides <td> tag to add cells in a table while </td> tag end a column. The contents of a cell is
written between <td> and </td> tags.
Usually, the first row of a table is a heading row. The text in the heading row is bold. HTML
provides <th> tag to add heading cells. Contents between <th> and </th> tags automatically
appears in bold.
Example:
<html>
<head>
<title> Creating Table </title>
</head>
<body>
<h1>Creating Tables in HTML</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Basharat</td>
<td>Web Engineering</td>
<td>75</td>
</tr>
</table>
</body>
</html>
This code creates a table. In table there are two rows while in each row there are three cells or
column. Cells in the first row are created using <th> tag. It means their content will be displayed
in bold and center aligned. The output of the above example is given below
1.1 Attributes of table:

Following are the major attributes of tables
The Border Attribute: Indicates the presence of the border around the table. Example is <table
border=“1”>
The align Attribute: Align attribute is used to horizontally align a table in the browser. The
possible values of this attribute are center, left and right. Can be used as <table align= “center”>
The bgcolor Attribute: sets the background color of the table. It can be used as <table
bgcolor=“gray”>
The background Attribute: sets the specified image at the background of the table. Example of
the use of this attribute is <table background=“image-title”>
The height and width Attributes: these attributes are used set the height and width of the
table. Values of these attributes can be given in pixels or percentage
The cellpadding Attribute: The cellpadding attribute is used to create a gap between the edges
of a cell and its contents. This attribute can be used as <table cellpadding=“50”>
The cellspacing Attribute: The cellspacing attribute is used to create a space between the
borders of each cell.
The following diagram shows the effects of these attributes
cellpadding cellspacing
eight
Width
1.2 Row level attributes:

The above attributes are applied on the whole table. There are some attributes which applied
at row. The major row level attributes are
The align Attribute: is used to horizontally align the contents within a row. <tr
align=“center,right or left”>
The bgcolor Attribute: sets the background color of a row
• <tr bgcolor=“gray”>
The background Attribute: used to set an image at the background of the row
• <tr background=“image-name”>
The height Attribute: is used to set the height of the row
• <tr height=“20” widht=“20”>
The valign Attributes: is used to vertically align the contents of a row
• <tr valign=“top, middle or bottom”>
Row Height
Vertical Align
1.3 Cell level attributes:
These attributes are applied at cells. Following are major cell level attributes
The align Attribute: is used to horizontally align the contents of a cell
<tr align=“center,right or left”>
The bgcolor Attribute: sets the background color of a cell
The height and width Attributes: set the height and width of a cell
The valign Attributes: vertically align the contents of a cell
The rowspan Attributes: used when a cell should span across more than one rows
The colspan Attribute: used when a cell should span across more than one column
Following code shows the use of rowspan and colspan attributes
<table border=“1”>
<tr>
<td rowspan=“2”>Name</td>
<td colspan=“2”>Subjects</td>
</tr> Name Subjects
<tr>
<td >OOP</td>
<td >DB</td> OOP DB
</tr>
<tr>
<td >ALi</td> ALi 75 80
<td >75</td>
<td >80</td>
</tr>
</table>
1.4 Adding caption of a table:

<caption> tag is used to add a caption of the table. We usually add caption before the first row
of the table.
Example:
<table>
<caption>Caption of the table</caption>
Structure of the table
</table>
Reference:
• Chapter 4, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing;
2009, ISBN: 978-0-470-54070-1.
Lecture No.15
HTML forms
1. HTML Forms:
Users communicate with web applications through forms. Users provide their input through
forms and submit their information to the server. This input is processed at the server. Forms
provide a means of submitting information from the client to the server. HTML supports tags
for creating forms; however, it does not process the information. We use server-side script to
process form’s information. Server-side script runs on the Web server and receives data from a
form and uses it to perform a set of tasks.
HTML provides <form> tag to create a form in a web page while </form> tag ends the form.
Between <form> and </form> tags, elements of the form are declared. We can declare a form
as:
<form attributes>
Form’s elements and layout tags
</form>
A single page can include several different forms, but we cannot nest one form inside another.
Common Form Attributes:
Following are the most common attributes of the form tag
Action: as we discussed earlier that forms are used to submit the input to the server where
some server-side script process this information. Action attribute is used to give the URL of the
server-side script that is to receive and process the forms data. We use this attribute as
<form action=”URL of the server-side script”>
Method: method attribute is used to set the HTTP method that the browser uses to send the
form's data to the server for processing. The most common values for method attribute are get
and post. When we use get method, all form data is encoded into the URL, appended
the action URL as query string parameters. When we set the value of the method to post,
form’s data appears within the message body of the HTTP request
Name: name attribute is used to set the name of the form so that it can be identified uniquely
2. Common form elements:

To get user’s input, we define elements in the form. Users provide their input through these
input elements. Text fields, password fields, checkboxes, radio buttons, dropdown lists and text
area are the most common elements of the form. We discuss these elements one by one.
2.1 Text input field:
Used for items that require only one line of user input, such as search boxes or e - mail
addresses. They are created using the < input > element. We use the type attribute of the
<input> tag to set the input type to text. We can add a text input field in the form as <input
type=”text”>
Attributes of the input text field: the most common attributes of the text input field are
NAME: name attribute of the text field is used to uniquely identify an input field
SIZE: size attribute is set to define the size of the input. It defines how many characters can be
entered in an input field. It controls the physical appearance of the input field
VALUE: this is the default value of the input field
MAXLENGTH: Allows you to specify the maximum number of characters a user can enter into
the text box
Example: following code creates a form with one text input field
<html>
<head>
<title>HTML form</title>
</head>
<body>
<h1> Registration Form</h1>
<form>
Please Enter Your Name: <input type="text" name="name">
</form>
</body>
</html>
Output field of the above code is given below
2.2 Password field:
The password input masks the characters the user types on the screen by replacing them with
either a dot or asterisk, so that they would not be visible to someone looking over the user ’ s
shoulder. We can add a password field by setting the type attribute of the input tag to
password. The attributes of the password field are the same as of the text input field (name,
size, value and maxlength). In the following example, we add a password field in the form of the
previous example
<html>
<head>
<title>HTML form</title>
</head>
<body>
<h1> Registration Form</h1>
<form>
Please Enter Your Name: <input type="text" name="name"><br>
Please Enter Your Password: <input type="password" name="pass">
</form>
</body>
</html>
Output of the above code is given below
2.3 Hidden fields:
Sometimes we want to pass information between pages without the user seeing it; to do this,
we can use hidden form fields. Hidden form field does not appear in the browser but can have
value. This value is submitted to the server along with other input. We can add a hidden field to
a form by setting the type to hidden in the input tag. The major attributes of the hidden field
are name and value. Name is used to access the value of the hidden field while value attribute
is used to set the value of the hidden field. Following line of code adds a hidden field in the
form
<input type=”hidden” name=”hiddenfield” value=”ali”>
When the form is submitted the value of this hidden field is accessible by its name “hiddenfield”
and the value passed is “ali”.
2.4 Checkboxes:
Sometimes we wish to ask users to select one or more values among the given values. We use
checkboxes for this purpose. A checkbox appear as a box and user can check this box. We can
add a checkbox to a form by <input type=”checkbox”>. The major attributes of the checkbox
are name and value. Name is used to identify the checkbox while value is used to set the value
of the checkbox. When a user submits the form and if the checkbox is checked, this value is
passed to the server. Following lines add checkboxes to a form
Which languages do you know?
<br>
<input type=”checkbox” name=”language1” value=”urdu”>Urdu
<input type=”checkbox” name=”language2” value=”english”>English
If we add these lines in the code of the form we used in example 2 of this lecture, the output
will be
2.5 Radio buttons:

Radio buttons are used to get user’s input from a given set of values. The difference between a
radio button and a checkbox is that in radio buttons user can check only one value while in
checkboxes user can check multiple values. We can add a radio button to the form by <input
type=”radion” >. Major attributes of a radio button are name and value. The following lines add
a set of radio buttons in the form
Nationality
<br>
<input type=”radio” name=”nationality” value=”single”>Single
<input type=”radio” name=”nationality” value=”dual”>Dual
You can see that the name of both of the radio buttons is same. By setting the same name, we
make them a group and user can check only one of them. If both of the radio buttons have
different names then both of the radio buttons are treated separate group of options and user
can check both of them. If we add these lines to the previous form, the output will be
2.6 Select list:

A drop - down select box allows users to select one item from a drop - down menu. Drop -
down select boxes can take up far less space than a group of radio buttons. Drop - down select
boxes can also provide an alternative to single - line text input controls where you want to limit
the options that a user can enter.
<select> tag is used to start a list while </select> tag ends the list. Option within select list is
added by using <option> tag. Name, size and multiple are the major attributes of the <select>
tag. Name is used to identify the list, size identifies the number of rows in the list that should be
visible at the same time and multiple allows a user to select multiple values at the same time.
Value and selected are the major attribute of <option> tag. The value attribute is used to set
the value that is sent to the server if this option is selected and selected attribute is used to
specify that this option should appear at the top of the list.
Following lines add a list in the form
<select name=”domicile”>
<option value=”punjab”> Punjab </option>
<option value=”sindh”> Sindh </option>
<option value=”KPK”> KPK </option>
<option value=”balochistan” selected> Balochistan </option>
</select>
By adding this line in the code of the previous from we get the following output
2.7 Text area:

When we expect that user’s input can consists of multiple lines, we get such input in a text
area. A text area is basically a text input fields which consists of multiple lines. We can add text
area in a form by using <textarea> tag. Rows and cols attributes of the <textarea> tag are used
to specify the height and width of the text area. We can add a text area to a form by
Your Address: <textarea rows=”5” cols=”20”></textarea>. The output of the form after adding
this code will be
2.8 File select box:
If you want to allow a user to upload a file to your web site from his or her computer, you will
need to use a file upload box, also known as a file select box. We can add a file select box by
using <input> tag but this time value of the type attribute is file. Example to add a file select box
is
Please attach your CV: <input type=”file” name=”cv”>
2.9 Submit and reset buttons:
Submit button is used to submit a form’s input to the server while reset button is used to
remove the user’s typed input. We can add a submit button by <input type=”submit”
value=”submit”>. Value of the value attribute appears at the button. To add a reset button we
set the type of the <input> tag to reset. <input type=”reset”> adds a reset button in the form.
If we add these buttons in the example registration form, the output will be
References:
Publishing; 2009, ISBN: 978-0-470-54070-1.

Lecture Html-Lec1

Uploaded by

Copyright:

Available Formats

Lecture Html-Lec1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture Html-Lec1

Uploaded by

Copyright:

Available Formats

Lecture No.

1. Hyper Text Markup Language (HTML):

determines how data is displayed in the browser.

HTML is a text formatting language.

Hypertext: It allows for non-linear linking to other documents

1.1 History of HTML:

2.1 Basic structure of a HTML page:

2.2 How to create a basic web page:

1.3 Example of a basic HTML page:

Output of the above program is shown below

Title of the page

Contents of the body

Output of the example program

3. Text formatting instructions in HTML:

Output: Description list

1.2 External linking:

Example: Directory Structure

2.1 Setting the path of web pages:

3. Internal document reference:

4. Some attributes of the <a> tag:

1. Adding images to a web page:

1.1 Attribute of the <img> tag:

Following are the major attributes of <img> tag

<html> Image without border

Output of the example

1.1 Using images as links:

1.2 Image maps:

<img src=“image-title” usermap=“#map-name”>

2. Adding videos in a web page:

The output of the above code is given below

1.1 Attributes of table:

1.2 Row level attributes:

1.4 Adding caption of a table:

2. Common form elements:

Output of the above code is given below

2.3 Hidden fields:

2.5 Radio buttons:

2.6 Select list:

2.7 Text area:

You might also like