Pre-Lab HTML Activity: The HTML TutorialMust be completed by Tuesday September 6 at 11:00pm by students enrolled in Monday lab sessions

Must be completed by Tuesday September 6 at 11:00pm for students enrolled in Wednesday lab sessionsMust be completed by Thursday September 8 at 11:00pm by students enrolled in Friday lab sessions

FOLDER/FILE SUBMISSION TO THE APPROPRIATE KSU ONLINE DROPBOX MUST BE COMPLETED BY THE DATE AND TIME LISTED ABOVE.

If you meet the folder/file submission deadline listed above, you can hand in your packet of printouts at your regularly scheduled lab session the next day.

Before you start, PLEASE print out this entire tutorial. Having a printed copy of the tutorial in front of you results in the activity taking less time than completing the activity while constantly switching back and forth between the instructions and the application you are working with. You will get finished with this activity quite a bit faster if you have the printed activity description in front of you.

HTML stands for HyperText Markup Language and it is the language that is used to create web pages. When you wish to view a web page, your web browser (such as Internet Explorer or FireFox), contacts the server where the page is stored at, requesting that the HTML code for the page be sent to the web browser (and you). Your browser then takes the HTML code that it receives and it displays the page appropriately, as well as all of the elements on the page (text, tables, images, backgrounds, lists, etc).

The purpose of this tutorial is to give you a basic, hands-on exercise in creating a simple web page. This will give you an exposure to a wide variety of basic HTML commands. When today’s web pages are professionally designed, computer programs generate the necessary HTML code. However, if you don’t already understand the basics of HTML, then the code that is generated is often meaningless and hard to modify. This tutorial has several purposes:

To introduce students to the basics of HTML To allow students to create a web page (for some students, their very first web page) To introduce students to the BASICS of computer programming (while building a web page using HTML is

not considered complicated programming, it still is a form of computer programming).

This tutorial also marks the beginning of your Internet Projects assignment since the work done as part of this tutorial will be included as part of your final project output.

Your first computer task is to create an Internet Project folder on your storage media. You can call this folder whatever you wish, but I suggest calling it Internet Project. ALL OF THE FILES THAT ARE PART OF YOUR INTERNET PROJECT NEED TO BE STORED IN THIS FOLDER. This includes all of the files that you create or download as part of this tutorial, all of the XML files used in a future pre-lab exercise, and the business site that you create in a future activity as well. If you don’t have everything in this folder, future problems will result (and who wants that).

Our next step is to open the program called Notepad. Notepad is the most basic word processing program in existence. While other word processing software might be more powerful than Notepad, Notepad is ideal for creating HTML coding because it contains only the most basic features, whereas more powerful software might actually modify/change what we type into something that we might not understand (or be able to figure out what happened). Notepad doesn’t do that. What you type is what you get, and that is what we want.

To find Notepad, go your computer’s Start Menu. Select the Programs or All Programs option. Look for the Accessories group/folder, and select Notepad (make sure you don’t select WordPad: we don’t want to use that).

Once Notepad appears, maximize Notepad so that it covers your entire screen. Notepad is not going to appear fancy or flashy; in fact, it is not very impressive looking at all. Still, it is the tool that will best meet our needs.

By default, Notepad’s WordWrap feature is not turned on when the program is used for the first time. Let’s turn on WordWrap. Do turn on WordWrap, go to the Format menu and click WordWrap. Now, go back and click the Format menu. If you see a mark next to WordWrap, then that is the indicator that WordWrap has been turned on.

All HTML commands are surrounded by brackets, the greater than and less than symbols ( < and > ). HTML commands themselves are surrounded by brackets while the regular text found on a page does not have brackets around it. All HTML commands are paired, which means that if you turn something on, you need to turn it off as well (you turn on a light, when you leave the room, turn it off; you turned on the water, turn it off when you are done).

