Step 01: A Hello World Page
Welcome!
Welcome to the WebHints Tutorial. Over the following pages, you'll find out, step by step, how a web is created from scratch.
Please Adjust Your Browser Window Width
Because these tutorial pages contain lots of verbatim text, and because some browsers cause difficulties when such verbatim text is displayed within tables, the text of these tutorial pages has not been "wrapped" into a narrow margin (as it should be). To make the text easier to read (not so wide), please reduce the width of your browser window right now to a width that you find comfortable reading.
A Minimum Web
A web consists of a collection of "pages" with each page (almost always) begin represented by a single HTML file (.html). Usually a web is stored in a single directory as a collection of .html files and other graphic and media files.
We start the tutorial with a bare minimum web consisting of a
single HTML file called index.html. Here it is:
<HTML>
<HEAD>
</HEAD>
<BODY>
Hello world.
</BODY>
</HTML>
To see what the page looks like, click here (use your browser's BACK button to return to this page afterwards). You should see a plain grey page with "Hello World." in small writing in the top left corner.
As you can see from the above HTML code,
the HTML text consists of matching pairs of
TAGS (e.g. <HTML>..</HTML> that
define the structure of the document. In HTML the characters
"><&" are used to delimit tags. If you want
such characters to appear in a web page, you have to "escape" them.
< means <
> means >
& means &
The tags in the "Hello World" index page above divide the HTML source into two parts: a HEAD and a BODY. The body part of an HTML page contains the actual content of the page. In this case, the content is the text "Hello World" which will appear if the page is accessed. The head part of an HTML page carries information ABOUT the page. In the page above there is no such information, but we will be adding some in later steps.
The name index.html is actually a special name because it is one of a small set of default file names that web servers look for if the web surfer does not specify a file name. So if you put the above index.html file in a directory pointed to by the URL ../../webhints/tutorial/step01/ then if someone types ../../webhints/tutorial/step01/ into their web browser, they will still get the index.html page. Thus, the single index.html page above really is a self-contained web.
That's all there is to this step!
Surfing The Web Under Construction
At the bottom of each "step" page in this tutorial, you'll find a table such as the one below. Each table contains hyperlinks to a copy of the developing web as it is at the end of the step. The left column contains a list of the files in the web, with each filename hyperlinked to a page that displays the HTML code for that page. The middle column contains links to an actual copy of the web as it is at the end of the step. The right column indicates which pages were modified during the step. Here is the table for the tiny web built so far. So far, there is just one file, but in later steps there will be many more. To enter a multi-file web through the "front door", surf the index.html file.
|
