Make your own htm file and view it in browser (web page simulation)
Before you make a real web page by uploading your *.htm and *.jpg files to a server (for other people to view via the
internet), you can practice by making a "simulated web page". It works the same way, but since the *.htm and *.jpg files are
located on your hard drive rather than a server, the page is viewed only on your computer.
Return to home page.
The *.htm file is a simple text file containing all the instructions which the browser program will use to create the web
page you (or other people) see on the screen. Namely:
* the text
* codes for the graphic images (*.jpg files)
* various formatting codes that define background color, font color, font style, font size, alignment of text and images,
links to other web pages, etc.
For your simulated web page, the *.jpg files should be in the same folder as the *.htm file.
Commonly used browser programs for PCs are Mozilla Firefox and Microsoft Internet Explorer. I prefer Firefox. If you don't
already have it on your computer, you can download it here.
OK. For this walk-through, let's imagine you want to make a web page featuring Paris Hilton and Lindsay Lohan.
1. Create a special folder on your hard drive where your *.htm and *.jpg files will be located.
* From the "Start" menu, or the desktop, click "Windows Explorer". If you can't find Windows Explorer anywhere, ask some
nearby computer geek how to find it and put it on your desktop and/or Start menu. If all else fails, ask me.
* Once Windows Explorer is open, click "Local disk (C:)" (under "My computer"), then "File", then "New", then "Folder"
* A box appears for the name of your new folder. Type in "Paris and Lindsay". Close Windows Explorer.
2. Put *.jpg files into your folder
* For this walk-through, just download the images I've put here. Right-click on this picture of Paris Hilton.
Click on "Save image as". A "Save image" screen will appear. In the "Save in" box at the top, navigate to your new "Paris
and Lindsay" folder. In the "File name" box at the bottom, type "Paris.jpg". Make sure the "Save as type" box says "JPEG
image". Click the "Save" button at lower right.
* Repeat the same process for this picture. Save it as "Lindsay.jpg".
3. Create your index.htm file
* Open Notepad (go back to Walk-through #01 if you've forgotten how to do this).
* Click "File", then "Save as". A "Save as" screen appears. In the "Save in" box at the top, navigate to your "Paris and
Lindsay" folder. In the "File name" box at the bottom, type "index.htm". Click the "Save" button at lower right.
* In the Notepad screen, type exactly what you see here.
* When finished, save the index.htm file (click "File"/ "Save", or use the shortcut "Ctrl-S").
* Then close Notepad.
4. View your simulated web page
* Open Windows Explorer again.
* Navigate to your "Paris and Lindsay" folder.
* Right-click on the index.htm file.
* Click "Open with".
* Click "Firefox" (or "Internet Explorer").
* You should see a simulated web page that looks something like this.
Look at the various HTML codes (enclosed by angle brackets <...>) in your index.htm file, and compare with what you see on
the web page. This is the best way to become familiar with the codes, and what they do.
Experiment by making changes in your index.htm file, adding more *.jpg files, etc. Each
time, save the index.htm file as in Step 3 above, then view it as in Step 4.
The more you practice, the better you'll get!