Building a Shell
Now that you've decided on your overall architecture, you're finally ready to build something! What you want to build is a shell—placeholder pages that you can put content into later. You're not going to worry about content or appearance; just link the important pages together. This is a good time for the artist (if you're not wearing that hat as well!) to start working on a design to integrate into the pages later.
Basic HTML
HTML, or HyperText Markup Language, is a way to format a page, so that a browser knows how to display the information. I could devote an entire book to HTML, but for our purposes, you really only need the basics. For a more in-depth treatment of the subject, you can pick up any number of books available.
HTML is a standardized markup language. The current version is HTML 4.0, but everything we do in this book will conform to the previous standard, HTML 3.2. For more information on the HTML standard, see http://www.w3.org.
Take a look at three important concepts: text formatting, links, and images.
Getting Ready
The first thing that you need to do is to go to your computer and create an HTML file.
If you are a professional web developer, you will likely use an authoring tool, such as Visual InterDev. HTML authoring and generating tools have come a long way since their primitive beginnings, and there can be considerable time savings from using them. Even a tool that simply color-codes HTML tags or the ASP sections of a page can drastically reduce errors and the time spent looking for errors.
You don't need anything fancy to create these files, however. If you don't have one, simply start up a text editor, such as Notepad or SimpleText. Almost any program you use to type will do, as long as you can save a file as plain text. You might not want to use Microsoft Word, though because it tries to be a little too helpful and interprets HTML like a browser instead of letting you see it. The first HTML pages, housed on UNIX machines, all ended in .html. Because at that time Windows could only handle three letter file extensions, however, .htm also became commonplace. Either one will tell the server and the browser that this is an HTML page.
Open a new document and save it as index.htm. Because this is our temporarly home page, save it to the home directory.
Formatting Text
HTML is made up of tags, which are enclosed in greater than and less than signs. For example, to tell the browser to start printing in bold, use the bold tag, which is <B>. To tell the browser to stop printing in bold, use the tag </B>. The slash tells the browser that this is a close tag. In your index.htm file, type the following:
This <I>is</I> going to be the <B>main</B> page for our website, <I><B>Primary Outpost</B></I>.
Save the file. Next, look at the file in a browser, such as Netscape Navigator or Microsoft Internet Explorer. Start your browser and send it to http://localhost/index.htm.
Note
If you do not yet have your web server installed, you can access the page using File/Open. This won't work for an ASP page, but it's fine for plain HTML.
You should see the following (see Figure 1.12):
Figure 1.12. A basic HTML page.
Note
If the browser can't find the page, make sure that:
your web server is running.
the file is in the root directory.
you've typed the URL correctly, with no spaces.
Many other formatting tags exist. I cover them as you use them, but the important thing to understand here is what tags are and how you can use them.
Another important thing to understand is that HTML ignores white space. In your index.htm file, add some blank lines and additional text, so that the file reads as follows:
This <I>is</I> going to be the <B>main</B> page for our
website, <I><B>Primary Outpost</B></I>
Users will come here first when they come to the site.
Now that you made changes to the file, you want to see them. You do that by getting the browser to take a new look at the file. Click the Reload or the Refresh button and you should see the window change to read as shown in Figure 1.13.
Figure 1.13. HTML ignores white space.
HTML ignores the blank lines you entered, so you have complete control over things, such as line breaks. To insert line breaks and spaces between lines, you use two special tags, the line break tag, <BR> and the paragraph tag, <P>. So you use
This <I>is</I> going to be the <B>main</B> page for our
website, <I><B>Primary Outpost</B></I>. <BR>Users
will come here first when they come to the site.
…to give you the output shown in Figure 1.14.
Figure 1.14. The <BR> tag inserts a line break into the page.
You say you don't see the difference? Remember to reload the page, like you did the last time you made a change. The browser only looks at the file when you tell it to.
The paragraph tag is like the break tag, except that it inserts a blank line between paragraphs, whereas the break tag inserts a line break. (Hence the name.) Try replacing the break tag with a paragraph tag. Save the file and reload it to see the difference.
Links
This is all well and good for formatting text, but you need to do two very important things before you can build your site. You need to put images on the page, and you need to put in links the user can click to go to another page. You designate text as a link with the anchor tag, as follows:
The latest information on Active Server Pages is available <A>here</A>.
That's fine, but you haven't told it where you want it to go. You do that using an attribute of the anchor tag, HREF, or hypertext reference. To tell the browser you want to make a link, put the following tag into index.htm:
This <I>is</I> going to be the <B>main</B> page for our website, <I><B>Primary Outpost</B></I>. <BR>Users will come here first when they come to the site. <P> The latest information on Active Server Pages is available <A HREF="http://www.activeserverpages.com">here</A>.
This gives you the output shown in Figure 1.15.
Figure 1.15. Making text into a hypertext link.
In this case, you have a link you can click for more information. If you're connected to the Internet, go ahead and try it.
Congratulations, you've made a Web page!
Images
OK, so it's not a very attractive Web page right now, but you'll soon take care of that. The first thing to do is to decide on an image to put on the page. On the CD that comes with this book, you will find a small collection of them in the Chapter 1 folder. Back in your operating system, open that folder and the images folder within it. Now drag one of the images to the home directory we created earlier. For my examples, I'm going to use logo.gif.
Now you need to reference that image in index.htm. You do this with the image tag, <IMG>. Add the following text to your file:
<IMG src="logo.gif">
This text tells the browser two things. First, it tells it that you want to display an image, and second, it tells it what the source of that image is. Note that you don't have all that http:// stuff you're used to seeing because this image is in the same directory as your file, so you can use a relative reference.
GEEK SPEAK: An absolute reference is a complete address, such as http://www.nicholaschase.com/images/logo.gif, that doesn't change depending on where it's being called from.
A relative reference is a partial address, such as logo.gif, that is measured from the place from which it's being called. For example, if the page http://www.nicholaschase.com/info/main.html contains the reference moreinfo.html, it would point to http://www.nicholaschase.com/info/moreinfo.html..
Your index.htm file should now look like this:
<IMG src="logo.gif"> <P> This <I>is</I> going to be the <B>main</B> page for our website, <I><B>Primary Outpost</B></I>. <BR>Users will come here first when they come to the site. <P> The latest information on Active Server Pages is available <A HREF="http://www.activeserverpages.com">here</A>.
Save the file and reload it (see Figure 1.16). If you don't see the image, or if you get a broken image, check to make sure that you have put the image in the same directory as index.htm, and that you spelled it correctly. Also, on most home systems it doesn't matter, but most servers are case sensitive; upper and lower case matter.
Figure 1.16. Adding an image to the page.
That's all there is to it! Sure, you produced only a very simple page, but you now have all the building blocks that you need. As you go along, you'll learn more about HTML.
Putting it All Together
Now that you have the basics, you're ready to put together the shell of your Web site. You already created the home page, index.htm. Now you're going to create the rest of your pages. You could go ahead and create all the subpages under each category, but you can take care of that as you go along. For now, just take care of the main subpages.
In your text editor, create a new file.
Put a name in your file, so you know what it is when you call it up. For this, use the header tag, <H1>. Headers come in six sizes, but <H1> is the biggest. Type the following into your file:
<H1>Archives</H1>
Save your file in the news directory and call it archives.asp. We've changed the file extension because we will eventually be putting ASP commands into the page, so we want to be prepared.
Open archives.asp in your browser by entering http://localhost/news/archives.asp in the location box.
Repeat steps 1–4 for the files news.asp, bazaar.asp, mySpace.asp, and auctions.asp, saving each in the proper directory. Do the same for register.asp, which belongs in the home directory. Feel free to experiment with the text you put into each file. Remember, you can't hurt anything! The worst thing that can happen is that it will look funny, and that never hurt anybody.
Now that you have all the pieces, it's time to put them together. Create a new file called index.asp and save it in your home directory. You're going to create a home page for your site. You need to create a header and links to the other pages, and you want it to at least be readable, if not attractive. (You worry about attractive in the next section.) Type the following text on the page:
<H1>Primary Outpost</H1> Your source for science fiction news. <P> We will put current news here. <P> News Archives <P> The Bazaar <BR> mySpace <BR> Auctions
Now you have your basic page, but you still need to add the links to your other pages. When you're finished, it should look like this:
Code Listing 1.1. index.asp: Our Home Page
<H1>Primary Outpost</H1> Your source for science fiction news <P> We will put current news here. <P> <A href="news/news.asp">News</A> <BR><A href="news/archives.asp">Archives</A> <P> <A href="bazaar/bazaar.asp">The Bazaar</A> <BR> <A href="auction/auctions.asp">Auctions</A> <BR> <A href="mySpace/mySpace.asp">mySpace</A> <BR> <A href="register.asp">Register</A> |
You've done it! You created a Web site!