A Tutorial for Teachers on Webpage Construction

Introducing The Internet and the World Wide Web

The Internet is a collection of networks. It is a cooperative agreement among a multitude of government, public, and commercial computer networks to connect to each other in a standardized way so as to share resources and information. The shared information takes many forms.

The most recent and most popular Internet-based navigational system is the World Wide Web, known popularly as the Web or WWW. It is also an information-distribution and management system and a dynamic format for mass and personal communications. The simple, point and click interface makes it easy for people around the world to locate information and share knowledge. That information can be still images, text, audio, and video.

Hypertext is 'hot word' text that jumps to text that it is linked to. Hyperlinks or links are references to other documents or resources. Hypermedia refers to links that are graphical, audio, or video as well as to text. The most commonly used word is simply, link. A URL, (Uniform Resource Locator), is a hidden address within the link.

Navigating the Internet with Web Browsers

Computers that maintain Web information are called Web servers. They use the HyperText Transport Protocol (HTTP) to enable you to access information. Web browsers are computer programs or applications that are used to navigate the Web. They access the resource you select, retrieve the information linked to that URL and quickly close that connection until you select another link. There are browsers that are text only and those that are graphical. The Web browsers that have led to the astonishing growth of the Web are the user friendly, graphical browsers such as Internet Explorer, Netscape and Mosaic or derivatives of them.

Basic Process of Creating, Saving and Displaying a Simple Web Page

A basic text editor, such as Windows Notepad, is best to use for creating a Webpage as it does not format the text. Fancier word processors add formatting codes and this could be a problem. Open a text editor and you are ready to create a Web page using some very simple HTML code. HTML is an acronym that stands for HyperText Markup Language. It is the sum total of all the tags that are used to mark text for a Webpage. A Web browser can then interpret the tags and display the Web page. There are many Web browsers. Internet Explorer and Netscape are the most commonly used Web browser. The HTML tags, that are used to make Webpages, follow this format.

<TAG>Text is written in between.</TAG>

The TAG part is a code, usually of one or two letters, that specifies the type of effect you want on the text within the tags. The forward slash, (/), inside the second tag denotes that this particular effect can stop at this point.

HTML files always start with the opening, <HTML>, tag typed at the top of the file. They stop or close with the closing, </HTML> at the very end of the document. The opening tag tells the Web browser that reads the file that it is dealing with an HTML document and where the coding begins and ends.

Examples of these files were saved with a text, (.txt) extension. They can be opened in a text file editor and printed out if desired. These files were also saved with a browser, (.htm) extension. They can be viewed by any browser or application that reads that extension. To print the files as they would look in a browser it is best to print from a browser.

Everything else on the page would fall in between these two tags.

<HTML>

</HTML>

Two sections of the page are defined by the heading and body tags.

The heading tags are:

<HEAD> </HEAD.

The body tags are:

<BODY> </BODY>.

The title tags are part of the heading section.

The body section is where the basic part of the Webpage is entered.

The tags with no text added would look like the following.

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

The following is a Webpage with title text and body text added. Type the following as shown, and save it as first.htm.

<HTML>

<HEAD>

<TITLE>My Very First Home Page</TITLE>

</HEAD>

<BODY>

This is the very first Web page document. After you type this, save it as first.htm (no spaces, also note the period or dot before the htm) and it will be a file with an extension (htm) that a Web browser such as Internet Explorer or Netscape can read.

</BODY>

</HTML>

After the file is saved as first.htm open the file from the Web browser. Voila! Your Web page displays. The Web browser does all the work of making this simple document look polished and pretty. If it displays correctly print it out from the Web browser. Your first Webpage is done.

If it displays incorrectly go back and debug it. The best way to debug it is to save it as a text file and open it in a text editor, such as Windows Notepad, and print it out. The codes will show on the printed page for easy scrutiny and debugging.

To review:

The basic plan of action is to create some text, mark it with HTML tags, save the file with an .htm extension, and then call it up as a local file using your browser. Any desired changes can be made by repeating the same cycle in the text editor and then reloading the re-saved file in the browser to view it. When satisfied print the Web page out if desired. You're ready for the next lesson.

Adding Text and Paragraphs

Text is added between the body tags. To mark a paragraph, the paragraph, <P>, tag is used on the next line after the end of the paragraph. Note in the following example that it does not use a closing, (/), tag code. The paragraph tag is placed on the line after the first paragraph. This process is repeated for each paragraph thereafter but the last paragraph. The tag is not needed at the end of the last paragraph as the body tag tells the browser that this is the end of the body text.

