|
|
Creating a Web Page and Publishing ItA Hands-on How-toSMfrom Brass Cannon ConsultingA little vague handwaving can often save hours of tedious explanation. |
This just a quick overview of how to make a basic, "static" page. To keep it short, we're not touching on graphics or browser-specific add-ons (the ones that ONLY work with Netscape or ONLY with Internet Explorer). If you're interested in those, you'll find lots of resources on the Web itself.
I'm going to make a few assumptions:
Creating a Web page isn't very hard. You don't need a special Web page editing program -- I prefer to use Windows Notepad, myself. If you prefer to use Write or Word or another editor, you must be sure to save the file as plain ASCII text. A Web page is a plain text file, one whose name ends with .htm or .html, and which happens to contain certain tags. These tags are what tell a Web browser program (such as Internet Explorer or Netscape or Opera) that the file is to be presented on your screen as a Web page.
Here is a simple example - a Hello, world! page. Click the link to see what it looks like in your browser. Each HTML (Hypertext Markup Language) tag is wrapped in pointy brackets, like this: <TAG>
I'm going to put a label right here in this page, the one you are reading, so we can return after looking at the example. I'll explain how that works in just a minute:
<A NAME="sawit"> <!--- This is an invisible label ---> </A>
And here's the source code for the example - be sure to follow the link to see how it looks in your browser:
<HTML>
<HEAD>
<TITLE>Hello, world!</TITLE>
</HEAD>
<BODY>
<H1>Hello, world!</H1>
I'm a brand-new Web page!
Here's a long line of stuff that goes on and on and on
and doesn't wrap until your browser gets tired and
decides to wrap it anyway.
<P>
Let's <A HREF=html101.html#sawit>go back</A> to the HTML101 page.
</BODY>
</HTML>
Notice that many of the tags are in pairs. The first tag, <HTML> matches the last tag, </HTML> and so forth. The closing tag of the pair always has the slash character ("/").
Also note that even though the text above is indented and wrapped nicely, your browser ignored all the tabs and carriage returns! This really makes a lot of sense, if you stop to think about it. You may be running your browser full-screen, while someone else has it in a small window. It's up to your browser to provide the line-breaks and to change them "on the fly" if you resize your browser window. So don't get hung up on formatting your paragraphs just-so; you don't have any control over what browser or screen your readers are using. For now, concentrate on the content, the text, of your page.
The <H1> tag indicates a large header. There are six sizes, from 1 (big) to 6 (very small):
Note that although H6 is supposedly a "heading" type, it is actually more useful for "small print" such as footnotes. Each <H1> tag requires a closing </H1> and so forth.
To make a paragraph break, like the one between this sentence and the one above, you need the <P> tag. You can use matched <P> and </P> to surround a paragraph. Don't just drop in a lot of <P> tags to create bigger breaks -- you can get away with that, but if you ever want to use more advanced HTML, like Cascading Style Sheets, you'll be glad you wrapped your paragraphs correctly.
The "Hypertext" in HTML refers to the ability to insert tags that link one document to another. In our example page, we put this link:
Let's <A HREF=html101.html#sawit>go back</A>
...which brought us back to this very page, at the label called "sawit".
When I first wrote that page, the link said "Click here to go back." I've had a few people ask me to do it that way, because they feel that their visitors might not know enough about the Web to click if we don't tell them to! That's not really very likely, you know. How would those people find your page in the first place? Don't let stamping out the words "Click here" become your life's work, but do try not to use that phrase for every link you make.
Let's say you've written a short HTML file, and saved it onto your own hard disk with the file type of ".HTM". You can view it by telling your browser to open that file. To make it available to the rest of the world, you will usually put that file into a public_html directory which exists under your home directory at your Internet Service Provider.
I would love to tell you how to use a "real" ftp (File Transfer Protocol) program to upload files ("up" means from your PC to your service provider; "down" is the other direction), but that's a whole lesson by itself. Fortunately, if you are using Windows and a current copy of Internet Explorer, you can use that to upload files. Let's say your ISP is example.com. Instead of going to www.example.com you need to use this special address (where 'myname' is your example.com account):
ftp://myname@ftp.example.com
Note that there isn't any "www" in this address, and it begins with ftp, not with http. You should see a "popup" box that asks for your password. In a few seconds your Internet Explorer window will change into one that looks a lot like your own Windows Explorer, the one you get when you double-click on "My Computer." And the wonderful thing about this is, you can drag files from Windows Explorer to Internet Explorer. It's only a little slower than dragging files between folders on your own disk. So, if you've created a "public_html" directory on your PC, drag the entire folder over to Internet Explorer. In a few seconds, it should be on your ISP. And as soon as it is, you can view it in Netscape or Internet Explorer by going to "http://www.example.com/~myname/" More to the point -- so can everyone else on the World Wide Web.
Point your browser at http://www.example.com/~myname/mypage.htm
(of course, use your ISP for example.com, your login name for
myname, and the name you gave your page for mypage. If you
call your page index.htm, you can leave off the mypage.htm
part.
Uploading more pages or additional files such as .gif images works the same way -- just use Internet Explorer and drag them to your public_html directory.
One thing to beware of - Unix, which is the operating system we're assuming your server uses, is "case-sensitive." This means that lowercase or small letters are not the same as UPPERCASE letters. INDEX.HTM is not the same file as index.htm. That can cause "File not found" errors even though you see the file on disk. Your links may not work if you link to INDEX.HTM and the server thinks the file is index.htm. You can either rename the file, or you can change the link.
You are invited to discuss this article with the author in the Feedback section of the Brass Cannon webboard.
