17-Feb-24

Good Morning !!!

*Silence Hour*
Use this time to
revise your notes
before we begin.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr. 1

ICT233
Web Technologies and
Design.
Lecture Three

1
 17-Feb-24

Today’s Lecture
1.0 2.0
Quick HTML
Overview Elements
of HTML and Tags
5.0
Practice:
Our First
Web Page
in HTML 4.0
3.0
Color
HTML
Coding
Document
and HTML
Structure
Entities
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr. 3

Lecture Objectives
• By the end of the lecture, the student will
be able to:
– Briefly explain HTML.
– Describe HTML Tags, Elements and Attributes.
– Identify and explain the structure of HTML5
documents.
– Specify colors using RGB, HEX, and HSL values.
– Use entities to represent reserved and special
characters in HTML documents.
– Produce a working HTML5 document and
preview it in a web browser of your choice.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

2
 17-Feb-24

Overview of HTML - 1
• HTML stands for HyperText Markup
Language.
• The idea behind HTML was born at the
European Laboratory for High Energy Physics
(CERN) in Geneva, Switzerland, as early as
1989 .
• A year later, the World Wide Web project was
also started there.
• The purpose was to make it easier for
scientists at different universities and
research laboratories to gain access to
research documents of their colleagues .
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Overview of HTML - 2
• An HTML document is simply a text file(may
also contain images, video or audio) that
contains the information you want to publish
and the appropriate markup instructions
indicating how the browser should structure
or present the document.
• Markup elements are made up of a start tag,
such as <p>, and typically, though not always,
an end tag, which is indicated by a forward
slash within the tag, such as </p>.
• The tag pair should fully enclose any content
to be affected by the element, including text
and other HTML markups.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

3
 17-Feb-24

HTML Elements and Tags - 1

<tag name> </tag name>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

HTML Elements and Tags - 2

• An HTML element consists of both the
content and its markup.
• A tag consists of the element name(usually
an abbreviation of a longer descriptive
name) within angle brackets( < > ).
• The element name appears in the opening
or start tag and again in the closing or end
tag preceded by a forward slash(/).

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

4
 17-Feb-24

HTML Elements and Tags - 3

• The tags added around contents are referred
to as the markup.
• It is important to note that an element
consists of both the content and its
markup(the start and end tags).
• Elements that have content are referred to as
Containers. e.g <p>some text</p>
• However, not all elements have content, and
these are referred to as Empty elements.
e.g <input type=“text” name=“textbox” />
<input type=“text” name=“textbox”>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Attributes
• Attributes are instructions that clarify or modify an element.
• Attributes allow us to add extra information to an element.
• The img element for example requires the src (short for
“source”) attribute to provide the location of the image via its
path or URL.
• The syntax for adding attributes is as follows:
<element name attribute-name=“value”>Content</element name>
<element name attribute-name=“value” />

<img src=“myphoto.jpg” alt=“This is my photo” />

<h2 style =“text-align: center; color:#FF0000”>

This is a heading content formatted according to the CSS rules specified using the
style attribute.
</h2>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

5
 17-Feb-24

HTML Comments
• Just as comments are used in programming to
document codes, HTML comments are not
displayed by the browser, but they can help
document your HTML.
• With comments you can place notifications
and reminders in your HTML document.
• The syntax for HTML comments is given
below:
• <!-- Your comment goes here -->
e.g <!-- This is a comment in HTML -->
<!-- Do not display this at the moment
<img src="pic_mountain.jpg" alt="Mountain">
-->

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

HTML Document Structure

• The way a document is marked up with
elements and their attributes is according
to a Document Type Definition(DTD).
• DTD are set of rules that govern the way in
which a document can be marked up.
• The authoritative source for information
about HTML and the HTML DTD is the
World Wide Web Consortium(W3C) at
http://www.w3c.org.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

6
 17-Feb-24

Basic HTML5 Document Structure

