|
Home Home On The Web Building Your Own At-Home Home Page, And Why It's A Good Idea With "A Quick and Very Dirty Primer on HTML Programming." By Scott Rainey
This article includes instructions on how to build your own, even if it's your first HTML programming effort. Pointing your browser to a home page that lives on your own hard disk rather than somewhere on the net has the big advantage of ZERO lag time. You don't ever wait for the net to find and deliver an "At-Home, Home Page.". If You Had One? Personal At-Home pages can be anything you like. Mine is something of a Super Bookmark Page, but that's just one idea. You, the author, are able to do just about anything you want to do within the limits of HTML. This is about a 4-page tutorial, written for total HTML beginners. I've built a couple of samples for you to download and play. The simple one is here: http://www.overbyte.com/homehome/surfin.htm . A slightly more complex page with some introductory Javascript is here: http://www.overbyte.com/homehome/surfing.htm. [1] If I Had A Hammer.... Forget HTML Web Building Tools, like Front PageTM HotDogTM or Homesite ProTM - a all you need is is a simple text editor. Since HTML files are simple text files, any text editor will work. Notepad for all its faults is actually the #1 editor used by web designers. Probably always will be. All are cool tools, but you don't need to use them for this project and perhaps, ever. You don't need a web server to serve yourself a web page from your own hard disk or even a hard disk somewhere inside your LAN. Unless there's a database function or some other special functionality, you can build whole web sites right there on your own hard disk. Most web pages are "static" (unchanging) and therefore don't need a web server program at all if they come off your own hard disk.
To follow this lesson in web page design, you can print this page but it's best to have have it open in a browser window. You'll want two copies of your brower open - one to read this file, (and copy/paste the examples) and one to check on your programming results. Open Notepad and click SAVE AS to create a file on your hard disk. The file should have the letters .HTM or .HTML after its file name. Give it any name you want and save it anywhere you want, but if you need a clue I suggest the file name homehome.htm in the directory: C:\My Documents. Once you've saved the file in Notepad, open it in your browser, even if there's nothing there yet. Each time you save the file in Notepad, click Reload (refresh) in your browser to see your results. A Quick and Very Dirty Primer on HTML Programming Web files start with <HTML> and end with </HTML>. Inside of those two <HTML> tags you start a web file with <BODY> and end it with </BODY>. You always turn off something the same way you turn it on, by adding a / (slash). That's the foundation of all web publishing. A simple training web page is therefore: <HTML> <BODY> Hello World </BODY> </HTML>. You can highlight/copy/paste the above from this page into Notepad and then brows it with your brower. STEP BY STEP INSTRUCTIONS:
The web is about ideas and links to other ideas. Therefore a simple web page with one link is
Hello World. visit the <a href=http://www.overbyte.com> Overbyte </a> website! </BODY></HTML>. By the way, HTML tags are either upper or lower case. Browsers don't even care if you mix them. After you've figured out text for your messages and hotlinks, the rest of the story is just formatting pages. Like the game of Go, it takes a moment to comprehend and a lifetime to master. Let's settle with just "being in the game" today. No Matter Where You're At, There You Are. You need a place on your hard disk to put this project. I suggest creating a folder called \homehome\ which can either be at the root of your C:\ drive (C:\homehome\) or under My Documents. (C:\mydocu~1\homehome\) If you're going to use pix, I suggest giving them their own folder, and recommend C:\homehome\img\ Open a text editor (Notepad works well) and immediately save your empty file to the file name C:\homehome\surfing.htm Type this into the file and save again. (or do copy / paste)
<a href=http://www.cnn.com>CNN</a><BR> <a href=http://www.koin.com>KOIN TV-6</a><BR> <a href=http://www.kgw>KGW TV-8</a><BR> <a href=http://www.oregonian.com>Gory Onion</a><BR> <a href=http://slashdot.org>Slashdot</a><BR> </BODY></HTML>.
Once it's all built, and open with your browser make it your home page by:
You can grab most images off the net by right clicking them and selecting "Save Image as" or "Save Picture As.." You must select where you're going to save the picture file, and you can also change its name as you save it. Let's say you want to use CNN's logo on your At-Home home page. Go to CNN.com, select an image and right click. Next select "Save Image As." You'll want to go to /homehome/img/, and you'l probably want to call it cnn.gif even though CNN's webmaster named it logo123134.gif. That's ok just tell Windows what you want to name it (don't loose or change the extension) and it's done. Now you'll want to change the link above to read <a href=http://www.cnn><img src=./img/cnn.gif></a> The HTML above puts an image in your page and makes the image a hot link. The Logo you snatched probably won't fit your page the way you want it to so you've got two choices now:
Changing the size of an image is a cute HTML trick. The image tag: <img src=./img/cnn.gif> will display the image at it's natural size. Good HTML programming says tell the browser the size of the image so it can build the page before everything gets downloaded. You don't need to do that if it's coming off your hard disk, however image size tags give you the poorly documented ability to change the size of the image on screen, so you may want to try If the image is 100 pixels wide and 50 pixels high, you'd key in: <img src=./img/cnn.gif height=50 width=100> and the world would be happy. You can also hack the size a bit. Let's imagine that this image is twice as wide as you want and you don't have time to work it with an editor. No problem. Just declare the size of the file to the browser, ie: <img src=./img/cnn.gif height=25 width=50> and it's all done. You can get bigger or smaller this way. You can change the height/width ration to suit yourself too. Do take the time to look at the result, you won't always love it. For an example of one way to do this, I've placed a variation of my own At-Home page at: http://www.overbyte.com/homehome/surfing.htm To save this as an outline for your own development to your own hard disk, create a folder (directory) called /homehome/ on your hard disk. If you're using Netscape, proceed as follows Open the above web page, then Click File / Save As and save the file to your hard disk in the /homehome/ directory. With IE, it's a bit more complex, as IE changes pages you save off the net, often adding typical Microsoft bloatware codes. With IE, open a page, then click View / Source and the file will appear in Notepad, and you can then do File / Save As. There's one more file you'll want if you want to use that cool search engine gateway at the top of my sample page. It's full name is http://www.overbyte.com/homehome/js_se.htm. Link to that page and save the same way you did with surfing.htm. To steal the images I use, first create a sub folder (directory) called /homehome/img/ Next, Right click on each image in turn, and then click the line Save Image As (IE users click Save Picture As) /homehome/img/ Now edit to your hearts content. The idea for the At-Home home page came from my friend Brewster, who deserves full credit for a very good idea indeed. [1] To use the Javascript, that carries your info request to a search engine, you'll need to include this action page js_se.htm and save it in the same directory as surfing.htm. This is a simple but not well understood trick. In Netscape right click on js_se.htm then click save link as to save the web file to your hard disk. |