|
|
|
|
 Expanded and adapted from "The Anatomy of a Web Page" by Nancy Powell in the Teachers Guide to Cyberspace Here's a sample page for you to use when writing a Web page. It has different types of print, an image, a background, links, lists, and lots of resources. Now, to see what the HTML (HyperText Markup Language) code looks like choose View from the menu on your browser and choose VIEW SOURCE. If you want to print out the HTML, choose FILE, SAVE (or SAVE AS) and then bring up the file in either your Notepad program (found in the Accessories folder on the PC) or Simple Text (on the Mac) and then you can choose PRINT from there! Once it is printed, compare what you see in the code with what you see on the screen and you'll uncover the mysteries of HTML! Below is Bloomington High School's logo (I taught there). I scanned it in using Storm Software's Easy Photo Reader (now way under $100 where I live) and saved it is a .jpg file, then used a program called PaintShop Pro (you can try it before you buy it for $99) and saved it in .gif format with a transparent background. 
HTML codes are always enclosed in the less than sign < and the greater than sign >. The original background color (bgcolor) was a lime green until a file called "waves.jpg" was loaded on top of it to make what is know as the background, the text is black, the new links (link) are blue, the visited
links (vlink) are purple, and the links turn green for a very short time when you click on them to show that you have accessed the link (alink). The code for setting up this page with links and colors is found in the body command as found below - remember the less than sign and the greater than sign around the command. A very nice site to visit to get the full effect of colors on a web page is the Web Page Backgrounds and Colors Page. You can preview the colors, get the codes, and learn how the different browsers use color. You can get textures to use for backgrounds--they will take a while to load but these sites might contain just the right background that your page needs and the directions on how to copy the file and apply it to your page right there on the site for you. If you don't want to create a background from scratch or want to customize one that you've made or found, then a visit to one of these sites may prove useful. Text and Headlines... Bloomington High SchoolNotice that I've changed the width
and the size of the 2nd horizontal rule <HR> from the first one. This is header size <H2>.This is header size <H3>.This is header size <H4>.This is header size <H5>.This is header size <H6>.I've used the unordered list <UL> command to indent these lines.
Notice the
picture on the left and the next one further down on the right.
The penguin picture has not been saved with a transparent background and a
border has been added to it. The HTML code reveals that the first is
to be aligned along the left side and the second animated picture is aligned on the right The words get wrapped around them without you telling it to! The way I remember how to put a graphic on the screen is to think image (img) file name or source (src) of the graphic and then to tell it where to align it--left or right, and then you can tell the browser to resize it with the height or width commands (using both will speed up the loading of the image), and then you can put a text name up (alt) in case a person chooses not to load graphics when they look at your page. Look what happens when you click on the links in the Electronic Links to Great Web Sites below. Each set of links takes you to the new site, but you must click on "Back" at the top of your browser to return to my web page construction helper. Also note that these selections have bullets in front of them. I've used a command to make an unordered list <ul> to make the selections indent and know to put bullets wherever I put the bullet command <li>. To link to another site you must place the following command in front of the text.
To end the link text, put this after the text: So, if you wanted to the end user to go to www. webhelp.html (a fictional address, by the way), and you wanted the phrase, "click here" to be the link, the whole tag would look like:
You can make an image a link by surrounding it with these tags also. Here is an example of the code for a graphic called image.gif that is to be linked to the URL www.webhelp.html.
Border = 0 makes sure that a rectangular border is not going to show. This is an option if you are using transparent gifs. To end the link text, put this after the image: Electronic Links to Great Web Sites
Notice the numbers in the list below ....these are the result of ordered lists <ol> and the <li> command. To make music play while people visit your site, write a midi file or find a freeware one and then attach the following code: I sometimes put these two commands at the end of my page so that people have the information and graphics to look at while the music is loading! Are you ready to try to write a Web Page? If so, save this page (or any page that has a format similar to one you'd like to use) on your disk by choosing file and save. Then just edit it in Notepad or SimpleText! Have fun! |
|