<!DOCTYPE html>
<html lang=“en”>
<head>
<title> Title of web page goes here. </title>
<meta name= “viewport” content=
“width=device-width, initial-scale=1.0”>
</head>
<body>
Main content of the web page goes here.
This is what is displayed in the web browser window
</body>
</html>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Detailed HTML5 Document Structure

<!DOCTYPE html>
<html lang=“en”>
<head>
<title> The title of the page goes here</title>
<meta name= “viewport” content= “width=device-width,
initial-scale=1.0”>
<meta charset=“UTF-8”>
<link rel=“stylesheet” type=“text/css” href=“url to CSS file”>
<script type=“text/javascript”>
JavaScript or Jquery codes go here.
</script>
</head>
<body>
Other HTML5 elements and tags are used here within the body
tag to produce the actual content of the web page.
</body>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.
</html>

7
 17-Feb-24

The <!DOCTYPE> Tag

• The Document Type , or doctype for short
is indicated by the <!DOCTYPE> tag in
HTML documents.
• This specifies the rules for the document
language so the browser knows how to
interpret the HTML code and display it
properly.

Web Technologies Slides by: Maxwell Dorgbefu Jnr.

The <html>…</html> Tag

• The <html> </html> tags surround the
entire HTML document and its referred to
as the root element.
• The root element is the container element
for all other elements in the document
• The opening tag ; <html> tells the browser
that, whatever content that comes after it
should be treated as an HTML content until
the browser meets the closing tag </html>.

Web Technologies Slides by: Maxwell Dorgbefu Jnr.

8
 17-Feb-24

The <head> </head> Tags

• The <head> </head> tags specify the
header segment of any HTML document.
• The <title> </title> tags are used within
the <head> </head> tags to specify the
title of a given web page.
• Other tags such as <meta>, <link>, <style>
and <script> are also used within the
<head> tag of an HTML document.

Web Technologies Slides by: Maxwell Dorgbefu Jnr.

The <body>…</body> Tag

• The <body>…</body> tag of a web page play
an important role with regards to the page’s
actual content .
• The body element contains information about
the page’s background color, the background
image, as well as the text and link colors, and
all other items that are displayed on a web
page.
• If the body element is left blank, web
browsers will revert to their default settings.
Web Technologies Slides by: Maxwell Dorgbefu Jnr.

9
 17-Feb-24

Creating Syntactically Correct Code

• The following six(6) rules are worth following
in creating syntactically correct codes:
1. Documents must be well-formed.
2. All tags must nest properly and not overlap. e.g
<p><b> bold text</b></p>
3. Use all lowercase for element names. e.g: <p>
4. Always use closing tags. e.g <p>some text</p>
5. Empty elements are marked with a closing
forward slash: e.g <br />
6. Attribute values must be contained in quotation
marks: e.g <img src=“myselfie.jpg” />
Web Technologies Slides by: Maxwell Dorgbefu Jnr.

Color Codes - 1
• Colors are set using color names, HEX,
RGB, HSL, RGBA, and HSLA codes.
• There are several resources available on
the Internet that chart colors and their
hexadecimal values.
• Check this site for some details:
• https://www.w3schools.com/Html/html_colors.asp

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

10
 17-Feb-24

RGB COLOR HEXADECIMAL VALUE

White #FFFFFF
Black #000000
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
Aquamarine #70DB93
Baker’s Chocolate #5C3317
Violet #9F5F9F
Brass #B5A642
Copper #B87333
Pink #FF6EC7
Orange #FF7F00

Specifying Color using RGB Values

• In HTML, a color can be specified as an RGB value,
using this formula: rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the
intensity of the color between 0 and 255.
• For example, rgb(0, 0, 255) is displayed as blue,
because blue is set to its highest value (255) and
the others are set to 0.
• To display the color black, all color parameters
must be set to 0, like this: rgb(0, 0, 0).
• To display the color white, all color parameters
must be set to 255, like this: rgb(255, 255, 255).

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

11
 17-Feb-24

Specifying Color using Hex Values

