AKAKI ADVENTIST SCHOOL
Grade 11: Website Design and Development
MODULE IV: Build Web Pages Using HTML5
UNIT 1: Markup Language
Definition
A markup language is a system used to annotate text with special symbols or tags so that a
computer can understand the structure, meaning, and formatting of that text.
It does not “compute” like a programming language — instead, it describes how information
should be organized or displayed.
Purpose of Markup Languages
Markup languages are used to:
✔ Structure documents
✔ Format content (headings, bold, lists)
✔ Embed media (images, audio, video)
✔ Link documents (hypertext)
✔ Provide machine-readable meaning (semantic structure)
Key Features
Human-readable: Tags are easy to read and write.
Structured format: Content is organized logically.
Uses tags: Most markup syntax depends on <tag>content</tag>.
Extensible: New tags can be defined (e.g., XML).
Types of Markup Languages
Markup languages are used in different fields and purposes. Common categories include:
A. Presentational Markup- focuses on how something looks. Example: HTML
B. Data Markup-focuses on transferring and structuring data Example: XML, JSON,
YAML, XBRL
C. Document Markup- Used for structuring books, articles, research documents.
Example: LaTeX, SGML, DocBook
D. Mathematical Markup- Used to represent equations & formulas Example: MathML
Introducing HTML
HTML stands for HyperText Markup Language and is the standard markup language for
creating web pages.
Compiled by Shambel Fita Page 1
AKAKI ADVENTIST SCHOOL
Grade 11: Website Design and Development
HTML uses tags to define page elements such as:
headings images lists
paragraphs links
Example:
<h1>My Website</h1>
<p>Hello, welcome!</p>
“HyperText” Meaning-
HyperText refers to clickable text that links to other web pages or resources.
Example: <a href="[Link]
How HTML Works
Browsers (Chrome, Firefox, Edge) read and interpret HTML tags to display structured content
on the screen.
HTML Tags: HTML consists of:
opening tag → <p>
content → Hello
closing tag → </p>
Full element:
<p>Hello</p>
Some tags are self-closing, e.g.:
<img src="[Link]">
Why Markup Languages Matter in Web Design
Markup languages (especially HTML) provide the foundation of web development.
Without markup, a browser cannot know how to present text, images, or layout.
Advantages of Markup Languages
✔ Simple to read ✔ Platform-independent
✔ Easy to write
Compiled by Shambel Fita Page 2
AKAKI ADVENTIST SCHOOL
Grade 11: Website Design and Development
✔ Highly structured ✔ Widely supported
UNIT 2: HTML Development Environment and HTML Structure
1. Introduction to Development Environment
Before writing HTML code, a developer needs a development environment
A Development Environment is a set of tools and software used to create, edit, test, and display
web pages.
A proper environment helps the developer:
✔ write code efficiently ✔ debug errors
✔ preview results instantly ✔ organize projects
✔ manage files and folders
2. Tools in Web Development Environment
A web environment typically consists of the following:
i. Text Editors / IDEs: - Software used to write HTML code.
Common examples:
Notepad (simple) Visual Studio Code Atom
Notepad++ Sublime Text WebStorm
Why they are useful:
✔ Highlight syntax ✔ support extensions
✔ show suggestions ✔ manage project files
ii. Web Browsers: Browsers are needed to render (display) HTML pages (webpages).
Popular browsers:
Google Chrome Microsoft Edge Opera
Mozilla Firefox Safari
Browsers interpret tags and show the formatted web page.
iii. File System / Folder Structure:-Websites are usually built in folders that contain:
HTML files JavaScript files media files
CSS files images
Example structure:
project/
│ [Link]
│ [Link]
│ [Link]
│ [Link]
└── images/
[Link]
What is an IDE? (Explained)
IDE = Integrated Development Environment
Compiled by Shambel Fita Page 3
AKAKI ADVENTIST SCHOOL
Grade 11: Website Design and Development
An IDE combines multiple tools such as:
✔ code editor ✔ preview tools
✔ file manager ✔ debugger
Advantages of IDEs:
speeds up development reduces mistakes improves productivity
Note: VS Code is currently the most popular for HTML development.
Basic HTML Document Structure
HTML uses a standard structure so browsers can interpret content correctly.
The structure of a basic HTML5 document includes:
<!DOCTYPE html>
<html>
<head> ... metadata ... </head>
<body> ... visible content ... </body>
</html>
Let’s break it down:
<!DOCTYPE html>:-Declares that the document uses HTML5 (the modern standard).
Browsers use this to render pages correctly.
<html>...</html>
This is the root element of the document. Everything in the web page must be inside it.
Attributes like language can be added: <html lang="en">
<head>...</head> Section
The head contains metadata, which is information about the document but not visible on the
page.
Head may include:
<title> — page title (visible on browser tab)
<meta> — character encoding, SEO data
<link> — CSS stylesheet
<script> — JavaScript
<style> — internal CSS
Example:
<head>
<title>School Website</title>
<meta charset="UTF-8">
</head>
. <body>...</body> Section:- Contains all visible content displayed in the browser.
Examples of visible elements:
✔ headings — <h1>...</h1> ✔ links — <a>
✔ paragraphs — <p>...</p> ✔ tables — <table>
✔ images — <img> ✔ media — <video>, <audio>
✔ lists — <ul>, <ol>
Example:
<body>
Compiled by Shambel Fita Page 4
AKAKI ADVENTIST SCHOOL
Grade 11: Website Design and Development
<h1>Welcome!</h1>
<p>This is my first HTML page.</p>
</body>
5. Example of Complete HTML5 Document
Source code Output
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First
Page</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Hello World</h1>
<p>I am learning HTML5!
</p>
</body>
</html>
UNIT 3- Create Web Content Using HTML
Introduction to HTML Content Creation
In this unit, the focus shifts from understanding what HTML is to using HTML to create
real content for a webpage.
HTML provides different elements (tags) to insert text, images, lists, links, tables, and forms
to build meaningful and interactive web pages.
HTML Elements
An HTML element consists of: Opening tag, Content and Closing tag
Syntax:-<tag-name> Content </tag name>
Compiled by Shambel Fita Page 5
AKAKI ADVENTIST SCHOOL
Grade 11: Website Design and Development
Html tags can be categorized in to paired tags and unpaired tag:
Paired HTML tags consist of two instructions — an opening tag (also called a starting tag) that
marks the beginning of a block, and a closing tag that looks the same but with an additional slash
/ . Here, <p> is a starting tag, Hello, World! is the content, and </p> is a closing tag
Unpaired tags, also known as empty tags or void tags, do not have a closing tag. They are self-
contained and do not enclose any content. These tags are used for elements that do not require
any enclosed text or child elements. Example <img src="[Link]">,<br>,<hr>
Block-Level vs. Inline Elements
HTML elements are generally classified into two categories namely Block elements and Inline
Elements.
A. Block-Level Elements: -start on a new line and take up as much width as they can, causing
subsequent content to start on the next line below them. Here are some block elements in HTML:
<dd>, <div>, <dl>, <dt>, <form>, <h1> to <h6>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>,
<p>, <pre>, <section>, <table>, <tfoot>, <ul>
Example: <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
B. Inline Elements
Inline Elements; are elements that are placed within a block of text and only take up as much
width as necessary. Here are some inline elements in HTML: <a>, <em>, <i>, <img>, <input>,
<select>, <small>, <strong>, <sub>, <sup>, <textarea>
Example:
<p>This is <strong>important</strong> text.</p>
Formatting Text in HTML
HTML provides tags to format and emphasize text.
Common formatting tags:
<b> — bold <em> — emphasis
<strong> — strong importance <u> — underline
<i> — italic <mark> — highlight
Example:
Compiled by Shambel Fita Page 6
AKAKI ADVENTIST SCHOOL
Grade 11: Website Design and Development
<p>This is <em>very</em> important.</p>
5. Creating Lists in HTML
Lists structure information into numbered or bulleted points.
A. Ordered List (Numbered)
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
B. Unordered List (Bulleted)
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Juice</li>
</ul>
C. Definition List (Term + Definition)
<dl>
<dt>HTML</dt>
<dd>Structure of a webpage</dd>
</dl>
Lists are useful for menus, instructions, categories, etc.
7. Inserting Images
Images make web content visual.
Syntax:
<img src="[Link]" alt="Cute cat">
Attributes:
src → image path
alt → text shown if image fails (important for accessibility)
Compiled by Shambel Fita Page 7
AKAKI ADVENTIST SCHOOL
Grade 11: Website Design and Development
width, height → size controls
Example:
<img src="[Link]" width="300">
8. Tables
Tables organize data in rows and columns.
Basic structure:
<table border="1">
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>Abel</td>
<td>11</td>
</tr>
</table>
Compiled by Shambel Fita Page 8