2/8/2021

ITC 351
Web Technologies.
Lecture Three

Outline of Instruction
1. Overview of HTML

2. HTML Elements and Tags

3. HTML Document Structure

4. Our First Web Page in HTML

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

1
 2/8/2021

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
document.
– Use entities to represent reserved and special
characters in HTML document
– Specify colors using RGB, HEX, and HSL values
– Produce a working HTML5 document and preview it
in a web browser.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

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.

2
 2/8/2021

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.

HTML Elements and Tags - 1

<tag name> </tag name>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

3
 2/8/2021

HTML Elements and Tags - 2

• An HTML element consists of both the content
and its markup.
• Elements are identified by tags in the text source.
• 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.

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 often referred to
as Containers. e.g <p>some text</p>
• Not all elements have content. These elements
are referred to as Empty elements.
e.g <input type=“text” name=“textbox” />
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

4
 2/8/2021

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
URL.
• The syntax for adding attributes is as follows:
<element attribute-name=“value”>Content</element>
<element 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.

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.

5
 2/8/2021

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.

Basic HTML5 Document Structure

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

6
 2/8/2021

Detailed HTML5 Document Structure

<!DOCTYPE html>
<html lang=“en”>
<head>
<title> The title of the page goes here</title>
<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>
</html>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

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.

7
 2/8/2021

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.

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.

8
 2/8/2021

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.

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.

9
 2/8/2021

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.

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

10
 2/8/2021

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.

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.

11
 2/8/2021

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.
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, 0% is black, 50%
is neither light or dark, 100% is white

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.

12
 2/8/2021

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 charset=“UTF-8” />
</head>
<body>
</body>
</html>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

13
 2/8/2021

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 not really difficult to learn. All you need is a simple
text editor and a web browser and you are gone. 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.

14
 2/8/2021

Practice Session - 2
4. Save the file as firstpage.html on your desktop.
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 the 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.

15
 2/8/2021

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.

16