Introduction to HTML

by M. Douglas Wray

Click here, Press → key to advance.

M. Douglas Wray

Private consultant and trainer - Personal site
Previously webmaster for CU Alumni Assoc.
Focus: CSS design and WordPress

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

HTML 4.01 / XHMTL Reference
http://www.w3schools.com/tags/
HTML Cheat Sheets

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

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

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

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
Example

More information about BODY's attributes

HTML: Typical structure

<h1>Header</h1>
<p>Paragraph text. Lorem ipsum dolor sit amet, <i>consectetur adipiscing</i> elit. Aenean ultrices. </p>

<ul>
<li>List item<li>
<li>List item<li>
<li>List item<li>
</ul>
Example

Headers

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

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

Unordered lists - bulleted
Ordered List style types
CSS controls for lists
list-style:none; < used to surpress bullets
CSS can control order of types when nesting
ULs often basis of web navigation. (example)

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>