5.
Build Web Pages Using HTML
Description: This unit describes the essential skills and knowledge required to create a simple
web page with HTML. By exploring the core concepts of markup languages and HTML, Students
will gain a solid foundation in front-end web development while getting hands-on experience in
setting up a development environment, creating HTML pages, and incorporating various types of
content such as text, images, links, lists, tables, and multimedia.
[Link] markup languages
5.1.1. Introduction to markup languages
[Link] History
[Link] Features of Markup Language
[Link] Merits and Demerits of Markup languages
[Link] Reasons to Learn a Markup Language
5.1.2 Types of markup languages
[Link] Presentational Markup
5.1.2. Introduction to HTML
[Link] HTML Versions
[Link] Characteristics of HTML
[Link] Features of HTML
[Link] The Importance of Learning HTML
[Link] Merits and Demerits of HTML
5.2 Setup the HTML Development environment and Create HTML pages
5.1.3. Introduction to integrated
[Link] development environment (IDE)
[Link] Tools Required in web design
[Link] Installing required tools and extensions
5.1.4. Basic HTML document structure
[Link] Create a HTML file
[Link] Saving and opening html documents
[Link] Metadata and its importance in SEO
5.3 Create web content using HTML
5.3.1 HTML Elements
[Link] HTML Tags
[Link] Types of HTML element
[Link] HTML attributes
[Link] Attributes for HTML document structure Tags
5.3.2 HTML formatting Tags
[Link] Paragraph format
[Link] . Heading Format Tags
[Link] Text formatting tags
[Link] Font Formatting tag
[Link] Image tag
[Link] Marquee tag
5.3.3 HTML links
5.3.4 HTML links
[Link] HTML Ordered List or Numbered List
[Link] HTML Unordered List or HTML Bulleted List
[Link] Definition lists
[Link] HTML Nested List
5.3.5 HTML Tables
5.3.6 HTML Frames
[Link] <frameset> Element
[Link] Attributes of <frameset>
[Link] Attributes of <frame>
[Link] Create row and column Frames
5.3.7 HTML Form
[Link] Importance of HTML Forms
[Link] HTML Form Tag
[Link] HTML Forms Structure
[Link] HTML <form> element
[Link] Insert different form types
[Link] HTML Form Validation
5.3.8 Multimedia elements
[Link] Embedding audio and video using audio and video tags
[Link] . Adding source, controls, and fallback content
Unit 5: Build Web Pages Using HTML
Course: Web Design and Development
Grade Level: 11
Unit Objective: By the end of this unit, students will be able to understand markup languages
and create simple web pages using HTML that include text, images, links, lists, tables, forms,
and multimedia.
5.1 Identify Markup Languages
5.1.1 Introduction to Markup Languages
A markup language is a computer language that uses tags to define elements within a
document. These tags tell the browser how to display content such as text, images, and
multimedia.
[Link] History of Markup Languages
• Early documents were plain text with no formatting.
• SGML (Standard Generalized Markup Language) was developed in the 1960s.
• HTML was created in 1991 by Tim Berners-Lee for the World Wide Web.
• XML was later introduced to store and transport data.
[Link] Features of Markup Languages
• Use of tags and attributes
• Easy to read and write
• Platform independent
• Defines document structure
[Link] Merits and Demerits of Markup Languages
Merits:
• Easy to learn
• Organizes content clearly
• Widely supported
Demerits:
• Limited functionality without programming languages
• Requires proper syntax
[Link] Reasons to Learn a Markup Language
• Foundation for web development
• Helps create websites
• Essential for front-end development
• Improves digital literacy
5.1.2 Types of Markup Languages
[Link] Presentational Markup
• Focuses on how content looks
• Example: HTML formatting tags like <b>, <i>, <font>
5.1.2 Introduction to HTML
HTML (HyperText Markup Language) is the standard language used to create web pages.
[Link] HTML Versions
• HTML 1.0 – First version
• HTML 4.01 – Widely used
• XHTML – Stricter version of HTML
• HTML5 – Latest version (supports audio, video, forms)
[Link] Characteristics of HTML
• Tag-based language
• Not case-sensitive
• Runs in web browsers
[Link] Features of HTML
• Easy to learn
• Supports multimedia
• Works with CSS and JavaScript
[Link] Importance of Learning HTML
• Basis of all websites
• Required for web design careers
• Helps create online content
[Link] Merits and Demerits of HTML
Merits:
• Free and open standard
• Simple syntax
Demerits:
• Static pages only
• Needs CSS and JavaScript for advanced features
5.2 Setup the HTML Development Environment and Create HTML Pages
5.2.1 Introduction to Integrated Development Environment (IDE)
An IDE is software that helps programmers write and manage code easily.
[Link] Tools Required in Web Design
• Computer
• Web browser (Chrome, Firefox)
• Text editor (Notepad, VS Code)
[Link] Installing Required Tools and Extensions
• Install Visual Studio Code
• Add extensions like Live Server
[Link] Basic HTML Document Structure
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
[Link] Creating an HTML File
• Open text editor
• Save file as [Link]
[Link] Saving and Opening HTML Documents
• Use .html extension
• Open with any web browser
[Link] Metadata and Its Importance in SEO
• Metadata is information about the webpage
• Example: <meta charset="UTF-8">
• Helps search engines understand the page
5.3 Create Web Content Using HTML
5.3.1 HTML Elements
An HTML element consists of a start tag, content, and end tag.
[Link] HTML Tags
• <html>, <head>, <body>
[Link] Types of HTML Elements
• Block-level elements (e.g., <p>, <div>)
• Inline elements (e.g., <span>, <b>)
[Link] HTML Attributes
• Provide additional information
• Example: <img src="[Link]">
[Link] Attributes for Document Structure Tags
• lang, charset, title
5.3.2 HTML Formatting Tags
[Link] Paragraph Format
• <p> tag
[Link] Heading Format Tags
• <h1> to <h6>
[Link] Text Formatting Tags
• <b>, <i>, <u>, <strong>
[Link] Font Formatting Tag
• <font> (deprecated in HTML5)
[Link] Image Tag
<img src="[Link]" alt="My Photo">
[Link] Marquee Tag
• <marquee> (obsolete, for moving text)
5.3.3 HTML Links
<a href="[Link] Site</a>
5.3.4 HTML Lists
[Link] Ordered List
<ol><li>One</li></ol>
[Link] Unordered List
<ul><li>Item</li></ul>
[Link] Definition List
<dl><dt>HTML</dt><dd>Markup language</dd></dl>
[Link] Nested List
• List inside another list
5.3.5 HTML Tables
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Ana</td><td>16</td></tr>
</table>
5.3.6 HTML Frames
(Note: Frames are obsolete in HTML5)
[Link] <frameset> Element
• Divides browser window
[Link] Attributes of <frameset>
• rows, cols
[Link] Attributes of <frame>
• src, name
[Link] Creating Row and Column Frames
• Using rows and columns values
5.3.7 HTML Forms
[Link] Importance of HTML Forms
• Collect user data
[Link] HTML Form Tag
<form></form>
[Link] HTML Form Structure
• Form tag + input elements
[Link] <form> Element
• Attributes: action, method
[Link] Insert Different Form Types
• Text box, password, radio, checkbox, submit
[Link] HTML Form Validation
• Required fields
• Type validation
5.3.8 Multimedia Elements
[Link] Embedding Audio and Video
<audio controls>
<source src="song.mp3">
</audio>
<video controls width="300">
<source src="movie.mp4">
</video>
[Link] Adding Source, Controls, and Fallback Content
• controls enables play buttons
• Fallback text shows if media not supported