• In HTML, a color can be specified using a

hexadecimal value in the form: #rrggbb
• Where rr (red), gg (green) and bb (blue) are
hexadecimal values between 00 and ff (same
as decimal 0-255).
• For example, #ff0000 is displayed as red,
because red is set to its highest value (ff) and
the others are set to the lowest value (00).

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Specifying Color using HSL Values

• In HTML, a color can be specified using hue,
saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to
360. e.g. 0 is red, 120 is green, and 240 is
blue.
• Saturation is a percentage value, 0% means a
shade of gray, and 100% is the full color.
• Lightness is also a percentage value, 0% is
black, 50% is neither light nor dark, 100% is
white.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

12
 17-Feb-24

Specifying Color using names and Codes

<style>
div{
background-color: #9d00ff;
color: white;
}
span{
background-color: hsl(277, 100%, 50%);
color: rgb(255,255,255);
}

</style>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

HTML Entities
• HTML entities define a way of representing
reserved HTML characters and special
characters not present on your keyboard.
• For instance if you use the less than (<) or
greater than (>) signs in your text, the
browser might mix them with tags.
• Entities in HTML documents are represented
as: &entity_name; or &#entity_number ;
• E.g &lt; or &#60; for the less than(<) symbol.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

13
 17-Feb-24

HTML Entities
Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

Source: http://www.w3schools.com/html/html_entities.asp
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Creating a Web Page using HTML- 1

1. Choose a text editor(e.g notepad, notepad++, sublime Text).
2. Launch the chosen text editor.
3. In the chosen text editor’s working area, type the required elements
of a basic HTML document as in the example below.

<!DOCTYPE html>
<html lang=“en”>
<head>
<title> My First Web Page</title>
<meta name= “viewport” content= “width=device-width,
initial-scale=1.0”>
<meta charset=“UTF-8”>
</head>
<body>
</body>
</html>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

14
 17-Feb-24

Creating a Web Page using HTML- 2

4. Type a text content of your choice within the <body>
</body> tags of the document structure.
5. From the File menu of your chosen text editor, click on Save
As and choose a suitable location for saving your file.
6. In the File name: text box enter “filename.html” and in the
Save as type: combo box, choose All Files if you used
Notepad or Hyper Text Markup Language
file(*.html;*.htm;*.shtml;*.shtm;*.xhtml;*.hta) if you used notepad++.
7. Click on the Save button to return to the window of your
chosen text editor.
8. Navigate to the location where you saved your
“filename.html” ; it should appear in the icon of the default
web browser on your PC with the name “filename” .
9. Double click on it to preview your page in the browser.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Practice Session - 1
1. Launch a text editor of your choice.
2. Type the required HTML document structure.
3. Type the text below in the body segment of
the document structure produced in step 2.

Hi Pals!. HTML is really easy to learn. All you need is a simple

text editor and a web browser and you are good to go. The
most important thing here is to learn and understand the
various tags that are used within the body segment of the
entire document structure. Any way, thanks to my Web
Technologies lecturer!

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

15
 17-Feb-24

Practice Session - 2
4. Save the file as firstpage.html a folder you
created earlier.
5. Double click on the ‘firstpage.html’ to
preview it in your default browser.
6. Go back to the file ‘firstpage.html’ and
right-click on it and then select edit
with…..and choose the text editor you
used.
7. Make changes to the file, save it and
preview the edited version in your chosen
browser.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Focus Questions?
1. Differentiate between HTML tags and
HTML elements with examples.
2. Produce a sample HTML page that shows
your curriculum vitae using a text editor
of your choice and preview the file in a
browser of your choice.
3. Find out and read on the evolution of
HTML from HTML 1.1 to HTML5.
4. List and explain the new elements in
HTML 5.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

16
 17-Feb-24

Our Next Lecture …

1. Formatting HTML documents.

2. Lists in HTML.

3. Creating Links in HTML.

4. Including Multimedia in HTML

documents.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

17