Ernest Onyebuchi Efienamokwu - Beginners Guide to HTML

Beginners Guide to HTML
Written by Ernest O. Efienamowku.

What is HTML?
What are Tags?
Creating Your First Webpage
Basic Tags
Linking Your Pages
Images
Text and Background Colors
More HTML Tags
Extra Help

Key Terms

WWW
HTML
Browser
Parameter
Hyperlink

HTML stands for Hyper-Text Markup Language. HTML is a computer coding system that creates webpages for the internet. HTML is not a real programming langauge like C++ or Visual Basic, but a system for describing documents on the web. A Browser interprets the HTML code and displays it to you. You are probably familiar with a browser, Internet Explorer and Netscape Navigator are two of them. HTML is useable on any platform, Windows, Macintosh, Linux, or whatever. HTML documents may look confusing and complicated at first glance, but once you are familiar with the commands it looks extremely simple.

Sources: The History of the Internet and WWW

What Are Tags?

You might have heard of a HTML "Tag" before, a HTML tag is simply a command read by the browser that can do things like center your text, make the text bigger, or create one of the nifty lines you see on this page. In order for a browser to find your HTML tags, you must place carrots around them, a less-than symbol "<" before the command, and a greater-than symbol ">" after. All HTML tags must have both carrots in order for the browser to "see" them. Here is an example tag: <center>. Any text placed after this tag will be centered in the browser. You might be wondering how to stop it from centering the text, well you have to stop that tag. To stop your tag, you must place </center> after the text, all ending tags use the / character before the command.

Example: This is some normal text.<b>Here is some bold text</b>This text is not bold.

Creating your First Webpage

Your webpage requires a few basic tags before it will function in a browser. There are two reasons you need these tags, to be sure the browser will interpret your webpage exactly as you intend, and to make it easy for you to maintain the page later on.

<html>	Tell the browser this is a webpage.
<head>	Begins the header information (not seen by the user, only by search engines and the browser)
<title> your page's title </title>	Write your page title here, it will be displayed on the title bar at the very top of your browser. Search engines also look at this tag to document your website.
</head>	End the header section.
<body>	Begin the body section, everything in this section is what is seen by the user.
</body>	End the body section.
</html>	End of the HTML document.

Note: Before starting construction on a webpage, you will want to create a new folder and save all of your webpages and images into this folder. Since most hosting services do not allow spaces in your filenames, name your webpages with only Alpha-Numeric and the underscore character.

Activity 1: Your First Website
Now it's your turn, follow the instructions below and you'll have your first sample webpage. Websites require nothing but Notepad to create, but there are many programs out there than can help you design advanced websites.

Launch Notepad.exe (Click START, Programs, Accessories, and then Notepad) You can use Word Pad and Word, but they tend to be a bit more confusing and it's easy to save your document wrong.
Type in your basic structure, for now you can copy the code below into your Notepad:
<html>
<head>
<title>My Website</title>
</head>
<body>
Here is some text in my website.
</body>
</html>
To save your html document, you need to save it as a HTML document (.htm) and not a text file, so click File, and then Save As... and where it says "Save File As Type" you will want to make it say "All Files" now type in your filename as sample.htm, you can replace index with anything you want, and it would be helpful to make this name relate to your page's title.
To view your html document, launch your usual Internet Browser, and go up to File, and then Open File or Open... and find your html document. Select it and click OK. You should see it popup in your browser window now. Our page is very simple and should display the text "Here is some text in my website". If you look up at the title bar it should say "My Website" you have now created your first webpage!

Rules for Naming a Web Document

There are a few common rules you as a webmaster should follow in naming your web document.

The most common name for your homepage or page of entry is index.html, and most website hosting services will require your homepage to be called this.
Alpha-Numeric and Underscore characters only, web hosting services will sometimes not allow you to put spaces in your name, so stop the trouble before it is started.
The extension of your file should always be .htm, you can use .html, but it is rarely used, and some platforms such as Windows 3.11 will not allow 4 character extensions.

Basic Tags

The Heading Tag:
This tag will tell your browser how large the text in between will be. The tag is the letter H and then a number representing the size of text you want. Example: <h1>The Biggest Text</h1>. Here is a list of the header sizes:
<h1> 24 pt. </h1>
<h2> 18 pt. </h2>
<h3> 14 pt. </h3>
<h4> 12 pt. </h4>
<h5> 10 pt. </h4>
<h6> 8 pt. </h5>

Paragraph Tag
The paragraph tag will tell your browser when a paragraph is beginning, and ending. It puts one blank line in between paragraphs.
<p>Here is my paragraph of information.</p>