Type the tags and substitute text of your own for the text. Look over the work carefully and when satisfied that it follows the code, save it as para.htm. Open the Web browser to admire your work.

<HTML>

<HEAD>

<TITLE>All About Me</TITLE>

</HEAD>

<BODY>

You are ready to type your own text into the document. It is time to add your own personality to the document. This is where you can write to your heart's content. Compose five paragraphs. You may compose more if you like. Just remember to insert the paragraph tag after each paragraph but the last one. Start by telling about yourself. What school/church/organization are you associated with. Where do you live. What do you look like.

<P>

In the second paragraph type several sentences about your family. Tell where else is your family connected to geographically. Are there any unusual or unique things you can share about your family. These facts can later be used as links on the Web.

<P>

In the third paragraph tell more about yourself such as what you look like, what hobbies and interests you have, your favorite food or music, and some special skills you might have.

<P>

In the fourth paragraph tell about job related things you have done. For example, tell about some volunteer work you have done or some other experience such as baby-sitting that might demonstrate how helpful and responsible you are.

<P>

Finish up by typing whatever else you want to add. This is the second Web page document. After you type this, save it as body.htm and it will be a file with an extension (.htm) that a Web browser such as Netscape can read.

</BODY>

</HTML>

When you are done save your work as body.htm. Open it in the Web browser. If it displays correctly, print it out from the browser. If it does not display correctly go back and inspect your work carefully. You can save it as a text file and print it out to help with debugging.

For teaching purposes, encourage students to write as much as possible. Relate the job-related skills writing to resume writing. This has a potential for growth in student self-esteem in that they can see that skills such as; cooking, taking messages, patience with children are valued in the workplace.

Basic Text Formatting Styles

The basic text styles formatting styles are:

Bold <B></B>

Italic <I></I>

Underline <U></U>

Monospace <TT></TT>

In order to display the text styles you would type in notepad the following:

<HTML>

<HEAD>

<TITLE>Basic Web Page Formatting Styles</TITLE>

</HEAD>

<BODY>

<B>This text will appear as bold.</B<P>

<I>This text will appear italicized.</I><P>

<U>This text will be underlined.</U><P>

<TT>This text will appear as monospaced or typewriter text.</TT><P>

<B><I><U>These tags can be used in combination.</B></I></U>

</BODY>

</HTML>

When you are done save your work as format.htm. Open it in the Web browser. If it displays correctly, print it out from the browser. If it does not display correctly go back and inspect your work carefully. You can save it as a text file and print it out to help with debugging.

Headings

The body of a Web page is sometimes divided into sections. Headings are used to divide up the page. These heading styles enable text to be displayed in relative sizes to one another and to the text. Thus, text does not depend on a font size but rather it depends on its relationship to the other text. The heading tags follow the following format from largest to smallest:

Type the following single-spaced and save it as head.htm. Open and display it in your Web browser. Print it out from the browser.

<HTML>

<HEAD>

<TITLE>Headings</TITLE>

</HEAD>

<BODY>

<H1>This is an example of an H1 heading style.</H1>

<H2>This is an example of an H1 heading style.</H2>

<H3>This is an example of an H1 heading style.</H3>

<H4>This is an example of an H1 heading style.</H4>

<H5>This is an example of an H1 heading style.</H5>

<H6>This is an example of an H1 heading style.</H6>

</BODY>

</HTML>

When you are done save your work as heading.htm. Open it in the Web browser. If it displays correctly, print it out. If it does not go back and inspect your work carefully. You can save it as a text file and print it out. The text file will display text with the HTML codes revealed that you placed in the document. This will help you to spot errors more easily than from the screen or the browser window.

Look at the examples, printed from the Netscape Web browser, that are in Appendix B. In the upper left corner of the Web page print out you will find the text that was placed in between the title tags.

You can identify the Web document by its title in this manner.

Linking Your Document

Web pages are easily linked to other pages. There are tags, <A> </A> that designate a block of text to be a link. The A stands for Anchor. The tagged text would look like the following.

Thus to link to the Planetary Geosciences group at Brown University with the Web address of http://www.planetary.brown.edu/planetary/index.html you would type the following.

<HTML>

<HEAD>

<TITLE>Linking to Another Page</TITLE>

</HEAD>

<BODY>

This is an example that includes a link to the Deaf World Web. The goal of this site is to maintain information on the deaf around the world and to provide free services to the individuals, researchers, and non-profit organizations worldwide

