Web Programming (CoSc2042 )
Chapter-two: Hyper Text Markup Language (HTML)
Compiled By: Kassawmar M. (MSc)
4/5/2024 1
HTML
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for
creating Web pages.
HTML describes the structure of a Web page
HTML consists of a series of elements and is a set
of markup tags
HTML elements tell the browser how to display
the content
HTML is Not Case Sensitive.
4/5/2024 2
Hypertext Markup Language (HTML)
An open standard
◦ Developed by the World Wide Web Consortium (W3C)
A language used to format text and
objects (such as images) to be displayed in
a Web browser.
◦ The display language of a browser
Static—it is only display.
◦ Use other technologies to add dynamic
function:
Client-side (browser) scripting languages
(JavaScript)
Server-side programs 4/5/2024
(PHP, Java servlets) 3
HTML (Cont…)
The user interface language of the Web.
An HTML file is a text file containing small
markup tags.
◦ The markup tags tell the Web browser how to display
the page.
Appearance
Layout
Content
An HTML file must have an htm or html file
extension.
Text mixed with markup tags
◦ Tags enclosed in angle brackets
e.g., <H1>introduction</H1>
4/5/2024 4
HTML (Cont…)
Constitutes a collection of platform
independent styles that define the various
components of a web document.
◦ Styles indicated by markup tags.
What is HTML really?
◦ Plain-text documents can be created using any
text editor.
4/5/2024 5
HTML (Cont…)
What is a markup language?
◦ One where we can embed special tags or formatting
commands in the text.
◦ To describe how the text should be displayed /
printed.
HTML is a markup language
◦ Special formatting codes (called tags) to adjust fonts,
create bulleted lists, create forms, display images,
create tables, etc.
HTML describes the logical structure of a document
Browsers are free to interpret tags differently
HTML is a lightweight file format
4/5/2024 6
Why do we use HTML?
Light
◦ Files are flat text and very small
◦ Quickly transferred over a network
Easy to learn
◦ Smaller and less complex than other markup
languages
◦ Less tags (instructions)
Open standard
◦ Works with all platforms, all browsers, and all
Web servers
The rise of Internet technologies
4/5/2024 7
Two parts to HTML
Source code Display
Browser
Text/HTML editor
When you open an HTML file with
HTML files are flat-text files that
a browser, the code will run.
have a .html (or .htm) extension.
4/5/2024 8
Some Points
Most of the tags belong to the first category.
<tag-name> …… directives …… </tag-name>
Tags are case insensitive
<HEAD>, <Head> and <head> are all equivalent.
Tags may be nested
<html> <head>…</head> <body>…</body>
</html>
Most browsers have a view source menu
option.
◦ The HTML version of the page can be displayed.
4/5/2024 9
Some Points (cont...)
Browsers ignore all extra spaces and returns
within a HTML document.
It is good practice to use white spaces in a
HTML document.
◦ Improves readability.
4/5/2024 10
Some Points (cont...)
Some tags can have one or more (named)
attributes to define some additional
characteristics of the tag.
<body text=“#FFFFFF” bgcolor=“#0000FF”>
or
<body text=“white” bgcolor=“blue”>
4/5/2024 11
Some Points (cont...)
Comment lines
Comments are included between <!--- and --->.
Comments cannot be nested.
<!--- A comment here --->
<!--- Another comment in
two lines --->
4/5/2024 12
Some Points (cont...)
A markup language formats text in
between two “tags”.These look like:
<code>formatted text</code>
◦ <code> begins the formatting tag
◦ </code> ends the formatting tag
These tags are then read by a browser,
which translates the tags into the
formatting that they represent.
4/5/2024 13
Some Points (cont...)
The left and right angle brackets are used to
enclose all special instructions, called tags.
Two classes of tags:
◦ Those which appear in pairs.
<i> Good morning </i>
Those which appear individually.
<img src=“baby.jpg”>
Browsers interpret the tags to display a
HTML page in properly formatted form.
4/5/2024 14
HTML Document Structure
A HTML document consists of two major
portions:
◦ Head
Contains information about the document, like the
title and “meta” data describing the contents.
◦ Body
Contains the actual matter of the document.
Gets displayed within the browser window.
4/5/2024 15
Cont…
<!DOCTYPE html>
<html>
<head>
(Header: information about the page)
</head>
<body>
(Body:Web page content)
</body>
</html>
4/5/2024 16
Cont…
1. DOCTYPE
2. HTML
3. HEAD
- TITLE element required
- Optional elements:
• BASE
• META
• BGSOUND
•SCRIPT, NOSCRIPT
• STYLE
• LINK
4.Body
5.Element
4/5/2024 17
The Basic Web Page structure
<html>
Head section
<head>
<title> My page </title>
</head>
Body section
<body>
Hello this is my page
</body>
</html>
4/5/2024 18
Basic HTML syntax
HTML syntax
Tags
– Instructions for the browser
<tag> Some text</tag>
Nesting
– Close tags in the opposite order in which you
opened them.
<tag1><tag2>Some text</tag2></tag1>
Attributes
– Specify attributes to use non-default behavior
<tag attribute=“value”>Text</tag>
4/5/2024 19
HTML Tags
HTML
◦ <HTML>……</HTML>
These tags begin and end an HTML document
Used to bracket an entire HTML document.
Optional for most browsers.
Attributes:
lang = language code
Language code indicates the primary language of
the document.
en – English
4/5/2024 20
HTML Tags (cont…)
HEAD
◦ <HEAD >……</HEAD>
◦ These tags are in the beginning of the
document.
◦ Important information is stored in-between
these tags including: title, meta-data, styles, and
programming scripts.
◦ Used to provide information about a web page.
◦ Nests within itself other tags like
<base>, <meta> and <title>.
4/5/2024 21
HTML Tags (cont…)
<base>
◦ Attribute: href=url
◦ Specifies the base pathname for all relative
URLs in the document.
◦ No end tag.
<meta>
◦ Used to provide information about a
document.
◦ Keywords or descriptions to aid search
engines.
4/5/2024 22
Cont…
Example 2: Codes for HEAD element
<head>
<meta name="Keywords" content="NOUN,Web
Pages" />
<meta name="description" content="HTMLBasic
Tags" />
<base href="http://www.nou.edu.ng " /> <link
rel="stylesheet" type="text/css"
href="noun.css"/>
<script type="text/javascript">
</script>
</head>
4/5/2024 23
HTML Tags (cont…)
TITLE
◦ <TITLE>……</TITLE>
◦ These tags are in-between the HEAD tags and
contain the text that appears in the title of
the webpage.
◦ Usually appears on the title bar of the browser
window.
Example 3: Code for Title element
<html>
<head>
<title>HAWASSA UNIVERSITY</title>
</head>
<body> </body>
</html> 4/5/2024 24
HTML Tags (cont…)
BODY
◦ <BODY>…..</BODY>
◦ As you may have guessed, the body tags contain
all the text in the body of the document.
◦ Used to bracket the body of a HTML document.
◦ Attributes:
background=url specifies an image file to be used
as tiling background.
bgcolor=color Sets the background color of the
document.
text=color Sets the default color for the normal
text in the document.
4/5/2024 25
Cont…
Example 4: Codes for Body Element
<html>
<head>
<title>Hawassa University Website!
</title>
</head>
<body>
<h1>Welcome to the official Website of the Hawassa
University. </h1>
</body>
</html>
4/5/2024 26
Source code display
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First
Webpage</h1>
<p>Welcome to my first web page. I am
writing this page using a text editor
and plain old html.</p>
<p>By learning html, I'll be able to create
web pages like a pro....<br>
which I am of course.</p>
</body>
</html>
4/5/2024 27
How to Create and Run HTML codes
Creating an HTML document is easy.
To begin coding HTML you need a standard text editor.
Example: Notepad ,Notepad ++ and Dreamweaver are the
best editors.
Steps to use notepad application.
Steps 1. start All program Accessories notepad
Steps 2.Launch Notepad application on your computer
Steps 3. Type in your HTML codes
Steps 4. Save the document onto a location in your
computer drive with a name and the extension “html” (for
example IP.html or htm)
Steps 5. Click on the filename created.
4/5/2024 28
How to specify colors?
Two ways:
◦ By specifying the red, green, blue or RGB
components.
Each color encoded in 8 bits.
00 means that the color is turned off; FF means fully
turned on.
Example:
<body text=“#FFFFFF”
bgcolor=“#0000FF”>
4/5/2024 29
How to specify colors?
By specifying the color name.
◦ Some of the colors that are supported by
browsers are:
aqua black blue fuchsia
gray green lime maroon
Navy olive purple red
Silver teal yellow white
◦ Many other colors are possible.
◦ Example:
<body text=white>
<body bgcolor=“yellow”>
4/5/2024 30
HTML Backgrounds
By default, your webpage background is white in color.
Two good ways to decorate your webpage background.
◦ Html Background with Colors
◦ Html Background with Images
The bgcolor attribute is used to control the background
of an HTML element, specifically page body and table
backgrounds
The background attribute used to control the
background of an HTML element, specifically page body
and table backgrounds.
◦ You can specify an image to set background of your HTML
page or table.
4/5/2024 31
Text Formatting in HTML
Paragraphs and Headings
<Hn> ……. </Hn>
◦ Used to generate headings, 1 ≤ n ≤ 6.
◦ Six different levels of headings.
<H1> is the largest, <H6> is the smallest.
<P>
◦ Paragraph marker, used to separate text into
paragraphs.
◦ End tag </P> is optional.
◦ A series of paragraph tags <p><p>…<p> with no
intervening text is treated as a single <p>.
4/5/2024 32
Cont..
<BR>
◦ Used to indicate that the text following <BR>
should begin on the next line. (newline)
Example:
This is the first line. <br>
This is the second line. <br>
This is the third.
4/5/2024 33
Cont…
<HR>
◦ Produces a horizontal line, which can be used
to delimit sections.
◦ Length of the line can be specified.
◦ Examples:
<hr>
<hr size=“20”> [ noshade option possible ]
<hr width=“75%”>
<hr align=“right” width=120>
Across full width of browser, 20 pixels thick, 75% of
available page width, and 120 pixels right-justified.
4/5/2024 34
Cont…
<address> ……. </address>
◦ Supplies the contact information of the author.
◦ Generally formatted in italics, with a line break above
and below.
◦ Example
<address>
Mr. XYZ <br>
Dept. of Computer Science <br>
Hawassa University <br>
Email: [email protected]
</address>
4/5/2024 35
Appearance of Text
<b> ……. </b>
◦ Displays the enclosed text in bold.
<i> ……. </i>
◦ Displays the enclosed text in italics.
<cite> ……. </cite>
◦ Tells the browser that this is a citation.
Usually displayed in italics.
4/5/2024 36
Cont…
<pre> ……. </pre>
◦ Allows browser to display carefully laid out
text.
◦ Used to display program listings.
◦ Example:
<pre>
main()
{
int i, j;
abc ();
}
</pre>
4/5/2024 37
Cont…
<sub> ……. </sub>
◦ Displays the enclosed text as subscript.
<sup> ……. </sup>
◦ Displays the enclosed text as superscript.
<font> ……. </font>
◦ Specifies the style of the enclosed text.
◦ Attributes:
color = color name
face = typeface
size = value [1 to 7; 3 is the default]
4/5/2024 38
Cont…
<center> ……. </center>
◦ Centers the enclosed elements horizontally
on the page.
<P align=option> ……. </P>
◦ Used to align a paragraph.
◦ Option can be left, right or center.
4/5/2024 39
Cont…
• <u>...</u>
oTo display the elements with underline
<strike>.. .</strike>
◦ To displayed with strikethrough, which is a thin
line through the text
• <big>...</big>
o element is displayed one font size larger than the
rest of the text surrounding it.
• <small>...</small> element is displayed one
font size smaller
4/5/2024 40
Some Examples
Example 1
<html>
<head>
<title>My First Webpage</title>
</head>
<body text="white" bgcolor=“blue”>
<h1 align="center">My First Webpage</h1>
<p>Welcome to my first web page. I am writing this page
using a text editor and plain old html.</p>
<p>By learning html, I'll be able to create web pages
like....<br>
which I am of course.</p>
</body>
</html>
4/5/2024 41
Example 2
<html>
<head><title>Demonstration of Headings </title></head>
<body text="#FFFFFF" bgcolor="#0000FF">
<h1>This is a first level heading. </h1>
<h2>The second level</h2>
<h3>The third level</h3>
<h4>Fourth level. </h4>
<h5>Fifth level.</h5>
<h6>And, finally, the sixth .</h6>
A small amount of plain non-heading text.
</body>
</html>
4/5/2024 42
Example 3
<html>
<head><title>Paragaph Aligning</title></head>
<body text=white bgcolor=green>
<h3>
<P ALIGN=CENTER> This paragraph will be aligned
at the center. Even as the browser window
size changes, the alignment remains the same. </P>
<P ALIGN=LEFT>This demonstrates left alignment. </P>
<P ALIGN=RIGHT>How about aligning by the right
margin? </P>
</h3>
</body>
</html>
4/5/2024 43
Example 4
<html>
<head><title>Layout Features 1</title></head>
<body text=yellow bgcolor=blue>
<h2> <pre>
begin
if (a > b)
then max := a;
else max := b;
end;
</pre> </h2>
<hr size=8 width=50%>
<hr>
<hr size=20 width="75%" noshade>
</body>
</html> 4/5/2024 44
Example 5
<html>
<head><title>Layout Features 2</title></head>
<body text=yellow bgcolor=blue>
<h3>Extended Quotations</h3>
<blockquote>
<P>This is the first paragraph within
the BLOCKQUOTE environment. </P>
<P>Another paragraph starts here. </P>
We type some text here without explicitly
giving paragraph break.
</blockquote>
</body>
</html>
4/5/2024 45
Example 6
<html>
<head><title> Superscript and Subscript </title></head>
<body text=white bgcolor=blue>
<h1> y = x <sup> 3 </sup> + 2 x <sup> 2 </sup> + 4 </h1>
<br>
<h2> W <sub> total </sub> = x <sup> 2 </sup> - 5 <h2>
</body>
</html>
4/5/2024 46
