To my lesson in building a web page!

By Amanda Sutherland

---

INTRODUCTION:

Follow the links to a specific answer, or read through the whole thing.

Definitions and Descriptions What is the Internet? What is the Web? What is a Web Site? What is a Web Page? What are: Links? Pointing Hands? Bookmarks? How could an average individual or businessperson benefit from a web page? What tools do you need to create a web page?

Building and Design What are the steps used to create a web page? Find specific code for: Formatting Text Adding a Picture Code for: Making links, Anchor Tags, Downloads, and e-mail Making Tables The 3 list types The HTML Code without descriptions Advanced Code View the interactive Color List

---

First, let’s start with some definitions to frequently asked questions.

Q: What is the Internet?
A: The most common response to this question is the World Wide Web (WWW), e-mail or even chat rooms. But really these are all services on the Internet. The Internet is actually millions of computers connected together in some way (phone lines, Ethernet, ISDN, cable modems, or DSL) so that they can share information. The Internet is really one big network of computers. All of the things that people think of when they hear about the Internet, such as email the World Wide Web, File Transfer Protocol, etc. are types of information that are shared by computers on the Internet.

Contents

---

Q: What is the web?
A: Many people use the terms the World Wide Web and the Internet as synonyms. This is largely due to the fact that the World Wide Web has increased the popularity of the Internet. More people are logging on everyday. There are thousands of web sites, many of which contain valuable information, others provide entertainment, and others are completely useless. All web sites have addresses so that they are easy to locate. Web addresses are called URLs, which stands for Uniform Resource Locator.

The URL for this site is http://www.geocities.com/pandafan81

The "http://" part of the URL is called the scheme. It tells your web browser what kind of information is being sent. Other schemes are ftp://, file://, mailto:, finger://, etc. www.geocities.com is the host. It is the name of the machine or server that the web site is physically located on. Anything following the host is either the path or file name. These specify where on the server the web site is located. In the case of this site, the path is /pandafan81 which is the file.

Contents

---

Q: What is a web site?
A: A web site is a specific file on the Internet. Just as it was explained earlier, each site has it’s own name, and by inputting a special order of names, the correct file will appear. A web site is owned by a person, or a company and can contain many pages.

Contents

---

Q: What is a web page?
A: A web page is a “page” contained within the web site. Like a book, a web page is a specific page of many or sometimes hundreds of pages. You can enter in the “path” name or navigate from the Home page.

Contents

---

Q: What are links, pointy hands, and bookmarks used for?
A: Let’s look at each individually:

Links:

a link is found on any web page, it is usually text that is another color than the rest, and is commonly underlined. Many people are getting creative with their sites now, so often times the links are pictures as well. And some authors (or webmasters) play around with fonts, text sizes, and colors, so sometimes the link may be hard to find. The link is a direct path to another web page. By clicking on the link the browser will automatically take you to the page.

Pointed hands:

While “surfing” the net, when you come across a link, the mouse pointer will change from an arrow to a little hand with the pointer finger pointing up. By this you can tell whether the text is an actual link, or text underlined for emphasis like I have done within some of these definitions.

Bookmarks:

Within your browser is a lovely little option called Bookmarks or favorites depending on whether you are using Internet Explorer or Netscape Explorer. The reason this feature is so wonderful is because it will save the addresses to your favorite sites. This way you can visit sites often without having to remember the address.

(i.e. My web page address is: www.geocities.com/pandafan81 This one is not too long and probably not that hard to remember, but there are websites out there with very long URLs so the address is rather difficult to remember. By entering it into the bookmarks, you can visit my page as often as you like!)

Contents

---

Q: How could an average individual or businessperson benefit from a web page?
A: Nearly everyone can benefit from having a web page:

• Businesses can sell and advertise their merchandise and reach thousands of people who may not have found them otherwise. Shopping online has become very popular. I myself did all of my Christmas shopping online this year from different online stores like Amazon.com and SamGoody.com, and online auctions like Ebay.
  
• Schools can teach students with tutorials, I myself found some great definitions for earlier questions from the Stanford University’s web page.
  
• Even everyday people can make a page and teach someone about their favorite activities. Everything from making a paper airplane to a dedication page to their favorite singer (Garth Brooks rules!) Families can put together a site about their summer vacation, newest addition or whatever other news they may want to share with family and friends.
  
