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.