CHAPTER TWO
W E B PA G E D E V E L O P M E N T U S I N G H T M L
WHAT IS HTML?
Hypertext markup language
Specify how texts and graphics can appear on
the webpage.
Has a file extension of htm or html.
It can use simple text editors to create the html
document
Such text editors can be:
Notepad
Notepad++
Cont…
Web editor tools can be used to create
more professional looking web
documents
Such as Amaya
HTML has different Versions
HTML5 is the latest one
HTML5
Introduces a number of new
elements and attributes
Some new features introduced in
HTML5 are
1. New Semantic Elements: These
are like
Cont…
<header>
<footer> and
<section>.
2. Forms 2.0: in <input> tag
3. Persistent local storage
To achieve without resorting to
third-party plug-in
Cont…
4. Web socket
A next-generation bidirectional
communication technology for
web applications.
5. Server sent events (SSE).
HTML5 introduces events which
flow from web server to the web
browsers and they are called
Server-Sent Events
Cont…
6. Canvas
supports a two-dimensional drawing surface
that you can program with JavaScript
7. Audio and Video
embedaudio or video on your web pages
without resorting to third-party plugins.
Cont…
8. Geolocation
Now visitors can choose to share their physical
location with your web application.
9. Micro data
create your own vocabularies beyond
HTML5 and extend your web pages with
custom semantics
Cont…
10. Drag and Drop
items from one location to
another location on the same
webpage.
The DTD (Document type Definition)
Used to define the documents of
HTML
Placed on the top of the HTML text
editor as
<!DOCTYPE html>
Is case insensitive
HTML Tags
Short texts to construct the HTML
document
The HTML Documents are collection of
the tags
There are different categories of HTML
tags
Cont…
Most of the time html tags appeared in
pairs as
Startingtag
Ending tag
Both starting and ending tags should be
enclosed by angle brackets as<html>
Cont…
The starting and ending tags are
differentiated as the ending tag has
a forward slash preceding the text
tag
That is :<title> home</title>
There are some tags which can be
non paired like <image> tag
The HTML tag
It is the first tag appeared on the top of
other tags
Used to prepare the html markup
document
It has starting and ending tags
Preceded by DTD(document type
definition) from the top
Cont…
The html starting and ending tags are
appeared at the very edges of the
document
As we start our document by html tag
again we can close it by html closing tag
Html tag is the base for every web
development documentation
Cont…
The tags are enclosed by angle bracket
while the closing tag has a forward
slash before the to the left of the tag
inside the angle bracket
That is <html></html>
Html tags are case insensitive
we can use both cases
The Title tag
To display the name of the web page on
the top of the web browser
The www will index the web based on
the title given for the page
We can use it as we put the html
starting tag
It has start and ending tag
Cont…
The title tag can be presented as
<title>my home page</title>
The text between the title tags is the
title of the page that will be displayed
by the web browser
Unlike html tag the title tag will be
closed as the title of the page has been
documented
The Heading tag
Used to put the headings of the html
document
They can be marked in different
positions of the html documentation as
headings are required
The heading tag has different font sizes
and we can use them as we can change
the font for the heading
Cont…
The heading tags can be used based on
their font size
As follows
<h1> CHAPTER TWO</h1>
<h2> CHAPTER TWO </h2>
<h3> CHAPTER TWO </h3>
The Body Tag
Where the main content of the web page
is documented
The web browser will display the
contents which are documented on the
body tag
There are other tags that can be used in
side the body tag like
Cont…
Paragraphs
Images
Tables
different urls that we can link to the
other pages in the website or to other
sites and many more
List Tags
Used to list different thing to be
displayed
There are two types of list tags
Ordered list
Unordered list
Used different tags to document
the web page.
Ordered List
Shows listed items on the web page
based on their order given as
numbered (1 2 3 …)
The tag is <ol>lists will be mentioned
here</ol>
Cont…
Unordered list
the listed items are not arranged
numerically
They are given in bulletin format
The tag for unordered tag is <ul>listed
items</ul>
Cont…
What ever ordered or unordered list
they are both can be used to document
our page documents in a well organized
format
To put the items what we want to
display on the web page we can use tags
under the tag <ol> or <ul>
This sub tags are the list tags <li></li>
Cont…
<ul type=“circle”>
<li>engineering</li>
<li>medicine</li>
<li>Agriculture</li>
<li>communication</li>
<li>Business</li>
<li>social</li>
<li>others</li>
</ul>
Linking pages
Used to navigate pages in the web site
Can also used to link other website to
our web page.
The tag can show us to connect pages
so that we can easily access them.
The tag is <A></A>
Cont…
We can create links between different pages
Example <A
HREF=“about.html">about us
</A>
There are three types of links
Link (standard link)
Alink (Active Link)
Vlink (Visited link)
Cont…
Example
Image as a link/hyperlink :<a
href="page1.html">
<img src="flower.bmp" width="32"
height="32" align="bottom"/></a>
The linking should be done in both
pages
Unoform resource locator (Url)
Used to locate where a particular file is
placed for the particular web page.
Used to connect the web page and the source
of the file so that the file can be used by the
web page
It uses Url to indicate the location of the
resource
Example background image: url
(‘mypicture.jpg’)
Linking To internet sites
Can link webpages to other sites
List the exact address of the site to link with
We can shortly connect our contacts such as
Emailaddress
Facebook and others
For example
<a href =“http://www.facebook.com”>click
</a>
Images…
<IMG>This element defines a graphic
image on the page.
Image File (SRC:source): This value
will be a URL (location of the image)
Alternate Text (ALT): This is a text
field that describes an image or acts as a
label. It is displayed when they position
the cursor over a graphic image.
Alignment (ALIGN): This allows you
to align the image on your page.
Cont…
Width (WIDTH): is the width of the
image in pixels.
Height (HEIGHT): is the height of
the image in pixels.
Border (BORDER): is for a border
around the image, specified in pixels.
Cont…
HSPACE: is for Horizontal Space on
both sides of the image specified in
pixels.
VSPACE: is for Vertical Space on top
and bottom of the image specified in
pixels. A setting of 5 will put 5 pixels of
invisible space above and bellow the
image.
Cont…
<IMG SRC=“jordan.gif“ border=4>
<IMG SRC=" jordan.gif" width="60"
height="60">
<IMG SRC=“jordan.gif" ALT="This is a
text that goes with the image">
<IMG SRC=" jordan.gif “ Hspace="30"
Vspace="10" border=20>
< IMG SRC =" jordan.gif“ align="left">
blast blast blast blast blast
Tag Attributes
Use to change or affect the text that will be
displayed
Different tags have different attributes
Each attribute has visible effect on the page
displayed
For example
<body text="red" bgcolor="yellow"
background=“photo.jpg">
Cont…
The attribute of every tag cab be
mentioned inside the start tag.
The document will be displayed as the
attributes of the page needed to be
Are important things when we need to
customize our pages with html tags
The Table Tag
Used to put a table on the web page
It has different attributes to construct a
single table
The tag for table is:
<table>different sub tags will
follow</table>
Creates a table with rows and columns
Cont…
Other sub tags of table are
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption
<CAPTION></CAPTION>
Cont…
The table row elements usually contain
table header elements or table data
elements.
<td> helps to insert the data to each
cell of the table
<th> the column names of the table
cont…
Example
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> A, B </td>
<td> C, D </td>
</tr>
<tr>
<td> E, F </td>
<td> G, H </td>
</tr>
</table>
