HTML tutorial examples

Basic structure:

• HTML elements, attributes and comments introduction
• Example of white space in HTML
• Document type declaration (DOCTYPE, namespaces)
• Root element (html)
• Document's head section with head element and meta data (head)
• Document's body with inline styling (body)
• Content grouping (div, span)
• Content headings (h1 - h6)
• Address element (address)
• HTML basic page with a header and paragraph (h1, p)
• HTML basic page with a hyperlink (a, div, h1, p)
• Body element with a user created event (body, attribute:onload)

Text formatting:

• Basic paragraph with a header in front (p, h1)
• Paragraph nesting (p)
• Line break (br)
• Preformatted text (pre)
• Phrasing elements (em, strong, dfn, code, samp, kbd, var, abbr, acronym)
• Quotes (blockquote, q)
• Subscripts and superscripts (sub, sup)
• Marking document changes (ins, del)
• Document changing datetime attribute (ins, attribute:datetime)
• Font styling (tt, i, b, big, small)
• Horizontal rules (hr)
• Text direction (bdo)
• Multiple languages in one page with text direction changed (attribute: lang, dir)

Lists:

• Unordered & ordered lists (ul, ol, li)
• Definition lists (dl, dt, dd)

Tables:

• Basic tables (table, tr, th, td)
• Table's caption (caption)
• Rows grouping (thead, tbody, tfoot)
• Columns grouping (colgroup, col)
• Table description attributes (table, attribute: th, td, summary, headers, scope, axis, abbr)
• Tables styling (table, attribute: frame, rules, border, cellspacing, cellpadding, align, valign, char, charoff, span, rowspan, colspan)

Hyperlinks:

• HTML basic page with a hyperlink (a, div, h1, p)
• Hyperlinks and anchors (a)
• Hyperlink referenced for all the page (base, a, attribute: target)
• Character set and hyperlink's language reference (attribute: charset, hreflang)

Images & embedded media:

• Images (img)
• Problems with image rendering (img, attribute: alt)
• Embedded flash animation (object, param)
• Image maps (area, map)
• Image and image region (map) with source defined with the base path (base, img, map, area, attribute: ismap, target)

Frames:

• Frames (frameset, frame, noframes)
• Inline frames (iframe)
• Frames styling (frameset, frame, attribute: noresize, marginwidth, marginheight, scrolling, frameborder)

Forms:

• Basic forms (form, fieldset, input)
• Structural elements (fieldset, legend)
• Input fields (input)
• Buttons (button)
• Select menus (select, optgroup, option)
• Text areas (textarea)
• Field labeling (label, input)
• Main attributes used in a form (attribute: type, name, value)
• Tab navigation and access keys in a form (attribute: tabindex, accesskey)
• Expanded form styling and properties (form, attribute: action, method, enctype, accept, accept-charset, checked, readonly, disabled, multiple, label, selected, for, size, maxlength)
• Input field with a user generated event (input, script, attribute: onkeyup)
• Form with form submitted, field changed and select menu blurred even (input, select, attribute: onblur, onchange, onsubmit)

Document's head section:

• Document's title (title)
• Meta data (meta)
• Document's relationship, link to external style sheet (link)
• Link to previous and next chapter of the document (link, attribute: rel, rev)
• Basic path information, link to images (base, img)
• Base path for hyperlink, image and image map (base, a, img, attribute: href, target)
• Internal style sheets (style)
• Internal scripting, client side (script, noscript)

Language and character set:

• Choosing language (arabic) and text direction (right-to-left)
• Multiple languages in one page (attribute: lang, dir)
• Character set and hyperlink's language reference (attribute: charset, hreflang) example

Styling:

• Example with Internal style sheets (style)
• External style sheets inserted (link)
• Combination of external, internal and inline styles (link, style)

Scripting, client based:

• Changing background colors with internal script (script, noscript)
• Calculate result with combination of external and internal scripting (script, style)
• User interaction with multiple events and internal scripting (script, attribute: onclick, onmouseover, onkeyup)

Attributes:

• Core attributes in a basic HTML page (attribute: id, class, style, title)
• Element's type, name and value applied in a form (attribute: type, name, value)
• Internationalization or i18n attributes (attribute: lang, dir)
• Character set and hyperlink's language reference attributes (attribute: charset, hreflang)
• Accessibility & descriptive properties (attribute: tabindex, accesskey, alt, rel, rev, summary, headers, scope, axis, abbr, datetime)
• URI and locations (attribute: href, src, longdesc, usemap, target, nohref, cite)
• Physical properties (attribute: shape, coords, ismap, width, height, rows, cols)
• Tables styling (attribute: frame, rules, border, cellspacing, cellpadding, align, valign, char, charoff, span, rowspan, colspan)
• Frames styling (attribute: noresize, marginwidth, marginheight, scrolling, frameborder)
• Embedded objects (attribute: classid, codebase, codetype, data, archive, declare, standby, valuetype)
• Forms interaction (attribute: action, method, enctype, accept, accept-charset, checked, readonly, disabled, multiple, label, selected, for, size, maxlength)
• Standard intrinsic events (attribute: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup)
• Extended intrinsic events (attribute: onload, onunload, onfocus, onblur, onselect, onchange, onsubmit, onreset)

Colors:

• Basic HTML colors presented in a table