Introduction
This is a basic reference to get you started making a first web page. It is by no means a complete tutorial, but it should give you enough information to put a basic page together, or to troubleshoot a page you have already made. Structure and syntax are emphasised here, rather than design. The most beautifully designed page in the world will be useless (and not very beautiful) if it has missing tags or incorrect links.
The first time I typed a sentence into a web page, viewed it in a browser, and found that my drab black and white tagged sentence really DID appear bold and blue ...I nearly dropped my teeth for joy. I was hooked, right there. HTML is like magic. You type lots of letters and symbols into any plain text editor, and....voilà! In your browser you see fonts, shapes, colors, images; your thoughts light up for the world to share.
The Only Tool you Need
The best way to create your first page is to open a plain text editor, such as Notepad (bundled with Windows), EditPad, TextPad, SimpleText (bundled with the Mac OS), etc. and type your content in there. This can be done offline. Your file is then saved with an .htm or .html extension (this tells the browser that the file is a web page) into a folder on your hard drive. You can test it offline in your browser too, to make sure it looks the way you envisioned it. This method also gives you instant backups of your pages, should you need to edit or upload them again.
Do not use a word processor to create and upload your web pages. Word processors have their own native formatting, much of which is unreadable by a web browser. So even if your document looks great in your local word processor, different formatting rules are required to convert that to HTML. Stick with a plain text editor, since HTML is merely typed text and tags, anyway, as described below.
What is HTML?
HTML (Hypertext Markup Language) is a text-based language, just like your own written language. What makes it all look so pretty in a web browser are the "markup tags" which surround the text. These tags give display instructions to the browser, which then interprets these instructions to display the layout of your page. HTML tags can also give instructions for text size, weight, color, font, etc. Even links to images and other pages can all be done with just plain text typed on a standard keyboard. A web browser such as Netscape, Microsoft Internet Explorer, Opera, etc. is designed to carry out the instructions contained in these tags.
That said, let's get to specifics.
Where to Find Your Website:
Remember that cool username you signed up for? Well, your website address (also called a "Uniform Resource Locater" or URL) will have that name in it. At Crosswinds, your homepage URL is:
http://www.crosswinds.net/~username/ (for Basic or 10/10 accounts) OR
http://username.crosswinds.net/ (for Premium accounts)
Note that this is all small case, including your username. Write your URL down somewhere (inserting your own username of course)--you are going to need it.
Tag structure:
Coding proper HTML is easy... but nitpicky. You don't have to be a rocket scientist to do it well. But you do have to be attentive to detail. Every quotation mark, every opening and closing bracket is crucial, and must be used exactly as you see it here, or your web page may not display properly.
Every web page begins with an <html> tag, and ends with an </html> tag. Within these tags, the page consists of two main sections: the <head> and the <body>. The <head> section contains information about the page, including its required <title>. But....the part of the page which you actually see in the browser is the <body> section.
The minimum requirements for any new web page are:
<html> <head> <title>Title of your page goes here</title> </head> <body>All of your visible page content goes here.</body> </html>
Most HTML tags have an opening (turns the instruction on) and closing (turns the instruction back off) format. The closing tag is simply the opening tag with the addition of a forward slash before the tag name, like this:
<b>This sentence would look bold.</b>But this sentence would be normal weight because the bold tag has been turned off.
Changing the Appearance of Text: The <font> tag.
Even though the <font> tag is slowly being replaced by CSS (Cascading Stylesheets), it is still widely used, and necessary for browsers which don't support CSS fully yet.
The <font> tag can provide instructions for color, size, and/or typeface. Colors are designated in hexadecimal code. Size is designated in relative values from 1 to 6, with "1" being smallest, "6" being largest, and "3" being medium. Typeface is the literal name of the font face you want your text to appear in. To make sure viewers with different fonts installed can see your text pretty much the same way, it is permissible and recommended to include a string of more than one font face, separated by commas. If the browser can't find the leftmost face, it will look for the next one, and so on.
Here is a fully loaded <font> tag:
<font color="0000ff" size="2" face="Verdana,Arial,Helvetica">
The words color, size, and face are the tag's attributes. The codes inside the doublequotes "" are the attribute values.
To use the above tag, put it before the text you are describing, and then close the tag by adding the closing </font> just after the designated text. Example:
<font color="#0000ff" size="2" face="Verdana,Arial,Helvetica">This text is blue, smaller text, and uses the Verdana (alternates: Arial or Helvetica) typeface.</font>
That code would result in this sentence. Isn't that cool?
Linking to another page:
Inside your home page, you may link to various other web pages on your site with the <a> tag, using one of these methods:
<a href="pollyspage.html">My parrot's web page resides in the same directory (folder) as this page.</a>or<a href="subdirectory1/pollyspage.html">My parrot's page is in a subdirectory.</a>or<a href="../pollyspage.html">My parrot's page is in a parent directory.</a>or<a href="../subdirectory2/pollyspage.html">This page is in one subdirectory, and my parrot's page is in another subdirectory of the same parent.</a>
Always address file links with "relative" addresses, as noted in the above examples, using just the filename and its directory location if it resides in a different directory. Do not use "absolute" addresses like "http://www.crosswinds.net/~username/subdirectory/mypage.html" for your own files, because this puts undue strain on the servers, which have to look all the way back to the root directory and work back down to your site each time.
Inserting an image:
Technically, one does not actually "insert" an image onto a web page with HTML. Contrary to the way a word processor works, images on a web page are NOT actually included in the HTML file at all. Images are separate files, which are called by the HTML file in the form of a special image tag. Each viewer's browser combines the HTML pages with the image files referenced in the tags, to display the images on the viewer's screen.
The image tag <img> does not require a closing tag unless you are trying to conform to the newer XHTML or XML rules (more about that soon on another page). There are only 3 image filetypes which are visible in most modern browsers: .jpg, .gif, and .png. If you have a bitmap image (.bmp) or any other image filetype, you must first convert it to one of these before using it on a webpage.
The basic image syntax looks like this:
If you had a photo called "myparrot.jpg", you would insert it into a web page like this:
<img src="myparrot.jpg" width="xx" height="yy" alt="Brief image description">The width and height dimensions are in pixels--by including these numbers, a browser will reserve the right size space for your image and render the faster-loading text around it while the picture is loading.
If you keep your image files in a subdirectory, you would change the above coding to:
<img src="subdirectory/myparrot.jpg" etc.>If your image resides in a parent directory, you would use:
<img src="../parentdirectory/myparrot.jpg" etc.>Background Images:
A particular type of image is actually linked within the <body> tag itself. This is the "background image". This is usually a small image (both in dimension and file size) which is tiled repeatedly behind the main content of your page, and serves as a background for the page. The syntax for a background image is:
<body background="feathers.gif">Note that this link is inside the <body> tag here, and requires only the filename, without the image dimensions.
The basic skeleton for a new web page therefore looks like this:
<html><head><title>Your Page Title</title></head><body background="my_tile.gif" bgcolor="#efefef" text="#000000"><h1>Your Page Heading</h1><p>This is a paragraph. It can include text, images, links to other pages on your site, or links to another site. <b>This is the heart and soul of your web page.</b></p><p>Each paragraph is enclosed in paragraph tags. If you forget to include these, your text will run together. The closing </p> tag used to be optional, but for strict HTML coding, you should use it, as your pages will validate better, and other markup languages, such as XML and XHTML, require it.</p><p>Here is a link to another page on this website:<br /><a href="my2ndpage.html">Click here to see my 2nd page.</a><p align="center">Here is how an image is displayed:<br /><img src="mygraphic.gif" width="88" height="31" alt="Here is my graphic button" title="my graphic button"></p><p>Here is an image used as a link; the viewer can click on the image to activate the link:<br /><a href="myartwork.html"><img src="othergraphics.gif" width="88" height="31" alt="Some other graphics."></a></p><p>You can also break to a new line<br />without starting a new paragraph <br />as is being done here. <br /></p><p>When you are finished inserting everything which will be seen on your page, notify the browser by closing the body tag and the html tag at the very bottom.</p></body></html>
|
That's it! Take a look at the source code of almost any HTML-based web page you find--no matter how complex, any well-formed page still contains the same basic structure outlined above.
Saving and Naming Files
HTML-based web pages must be saved with an .htm or .html extension to be recognised correctly by most browsers. Once you have constructed your page, you should save it (still working offline here) onto your hard drive in the format filename.html or filename.htm.
IMPORTANT:
Your home (or main) page at Crosswinds must be named one of the following in order for it to auto-load when you type your URL (the one you wrote down up there) into a browser:
index.html index.htmFilenames may not contain spaces or character symbols like $,%,#,@," etc. However instead of a space, you may use a hyphen (-) or an underscore (_) as a separator.
File names and directory names are case sensitive...so your links must share the same case as the actual files. "MyParrot.JPG" is NOT the same file as "myparrot.jpg".
Examples of Correct file name syntax (Allowed):
"pollyspage.html" "Pollys_Page.html" "pollys-page.htm"Examples of INcorrect file names (Not allowed):
"Polly'sPage.html" "pollys page.htm" "pollys%20page.html" "pollyspage.xyz"Once your file has been correctly saved, it is ready to be tested in your browser. If it looks the way it should--great and congratulations--you're ready to upload it for all to see and admire! If something is not quite right, look at your code and compare it to what you learned here. See if you left anything out. Even a missing quote or slash in a tag can change the look of a whole page, so you might have to look hard to find it.
Uploading
At Crosswinds, there are two options for uploading files: by using the browser-based File Manager (available to all accounts), or by FTP (available only to premium accounts).
Now What?
If you have gotten this far, and your new page is now visible in your browser, you're ready to learn more about how to change and enhance the design of your page. This includes fonts, sizes, colors, spacing, text formatting, tables, lists, etc..
More HTML Tutorials
The absolute best HTML tutorials I have found are at Joe Barta's "Page Tutor".
I'm not affiliated with Joe Barta, but his tutorials are so well written and fun to work with, that I recommend them to anyone who is just learning HTML and web page design. Barta is that rare combination of a web page designer who is also articulate and can teach. His tutorials are entertaining, educational, and constantly updated to include the latest HTML enhancements. He includes also some handy resources like clip art, a color chart/picker, lists of HTML symbols, and much more. The tutorials can be used online, or downloaded as zip files for offline use. I can't recommend them enough. His basic tutorial may be downloaded for free -- it contains links to some of his more advanced tutorials like Tables and Frames too (which are free to read online, but for which he charges a small membership fee to download).
So, you want to make a Web Page!
A great set of Crosswinds tutorials and resources can be found at the Crosswinds Cadre tutorial site, created by a talented group of long-time Crosswinds support volunteers.
Other good HTML tutorials can be found at HTML Goodies and Sizzling Jalfrezi.
If you have an HTML tutorial which helped you a lot, send us an e-mail telling where it is and why you like it, and it will be added as a reference on future versions of this page.
| TOP of PAGE |