<A HREF="http:/ /deafworldweb.org/deafworld">Deaf World Web, research and information Web on the Deaf</A>

</BODY>

</HTML>

When you are done save your work as linking.htm. Open it in the Web browser. If it does not display correctly, save it as text file, link.txt. Print it out. The printed text file will display the HTML codes revealed that you placed in the document. This will help you to spot and mark errors more easily. If it displays correctly, and you have on-line access you can click on the link. The browser will connect to the link that you have placed on the page.

Using Images

Images add excitement and impact to Web pages. There are many issues that come up with images but they are not insurmountable and can be resolved easily by keeping things simple, particularly when first starting out in Web page publishing. The general format for the image tag is <IMG>. It is used as follows.

Images have a variety of purposes on the Web page. They can be used to inform, as decoration or as a link.

There are different ways to use a linked image. The image can be used to link to another Web site. They can link to another document on the same computer. Images can also be used to link on the page. For example, you can have a table of contents at the top of a page with icons or other images to click on beside the text. When you select the icon or image it brings you to that related part of the document just as selecting linked text would do.

Numbered Lists

To number a list you do not have to insert the numbers yourself. The entire list is surrounded by the <OL> and </OL> tags. Each item in the list is preceded by the <LI> (list item) tag. The list items don't have to be short

Thus in your text editor type the following.

<HTML>

<HEAD>

<TITLE>Using Number List Tags</TITLE>

</HEAD>

<HR>

<BODY>

<H3>Common Fruits</H3>

<OL>

<LI>Apples

<LI>Bananas

<LI>Oranges

</OL>

</BODY>

</HTML>

Save it as short.htm. Open it in the Web browser. If it displays correctly print it out.

When you are satisfied with your work you are ready for the following exercise with longer text. The tags can be used with very long text passages. The length does not matter.

Type the following as single-spaced.

<HTML>

<HEAD>

<TITLE>Number List Tags With Longer Text</TITLE>

</HEAD>

<HR>

<BODY>

<H3>Eating Common Fruits</H3>

<OL>

<LI>Apples can be eaten as a snack at any time of the day. They are especially good in the late afternoon or evening. Some people like to peel them before eating. This usually is best done with a knife immediately before eating.

<LI>Bananas are good to pack in a lunch. They are easy to carry, to peel, to chew, and are not messy to eat.

<LI>Oranges are good in the morning for juice. They can sometimes be messy to peel and eat.

</OL>

</BODY>

</HTML>

When you are done save your work as long.htm. Open it in the Web browser. If it displays correctly, print it out. If it does not go back and inspect your work carefully. You can save it as a text file and print it out. This may help you to spot errors more easily.

Types of Numbers in Lists

Types of numbers (standard numbers lowercase letters, uppercase letters, small Roman numerals, large Roman numerals) can be defined by using a type tag at the beginning of the list.

Thus in your text editor you would type the following:

<HTML>

<HEAD>

<TITLE>Using Number Type Extensions</TITLE>

</HEAD>

<HR>

<BODY>

</BODY>

</HTML>

Changing the Type of Bullet Using Netscape's TYPE Extension to the <UL>Tag

The tag that is used for bulleted text is <UL>. It will yield a basic circle bullet. By using <UL TYPE=n> a type of bullet can be specified where n is the type of bullet you want.

Thus in your text editor you would type the following:

<HTML>

<HEAD>

<TITLE>Bulleted List Extension</H3>

</HEAD>

<BODY>

<H3>Changing the Bullet Type in Bulleted Lists</H3>

<HR>

<LI>Slipped disc.

<LI>Disc brakes.

<LI>Discombobulated.

</UL>

<HR>

<LI>This circle might be strange.

<LI>It might be a little hollow square.

<LI>It is called circle by Netscape.

</UL>

<HR>

<LI>A true square.

<LI>A filled square.

<LI>A nice square.

</UL>

</HEAD>

</HTML>

Browsers other than Netscape may or may not display these TYPE attributes inside the <UL> tag.

When you are done save your work as netbull.htm. Open it in the Web browser. If it displays correctly, print it out. If it does not go back and inspect your work carefully. You can save it as a text file and print it out. This may help you to spot errors more easily.

The Blinking Extension

The tag that is used for making text blink is <BLINK>text</BLINK>. It will make the text blink where text is the text you fill in that you want to blink.

<HTML>

<HEAD>

<TITLE>Using Netscape's Blinking Text Tag</TITLE>

</HEAD>

<HR>

<BODY>

<H3>The following text would blink in the Browser Window.</H3>

<BLINK>Annoying blink, blink, blink</BLINK>

