Web
Development:
{ Basic HTML Structure }
Assoc Prof Martins E. Irhebhude
What is HTML?
• describes the structure of Web pages using
markup
• elements are the building blocks of HTML pages
• File extension must be .html or .htm
Web Development: Using HTML5 & CSS3
What is HTML?
Using Markup Tags or Elements:
• Use keywords or tag names
• Enclosed within angle brackets (< >)
Opening Closing
Tag Tag
<tagname> content
</tagname>
Examples:
<h1> … </h1> <hr>
<p> … </p> <br>
<a> … </a> <img> Empty
<body> … </body> <meta> Tags
<header> … </header> <input>
Web Development: Using HTML5 & CSS3 3
HTML Basic Structure: Syntax
• has a "custom" HTML syntax that is compatible
with HTML 4 and XHTML1 (EXtensible) documents
XHTML Rules: HTML5 Support:
• Lower case • Uppercase tag
tag names names.
• Quoting our • Quotes are
attributes optional
• An attribute had to for attributes.
have a value • Attribute values
• Close all empty are optional.
elements • Closing empty
elements are
Web Development: Using HTML5 & CSS3
optional 4
XHTML most important difference
•<!DOCTYPE> is mandatory
•The xmlns(XML Namespaces) attribute in <html>
is mandatory
•<html>, <head>, <title>, and <body>
are mandatory
•Elements must always be properly nested
•Elements must always be closed
•Elements must always be in lowercase
•Attribute names must always be in lowercase
•Attribute values must always be quoted
•Attribute minimization is forbidden
Web Development: Using HTML5 & CSS3 5
HTML Basic Structure: Documents
HTML
Web
Document
XHTML Web Document
Web Development: Using HTML5 & CSS3 6
HTML Basic Structure: Documents
HTML5 Web Document
Web Development: Using HTML5 & CSS3 7
HTML Basic Structure: Documents
• The <meta> tag defines metadata about an
HTML document. Metadata is data (information)
about data.
• <meta> tags always go inside the <head>
element, and are typically used to specify
character set, page description, keywords,
author of the document, and viewport settings.
• Metadata will not be displayed on the page, but
is machine parsable.
• Metadata is used by browsers (how to display
content or reload page), search engines
(keywords), and other web services.
Web Development: Using HTML5 & CSS3 8
HTML Basic Structure: Documents
DOCTYPE Declaration
• used by the web browser to understand the
version of the HTML used in the document
<!DOCTYPE html>
Web Development: Using HTML5 & CSS3 9
Basic Web Document Elements
Tags Description
<html> root element of an HTML page
<head> represents the document's header
<title> mention the document title
<meta> provides metadata about the HTML
document like character encoding,
page description, or keywords
<body> represents the document’s body
and contains the visible page
content
Web Development: Using HTML5 & CSS3 1
0
Nesting Elements on a Web
Page
Using Block and Inline Elements
• Block-level - always starts on a new line and
takes
up the full width available
– <h1> to <h6>, <p>, <div>, <table> or <form>
• Inline - does not start on a new line and only
takes up as much width as necessary
– <strong>, <em>, <b>, <i>, <span>, <img> or
<p>This is a <b>paragraph.</p></b>
<a>
<p>This is a <b>paragraph</b>.</p>
1
1
HTML Basic Structure: Attributes
• provide additional info about HTML elements
• placed within the opening tag
• Paired with a "value"
Example:
Web Development: Using HTML5 & CSS3 10
HTML Basic Structure: Guidelines
• All markup tags must be lowercase
<p>, <strong>, <em>, <blockquote>, <br>, <hr>
• All elements must have both an opening and
closing tag except for empty or void tags
<p>This is a paragraph tag</p>
This is a forced line break <br>
• All tags must be properly nested
<p><strong>This is a paragraph tag</strong></p>
• Attributes can be assigned a value
<img src="school.jpg" alt="school image" disabled>
Web Development: Using HTML5 & CSS3 11
Validating Web
Documents
• to take away some of the uncertainty of HTML
• The most important validator is the W3C validator
at
https://validator.w3.org
Exercise 1: Creating a Validated Web Page
Template
1. Create a template for developing web pages using
HTML5.
2. Save the HTML document as webtemplate.html in a
folder and view using a web browser.
3. Validate the web page template using an W3C’s
Markup Validation Service.
Web Development: Using HTML5 & CSS3 15
Creating and Editing Web Page
Using Heading Tags:
• Increase the size of text and measured in points (pt)
• Six heading tags: <h1>, <h2>, <h3>, <h4>, <h5>,
<h6>
• Heading tags make text bold
HTML Code
Browser Display
Web Development: Using HTML5 & CSS3 16
Creating and Editing Web Page
Using Paragraph and Break Tags:
• Control line endings in an HTML document
• <p>…</p> - inserts a blank line between
text
• <br> - inserts a line break
HTML Code
Browser Display
Web Development: Using HTML5 & CSS3 17
Creating and Editing Web Page
Using Text Formatting
Tags:
• Logical tags – let the browser determine how to
display the text in an HTML document
– <strong>…</strong> and <em>…</em>
• Physical tags – state how text should be
displayed
– <b>…</b> and <i>…</i>
HTML Code
Browser
Display
Web Development: Using HTML5 & CSS3 18
Creating and Editing Web Page
Using Text Formatting Tags:
• <sup>…</sup> - makes text a superscript
• <sub>…</sub> - makes text a subscript
HTML Code
Browser Display
Web Development: Using HTML5 & CSS3 19
Creating and Editing Web Page
Using Blockquote Tags:
• Sets enclosed text to appear as a quotation,
indented on the right and left
– <blockquote>…</blockquote>
HTML Code
Browser
Display
Web Development: Using HTML5 & CSS3 20
Creating and Editing Web Page
Using Horizontal Rule:
• <hr> - used to create lines that are used to visually
divide a page into sections
HTML Code
Browser
Display
Web Development: Using HTML5 & CSS3 20
Creating and Editing Web Page
Using Preserve Formatting Tags:
• <pre>…</pre> - preserve the formatting of the
source document the exact way it was written
HTML Code
Browser Display
Web Development: Using HTML5 & CSS3 22
Creating and Editing Web Page
Using Abbreviations and Address:
• <abbr>…</abbr> - abbreviation or acronym
• <address>…</address> - contact information
HTML Code
Browser
Display
Web Development: Using HTML5 & CSS3 23
Creating and Editing Web Page
Inserting Reserved Characters:
• Characters in HTML cannot be created by using a
Named Entity
keyboard Character Symbol Description
Reference Reference Displayed
< < < Less than
> > > Greater than
© © Copyright
  (a space) space
