1 HTML Topics: Readings and References

2 HTML Part One

2.1 Getting Started with HTML

Getting Started with HTML. Topics covered:

  • Elements, Nesting Elements, Block versus inline elements, empty elements;
  • Attributes, boolean attributes, single or double quotes;
  • Anatomy of an HTML document; Whitespace in HTML; Entity references/special characters; HTML Comments;

2.2 What’s in the head?

What’s in the head? Metadata in HTML. Topics covered:

  • Title, Metadata, character encoding, description and SEO
  • Custom icons, adding CSS and JavaScript to the page, document language

2.3 HTML Text

HTML text fundamentals. Topics covered:

  • Structure in web pages. Headings and Paragraphs
  • Lists: Unordered, Ordered, (they don’t cover description lists), nested lists.
  • Emphasis and Importance, but not style…

3 HTML Part Two

3.1 Advanced Text

Advanced Text Formating. Read this, will only skim in class. Topics covered:

  • Description lists, Blockquotes, Inline quotations
  • Citations, Abbreviations, Address, Super/sub-script
  • Computer code markup, times and dates.

3.2 HTML Character Entities, escaping, Unicode and such

3.3 Document and Website Structure

Document and website structure. Topics include:

  • Basic sections of a web page. Structuring a page.
  • <main>, <article>, <section>, <aside>, <header>, <nav>, <footer>.
  • Non-semantic wrappers: <span>, <div>.

4 HTML Forms

HTML Forms

  1. Your first form. Basics of the <form> element, action, and submit button.

  2. How to structure a form. How to use fieldsets, legends, labels, and such.

  3. The native form widgets. Includes: all sorts of text input fields, select boxes, checkable items, buttons, and more. Use this more as a reference. Did you notice that things like tabbed panes, dialog boxes, drop down menus are missing?

  4. Sending form data

5 Multimedia and Embedding

Multimedia and Embedding

  1. Images in HTML
  2. Video and audio content.
  3. Other embedding techniques. We’ll probably just mention this…
  4. Adding vector graphics.
  5. Responsive images

6 Miscellaneous

6.1 Custom Data Attributes

Custom data attributes. Defines the format of data-* attributes and how to use them from JavaScript and CSS.

6.2 Validation

Should check your HTML against the W3C Markup Validation Service. It’s free!