Page 1, Basic stuff to get you started
Open Notepad and copy the following blue lines onto a new page.
Note, in 2006 we are up to html 4, transitional additives and loose application of CSS and java scripts
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>My Page</TITLE>
</HEAD>
<BODY>
This is my page
</BODY>
</HTML>
Now save it, not as a text document, but as a html document. Save it as page1.html in a new folder somewhere (Win3.x users save it as page1.htm). In your Notepad window click File then Save as.
You will be presented with a dialog box. Make a new folder by clicking 'New Folder' ->
Name it whatever you want. Then double click on it to open it up. Where it says File name: type in page1.html Where it says Save as type: make sure it says All Files(*.*)
Hit return and you're done!
Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world can see your creation!
The best way to use this tutorial is to run Notepad and two instances of Netscape (or Internet Explorer). One Netscape window is to contain this tutorial and the other will contain your new page. Just toggle between the three windows. If you are looking at this lesson in Netscape right now, you can open a second instance of Netscape in one of two ways- 1) Find the icon of the html file you just made (page1.html) and double click on it. Or- 2) In Netscape, click on File/Open File In Browser and browse to the file (page1.html).
Now the explanations.
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN" "http://www.w3.org/TR/html4/loose.dtd"> | | | This first line is not technically required, but is a code that tells the browser what version of HTML the current page is written for.
| |
The signs < and > | The arrow sign begins and ends each instruction tag.
Leave one out and the computer can not understand what to do.
| | <HTML> | HTML is the starting tag to every page | |
<HEAD> | The HEAD introduces your page for the web browser |
<TITLE>
My Page
</TITLE> | Every page needs a TITLE
This appears at the very top of the browser window.
Notice the / which means 'close this tag'. | |
</HEAD> | Close the HEAD portion | |
<BODY> | The BODY contains the public part of your site | |
This is my page | Your story in words and pictures | |
</BODY> | Close the BODY tag | |
</HTML>
| Close the HTML tag
|
What you made is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components, even if the web page you write will never be 'on the Internet'.
Extra stuff you may like to know
The HEAD is the place where some more information about your page is placed.
The items I like to use
<META NAME="Author" CONTENT="Elizabeth Janson">
<META NAME="description" CONTENT="My page, a set of HTML teaching notes - up to about 200 characters long">
<META NAME="keywords" CONTENT="HTML, teaching, notes - up to about 1000 characters long">
<META NAME="Generator" CONTENT="Notepad">
<META NAME="distribution" CONTENT="global">
<META NAME="resource-type" CONTENT="document">
<META NAME="copyright" CONTENT="Copyright © 2005 Elizabeth Janson">
A search engine is a program that takes key words, searches a database of Web pages, and gives back a list of pages that might be helpful. Yahoo is a search engine, as is Webcrawler.
Authors of Web sites - remember that you are playing against a search engine. You will play by its rules, not the other way around. These items will not work on all search engines, but will be successful on most.
Search Engines use the META tags to classify your site.
The description is used when the site is listed.
The keywords determine if your site is included in a selection.
It is bad manners to use keywords not contained in your document, and search engines can reject your page if keywords are repeated (this is called spamming).
To help the robots classify your site, you have the possibility of assigning a rating for your pages:
<META NAME="rating" CONTENT="General">
If you are making revisions to your site or updating frequently, it is helpful to ask the robots to revisit your site after a certain time. It is recommended that you use a time frame between 3 weeks to 6 months.
<META NAME="revisit after" CONTENT="30days">
Date is a serious matter - from W3C datetime - gives the format the web spider expects
Exactly the components shown here must be present, with exactly this punctuation.
Year: YYYY (eg 1997) where: YYYY = four-digit year
Year and month: YYYY-MM (eg 1997-07) where: MM = two-digit month (01=January, etc.)
Complete date: YYYY-MM-DD (eg 1997-07-16) where: DD = two-digit day of month (01 through 31)
<META NAME="Date" CONTENT="2005-12-21">
<META NAME="revised" CONTENT="2005-12-24">
Links Getting started with HTML by Dave Raggett, revised 24 May 2005.
Followed by More advanced features Dave Raggett, 29th August 2000
More information - Webmonkey, the friend who knows the Web
Joe Burns has many pages of goodies at http://www.htmlgoodies.com
Or give 'meta tags' to a Search engine and check out some of the offerings.
|