Module 2: Basic HTML Markup
Overview
In this module, students will begin to learn about the basics of HTML coding. They will receive introductions to HTML tags, including opening and closing tags, and learn the distinction between elements and attributes. Next, students will learn the essential tags for a website including tags that comprise the two main sections of a web page, the <head> and <body>. They will create a "bare bones" template and use this to create a home page and a few sub-pages for their portfolio. Students will then be introduced to some of the most common HTML elements and begin adding content to their portfolio home page.
Lesson 1: HTML Syntax
- Estimated time required: 20 - 30 minutes
- Link to student Lesson 1 page
Tips for Delivering This Lesson
- The Common HTML Tags page mentions that only two tags are required in HTML5: A DOCTYPE declaration on the first line, and the <title> element. Students who prefer only doing what's required might be content to just use these tags. Why do they need to add a bunch of other optional tags? This can provide a good teach moment. What happens if students create a web page that only contains a DOCTYPE and a title? If students are given the opportunity to try this, then view it in their browser, they will find that their web page has no visible content. Not very interesting. Lesson learned: It's always best to go beyond what's required.
- This lesson includes a few questions for assessing whether students are understanding some of the basic concepts concerning HTML. As recommended in the Instructor Tips for Unit 1 Module 2, we recommend administering this electronically, either by asking students to submit their answers via email, or (if available) using a web-based quiz, survey, or assessment tool.
- The answers to the questions are:
- Q: What are the only two required tags in an HTML5 web page?
A: DOCTYPE and <title> - Q:What is the first tag that must appear at the top of every HTML5 web page?
A: <!DOCTYPE html> - Q:What are the two main sections of an HTML document?
A: head & body - Q:Which element serves as a container for all the visible content of a web page?
A: body - Q:Which of the new HTML5 semantic elements serves as a container for the navigation menu?
A: nav - Q:Which element is used to identify the main heading on a page?
A: h1 - Q:Which element is used to add an image to a page?
A: img
- Q: What are the only two required tags in an HTML5 web page?
- The third question, regarding the two main sections of an HTML document, is an important one to emphasize. Even though the <head> and <body> tags are no longer required in HTML5, they have historically provided the foundational structure of a web document. The <head> element contains content about the web page, such as the title, while the <body> element contains the visible content. The fact that there is only one head and one body to a document sometimes eludes students and they end up using multiple body tags in a document, or overlapping these elements rather than opening and closing them in proper sequence. It is important that they fully understand this basic structure, and the notion that most HTML elements are container elements that have other elements inside them. Without this basic understanding, students will struggle to learn HTML as more and more elements are introduced.
- Since this curriculum teaches HTML5 it should be noted that many of the rules that are taught in this course (e.g., the importance of closing elements after they've been opened) are no longer requirements—they're all optional. HTML5 is much more relaxed than previous versions of HTML, especially XHTML, which was extremely strict about rules not being violated. Students should learn the rules and be encouraged to follow them, simply because they're a good practice, and because most web pages in use today still use earlier versions of HTML.
- Some students are confused by the <title> element and how that differs from heading elements such as <h1>. The short exercise recommended at the top of this page (creating a page with just the two required elements) might help to clarify the distinction between these elements.
- Another source of confusion is the difference between <head>, heading (e.g., <h1>), and header (e.g., <th> in tables). There's also a new &th;header< element in HTML5 (one of the new semantic elements). It might be tempting to explain the differences between these terms in this lesson, but we recommend waiting until students need to understand the differences. At that point the knowledge gained will be immediately applicable, which may make it seem less abstract.
Lesson 2: Essential Tags
- Estimated time required: 20 - 30 minutes
- Link to student Lesson 2 page
Tips for Delivering This Lesson
- As students begin coding, it's important to reinforce good coding habits (such as using lower case for HTML elements, and indenting code to make it more readable). Having clean, easy-to-read code will help tremendously as students' web pages become increasingly complex. Also good coding habits will help students throughout their lives if they ultimately pursue additional education in computing, especially if they learn computer programming languages.
- Be sure that students successfully complete all steps in the assigned activity. Future lessons depend on all files being created, properly named, and initially populated with a bare bones template. Consider having students pair and check each others' work. Give them this simple list to verify each others work:
- Are there six pages in the parent portfolio folder?
- Does each page have a distinct title that reflects the content of the page?
- Are the essential tags on each page?
Example Output
When this lesson is complete, students will have have created five new HTML files (accessibility.html, graphics.html, javascript.html, tools.html, and usability.html) that will be populated with content throughout this course. For now, each file is populated solely with a bare bones HTML template, just like the index.html file (here's the example index.html file - note that the file currently has no visible content in the body).
Lesson 3: Common Tags
- Estimated time required: 20 - 30 minutes
- Link to student Lesson 3 page
Tips for Delivering This Lesson
- Students will very likely begin to move at different paces in this lesson. The instructions are easy to follow if students are proficient readers. However, students for various reasons may begin to struggle with the content. This is an opportunity for instructors to spot the students who may require extra help and encouragement.
- This may also be a good time to introduce supplemental texts or websites (see Resources) to support student learning of HTML code.
- To foster independence and problem solving skills, it may be helpful to introduce a help protocol whereby students are encouraged to first reread directions, second consult texts or tutorial sites, third ask peers and lastly seek the instructor's help.
- This lesson introduces a simple sequence that will be used throughout the curriculum:
- Open a web page in both the HTML editor and web browser
- Save the page in the HTML editor
- Switch to the web browser and refresh
- Repeat steps 2 and 3
- Ctrl + S (Windows) or Command + S (Mac) to Save
- F5 (Windows) or Command + R (Mac) to Refresh
- Alt + Tab (Windows) or Command + Tab (Mac) to switch between open software applications
- This lesson requires a great deal of coding for a neophyte coder. Students may benefit from viewing a model of how the page should look (see Example Output below)
Example Output
When this lesson is complete, students will have added basic HTML content to the index.html file in their portfolio.