The same thing applies to HTML. Turn on a command and once the effect of that command is over, then turn it off. The word table is an HTML command. <table> turns on a table. To turn off a command, simply repeat the original turn-on coding, but precede the original code with the / character. To turn off a table, I would simply type </table>. <something> turns on a command while </something> turns off a command.

Additionally, HTML commands are NOT case-sensitive, which means that the HTML commands themselves can be typed in upper or lower-case. I prefer to type HTML code in lower-case.

The basic purpose of the web page that we are creating today is to provide basic information about you to me (the instructor) and others who might view your future web site. Please be aware that anyone in the world potentially can view your site once it is placed on a server so please be aware of the information that you type and limit the amount of personally sensitive information that you reveal. Please let me know a little bit about yourself, but don’t type anything that you might regret someone else reading or seeing in the future.

Type in the following lines of code, replacing non-bracketed items with your own information. Place returns in your code in the same location that I do. After typing in our initial code, I will explain what it does. Type in the following :

<html><head><title>Information about the owner </title></head><body><center> <h1> Welcome to my World </h1><h2> Information about (insert your own first and last name here) </h2> </center>

</body></html>

Hopefully, you inserted your own first and last name where it said to insert your own first and last name here.

The web page that you are creating today is part of a larger Internet project where you will create a web site for a fictitious business (more information about that provided in a future project description). Everyone in the class

will create this same standard page for their own sites. While there are numerous reasons we are creating this page, one benefit is that reading the information about you (that you will place on this page) helps me get to know the students in my class a little better and faster. There are a lot of students in my class and this helps you stand out, as opposed to being just a name and number somewhere.

<html> indicates that what follows is html-formatted information. The very first command of any web page is the <html> command, while the last command on any web page is the </html> command.

HTML documents have two (2) parts, the head and the body. The body is the larger part of the document, as the body of a letter you would write to a friend would be. The head of the document contains the document's title and similar information, and the body contains most everything else. The title command is a little misleading. Text seen after <title> and before </title> is the text that is actually displayed in the browser’s title bar, and this text is what someone sees in their bookmark file if they bookmark your web page.

Notice the screenshot of the class web page seen on the next page. Look at the top left-hand corner of the picture. Notice the words Management 366 Home Page. Those words were created by the following line of code: <head> <title> Management 366 Home Page </title> </head>If someone bookmarks the class web page, they see the words Management 366 Home Page in their bookmark file. Everything else that you see (in the purple-background area) is part of the body of the document).

If someone bookmarks the web page we are making today, the words Information about the owner would appear in their bookmark file.

<body> indicates the start of the main/primary part of the web page (stuff people commonly consider as “the web page.”) The second-to-last command in all HTML documents is the </body> command.

<center> turns on centering and </center> turns off centering. Centering should not be turned on, and then forgotten. It should be turned on, a specific item centered, and then centering should be turned off. Centering paragraphs, especially long paragraphs or multiple paragraphs, is considered unprofessional.

Font sizes can be specified using the heading commands (h1, h2,h3, h4, h5, h6). <h1> is the largest font size possible while <h6> is the smallest font size. As with all HTML commands, these should be turned on and then turned off.

Now, it is time to save your work and see what our web page looks like. From within Notepad, go to the File Menu and select Save. Specify that you want to save your work into the Internet Project folder that you created in one of the first computer steps as part of this tutorial.

After specifying the proper folder, make sure that the file name and extension that you type in is index.htm

Index is the default name for the first page of any web site. The index file name needs to be followed by the file extension of .htm or .html (which indicates that the file is an html file). When a user types in a generic web address (like www.ksu.edu, www.cnn.com, or www.nike.com), the server at that site will first load/present the index page as the first page a view of that site sees, and then they can link elsewhere from that page. The file extension (.htm or .html) is extremely important. If you did not specify the extension, and if you just save your work as the default text document,

For students at KSU who store their web sites on the KSU personal server, you MUST have a file called index.htm or index.html (otherwise, your site does not work properly).

Now, shut down/close Notepad.

