Welcome to my review of HTML Fundamentals by Matt Milner, an independent consultant specializing in Microsoft .NET application design and development.
This course is part of two learning paths on Pluralsight:
HTML Fundamentals Introduction
Matt begins by introducing a bit of the history of HTML and advising that there are a couple of related courses that may be of interest, which are:
HTML is a markup language that was created to share research documents.
Matt describes the anatomy of an HTML document: doctype, html root element, head element and body element.
He gives a hello world example, and then explains why it is important to add a doctype to it.
You can find the w3 valid DTD list here, but note that the bit saying HTML5 not yet being a standard is out of date.
Matt uses the W3C Validator service to explain what is and isn’t valid HTML
Then the <head> tag is described, along with the tags that are usually contained with in it: <title> <meta> <script> <style> <link> and <base>
Also the <body> tag is described, along with many of it’s child elements: Headings, Text, Lists, Links, Tables, Images and objects
These are then all demonstrated. Matt shows some basic JavaScript for updating and HTML element.
HTML Text
This module describes Headings, Block and inline elements, Text breaking and white space, Quotations, abbreviations, references, etc.
There are six headings, H1 is the primary heading, and H2-H6 are sub headings show smaller text as the heading number increases.
Block elements are container elements for grouping, which may contain other block elements.
Inline elements are containers for text and other inline elements.
This probably won’t make much sense until you see it. Fortunately Matt gives a demo of this next.
In the whitespace clip, Matt describes elements such as <pre> <br/> <hr/> and character entities such as
The end of this module covers additional text elements, such as:
- <sup> <sub>
- <cite>
- <abbr> and <acronym>
- <em<> and <strong>
- <code and <samp>
- <kbd> and <var>
- <blockquote> and <q>
HTML Lists
This is a short module. There are three types of Lists:
- Unordered lists
- Ordered lists
- Definition lists
Matt demos all of these. In the list rendering demo you see both a deprecated way to control the look of the bullet points and a newer best practice way: using style-sheets.
See this demo of list-style-type from w3schools
HTML Links
This module explains how to link to other documents, and also link within a document.
Anchors act as either a source or target for linking:
- Named anchors are targets
- Anchors with the href attribute are sources
Links can be absolute (entire URI provided) or relative (to the current document).
Matt gives demonstrations of linking to documents and targets, and explains additional link attributes: Language, Relationship, content type and AccessKey
HTML Tables
This module covers table structure, working with data in tables and table formatting.
Inside the <table> element, we may have a <caption> element.
The <thead> element is also inside the <table> element, as are the <tfoot> and <tbody> elements.
One gotcha is the <tfoot> element should go ABOVE the <tbody> tag!
Matt then covers the <tr> and <th> elements for adding table data, and then spanning columns and rows with <td> and <colspan> and <rowspan>
Also explained is width, align (deprecated), border, cell padding, cell spacing and no wrap (deprecated)
This module ends with a table formatting demonstration including fixed widths and percentages.
HTML Images and Objects
This final module describes how to include images and objects in your documents. It also covers fallback and accessibility: for example if the users browser does not support Flash or Silverlight.
There are demonstrations of adding images, and adding objects such as Flash or Silverlight content.
Summary
I have been worked with HTML for almost 20 years, so I already knew the information covered in this course. However, it was very well presented and if you are relatively new to HTML you will get a lot of benefit out of watching this course.
Zombie Code Kill 
Pingback: Front End Web Development Learning Path | Zombie Code Kill