| |
Anatomy of a Web Page
Welcome to Web Page Design. Soon you'll be making your own web pages. But before we go too far, we need to clarify some important points about web pages. As a "user" or viewer of web pages, there are some principles about web pages that you probably have taken for granted. Now that you are on the other side - creating pages for others to view, you need to have a firm grasp of these concepts.
Length of a page
The first is the length of a web page. I'm sure you have noticed that many web pages do not fit on your screen. You must use the scroll bars to scroll down the page. The page is more than just the screen, it is everything from the top - to as far down as you need to scroll.
Think carefully about your content before you make your pages. I don't know what your opinion is, but I find very long pages annoying. If you want to print the page, you get 30 or more printed pages. Plus, many people who are new to the Net are not familiar with scrolling. For them, you should put the most important information at the top of the page.
So consider your content. Think about how you will organize your site. Don't make your pages too long.
Page Filename
Most web pages, as you'll see in the graphic below, end with .htm or .html. HTML stands for Hypertext Markup Language. I like the .htm because it is shorter. Whichever you decide to use, keep it consistent so you don't get confused.Title and Page URL
Each page on the web has a title, and a filename. In the example below, the title of the web page is "Connect Me to Berrien County." The filename is index2.htm. (By the way, www2.remc11.k12.mi.us is the name of the computer hosting the web site, and /connect/ indicates that index2.htm is inside the connect folder.)This is important, because your title should be descriptive of your site and capitalized appropriately. If a person bookmarks your page, this title will become the bookmark. Have you ever bookmarked a page and the bookmark was called "Untitled"? This is because the person who made the page did not give their page a title. I like HomePage because it forces you to give a title when saving your page.
The filename is also important. These should generally be less than 8 characters with no spaces or underscores. You want people to easily type your URL. Have you ever seen a web page where the address seems to have a space in it? It could be something like
http://www.janinelim.com/my_page.htm
You know that most wordprocessors underline URLs in the text. If you underline the URL given above, it would be: http://www.janinelim.com/my_page.htm
Notice that the underscore or "_" disappears. Now you can see why it is poor design to include an underscore or space in your web page. On a Mac, you will be more tempted to include the space. Don't do it! When you publish your page, it will convert the space to an underscore and then your links will not work (also called broken links).
I also highly recommend that you use all lowercase with your filenames. Resist the capitalization habit! Windows and Macintosh computers handle case sensitive files differently than the UNIX server where you will publish your page. Many of the problems I've seen with broken links could have been avoided by using filenames with lowercase.
Your first page's filename and your URL
My URL is http://www.janinelim.com/ and yours will be similar depending on where you publish your page. If you publish on TAGnet, it will be http://www.tagnet.org/schoolname where schoolname represents the name of your school.Notice that my URL include the ~ also called the tilde. You'll find it on the upper left hand corner of your keyboard. Don't forget to hold down shift when you press the key. Depending on where you publish your page, you may have a tilde in your web page address too.
Notice that the URL doesn't end with .htm or .html. Look at my address again:
http://www.janinelim.com/
Compare this with another page:
http://www.janinelim.com/me.html
My web pages are in a freedj folder on the server. If a person types in a URL and does not include a web page, as in the first example above, the server automatically looks for an index.htm or index.html. Some servers use home.html or default.htm; most use index.html, including TAGnet. So your first page will ALWAYS be called index.htm or index.html.
Page Graphics
Finally, you need to understand how graphics are included in web pages. Let's start with an example you're probably familiar with. If you create a file in a word processor and then you add a graphic, what happens to the graphic?That's right, it becomes part of the file. If you save the file and take it to another computer, you will still have the graphic.
Web pages are another story. There are many things about web pages that are different from wordprocessing documents. This is one of them. The graphics do NOT become part of the page. The web consists of many links. A web page links to the graphics shown on the page. The graphics are not part of the page. They are separate files.
There is a good reason for this. Have you ever been on a slow modem and noticed that often the text comes in first, and the graphics follow? You may have to wait a while for the graphics to come in. The limitations of the web are because of bandwidth - or the size of the cable or "pipe" bringing the web pages to you. The graphics are separate so that you can still read the file, even if the graphics haven't all come in yet. Does that make sense?
The hardest part of web page design is file management. Where are your files and how are they organized? Your images need to be saved in the same place as your graphics. We'll talk about this in the next section. Hopefully you are comfortable with managing your files. If not, you'll learn as we go!
© 2000 Instructions created by Janine Lim for Berrien County Intermediate School District and shared with AVLN by permission.