• Note: Although the Internet is a great source of information, playing games, and chatting with other people from around the world, look out for the weirdoes who put the information you just didn’t want to know! Word of advice: Have fun, learn a lot, but be cautious. And remember, whatever you put up on the internet can bee seen by everyone, so be warned about sharing too much personal information.

Contents

---

What tools do you need to create a web page?

First of all there are many ways to make a web page, but there are two that are most commonly used.

• One way is to use HTML in an editor, such as Notepad. Here is a definition of HTML:
  
  HTML is simply a set of instructions about how to display your web page. The computer recognizes an instruction, called a tag, when it is enclosed in brackets like this:
  '<'tag'>'

  Note: I have put the brackets in between these single quotation marks because the browser would read it as code rather then text. When writing your own html, do not use the quotes!
  Web browsers are programs (IE and Netscape are most popular) that take the instructions (the HTML) and display your web page properly. Browsers ignore all of the formatting in your HTML document including white space. The following is an example:
  
  Web building
  
  

  using my tutorial
  is fun.
  
  Would look like this in a web browser:
  
  Web building using my tutorial is fun.
  
  If you want any formatting in your page at all you have to give the browser instruction by using HTML tags.
  
  There are two kinds of tags in HTML.
  
  1. The first kind stands alone in your document:
  <tag>.
  
  
  2. The second tag has an opening and a closing tag:
  <tag> </tag>.
  Everything in between the tags is affected by the instructions within the brackets. The closing tag only differs from the opening tag by adding a slash "/" at the beginning. Some tags have attributes set within the brackets such as <tag attribute="value"> It is a important to put quotes around the value of the attribute. There are two in a row here because of my complications of showing the tags as text.
  
  Don’t worry if you are a little lost. We'll learn about attributes and the other tags and what they are used for a little later.
  
  
• The other way to make a web page is to use an editor provided by the browser program you are using, or another page maker such as FrontPage. This way you can look at your web page while you are building it. Although helpful, they do not require you to know html. This is an html tutorial, so we will not be going over how to use these other programs.

Contents

---

What are the steps used to create a web page?
Here is the big one! But first we need to go over what HTML tags we need, and what they are for.

• To start out, you need to have your editor open. This means go to the Start Menu, and go to Programs, then Accessories, and finally down to Notepad.
  
• The very first line you should type is <html> this command tells the computer that we are going to be writing a web page.
  
• Next we need a <head> command. The reason for this is because at the top of your web page in the program we need a title, which happens to be the next command '<'title'>', these two will put your web page’s name at the top on the blue bar.
  
• So far your text should look like this:
  <html>
  <head>
  <title> My web page’s name </title>
  </head>
  <body>
  
  
• The '<'/head'>' turns off the header and the <body> starts the body of the web page, where all of your information, text, and graphics will go.
  
• When you save your notepad file, you should name your document and add a .html at the end.
  
  Example: my_webpage.html
  this tells the program to save the document as an html file. Now you can open Netscape Communicator or Internet Explorer and go to File, then Open, and click the Browse button to find your file. This will allow you to see your web page as you are putting it together.

Contents

---

Now comes where each and every web page differs. You have a wide variety of tools you can use to make your web page stand out and look great!

• Text:
  • There are 6 different font sizes you can use to type in. <h1> is the biggest, and <h6> the smallest.
    
  • <i> will italicize your text,
    
  • <u> for underline,
    
  • <b> will bold and,
    
  • <s> will strike through,
    
  • Remember, all of these need to be turned off when you wish for these effects to stop.
    
  • As explained before, the editor does not add in extra space so to separate paragraphs and sections, you need to start paragraphs with <p> and to start a new line you need <br> for break. These you do not need to turn off.
    
  • To separate paragraphs or sections, or just to make your page look organized, you can add in horizontal lines <hr> which will put a bar across the page.

    ---

    Normally you can use just <hr> and it will put a line across the whole page. This one i added in <hr width="50%">, so it will be centered in the page, and not as long. They are useful in making the page look it’s best, and also do not need to be turned off.
    
  • You can also add special effects such as <blink> which will make the text blink on and off. Yet it is recommended not to use that often because it can be very annoying and hard to read if more than a couple of words are blinking at the same time, thus need to be turned off. Although the <blink> does not work with Internet Explorer.
  • Another fun one is <marquee>. What this is basicly is scrolling text or object. Go to the very top of my tutorial, and notice that i have my "WELCOME" gif moving back and forth. I used a marquee to do this
    <marquee behavior="alternate"><img src="welcome.gif"></marquee>
    This is a fun option recognized by Internet Explorer, but not Netscape.
  
  
