Posted on by Glenn

CMW: Creating an HTML Document

Creating and Maintaining a Website: Creating an HTML Document

An HTML page has five components that we can consider mandatory:

<!DOCTYPE…>
This tag defines the “flavor” of HTML used in the web page.  Used for validation.  Technically required, but not universally implemented

<html>
This tag defines the boundaries of the HTML document.  The “parent” container for the entire page.

<head>
A container for information pertaining to the web page, including <title>, scripts, styles, and metas.

<title>
Used to identify the content of a document for users who reference the document out of context; <title> should reflect the nature of the document.

<body>
Home of the document’s message.  In general, if the user will experience or interact with a piece of information, it will be in the <body>.

META Tags

Pages may require other information, as well.  Most quality sites use <meta> information to provide information about individual pages.  This information might include:

  • Description
  • Keywords
  • Character Set

Meta tags should precede other nested elements in the <head> of a document.

(X)HTML Code Example

The following code is written in XHTML.  This code would be appropriate for most informational websites.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>
The Title of Your Page Appears on the Browser’s Title Bar
</title>
</head>
<body>
The content of your page goes here. That includes text, images, links—the “message” you want to convey.
</body>
</html>

DOCUMENT TYPE DEFINITION (DTD)

Document Type Definitions are documents that contain definitions for each element in a document.  By referencing the DTD associated with an HTML or XHTML document, a browser can determine acceptable definitions for markup tags and attributes.

HTML 4.01 DTD

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>

HTML5 DTD

<!DOCTYPE html>

XHTML 1.0 DTD

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Document Type Declarations are easily managed in Dreamweaver and other GUI authoring tools; in Notepad, you have to type them yourself.

To Do: View HTML Code

  • In a browser, browse to a web page as directed by your instructor.
  • From the View menu, select Source or Page Source.
  • In Internet Explorer, the source code for this page opens in Notepad.  In other browsers, the code opens in a read-only window.

What is the DTD for this document?

What is this document’s title?

(X)HTML Editors

You can create web pages with a number of different tools, generically known as HTML editors.  In this class, we’ll use several different tools, including Notepad or Text Wrangler and Dreamweaver.

Creating an HTML Page in Notepad or Text Wrangler

Creating an HTML page in Notepad is reasonably simple.  To create an HTML page in Notepad, simply enter the material you want to include in your open Notepad document, and then save as an HTML page.  The material you include should consist of a hybrid of content and markup.

Saving Your HTML File

Saving your HTML file is really no different than saving a file in any other application.  The trick is good file management.  As we move through the course, note where your files reside in the file system.

  • Three Questions:
    1. Where does it go? (Folder)
    2. What is it called? (File Name)
    3. What is its file type? (File Type)
  • Absolutely, positively do not allow spaces in file or folder names!
  • Use .htm or .html extension for HTML pages (static pages)
  • “Save” for changes
  • “Save As” for new files

To Do: Open Notepad or Text Wrangler

In Notepad or Text Wrangler, enter the following HTML page structure and content (you can open  html2-code > chapter 2 > web_site_files > 01skeleton > index.html ):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
</head>
<body>
</body>
</html>

There is nothing on that page that will show up in the browser. Close it without saving.

Open html2-code > chapter 2 > web_site_files > 02_setting_a_title > index.html. This file has a title and some text on the page.

  • Save the file into your root folder as index.html
  • From the file menu, choose save
  • In the Save As dialog box, enter index.html in the file name field
  • View the page in your browser

Key Concepts:

<title>Bubble Under – The diving club for the south-west UK</title> appears in the browser’s top bar

<p> Defines a paragraph.

<h1> Defines a top level heading

meta elements: See page 28-9 and the note about UTF-8 on page 32.

To Do: Add Content to a Web Page

Add the following content to your page, before the closing <body> tag.

<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK – let’s make a splash!</p>
<h2>Welcome to our super-dooper Scuba site</h2>
<p>Glad you could drop in and share some air with us! You’ve
passed your underwater navigation skills and successfully
found your way to the start point – or in this case, our
home page.</p>

Save and refresh the page in your browser.