HTML I

INTRODUCTION
• In this lecture we introduce internet based programming
language which will help in creating the web
applications. The hypertext markup language [HTML]
definition, its document structure and the HTML tags will
be analyzed.
OBJECTIVES
By the end of this lecture the learners should be able to:
• Define HTML tags.
• Analyze the HTML document structure.
• Work with HTML tags.
• The following is a list of technologies associated with
web development.
– Hypertext Markup Language (HTML)
– Cascading Style Sheets (CSS)
– JavaScript and DOM scripting
– Server-side programming and database management
 Hypertext Markup Language (HTML)

• HTML (HyperText Markup Language) is the language

used to create web page documents.
• HTML is not a programming language; it is a markup
language, which means it is a system for identifying and
describing the various components of a document such as
headings, paragraphs,and lists. The markup indicates the
document’s underlying structure.
• There are several versions of HTML: e.g HTML5
 Cascading Style Sheets (CSS)
• Used to describe how that content should look. That
means fonts, colors, background images, line spacing,
page layout, and etc all are controlled with CSS. With the
newest version (CSS3), you can even add special effects
and basic animation to your page.
 JavaScript
• JavaScript is a scripting language that is used to add
interactivity and behaviors to web pages, including these
(just to name a few):
– Checking form entries for valid entries
– Swapping out styles for an element or an entire site
– Making the browser remember information about the user for the
next time she visits
– Building interface widgets, such as expanding menus
 Server-side programming
• Some simple websites are collections of static HTML documents and
image files, but most commercial sites have more advanced
functionality such as forms handling, dynamically generated pages,
shopping carts, content management systems, databases, and so on.
These functions are handled by web applications running on the server.
There are a number of programming languages and frameworks (listed
in parentheses) that are used to create web applications, including:
– PHP (CakePHP, CodeIngniter, Drupal)
– Python (Django, TurboGears)
– Ruby (Ruby on Rails, Sinatra)
– JavaScript (Node.js, Rhino, SpiderMonkey)
– Java (Grails, Google Web Toolkit, JavaServer Faces)
– ASP.Net (DotNetNuke, ASP.Net MVC)
 Software required to build a
website
• Today, there are wonderful tools created specifically with
web design in mind that make the process more efficient.
They include:
• Web page authoring
• These tools provide a visual “WYSIWYG” (What You See
Is What You Get, pronounced“whizzy-wig”) interface and
shortcuts that save you from typing repetitive HTML and
CSS.
• Example of web-authoring programs:
– Adobe Dreamweaver.
– Microsoft Expression Web (Windows only).
2 HTML editors
• HTML editors (as opposed to WYSIWYG authoring
tools) are designed to speed up the processof writing
HTML by hand. They do not allow you edit the page
visually, so you need to checkyour work in a browser.
• Examles
– TextPad (Windows only).
– Sublime Text
• Image editing and drawing software
• Example
• Adobe Photoshop.
• Adobe Fireworks.
 Internet tools
• These are tools specifically for viewing and moving files over the
network:
• A variety of browsers. Because browsers render pages differently,
you’ll want to test your pages on as many browsers as possible, both
on the desktop and on mobile devices.
• Windows:
– Internet Explorer, Chrome, Firefox, Safari
• Macintosh OS X:
– Opera, Safari, Chrome, Firefox
• The mobile browsers!
– Mobile Safari (iOS), Android Browser (Android), BlackBerry Browser (RIM),
Nokia Series 40 and
 DEFINE HTML
• Is a set of logical codes (markup) in parentheses that constitute the appearance of
a web document and the information it contains. saving it with the .html or .htm
filename extension.
• The codes are enclosed by less than “<” and greater than “>” brackets. These
bracketed codes of the markup are commonly referred to as tags.
• The first word or character that appears inside the “<” opening bracket is called
the element. An element is a command that tells the browser to do something e.g
<B>
• Most elements have an opening element(tag) and a closing element (tag)
distinguished by the “/” inside the opening bracket. E.g <body> . . . . . . .
</body>
• Words that follow the element inside the opening tag are called are called
attributes. Attributes are not repeated or contained in the closing element(tag).
They describe the element’s properties
• e.g <Font face= “Times New Romans” , color = “red”, size =14>
 HTML DOCUMENT STRUCTURE

• HTML files usually have the extension of htm, html, or xhtml.

• Document tags define the overall structure of an HTML document.
HTML is structured i.e. it has a beginning, body and end. Pages are
made of text, images and URL links.
• HTML is composed of tags which are always enclosed in angle
brackets < >
• Tags in HTML are not case sensitive. In HTML there are two types of
tags, container tags, and empty tags. Container tags occur in pairs.
An example of a container tag is the <title></title> tag. Whatever is
contained within this tag is assigned to the title. Notice that the closing
tag has a slash in it.
• Empty tags require no closing tag. An example of an empty tag is the
break tag <br>. This forces the cursor to a new line.
 HTML DOCUMENT
