What is your name?
Who are you calling?

Sample Web Page

Brief description
A random photo, maximize your browser to enlarge.

Frank da Cruz
Sat Jan 17 12:07:32 2004

CONTENTS

  1. Creating a Web Page
  2. HTML Syntax
  3. Special Characters
  4. Converting Plain Text to HTML

1. Creating a Web Page

This page was typed by hand. Anybody can do this, you don't need any special "web creation" tools or HTML editors, and the pages you make can be viewed from any browser. To see how this page was made, choose View Source (or View Page Source, or View Document Source) in your browser's menu. A simple web page like this one is just plain text with HTML commands (markup) mixed in. HTML commands themselves are plain text.

When you're just learning and want to experiment, you can do everything on your PC. Create a new directory ("folder") for your website, and then put the web-page files (HTML plus any pictures) in it. Use NotePad or other plain-text editor (not word processor) on your PC to create an index.html file, which you can view locally with your Web browser. (You can also use word processors such as Word or WordPad if you save in "plain text", "text", "text document", or "text document MS-DOS format".) Later I'll explain how you can install your web site on the Internet.

Example for Windows:
Move your mouse cursor to the desktop. Right-click, choose New, then choose Folder, and a "New Folder" appears, with its name highlighted. Type "Web" to change the folder's name to Web (or anything else you want). Then Start -> Run and type "notepad" to start NotePad. Now you can create your first Web page.

2. HTML Syntax

Web pages are written in Hyper Text Markup Language (HTML). HTML has three special characters: <, &, >. An HTML command is enclosed in <...>, for example <p>, which is a paragraph separator, or <b> ("begin bold") and </b> ("end bold"). So the following HTML text: 

This sentence contains <b>bold</b> text.

produces:

This sentence contains bold text.

A Web page starts with a series of HTML commands, and ends with a few more. The contents go in between: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sample Web Page</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#ffffff" text="#000000">

(Contents go here) 

</body>
</html>

The first line (DOCTYPE) specifies which language the page uses; just copy this line1. The next line, <html>, starts the page, and is matched by the last line, </html>, which closes the page. <head>, starts the heading, which contains a title to be displayed on the browser's title bar and a declaration of the character set (usually US-ASCII, ISO-8859-1, or UTF-8). </head> closes the heading.

The <body> statement starts the body of the document and can contain specifiers for color and other attributes. This one chooses black writing on a white background. The body is closed by </body> statement.

As you can see, most HTML commands (but not all!) come in begin-end pairs: <b>...</b>, <head>...</head>, etc. The closing part of the command has a slash (/) between the < and the first letter of the command.

Blank lines and line breaks are ignored. The browser automatically "flows" your text into lines and paragraphs that fit in its window. Paragraphs must be separated by <p>. Line breaks can be forced by <br>.

Example for Windows:
Use the mouse to copy the HTML above into NotePad. Then save the file (File -> Save As...) in your Web directory as index.html. Suppose your Windows username is Olga. Then (depending on which version of Windows you have) this might be: 

C:\Documents and Settings\Olga\Desktop\Web\index.html

Now to see your new web page, just double-click on the Web folder and then double-click on index.html.

Now you're ready to start adding "content" to your web page. Go back to NotePad and replace the title and "(Contents go here)" with whatever you want. Any time you want to see the result, use File -> Save in NotePad and then click the Reload button on your browser.

The next sections tell how to achieve different kinds of effects.
__________________

  1. HTML 4.01 is chosen because it supports tables (new to HTML 3.2) as well as a couple other desirable features, such as the ability to specify an image width as a percentage of the Browser's window width, and a bunch more character entity symbols such as &euro; (new to 4.01). Otherwise we would stick with the oldest available verifiable version, which is 2.0.