How To Build A WEB Page

Lesson 1: Getting prepared

What is HTML?
HTML is an acronym for Hyper Text Mark Up Language. Technically it is like a programming language, but don't let that frighten you because it's very easy to use and works on any computer platform. You don't need a computer science degree or years of practice. HTML is a language that web browsers (such as Internet Explorer and Netscape) recognize. They read an HTML document and display a web page based on the different variables within the document. The HTML document specifies things such as what color the page will be, how big the font will be, what pictures and links it will have, and so on.

Planning
Before you dive right in, take a few minutes to think about what you want your web page to look like. A web page is more than just a collection of information, other things have to be taken into account as well. Things such as layout. Is information easy to find? Is there enough to keep a viewer interested, but not so much that they become overwhelmed? Also remember that while it may be nice to have lots of fancy and flashy effects with big graphics, these things take longer to load. They are only good for those willing to wait the extra time for your page to download. This may seem like a lot to think about, but not to worry, before long it will become second nature.

What you need
You don't need any fancy programs to create an HTML web page, though there are plenty of nice commercial web page editors out there that can make your work easier. Because all are created equal in the world of web page design, and since it is based on text, you can write an HTML document in a simple text editing program such as Notepad or Simple Text. Also, any word processor that can save a file as ASCII text will work.In order to put a web page up, you will also need a place to put it, and a program to get it there. Most MindSpring billing plans include web space, but you may want to check your plan to make sure you have web space included. More information on this can be found in the Publishing section.

Check out existing pages
One of the best ways to learn HTML is by looking at the HTML code for existing web pages. Find a web page that you like and wait for it to finish loading. When it's done, select Source from the View menu (it may be different if you are using a web browser other than Internet Explorer). Notepad or Simple Text will then open up and display the HTML code for that web page. On a Macintosh you may first have to save the file and then open it with Simple Text. Give it a try with this web page and don't be afraid to use HTML code from someone's page, this is how web pages are often created.You can skip ahead to any lesson you like. If you are just interested in getting your web page up on MindSpring, click on the Publish Your Page link. If you want to find additional information or books to read click on the Web Design Resources link. And if you have any comments, suggestions, or typos, click on the Feedback link.

Lesson 2: HTML Tags and how they are used
HTML uses "tags" to control the appearance of a web page. This is the part of the web page that isn't seen as text or graphics, but rather tells the web browser how to display those things. Tags are put in between a set of less than (<) and greater than (>) signs. This is how your web browser tells the difference between a tag and regular text. The contents of a tag can be either upper or lower case, but are often easier to see when uppercase. Most (but not all) tags also come in pairs; an opening tag and a closing tag. The only difference between the two is a forward slash (/) in the beginning of the closing tag. The part of your web page that you want to be affected by the set of tags goes in between them. Here are a couple examples of common tags you will see in most web pages:

The first thing you need to do is open Notepad, Simple Text, or your choice of text editor, and create a new document. You can save the document as any name you like so long as it ends in .htm or .html . <HTML> is always the first tag and </HTML> the last tag in any HTML document. The <HTML> tag tells the web browser to start processing the the document for HTML formatting, and the </HTML> tag tells the web browser to stop. Once you begin working on a web page, everything else will go between these two tags.Example:

Lesson 3: Head and Body Tags
The next tag needed after <HTML> is the <HEAD> tag. Information about the HTML document is put between the <HEAD> tags. The <TITLE> tag is the most commonly used tag in the header section (Others are for more advanced page design than covered here). The <TITLE> tags contain the name of the document that appears in the title bar (not on the web page itself) of the web browser. The title is also what is used to label bookmarks saved by a web browser. Example:

<HTML>
<HEAD>
<TITLE>This appears in the title bar of a browser</TITLE>
</HEAD>
</HTML>

While the <HEAD> section contains information about your web page, the <BODY> tags contain what is displayed in your web page such as text, images, links, and pretty much everything else.
Notice how for each tag, there is a closing tag with a forward slash. Not all tags require a closing tag. Which ones do and don't will become more apparent as you become more familiar with HTML. Example:

<HTML>
<HEAD>
<TITLE>This appears in the title bar of a browser</TITLE>
</HEAD>
<BODY>
This is text that will appear on my web page!
</BODY>
</HTML>

Lesson 4: Background colors and images
In addition to containing the contents of your web page, the <BODY> tag can also contain parameters within its opening tag that affect the look of the page. One such parameter is the background color or your web page. The parameter is bgcolor and is followed by a hexadecimal number in quotes that represents a color. Each hexadecimal number represents a different color. Using hexadecimal numbers can be confusing at first so here is a Color Chart (Netscape chart) to help you find the colors you want. Example:

<HTML>
<HEAD>
<TITLE>This appears in the title bar of a browser</TITLE>
</HEAD>
<BODY bgcolor="#FFFF80">
This is text that will appear on my web page!
</BODY>
</HTML>

Using an image for your web page background is just as easy. The image will need to be in either GIF or JPEG format as well as located in the same directory as your web page (the actual HTML document). The parameter to specify the background image goes in the body tag just like the background color parameter, only it is called background . In the example below the image is called image.jpg . You will need to make sure to specify the exact name of the image file you want to use for your page. Make sure that the name you specify is exactly (in regards to capital and lower case letters) the same as the image file itself.

<HTML>
<HEAD>
<TITLE>This appears in the title bar of a browser</TITLE>
</HEAD>
<BODY background="image.jpg">
This is text that will appear on my web page!
</BODY>
</HTML>

Lesson 5: Using Text
Putting text on your page is as simple as typing. However, you may want to manipulate the text to your liking. For instance, you may want to put a big title at the top of your page so anyone can see it from across the room, or make certain words bold for emphasis. There are many tags for altering text, here are some of the basic ones:
Header Tags
Header tags ( <H> ) can be used to make large text. They come in six different sizes. All you need to do is place the text you want to become the header of the page between the header tags. The example below uses <H1> , but you can use it with H2 , H3 , H4 , H5 , or H6 , with one being the largest and six being the smallest size. Example:

<HTML>
<HEAD>
<TITLE>This appears in the title bar of a browser</TITLE>
</HEAD>
<BODY bgcolor="#FFFF80">
<H1> This is a really big font!</H1>
This is text that will appear on my web page!
</BODY>
</HTML>

Paragraph Tags
One thing you will soon notice about HTML text is that it ignores any carriage returns (this means that even if you hit return at the end of a sentence, it will continue on as one line on the web page) and instead continues on one line. The answer for this is the paragraph tag which can be placed around each paragraph. When the web browser sees the tag, it starts the text at the beginning of the next line, just as a new paragraph would. Example:

Center Tag
Another useful tag for text is the <CENTER> tag. Any text or images within these tags will align to the center of the web page. This is very common for things like headers as in the example above, but is not limited to just headers, it can be used anywhere.

Bold, Underline, and Italic tags
A great way to get your point across is with the use of italics, bold, and underlined text. This is very simple to do, just place the appropriate tags around the text you want to be affected. For italic the tags are . For bold use and for underlined use . Example:

<HTML>
<HEAD>
<TITLE>This appears in the title bar of a browser</TITLE>
</HEAD>
<BODY bgcolor="#FFFF80">
<CENTER><H1> This is a really
big font!</H1></CENTER>
This is a really really short paragraph
Italic text plain
text Bold Text plain
text underlined text
</BODY>
</HTML>

Colored Text
In addition to the emphasis above, you can also make words different colors. This is very similar to specifying a background color, as it uses the hexadecimal system to specify the color. The tag is where (color code) is replaced with the hexadecimal number representing the color. The closing tag at the end of the colored text is . Here is an example to change a word to red text:

<HTML>
<HEAD>
<TITLE>This appears in the title bar of a browser</TITLE>
</HEAD>
<BODY bgcolor="#FFFF80">
<CENTER><H1> This is a really
big font!</H1></CENTER>
This is text that will appear on my web page!
This is more text for my web page
This is a really really short paragraph
Italic text plain
text Bold Text plain
text underlined text
The color of his hat was red and
black.
</BODY>
</HTML>

Lesson 6: Images
Adding pictures and images is a great way to liven up your web page. HTML uses a simple image tag to tell the web browser to insert an image as well as what image to use. Just like with using a background image, the image must be in the directory of your web page and be in JPEG or GIF image format. The tag looks like <IMG SRC="imagename"> where imagename is replaced by the name of the image you want to use. Remember to use the same syntax as the actual image file name, especially in regards to upper and lowercase letters. They must match exactly. Also, formatting tags such as <CENTER> can be used with images as well as text. Notice in the example below how the <CENTER> tag closes after the image tag. This will put both the header and the image in the center of the web page. Example:

<HTML>
<HEAD>
<TITLE>This appears in the title bar of a browser</TITLE>
</HEAD>
<BODY bgcolor="#FFFF80">
<CENTER><H1> This is a really
big font!</H1>
<IMG SRC="mypicture.gif"></CENTER>
This is text that will appear on my web page!
This is more text for my web page
This is a really really short paragraph
Italic text plain
text Bold Text plain
text underlined text
The color of his hat was red and
black.
</BODY>
</HTML>

