Scribd
Upload
2 views

2. Introduction to HTML

This document provides an overview of HTML, including its definition, history, and key features such as tags and their types. It outlines the structure of an HTML document, the importance of the <HEAD> and <BODY> sections, and introduces various HTML elements and special characters. Additionally, it covers the evolution of HTML through different versions and includes coursework instructions for creating a webpage.

Uploaded by

romanojonga781
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

2. Introduction to HTML

This document provides an overview of HTML, including its definition, history, and key features such as tags and their types. It outlines the structure of an HTML document, the importance of the <HEAD> and <BODY> sections, and introduces various HTML elements and special characters. Additionally, it covers the evolution of HTML through different versions and includes coursework instructions for creating a webpage.

Uploaded by

romanojonga781
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

HTML

(Unit 2)
Ogwal-Awio Kenneth
[email protected]
2025
Unit learning outcomes
• By the end of this unit, students should be able to:
 Explain HTML as programming language
 Describe the timeline of HTML
 Explain the use of text editors
 Explain the features of HTML tags
 Explain the types of HTML tags
 Explain the concept of nested elements

HTML Basics - Ogwal-Awio K, 2025 22


What is HTML?
• HTML is a computer programming language for creating Web pages.
 In full, HTML stands for Hyper Text Markup Language

• HTML sourcecode is written using command elements called tags


 HTML tags tell the browser how to display the content
 They achieve this by labelling sections of content, such as
"heading", "paragraph", "table", and so on

• Invented at CERN (European Organization for Nuclear Research) in


Geneva by Tim Berners Lee in 1990 – 1991.
HTML Basics - Ogwal-Awio K, 2025 33
Prerequisites for HTML programming
• Two things are needed: a web browser and a text editor.
 A web browser – an application software used to test whether the
web page is running as programmed.
o Examples include Google Chrome, Mozilla Firefox, Safari,
Microsoft Edge, etc.

 A text editor – a software environment which allows a website developer


to type tags and content which form web pages.
oExamples include Notepad, TextEdit, Notepad++, Gedit, Brackets,
TextMate, Visual Studio Code, Sublime Text, Atom.io, etc.

 Notepad comes preinstalled with Windows OS, and TextEdit with Mac OS.
HTML Basics to
Introduction - Ogwal-Awio K, 2025K.
CSS - Ogwal-Awio 4
12
Key features of HTML tags
• Each tag is surrounded by angle brackets
• Tags are composed of clear text
• Tags are case insensitive
• It ignores white space
• It is platform independent
• Each tag can be nested inside other tags

HTML Basics - Ogwal-Awio K, 2025 13


HTML Tags…
• An HTML doc./webpage begins with <HTML> and ends with </HTML>
 The invisible components of the HTML document (to the user) is placed
between <HEAD> and </HEAD> tags.
 The visible components is placed between <BODY> and </BODY>.
• HTML tags mostly come in pairs
 The first tag is called the start tag, and the second tag called the end tag
 The end tag is written like the start tag, but with a forward slash
inserted before the tag name.

 The document type declaration (DTD), <!DOCTYPE html>, that is


placed before the opening HTML tag ensures web pages are parsed
the same way by differentHTML
web browsers.
Basics - Ogwal-Awio K, 2025 14
HTML Head vs Body Sections
• The HTML <HEAD> element is a container for HTML metadata – title,
link, styles, scripting, meta, etc.
 HTML metadata is data about the HTML document.
oIn the context of websites, meta data refers to data that is primarily
used by search engines
 HTML metadata is not displayed.

• The <BODY> element consist all the content that the user will view on
the web browser.

HTML Basics - Ogwal-Awio K, 2025 15


The <TITLE> Tag
• The <TITLE> tag is used to define the title of a website.
 The title content text is displayed in the web browser’s title bar.

• The title of a web page also helps determine its ranking by certain
search engines
 The title text for a webpage should be chosen carefully, contextually.

 The title will also appear on Favorites lists, History lists, and Bookmark
lists to identify your page

HTML Basics - Ogwal-Awio K, 2025 8


Structure of a Web Page
• All Web pages share a common <HTML>

structure <HEAD>
<TITLE> Example </TITLE>
• All Web pages should contain a </HEAD>
pair of <HTML>, <HEAD>, <BODY>
<TITLE>, and <BODY> tags This is where you would include the text and
images on your Web page.
</BODY>
</HTML>

HTML Basics - Ogwal-Awio K, 2025 9


