Web Design and Development Lesson 3
Lesson 3: HTML Introduction
Lesson 3: HTML Introduction ....................................................................................................................... 1
3.1 Definition and Brief Introduction ................................................................................................ 2
3.2 Basic Syntax and Text Formatting................................................................................................ 2
3.2.1 HTML Example ...................................................................................................................... 2
3.2.2 HTML Page structure............................................................................................................. 2
3.2.3 Web Browser......................................................................................................................... 3
3.2.4 HTML Tags ............................................................................................................................. 3
3.2.5 HTML Editor .......................................................................................................................... 3
3.2.6 HTML Formatting .................................................................................................................. 4
3.3 HTML Images ................................................................................................................................ 4
3.4 HTML Links.................................................................................................................................... 5
3.5 HTML Lists ..................................................................................................................................... 5
3.6 HTML Tables ................................................................................................................................. 6
Lesson 3 Discussion Session ..................................................................................................................... 7
Compiled by: Karari E.K email: cats.mwalimu@gmail.com 1
Web Design and Development Lesson 3
3.1 Definition and Brief Introduction
• HTML is a language for describing web pages. It stands for Hyper Text Markup Language
• HTML is a markup language with a set of markup tags that describe document content.
• HTML documents contain HTML tags and plain text. HTML documents are also called web
pages.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers. All you need to do to use HTML is to learn what type of markup to use to
get the results you want.
3.2 Basic Syntax and Text Formatting
HTML tags are keywords (tag names) surrounded by angle brackets like <html>.
HTML tags normally come in pairs like <b> and </b> ; the first tag in a pair is the start tag, and
the second tag is the end tag.
The end tag is written like the start tag, with a forward slash before the tag name.
Start and end tags are also called opening tags and closing tags.
3.2.1 HTML Example
• The DOCTYPE declaration defines the
document type.
• The text between <html> and </html>
describes the web page.
• The text between <body> and </body> is
the visible page content.
• The text between <h1> and </h1> is
displayed as a heading.
• The text between <p> and</p> is displayed
as a paragraph.
3.2.2 HTML Page structure
Compiled by: Karari E.K email: cats.mwalimu@gmail.com 2
Web Design and Development Lesson 3
3.2.3 Web Browser
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly. A browser does not display the HTML tags, but uses them to determine
how to display the document.
3.2.4 HTML Tags
For more HTML tags: https://www.w3schools.com/tags/default.asp
3.2.5 HTML Editor
HTML can be edited by using a professional HTML editor like:
Sublime Text
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
However, for learning HTML I can recommend a text editor like: Notepad++
Compiled by: Karari E.K email: cats.mwalimu@gmail.com 3
Web Design and Development Lesson 3
3.2.6 HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. There are many
formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There
are almost 14 options available that how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
Physical tag: These tags are used to provide the visual appearance to the text.
Logical tag: These tags are used to add some logical or semantic value to the text.
3.3 HTML Images
Images enhance visual appearance of the web pages by making them more interesting and
colorful.
The <img> tag is used to insert images in the HTML documents. It is an empty element and
contains attributes only. The syntax of the <img> tag can be given with:
<img src="url" alt="some_text">. The src attribute specifies the path to the image to bed
displayed. The alt attribute defines an alternate text for the image, if it can't be displayed.
Compiled by: Karari E.K email: cats.mwalimu@gmail.com 4
Web Design and Development Lesson 3
3.4 HTML Links
In HTML, links are defined with the <a> tag:
The HTML anchor tag <a> defines a hyperlink that links one page to another page. It can create
hyperlink to other web page as well as files, location, or any URL. Href (pronounced "h" — like
the letter — "ref) is short for Hypertext Reference. This is a goofy name that really only means a
URL (otherwise known as a web site address).<a href="url">link text</a> Eg:
<a href="https://www.w3schools.com">Visit W3Schools</a>
3.5 HTML Lists
HTML offers web authors three ways for specifying lists of information. All lists must contain
one or more list elements. Lists may contain -
<ul> - An unordered list. This will list items using plain bullets- disc, circle, or square.
<ol> - An ordered list. This will use different schemes of numbers to list your items- 1, ‘A’, ‘a’,
‘I’, or ‘i’.
<dl> - A definition list. This arranges your items in the same way as they are arranged in a
dictionary. The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term.
Compiled by: Karari E.K email: cats.mwalimu@gmail.com 5
Web Design and Development Lesson 3
3.6 HTML Tables
A table is a grid of rows and columns, the intersections of which form cells. Each cell is a distinct
area, into which you can place text, graphics, or even other tables.
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
The colspan attribute can be used on a <th> or <td> element and indicates how many columns
that cell should run across.
The rowspan attribute can be used on a <td> or <td> element to indicate how many rows a cell
should span down the table.
By default, a table has no border. To add a one-pixel border around both the table as
a whole and around each individual cell, you can add this attribute to the <table> tag
<table border =”1”>.
Example:
<table border= 1>
<tr>
<td colspan="3" align="center"> Student Attendance Record </td>
</tr>
<tr>
<td>CAMPUS</td>
<td>MAIN</td>
<td>CITY</td>
</tr>
<tr>
<td>Less than 1,000 Students</td>
<td rowspan="2">14<sup>th</sup> Feb 2022</td>
<td>14<sup>th</sup> Feb 2022</td>
</tr>
<tr>
<td>1,000 and Over</td>
<td>14<sup>th</sup> Feb 2022</td>
</tr>
</table>
Compiled by: Karari E.K email: cats.mwalimu@gmail.com 6
Web Design and Development Lesson 3
Lesson 3 Discussion Session
1. Differentiate between absolute and relative URLs.
2. Discuss img formatting in HTML
3. Explain HTML blocks and inline element using <frame> and <div> tags.
Compiled by: Karari E.K email: cats.mwalimu@gmail.com 7