• Adding a Picture: to add a picture you need an attribute, but this isn’t hard. <img src="filename.gif">. Sometimes instead of the .gif ending the picture will need a .jpg, or other application extension. This just tells the computer how to display the picture.
  Make sure that the picture you want on your page is saved in the same file as your web page. Otherwise, the computer cannot find the picture.
  
  
• Making Links: As I described earlier, links make your site interactive, your visitors can go and see other pages you may have, or to visit one of your favorite sites just by adding this code to your page:
  <a href="http://www.url.com"> This is the text is what will be linked. </a>
  The <a href="http://www.url.com"> tells the browser where to go when you click on the link. Before you use the end anchor symbol </a> is where you add the text for your link, or you can add in the code for a picture, so the picture will be the link.
  
  
• Anchor Tags: As you have seen here on my page, i have several links that take you to a specific place on this page. These are called anchors. There are two parts to the anchor tag, the link itself, and the place where you want the link to go.

  So let's say we wanted a link to take us back to the table of contents (you have seen many of these on this page). The first thing you need is the link, it would look like this:
  <a href="#contents"> Return to the Table of Contents </a> Notice the # in front of the tag name!

  Next you would put another tag at the table of contents. It would look like this:
  <a name="contents"> Table of contents </a> the table of contents text in this tag would be the text you already have, or if you perfer there not to be any text, you may just use: <a name="contents></a>

  Remember to make sure your tags are all named the same thing. you can have many '<'a href tags for one '<'a name tag, but only one '<'a name tag with the same name. Make sense?
  
  

• Downloads: This same <a href tag can also be used to let people download files that are saved on the server as well. If you go to my Garth Gallery you will see a link that says "Unanswered Prayers", by clicking on this , you can download the song. Here is the html I used so that you could access it: <a href="unansweredprayers.mp3"> Unanswered Prayers </a>
  
  
• E-Mail You can also add a link so your visitors can e-mail you. Their e-mail program (like Outlook Express) will pop up and they can e-mail you. For example, the code I used so that you can contact me is:
  <a href="mailto:pandafan81@hotmail.com"> E-mail me at pandafan81@hotmail.com </a>
  Note: The mailto code won’t always work on certain browsers, but that is within the browser itself, so often times you may want to enter in your e-mail address in for the text as I have done, this way, they can enter your address directly into their e-mail program.
  
  
• Tables: Tables are great, but a little difficult to master if your code is not organized. The importance of having tables is to line up things and keep them organized on your page. Often times browsers are set up differently so by including tables, you can make sure your pictures and text or whatever else you want to be in your table are even.
  
  • To start out with, you need to start a table with <table>.
    
  • Next you need to start a row with <tr>.
    
  • Then within the row you need cells which you turn on and off with <td> and </td>.
    
  • You also have to turn off each row </tr> after you have entered information into the cells, and at the end you need to turn off the table. </table>
  
  