· · Round bullet
HTML Code Browser Display
Web Development: Using HTML5 & CSS3 24
Creating and Editing Web Page
Using Comments Tag:
• <!–– comment --> - insert comments in HTML
• Not displayed by the browser
HTML Code
Browser
Display
Web Development: Using HTML5 & CSS3 25
Deprecated Tags
• elements are not available in HTML5 anymore and
their function is better handled by CSS
• <acronym> • <frameset>
• <applet> • <isindex>
• <basefont> • <noframes>
• <big> • <strike>
• <center> • <u>
• <dir> • <tt>
• <font>
• <frame>
Web Development: Using HTML5 & CSS3 26
Exercise 2: Creating a Landing Page in HTML for a
Website
1. Create a home page as a landing page of a web site.
2. Format various text contained on a web page.
3. Use HTML elements and attributes to create the home
page.
Web Development: Using HTML5 & CSS3 27
LINKING IN HTML
UNIFORM RESOURCE LOCATOR
URL stands for Uniform Resource Locator is the
global address of documents and other
resources on the World Wide Web. Its main
purpose is to identify the location of a document
and other resources available on the internet,
and specify the mechanism for accessing it
through a web browser. An example of a
URL is https://www.computerhope.com,
which is
the URL for the Computer Hope website.
Overview of a URL
A URL (Uniform Resource Locator) is a
unique identifier used to locate a resource
on the internet. It is also referred to as a
web address.
URLs consist of multiple parts including a
protocol and domain name that tell a web
browser how and where to retrieve a
resource
The URL contains the name of the
protocol needed to access a
resource, as well as a resource
URL: UNIFORM RESOURCE LOCATOR
• URL is A Way To Tell Your Web
Browser (Or Other Program) Where
To Look For Something.
• If You Want To Make A Hypertext Link
To A Page, You Would Need Its URL.
TYPES OF URL
ABSOLUTE URL
RELATIVE URL
ABSOLUTE
• An absoluteURL
URL contains more information
than a relative URL does.
• Relative URLs are more convenient because
they are shorter and often more portable.
However, you can use them only to reference
links on the same server as the page that
contains them.
• An absolute URL typically takes the following
form: protocol://hostname/other_information
RELATIVE URL
Relative URLs can take a number of different
forms. When referring to a file that occurs in the
same directory as the referring page, a URL can be
as simple as the name of the file. For example, if
you want to create a link in your home page to the
file internet.html, which is in the same directory
as your home page, you would use:
<a href=“internet.html">The Wonderful World
of Internet!</a>
WHAT IS HYPERLINK ?
In web terms ,a hyperlink is a
reference
(an address) to a resource on the web.
Hyperlink can point to any resource
on the web: an HTML page ,an image,
a sound file, a movie etc.
WHAT IS ANCHOR ?
An anchor is a term used to define a
hyperlink destination inside a
document.
The HTML anchor element <a>, is used
to define both hyperlinks and anchors.
DIFFERENTIATE BETWEEN:
<A> AS AN ANCHOR <A> AS A LINK
• It is used to name a
section of an html • It is used to link to a
document. different page or to
• Example: link to another part of
<A name=“top”> the same page.
• Example:
Hello <A href=www.yahoo.com
</A>
> GO TO YAHOO </A>
………………..
<A href=“#top>go to
top
USAGE OF LINKS
Inter-file linking:- Link to a different page
within your own website or link to another
webpage or website on the world wide web
(www).
Intra-file linking:-Jump from one section to
another section within the same web page
(also called page jump).
E-mail linking:-Link to an e-mail program.
INTER-FILE LINKING
PAGE LINK IN HTML document:-
<HTML>
<TITLE>LINK TRY</TITLE>
<BODY BGCOLOR =“CCCCFF”>
Back to <A HREF=“Index.htm”
TARGET=“_blank”> Home page
</A>
</BODY>
</HTML>
INTRA-FILE LINKING EXAMPLE:-
<p><a
href="#news">Go to the
News</a></p>
<h1>Welcome</h1>
NAMED ANCHOR:- <p>This paragraph
A named anchor is a welcomes you.</p>
hidden reference <h2>About</h2>
marker for a <p>This paragraph talks
about us.</p>
particular section of
<h2><a
your html file. name="news">News</a
></h2> <p>This is the
section your link will go
to.</p>
E-MAIL LINKING
EXAMPLE:-
<a
href=mailto:[email protected]>
E-MAIL US </a>
ATTRIBUTES OF <A> TAG
<A> ATTRIBUTES & ATTRIBUTE VALUES
ITS VALUE
Indicates the hypertext
• HREF :- URL - reference that is specified in
the url of the file to which
you want to link.
• NAME:-TEXT - Indicates the name of the
section within the document.
Indicates the link file is to be
• TARGET:- - open in a new browser
_blank window.
HTML CODING:-
<HTML>
<HEAD>
<TITLE>ONLINE GAMES </TITLE>
</HEAD>
<BODY>Games Galore
The Best Online Games Site</FONT></CENTER><BR>
<FONT SIZE="6"TEXT="ARIAL">Welcome To Games Galore …to play them off-
line. Featured Games:
<OL>
<LI>A HREF="puzzle.html"TARGET="_BLANK">Puzzle Games</A></U></B>
</OL>
<OL TYPE="square">
<LI>Tetris
<LI> Cubics
</OL>
<OL TYPE=1 START=3>
<LI><B><U><A HREF="action games.html">Action Games</A></U></B>
</BODY>
</HTML>
Image Maps
Image Maps
An image map is a single image that can be used to link to
several different URLS
Hot Spots
Image Maps
Server-Side Image Maps
Client-Side Image Maps
Server-Side Image Maps
Image Maps
Image used as image map
Map file defines areas of image and corresponding URLs
Image map program runs on server as part of its server
software
Map file and image map program reside on server
Web server performs calculations
Client-Side Image Maps
• HTML document contains map
information
• Browser performs calculations
• Better performance that server-side
image maps
• Can test and implement locally
• URL of hyperlink will display in browser
status bar when mouse hovers over
image
Four Steps to Create a Client-Side
Image Map
1. Select image to use
2. Define areas of image map
Three shapes: circle, rectangle, polygon
X and Y coordinates in pixels
Get coordinates from a graphics program
such as Paint Shop Pro or Photoshop
Four Steps to Create a Client-Side
Image Map
3. Include map information in HTML
document:
<MAP></MAP> - NAME attribute names the map
<AREA> tags identify shapes in map
– SHAPE attribute – circle, rect, poly
– HREF attribute – URL to load
– COORDS – x and y coordinates of shape
4. Connect image with map information
USEMAP attribute in <IMG> tag
USEMAP value is map name with a # symbol
before it
Finding Coordinates
• Open image in
Irfanview or some
other graphics
program
• Point to the
locations of
interest and click
to see the X, Y
coordinates in the
title bar
Circle
<AREA SHAPE=“circle”
COORDS=“x,y,r”
HREF=“url”>
Replace x,y,r with three
numbers: horizontal x,y
x+r,y
and vertical position of
the circle’s center, and
the radius of the circle
in pixels
Replace url with the Web
address of the link
target
Rectangle
<AREA SHAPE=“rect”
COORDS=“x1,y1,x2,y2”
HREF=“url”>
Replace x1,y1 with two x1,y1
numbers: horizontal and
vertical position of one
corner of the rectangle
Replace x2,y2 with the
horizontal and vertical
x2,y2
position of the opposite
corner of the rectangle
Replace url with the Web
address of the link target
Polygon
<AREA SHAPE=“poly”
COORDS=“x1,y1,x2,y x1,y1 x2,y2
2,x3,y3,x4,y4,…”
HREF=“url”>
Replace x1,y1 with two x6,y6 x3,y3
numbers: horizontal
and vertical position
of a point on the x5,y5 x4,y4
edge of the polygon
Add more x,y pairs until
you have traced
around the desired
shape
