Reawen's "HTML for Beginners" Page

Reawen's "HTML for Beginners" Page

Trying to make a webpage? Have you wanted one, but had no idea how to begin? Well, this is for BEGINNERS! Absolutely no HTML experience necessary. I'll run you through the process of making basic webpages step-by-step. You don't even need to know how to get an address to put the webpage on, I'll run you through how to get your own space on Yahoo!GeoCities for your page. Due to varied abilities and comprehension levels people have when it comes to computers, I've made more than one set of instructions for each section. If you read the instructions in a section on this page and still find yourself lost, try the link at the bottom of most sections for more detailed instructions and/or more examples. If you have any questions, feel free to Email Me and I'll get back to you ASAP (I usually check my email at least once a day). If you're hoping for an immediate response, try paging me over ICQ with the Message-Panel below and I'll receive your request immediately if I'm online. If I'm not online, I'll get it as soon as I log on, and will email you back then.

COLORS

FONT

LINKS

META TAGS (FOR SEARCH ENGINES)

HELPFUL HINTS

Take my VERY SHORT survey and submit your feedback!
You need Java to see this applet.

IF YOU FIND ANY "DEAD LINKS," PLEASE REPORT THEM HERE!
Get you own webspace:

NOTE: GEOCITIES HAS MERGED WITH YAHOO! I AM TRYING TO UPDATE THESE INSTRUCTION ACCORDINGLY, BUT IF YOU FIND ANY INSTRUCTIONS HERE THAT ARE INVALID, PLEASE EMAIL ME A CORRECTION SO I CAN CHANGE IT! THANKS, AND SORRY FOR THE INCONVENIENCE!

GeoCities, as well as other servers, provides free webspace to anyone who wants their own little piece of the Internet. The only thing you have to do to receive this free service is agree to GeoCities' right to advertise on your page. This will take the form of a small window at the top-right of the browser window. If the viewer does not click on it in the first few moments it's there it will minimize itself, then eventually disappear.

To join GeoCities and get your URL (your webpage address), head to geocities.yahoo.com.
Once you register with GeoCities, you have access to all of GeoCities' tools for webpage building.

Back to the top of the page or More help on this subject

Begin making your own page:

If you don't know where to write your code, you have a few options. You can use the space provided by GeoCities (the "Advanced Editor" - to access this, go to the GeoCities File Manager and scroll down until you see the "Choose your Editor" option. You can create a new file with the button above that, or edit an existing file by selecting it, then going to "Edit") or you can use something on your computer (I write mine in Windows' "Notepad"). When you use the Advanced Editor, you need to SAVE your work. If you use Notepad or some other program, save it, then "upload" the file in the file manager. Remember that your files of HTML code must have the extension .html and the page you want as your main page must be called index.html

Other for a few exceptions, HTML commands have opening and closing tags ("tags" are the codes enclosed in < > brackets). To close a tag, you put a "/" before the command inside the brackets. This is explained more further down the page.

