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:
What is HTML?
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!
Back to the top
Planning Your Web Page
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 pet 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.
Back to the top
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>
Back to the top
Your Header and Body
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.
Back to the top
Tags
All the tags that are discussed next will go into the <BODY> </BODY> of your html document.
- Size
HTML has six levels of headings, 1 through 6, with 1 being the largest. Headings are displayed in larger and/or bolder fonts than normal body text. If you want to make your text very large, you would
use <H1>; if you wanted to make it very small, use <H5> or <H6>, as in the example: <H1>your text</H1>
As with the other tags we've
looked at, you'll need to close your tag with the same command preceded by a slash.
- Color
The best way to explain this is to start with an example:
<FONT COLOR=RED>your text</FONT COLOR>You tell the browser that you want text in color by using
<FONT COLOR=RED>. Then place the text you want after the command. Close the alternate color with </FONT COLOR>. The colors you can use are as varied as a box of Crayons.
- Style
Style stylizes the font in order to emphasize it or set it apart from the rest of the text in some fashion. Again, the text you want set apart goes between the tags.
- <P></P>
= A paragraph break which inserts a blank line between two paragraphs.
- <EM></EM>
= Emphasis
- <STRONG></STRONG>
= Strong Emphasis
- <CENTER></CENTER>
= Centers the text
- <BLOCKQUOTE></BLOCKQUOTE>
= Separates the text out into an indented quote block.
- <BR>
= Meaning 'break', this puts a break without a blank line between two lines. <BR>
is the only command that is not part of a containment field; all other HTML commands open and close a containment field. 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.
- Organiziation
At this point, you discover that your text all runs together, and you want a way to separate your page into sections. 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.
Back to the top
Creating a link
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:
<A HREF="http://www.alaska.net/">Internet Alaska</A>
You can put any web address in place of the Internet Alaska web address, and remember to change the name of the link. What you see
above will look like this:
Internet Alaska
The text between the brackets is the highlighted text that you will click on, and so a link should
describe what site the person reading your page will be brought to.
Back to the top
Putting Images on Your Page
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:
<IMG SRC="car.gif">
This will put the picture you have saved as car.gif on the screen. You can save your images as either .GIF files or .JPG files, as browsers can read either format.
Back to the top
Turning an Image Into a Link
To do
this we combine what we have learned in making a link and placing an image on the screen. Here is an example:
<A HREF="http://www.alaska.net"><IMG SRC="
http://www.alaska.net/~smith/logo.gif" BORDER="0"></A>
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 smith 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.
Back to the top
Creating an Email Link
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:
<A HREF="mailto:smith@alaska.net">Email Joe Smith
</A>.
This will create a link that looks like this:
Email Joe Smith
This tells the user's email application to create a new email, directed to your username. All you have to do is change smith to your username.
Back to the top
Naming Your Files
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 Internet Alaska homepage will
be located at:
http://www.alaska.net/~smith
where smith is your username. This address is called your URL (Uniform Resource Location), or your web address.
(For business card purposes, the URL can be shortened to www.alaska.net/~smith.)
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.
Back to the top
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.
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.alaska.net 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 Internet Alaska 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.)
Uploading Using Macintosh
The easiest program for a MAC is Fetch, which can be downloaded from: www.shareware.com.
When you first run Fetch, a window called New Connection will open. Enter ftp.alaska.net 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.)
Back to the top
