HTML Part I

Today we're going to learn some basic HTML and put together a very simple web page.

Why Should We Know HTML?

As a technical writer, you may be asked to create/update web content, such as on a company intranet, or produce complete documents in HTML. Why not just use FrontPage or DreamWeaver, and forget learning HTML? Because you will not impress anyone if you can't correct one of the many quirky things these and other WYSIWYG ("What You See Is What You Get") web design programs do.

WYSIWYG web design programs are extremely useful in cutting down on time. However, they can often:

add excess code to your document, which can result in longer download times.
choke on large documents, and just refuse to open them.
make a huge mess, which can be impossible to correct unless you know HTML.

HTML is simple to learn and use, and knowing it can make you look like a pro.

General Information

Web pages are made up of tags, and the tag name defines what it contains. For instance, there is a tag to define text as being Heading 1, and another tag to define text as a paragraph. Tags are always enclosed in angle brackets.

- paragraph tag

You must also define when a section ends, and this is done with an end tag. An end tag is just a tag with a forward-slash before the tag name. This ending paragraph tag would be placed at the end of a paragraph.

So a complete paragraph would be written in HTML as:

This is a paragraph.

Basic HTML Page Structure

All HTML pages have the same basic structure.

<!DOCTYPE html>
<html>
 <head>
 <title> </title>
 </head>
 <body>
 {... contains other HTML tags that hold the document content ...}
 </body>
</html>

<!DOCTYPE html> is a declaration that tells browsers what version of HTML is being used. This is required for HTML 5.

The <html> tag defines the document as being in html format; one that can be read by web browsers. All other tags must be nested within this tag.

The <head> section holds all of the heading information, most of which is only read by web browsers. It contains the <title> tag, which holds the document title. This title is displayed in the title bar of web browsers, and is also displayed in search engine descriptions of the web page.

The <body> section holds all of the document content. All document content must also be enclosed within appropriate tags.

Basic Document Structure

HTML documentation, like any other documentation, can be dissected into the following parts:

the overall document is made up of sections and sub-sections. Each section is a logical grouping of related content.
each section is made up of a heading followed by other paragraph-level elements (paragraphs, lists, tables, etc.)
each paragraph-level element may contain character-level elements, such as those used for bold, italic, and underline.

The following illustrates this:

Basic HTML Tags

Section Level Tags
<header>	This is a type of section that holds introductory content, such as the page title, subtitle, version history, author, publication date, logo, etc.	This is a my header title This is some header content
<footer>	This is a type of section that holds copyright details, contact information, author, etc.	This is a my footer title This is some footer content
<section>	Defines a generic section. Typically each section has a heading.	This is a heading 1 in a section This is a paragraph in a section.
<div>	Defines a generic element used to group content in a document	This is a div section This is another div section
Paragraph Level Tags
<h1> to <h6>	Defines heading levels 1 to 6	This is a heading 1 This is a heading 3
<p>	Defines a paragraph	This is a paragraph This is another paragraph
<ul>	Defines an unordered list. This tag contains a <li> tag for item in the list.	An unordered list item
<ol>	Defines an ordered list. This tag contains a <li> tag for item in the list.	An ordered list item
<dl>	Defines a definition list (a list of terms and explanation of the terms). This tag contains a <dt> tag for the definition term, followed by the <dd> tag for the definition description.	Definition term Definition description
<blockquote>	Defines a blockquote (a paragraph that is indented equally on both the right and left sides)	This is a blockquote. This is a blockquote. This is a blockquote. This is a blockquote This is a very long paragraph. This is a very long paragraph. This is a very long paragraph.
Formatting Character Level Tags
<b>	Defines bold text	This is bold text
<font>*	Defines text font, size, and colour.	This is text within a <font> tag
<i>	Defines italic text	This is italic text
<big>	Defines big text	This is big text
<small>	Defines small text	This is small text
<span>	Defines an inline section	This is span text. This is more span text.
<sup>	Defines superscript text	^{This is superscript text}
<sub>	Defines subscripted text	_{This is subscript text}
<u>	Defines underlined text	This is underlined text
Descriptive Character Level Tags⁺
<del>	Defines deleted text (like in track changes)	~~This is deleted text~~
<ins>	Defines inserted text (like in track changes)	This is inserted text
<acronym>*	Defines acronym term	HTML
Document Formatting Tags
<br/>^**	Inserts a single line break
<hr/>^**	Defines a horizontal rule
<pre>	Defines preformatted text; used to document code	This is preformatted text

^*These tags require attributes, which will be covered next week.

⁺These tags should only be used to enclose text appropriate to their meanings. So, for instance, do not use the <ins> to simply display text as underlined.

^**These tags are empty - they do not contain content. They are written as combination start-end tags.

Section Level vs. Paragraph Level Tags

Both section level and paragraph level tags can appear directly within the <body> tag in your HTML document. However, section level tags can have paragraph level tags within them, while the reverse is not true. For example, a section can contain headings and paragraphs, but headings and paragraphs cannot contain sections.

Section level tags are not required, but are useful for creating well structured documentation.

Paragraph Level vs. Character Level Tags

Paragraph level tags can appear directly within the <body> tag in your HTML document (they can also appear within tables and forms - more on these in later weeks). These tags cause a line break to be inserted after them.

Character level tags are used within paragraph level tags or within other character level tags. They should not directly within the <body> of your document. They are "inline" tags, and do not result in a line break being inserted.

Note that paragraph and character style concepts are used in all word processing tools (Microsoft Word, FrameMaker, etc.), so it is a good idea to have an understanding of the differences.

Starting and Ending Paragraph and Character Tags

When you create an HTML document, all text must be within a tag. The tag defines what the text is (i.e. a paragraph vs. a list, or bold vs. italic). There must be a start tag, which comes just before the text, and an end tag that comes just after. For example:

This is an HTML paragraph, and it contains bold text.

Tags that do not contain content, such as (a line break), <hr/> (a horizontal rule), and images (to be covered later), can be written as a combination start tag-end tag using this syntax: <tagName/>

Creating HTML Documents

All web pages in this class are created using a text editor such as Notepad, which is located in Start > Programs > Accessories > Notepad.

To create your web page:

Open Notepad (Start > Programs > Accessories > Notepad, or type "Notepad.exe" into the Windows Search).
Create the basic HTML structure (see "Basic HTML Document Structure" above).
Add tags within the <body>, and insert content within those tags.

For example, type "This is my first HTML paragraph." within the <body> and </body> tags

Be sure that all tags have closing tags as well. Most closing tags are in the format </tagname>, but remember that empty tags, such as   and <hr/>, can be written as combination start and end tags.

Save your file as an *.html file. To do this:

From the File menu, select Save As.
Select All Files in the Save as type drop down.
Enter a file name as filename.html in the File name text box, where filename is the name of your file.
Click Save.

Viewing your web page

Chrome:

Press Ctrl + O to access the Open dialog, and then click Browse.
Navigate to your saved HTML file.
Click Open and then click OK.

Internet Explorer:

From the File menu, select Open... and then click Browse.
Navigate to your saved HTML file.
Click Open and then click OK.

FireFox:

From the File menu, select Open File....
Navigate to your saved HTML file.
Click Open and then click OK.

You can also drag and drop your page into your browser window.

In Class Assignment...

Using Notepad, create a web page that has at least 3 sections within it.
Use at least 1 of each of the tags listed in the table above (only 2 levels of headings are required though). Note that the content is not important, but the structure of the document is.
Save your file with the html extension.
Show me your work when you are finished so I can check you off.