HTML
AN INTRODUCTION
TO WEB PAG DEVELOPMENT
USMAN AHMAD.
INTRODUCTION TO HTML
With HTML you can create your own Web site.
HTML stands for Hyper Text Markup Language.
HTML is not a programming language, it is a
Markup Language.
A markup language is a set of markup tags.
HTML uses markup tags to describe web pages.
HTML is not case sensitive language.
HTML documents contain HTML tags and plain
text.
Purpose of HTML
Purpose of HTML Language is
to create static web sites.
HTML Elements and Tags
A tag is always enclosed in angle bracket
<> like <HTML>
HTML tags normally come in pairs like
<HTML> and </HTML> i.e.
Start tag: <HTML>
End tag: </HTML>
Start and end tags are also called opening
tags and closing tags
Structure of HTML Document
Header section
<head></head>
Contains info about web page
Body section
<body></body>
Contains main content of web page
Footer section
<footer></footer>
Contains footer content of web page
HTML Text Editor
HTML text editor is used to write
HTML code and save that HTML file.
There are different editors are
available to write HTML code
Recommended Text Editors
(Windows)
Notepad
Notepad++
Macromedia Dream Wear
GNU Emacs
Crimson Editor
ConTEXT
SciTE
Komodo Edit
jEdit
HOW TO START
Write html code in notepad.
Save the file with (.Html) OR (.Htm) extension.
View the page in any web browser.
Internet EXPLORER, Google Chrome, Firefox etc.
The purpose of a web browser (like internet
explorer or Firefox) is to read html documents
and display them as web pages.
Code With HTML
<HTML>
<HEAD>
<TITLE>
MY FIRST PAGE
</TITLE>
</HEAD>
<BODY>
GOVT. POSTGRADUATE ISLAMIA COLLEGE, GRW.
</BODY>
</HTML>
Explain these tags
<HTML> - Describe HTML web page that is
to be viewed by a web browser.
<HEAD> - This defines the header section
of the page.
<TITLE> - This shows a caption in the title
bar of the page.
<BODY> - This tag show contents of the
web page will be displayed
Types of HTML Tags
There are two different types of tags:
Container Element:
Container Tags contains start tag & end tag i.e.
<HTML>… </HTML>
Empty Element:
Empty Tags contains start tag i.e.
<BR>
Text Formatting Tags
Heading Element:
There are six heading elements
(<H1>,<H2>,<H3>,<H4>, <H5>,<H6>).
All the six heading elements are container
tag and requires a closing tag.
<h1> will print the largest heading
<h6> will print the smallest heading
Heading Tag Code
<html>
<head><title>heading</title></head>
<body>
<h1> GOVT. POSTGRADUATE ISLAMIA COLLEGE, GRW.</h1>
<h2> GOVT. POSTGRADUATE ISLAMIA COLLEGE, GRW.</h2>
<h3> GOVT. POSTGRADUATE ISLAMIA COLLEGE, GRW.</h3>
<h4> GOVT. POSTGRADUATE ISLAMIA COLLEGE, GRW.</h4>
<h5> GOVT. POSTGRADUATE ISLAMIA COLLEGE, GRW.</h5>
<h6> GOVT. POSTGRADUATE ISLAMIA COLLEGE, GRW.</h6>
</body>
</html>
Result of Heading Code
HTML Paragraph Tag
HTML documents are divided into paragraphs.
Paragraphs are defined with the <p> tag i.e.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<pre>This text is preformatted</pre
Line Break & Horizontal Line Tag
If we want a line break or a new line without
starting a new
paragraph Use the <br> tag.
Defines a horizontal line use <hr>tag.
<br> <hr> element are empty HTML element i.e.
Global
Information Channel<hr>
Global Information <br> Channel
Font Tag
This element is used to format the size,
typeface and color of the enclosed text.
The commonly used fonts for web pages
are Arial, Comic Sans MS , Lucida Sans
Unicode, Arial Black, Courier New, Times
New Roman, Arial Narrow, Impact,
Verdana.
The size attribute in font tag takes values
from 1 to 7.
Font tag (Text)
The text that you are going to use on your web
page is controlled by the font tag,
SYNTAX: <font>…</font>
The <font> tag attributes are:
face="font name" size="number“ value=1
smallest to 7 largest color="name or Hex
number"
Font tag
<Html>
<head>
<title>Font Tag Example</title>
</head>
<body>
<font face="verdana" size=4 color="blue"> Webpage
Development </font>
</body>
</html>
save this file under filename : body.htm
HTML color value
HTML colors can be defined as a hexadecimal
notation for the combination of Red, Green,
and Blue color values (RGB).
The lowest value that can be given to one
light source is 0 (hex #00) and the highest
value is 255 (hex #FF).
The table below shows the result of
combining Red, Green, and Blue light sources:
https://www.w3schools.com/
colors/colors_rgb.asp
Font Tag Code
<html>
<head><title> fonts</title></head>
<body>
<br><font color=“green" size="7" face="Arial"> GOVT. P/G ISLAMIA COLLEGE, GRW.</font>
<br><font color=“green" size="6" face="Comic Sans MS "> GOVT. P/G ISLAMIA COLLEGE, GRW.</font>
<br><font color=“green" size="5" face="Lucida Sans Unicode"> GOVT. P/G ISLAMIA COLLEGE, GRW. </font>
<br><font color=“green" size="4" face="Courier New"> GOVT. P/G ISLAMIA COLLEGE, GRW.</font>
<br><font color=“green" size="3" face="Times New Roman"> GOVT. P/G ISLAMIA COLLEGE, GRW.</font>
<br><font color=“green" size="2" face="Arial Black"> GOVT. P/G ISLAMIA COLLEGE, GRW.</font>
<br><font color=rgb(0,255,0) size="1" face="Impact"> GOVT. P/G ISLAMIA COLLEGE, GRW.</font>
</body>
</html>
Result of Font Code
Body tag
The <body> tag is a container where
you put text and images you want to
appear of your web page.
SYNTAX: <body>…</body>
The <body> tag attributes are:
background="image.gif"
bgproperties=“fixed" bgcolor=“color
name or Hex number“ text=“color
name or Hex number"
Background & Text Color Tag
The attribute bgcolor is used for
changing the back ground
color of the page.
<body bgcolor=“Green” >
Text is use to change the color of the
enclosed text.
<body text=“White”>
Text Alignment Tag
It is use to alignment of the text.
Left alignment <p align="left">
Right alignment <p align="center">
Center alignment <p align="right">
The HTML Style Attribute
<body style="background-color: powderblue;">
<body style="background-repeat: no-repeat; background-position: center
center;”>
<BODY background=“penguins.jpg" bgproperties="fixed" style="background-
repeat: no-repeat; background-position: center center;” bgcolor=“pink"
text=“blue">
<h1 style="background-color: powderblue;">This is a heading</h1>
<p style="background-color: tomato;">This is a paragraph.</p>
<h1 style="color: blue;">This is a heading</h1>
The HTML Style Attribute
<p style="color: red;">This is a paragraph.</p>
<h1 style="font-family: verdana;">This is a heading</h1>
<p style="font-family: courier;">This is a paragraph.</p>
<h1 style="font-size: 300%;">This is a heading</h1>
<p style="font-size: 160%;">This is a paragraph.</p>
<h1 style="text-align: center;">Centered Heading</h1>
<p style="text-align: center;">Centered paragraph.</p>
Text Formatting Tags
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<super> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<tt> Defines teletype text
<u> Defines underline text
<strike> Defines strike text
Text Formatting Code
<html>
<head></head>
<body>
<b>This text is Bold</b>
<br><em>This text is Emphasized</em>
<br><i>This text is Italic</i>
<br><small>This text is Small</small>
<br>This is<sub> Subscript</sub> and
<sup>Superscript</sup>
<br><strong>This text is Strong</strong>
<br><big>This text is Big</big>
<br><u>This text is Underline</u>
<br><strike>This text is Strike</strike>
<br><tt>This text is Teletype</tt>
</body>
</html>
HTML Comment Tags
You can add comments to your HTML
source by using the following syntax:
<!-- Write your comments here -->
Browser will skip these lines and did
not show in browser’s window.
Hyperlink Tag
A hyperlink is a reference (an
address) to a resource on the web.
Hyperlinks can point to any
resource on the web:
an HTML page,
an image, a sound file,
a movie, etc.
Hyperlink Tag
The HTML anchor element <a>, is
used to define both hyperlinks and
anchors.
<a href="url">Link text</a>
The href attribute defines the link
address.
<a href="http://www.google.com/">
Visit Google Website</a>
Result of Hyperlink Code
HTML Links - The target Attribute
By default, the linked page will be displayed
in the current browser window. To change
this, you must specify another target for the
link.
The target attribute specifies where to open
the linked document.
The target attribute can have one of the
following values:
HTML Links - The target Attribute
_self - Default. Opens the document in the same
window/tab as it was clicked
_blank - Opens the document in a new window or
tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the
window
Example
Use target="_blank" to open the linked
document in a new browser window or
tab:
<a href="https://www.google.com"
target="_blank"> Visit Google Website</a>
HTML Links - Use an Image as a Link
<a href=“http://www.google.com">
<img src=“penguins.jpg" alt="HTML
tutorial" style="width:42px;height:4
2px;">
</a>
Link to an Email Address
Use mailto: inside the href
attribute to create a link that
opens the user's email program
(to let them send a new email):
Example
<a href="mailto:someone@exa
mple.com">Send email</a>
Hyperlink Summary
Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open
the linked document
Use the <img> element (inside <a>) to use an image
as a link
Use the mailto: scheme inside the href attribute to
create a link that opens the user's email program
Create a Bookmark in HTML
Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark,
then add a link to it.
When the link is clicked, the page will scroll down or
up to the location with the bookmark.
Example
First, use the id attribute to create a
bookmark:
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
Image Tag
To display an image on a page, you need to use the src
attribute.
src stands for "source". The value of the src attribute is
the URL of the image you want to display on your
page.
It is a empty tag.
<IMG SRC ="url">
<IMG SRC="picture.gif“>
<IMG SRC="picture.gif“ HEIGHT="30” WIDTH="50”>
Image attributes - <img> tag
<img> Defines an image
<Src> display an image on a page, Src stands for “source”.
<Alt> Define "alternate text" for an image
<Width> Defines the width of the image
<Height> Defines the height of the image
<Border> Defines border of the image
<Hspace> Horizontal space of the image
<Vspace> Vertical space of the image
<Align> Align an image within the text
<background> Add a background image to an HTML page
Examples
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Table Tag
<Table> used to create table
<Tr> table is divided into rows
<Td> each row is divided into data cells
<Th> Headings in a table
<Caption> caption to the table
<Cellspacing> amount of space between table cells.
<Cellpadding> space around the edges of each cell
<Colspan> No of column working with will span
<Rowspan> No of rows working with will span
<Border> attribute takes a number
Table Attributes
This enumerated attribute indicates how the table must be
aligned inside the containing document. It may have the
following values:
Align:
left: the table is displayed on the left side of the document;
center: the table is displayed in the center of the document;
right: the table is displayed on the right side of the document.
Table Attributes
The background color of the table.
It is a 6-digit hexadecimal RGB code,
prefixed by a '#'.
bgcolor=“#cc66ff"
One of the predefined color keywords
can also be used.
bgcolor=“red”
Border
This integer attribute defines,
in pixels, the size of the frame
surrounding the table.
If set to 0, the frame attribute
is set to void.
Cellpadding
This attribute defines the space between the content of a
cell and its border, displayed or not.
If the cellpadding's length is defined in pixels, this pixel-
sized space will be applied to all four sides of the cell's
content.
If the length is defined using a percentage value, the
content will be centered and the total vertical space (top
and bottom) will represent this value.
The same is true for the total horizontal space (left and
right).
Cellspacing
This attribute defines the size of the space between
two cells in a percentage value or pixels.
The attribute is applied both horizontally and
vertically, to the space between the top of the table
and the cells of the first row,
the left of the table and the first column, the right
of the table and the last column and the bottom of
the table and the last row.
<table border = "1">
<tr> Table Example
<th>Team</th>
<th>Ranking</th>
</tr>
<tr>
<td>Pakistan</td>
<td>1</td>
</tr>
<tr>
<td>South Africa</td>
<td>2</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
</tr>
</table>
<table border = "4" cellspacing="10" cellpadding="10" bgcolor=“#cc66ff">
<tr>
<th>Team</th>
<th>Ranking</th>
</tr> Table Example
<tr>
<td>Pakistan</td>
<td>1</td>
</tr>
<tr>
<td>South Africa</td>
<td>2</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
</tr>
</table>
<table border = "4" cellspacing="10" cellpadding="10" background="penguins.jpg“>
<tr>
<th>Team</th>
<th>Ranking</th>
</tr>
<tr> Table Example
<td>Pakistan</td>
<td>1</td>
</tr>
<tr>
<td>South Africa</td>
<td>2</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
</tr>
</table>
<table>
<thead>
Table Example : Colspan
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
<table>
<tr>
Table Example : Colspan
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr> </table>
<table>
<tr> Table Example : Rowspan
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
HTML <marquee> tag
<marquee
behavior=" "
bgcolor=" "
direction=" "
height=" "
hspace=" "
loop=" "
scrolldelay=" "
scrollamount=" "
width=" "
vspace=" "> Text </marquee>
Marquee Attributes
Attribute Value Description
behavior scroll Defines the type of scrolling.
slide
alternate
bgcolor rgb(x,x,x) Deprecated − Defines the direction of scrolling the content.
#xxxxxx
colorname
direction up Defines the direction of scrolling the content.
down
left
right
height pixels or % Defines the height of marquee.
hspace pixels Specifies horizontal space around the marquee.
loop number Specifies how many times to loop. The default value is INFINITE,
which means that the marquee loops endlessly.
scrolldelay seconds Defines how long to delay between each jump.
scrollamount number Defines how how far to jump.
width pixels or % Defines the width of marquee.
vspace pixels Specifies vertical space around the marquee.
HTML <marquee> tag
<marquee behavior=" " bgcolor=" " direction=" "
height=" " hspace=" " loop=" " scrolldelay=" "
scrollamount=" " width=" " vspace=" "> Text
</marquee>
<marquee bgcolor="yellow" direction="left"
height="100" hspace="10" loop="10" scrolldelay="10"
scrollamount="20" width="1200" vspace="10">This is
basic example of marquee</marquee>
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
Unordered HTML List
An unordered list starts with the <ul>
tag. Each list item starts with the <li>
tag.
The list items will be marked with
bullets (small black circles) by default:
Unordered HTML List
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol>
tag. Each list item starts with the
<li> tag.
The list items will be marked with
numbers by default:
Ordered HTML List
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description
of each term.
The <dl> tag defines the description list, the <dt>
tag defines the term (name), and the <dd> tag
describes each term:
HTML Description Lists
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Body Margin
margin-top
margin-right
margin-bottom
margin-left
Body Margin
<BODY style=“
margin-top: 10%;
margin-bottom:10%;
margin-left:10%;
margin-right:10%;">
HTML Forms
HTML Forms are required when you want to collect
some data from the site visitor.
For example during user registration you would like to
collect information such as name, email address, credit
card, etc.
A form will take input from the site visitor and then will
post it to a back-end application such as CGI, ASP Script
or PHP script etc.
The back-end application will perform required
processing on the passed data based on defined
business logic inside the application.
HTML Forms
There are various form elements available like:
Text fields
Textarea fields
Drop-down menus
Radio buttons
Checkboxes etc.
Syntax
The HTML <form> tag is used to create an
HTML form and it has following syntax:
<form action="Script URL“
method="GET|POST">
form elements like input, textarea etc.
</form>
Form Controls
There are different types of form controls that
you can use to collect data using HTML form:
– Text Input Controls
– Checkboxes Controls
– Radio Box Controls
– Select Box Controls
– File Select boxes
– Hidden Controls Click-able Buttons
– Submit and Reset Button
Text Input Controls
There are three types of text input used on forms:
– Single-line text input controls - This control is used for
items that require only one line of user input, such as
search boxes or names. They are created using HTML
<input> tag.
– Password input controls - This is also a single-line text
input but it masks the character as soon as a user enters it.
They are also created using HTML <input> tag.
– Multi-line text input controls - This is used when the user
is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML
<textarea> tag
Multiple-Line Text Input Controls
• This is used when the user is required to give
details that may be longer than a single
sentence.
• Multi-line input controls are created using
HTML <textarea> tag
Radio Button Control
• Radio buttons are used when out of many
options, just one option is required to be
selected.
• They are also created using HTML <input> tag
but type attribute is set to radio.
File Upload Box
• If you want to allow a user to upload a file to
your web site, you will need to use a file
upload box, also known as a file select box.
• This is also created using the <input> element
but type attribute is set to file.
Button Controls
• There are various ways in HTML to create
clickable buttons.
• You can also create a clickable button
using
<input> tag by setting its type attribute to
button.
• The type attribute can take the following
• values:
Hidden Form Controls
• Hidden form controls are used to hide data
inside the page which later on can be pushed
to the server.
• This control hides inside the code and does
not appear on the actual page.
<frameset>
Function: define a collection of frames
Main Attributes: Cols, rows
Other Attributes: border, bordercolor,
class, id, style, title, frameborder,
framespacing,
Javascript Attributes: onblur, onfocus,
onload, onunload
Rows, cols
By pixel: rows=“100,200,100”
With variable: rows=“20,*,20”
By percentage:
rows=“25%,50%,25%”
With variable: rows=“20%,10%,*”
<frame>
Function: define a single frame in a
<frameset>
Main Attributes: src, id
src: the url for the page to display
id: a name for the frame for later reference
scrolling = yes or no
<html>
<frameset cols="30%,40%,30%" border="0">
<frame src="mypage.html">
<frame src="mypage.html" name="f2">
<frame src="mypage.html" scrolling="no">
</frameset>
</html>