• Lists: There are 3 different kinds of lists.
  • Ordered Lists
  • Unordered Lists
  • Definition Lists
  
  Let’s take them one at a time!
  
  • Ordered Lists- are numbered lists, like using numbering and bulleting.
    
    • To start an ordered list, you need <ol>.
      
    • Like a table you need to define the parts of the list with <li>.
      
    • The nice thing about lists is that you do not need to turn off the individual parts of the list, just the list itself when you are done. </ol>
    
    
  • Unordered Lists- Unordered lists are just like ordered lists, but when used they make a bullet instead of numbering.
    
    • the only difference is that to begin an unordered list you start the code with <ul>.
      
    • The same code is used to define the different parts of the list. <li>.
      
    • And in the same way </ul> is used to turn off the list.
      
    
    
  • Definition Lists- Definition lists are a little bit different, but they have the same idea. When using a definition list the computer will automatically line up the word or phrase you want and then indent the definition. As in a dictionary.
    
    • To begin the definition list use the code <dl>.
    • To open a vocabulary word, use the command <dt>.
    • Then use a <dd> to activate the indenting for the definition.
    • You do not need to turn off the <dt> or the <dd>, but you do need to turn off the <dl> with </dl>.
    • You can have more than one <dd> in a row, but you cannot have more than one <dt> in a row without a <dd>.
  
  
  ~REMEMBER TO TURN OFF YOUR BODY AND HTML AT THE END OF YOUR CODE. IT MAY BE A GOOD IDEA TO DO THAT AT THE BEGINNING AND ADD THE REST OF YOUR CODE INBETWEEN. ALSO REMEMBER TO LEAVE GOOD SPACING BETWEEN PARTS OF YOUR CODE. IT MAY NOT SEEM IMPORTANT NOW, BUT LATER YOU’LL BE GLAD YOU DID!

GOOD LUCK!

Contents

---

Here is the code that we have talked about.
With some extra added in for advanced work.

<html>
<head>
<title> MY WEBPAGE </title>
</head>
<body>

Text code:
<b> bold
<i> Italicize
<u> underline
<center> to center your text
<h1> Biggest text size
<h6> Smallest text size
<blink> to make text blink
<marquee> to make text or object scroll
<p> For a new paragraph
<br> For a line break
<hr> For a horizontal line

For a picture:
<img src="filename.gif">

For a link:
<a href="http://www.url.com">
This is the text is what will be linked. </a>

For Anchor Tags:
linked text: <a href="#tag">v Linked text </a>
anchor: <a name="tag> This text is optional </a>

For a Download link:
<a href="filename.ext"> Download this file </a>v
note: remember that, like pictures, the file must be in the same folder, and that the .ext is the correct extention name!

For an e-mail link:
<a href="mailto:pandafan81@hotmail.com">v
E-mail me
</a>

Table code:
<table>v
<tr> For a row </tr>v
<td> For a cell </td>
</table>

Ordered lists:
<ol>
<li> listed item
</ol>

Unordered lists:
<ul>
<li> listed item
</ul>v

Definitions:
<dl>
<dt> Defined word
<dd> Definition
</dl>

Helpful hints: After you have started your document in Notepad, you will need to save it. After you have opened up the SAVE box, you will want to name your file, but also add “.html”, this way you can open up your browser, and go to FILE, OPEN, and then browse to your page.

So it should look like:
my_webpage.html

Contents

---

Now for some fun advanced code!

For color and background colors you can use this code:
<body bgcolor="" text="">

bgcolor="..." is for the background color. And a certain color’s code goes in the quotes.

text="..." is for the text, this can be changed at any time with:
<font color="...">

And the color’s code number goes between the quotes as well.

Color Codes

A color is made up of 3 different colors for the computer. Red, Green, and Blue. The code is a 6 digit number where the first two digits tell the computer how much red to use, the second two are for how much green to use and the third two are for the blue (rrggbb). The values of the digits can be 0-9 or A-F, where 0 is the least amount of color and F is the biggest.

Here are some examples: <body bgcolor="#000000" text="#FF0000"> black background, red text

<body bgcolor="#FFFFFF" text="#003300"> white background, dark green text

<body bgcolor="#0000FF" text="#FFFFFF"> blue background, white text

If you want to add a background picture to your web page then replace bgcolor with background. It's value should be the name of the picture file.

<body background="filename.gif">

Here are some other colors you can try.
#0000FF = Bright blue
#00007F = Dark blue
#00FF00 = Bright green
#007F00 = Medium green
#FF0000 = Bright red
#7F0000 = Dark red
#FFFF00 = Yellow
#FF00FF = Bright purple (magenta)
#00FFFF = Bright cyan (turquoise)
#FFFFFF = White
#7F7F7F = Medium gray
#000000 = Black


I have put togeather a list of more than 140 colors with their numbers, and the names you can also use instead of the 6-digit number. Visit my interactive Color List, you can change the background color and see how the other colors look on top of it to help decide which colors work best with other colors!

---

Contents