Chapter
Two
HTML
February 20, Elias Debelo, Haramaya 1
2024 University
Introduction
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.
February 20, Elias Debelo, Haramaya 2
2024 University
Reading
Assignment
1. Differentiate HTML4 and HTML5
February 20, Elias Debelo, Haramaya 3
2024 University
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 more than100 HTML5 tags. We will divide them into categories and
discuss the important ones in this article.
Not case-sensitive, but make sure to be consistent.
February 20, Elias Debelo, Haramaya 4
2024 University
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
February 20, Elias Debelo, Haramaya 5
2024 University
Basic HTML
Tags
February 20, Elias Debelo, Haramaya 6
2024 University
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.
February 20, Elias Debelo, Haramaya 7
2024 University
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?
February 20, Elias Debelo, Haramaya 8
2024 University
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>
February 20, Elias Debelo, Haramaya 9
2024 University
<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">
February 20, Elias Debelo, Haramaya 1
2024 University 0
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.
February 20, Elias Debelo, Haramaya 1
2024 University 1
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.
February 20, Elias Debelo, Haramaya 1
2024 University 2
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.
February 20, Elias Debelo, Haramaya 1
2024 University 3
Formatting Tags: Italic, Emphasis, Bold,
Underline
Strong,
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.
February 20, Elias Debelo, Haramaya 1
2024 University 4
Tip
s
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!
February 20, Elias Debelo, Haramaya 1
2024 University 5
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:
February 20, Elias Debelo, Haramaya 1
2024 University 6
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"
February 20, Elias Debelo, Haramaya 1
2024 University 7
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
February 20, Elias Debelo, Haramaya 1
2024 University 8
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>
February 20, Elias Debelo, Haramaya 1
2024 University 9
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
February 20, Elias Debelo, Haramaya 2
2024 University 0
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)
February 20, Elias Debelo, Haramaya 2
2024 University 1
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.
TheFebruary
<caption>
20, tag must be inserted
Elias immediately after the <table>
Debelo, Haramaya 2
2024 University 2
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
February 20, Elias Debelo, Haramaya 2
2024 University 3
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.
February 20, Elias Debelo, Haramaya 2
2024 University 4
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;}
February 20, Elias Debelo, Haramaya 2
2024 University 5
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:
February 20, Elias Debelo, Haramaya 2
2024 University 6
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>
February 20, Elias Debelo, Haramaya 2
2024 University 7
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
February 20, Elias Debelo, Haramaya 2
2024 University 8
HTML Forms elements
February 20, Elias Debelo, Haramaya 2
2024 University 9
Cont.
February 20, Elias Debelo, Haramaya 3
2024 University 0
Cont.
The <label> tag defines a label for many form elements.
Input types text, radio, checkbox, submit button,
February 20, Elias Debelo, Haramaya 3
2024 University 1
Cont.
February 20, Elias Debelo, Haramaya 3
2024 University 2
HTML Form Attributes
action="/action_page.php“
Ifthe action attribute is omitted, the action is set to the current page
target="_blank“
method="get“
autocomplete="on“
enctype="multipart/form-data“
February 20, Elias Debelo, Haramaya 3
2024 University 3
Block & Inline HTML Elements
February 20, Elias Debelo, Haramaya 3
2024 University 4
Classes and IDs
February 20, Elias Debelo, Haramaya 3
2024 University 5