How does the Internet Work?
The internet is a huge network of computers around the world that are connected to each other. This connection allows all of the computers to pass information back and forth. The World Wide Web (WWW) allows us to view information that has colors, sound, pictures, even movies. This is made possible through a web browser - such as Mozilla Firefox, Internet Explorer, Netscape Navigator, or whichever button you clicked on to get to the Internet. Browsers read a special code, then translate that special code into what we see on the Web page.
So, what is this special code?
It's HyperText Markup Language, or HTML for short, and it tells the browser exactly what to do.
Building a Web Page
To create a web page, you must first know what the purpose of your site is going to be. Once that's done, you need to gather your information. Yep, it's just like doing a report.
Once you have all your facts, you need to create a storyboard. A storyboard is simply a visual layout of how you want your web page to appear. Get out a pencil and some paper, and put down in writing how you want to present your information. Forget about the computer. Turn it off and move away from it. Sit down somewhere quiet and start planning.
Sketch where you want to place the text (some wiggly lines will do) and where you want to insert images.
Are you going to link to other pages? If so, where will you put the link buttons? Do you want them across the top, along the bottom, or down the left side? I know, decisions, decisions, decisions.
Take a good look at what you've drawn. Does it look too crowded? If so, maybe you should use another page and link the two pages together. Does it look boring? If so, that's okay. We can fix that. Right now, your objective is to decide where you are going to put your information.
Figure out what you would like to do, and we'll figure out how to make it happen later.
Using HTML
HTML is just a bunch of text. That's all that the browser sees, and to be quite honest, the browser doesn't care what program you use to write this text, as long as it is text-only.
Practice Session
That said, let's see if it's true. Go to Notepad. (Start Menu > Assessories > Notepad).
- Key in two sentences on two separate lines describing your favorite dessert.
- Go to File > Save as and save it as "favoritedessert.html"
- Next, select "all Files" from the drop down menu.
- Make sure you save it into a folder labeled as "firstname'swebpage".
- When you are through, open up your browser (Firefox). Go to the File menu> Open File, and select your file.
What do you see?
Uh-oh, what happened. This doesn't look like what I just typed!
So, what just happened? We told the browser what text should appear, but we didn't tell the browser how the text should appear. Without any directions, the browser will put everything in a straight line.
That's where <tags> come in. We use <tags> to tell the browser where to put things and how things should look. In other words, the tags give structure and meaning to your text. There are a ton of tags, and learning to use HTML means learning to use tags.
For those of you who are starting to feel overwhelmed, don't! We are going to learn how to use these tags in small steps, and before we begin developing our own web page, we are going to create a "cheat sheet", so don't stress about memorizing a bunch of code.
"Tagging" your Favorite Dessert"
Practice Session
Let's go back to Notepad. Go to File > new, and key in the code exactly as you see it below. Save as taggingfavoritedessert.html in your web page folder. Don't forget to select "all files" before you save.
<html> <head> <title>My Web Page</title> </head> <h2>Favorite Dessert</h2> <body>Text about your Favorite Dessert</body> </html>
Go back to your browser and open up "taggingfavoritedessert.html". Now what do you see?
Congratulations! If you typed in everything just as I've shown you, and saved it properly, then you should be looking at your first web page.
If your aren't seeing a web page, or it doesn't look right,then
, take a deep breath, and check your code. You most likely have a typo, and typo's aren't allowed. HTML is a very exact language, and it's not very forgiving. It wants to give you what you asked for, but if you didn't type it correctly, it cannot read your mind. So, what is the solution, you ask? Go back to your source code, of course, and check everything. There's a tag that isn't closed, a complete line left out, sometimes even a missing space or semi-colon, all of which can throw the program off. Another common mistake is not saving your work properly, so check that, too.
Don't feel bad. We all will make mistakes. Go on back and check your code.
Once you've found and fixed your mistake and saved your work, then go back to your browser and click the refresh button. If you still haven't gotten your web page up, have someone else look at your code. You want to try to find the problem yourself, but if you can't, don't be afraid to ask for help.