Topics 9
Introduction to HTML
Learn about the basics of HTML (Hypertext Markup Language), its role in web development, a...
HTML Document Structure
Premium content - upgrade to unlock
HTML Elements and Tags
Premium content - upgrade to unlock
Formatting Text with HTML
Premium content - upgrade to unlock
Working with Links and Images
Premium content - upgrade to unlock
Creating Lists and Tables
Premium content - upgrade to unlock
Forms and Input Elements
Premium content - upgrade to unlock
Semantic HTML
Premium content - upgrade to unlock
HTML5 Features and Best Practices
Premium content - upgrade to unlock
Unit Outline 20h
Learning Objectives
5 objectives- Understand the fundamental structure and purpose of HTML in web development.
- Identify and use key HTML elements and tags to create structured web content.
- Apply formatting techniques to enhance text presentation on web pages.
- Create interactive web pages by integrating links, images, lists, tables, and forms.
- Demonstrate knowledge of semantic HTML and HTML5 features to write accessible and optimized code.
Content Outline
PreviewUnit 884: Introduction to HTML and Web Page Structure
1. Introduction to HTML
- Definition and role of HTML in web development
- How HTML structures content on the web
- Overview of web page creation process
2. HTML Document Structure
- Doctype declaration: purpose and syntax
- The
<html>element: root of the document - The
<head>element: metadata, title, and linking resources - The
<body>element: main content container - How these components work together to form a webpage
3. HTML Elements and Tags
- Understanding elements, tags, and attributes
- Common structural elements:
- Headings (
<h1>to<h6>) - Paragraphs (
<p>) - Divisions and spans (
<div>,<span>)
- Headings (
- Content elements:
- Lists: ordered (
<ol>), unordered (<ul>), and list items (<li>) - Links (
<a>) - Images (
<img>) - Multimedia placeholders
- Lists: ordered (
4. Formatting Text with HTML
- Text formatting tags:
- Bold (
<b>) and strong emphasis (<strong>) - Italic (
<i>) and emphasis (<em>) - Underline (
<u>)
- Bold (
- Using headings to structure text content
- Line breaks and horizontal rules (
<br>,<hr>) - Nesting and combining formatting tags
5. Working with Links and Images
- Creating hyperlinks with
<a>tag- Absolute vs relative URLs
- Opening links in new tabs
- Anchor links
- Inserting images with
<img>tag- Essential attributes:
src,alt,width,height - Accessibility considerations (alt text)
- Image optimization best practices
- Essential attributes:
6. Creating Lists and Tables
- Lists:
- Ordered lists (
<ol>) - Unordered lists (
<ul>) - Nested lists
- Ordered lists (
- Tables:
- Table structure:
<table>,<tr>,<th>,<td> - Adding captions and summaries
- Styling tables for readability
- Table structure:
7. Forms and Input Elements
- Form element
<form>and its attributes - Input types:
- Text fields (
<input type="text">) - Password fields
- Checkboxes and radio buttons
- Dropdown menus (
<select>and<option>) - Buttons (
<button>,<input type="submit">)
- Text fields (
- Labeling form controls for accessibility
- Basic form validation attributes
8. Semantic HTML
- Importance of semantic tags for accessibility and SEO
- Common semantic elements:
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>
- Structuring content meaningfully
- Impact on screen readers and search engines
9. HTML5 Features and Best Practices
- New HTML5 elements and attributes overview
- Multimedia embedding (
<audio>,<video>) - New form input types and attributes
- APIs introduction (Canvas, Geolocation) - brief overview
- Best practices:
- Writing clean, readable, and maintainable code
- Using semantic markup
- Accessibility considerations
- Cross-browser compatibility
- Validating HTML code
Unlock the full outline
Get the complete content outline, learning outcomes and assessment methods for Html Fundamentals.
KSh 20 one-off, or included with a plan
Learning Outcomes
Unlock the outline above to see learning outcomes.
Assessment Methods
Unlock the outline above to see assessment methods.
Study Materials
No notes yet
Notes will appear here once uploaded.
No questions yet
Practice questions will appear here.
Get Study Materials
CATs
Loading…
Assignments
Loading…
Exam Papers
Loading papers…