HTML Lesson Plans for Beginners: Teacher Guide, Printable Student Workbook, Paperless Worksheets, Extension Activities
Handouts and Assessment Tools: TechnoHTML Parent Letter, TechnoHTML Certificate, Summary of Skills Checklist, TechnoHTML Marking Sheet, HTML and CSS Reference Sheet
HTML Lesson Samples and Templates: Avalanche Sample, Albert Einstein Sample, Skateboard Sample, HTML Editing Template, CSS Editing Template, Mountain Biking Template, Baseball Template
Note: This project is for kids. The activities introduce basic tags and attributes only. We want your students to like writing code. For this reason, we have kept things simple. By the end of this project, your students should feel confident in their ability to add HTML elements and set CSS attributes – not frustrated. The HTML lessons for beginners are designed to spark an interest in programming.
Assignment 1: Internet Basics
Learn basic terminology. Consider the importance of the Internet in daily life.
Assignment 2: History of the Internet
Read about key events in a timeline of the Internet.
Assignment 3: About the World Wide Web
Investigate parts of a web browser. Learn why the World Wide Web was invented.
Assignment 4: What is HTML?
Gain a basic understanding of HTML and its importance in the world today.
Assignment 5: Seeking the Source
View source code of a web page. Look at tags. Decode the meaning.
Assignment 6: Edit an HTML Document
Analyze a sample web page using an HTML Text Editor. Edit the tags. View changes in a browser.
Assignment 7: Edit the Style of an HTML Document
Learn about Cascading Style Sheets. See how CSS can produce a professional, consistent design.
Assignment 8: Plan a Web Page
Complete an organizer to plan a web page. Gather information, save pictures, record websites.
Assignment 9: Start Building a Web Page
Add title, heading, body, and horizontal rule tags with HTML.
Assignment 10: Format the Web Page Using CSS
Set the attributes of each element of the web page using CSS.
Assignment 11: Prepare Your Images
Check file type of saved images. Name, resize, and save pictures.
Assignment 12: Add Images and Format the Style
Add images to the web page. Format picture style, float, and margins using CSS.
Assignment 13: Create Hyperlinks
Make a text link. Create a hotspot. Answer review questions about code.
Assignment 14: Explore Meta Tags
Study search engine results using keywords. View meta tags in source code.
Assignment 15: Add Meta Tags to a Web Page
Add meta tags for web page description and keywords.
Assignment 16: Are You Ready to Upload?
Complete a web page checklist. Answer reflection questions.
Assignment 17: Upload Your Web Page
Upload web page to a free web host. (Optional)
Assignment 18: HTML Developers Conference
Share web page with others. Write positive comments about peers’ web pages.
Optional HTML and CSS Lessons for Middle and High School Students
- Analyzing Websites: View three sample web pages and answer questions.
- Format Lists: Use tag pairs and CSS to make bulleted and numbered lists.
- Add a Background Image: Use a picture as a background for the web page.
- Format Hyperlink Style: Set CSS attributes. Change the appearance of links.
- Create a Class: Set unique style attributes for pictures and text.
- Add Animated Text and Images: Create animated text. Add an animated gif.
- Create a Table: Organize information using HTML to make rows and columns.
- Submit Your Site to a Search Engine: Increase the chances of search engines finding the web page./li