Scribd
Upload
15 views

HTML

Uploaded by

Hashim Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

HTML

Uploaded by

Hashim Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 99

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>

You might also like