Alignment Tags
These tags will tell your browser where to place the text on your screen, aligned to the left, right or centered. For centering you can use the <center> tag, but for aligning to the left or right you must use the paragraph tag with a parameter in it. Since the default alignment is to the left of your screen, there is no use for the left function, simply leave out the align = "" part of your <p> tag to make it aligned to the left.
<center>This text is centered.</center>
<p align = "right">This text is on the right side of my screen.</p>
<p align = "center">This text is also centered.</p>

The Line Break Tag
This tag is simple to use, wherever you place this tag, it will technically tap the Enter button on your keyboard, and move all the text following it down a line. The tag is <br> and it needs no ending tag.

Horizontal Rulers
If you look at the title to this section, you will see a Horizontal Ruler, or a line strectching across the screen. This tag is much like the Line Break Tag, it requires no ending, and it will simply add in a line wherever you place it. The tag for a horizontal ruler is <hr> .

Activity 2: Placing Some Text
Now that you know how to place text on your website, move it around and size it, you probably want to play with it. So go back to Notepad and add these tags to your basic website:

<html>
<head>
<title></title>
<body>
<center><h1>Welcome to my Homepage!</h1></center>
<hr>
<h3>Welcome visitor, you have entered my website!</h3>
<br>
<br>
<h3>Here are some neat links...</h3>
</body>
</html>

Note! Now that you have edited your webpage, you will want to save your changes, so go up to File and click Save. Now go back to your browser and click on the Reload button. Everytime you change your page you have to Reload it in the browser.

Linking Your Pages

You have probably seen a hyperlink before, a hyperlink is a way of connecting documents together, such as this one: www.yahoo.com will send you off to that website. Hyperlinks are extremely useful, and no website goes without them. The tags start to get a little complicated here, because the tag requires a few parameters. First, you need to tell the browser where to go, such as yahoo.com as above. Next, you want to tell it what to display to the user, so this link: Yahoo! goes to the exact same place as the one above. Here is the tag: <a href="www.yourlink.htm">What the user sees</a> the part after a href= is where the link will take the viewer, and the What the user sees part is what is on the screen, like the Yahoo! above.

Activity 3: Adding Hyperlinks
Go to Notepad and add these codes somewhere in your body section:

<br>
<a href="http://www.yahoo.com">Click here to go to Yahoo!</a>
<br>
I want to scream <a href="http://www.yahoo.com">yahoo</a> out loud!
<br>

Both links in the above activity will take you to the same place, they are just placed differently in the text.

Images

Almost every webpage has some images on it, every page should have some images on it. Images add to the overall design of your site, and give the user something interesting to look at. There are two main graphic file types that the web will accept easily, Graphic Interface Format (.gif) or Joint Photographic Experts Group (.jpg) any browser will accept these two file types, and most images can be easily converted into them using a program like Photoshop or Paint Shop Pro. To stick an Image on your webpage, you must tell the browser the file's location using the parameter src = "". Here is the code for an image:

You have probably seen websites with background images, tiled images behind their text and images. You can use a plain color, or an Image. This will take us back to the body tag near the top of your webpage, add a parameter inside of it like so: background = "myimage.jpg" this tells the browser to load and tile a background image on this page. Remember, a tiled picture could look bad if you don't plan it right, so a portrait of yourself could get really annoying.

A neat thing to do with your background is mark it as a watermark. Normally, when you scroll up or down through your website, the background scrolls with you, but if you add the watermark parameter to your body tag, the background will not scroll and give you a neat effect. Here is the code for the watermark:

Activity 4: Adding a Background
Go to your webpage and replace your body tag with the one below, but instead of myimage.jpg replace it with a background image of your choice. Remember to put the whole filename (c:\windows\myfolder\myfile.jpg)

Now save your document, go to your browser and reload the page. Your background image should pop up and be tiled across your webpage. Next, go back to Notepad, add 10 or 15 <br> tags to your body, and replace your body tag with this:

See the difference? Use this sparingly though, because although it looks very cool, it could get annoying to some users, and some browsers do not support this parameter.

Text and Background Colors

Now we are going to transform your website from a dull black and white site to a brilliant colorful webpage. To change the background color of your webpage, you simply add another parameter to the body tag. The bgcolor parameter will tell the browser what color to make the background. If you do not place the bgcolor parameter, it defaults to whatever the viewer set the default background color to. Here is the parameter to add to your body tag:

Warning! Now you have the true power to corrupt your website! Don't make the background color and the text color close to each other, this will make it hard for the user to read. If you make a purple background with red text, you will make some people very angry! (Check out the yellow below, nobody could read a whole page of that!)

Now I will explain the stuff inside the parentheses. A web browser has a code system for each color, every color is a combination of numbers (0-9) or the letters A through F. A browser knows a color is coming up when it sees the # character, such as the color above (the color is white). Some of the basic colors can be written out though as kind of a short cut for the webpage writer, so instead of the code above, you could write <body bgcolor = "WHITE">. This only works for the basic colors (red,blue,green,black,white,ect.) and anything else must use the code.

Color	Code
Red	FF0000
Green	00FF00
Blue	0000FF
Cyan	00FFFF
Magenta	FF00FF
Yellow	FFFF00
Black	000000
Grey	808080
White	FFFFFF

For a complete color guide, visit http://www.ac.biola.edu/~brian/csapplet.html

Inside the body tag, you can also change the default font, hyperlink, visited hyperlink, and active hyperlink colors. The defaults are shown here, and they can be changed using these parameters inside your body tag:

alink = active link
vlink = visited link
link = normal link
font = page font
bgcolor = background

To change certain text font, you must use the font tag, it has two main parameters, color and face. Color is the color that the text will be, and face is the font to be used. Be warned: don't use weird fonts, most users only have the basic fonts (tahoma, verdana, arial, times new roman). The color parameter is used the same way it is used in the body tag, only you use the font tag. An example is shown below.

<font face="arial" color="#FF0000">Here is some red arial text</font>

Activity 5: Playing with colors!
Now you get to spice up your boring website! Since you should have basic understanding of how tags work by now, we will let you figure it out from the examples above. See if you can make your background black, and your text white. Then, try to make a Warning! in red text, see if you can master HTML colors!

Tip: Black-on-white and White-on-black are the two most popular combination of text/background colors, they don't bother the user and make a website very easy to read. Any bright colors (besides white) tend to annoy a user so stay away from colors like red, yello, or lime green.

More HTML Tags

The Bookmark Tag

Suppose you want to make a link to another place inside of your document, you would use a bookmark. It is just like using a hyperlink, but now there are two things you need. The reference and the link. The reference is placed around the text you want your link to go to. For instance, the Contents menu at the top of this page has a hyperlink down to the More HTML Tags title above, where the <a name> tag is placed. So make a title of a topic and place this code around it:

<a name="Name of Bookmark">How to Train a Dog</a>

That is the reference, where your link will skip down to. Now to place a link to it, you use a hyperlink with the # character and then then whatever you have for Name of Bookmark. The one below will link to the reference above:

<a href="#Name of Bookmark">Learn How To Train a Dog!</a>

Placing Sounds

Suppose you want a background MIDI file to play on your webpage, you would use the embed command. It is very simple, and has two parameters, src and loop. src is where you specify the file to be played, and loop is how many times to loop the song. You can use loop="infinite" to play forever, or leave the loop parameter out to make it not loop at all.

Lists

Lists are a neat component to add to any webpage, and are very useful for listing links, categories, and so on. There are a few commands at play here. The list you see under the Contents menu is a unordered list, it just places a bullet next to your items. For each item in the list, you put it in the <li></li> tags, and those go inside of the <ul></ul> tags. Below is a sample list.

<ul>
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
</ul>

E-Mail Links

It is possible to allow people visiting your website to e-mail you, and this is a very helpful thing to have. You should always place your email somewhere on your website, so visitors can contact you. Here is an example of an email link: Click here to email mike! It is very easy to do, all you do is take the hyperlink command, <a href=""> and instead of putting a file or website into it, you would place your email addres preceded by mailto:. To create the link like I just did above, you would add this:

Click <a href="mailto:mschmoyer@hotmail.com">here</a> to email Mike!

Extra Help

http://www.pageresource.com/ - HTML help with good advice on frames.
http://www.davesite.com/ - Step-By-Step instructions to build a website. Boring, but explains from the basics.
http://www.htmlgoodies.com/ - Great place to further your knowledge and make advanced websites.
http://members.magnet.at/dmayr/history.htm - Learn about the history of HTML and the Internet.

Key Terms

WWW - world wide web, invented at CERN (www.cern.ch) during the 1990's.
HTML - Hypertext Mark-up language, used to decode internet documents.
Browser - Application that Interprets HTML code the two most popular are Internet Explorer and Netscape.
Parameter - information given to a tag to give it additional information.
Hyperlink - A connection from your web document to another web document
MIDI - A digital music recording used on the web, very small in size.

This page hosted by

. Get your free home page.