Everything written between the < and > will not show up on your page. (Other than the "comment" tag, which I've explained in Helpful Hints, everything beween the < and > is information for the browsers to interpret.)

Back to the top of the page or More help on this subject

Format:

There are a few basic codes that you need to make any page function. The basic format of your page should be this:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
HTML: This tag tells the browser to start reading HTML!
HEAD: Head tags should surround your TITLE and, if you have them, META tags.
TITLE: This is where you put the title that you want to appear in the colored bar at the top of your browser (if you are unsure where I mean, look at the top of your browser now. It should say: Reawen's "HTML for Beginners" Page. That is my "title"). This should be descriptive, but not too long. Search engines pick up on these "Titles"
BODY: The bulk of your page goes between the <body> and </body> tags.
CLOSE YOUR TAGS: You MUST remember to close your tags. Some browsers will read the page if they're not closed, but not all will - you want to make your page as universally viewable as you can!

Back to the top of the page or More help on this subject

Colors:

Colors are specified by hexidecimal color codes. (You can sometimes use regular color names, but not all browsers will read these.) These codes consist of a pound/number sign (#) followed by a series of 6 numbers or letters. Here are a few examples:
This is Navy Blue - Code: #000080
Here's Chartreuse - Code: #7FFF00
This is Deep Pink - Code: #FF1493
Here's Purple - Code: #A020F0

For a list of over 400 colors and their hexidecimal codes, click here! (If this site is too busy to access, try this mirror site.)

Back to the top of the page or More help on this subject

Background:

As background for your webpage, you can choose a solid color or use a picture or pattern. If you use a picture/pattern, it is a good idea to also set a background color as close to that of the picture as possible. Sometimes background pictures take awhile to load up and until then you are stuck with a white background. Depending on your font colors, you may not be able to read the page very well until the background picture loads up. If you set a background color, however, it will provide a backdrop for your page until the background picture loads.

Setting the background is part of the <body> tag. For color you use bgcolor=" " and for a picture you use background=" ".
To set a background color, you use the "hexidecimal color code." I don't want to take the space here to explain colors, so if you want to learn, go to the "Colors" section of this page.
To set a background picture, you need to have the file name, and you need to upload the file you want to use into the file manager. Be sure to inlude the subdirectory your file is in (if it's in one) in the code.

For example, this is how I set the background for this page:
<body bgcolor="#EECBAD" background="Backgrounds/paper.gif">
The picture I used for background was called "paper.gif" and was in the Backgrounds subdirectory.

Back to the top of the page or More help on this subject

Font:

The  tag has three attributes: face, size, and color. The face attribute names the font (Times New Roman, Arial, etc.). The size, obviously, names the font's size and color names the font color.

FACE: The default font is Times New Roman, but by placing face=" " in the font tag, you can change it to anything you want. Be careful using odd or uncommon fonts, though... some people's browsers won't support some fonts, so it's a good idea to stick with some fairly "normal" ones. You may want to give a second or third font choice in case your prefered font is not available on the user's computer. To do this, simply use the face=" " tag as before, but add second or third choices after the first, separated by commas. If no font face is specified, "Times New Roman" is the default.
SIZE: In HTML, font size is determined by a number 1-7. Here are the sizes:

COLOR: Use the hexidecimal color code as described under COLORS

Here's a full font tag example: Font test!
looks like this:
Font test!

Back to the top of the page

Image:

To place images on your page you use the <img> tag. To tell it what picture you want, add src=" " to your tag. The source (src) tells the browser where to go to get your picture. You can use a URL as a source, but it may not be the best method because if the webmaster of that site removes the picture, your image will naturally no longer work. The other, and I think better, method is to upload your picture file to your account (if you have a GeoCities account, upload to the File Manager) and place the file name of the picture after the source tag. (If your image is in a subdirectory, be sure to include it after your source tag.) Also, to center an object (or text) put the <center>...</center> tags around the object. For example:
<center><img src="3dpeace.gif"></center>
looks like this:

Images can also be used as links. Simply use the same html format you use for a regular LINK, but substitute the image tag where you normally write the text that makes up the link. A picture used as a link will have a border around it that is your previously specified link color. To get rid of the border, simply add border="0" to your image tag. Here's an example of an image as a link:
<a href="http://geocities.datacellar.net/reawen/"><img src="button-hand.gif"></a>
does this:

AND THIS:
<a href="http://geocities.datacellar.net/reawen/"><img src="button-hand.gif" border="0"></a>
takes away the border, like this:

Back to the top of the page

Links:

To link to another page, use the anchor tag, which looks like this: <a>...</a> To tell it where to link to, add href=" " to the anchor tag. You can use text or pictures (see IMAGES) as a link; simply put the text or picture you want to be the link between the opening and closing anchor tags, like this:
<a href="http://geocities.datacellar.net/reawen">Back to Reawen's Main Page</a>
This will look like this:
Back to Reawen's Main Page
SET YOUR LINK COLOR: You set your link color in the <body> tag. Use link=" " followed by a hexidecimal color code to set the color your links will before before they've been visited. Use vlink=" " to set the color your link will be after it has been visited. (You may have noticed, mine start out Dark Green, then turn Violet Red 4 once you've used them.) You can also set the color the link will turn while it's active (when you've clicked on it) by using alink=" ".

Back to the top of the page

Paragraphs:

You can set your text to adjust to the size of the viewer's browser. (Mine are set like that... try resizing your browser - the text should adjust so that you don't have to scroll over to see any of the text. It should fill the screen and go no further.) To do this, put the  tag before the text you want to adjust to the browser, then close it with  when you are done. Regardless of whether or not you are using ... tags, if you want to start a new line, you can't just press ENTER or RETURN in your html code. You have to use the break tag, which looks like this   Put this tag anywhere you would normally add a "return."
NOTE: You can center a paragraph also by using both the  and the <center> tags around the same text.

Back to the top of the page

Pre-format Your Text:

You can set your text so that it formats exactly the way you type it in your HTML file using the <pre> tag. This means that any indents, extra spaces, and returns will show up on your page exactly as you typed it. Put the <pre> tag before the text you wish to pre-format, and be sure to close with the </pre> tag at the end of the text you want to pre-format.
NOTE: You can still use other tags such as center along with this command. Also, the <pre> tag can be used to put spaces between images and such.

Back to the top of the page

Meta Tags (For Search Engines)

Once your page is up and running you may want to register it with search engines to create more traffic to your site. (Register at the search engine's page.) In order for the search engine to know what key words to associate with your page, however, you must tell it with <meta> tags. There are actually two that are helpful to have. One <meta> tag tells the search engine key words or phrases to pick up on, the other offers a short description of the page to the person doing the searching. Here's how they work: first of all, <meta> tags are placed between the <head> and </head> tags. Descriptions need to be short, but... well... descriptive. Hopefully they'll convince searchers to go to your site, rather than the others located by the engine. When listing key words for the search enging to pick up on, separate them by a comma. Here's the format for meta tags:

<head>
<title>The title here</title>
<meta name="description" content="Write a brief description of your page and its contents here.">
<meta name="keywords" content="list, your, key, words, here">
</head>

NOTE:You do not need to "close" meta tags with a </meta>. Be sure to enclose your despription and keywords in quotation marks, or the browser will only read until it hits the first space.

Back to the top of the page or More help on this subject

Helpful Hints:

COMMENT TAG: HTML can get pretty confusing when you start your page and find yourself staring at a page full of codes and text. When you have a problem on your page and want it fix it, it can be hard to find where it is in your code! (Believe me, I started out that way... it was terrible!) The comment tag can lessen the confusion. This is a way to leave yourself little notes as you go as to what you're doing. Write your comments like this:  The browser will completely ignore anything between the  tags. Naturally, returns (made by pressing the ENTER key) do not have any effect in HTML unless you are using the <pre> tag, so you may want to set your comments further apart by adding some empty space. (I always leave an empty line above and below my comment tags and add several extra dashes so that they are more visible to me.)

VIEW SOURCE: Ever go to someone's webpage and wonder just how they do something? Here's a little cheat way of finding out: With your mouse, right click on the webpage in question. A menu will pop up; select "view source" from the menu. This will open up the HTML file for the webpage and you can look through it for commands. DO NOT COPY ENTIRE PAGES FROM OTHERS!! The View Source is a helpful learning technique - it is NOT meant to aid plagiarism! You shouldn't copy sections of people's pages, either... other people worked hard on their page and you should not take credit for their work! Some webmasters may also disable the right-click function (if you want to see what that's like, try right-clicking on my main page, the function is denied there). Naturally it is quite possible to obtain the code in other ways, but it is far more ethical to comply with the webmaster's wishes.

Back to the top of the page

Take my VERY SHORT survey and submit your feedback!
You need Java to see this applet.

You don't need to have ICQ yourself to use this feature. Simply fill in this ICQ Online-Message Panel and click on "Send Message." If I am online, it will page me (send me the message) over ICQ immediately. If I am not online, I will receive the message as soon as I log in.