Next, open a web browser (Internet Explorer or FireFox). It is now time to open the web page in your browser. Internet Explorer and FireFox instructions are provided next. Select the appropriate set of instructions and follow them to open the web page in your browser.

Internet Explorer Users FireFox Users1) Make sure that your menus are visible. If

they are not visible, then go to the Tools button and select Menu bar.

2) Once the menus are visible, go to the File Menu and select Open.

3) Click the browse button and navigate to where your index file is stored.

4) Once you see the index file, select it. Then, click Open and then Ok.

5) The web page should appear.

1) Go to the File Menu and select Open File.2) Navigate to where your index file is stored.3) Once you see the index file, select it. The

click Open and then Ok.4) The web page should appear.

Your web page should appear similar to the next picture. There is not much there, but we will add more content just shortly.

Close your web browser now.

Typically, a person creating a web page does not close down their browser or Notepad while they are creating the page. They just use their minimize and maximize buttons to move back and forth between the different programs. However, you might find that one of the programs has been shut down and you need to reopen your files, or maybe you have just taken a break and you are coming back to the project. Exactly how do you go about opening your work once again?

Using Windows Explorer or My Computer, navigate to the storage location for your index file. Once you find the file, double-click it, and the web page should open in the browser.

Double-clicking a file is the typical way that files are opened. However, double-clicking a web page only opens the file in the browser, which is great for looking at the web page. However, you want to change the code in the file and that can’t be done using a web browser. To change the code in the file, the web file must be opened using Notepad.

Following the same steps you used earlier, open Notepad. Once Notepad is open, go to the File Menu and select Open.

Navigate to the location where your index file is located (don’t worry if you don’t see anything in that storage location).

