Web Programming
Chapter Two
HTML
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 1
Introduction
1. Introduction to HTML
What is HTML?
▪ It is just a standardized system of tagging a text file
▪ A text file that is "tagged" following the "HTML standard" is called
an HTML document
HTML versions
HTML has 5 versions so far, ranging from HTML 1.0 to the most
recent, HTML5.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 2
Introduction Cont’d…
HTML stands for HyperText Markup Language.
It is a standard markup language for web page creation. It allows the
creation and structure of sections, paragraphs, and links using HTML
elements (the building blocks of a web page) such as tags and attributes.
HTML has a lot of use cases, namely:
Web development. Developers use HTML code to design how a
browser displays web page elements, such as text, hyperlinks, and
media files.
Internet navigation. Users can easily navigate and insert links
between related pages and websites as HTML is heavily used to embed
hyperlinks.
Web documentation. HTML makes it possible to organize and
format documents, similarly to Microsoft Word.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 3
Introduction Cont’d…
DOCTYPE
▪ DOCTYPE is not an HTML tag. It is simply an instruction for your
browser to tell which version of HTML your document is using.
▪ DOCTYPE declarations:
● For HTML5, use this only: <!DOCTYPE html>
● For HTML 4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" [Link]
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 4
Why we need to focus on HTML5?
Reasons:
▪ Browsers understand earlier versions anyways
▪ HTML5 is simplified
▪ HTML5 has better error handling ways
▪ HTML5 includes multimedia elements, which means that browsers
that support HTML 5 can also play video and audio.
▪ Includes semantic content by including <header> <footer>,
<article>, <section> and <figure>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 5
Why should you learn HTML?(Purpose of
learning HTML)
▪ The primary goal of learning HTML is to understand how to properly
tag your text documents so that the browser understands what you are
attempting to accomplish.
● For example, if you want to include a title in a text document, how
could you tell that it’s a title? Or, if you want to include a paragraph, how
do you tell it’s a paragraph, and so on.
▪ To accomplish this, simply adhere to a standard that browsers can
comprehend.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 6
Basic rules of HTML tags
What do HTML tags do?
Tags provide web browsers with instructions about the type of the
texts included in the html document.
HTML tags are hidden keywords within a web page that specify how
your browser should format and display the content.
For example:
<h1> h1 means this text is a header </h1>
<p> p means this text is a paragraph </p>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 7
Basic HTML Tags
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 8
Basic HTML Tags: DOCTYPE, html, body
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements.
You should always include the lang attribute inside the <html> tag,
to declare the language of the Web page. This is meant to assist
search engines and browsers.
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML
document, such as headings, paragraphs, images, hyperlinks, tables,
lists, etc.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 9
What are rules of HTML tags?
1. Tags are always enclosed in angle brackets: < >
Ex: look how this paragraph tag is enclosed with angle bracket: <p>
2. Tags usually come in pairs: An opening tag and a closing tag.
Ex. Paragraph tag .
<p>
Content of the <b>paragraph</b> goes in between the opening and the
closing tag.
</p>
The opening paragraph (<p>) tag indicates where the paragraph starts,
and the closing tag (</p>) shows where it ends
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 10
What are rules of HTML tags? Cont’d…
3. A few tags are called non-container tags.
This means they don't have any content.
There is no need for them to have a closing tag because they do not
contain anything or actually mark anything up. There is no need for
them to have closing tag. Ex:
<br>
<hr>
<img>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 11
Cont’d….
4. Tags are comprised of elements and attributes.
Examples:
Image tag with width attribute
<img src="../[Link]" width="500px" height="400px" alt="Apple's logo">
The image tag (<img>) is the element and width and src in it are the attributes of
the element.
Anchor tag with hypertext reference:
<a href="[Link] Apple Website </a>
It is important to note that no attributes are included between the opening and
closing tags. They are only included in the opening tag.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 12
The basic skeleton of every web page looks like
this:
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 13
Cont’d…
The first tag in any HTML file is the <html> tag. This tells web
browsers that the document is an HTML file.
The second tag is a <head> tag. Information between the <head>
tags, called meta information, don't appear in the browser window
but are still important. The most important meta information in the
HEAD tag is the <title> tag. Generally, the title should reflect the
contents of the page
The true content of your web page is included inside the <body> tag
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 14
Simple Questions?
1. How does the browser knows the webpage is HTML?
2. How does the search engine knows language of your
webpage?
3. What is the title of your webpage?
4. Who is the author of the webpage?
5. What are search keywords for your pages?
6. What is character set or encoding of your website?
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 15
How to write HTML code?
Text Editors
These are installed on your computer and work without an internet connection.
Visual Studio Code (VS Code)
Sublime Text
Atom
Notepad++ and others.
Recommendation :Using Visual Studio Code (VS Code) is highly recommended for
HTML, CSS, and JavaScript development because it combines simplicity, power, and
flexibility, Extensions for Everything — making it ideal for beginners and
professionals.
You can download the official download link for Visual Studio Code here:
[Link]
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 16
How to write HTML code in VSC
The following are the most common tasks you do using Visual
Studio Code ▪ Open existing folder or file
▪ Create a new folder in a specific location
▪ Create a new file in a specific location
▪ Make edits and save
▪ Rename files and/or folders
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 17
Steps to create an HTML page (.html)
Step 1, always create a folder for every project you work on
● To do this, go to your favorite working location and create a folder - Give the
folder a proper name that relates with your project
Step 2, open the folder using your editor (VSC)
● On the Visual Studio menu bar, choose File > Open > Folder, and then browse to
the code location
● You can also go to the folder you created right-click on it and select “open in
Visual Studio Code”
Step 3, create an HTML document
● An HTML document is a simple text file with a .html extension. Then, save that
file within your working folder
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 18
Steps to create an HTML page cont’d…
Step 4, define the DOCTYPE
● The first line of any HTML document starts by defining the HTML doctype. Because we are writing
the HTML5 standard, we simply include the following line of code at the top of the document to define the
doctype.
<!DOCTYPE html>
Step 5: Include the initial HTML5 boilerplate
● What is an HTML boilerplate?
• HTML boilerplate is a standard template code used when building HTML pages. As an
HTML developer, you will use this basic structure of an HTML document when
building any HTML page.
• HTML boilerplate includes the following HTML tags: <html>, <head> and <body>
tags. - Please make sure all of them are closed properly
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 19
Steps to create an HTML page cont’d…
● How do we add HTML boilerplate in VSC?
One way is by just typing “html” in your .html file, and selecting html5 from the list
Emmet suggests
The other way is by simply striking the “!” key from your keyboard and press “enter” key at
the same time
Step 6: Give a title for your HTML document
● This is defined with in the <title> tag under the <head> section. At this point, you would
have a starter HTML document ready
Step 7: Start including contents into your HTML document
● The main content of your HTML document is included with in the <body> tag.
• Only the contents that you write within the <body> tag will be displayed on your browser.
• It can contain text content, paragraphs, headings, images, tables, links, videos, etc.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 20
Types of Tags
1. Basic
2. Formatting
3. Forms and Inputs
4. Frames
5. Images
6. Audio / Video
7. Links
8. Lists
9. Tables
10. Styles and Semantics
11. Meta Info
12. Programming
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 21
HTML5 Tags
HTML tags are the keywords on a web page that define how your web browser
must format and display your web page.
Almost all tags contain two parts, an opening, and a closing tag. For example,
<html> is the opening tag and </html> is the closing tag. Note that the closing
tag has the same text as the opening tag, but has an additional forward-slash ( / )
character.
There are a total of 100 HTML tags. We will divide them into categories and
discuss the important ones in this article.
Not case-sensitive, but make sure to be consistent.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 22
Most commonly used HTML5 tags
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 23
Most commonly used HTML5 tags
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 24
Basic HTML Tags: head, title, meta
The <head> element is a container for metadata (data about data)
and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not
displayed.
Metadata typically define the document title, character set, styles,
scripts, and other meta information.
The following elements can go inside the <head> element:
<title>, <style>, <base>, <link>, <meta>, <script>, <noscript>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 25
<meta>
Add the following inside your head
<meta name="author" content="John Doe">
<meta name="keywords" content="HTML, CSS">
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 26
Basic HTML Tags: comment & Paragraph
HTML comments are not displayed in the browser, but they can help
document your HTML source code.
<!-- Hello Comment -->
A paragraph always starts on a new line, and is usually a block of
text.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically
add some white space (a margin) before and after a paragraph.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 27
Basic HTML Tags: Heading
HTML headings are titles or subtitles that you want to display on a
webpage.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading.
Note: Browsers automatically add some white space (a margin)
before and after a heading.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 28
Headings Are Important
Search engines use the headings to index the structure and content
of your web pages.
Users often skim a page by its headings. It is important to use
headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2>
headings, then the less important <h3>, and so on.
Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 29
Formatting Tags: Italic, Emphasis, Bold, Strong,
Underline
The <i> tag defines a part of text in an alternate voice or mood. The
content inside is typically displayed in italic.
The <i> tag is often used to indicate a technical term, a phrase from
another language, a thought, a ship name, etc.
The <em> tag is used to define emphasized text. The content inside
is typically displayed in italic.
The <b> tag specifies bold text without any extra importance.
The <strong> tag is used to define text with strong importance. The
content inside is typically displayed in bold.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 30
Tips
A screen reader will pronounce the words in <em> with an
emphasis, using verbal stress.
According to the HTML5 specification, the <b> tag should be used
as a LAST resort when no other tag is more appropriate.
The <u> tag represents some text that is unarticulated and styled
differently from normal text, such as misspelled words or proper
names in Chinese text
Avoid using the <u> element where it could be confused for a
hyperlink!
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 31
HTML Tags with no content
Some HTML elements have no content. These elements are
called empty elements. Empty elements do not have an end
tag!
Use the <br> tag to enter line breaks, not to add space
between paragraphs.
Use the <hr> tag to define thematic changes in the content:
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 32
HTML Attributes
HTML attributes provide additional information about HTML
elements.
An HTML element is defined by a start tag, some content, and an
end tag.
1. All HTML elements can have attributes
2. Attributes provide additional information about elements
3. Attributes are always specified in the start tag
4. Attributes usually come in name/value pairs
like: name="value"
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 33
HTML Attributes
The style attribute is used to add styles to an element, such as color,
font, size, and more.
You should always include the lang attribute inside the <html> tag,
to declare the language of the Web page. This is meant to assist
search engines and browsers.
The title attribute defines some extra information about an element.
Image attribute (<img>)
Src, Alt, height, width or styling
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 34
Formatting Tags: Link
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn
into a little hand.
Note: A link does not have to be text. A link can be an image or any
other HTML element!
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 35
Formatting Tags: Link
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as
it was clicked
_blank - Opens the document in a new window or tab
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 36
Image Background
Element Background
<h1 style="background-image: url(');">
Or using style, in head tag
Body Background
<body style="background-image: url(');">
Note:
Avoid Self Repeating
make sure the entire element is always covered
cover the entire element (or making it stretched)
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 37
HTML Table
HTML tables allow web developers to arrange data into rows and
columns.
A table in HTML consists of table cells inside rows and columns.
Table <table>, table row <tr>, table data or cell <td>,Table Head <th>,
Table caption <caption>, Table head <thead>, table body <tbody>,
table footer <tfoot>
Table Cell can contain all sorts of HTML elements.
Make sure to have equal number cell along the rows of the same table
<th> is by default bold and centered.
The <caption> tag must be inserted immediately after the <table> tag.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 38
HTML Table Properties
Table Border: table, th, td { border: 1px solid black;}
Collapsed Table Border table, th, td { border: 1px solid black; border-
collapse:collapse;}
Border Radius th, td {
border: 1px solid black;
border-radius: 10px;
}
Border Style th, td {
border-style: dotted;
}
Border Color
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 39
Table rowspan & colspan
HTML tables can have cells that span over multiple rows and/or columns.
The value of the colspan attribute represents the number of columns to span
The value of the rowspan attribute represents the number of rows to span.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 40
Table Styling, few of them
Horizontal Divider
Collapsing and adding bottom lines for each rows
border-bottom: 1px solid #ddd;
Hoverable Table
Highlight rows on cursor hover
tr:hover {background-color: #D6EEEE;}
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 41
HTML Lists (Ordered/Unordered)
HTML lists allow web developers to group a set of
related items in lists.
Unordered List - An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.
Ordered List - An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
Description List - A description list is a list of terms, with a
description of each term.
The <dl> tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term:
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 42
HTML iFrame (internal frame)
An HTML iframe is used to display a web page within a
web page.
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document
within the current HTML document.
<iframe src="url" title="description"></iframe>
height and width properties
border property
Targeting from link. <a href=“” target=“name_of_iframe”>click</a>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 43
HTML Forms
An HTML form is used to collect user input. The user input is
most often sent to a server for processing.
The HTML <form> element is used to create an HTML form for
user input.
The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons,
submit buttons, etc.
The HTML <input> element is the most used form element
An <input> element can be displayed in many ways,
depending on the type attribute
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 44
HTML Forms elements
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 45
Cont.
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 46
Cont.
The <label> tag defines a label for many form elements.
Input types text, radio, checkbox, submit button,
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 47
HTML Form Attributes
action="/action_page.php“
If the action attribute is omitted, the action is set to the current page
target="_blank“
method="get“
autocomplete="on“
enctype="multipart/form-data“
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 48
Block & Inline HTML Elements
1. Block-Level Elements
Definition: Block elements start on a new line and take up the full width available
(stretch across the container).
Always begin on a new line.
Can contain other block or inline elements.
Useful for defining structure and layout.
Examples:<div>, <p>, <h1>–<h6>, <section>, <article>, <header>, <footer>, <ul>,
<ol>, <li>, <table>, <form>
Example Code:
<div>
<h2>Title</h2>
<p>This is a paragraph inside a block element.</p>
</div>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 49
2. Inline Elements
Definition: Inline elements do not start on a new line and only take
up as much width as needed.
Flow within a line.
Cannot contain block elements inside them (only text or other
inline elements).
Commonly used for styling text or linking.
Common Examples:<span>, <a>, <b>, <i>, <strong>, <em>, <img>,
<label>, <input>
Example Code:
<p>This is an <strong>inline</strong> element example.</p>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 50
Classes and IDs
Classes and IDs are attributes used to identify and style HTML elements
— mainly with CSS or JavaScript.
Class Attribute: Used for Grouping multiple elements for the same style
or behavior.
Syntax: class="classname“
Example : <div class="highlight">This box also uses the same class.</div>
ID Attribute Used for Uniquely identifying one specific element on a
page.
Syntax: id="uniqueName"
Can be used on: Only one element (must be unique).
Example: <h1 id="main-title">Welcome to My Page</h1>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 51
Embed vs Video and Audio Tags
<embed> Tag: Used to embed external content (like videos, PDFs,
Flash, or other media types) into a web page.
<embed src="movie.mp4" type="video/mp4" width="400"
height="300">
<video> Tag: Specifically designed to play video files (HTML5
feature).
<video src="movie.mp4" width="400" controls></video>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 52
HTML Graphics
HTML provides ways to draw graphics, display charts, and visualize
data directly on a web page using special elements and libraries.
The main tools are <canvas>, <svg>
<canvas> Element: <canvas id="myCanvas" width="300"
height="200" style="border:1px solid #000;"></canvas>
<svg> (Scalable Vector Graphics):
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="green" stroke-width="4"
fill="yellow" />
</svg>
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 53
THE END!
October 14, 2025 Leweyehu Yirsaw, Mekdela Amba University 54