Types of tags
1. Closed ended tags – are tags that require closing tags.
 Also called container tags
<name> stuff </name>

2. Open tags – are tags which do not require a closing tag.


<name>

3. Comments – are texts that describe the action to be taken by a tag


or snippet, and which not parsed by the computer.
< ! - - comment text -- >
HTML Basics - Ogwal-Awio K, 2025 18
Closed ended tags – HTML Paragraphs
• HTML paragraphs are defined with the <P>tag:
 Example
<P>
This is a paragraph.
</P>

<P>This is another paragraph.</P>

 Although the end ended tags are formally optional, many browsers will
mess up the formatting of the table if you omit the end tags.
HTML Basics - Ogwal-Awio K, 2025 20
Open tags – HTML Horizontal Rule <HR>
• The <BR> enforces display of subsequent text on a new line.

• The <HR> tag is an empty element that defines a thematic break in an


HTML page, and is displayed as a horizontal rule.
 It is used to separate content in an HTML page.

HTML Basics - Ogwal-Awio K, 2025 21


HTML Headings
• HTML headings are defined with the <H1> to <H6> tags.
 <H1> defines the most important heading.
 <H6> defines the least important heading

 Search engines use these headings to index the structure and content
of web pages.

• Examples:
<H1>Lira University</H1>
<H2>Faculty of Computing and Information Sciences</H2>
<H3>P.O Box 1035, Lira - Uganda</H3>

• Headings are automatically spaced from the body text.


HTML Basics - Ogwal-Awio K, 2025 30
HTML Headings…
• Headings render text as a heading, and size of that heading depends
on the level of heading selected.
<H1>Heading 1 level text</H1>
<H2>Heading 2 level text</H2>
<H3>Heading 3 level text</H3>
<H4>Heading 4 level text</H4>
<H5>Heading 5 level text</H5>
<H6>Heading 6 level text</H6>
HTML Basics - Ogwal-Awio K, 2025 31
Example:
Type the following source code into NotePad text editor:
HTML tags vs HTML elements
• An HTML tag is just opening or the closing command entity.
 Tags are used to mark up the start and end of an HTML element
 For example: <P> and </P> are each a tag

• An HTML element encompasses opening tag, closing tag, and content.


 For example: <P>This is the content</P> – this complete thing is called an
HTML element

HTML Basics - Ogwal-Awio K, 2025 24


Empty HTML tags
• HTML elements with no content are called empty
elements.
 Usually closed ended tags.

• Example:
 <BR>
 <HR>

• Empty elements can be “closed”, e.g. <BR />.


 However, from HTML5 empty HTML elements may not be
closed.
HTML Basics - Ogwal-Awio K, 2025 25
Nested HTML Elements
• Nested HTML elements refer to HTML tags that contain other HTML
tags.
• Examples:
 Inside the <HTML> tags are the <BODY> tags.
 Inside the <BODY> tags there are other tags: <TABLE>, <H1>, <P>, etc.
 Inside <P> tags is the <BR> tag
 Etc.

HTML Basics - Ogwal-Awio K, 2025 23


HTML Special Characters
• The escape character entity is used so that special characters can
be displayed.
 For example, to display < and >, the escape symbol(&) is
required so that the browser doesn't misinterpret the code.

• Displaying a special character includes an ampersand(&), the


entity name, and a semicolon(;).

HTML
HTMLAttributes
Basics - Ogwal-Awio
- Ogwal-Awio
K,Kenneth
2025 33
HTML Special Characters…
• Copyright (©) • Greater than (>)
o&copy; o&gt;
• Quotation • Less than (<)
mark (“) o&lt;
o&quot;
• Space
o &nbsp;
• Ampersand (&)
o&amp;
HTML
HTMLAttributes
Basics - Ogwal-Awio
- Ogwal-Awio
K,Kenneth
2025 34
HTML Accent Marks
• Accent marks in HTML also use the escape symbol.
• Like the special characters accent marks start off with an ampersand
& and then is followed by a letter.
 If the letter is uppercase then the symbol is going to be uppercase, and
 If the symbol is lowercase then the symbol is going to be lowercase.

HTML
HTMLAttributes
Basics - Ogwal-Awio
- Ogwal-Awio
K,Kenneth
2025 35
HTML Accent Marks
mbol HTML Code Symbol HTML Code Symbol HTML Code Symbol HTML Code

à &agrave; á &aacute; â &acirc; ã &atilde;

ä &auml; å &aring; ç &ccedil; è &egrave;