Lesson 7: Hyperlinks
Hyperlinks are words or images which when clicked on, take you to another web page, either on your own web site, or another web site. To create a hyperlink, you will need to use the <A HREF> link. This tag actually has a different closing tag which looks like </A> . Any text between these tags will become a hyperlink, and the web page it will take the browser to is specified in the opening tag. In the example below the words "The MindSpring Homepage! will become a clickable link which will point the browser to the MindSpring homepage (http://www.mindspring.com ). Remember to put quotes around the actual web page address. Example:

Images can be put between the <A HREF> tags as well. In the example below, we will make the mypicture.jpg image a link to the MindSpring homepage if someone should click on it. Example:

<HTML>
<HEAD>
<TITLE>This appears in the title bar of a browser</TITLE>
</HEAD>
<BODY bgcolor="#FFFF80">
<CENTER><H1> This is a really
big font!</H1>
<A HREF="http://www.mindspring.com"><IMG SRC="mypicture.gif"></A>
</CENTER>
This is text that will appear on my web page!
This is more text for my web page
This is a really really short paragraph
Italic text plain
text Bold Text plain
text underlined text
The color of his hat was red and
black.
<A HREF="http://www.mindspring.com"> The
MindSpring Homepage!</A>
</BODY>
</HTML>

Lesson 8: Adding a Mailto Link
A mailto is similar to a hyperlink, only instead of taking you to a new web page, it opens up your default e-mail program and a new message already addressed. All the person clicking on the link has to do is type their e-mail message and click send. This is a great way to get feedback on your page, or just make it easier for people to send you e-mail. This is done using the <A HREF> tag as well, but the parameter mailto tells the web browser that it's an e-mail address. Any text between the opening and closing tag will become the click-able link. The tag contains your e-mail address (though it can really be any e-mail address) so when clicked on, the mail client will know where to send the message. The example below uses MindSpring's support e-mail address, but remember to use your own e-mail address instead. Example:

<HTML>
<HEAD>
<TITLE>This is the Title that appears in the title
bar of a web browser</TITLE>
</HEAD>
<BODY bgcolor="#FFFF80">
<CENTER><H1> This is a really
big font!</H1>
<A HREF="http://www.mindspring.com"><IMG SRC="mypicture.gif"></A>
</CENTER>
This is text that will appear on my web page!
This is more text for my web page
This is a really really short paragraph
Italic text plain
text Bold Text plain
text underlined text
The color of his hat was red and
black.
<A HREF="http://www.mindspring.com"> The
MindSpring Homepage!</A>
<A HREF="mailto:support@mindspring.com">Send
me E-mail!</A>
</BODY>
</HTML>

Publishing Your Web Page
Once you have created your web page, you will need to make it available for the rest of the world to see. This requires that you upload it to your MindSpring web space. You may want to verify that your MindSpring billing plan includes web/ftp first. Also, every time you make changes to your web page, you need to upload it again so that others can see the changes as well. Remember, the page will only be as current as the last time it was uploaded to your web space.
Uploading your web page can be done using any standard FTP program. While MindSpring recommends using Cute FTP (or Fetch for Macintosh), there are probably a hundred other FTP programs that will work just as well. Cute FTP does not come installed with the MindSpring software (Fetch does come pre-installed with the Macintosh software), but it is included on the MindSpring CD.
Downloading Cute FTP
You can find Cute FTP at MindSpring's Download Depot: http://download.mindspring.com/

Uploading with CuteFTP for Windows 95/98:
01427: How to connect to your MindSpring FTP space using CuteFTP

Uploading with WS_FTP for Windows 3.1:
00569: How to Access Your Web and FTP Directories
00572: WS_FTP: How to Make Your HTML Documents available on the Worldwide Web

Creating Web Space for Secondary E-mail Addresses
MindSpring allows you to divide (or allocate) your web space between your mailboxes if you have more than one mailbox on your MindSpring account. While you still have the same amount of total web space, this can make it appear as you have multiple web spaces (one for each mailbox on your account). Click here for instructions on how to set up web space allocation

Web Design Resources
For more instant HTML tips and tricks and How To advice, you may be interested in the following book, available to MindSpring customers at a discount from our friends at Barnes and Noble. "10 Minute Guide to HTML" Check out some more helpful links about HTML design:
webmonkey.com - webmonkey gives an HTML tutorial. Project Cool - You have to check out this site, it speaks for itself. help-site.com - Tutorials! Check out these great books about HTML, available at a discount to MindSpring members from our friends at Barnes and Noble ! "HTML- The Definitive Guide"
"HTML for Dummies: Quick Reference"
"HTML for Dummies" with CD ROM .

[ Home ] [ Up ]

Send mail to postmaster@computerbuddies.us with questions or comments about this web site. Copyright © 2005 Computer Buddies Last modified: June 04, 2008

Send mail to postmaster@computerbuddies.us with questions or comments about this web site.
Copyright © 2005 Computer Buddies
Last modified: June 04, 2008