In this two-week unit, students will be introduced to the basics of HTML (HyperText Markup Language), the language used to create web pages. They will learn to write, structure, and style basic web pages. By the end of the unit, students will create their own simple multi-page website.
How can we use HTML to build and structure web content?
By the end of this unit, students will be able to:
Understand the purpose and structure of HTML.
Create a basic HTML document using HTML tags.
Structure a web page with headings, paragraphs, and lists.
Insert images and links into a web page.
Use basic inline styles (e.g., changing text color, size).
Develop a simple, multi-page website with interconnected pages.
Day 1: Introduction to HTML and Web Pages
Objective: Understand the basics of HTML and how web pages are built.
Content:
What is HTML? (Definition and purpose)
Parts of a web page (head, body, elements)
Introduction to HTML tags: <html>, <head>, <title>, <body>
Activity: Students view sample web pages and identify common elements.
Day 2: Writing Basic HTML
Objective: Create a basic HTML page structure.
Content:
HTML file structure: opening and closing tags
Introduction to text elements: <h1> to <h6> (Headings), <p> (Paragraph)
Activity: Students create a simple webpage with a heading and paragraph using a text editor.
Day 3: Lists in HTML
Objective: Learn to use ordered and unordered lists.
Content:
Tags for lists: <ul>, <ol>, <li>
Creating bullet and numbered lists
Activity: Students create a webpage with a grocery list and steps to complete a task using <ul> and <ol> tags.
Day 4: Adding Links
Objective: Add links to navigate between pages and to external sites.
Content:
Understanding the <a> tag
Internal vs. external links
Activity: Students create a page with links to their favorite websites.
Day 5: Inserting Images
Objective: Embed images into a webpage.
Content:
Understanding the <img> tag and attributes (e.g., src, alt)
How to properly source images online
Activity: Students add images to their webpage, ensuring proper attribution.
Day 6: Structuring Content with Divs and Sections
Objective: Organize content with containers.
Content:
Introduction to <div> and <section> tags
Grouping content for better structure
Activity: Students structure their webpage using <div> and <section> to organize text and images.
Day 7: Styling with Inline CSS
Objective: Add simple styles to HTML elements.
Content:
Introduction to inline CSS styles (using the style attribute)
Changing text color, size, and alignment
Activity: Students style their webpage to improve its appearance (e.g., changing heading colors).
Day 8: Creating a Multi-Page Website
Objective: Connect multiple web pages using links.
Content:
Creating a homepage and additional pages
Linking between pages within the site
Activity: Students create a homepage with links to 2–3 additional pages (e.g., About Me, Hobbies, Favorite Books).
Day 9: Reviewing and Debugging
Objective: Review and debug HTML code.
Content:
Common HTML mistakes and how to fix them
Using browser developer tools to inspect and troubleshoot code
Activity: Students swap their web projects with peers to review and offer feedback.
Day 10: Final Project Showcase
Objective: Present and showcase a finished multi-page website.
Activity: Students present their final websites to the class, explaining the pages they created, the elements used, and any challenges they overcame.
Formative Assessment: Daily tasks and challenges (e.g., creating a webpage with images and links).
Summative Assessment: Final multi-page website project, assessed based on structure, creativity, and proper use of HTML elements.
Computers with access to a text editor (e.g., Notepad, VSCode) and web browser.
Handouts or digital references of basic HTML tags.
Example websites for exploration and inspiration.
This unit provides students with foundational HTML skills, giving them the ability to build simple, well-structured web pages by the end of two weeks.