Creating a Web Page

HTML Basics  |  Formatting Text  |  List Formatting  |  Special Characters  |  Useful Links

In 1989 Timothy Berners-Lee and other researchers at the CERN Nuclear Research Facility in Switzerland developed a system of hypertext documents to facilitate moving from one document to another on a computer network. Their creation laid the foundation for today's global 'network of networks' known as the World Wide Web.

What distinguishes hypertext from ordinary text files is markups, hence Hypertext Markup Language (HTML). In HTML the 'lesser than' and 'greater than' symbols are reserved to distinguish computer instructions from the text in a file. For example, an HTML file begins with the tag <html>. This tag informs the browser software of the file type. Tags and their contents are not displayed in the browser window. Another form of tag, an anchor (also termed a link) with a hypertext reference such as <a href="index.htm">, enables the movement of the browser from page to page on a drive, a computer, a network, or the World Wide Web. This development has transformed the way people the world over communicate information. The fundamental medium of this new form of information exchange is the Web page.

Web pages are also called hypertext documents. Browsers typically display links using different colored text and underlining, hence hypertext. Selecting the hypertext link, typically by clicking it with a mouse pointer, directs the browser to retrieve the referenced document, or move to another position in the same document. The document can be on the same drive, computer or network, or on an entirely different computer elsewhere in the world. The Web browser, the software application that finds and displays files, accesses a Web server to retrieve remote documents. A Web server is a computer connected to the World Wide Web which provides access to files. Browsers can be text-based, speech capable, Braille, or, most commonly today, graphical. Browsers are available for virtually every computer platform. HTML works on different platforms, a feature known as portability. Transfer protocols enable communication between different platforms.

Browsers allow the user to control the appearance of Web pages, such as the face, size and color of text and links, or whether or not images are loaded. Each browser displays pages somewhat differently, or interprets tags differently. Different platforms do not render pages exactly the same even when the same browser is used. Therefore, an important aspect of Web page creation is previewing your pages in different browsers and on different platforms. Be sure to check the preferences settings of the browsers before you do this. Set them to use page-specified fonts. To see if the fonts you specified are displaying you might set the browser to a different font. The adjacent graphic illustrates the Fonts Preferences dialog box in Netscape Navigator 4.7.

Like any code, HTML is governed by rules, called its syntax. Specifications and standards have been developed by the World Wide Web Consortium. HTML 1.0 prevailed until 1995, when HTML 2.0 released. Since 1999 HTML 4.01 has been the standard, superseding HTML 3.2. Standards reinforce cross-platform portability and multiple browser support. If you use code released with HTML 4.0, older browsers may not support your tags. You may also wish to test your pages in older browsers.

HTML files are simple text documents and can be created with text editors. Newer versions of word processors will save files as HTML documents. Software is available to convert files to HTML or to create HTML as you work in a 'What You See Is What You Get' (WYSIWYG) editor. HTML editors are very convenient, but it is also very important to learn the code and develop the capability to write or edit code. This page focuses on learning basic HTML code. To begin creating a Web page with an HTML editor I suggest using Netscape Composer first, a free software, or, for a more advanced editor, you might try a 30-day free trial of Dreamweaver or GoLive.

HTML Basics

A basic HTML file will have two distinct parts, the <head> and the <body>. Only the <body> displays in the browser. The <head> and <body> tags are not strictly required, but they are very useful in organizing the page. The <head> section tags contain information about the page, tags such as the <title> which instructs the browser what to display in the title bar. The keywords used by search engines to database the Web page's contents (and by Web page authors to get their pages noticed by search engines) are also part of the <head>. Here follows a simple HTML page's code. This page has the title "Hello World" and the browser window displays the same text as page contents.

<title>Hello World</title>
Hello World

To create this page you simply type this code in a word processor and save the file as a text file with an extension of .htm or .html. If you do not save as a text file other characters may appear in the browser window. Notice that the <html>, <head>, and <body> opening tags all have closing tags. Some tags require closing tags, others do not. Browsers apply opening tags that require closing tags until the closing tag is encountered. A slash ( "/" ) distinguishes the closing version of the tags.

Formatting Text

Tags can contain elements and attributes. The text "Hello World" can be formatted with attributes. Color is an attribute of a font. HTML uses a hexadecimal code number (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) to represent red, green and blue colors. To format the text as red in color the following tags are added:

<font color="#FF0000">Hello World</font>

In this example the "FF" represents the red, and the "00"s are the green and blue components. White is #FFFFFF and black is #000000. Browsers also understand 16 predefined color names. About one in ten Internet users are viewing pages with 8-bit (256 color) monitors. If you want your pages to display on these monitors exactly as you created the colors, you need to limit your color use to the 216 so-called "browser safe colors."

Paragraph is an HTML element. The paragraph element results in a blank line following the end of a paragraph. A return without a blank line is accomplished with the <br> (break) tag. In HTML text automatically wraps. Alignment is an attribute of a paragraph. In the first example the paragraph aligns left and the attribute is in the paragraph tag. In the second example the paragraph aligns center and the alignment attribute is in its own tag and requires a separate closing tag.

<p align="left">Hello World</p>

<p><center>>Hello World</center></p>

Face and size can also be attributes of the font tag. The following example of the font tag has two attributes, one specifying a font face and the other increasing the size of the text. Since computers can have different font suitcases, and different platforms have different standard fonts, it is recommendable to specify a font family instead of a single font face.