é &eacute; ê &ecirc; ë &euml; ì &igrave;

í &iacute; î &icirc; ï &iuml; ñ &ntilde;

ò &ograve; ó &oacute; ô &ocirc; õ &otilde;

ö &ouml; ø &oslash; ù &ugrave; ú &uacute;

û &ucirc; ü &uuml;

HTML
HTMLAttributes
Basics - Ogwal-Awio
- Ogwal-Awio
K,Kenneth
2025 36
HTML timeline
Version Year
HTML (i.e. Original HTML) 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

HTML Basics - Ogwal-Awio K, 2025 11


24
HTML timeline…
• HTML 1.0 – the original HTML version
 Structuring elements – adding structure to the content on web pages. E.g
headings, lists, paragraphs, and images.
 Simplicity – it didn’t have styling options or the ability to control how content
would display in a web browser. E.g. lacked support for tables.
 Limited font support – minimal scope for changing the text style or size.
• HTML 2.0 – released in 1995
 Standardization of HTML – establishment of common rules and regulations
for web browsers to follow.
 Forms – allowing users to input data on web pages. Initially only text boxes
and buttons.
 Tables – the <table> tag for creating tabular data on web pages, contributing
to better organization of data.
HTML Basics - Ogwal-Awio K, 2025 11
25
HTML timeline…
• HTML3.2 – developed in 1997.
 Upgraded Form Elements – better ways to create interactive forms on
websites.
 CSS Support – this helped developers improve the look of web pages by
styling and customizing HTML elements.
 Enhanced Image Features – better control over image size, alignment, and
text descriptions.
 Extended Character Set – expanded the available characters for web pages.
E.g. special symbols and international characters for a more diverse
presentation of the content.

HTML Basics - Ogwal-Awio K, 2025 11


26
HTML timeline…
• HTML 4.01 – released in 1999
 CSS Linking – CSS files linked and included in each HTML page using the <link> tag.
 More new tags – this enhanced the presentability of the content. E.g. “<fieldset>”,
“<header>”, “<footer>”, and “<legend>”.
 Table Enhancement - made tables more powerful by making it easier to create
more complicated and interesting tables. Introduced attributes such as ‘colspan’
and ‘rowspan’ to make cells in a table span across multiple columns or rows.
• XHTML 1.0 - released in 2000
 stands for Extensible HyperText Markup Language 1.0.
 Strict Standards and Compatibility – a stricter version with more stringent rules
for elements, attributes, and syntax. A common standard was created for web
pages. This reduced the scope for incompatibility between browsers.
 Compatibility with XML – offered compatibility with XML tools.
HTML Basics - Ogwal-Awio K, 2025 11
27
HTML timeline…
• HTML5 – initial public draft actually released in 2008 by WHATWG, but it
officially became a W3C recommendation on October 28, 2014.
 Key new features and tags added include:
o New Form Elements, such as <input type=”email”> and <input
type=”password”>.
o Audio Tag, <audio> tag, which allows to embed audio content directly into
web pages.
o Semantic Tags – also known as structural tags, provide organization and
structure to HTML pages as well as enhance the accessibility and search
engine optimization of the webpage. Semantic tags introduced include
<figcaption>, <header>, <footer>, etc.
o Section Tag <section> defines a distinct section within an HTML page. This
helps in organizing and delineating content, thereby providing logical divisions
within the webpage.
HTML Basics - Ogwal-Awio K, 2025 11
28
HTML v5 new tags
• The <FOOTER> tag is one of the new tags in HTML v5
 The tag defines the footer of a document or a section.

• Others include:
• AUDIO • EMAIL • SECTION
• VIDEO • FIGCAPTION • TIME
• ARTICLE • FIGURE • CANVAS
• ASIDE • KEYGEN • MAIN
• AUTOFOCUS • MARK • ARTICLE
• CANVAS • METER • ETC.
• DETAILS • NAV
• DATALIST • PROGRESS
HTML Basics - Ogwal-Awio K, 2025 29
Something to keep you busy
• Read about:
1. HTML validator
2. The <BLOCKQUOTE> tag – used to describe long

HTML Basics - Ogwal-Awio K, 2025 38


30
Individual Coursework 1
Write a webpage that displays your Curriculum Vitae.

Deadline:
Submit your work to [email protected] latest at 2359 hours on Sunday 2nd
March 2025.

HTML Basics - Ogwal-Awio K, 2025 31


Thank You

HTML Basics - Ogwal-Awio K, 2025 33

You might also like