Intro html exercise
We're going to start learning how to create web pages by using html -- hypertext markup language. Html is basically an almost universal computer language that enables us to create files on most types of computers; these files, if stored correctly, are then accessible to users at remote sites using most types of computers, and people all around the world can look at them on whatever kind of computer they might have.
An html file is essentially a set of instructions that tell the computer what to show on the computer screen. They are very simple files, as computer languages go. When you create a Microsoft Word document or a Powerpoint presentation, for example, and place a picture in your document, that picture more or less becomes part of the document, and the computer file becomes larger and more complex. An html file is different in that it tells the computer to go look somewhere else for the picture -- a separate file -- and show it on the screen. The computer uses software called a web browser -- such as Netscape Navigator or Microsoft Explorer -- to find and display the html files.
Follow these simple (?) instructions to create a basic html file.
Click on the Start button, go to Applications, Microsoft Windows Accessories, and then open Notepad. Carefully type the following (or highlight it, copy it [CTRL C is a shortcut] and paste it [CTRL V is the paste shortcut] into the Notepad file):
<HTML>
<HEAD>
<TITLE> Put your Page Name here </TITLE>
</HEAD>
<BODY>
Your Name<BR>
Your address<BR>
Your phone number<BR>
</BODY>
</HTML>
What is all this? Again, it's just a set of instructions for computers to read. These instructions are indicated by the < > characters. Most of these instructions, or tags, are in sets of two -- one opening command, one closing command. For example, the <HTML> tag tells the computer that this is the beginning of an html file. The closing </HTML> tag (note the slash) tells the computer that this is the end of the file.
The title tag set, enclosed in the head tag set, indicates what is to appear in the blue bar at the top of the browser screen -- the "head" area.
The body tags are very important to us right now. Everything you want to appear correctly in the browser must be between the opening and closing body tags, which tell the computer that this is the main part of the file that is to be displayed on the screen.
The <BR> tag is an exception to the opening/closing rule -- it simply indicates a line break. Without the <BR> tags, your name, address and phone number would all appear on the same line, because the computer wouldn't know what else to do. Tabs and returns in html files mean nothing to the computer. They can, however, make the coding easier for us to read.
Save the file to your J: directory -- it's the directory that has your login. It's probably a good idea to create a new folder for the web files we'll be working with. Click on file icon located at on the upper right side Name it Web. Next change "Save File as Type" to "all files," and name the file that you've created in Notepad whateveryouwant.html. By adding the .html extension you're making this file readable as an html file. A while back, only Macintosh computers would work with the extension .html; with PC (Windows) computers you had to use the three-character extension .htm. Things are becoming a bit more universal now. Remember what I told you about having no spaces in names of files and to keep the names short.
Keep the Notepad file open. Click on the button at the bottom of the screen to go back to Netscape. Then go to File, New Navigator Window; in the new window, go to File, Open Page (click in Navigator). You'll probably have to browse around to find your file. When you open it, you should see on the screen the file you created, with the title in the blue bar at the top of the page and your name, etc., in black letters against a gray or white background. You've just created your first web page. Pretty simple, eh? Also pretty boring. To switch back and forth between these instructions and your new page, click on the buttons at the bottom of the screen.
Switch back to your html file in Notepad ( click on the buttons at the bottom of the screen) and carefully edit your original file to add the following coding. DON'T repeat any coding -- just add what wasn't there before:
<HTML>
<HEAD>
<TITLE> Your file name</TITLE>
</HEAD>
<BODY BGCOLOR="#00FFFF">
<CENTER><H1>Your name</H1></CENTER>
<H3>Your Address</H3>
<H6>Your phone number</H6>
</BODY>
</HTML>
Save the changes you've made. Go back to your Netscape page and hit the Reload button to see the changes to your file. The first line of text should be bigger and centered, the second and third lines progressively smaller. The background should be light blue.
How would you center the second and third lines of text? There are two different ways to place the coding. How would you make all three lines the same size? Try it.
Now add this to the line with the body code: TEXT="#800000"
Save changes and look at your file in the browser -- you should have a reddish text.
Placing a picture
Right-click on the picture below (point at it and
click on the right-hand mouse button). Save Image As to your J: directory,
in the same place you saved your html file. Don't change the picture file
name.
Go back to your html file. Make sure your cursor is on a line before the closing body command </Body>. Hit Enter to clear a line, then type <IMG SRC="smith.jpg">. This, roughly translated from the computerese, means, "Put an image here; the source of that image is a file called smith.jpg." Save your changes, and go back to Netscape to preview. You should see the picture of the person above on your web page. If the picture doesn't show up, you might have a typo, or you might have placed the file into a different folder. If you want the picture in a different place on your page, just move the line of code. If it's interfering with text, try adding line breaks <BR>.
Finally, let's make a link.
Add this coding somewhere between the opening and closing body tags:
<A HREF="http://www.campbell.edu/">Campbell University</A>
The <A> tag set stands for anchor; HREF is hypertext reference. HTTP is Hypertext Transfer Protocol. This code set tells the computer to go look on the World Wide Web for a web site. The address, or URL (Uniform Resource Locator), is www.campbell.edu. The .edu suffix tells us it's an education site, as opposed to .com (business), .org (non-profit organization), or .gov (guess what?).
The words "Campbell University" are the description of the link, meaning they will show up on the browser screen to give users something to click on. You can put any words you like in this area, or a picture, if you prefer.
Save, go back to the browser and click Reload. You should see the words Campbell University underlined. Click on it and it should take you to the Campbell University website. Click the Back button (upper left) to return to your file.
How would you center this link and make the text in the link larger?
Try it.
How would you replace the words Campbell University with the picture?
Try it.
Having fun yet? Take a short break, then continue with a new lesson.