G E T T I N G S T A R T E D
Onward!
In flying I've heard it's easy to take off but hard to land. I find the exact opposite true for starting a web page. There are so many things to consider when starting. Since this is supposed to be a basic or crash course in HTML I won't go into great detail on everything, but rather I will point out a few items that you should bear in mind. Feel free to experiment with the various aspects of web page design. Play with the tags to get the feel of them. Be creative and express yourself. After all, your page will be a reflection of you. Remember to talk about what you know-----anyone can type words but that doesn't mean they have said anything.
The first item to consider is ,"What kind of page do I want to make?". Staring at a blank page can be frightening. Be calm, get a grip, and be yourself. Are you the type of person that likes to share aspects of your life with total strangers?-make a personal page. Do you like to learn new stuff all the time?-share what you have learned. How about that hobby of yours? How about all those nature photos you have? Get the idea. I started this site to share a few things I thought might interest other people and to share what I have learned about them.
Once you decide on what kind of page you're going to make, then stick with a style or overall theme. All my pages are the same color, the same logo is on all the pages, the titles all contain my site name. This makes it easier for a person to know that they haven't left your site. If that person is a regular visitor, then it helps them feel comfortable and know that they have made it back to your site. Reflect on the web sites that you have visited. Did you go Back? Why did you go back? What would you change? Was the site hard to navigate? You will be the one responsible to change or enhance these. You will have the basic ability to create a web page that can stand on it's own merits. Ready?...
Itchin' to get started?
Okay, here's something to sink your teeth into and play with
for a while. After all you should enjoy this. The following
is the basic layout for a web page:
<html>
<head>
</head>
<body>
</body>
</html>
As you may have noticed, there are two sets of tags in
between the greater than and less than signs that are the
same except for the forward slash. The first tag starts the
action and the second tag, with the forward slash, closes the
action. You will always use these tags in pairs like this
except for a few instances.
There are two basic sections to the HTML document. First you
have the "head" and then the "body". Each section gets its
own type of text and is used for different reasons. This is
not as difficult as it may seem as you will be dealing mostly
with what goes between the "body" tags. Did anyone copy the
above example? If you did then either one of two things most
likely happened. First, you typed the above example and saw
nothing but the tags, or you saved the file properly and
nothing showed up. In the case of the later, you are one step
ahead of me when I first started because I knew nothing about
how to save the files. I tried to save my files, in my word
processor, in document form and that just won't do. What
needs to be done is the file must be saved as pure text or
text only.
Hint: use Notepad or WordPad, my preference. In the
case of WordPad don't bother trying to format anything
because browsers will either ignore your formatting or the
formatting will confuse the browser. We use our tags to do
our formatting, this makes browsers happy.
Okay then, how do we save our files? Good question. First we select the programs File, Save command. The first time you do this with a new file the "Save As" dialog box pops up and allows us to: 1) name your file, 2) choose a file type, and 3) choose where you'd like the file saved. When saving your file it is important to use the proper file extension. For our web pages we use the extensions ".html" or ".htm".Either extension is acceptable to your browser but for ease of use, always use the same extension on all your pages. This becomes more important when you start linking to other pages within your web site. When naming your file, it is best to use all lower case letters. This is also for simplicity sake. Most all web servers are very sensitive to "case". A file name written in upper case and lower case, even though exactly the same but for case, are two entirely different files to a server. This will cause problems when it comes time to link to other pages within your web site and when telling the server which image to give to the browser to display. One final note on file names, don't use any spaces in your file name. The more popular versions of Windows is able to deal with spaces. Even Internet Explorer can deal with spaces, but Netscape gets all bent out of shape when there are one or more spaces in a file name. So be on the safe side and don't use any spaces.
Remember the example I showed you a couple of paragraphs ago? Go ahead and open the text editor of your choice, and type the example exactly as shown. Use "wrap to window" when using one of these editors to keep all of your text in view. Save the example as a text only file with the extension ".html" or ".htm" (you can name it anything such as test.html). Save it somewhere that is easy for you to get to (it's a good idea to create a folder to put these little examples in). Then go to that folder and look at your page (the page icon should show your browser icon, i.e.. "E" for internet explorer). Double click on the file and your browser should launch (if it doesn't, and you see your tags as you had written them, then the file wasn't saved properly) and you should see nothing. What? Where's my page? Your page is there, we just didn't add any text to it. Your browser doesn't show the tags you use, but rather uses them to display your text the way you want.
Now on to the meat in the sandwich. Go back to your editor, i.e.. NotePad or Wordpad or what ever you used, and click on file, then open, browse for the file you had created and then click on it to open it. Your page should be the same as you left it. Now go down the page until you get to the <body> tag. We are going to insert some text in the body. Place your blinking cursor behind the <body> tag and hit enter to start a new line (this isn't how to start a new line on your web page it just starts a new line in your editor. Makes working on your stuff easier 'cause you can see your text easier). Let's type in, This is my first web page text. Your document should now look like this:
<html> <head> </head> <body> This is my first web page text. </body> </html>
Go to the top of your window, click on file, then click save. If a pop up window shows up that says something about do you want to save your document in text only format, click yes (remember, text only).Find your file and open it in your browser (it should open in your browser automatically if it was saved properly, i.e. HTML format). There on the page is your text. Pretty slick. Go back and type some more text, delete the first text if you'd like and repeat the same type, save, view process. One small note, you must close your browser and then open it again each time you save a file for the new changes to be seen.