Item Number: INT-HTML

Technology Integration: Language Arts

Technology Skill: Internet, Programming

Program: Notepad


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
Build a Web Page using HTML and CSS
Practice Coding Skills using Templates
Helpful Resources Support Learning
HTML Lesson Plans for Beginners

Design Web Pages using HTML and CSS Activities - Programming for Kids

Introduce programming skills using HTML lesson plans for beginners. Select a topic related to a language arts, science, social studies, geography, or history unit to complete a cross-curricular project.

  • Identify topic, purpose, and audience for a web page
  • View the source code of a web page
  • Decode the meaning of HTML and CSS tags
  • Plan and organize web page ideas
  • Create a web page using HTML and style it with CSS
  • Set attributes for the body, text, and graphics
  • Insert an image and position it using CSS
  • Add a hyperlink to text or a picture using HTML
  • Add meta tags for keywords and description
  • Create lists, picture background, classes, or tables

Customer Reviews

Construct a simple web page using HTML and CSS. Throughout the design process, instructions explain how to style text, graphics, and hyperlinks to produce an informative web page. For those in need of an extra challenge, extension activities encourage students to create a list, apply a picture background, customize hyperlinks, employ CSS classes, insert animated text or images, and build tables. HTML lesson plans for beginners make coding fun!

Write a Review


I love this product. Because of the detailed instructions, all my students had great success at building a webpage. They were all engaged and tried every activity that was available. I was amazed at some of their pages.

Linda, Orlando, Florida, Odyssey Middle


The HTML class is clear and we are having fun working on the website project. Thanks for a great product.

TammyS, Cary, NC, Homeschool Group


My favorite of all the TechnoKids projects! Students at all skill levels love the challenges of this project. They are so proud of themselves when they realize just what they have accomplished. Thanks!

K. Wyatt, Tonganoxie KS, USA, Tonganoxie Middle School


Love your materials. The lesson structure of TechnoHTML has enabled me to teach HTML while I am learning it with my students.

S. Wright, Rock Springs, WY, USA, Rock Springs Junior High


I love these lessons. I purchased TechnoHTML last year. There are a few more I am hoping are the special of the month sometime soon! Thanks again!

M. Schneidereit, NJ, USA, Maple Shade High School


loved the program!

R. Murnane, NY, USA, Centereach High School


My kids are so excited and I can’t wait to use this material. I bought this on a recommendation from another teacher who loves your products and I am sure I will too.

Linda Parsons , FL, USA, Odyssey Middle School


TechnoHTML5 has been working out well. Students are grasping the idea of how to make a webpage. I really like the step by step directions as well as the given assessments.

N. Mulligans, NY, USA, IS 318


I just started using it this semester and am very pleased with it. I would like to purchase other projects in the future. You have a very good product.

M. Turchi , IL, USA, Ottawa Twp. High School

TechnoHTML5 has been working out well. Students are grasping the idea of how to make a webpage. I really like the step by step directions as well as the given assessments.

html lessons reviewer

N. Mulligan,
IS 318,

Other TechnoKids Intermediate Projects

Google Docs Package

A collection of Google Docs technology projects. Write stories, create presentations, design a newsletter, research information, graph data, and more.

View Details

Microsoft Plus Package

Project based activities for Microsoft Office. More than 40 projects that integrate technology into curriculum.

View Details

Office 365 Online Package

A collection of Office 365 Online technology projects. Write stories, create presentations, design a newsletter, research information, graph data, and more.

View Details

Microsoft Complete Package: Microsoft Plus + Office 365 Projects

Project based activities for Microsoft Office and Office 365 Online. More than 50 projects that integrate technology into curriculum.

View Details

Intermediate Projects