Introduction: This is a beginner's guide to HTML. While you won't learn everything there is to know about creating your own web page, this will definitely get you started in the right direction.
Contents:
HTML means Hyper Text Markup Language. It's a simple script that is used to create documents that are readable by world wide web browsers. It displays colors, text, images, animation, creates links to other pages, and can be used to download files.
HTML documents are plain-text (also known as ASCII) files that can be created using any text editor. For a Macintosh, you'll use SimpleText; for Windows, you'll use Notepad. These programs are built into your operating system, so not only are they the simplest programs to use, they're free!
There are several things to consider while creating a web page. The first is reason: why are you putting this page up?
There are a multitude of reasons to build a web page. It can be a personal "brag-rag", used to let people know who you are and what you do. It can be a business page, to advertise your personal business. It can be intended to teach, or it can be used to make people aware of a cause.
The trick to building pages is remembering your audience. If your page is about nuclear physics, there's probably no reason to put cartoons on your page. On the other hand, if your page is for children, large text and pictures may help to hold their attention.
It's also extremely important to remember how people will be viewing your page. In most cases, you'll be building a page for the internet, and people will be connecting to look at your page at rates anywhere between 14,400 baud up to 56k. The slower modems will have a difficult time with graphics-heavy pages, sometimes taking three to five minutes to download a single page. Most people will give up on a page well before it's downloaded, at that rate, so too many graphics may chase away the very audience you're trying to reach.
The Standard Template for a Web Page
Below is a template for a web page. The explanation of what it means follows the template, so if it doesn't make sense quite yet, don't worry.
<HTML>
<head>
<TITLE>
The title of your web page goes here
</TITLE>
</head>
<body>
Everything you want in your web page goes here
</body>
</HTML>
HTML is what is called a containment language, which means every command in HTML has an opening field and a closing field. The data you want to express on your homepage goes between these tags.
All tags will be surrounded by greater-than (<) and lesser-than (>) signs. Closing tags will always repeat the opening command with a forward-slash in front of it. Look back at the template -- the information in the tags are the commands that make HTML work.
The <HTML> tag announces to a browser that this document is to be read as an HTML document, and that all the data inside that tag should be laid out according to the other tags inside the document.
There are two parts to every HTML document. The first part is the header, and the second the body. On our template, look at the information just below the <HTML> tag.
<HEAD> opens the header. <TITLE> opens a line of information that will appear at the top of your browser window. Usually, you'll put some general information about your page in this. Think of it as the title of the book: it appears on the front cover, but it may not appear in the actual book itself.
</TITLE> closes the title information; </HEAD> closes the header.
The <BODY> tag opens the body of your html document. All the information between the body tags will be viewed in the main window of the browser. Only after you have inserted all the text and graphics that you want in your body will you use the </BODY> and </HTML> tags to close out the body and the html information for the browser.
All the tags that are discussed next will go into the <BODY> </BODY> of your html document.
<BR> is the only command that is not part of a
containment field; all other HTML commands open and close a containment
field, opening with
If you have several lines of text and would like them to stand out from
the rest of the text, you can do so by using the
<BLOCKQUOTE></BLOCKQUOTE> tag like
this:
<BLOCKQUOTE>
this is to demonstrate<BR>
what a blockquote<BR>
would look like<BR>
</BLOCKQUOTE>
the end result would look like this:
this is to demonstrate
what a blockquote
would look like
If you want a blank line between lines of text you would use the
<P>
tag, like this:
<P>
Welcome to my web page
</P>
<P>
I hope you enjoy your stay.</P>
This will give you something that looks like:
Welcome to my web page.
I hope you enjoy your stay.
The <HR> tag puts a thin grey line across your screen, separating one part of the page from another.
The <HR> tag is very flexible. Let's say you only want a small line on the screen. Use <HR WIDTH=10%>: this will create a thin grey line in the middle of the screen with the length of 10% of the size of the screen horizontally. This can be done all the way up to 99%; 100% is the same as saying <HR>.
To make a fat grey line you use <HR SIZE=10>, which alters the thickness of the line. It can be altered from 1 up to 20 in thickness.
If you wanted a black line rather you can use <HR= NOSHADE> Again, the size can vary.
Links are vitally important to the world wide web: they're what makes it
go. Links on your homepage will generally point to areas of your own
interest. Creating a link is remarkably simple:
Linking an image into your page is equally simple. To do this, you must
first have uploaded a graphic to your directory, and then code the command
in. A simple image command is:
Most browsers can read both .GIF and .JPG images. .JPGs are almost always smaller in file size and equal in resolution, and are generally recommended over .GIFs.
To do this we combine what we have learned in making a link and
placing an image on the screen. To start this off here is an example:
As you can see we started with the standard format for making a link. This time, instead of entering text that would be our link, we entered the HTML code for placing an image on the screen that will act as an icon which the user can click on. You'll notice we have two new things happening here. First we had to specify the location of the graphics file you will use as your icon. All you have to do is change the cathyw to your username. Second, we added border information. Borders can range from 0 to 20, and will create a gray border around your image, and can be used to make your image stand out from your background.
If you want someone to be able to send you an email while looking
at your page, you can create an email link. Here's an
example:
This will create a link that looks like this:
Naming your HTML files is a question of common sense, with one
exception. You want to name your main HTML page
index.html. Web browsers, by default, assume that the
introductory page of any homepage is named index, and search
for that. If they do not find it, generally they will list the files they
do find in alphabetical order, rather than displaying the crafted index
page you've created. Your homepage will be located
at:
(For business card purposes, the URL can be shortened to www.yourdomain.com/~username.)
Secondary pages are generally named in a fashion that relates to the topic of the pages; for example, if you have a page on music you like, you'll probably name your page music.html, or a page about cars might be cars.html.
Uploading your
web
page
Probably the easiest program to upload your web page to the server
is CuteFTP. It can be downloaded from: http://www.cuteftp.com.
For a complete walk-through of downloading and using CuteFTP on your Windows machine, look at LinkTel Networks page on using CuteFTP. (This comes complete with screen shots, so you get pictures of what it should look like.)
When you first run CuteFTP, it will install on your hard drive. After that, when you double click on the icon, the actual program will run.
CuteFTP first opens up with what looks like a phone book. Click on exit. Then click on the lightening bolt icon on the menu bar (second button from the left). A small window called Quick Connect will appear.
Enter ftp.yourdomain.com in the host address block. Enter your username in the user ID block, and enter your password in the password block. In Initial Remote Directory, type in www.
Click OK. On the right hand side, there will be a directory listing of the contents of your world wide web directory on the server. The left hand side of the screen displays your hard drive. Navigate through this by clicking to the directory where your HTML files are saved.
Once you have found the files you need to upload, hold down the CTRL key and left click on the desired files to highlight them. Drag them to the right hand side of the screen that shows your space on the server; that's all that's required.
To disconnect, click on the third icon from the left.
(Remember to upload not only the HTML files, but also any pictures or sounds you may have referred to in your HTML documents.)
For a complete walk-through of downloading and using Fetch on your Macintosh, check out LinkTel Networks page on using Fetch. (This is complete with screen shots so you can see what it should look like.)
When you first run Fetch, a window called New Connection will open. Enter ftp.yourdomain.com in the host block, your username in the User ID block, your password in the password block, and www in the directory block. Click on OK.
Click on Remote in the menu bar, and click on Put Folders and Files. Navigate through your folders to your saved HTML files. To select the files to be uploaded, to the server double click on them. They will be moved to the lower half of the screen.
Click on Done. You will be shown a small window with two lines, titled Text files: and Other files:. Change both of them to Raw Data. Click OK.
That's it! All you have to do now is click on File and quit.
(Remember to upload not only the HTML files, but also any pictures or sounds you may have referred to in your HTML documents.)