<HR>

</BODY>

</HTML>

Use this tag sparingly as many people find it annoying. It is wonderful for children. It gives them a sense of action and more of a feel of 'programming'. It is a good motivator for programming in that it is easy to learn and it yields quick results. It is fun for the student to view the blinking text. Let the younger student 'blink' away. They love it!

Thus in your text editor you would type the following, save it as blink.htm, open in Netscape if available and print it out from the browser.

!!!Remember that Browsers other than Netscape may or may not display the <BLINK></BLINK> tag properly!!! You may have to skip this lesson.

Preparing for the Sendoff

Before you put the page up you first need to check all the tags thoroughly. HTML code is not hard to learn but, it can only give you what you want if you do it right. Look for opening and closing brackets, next look for opening and closing tag pairs, then see that links and <IMG> files have two sets of quotation marks. There are resources (so-called HTML analyzers) on the Web that will check your tags for you for free.

Next, you need to check out the links. URLs are easy to mistype. Use your browser for this. Load your file up, click on your links and see if they work.

Remember that your page will display differently in different browsers, so if you can access a different browser try out your page on it.

If you have used a word processor use it to spell check your work. Adding HTML tags to your custom dictionary will keep your spell checker from stopping at every tag. Check the text for sense and grammar.

Then create a list of all the files you need such as the HTML documents and the graphic files that you used in your pages. The browser can not display what it does not have.

Lastly, make sure you have your own backup set before sending your files off.

Publishing

When you are satisfied with the basic looks of your Web page it is time to publish. That means taking the page from the place you are storing it now, your hard drive or floppy disk, and putting it on a Web server. A Web server is a computer that specializes in distributing Webpages. Transferring the file or files is normally done through an Internet service known as FTP (File Transfer Protocol). Many Web servers make this an easier process than it sounds. America On-Line has a click and send process that is fairly easy.

To send your page off to its new home you need to prepare the file, select how you are going to send it and where you are going to send it to. Many of the commercial services that link you to the Internet also provide a specified amount of storage space for personal Webpages as part of the basic fee structure. There are many hosting providers who will provide the service free for students and teachers.

Whether you are using a corporate or school network server, the Web server administrator will create two things for you: a directory on the server for you to store your Web page files and a URL.

The directory will look something like the following:

/usr/login/

Note the slashes are forward slashes rather than backward slashes as in Dos. The login is the login name or user name that the provider assigns to you. Your URL will normally take the following shape:

http://provider/~login/default.html

Here provider would be the host name of your host name provider, login is your login name (note the tilde (~) in front), and default is the name for your home page, (which is usually either index.html or default.html).

Many hosting providers often insist that your home page have a certain name because the server usually looks for a file with that name in your directory. Otherwise it may return an error or a list of files

Before you put the page up you first need to check all the tags thoroughly. HTML code is not hard to learn but, it can only give you what you want if you do it right. First, look for opening and closing brackets, for opening and closing tag pairs, and see that links and <IMG> files have two sets of quotation marks. There are resources (so-called HTML analyzers) on the Web that will check tags for free.

Next, you need to check out the links. URLs are easy to mistype. Use your browser for this. Load your file up, click on your links and see if they work.

Remember that your page will display differently depending on the browser, so if you can access a different browser try out your page on it to see if it displays, in general, the way you want it to look.

Then create a list of all the files you need such as the HTML documents and the graphic files that you used in your pages. The browser can not display what it does not have.

Lastly, make sure you have your own backup set before sending your files off.

Promoting Your Page

The last piece of publishing your page is letting the world know that it is there. Your can use word of mouth and e-mail notes to friends and colleagues. You can put the address on a business card. Students enjoy creating business cards on the computer and adding their own URLs.

There is no central data base of Webpages that you can add your name to. There are UseNet newsgroups, "What's New" pages, Web directories, Web search engines, and mailing lists that can be used. There are many articles on the Web that tell you how to announce your Webpage.

Links for Web Page

The links were provided for several purposes. Teachers and students can use these links for research, for providing links on their own Webpages and for just plain surfing. Some are self-explanatory and some are worthy of additional comments. The disk contains many more links. As you begin to use the Web more you will be able to collect your own links. This can be tedious. As you use the Web you will soon encounter utilities to help you with this task of collecting links.

Enjoy!

Carol

Except where otherwise � owner indicated on Copyright page All copy and graphics in this site are � 1996-2017 SunnieBunnieZZ
All Rights Reserved, World Wide Comments, observations and suggestions Contact