The reason that you don’t see anything in the storage location is that by default, Notepad tries to open up text documents (and hopefully you don’t have any since you have saved your work as .htm or .html

Click the drop-down option next to “Files of type” and select All Files. Once you select “All Files”, you should be able to see the index file. Select the index file, click Open, and your index file should now be open in Notepad, and you can now add more code to your document.

On the line after you turned off the centering </center>, type <hr>.

<hr> is the command to add a horizontal line to your page. This command is turned on, but is not turned off (it just happens.

The next task is to create two paragraphs, with each paragraph containing at least three sentences. Paragraphs begin with the new paragraph command <p> and end with the turn off paragraph command </p>. Instructions regarding the content of both paragraphs are found in the next bullet points. Following those bullets points is a sample page, as seen in a web browser.

Paragraph #1: Begin with the <p> command. Sentence #1 is a basic sentence where you indicate your grade level (senior, junior, sophomore, freshman) and major. Sentence #2 should indicate what you would like to do after you graduate from Kansas State University. Sentence #3 should indicate at least two different items/activities that you like to do when you are not in class. Once you are done with this paragraph, type </p>.

Paragraph #2: Begin with the <p> command. For this paragraph, you need to create three or more sentences covering whatever topic/idea/thought that you would like to discuss. I don’t really care what the content of this paragraph is as long as you have at least three sentences in the paragraph. Once you are done with this paragraph, type </p>.

After creating the two paragraphs in Notepad, go to Notepad’s File Menu and select Save (not Save As). The new content should be saved under the existing name of index.htm

After saving your work in Notepad, go to your web browser. Click the Refresh/Reload button on your browser and the content displayed in the browser should be updated to reflect your new coding. If you clicked refresh/reload and nothing changed, then make sure that you saved your work in Notepad. If you

didn’t save your work in Notepad, then nothing will change in the browser window.

When creating HTML code, you should follow this general process: type in your code in Notepad, save your work in Notepad, go to the browser, refresh/reload and the browser window should show the updated content. If you see an error when viewing your web page in the browser, or if something doesn’t look right, go back to Notepad, make the necessary change, save your work, and the refresh/reload the browser window to see the updated results.

When creating text using a word processor, the user can make some of the text appear underlined, bold, italic or some combination of those three effects. Those same effects can also be achieved using html. <b> is the command to make something bold. <u> is the command to make something appear underlined. <i> is the command to italicize text. Once the desired effect is achieved, then each of those commands is turned off as well.

You can even have multiple commands on at the same time. <b><u> text </u></b> results in the text being underlined and bold, at the same time.

Go to the first paragraph. Find your class standing. Turn on bold before the word that signifies your class standing, and turn off bold after that word.

Find your major in the first paragraph. Use the <u> and </u> commands to result in your major (only) being underlined.

Make the words “Welcome to My World” (and only those words) appear italic.

Save your work in Notepad and then go to the browser and make sure that the browser’s content has correctly updated.

After returning to Notepad, go to the line after the </p> command and type in another <hr> command. After typing in the <hr> command, press the Enter/Return key.

The next task is to create two html lists. One list will be an ordered/numbered list and the other list will be a bulleted/unordered list. The ordered/numbered list begins with the <ol> command while the bulleted/unordered list begins with the <ul> command. Both lists end with their respective turn-off command. The <li> command places individual numbers or bullets in the list, depending on which type of list that you are creating. Once the individual numbered or bulleted item is completed, it also needs to be turned off.

Before creating the actual coding for the lists, it is important to plan the list contents. The numbered list will be a listing of your top 3 most-favorite universities. Kansas State will be the #1 entry and you will need to supply two other universities for entries #2 and #3. The bulleted list will be a listing of your top four most-favorite web sites (ones you visit most frequently and might like to have listed in one handy spot). The first bullet will be for CNN while bullets #2, #3 and #4 will be your own choices. You can even include additional bulleted items, if you wish.

Type in the following lines of code to create a numbered list, another horizontal rule/line and a bulleted list:

<ol> My Top 3 Universities<li> Kansas State University </li><li> place the name of your #2 university here </li><li> place the name of your #3 university here </li></ol>

<hr><ul> My Favorite Web Sites<li> CNN </li><li> place the name of your #2 favorite web site here </li><li> place the name of your #3 favorite web site here </li><li> place the name of your #4 favorite web site here </li></ul>

It is extremely important that you make sure that you have turned off both of your lists, with the respective </ol> or </ul> command.

Next, save your work in Notepad. After saving, bring up your browser and hit the Refresh or Reload button, and the updated content should appear, similar to what you see pictured (only showing your own items in the list rather than my instructional words.

Notice that the bullets and numbers automatically appear on your page. That is the result of the <ol><li> combination or the <ul><li> combination. If you turned off both of your lists, then the numbers and bullets also line up. If you forgot to turn off one of your lists, such as the first list, then the left-hand margin appears to have shifted slightly to the right and the bullets/numbers won’t be lined up either.

Hypertext can be used to link one web site to another or one document to another. Later on in this exercise, you will link together two documents that you create. At this point in time, we will have you link your document to external web sites (the KSU and CNN sites).

Return back to Notepad and find the words “Kansas State University” in the numbered list. Click right in front of the “K” of “Kansas State University” and make the following addition/modification to the code (seen in bold):<a href="http://www.ksu.edu">Kansas State University </li> It is extremely important that you don’t forget the quote mark after the “edu”

The text of <a href="http://www.ksu.edu"> turns on the hypertext command. After the “> portion of the command, the text the user clicks on to visit the web site appears. In this case, the words “Kansas State University” are the hypertext that is clicked on to go to the KSU web site. However, the command is not completed. At the moment, the rest of the web page appears as a hypertext link to KSU. The hypertext command needs to be turned off.

Add the hypertext turn-off command after the word “University”, as is seen below in bold:<li> <a href="http://www.ksu.edu">Kansas State University</a> </li>

After adding the </a> command, save your work in Notepad. After saving, bring up your browser and hit the Refresh or Reload button, and the updated content should appear (the words Kansas State University,

and only those words, should be hypertext). Click the link and you should eventually reach the Kansas State University web site. Once there, hit the Back button to return to your own page.

Now, return back to Notepad and find CNN in the bulleted list. The next task is to create a hypertext link to the CNN web site.

Click right in front of the CNN text and modify your code so that it now appears as:<li><a href="http://www.cnn.com"> CNN </a></li>

After making that modification, save your work in Notepad. Bring up your web browser, refresh/reload your work, and make sure that the hypertext sends you to the CNN web site.

ALWAYS TEST YOUR HYPERTEXT LINKS TO SEE THAT THEY WORK. Never assume that they will work. Typing errors tend to result in unintended consequences.

Return back to the web page you have created and then return to Notepad. Find the turn-off command for the bulleted list (</ul>) and click after it. Press the Enter key and your cursor should be on a new line.

Type the following line of code:<hr>Here are the classes that I am taking this semester

Your next task is to create a table of rows, columns and cells that contains information regarding the classes that you are taking during this semester (class name, day/time the course meets, and the instructor of the course).

The command <table> creates a table without borders. If you want borders on your table, like we will have, the command that you would type is <table border>

Each individual row in your table begins with the <tr> command and each row ends with the turn-off command of </tr>

Within each row, you will have a number of cells. Each and every cell must be defined. The <td> command turns on a cell, while the </td> command turns off the cell.

When you have finished creating your table, it MUST BE TURNED OFF with the </table> command.

Type in the following code:<table border><tr><td><b>Class Name</b></td><td><b>Day and Time the Class Meets</b></td><td><b>Instructor</b></td></tr>

Notice that you turned on the bold, and then turned off the bold, several times. When working with cells in a table, you must turn on, and then turn off, what happens with a particular cell. You can’t turn on bold once, and then turn it off after you have finished the third cell. If you try to do that, then only the contents of the first cell are bold.

Continue typing in additional table code. Substitute your own information in for the generic placeholders:

<tr><td>Name of the first class</td><td>Fill in info here</td><td>Instructor Name Here</td></tr>

<tr><td>Name of the second class</td><td>Fill in info here</td><td>Instructor Name Here</td></tr>

<tr><td>Name of the third class</td><td>Fill in info here</td><td>Instructor Name Here</td></tr>

<tr><td>Name of the fourth class</td><td>Fill in info here</td><td>Instructor Name Here</td></tr></table>

Provided next are copies of my coding and the resulting web page so that you can generally compare your results versus my work.

-------------

In regards to HTML tables, you can place pretty much anything that you wish inside the cell of a table. Items students commonly include

in their table cells include: Text Hypertext links Mailto links (that someone can click on to send email to the listed address) Pictures Bulleted lists and numbered lists You can even place tables inside tables

If you haven’t saved your work recently and looked at your results in your web browser, go ahead and do that now.

Place your cursor after the </table> command and type in the following:<hr><h2>Link to another page</h2>

After looking at your web page, you are thinking that your web page would look better if the table was centered in the middle of your page (and the words you just typed in “Link to another page” would look better centered as well. No problem. We can do that.

Find the </ul> that you used to turn off the bulleted list. Right after that command, type in <center>

Notice that the <center> command was not turned off. From this point forward, the remainder of the web page will appear centered, which is what we want. Of course, if you are adding additional content that you don’t want centered, just figure out where you want the centering to end and turn off the command.

The words “Link to another page” will eventually become a hypertext link before we are done with this exercise, but before we do that, we need to add a background and pictures/images to this current document.

The next step is to acquire 3 pictures/images and one background to add to the web page that you are currently working on. If you want to use material that you already have, simply copy the relevant files into the folder that contains your index page and then skip over the next few bullet points until you see the next computer bullet. If you are wanting to use some of my sample files, then please point your web browser to the following URL:http://info.cba.ksu.edu/bkovar/class/samples.htm

1) If you are working with my files, you now see several images that you can download. To download items from an existing web site, simply put your mouse cursor right over the image that you wish to download, right-click and then select the Save Picture As or Save Image As option to download the file. To avoid future problems, please keep the following items in mind:

(i) MAKE SURE THAT YOU STORE ALL OF THE FILES THAT YOU DOWNLOAD , and allow the files that make your web page work, INTO THE SAME FOLDER THAT CONTAINS THE INDEX PAGE. If you don’t do this, your images won’t appear on your web site.

(ii) For each of the files that you download, rename the file so that it has a shorter file name. As part of this overall project, your web site must be viewable on the Internet and most students use the KSU Personal Server as their web host (because it is free and easily available). If you are going to use the KSU server to host your web site, then you must name or rename each of your files (html or image files) so that there are NO SPACES IN THE FILE NAME and so that the FILE NAME is 8 Characters Long or Less. If there are spaces in the file name or if it is 9 characters long or longer, then you are GUARANTEED TO HAVE PROBLEMS IN THE FUTURE WITH THIS ACTIVITY.

(2) Assuming that you have read the items in the prior step and that you are keeping them in mind, it is now time to download 3 images (from those that you see at the download site mentioned above or from some other site on the Internet.

(i) Download each image into the folder where your index is at.(ii) Rename each file so that it is shorter and has no spaces in the file name.(iii) Note/Write down the name of the file that you are downloading since you will have to

type the file name into your coding. If you mistype the file name or don’t know the name of the file, then the image WILL NOT APPEAR ON YOUR PAGE.

(iv) Note/Write down the 3 character extension that is also part of the file name since you have to also type that into your command as well (if you want the image to appear on your site.

(3) The three images I have downloaded, and the names that I have written down are:(a) dog.gif(b) 100.gif

(c) rootbeer.gif

(4) Scroll further down the page I have provided for you to use as a download page. You will see several squares of various color that you can use as the background for your web page. Working from left to right, the various colors are: pink, the purple from the class web page, maroon, yellow, blue and two colors displaying wood texture colors. If you like the background color on the page you are looking at, just download that.

(5) Downloading a background follows the same basic process as downloading an image. Put your cursor over the color you wish to download, and then right-click and then save the file into the same folder where your index and images are stored.

(6) When you download the background (and you can go ahead and do that now), MAKE SURE THAT YOU SHORTEN THE FILE NAME SINCE IT IS WAY TOO LONG and it won’t display properly when you place your site on the KSU personal server. Make sure that you write down the file name and extension for the background.

(7) The background file I downloaded was originally called small-brown-wood2.jpg. I have renamed it so that the file name is now wood.jpg, and that is the name I also wrote down on my paper.(a) DON’T WORRY if your 3 character file extensions are different than mine. Some of the

images that you are downloading are gif files while others might be jpeg (jpg) files, and others might even have a different file extension. Just write down the file extension that you see and don’t change it.

At this point in time, you should now have 3 images and one background in the folder that contains your index file. Make sure that you have the file names and extensions for those files written down.

Since you have finished downloading, return your browser to the web page that we have been creating.

Next, minimize your browser and bring up the Windows Explorer or My Computer. Use that program to navigate to your storage media, and then find the folder where you have been storing the files used in this pre-lab activity. Once you find the folder, open the folder and verify that you have and can see each of the following items:1) the index.htm file2) the background file3) 3 imagesIf you don’t see those five files in your storage media, then you will need to locate the missing items and move them into the folder. Otherwise, you will have difficulty successfully completing the future coding steps. DON’T MOVE ON TO THE NEXT STEP UNTIL YOU HAVE VERIFIED THAT ALL REQURIED FILES ARE IN THE FOLDER YOU CREATED.

Return back to your code in Notepad. Move to the top of the document and find the <body> command. Change the command so that it now reads as <body background=

After the equals sign (=), type in a quote mark and then the name of the file that you downloaded for the background. In my case, I will be using the file called wood.jpgFile names are surrounded by quotation marks so make sure that you include the ending quotation mark.

After making that change, your first 4 lines of code should be:<html><head><title>Information about the owner </title></head>

<body background="wood.jpg"><center> <h1> <i>Welcome to my World </i></h1>

Save your work in Notepad and then bring up your browser and refresh/reload, and the background should now appear on your page.IF THE BACKGROUND DOES NOT APPEAR, THEN IT COULD HAVE BEEN DUE TO A BAD DOWNLOAD. You might need to return to the download site or download an entirely new background from a different site. SOMETIMES, THE PROBLEM IS DUE TO THE WEB BROWSER THAT YOU ARE USING AND YOU MIGHT NEED TO SWITCH from Internet Explorer to FireFox, or vice-versa (typically, the problem is resolved by downloading with FireFox rather than Internet Explorer.

IF YOU ARE UNABLE TO GET THE BACKGROUND TO DISPLAY, THEN YOU NEED TO STOP BY MY OFFICE as soon as possible, even if the deadline for this pre-lab activity has passed because your work in this pre-lab activity will be included in the Internet project that will be due in the near-future, and one way or another, the missing background issue needs to be resolved.

Now that the background is working, it is time to add the first image to your web page. Return to Notepad and find the following line of code: <ol> My Top 3 Universities

Click right after the s on Universities. Press the space bar 2 times. The first image will go here.

Type the following command, substituting one of your image files for my placeholder words of “filename”. Make sure that you also type in the 3 character extension that goes along with the image. The command to type is <img src=“filename.extension”>The image file I used is my dog.gif file, and my resulting code is:<ol> My Top 3 Universities <img src="dog.gif">

Save your work and refresh/reload the browser to see the image appear.

Return to Notepad and find the following line of code: <ul> My Favorite Web SitesPlace one of your image files right after the s on the word SitesThe image file I used is my rootbeer.gif file, and my resulting code is (seen next):<ul> My Favorite Web Sites <img src="rootbeer.gif">

Save your work and refresh/reload the browser to see the image appear.

Return to Notepad and find the following line of code: <li><a href="http://www.cnn.com"> CNN </a></li>

Ever since you created the hypertext links, you may have been wondering if text/words are the only items that can serve as the “link” to another web site. The answer is no. Other elements, such as images, can also serve as hypertext links, and now we are going to get rid of the letters CNN and replace them with an image command.

Delete the capital letters CNN and replace them with one of the image commands that you typed earlier. In my case, I will use the dog image again, and my resulting code is:

<li><a href="http://www.cnn.com"> <img src="dog.gif"> </a></li>

After adding the three images, you can see what my resulting web page looks like.

You may have noticed a box surrounding the new image you just added (my second dog). The box/border is due to the fact that this new image is a hypertext link.

While there is nothing wrong with the box/border around the second dog (it indicates that particular dog is a hypertext link), that might also be something that you wish removed. No problem. We will next remove the box/border.

Return to the line of code that you just typed. Click between the quote mark and the > bracket. Add a space and then type the following: border=0My resulting code is:<li><a href="http://www.cnn.com"> <img src="dog.gif" border=0> </a></li>

Save your work in Notepad and refresh/reload your browser view. The border should now be gone.

Earlier in this activity, you typed in the words of “Link to another page.” Your next task is to create a one row, two cell table, without a border around the table, with those words appearing in the first cell and the final picture that you downloaded (but haven’t used yet) will appear in the second cell.

Find the line of code <hr><h2>Link to another page</h2>Using the name of the remaining picture that you haven’t yet used in place of my file name of 100.gif, make the following modification to your coding:<hr><table><tr><td><h2>Link to another page</h2></td><td><img src="100.gif"></td></tr></table>

Save your work in Notepad.

Your next task is to open a new instance of Notepad using the Start Menu, Accessories option.

Once Notepad is open, go to the File Menu and select the Save option. Navigate to your storage media and then into the folder that you have been saving all of files used in this activity. Once you have navigated into that storage area, type in a file name of second.htm

Next, minimize Notepad and bring up the Windows Explorer or My Computer. Use that program to navigate to your storage media, and then find the folder where you have been storing the files used in this pre-lab activity. Once you find the folder, open the folder and verify that you saved the file second.htm in that storage area (along with your index, images and background files).

It is very important that ALL of the files that are part of your web site are stored in the same location. If one of those items is stored separate from the others, then your web site won’t work properly.

You will next type a brief amount of code into the file called second.htm. This code will represent a second web page that you might create, and then you will create hypertext that links the index file and the second file to each other.

Return to the file called second.htm. Type in the following code:<html><head><title>Practice Linking Page</title></head>

<body><p><center><h1>This is my second practice page.</h1><hr>Place link to go back to the index page.</body></html>

After typing in the code above, save your work in Notepad (in the file called second.htm)

Now, return to the code for the file called index.htm

Find the words “Link to another page” in the code and click right in front of the L on the word “Link”.

The next task is to change the words “Link to another page” into a hypertext link that links the index.htm file to the second.htm file.

Unlike prior hypertext commands, this particular hypertext command will be a little different. All of the prior hypertext commands contained the text of “http://www.” That particular text designates that you are linking to an external web site (one that you did not create or one that is not part of your existing site). However, that is not the case in regards to the link that you are now creating. You are wanting to link to a page you created and it is part of your existing site. In that case, you don’t need to type in the http://www. as part of the hypertext command. Instead, the general form to link to another file on your site is simply <a href=”filename.extension”>. When the command is typed in this way, the web browser knows that the file you want to link to is in the same storage area as where your file currently resides. This is referred to as a relative reference or a relative link.

If you have clicked in front of the L on the word “Link”, then make the following modification to your code: <table><tr><td><h2><a href="second.htm">Link to another page</a></h2></td>don’t change or remove any of the code related to the second cell of your table: just modify the first cell

Save your work in Notepad and then refresh/reload the browser. The words “Link to another page” should now appear as hypertext. Click the link and you should now be on the second.htm web page.

Your next task is to return to the code found in the second.htm file.

Up to this point in time, each of the hypertext links that you have created has consisted of entire lines. Now, this next hypertext link will only be one word, and that word which will serve as the hypertext link is the word “link”.

Make the following modification to the code found in second.htm:</h1><hr>Place <a href="index.htm">link</a> to go back to the index page.

Save the code found in second.htm. Refresh/reload the browser window and the word “link”, and only that word, should appear as a hypertext link. Click the hypertext link in the browser and you should return back to index.htm. In fact, you can now use the hypertext links connecting index.htm and second.htm to link back and forth from one file to the other.

Your next step is to make printouts of your work. Please make the following printouts:1) A printout of the code from index.htm, as is seen in Notepad.2) A printout of the web page called index.htm, as is seen in a web browser.

Once you have made the required printouts, all you have left to do is submit your work for grading. Please make sure that you keep the files that you created in this activity since they will also be part of the Internet Project that you will be submitting in the future.

HANDING IN THE ACTIVITY1) When you are ready to turn in your work, make sure that you place or have ALL OF YOUR ACTIVITY FILES IN A

NAMED FOLDER/DIRECTORY. Create a zip/compressed file, and then submit the zipped/compressed file to the appropriate KSU Online Dropbox. In case you have forgotten how to submit files to KSU Online, please visit http://info.cba.ksu.edu/bkovar/AssignmentSubmission.htm

2) Please assemble your packet of printouts. The printouts should be arranged in the following order: A cover page containing the required information (outlined in the class syllabus). The printout of your code from index.htm The printout of the web page called index.htm, as is seen in a web browser.

IN ORDER TO BE CONSIDERED FOR FULL CREDIT, YOUR PRINTOUTS MUST BE IN THE REQUIRED SUBMISSION ORDER. Deductions will be taken for printouts that are not in the proper order.

FOLDER/FILE SUBMISSION MUST BE COMPLETED BY THE DUE DATE/TIME LISTED ABOVE. If you meet the folder/file submission deadline listed above, you can hand in your packet of printouts during your regularly scheduled lab session the next day.