Introduction to HTML

by M. Douglas Wray

Click here, Press key to advance.

M. Douglas Wray

HTML: A Brief History

  • 1989 – Tim Berners-Lee invents HTML basing it on SGML
  • 1992 – NCSA* creates Mosaic browser
  • 1993 – Lynx browser invented
  • 1994 – IETF** sets up HTML work group,
    HTML 2 spec released,
    WWW consortium forms
  • 1995 – HTML 3 spec released
  • 1996 – Scripting and standardization added
  • 1997 – HTML 3.2 released and endorsed by W3
  • Spring 1998 HTML 4.01 ready for distribution
  • More details here
  • *National Center for Supercomputing Applications
    ** Internet Engineering Task Force

HTML: What IS it?

  • HyperText Markup Language
  • 'Tags' around text - 'markup'
  • Dialect of SGML

HTML: What’s it for?

  • Building 'structured' and 'hyperlinked' documents
  • i.e. - The Internet
  • Controls and presents content

HTML: The Language

Note: this list is extensive,
we'll be discussing those you'll use the most.

Inside a Document's 'Head'

  • <!DOCTYPE> - defines browser rendering rules
  • <html> </html> - the document 'root'
  • <head> </head> - page header - unseen but powerful
  • <link /> - external resource - CSS, JavaScript
  • <script> </script> - embedded JavaScript
  • <meta /> - author, description, keywords, etc.
  • <body> </body> - the visible page
More reference

HEAD's up - LINKs and SCRIPTs

  • <link /> - external resource - usually CSS
  • <link rel="stylesheet" type="text/css" href="theme.css" />
  • <script type="text/javascript" src="url"></script>
More reference on Optional Attributes

I never META a webpage I didn't like…

  • "Meta" means 'data about data'
  • Crucial for Search Engine Optimisation (SEO)
  • Affects appearance of result in Google
  • Controls search engine behavior (NOROBOTS)
  • Do's and Don'ts
More information on the META tag

Meta Description

<meta name="description" content="All the current information about dog breeds." />

  • 25 words or less
  • Better if it contains keywords
  • Will appear as descriptive info below link in Google
More information on the META tag

Meta Keywords

<meta name="keywords" content="dog, breed, dog breeds" />

  • 25 words or less - Don't repeat!
  • Use singulars and desired combinations
  • Put your keywords IN your page text
  • Run Google searches to see if sites LIKE YOURS are found
More information on the META tag

Meta Author

<meta name="author" content="M. Douglas Wray ©2012" />

  • Be concise
  • Good place to include copyright
More information on the META tag

BODY of work

  • Defines the document's body
  • Visible part of HTML document
  • There are EVENTS - onload/onunload/etc
More information about BODY's attributes

HTML: Typical structure

<p>Paragraph text. Lorem ipsum dolor sit amet, <i>consectetur adipiscing</i> elit. Aenean ultrices. </p>
<!-- Unordered List -->
<li>List item<li>
<li>List item<li>
<li>List item<li>


Defines text to be a header
H1 - H6 (largest - smallest)

  • Tells search engine what is most important on page
  • Used only for headings, not within text
  • Should be used in order to define structure


Paragraphs are the most common block element.
<p>Paragraphs have all the standard attributes:
font-family, font-size, line-spacing,
padding, margin, etc.</p>

  • Can have CSS classes

Types of Lists

What's a 'Hyperlink'?

  • Connects webpages via clickable text or images
  • Also called 'anchors'-can point to marked place on a page
  • Can open new windows

<a href="url">Linked/clickable text</a>
Anchor point : <a id="subject" name="subject"></a>
Jump to anchor: <a href="#subject">Go to anchor</a>
<a href="url" target="_blank">New window</a>


  • <img src="url" alt="alternate text" height="yy" width="xx" />
  • Can have JavaScript events
  • "Hotlinking" and "Leeching" - don't!
More information about the IMG tag

Images as links

<a href="url"><img src="url" /></a>
<a href="url"><img src="url" style="border:none;" /></a>

Images as link Maps

<img src="url" usemap="#mapname">
<map id="mapname" name="mapname">
<area coords="0,0,80,80" href="url">

Example 1

Step by Step How-To


More information about TABLEs

DIVide and conquer!

  • DIV = 'division' of page - 'block' element
  • DOM = Document Object Model (more info)
  • Generic containers - DIV and SPAN (more info)
  • "DIV-itis"
Great examples of DIVs and CSS in action: The CSS Zen Garden


CSS in use

  • <p style="color:red;">Inline styled paragraph</p>
  • External Style - p {color:red;}
  • .warning { color:red; font-style:italic; font-weight:900; }
  • <p class="warning">Danger Will Robinson!</p>
  • My list of CSS links

DOM - Document Object Model

Allows dynamic access to and update of the
content, structure and style of documents.