HTML

Projected Time

About 5.5 hours

20 minutes for video walkthrough of slides
5 hours for Independent Practice (Project)
15 minutes for Check for Understanding

Prerequisites

Debugging lesson

Motivation

Hyper Text Markup Language is the markup language for creating web pages and web applications.
Almost all the modern web applications use HTML for their front-end. And if you wish to be a web developer, you need to learn HTML.
HTML is really simple and easy to learn.

Objectives

Apprentices will be able to:

Create an HTML file and open it in Chrome
Code a bare-bones HTML structure
Draw a hierarchy of the HTML elements
Properly write opening and closing tags for commonly-used HTML elements
Use proper indentation to improve readability
Code an unordered and ordered list, and know how they are different
Make a word or phrase link to an external webpage
Separate HTML code into containers
Identify semantic and non-semantic elements

Specific Things to Learn

How to open an HTML file in Chrome
HTML document structure
Commonly-used HTML tags
Proper HTML indentation
Semantic elements

Lesson

HTML (video walkthrough of slides)

HTML (slides)

Common Mistakes / Misconceptions

Only front-end engineers need to know HTML. Knowing a little bit of HTML, even if you want to be purely a backend web developer or work on non-Internet-based products, is really useful. It’ll allow you to make static webpages to showcase your projects, and you could pitch in if one of your colleagues who usually takes care of HTML coding is out.
HTML isn’t a “serious” language. HTML is indeed a coding language, though it can’t do the kinds of logic-based things or decision-making that languages like JavaScript or Python can do. Nonetheless, it’s a language that fulfills its purpose very well!

Independent Practice

No pairs will be assigned for this project, but you should rely on your classmates for help once you’ve spent 20 minutes working independently through something you’re stuck on.

The activity for the HTML, CSS, Bootstrap and jQuery lessons is a project that allows you to combine your new skills in each of these areas.

Click here to access the instructions for the HTML portion of the project. Please don’t move on to the prompts for the other topics yet.

Check for Understanding

What are semantic and non-semantic elements in HTML?
How do you write comments in HTML?
Why is indentation used in HTML?
How can we insert an image in a HTML document?
What does the line ‘meta charset=“utf-8”’ mean?