Goal: By the end of this section you should understand basic HTML elements, attributes, naming conventions, basic text tags and comments. You’ll also have the ability to make a simple web page, view it in a browser, and validate it.
Prerequisites: Tool Setup, HTML Introduction
Required skills: Basic computer literacy (Windows or OS X) and the ability to use a text editor and browser.
Total time (core material): 2 hours
Core Material
File naming & management
The doctype
HTML Elements
The HTML Tag
Nesting tags
The head and title
Headings & Paragraphs
At this stage, you’ll want to have multiple lines of content on your page. Rather than typing all the content yourself, you’ll probably want to use a Lorem ipsum text generator to create filler text before moving on.
More HTML Text Elements
Attributes
Block & Inline Tags
Comments
HTML5 Page Template
HTML Validation
Alternative Validators
Optional:
Supplementary Material
Watch the fifth film in Jessica Hische and Russ Maschmeyer’s “Don’t Fear The Internet” series: “Don’t Fear Starting From Scratch” (Total Time: 5 minutes).
Watch Introduction to Markup, First Steps, Global Structure 1 & 2 and Validation at the Treehouse site (Total Time: 30 minutes). Optionally, take the quiz at the end of the section.
Follow this by watching Paragraphs and Headings followed by Emphasis, Strong, and Horizontal Rules. Then watch the Quotes, Preformatted Text and Abbreviations, Addresses and Citations videos in the same section and take the quiz.
Read “HTML Syntax” and “HTML Block & Inline” on marksheet.io (12 minutes).
Recommended Reading
Read The Basics of HTML, The HTML Head and HTML Text from the Web Platform Docs.
Read Chapter 2, “Text”, HTML and CSS: Design and Build Websites
Read Chapter 4 “Learning Web Design” (ignoring, for the time being, the addition of images and CSS).
When You’re Done
At the end of this section you will have completed a basic valid HTML page. You are strongly encouraged to play with your creation, seeing how browsers and the W3C validator react to adding and removing tags and page content.
To start creating content for a real page, you need to learn about writing for the web and a few basic typographic measures in HTML.
Photograph by TC Morgan, licensed under Creative Commons
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.