<font face="Verdana, Arial, Helvetica, sans-serif" size="+2">Hello

Size and emphasis of text can also be controlled using "header" formatting. The title in the <body> of this page is formatted as a header, and the size is controlled with a Cascading Style Sheet. There are six levels of headers, <h1> to <h6>, as illustrated in the table that follows. Header tags also act like paragraph tags in that they are followed by a blank line. The title is enclosed in header tags as follows:

<h1>Creating a Web Page</h1>

In this example the header is also italicized.

<h1><i>Creating a Web Page</i></h1>

In the next example the bold tag <b> and a size tag are used to emphasis text. The tags <em> and <strong> do the same, but are less commonly used. Other uncommon character tags are <code>, <cite> and <var>. They are presented in the table following the code sample.

<b><font size="+1">Creating a Web Page</font></b>

Character Formatting Tags















The body tag can include attributes controlling page background color or background image file, text and link colors, and margins. In the following <body> tag "grey.jpg" is the background, the text is black, colors are specified for links, visited links and active link, and the width margin is 30.

<body background="grey.jpg" text="#000000" link="#000099" vlink="#660066" alink="#660000" marginwidth="30">

The source code in this page is indented using the <blockquote> tag.

<blockquote><p align="left">Text here.</p></blockquote>

List Formatting

Another method of setting off text is list formatting. The <ol> tag creates ordered lists. A default ordered list is a list in numeric order. The type attribute will modify the symbol of the list items. For example, the tag <ol type=a> creates a list with lowercase letters instead of numbers. Other types include the default "1" for numerals, "A" for uppercase letters, and "i" and "I" for Roman numerals. The <li> tag creates list items. The <li> tag does not need to be two-sided.

Here is an ordered list followed by its source code:

  1. apples
  2. oranges


The <ul> tag creates an unordered list. The type attribute can define the bullet shape. Using a type attribute (disc, circle, square) in a <li> tag will override the type in the <ul> tag. Here follows an unordered list with default bullets, followed by its source code.

  • one
  • two
  • three

<li>one </li>
<li>two </li>

The <dl> tag creates a definition list. A definition list has a unique form of indentation. An item is followed by an indented definition. This example is followed by abbreviated code. Notice the difference between the term tag <dt> and the definition tag <dd>.

a round, firm fleshy fruit with a green, yellow or red skin.
a reddish-yellow, round, edible citrus fruit, with a sweet, juicy pulp.

<dd>a round....</dd>
<dd>a reddish-yellow....</dd>

You can also nest one type of list in another list.

  • Apples
    • fleshy
    • temperate climate
  • Oranges
    1. juicy
    2. tropical climate

<li>temperate climate</li>
<li>tropical climate</li>

Special Characters

One of the advantages of plain text is the small file size due to 8-bit coding. A bit can be a one or a zero, in other words a binary number system. Two to the eighth power, or 256, is the possible number of combinations in 8-bit processing of binary input. Of course, in a global community with numerous languages, scripts, and symbols, some method of displaying more than 256 characters is essential.

Special characters are represented by code numbers or names enclosed by a form of markup, an ampersand (&) and a semicolon (;). These two characters, like the 'greater than' (>), 'lesser than' (<), and quotation (") symbols, have reserved meanings in HTML because they are used in the code. To display an ampersand in the browser window the code must read &amp;, while the 'greater than' and 'lesser than' symbols are displayed by &gt; and &lt:. The number for the copyright symbol is 169 and the code name is copy, so it is represented in HTML as &#169; or as &copy;. Because browsers use only one space even if a series of spaces occur in the code, a special character is used to insert spaces that are not ignored, the non-breaking space character (&nbsp; or &#160;).

A list of special character codes is available online. This link leads to the character entity reference for the ISO-8859-1 character set, the character set used for Western (Latin 1) languages such as English. You should specify your character set in the <head> with a meta tag as follows:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

In order to display the markup symbols (reserved characters) in this page the source has to use special characters, so the meta tag (abbreviated) appears as follows in the code:

&lt;meta http-equiv=&quot; ...... iso-8859-1&quot;&gt;

Useful Links

World Wide Web Consortium. The official specifications.  This is W3C's home page for HTML. Here you will find pointers to specifications for HTML, guidelines on how to use HTML to the best effect, and pointers to related work at W3C. Also available, a Getting Started with HTML Tutorial site.

HTML 4.01 Specification.  This specification defines the HyperText Markup Language (HTML), the publishing language of the World Wide Web.

The XHTML 1.0 Specification, a reformulation of HTML 4 as an XML 1.0 application, is the current W3C recommendation.

  • HTML Document Representation, The Document Character Set, Character encodings, Choosing an encoding, Specifying the character encoding, Character references, Numeric character references, Character entity references.
  • Index of Elements
  • Index of Attributes
  • Character entity references in HTML 4.  Character entity references for ISO 8859-1 characters, character entity references for symbols, mathematical symbols, and Greek letters, character entity references for markup-significant and internationalization characters, and their lists of characters.
  • Guidelines offered by the World Wide Web Consortium, to guide developers of accessible sites.

Browser Safe Colors

HTML Documentation and Beginner's Guide to HTML. HTML tutorials.