is surrounded by quotation marks. You also use the to HTML files in the same directory on the server. The format is
a href= secondfile.htm>
more information /a>
wheresecondfile.htmis the name of the other file. If the browser doesnotread the tag is for marking and also linking to different parts of the same document. This is done as follows:
a name = details>
This use of the tag gives a name to a position in the HTML file. At any other point in the file, you can use
a href= details>
Go to Details /a>
to go to a previously marked point in the file.
These tags are the most important, but there are many others. You can look at the underlying HTML of any document by clicking onViewand thenPage Sourcein Netscape. You can use this to learn about new tags.
An HTML file can be created using any text editor.
is such an editor and is part of the typical installation on Windows computers. Here is a simple example based on favorite or best Web sites for some special hobby or task. Before doing this exercise, you should select a topic and find two or three Web sites for the topic. You also need to download an image from each site. Images can be copied from a Web site to your own machine by positioning the cursor over the image and then clicking on the
mouse button. You will get a dialogue box with one option,
. You then get a chance to rename the image and also locate it in a specific folder.
. This can usually be done by clicking on the
Immediately put in what can be called the basic template by typing the following into the editor. You skip lines by hitting the enter key. Make sure it looks exactly like this and that you havent forgotten one of the or
Your example is going to require more than one line in the body portion of the file, but you can always insert new lines. Type in a title between the
We can make the body of this example begin with a large heading. (The temptation to use the term
is strong, but we will not, because this would confuse the html document title with the title inside the text.) Directly under the
The Best Web Sites for…/h1>
Replace the three dots after the word,
by the topic that you are using for this assignment.
At this point, you should compose a general paragraph on your topic and then a paragraph about each of the sites you have found. Enter the text below the heading. Here is a short example:
If you are online and want or need to find out what is happening in the world, you can go to any of many news sites.
The site I use the most is the online New York Times.
One disadvantage of this site is that to go beyond the first page, you need to subscribe. It is free, but you need to choose a logon name and a password. However, you can arrange to save the information on the computer that you typically use. If you do this, you do not need to be concerned with logging on. The New York Times site is changed a few times during the day. It contains audio and video.
The example we have given above will work as an HTML file. However, it can be improved in several ways. First of all, even though the text as written appears to have a paragraph break after the first sentence and another one before One disadvantage.., the browser will display this as one continuous piece of text. For the most part, browsers ignore spacing and line breaks.
tag in your example to break up the text into paragraphs. In terms of content, describe the type of owner of each of your examples and the business purposes, if any, for your site.
We want hyperlinks in our example. To do this, we put the phrase Online New York Times between an
a href=Online New York Times /a>
tags for each of your sites. What you put in-between the
tags is up to you. But you need to put in something! It can be the official name or something descriptive.
Now decide where you want to put your images. Use the
tag. Note: you can insert the same image more than once.
You are now ready to try out your HTML file. Click on
. Now give your file a name and also change the extension from
. Let us say you named it test1.htm
Minimize NotePad (by clicking on the underscore in the upper right corner of the window). Open up Netscape or whatever browser you use. Note: you can do this even in situations where you usually dial-in to an Internet Service Provider (such as Pace) first. You may get a message from the browser that it has failed to locate the home page. If you are doing this in a computer classroom or in the open labs, the computer is [almost] always online.
Click onOKto close that dialogue box. Now (assuming you are using Netscape), click onFileand thenOpen PageandBrowse. You are opening alocal fileinstead of going to a Web site. Use the operating systems procedure for finding the file you just saved. Click on it and then click onOpen. Your HTML file should be displayed in the browser. Notice any problems and fix them in NotePad. When you get back into the browser, you will have to click onReLoadto get the newest version. If reload does not work, hold down theshiftkey while clicking on ReLoad. (In Internet Explorer, use thecontrolkey.)
img src=picture.gif align = left width = 100>
will align the image to the left. It will also change the width of the image to 100 pixels and make the height whatever size that will preserve the proportions of the original image. You can use both width and height parameters to set both values.
Lastly, return to the browser and reload your local file. You can now check to see that your links work correctly.
Several products exist for producing HTML. The advertising for these tend to give the impression that producing HTML is difficult and these products will make it easy. The real situation is that writing evocative text is a challenge and so is designing layouts and choosing (and producing) appropriate images. Putting in the right HTML tag is not the hard part. With that caveat, here are comments about a few of these tools.
Several specialized editors exist for producing HTML. The so-called HTML editors help to produce the HTML source and show it on the screen. For example, you select text and then click on Heading 1 on the toolbar and what you have selected is now between h1>
tags. These editors also allow you to click on image and then go to a series of dialogue boxes to select the image. These tools arenotwhat you see is what you geteditors (WYSIWYG) because you need to go to a browser to see the results. One example in this class is HTML Assistant Pro.
You can also edit your HTML document using Netscape Composer, a component of Netscape Communicator. To edit an existing file, open the file in Netscape Navigator the usual way and then go toFileand thenEditpage. To start a new file, you can invoke Netscape Composer directly. In Composer, click onNew. For existing files, what you will see is very like the display form of the HTML. There is a toolbar for putting in tags. This includes icons for inserting images and links. When you choose to insert an image, the following box will appear. You can find the image using the button markedChoose File…You can also make other changes, if you wish.
It can sometimes get tricky to do what you want in Composer and you may decide to return to NotePad where you can see all the tags. Another problem to be aware of is that Composer may put file addresses in a different form than you want. For example, it may insert the local drive name. This will prove problematic if and when you move the project to a server. Composer can be helpful for producing tables. The set of tags required here can get messy (not difficult, just complex).
After the image of the NY Times Logo has been inserted, the picture will show up in Composer much the same as it will appear in a browser. Composer will have inserted the html tag used to link to an image. In this example, it would appear as
IMG src=nytlogo12.gif HEIGHT=54 WIDTH=350>
You can see this for yourself by clicking onViewand then onPage Source.
The following picture shows what the document will now look like in Composer.
Microsoft Word has an option toSave As HTML. This produces a reasonable version of the Word document. When you look at the HTML document, you will probably notice a lot of seemingly extra tags. The file will also contain special symbols such as for non-blank space. If you are really in a hurry and have put a lot of formatting into the Word document, this is an option. However, another option is to simply copy-and-paste the text in the Word document into NotePad and then proceed. This will make it easier to plan and then design the document specifically for Web publication.
Microsoft PowerPoint also has a facility to turn a presentation into HTML form for publication on the Web. When you click onFileand thenSave As HTML, this facility produces a large set of files appropriately linked so that the PowerPoint presentation can be viewed using a browser. You, the author, are asked several questions on the design of the viewing and also background information to go on the first page, which is similar to a table of contents. You should put all the files in a brand new folder (directory) just for this presentation.