<!DOCTYPE html> •The <!DOCTYPE html> declaration defines
<html> this document to be HTML5
<head> •The text between <html> and </html>
<title>Page Title</title> describes an HTML document
</head> •The text between <head> and </head>
<body> provides information about the document
<h1>My First Heading</h1> •The text between <title> and </title>
<p>My first paragraph.</p> provides a title for the document
</body> •The text between <body> and </body>
</html> describes the visible page content
•The text between <h1> and </h1> describes
a heading
•The text between <p> and </p> describes a
paragraph
 HTML tags

• Start tags and end tags

• Some elements use both start and end tags
• Others just use a start tag
• Start tags - delimited by < and >
• End tags - delimited by </ and >
– <H1>This is a Large Heading</H1>
– <BR>This text starts on a new line.
• Some start tags also include attributes which further define
information about the element.
 HTML elements
• HTML influences the way a web page is displayed by the
client browser, once it has been delivered by the World
Wide Web (WWW) server.
• The HTML formatting marks, known as elements, are
used to mark-up the text in the ASCII document.
• Elements exist, for example, to define:
– Heading text.
– Words which are to be emphasised.
– Where HyperLinks are to be included.
 Getting started
• There are four tags every HTML document should have.
These tags define what type of
• document it is, and the major sections. These tags are
<HTML>, <HEAD>, <TITLE>, and
• <BODY ...>.
• - <HTML> </HTML>
• This is now the beginning of the document. It tells the browser that the
file contains HTML coded information. The file extension .html
indicates that the file is a HTML document.</html>tells the browser
that this is the end of the document.
• - <HEAD> </HEAD>
• This identifies the first part of the HTML - coded document that
contains the title. The title isshown as part of the browser’s window.
• - <TITLE> </TITLE>
• The title element contains the document title and identifies its content in
a global context.
• The title is typically displayed in the title bar at the top of the browser
window, but not inside
• <BODY> </BODY>
• The body tag defines the look of the page as a whole – specifically
global settings for the color of the text, the color of the background
and the color of the links.
• This is the second and the largest part of the HTML document.
• The Body section of HTML contains other tags, which display text,
images, links and multimedia.
 HTML
!DOCTYPE Title tags

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Body tags
<!– Comments: name_of_webpage.html -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title> Web Engineering: XHTML I </title>
</head>

<body>
<p>Welcome to XHTML!</p>
</body>
</html>
 <HTML, HEAD, BODY>
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
This is my first Web document. This file is a simple
ASCII text file which was created on a PC using
notepad under MS Windows. As you can see the
file is shown in the display window of the Browser.
</BODY>
</HTML>
 COMMENT TAG
• The first line of the code usually starts with !. It is usually for
commenting and it is an empty tag. Comment tags do not show up in
the browser window. They are ignored by the browser.
• One can tell your web browser what version of HTML being used.
• You can also use comments to explain your code, which can help
you when you edit the source code at a later date.
 BODY TAG ATTRIBUTES
• BGCOLOR
• Defines the background color of the page. Colors are set
using “RGB” color codes, which are, represented as
hexadecimal values. Each 2 digit section of the code
represent the amount in sequence, of red, green or blue
that forms the color. The color setting can be expressed in
one or two ways, either by name e.g. “ blue” or as a six
digit hexadecimal number
some of the commonly used
colors:
 body tag attributes
• BACKGROUND
• Defines a background image. The images get tiled in the browser. The body
element allows one to set an image as the documents background. E.g setting the
document background image to logo.gif <BODY BACKGROUND = “logo.gif”>.
• TEXT
• Defines the color of the text of the page. NB/ Make sure your background
contrasts with the text color.
• LINK
• Defines the color of hyperlinks which have yet to be selected, initial appearance.
• ALINK
• Active link, defines the color of hyperlinks as they are being clicked.
• VLINK
• Visited link, defines the color of hyperlinks which have already been visited.
 Example of body tag attributes
<HTML>
<HEAD>
<TITLE>Welcome to my page </TITLE>
</HEAD>
<BODY BGCOLOR=”Blue” TEXT=”White” LINK= “Green”
ALINK= “Lightgreen” VLINK= “DarkGreen”>
The bulk of the page goes here
</BODY>
</HTML>
 Text emphasis
<?xml version = "1.0"?>
Every XHTML document is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" required to have opening
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> and closing html tags.
<!-- XHTML headers -->
<html xmlns = "http://www.w3.org/1999/xhtml">
The font size of the text
<head>
<title>Web Engineering - Headers</title> between tags decreases
</head> as the header level increases.
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4>Level 4 header</h4>
<h5>Level 5 header</h5> Select a header based on the
<h6>Level 6 header</h6> amount of emphasis you
</body> would like to give that text.
</html>