CS 1033Multimedia and Communications

REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!

Lab 04: Introduction to KompoZer(Website Design - Part 1 of 3)

KompoZer is a complete web authoring system that combines web file management and WYSIWYG (What You See Is What You Get) webpage editing. KompoZer is easy-to-use, making it ideal for non-technical computer users who want to create an attractive, professional-looking website without needing to know HTML or web coding. KompoZer is free and is available for both the MAC and the PC.THE KOMPOZER ENVIRONMENT:KompoZer lets you create your own webpages. You don't have to know HTML to use KompoZer; it is as easy to use as a word processor. Toolbar buttons let you add lists, tables, images, links to other pages, colors, and font styles. You can see what your document will look like in a browser as you create it. When you open KompoZer it opens up the following screen. This screen layout is based on version 0.7.10

Use this picture as a KompoZer layout reference sheet as you work through labs 4-6. If you are reading this on a paper printout be sure to open the original PDF file on your computer so you can see the different colours!

Lab 4 – Tutorial 1

Objectives:Upon completion of tutorial 1, you should be able to:

Turn on and off the toolbars in KompoZer Find the Edit Site button and identify the Site Manager window in KompoZer Determine the number of sites that KompoZer is currently pointing at Using the Edit Site button, determine the folder location that each site is pointing at. Create a new website that points to an existing folder (i.e. directory) Create a new website that will point to new folder Remove an existing website from KompoZer without removing the folder and its

contentsBefore we begin, we will review the terms website, webpage and HTML

A website (called a Site in KompoZer) is a collection of related webpages, images and media files stored in a folder.

A webpage is a file stored in the website folder that has an HTML file format (i.e. the file extension of .html or .htm). Webpages (.html files) consist of content and HTML tags.

HTML is a language consisting of a standard set of tags that takes content and puts links, images, and formatting in to the content to create webpages for the World Wide Web.

Each unique website has its own folder/directory. In general, you should create the folder FIRST and then use KompoZer to point to that folder (i.e. to the site). Once you have a site, you can create webpages within the site (i.e. within the folder).

You can create many folders and then using KompoZer, create a site for each folder and associate the site with folder.

The KompoZer site manager allows you to navigate between sites easily so you can work with them. The Site Manager panel lists directories that have been set up as Sites. You can set up many sites; each site will appear in Site Manager regardless of where the folder appears is stored on your hard drive/memory stick, thus the Site Manager panel is quite important.

In the next few steps, you will create a new Site called: OP Library Website and associate it with the oplibrary folder using KompoZer.

SETTING UP YOUR FOLDERS BEFORE BUILDING YOUR SITE1. Browse to your memory stick (likely your F: drive), and create a new subfolder within

the cs1033 folder called lab04. Then inside the lab04 folder, create 4 new subfolders called oplibrary, website1, website2 and website3. These folders are empty and will represent 4 websites that you will be creating/working with. Navigate inside your oplibrary folder and create a folder called images. Note: the names for ALL these folders should be all lower case. For example, make sure you call the folder images NOT Images. Every website should have an images folder to hold your pictures and graphic files you plan to put on your webpages. You should now have the following folders:

F:\cs1033\lab04\oplibrary F:\cs1033\lab04\website1 F:\cs1033\lab04\website2 F:\cs1033\lab04\website3

2. Go to http://www.csd.uwo.ca/~lreid/cs1033labs/lab04/images/ One at a time, right-click on each file and save each image into the oplibrary/images folder you just created on our F: drive. Your F: drive should look like this now:

GETTING FAMILIAR WITH THE KOMPOZER ENVIROMENT

3. Start KompoZer by clicking on the KompoZer icon on the desktop4. From the View menu, select the Show/Hide and make sure the following toolbars are

checked: Composition Toolbar, Format Toolbar1, Format Toolbar 2, Edit Mode Toolbar, Status Bar, Rulers and Site Manager.

5. Toggle each tool bar on and off to see the difference they make in the KompoZer window.

6. Press F9 to toggle the Site Manager pane on and off. (Or you can do View>Show/Hide>Site Manager). Make sure the Site Manager pane (along the left side of the window) is showing.

CREATING A NEW WEBSITE

7. Create a new website by clicking on the Edit Sites button, circled in red in the this image

8. You will then see the Publish Settings window. This is where you will associate a Site Name with a folder/directory. In the Site Name: textbox type: OP Library Website

9. Click on the Select directory button and navigate to your oplibrary folder that you created on your memory stick. Click OK and then OK again. It will look like this:

10.The OP Library Website should now be listed in the Site Manager Page (as shown to the right). Click on the + symbol next to the OP Library Website name to expand the folder and make sure you can see the images folder you created earlier. Then click on the – symbol to collapse the folder.

11.Put your mouse over the right edge of the Site Manager pane until the mouse turns into a double headed arrow, then hold down your mouse and slide it to the left and right to decrease or expand the side of the Site Manager pane.

12.If you forget the folder location for the OP Library Website, you can find that information again by clicking on OP Library Website in the Site Manager Pane and then clicking on

the Edit Sites button . Then click on the OP Library Website in the list of Publishing Sites. This will fill in the current folder location. Try that now. You should see something like this:

13. Now, we will create 3 more websites in KompoZer by associating 3 different names with 3 different folder. Click on the Edit Sites button and type the name Website Project 1 in the Site Name: box and browse to the folder F:\\cs1033\lab04\website1 and then click OK and then OK again. Your new Website Project 1 should now also be listed in the Site Manager pane. If you complete it and then click on the Edit Site button again, it should looks similar to this:

14.Repeat step 13 and create TWO more sites by pointing Website 2 Project to the website2 folder and Website 3 Project to your website3 folder. After you are done, the Site Manager pane should look similar to this:

REMOVING A SITE (DISASSOCIATING A SITE FROM KOMPOZER)

15.If you no longer are working on a website and wish to remove it from KompoZer, you can do this WITHOUT removing the folder from the hard drive/memory stick. To do this, click on the Edit Sites button , then click on the site you wish to remove, in this case the Website 1 Project, then click on the Remove Site button and finally click on the OK button:

16.Browse to your memory stick and notice that the website1 folder is still there. When you remove a site, you are only disassociating it, NOT deleting the folder from your hard drive/memory stick.

17.Repeat the above step for Website 2 Project and Website 3 Project. So OP Library Website should be the only site left in the Site Manager pane.

Lab 4 – Tutorial 2

Objectives:Upon completion of tutorial 2, you should be able to:

Create a new webpage using KompoZer Put a blank line between 2 lines in a webpage using the <Enter> key Put a line break between 2 lines in a webpage using the <Shift>+<Enter> keys Identify the different modes for viewing a webpage inside of KompoZer Open and close an existing webpage in KompoZer Toggle between 2 open webpages in KompoZer List and switch between the 4 modes for viewing a webpage in KompoZer Preview your webpage in a real browser such as Chrome or IE

CREATING YOUR FIRST WEBPAGE1. In the Site Manager window, click on the OP Library Website2. Go the File menu and select File>New, then select A blank document and make sure

Strict DTD is checked and click on the Create button.

3. Notice the Document window opens with a blank file labeled untitled which appears in the tab directly above the document window.

4. Right now this webpage has no file name. We are going to save it with the file name index.html. index.html is the starter page (or landing site) for any website, i.e. it is the first page that gets displayed, the browser looks for the index.html page to show first. Go to File>Save As and the very first time you try to save a new file, a box will pop up. This box holds the Property Title that is displayed in a browser tabs. For example, in the image below, the property title is Personal banking | BMO.

The property title should always be Website – Webpage (e.g. “Google – Google Photos”) or Webpage | Website (e.g. Personal Banking | BMO). In our case, index.html will the home page so we are going put: OP Library – Home as shown below:

a. Then hit the OK button

b. You will then be prompted for a file name, make sure you always give a file name with NO spaces and all lower case. Make sure the first page you want people see (often your home page) is always called index.html. In this case, make sure you are in the oplibrary folder but NOT the images subfolder and give this file the file name index.html as shown here

5. Your index file should show up in the Site Manager pane. If it is not there, hit the Refresh button in the Site Manager:

. Then you should see this: 6. In the Site Manager, click on index.html, then before you start

typing in content to the webpage, change the format dropdown box to Paragraph. Once

that is changed, you can start typing. 7. Start typing in the webpage by following the chart below. Type the content on the left

AND, as you go, perform the instruction on the right.Text to Type Instructions and Notes

Roll Woods Park Public School Library <Enter> <Enter> means press the Enter key on the keyboard. When you press <Enter> it will insert a paragraph break, ie it puts a paragraph break after the line Roll Woods ….

Welcome to Our Library <Enter>

Take a tour of our library where your children have access to books, computer labs and a quiet workspace area for reading, research and group work. <Enter>

Keep typing and allow the line breaks to occur as the text runs out of space. Do not press <Enter> until the last word: work.

Welcome to our library <Shift>+<Enter>…where children, learning and fun<Shift>+<Enter>……are brought together.<Enter>

<Shift>+<Enter> forces the cursor to the next line without putting a blank line.

Through books, computers and technology<Shift>+<Enter>open your child’s mind<Shift>+<Enter>

8. From the menu, select File>Save As and confirm everything is still going in the oplibrary folder under the name index.html. Always use File>Save As to make sure your webpages go into the correct folder. Click yes when prompted if you want to override the index.html file. If you use File>Save sometime a file will go in the wrong folder and you won’t be able to find it.

9. Close the index.html webpage (not the whole site) by clicking on the red X in the top right corner of this page.

Text to Type Instructions and Notes

Roll Woods Park Public School Library <Enter> <Enter> means press the Enter key on the keyboard. When you press <Enter> it will insert a paragraph break, ie it puts a paragraph break after the line Roll Woods ….

Welcome to Our Library <Enter>

Take a tour of our library where your children have access to books, computer labs and a quiet workspace area for reading, research and group work. <Enter>

Keep typing and allow the line breaks to occur as the text runs out of space. Do not press <Enter> until the last word: work.

Welcome to our library <Shift>+<Enter>…where children, learning and fun<Shift>+<Enter>……are brought together.<Enter>

<Shift>+<Enter> forces the cursor to the next line without putting a blank line.

Through books, computers and technology<Shift>+<Enter>open your child’s mind<Shift>+<Enter>

10.Create another new webpage. Immediately do File>Save As and give it the property title of OP Library – Our Teachers then click on OK and give a file name of teacher.html and make sure it is saved to your oplibrary folder This should save it as teacher.html.

Use the Refresh button in the Site Manager pane to make sure the new page is there.

11.Select Paragraph from the Format dropdown box in the top left corner. 12.Type in the following information:

13.Do File>Save As and save it again as teacher.html in the oplibrary and replace the old version of teacher.html

14. Click on the red X in the top right to close the teacher.html webpage.

Text to Type Instructions and Notes

Roll Woods Staff Directory<Enter>

Principal: Mr. Hardwood<Shift>+<Enter>(519) 656-2141<Shift>+<Enter>hardwood@rollwood.ca<Enter>

Grade 1: Mrs. Smith<Shift>+<Enter>(519) 433-3167<Shift>+<Enter>smith@rollwood.ca<Enter>

Between the text Principal: and Mr., leave three spaces. You cannot have MORE THAN ONE space into a webpage without using a special code. KompoZer puts this special code in for you each time you hit the space bar. You can see the code by switching to Source view (the tab at the bottom of the window pane):

Notice a tag &nbsp between Principal: and Mr. Hardwood. This is a space HTML tag. Now click back on Normal view.

Remember, if you want a blank line, for example between paragraphs, hit the <Enter> key and if you just want a line break, hold down the <Shift> key and hit the <Enter> key, otherwise don’t hit enter and just let the window decide where to break the lines.

MOVING BACK AND FORTH BETWEEN WEB PAGES

15.Click on the Refresh button in the Site Manager pane. 16.In the Site Manager pane, double click on index.html to open that page again if it is not

open.17.In the Site Manager pane, double click on teacher.html to open that page again if it is

not open. Click back and forth on the tab for the 2 webpages. As of right now, the OP Library Website contains 2 webpage: index.html and teacher.html

18.Make sure the index.html tab is open and highlight and copy (Edit>Copy or Ctrl-C) the text Roll Woods Park Public School Library

19.Click on the tab for the teacher.html webpage and paste (Edit>Paste OR Ctrl-P) the text at the top of this file (above the Roll Woods Staff Directory).

20.Save and close the teacher.html file but keep the index.html file open in the document window.

VIEWING THE WEBPAGE IN DIFFERENT MODES AND PREVIEWING IT IN A BROWSER

21.At the bottom of the document window, you will notice 4 tabs: Normal, HTML Tags, Source and Preview. They indicate the mode you are currently looking at the page in. Press each of these of tabs and you will see the document window change. The modes are as follows:

a. Normal (sometimes called Design): This is the mode or view you will normally be using. It displays the webpage almost exactly like the webpage will look in a real browser. This is also called a WYSIWYG mode (“What You See Is What You Get”). When in Normal mode, as you are entering text, images and links into the Document window, KompoZer is actually creating the webpage using HTML codes “under the covers” (ie. You don’t see the codes getting generated but they are being generated). We will be using this tab MOST of the time.

b. HTML Tags: This mode or view is for people familiar with HTML. There is a yellow marker for the start tag for all HTML elements (end tags are omitted). Clicking on a marker selects and highlights the whole of the element. Try clicking on these markers. We will NOT be using this tab

c. Source: Clicking on this mode shows the actual HTML code being built to create the webpage. You should be FAMILIAR with this tab, we will be using it occasionally.

d. Preview: Preview mode offers almost the same view as if you viewed the page in a browser with the addition of rulers and sizing boxes. The main differences are that scripts do not run (so their effects will not be seen) and links do not operate. We will NOT be using this tab.

22.Save your index.html again and then close KompoZer23.Find your oplibrary folder on your memory stick using Explorer and right click on the

file index.html and then select Open With and select Notepad

24.Notice in Notepad that you can see all the content and the HTML tags. Really, a webpage is just simple text and some HTML tags mixed in. If you know your tags well enough, you could create all your web pages using just a simple editor like Notepad. Also, notice that it is much harder to read this way than using KompoZer with the Normal Tab, that is why we use tools like KompoZer, they make our life easier.

25.Close Notepad26.Now, still in the Explore window, double click on index.html. That should bring up the

file in a browser. We always want to preview (i.e. check) our file in a browser as that will show us what the people who are looking at our webpage will see in THEIR browsers.

27.Open KompoZer again and click on the OP Library in the Site Manager pane and double click on index.html. Change the second line from Welcome to Our LibrarytoWelcome to Our BRAND NEW Library

28.Save the index.html file (File>Save or click on the Save Icon )

29.Go back to your browser window and refresh (reload) your web page to make sure the changes were saved:

30.Note: KompoZer has a Browse button that should show you what the page will look like in a browser but this button is very buggy (i.e. The Browse button doesn’t work well, ESPECIALLY on Macs). Instead of using the Browse button in KompoZer, we recommend you ALWAYS just double click on the file you want to check using Explorer (on Windows) or Finder (on a Mac) as shown in steps 26-29 above. This will bring it up in your default browser, keep that browser containing the web page open. Also keep KompoZer open and make the changes in KompoZer, and save the web page. Then, to see if the changes worked, refresh or reload the page in your browser. AVOID USING THE KOMPOSER BROWSE BUTTON! REMEMBER: use Chrome, IE or Safari to check your pages, while you are working, never close the browser, just keep reloading the page every time you do a save in KompoZer to see if the changes worked.

Lab 4 – Tutorial 3

Objectives:Upon completion of tutorial 3, you should be able to:

Add a property title, author and description to a webpage Check that the property title is set using a web browser Format the headings on a webpage with one of the 6 heading styles Create a link to another webpage in the same folder Create a link to a webpage on the World Wide Web Create a link to an email address that opens an emailing program

SETTING THE WEBPAGE’S PROPERTY TITLE1. Open KompoZer. In the Site Manager window, click on the OP Library Website2. Double click on the index.html webpage so that it is open in the Document Window.3. Make sure that index.html is also still open in a browser (IE or Chrome - Double click on

it using Explorer if you accidently closed it), you are going to toggle between the browser and KompoZer a lot so position both windows so you can see them.

4. In the browser, notice the property title in the top of the tab.

You might need to change this if you didn’t set it correctly originally when you first saved your file. The property title is one of the MOST important places that Google looks for keywords, so it is important to set it to a good name. The general rule is to give a webpage the property title of Website Name – Webpage Name for example: Bank of Montreal – New Accounts OR Bank of Montreal - Contact Us

5. To change the Webpage Property Title of the index.html webpage, go back to Kompozer and go to Format>Page Titles and Properties. (NOTE: if the Page Titles and Properties option is disabled close KompoZer and open it again, it is a bit buggy!)

Then, in the screen that pops up, for :a. Title textbox, type: Roll Woods Library –

Homeb. Author textbox, type: your namec. Description textbox, type: Elementary

Publicly Funded Library

6. Finally, hit the OK button

7. Click on the Source mode tab at the bottom of the Document Window and you will see the HTML that was generated to create this information (meta content is sometimes used when Google builds its index). Then click back to Normal mode and save your index.html file.

8. Refresh or reload the browser and make sure the new property title appears in the top tab line.

FORMATTING THE HEADINGS (i.e. TITLES) IN A WEBPAGE

9. Now we are going to format the text on the home page (index.html) to make it look a bit neater. You can use the Headers to indicate section headings. Highlight/select the text at the top of the index.html page, the text: Roll Woods Park Public School Library.

10.From the Format Toolbar 1: click on the first dropdown box (it probably says Paragraph) and select Heading 1. ((NOTE: If this dropdown menu is disabled, close KompoZer and open it again, KompoZer is a bit buggy!) Notice the heading change sizes. Now highlight the text again and select Heading 3. Notice it is still bolded but slightly smaller. There are 6 sizes for headings: Heading 1 (largest) to Heading 6 (smallest). All six headings will bold the text and force a paragraph break at the end of the line. DO NOT use headings for formatting a whole paragraph of text, instead only use them for headings or titles.

11.Highlight the text: Roll Woods Park Public School Library and set it back to Heading 1.12.Highlight the text: Welcome to Our BRAND NEW Library and set it to Heading 3. 13.Save your file and then reload/refresh in the browser to make sure it worked.

LINKING TO ANOTHER PAGE

14.In KompoZer, open the file index.html. Move your cursor to the very bottom of this page (after the line: to learning and the future), make sure that Paragraph is selected in the toolbar and hit <enter> and then add the text:Click here to see our staff.Hit <enter> and add the text:Click here to see another beautiful library. and save index.html

15.Highlight the sentence Click here to see our staff. and then click on the button in the tool bar called Link

16.In the new box that pops up, to the right of the long white textbox you will see a folder

icon. Click on that folder icon and then find the oplibrary folder and click on the file called teacher.html and then click on the Open button and then on the OK button.

17.Now highlight the sentence: Click here to see another beautiful library and click on the Link button again. Then in the white textbox type the following URL: https://www.lib.uwo.ca and hit the OK button.

18.Save your index.html file and then go to your Chrome or IE browser window and refresh/reload the browser. Click on the first link and make sure it takes you to the teacher.html page, and then click on the back button and try out the second link and make sure it takes you to Western Libraries page and then hit the back button.

19. While still in your browser, make sure you on index.html webpage and try testing your links again. Notice that both links stay in the same tab, they do NOT open a new tab. Because the teacher.html is in your oplibrary folder, it is a page from YOUR website, so it should NOT open a new tab and/or new window BUT the link to the Western Libraries does go to another site (the www.lib.uwo.ca site) and away from your site, so it should open a new tab rather than us having to remember to hit the back button to get back to our page. We can force this link to open in a new tab using KompoZer.

20.Go back to KompoZer and open your index.html webpage. Click anywhere on your second link (the libraries link) and hit the Link button.

21.In the Target area of the Link Properties box, check the box that says “Link to be opened” and make sure: in a new window is selected from the dropdown box. Then hit the OK button and save your index.html file again.

22.Refresh/reload your index.html file in Chrome or IE browser and test the second link. It should now open a new tab. REMEMBER: if you have a link that does NOT link to something within YOUR site folder, rather it opens a link to something in the World Wide Web, then it should open in a new tab!

23.Now try making a link yourself! In KompoZer, open the file teacher.html. Add a line to the bottom of this page that says:Click here to go back home.

24.Then create a link that does NOT open in a new tab (since it is linking to a webpage WITHIN your site) that links back to the index.html page, save the file and test it in a browser.

25.Now we will create an email link. Open the teacher.html file in KompoZer. Highlight the text hardwood@rollwood.ca and then click on the Link button.

26.In the white box type in the following email address: hardwood@rollwood.ca and then check the box that says “The above is an email address” and click on the OK button.

27. Save the file and reload it into a browser. Test that the email link tries to open an email program.

28.On the teacher.html page, turn the text: smith@rollwood.ca into an email link also.29.Save your teacher.html file and reload/refresh it in a browser and check that your new

email link works and your new link takes you back to the index.html page AND your original link on the index.html page still takes you to the teacher.html page. Thus, you should be able to toggle back and forth between the 2 pages without using the browser Back button, you should just be able to use the links you created.

Lab 4 – Tutorial 4

Objectives:Upon completion of tutorial 4, you should be able to:

Upload a folder to a webserver and check that the website displays properly Debug a site where the links are broken using the HTML codes

We are now going to move (SFTP) our folder up to a webserver to view it on the internet, not just on the machine we are working on. Then we are going to do some things that will break our site but we are going to learn how to fix it!UPLOADING YOUR FOLDER TO CREATE A WORKING WEBSITE

1. Search for the program WinSCP on your machine and open that program. (If you have a MAC, Filezilla is a program that does the same thing as WinSCP). Fill in the boxes as follows:

a. File protocol: SFTPb. Host name: panther.uwo.cac. Port number: 22d. User name: Your Western User IDe. Password: Your Western Password

2. Hit the Login Button3. If prompted, click on the Continue Button4. On the right side pane, double click on the

public_html folder to open that folder. The right side is your individual area on the Western Webserver where you can upload websites.

5. On the left side pane, browse to find your oplibrary folder (it is likely on your memory drive). The left side is the machine you are currently working at.

6. Drag the oplibrary folder from the left side and drop it in the white area on the right side. Be careful to drop it in the white area and not into a folder. If you drop over a folder it might be dropped INSIDE that folder and that is not what we want, we want it just inside the public_html folder, not inside subfolders of public_html! If you did it

correctly, it should look like this:

7. Now we need to check if our site is on the internet. Open a new tab in a browser (Chrome or IE or Firefox) and then type this web address: http://publish.uwo.ca/~youruserid/oplibrary

8. If it worked, you should see the index.html page! Try clicking on your links to make sure they work also!

9. Right now, everything works perfectly because we walked you through the steps, but sometimes, when you make your own website, you occasionally do things that break your site and you don’t realize it till you upload (SFTP) your site. We are going to do that now, PURPOSELY BREAK YOUR SITE SO THAT YOU LEARN HOW TO FIX IT.

10.One thing students do that breaks everything is moving files after they have created links or renaming files after they have created links. We are going to do both these things, prove that the links are broken and then fix the links. Open Explorer and find your oplibrary folder and make a new subfolder in the oplibrary folder called mypages. Then move the file teacher.html into the new subfolder, so your oplibrary folder should look like this now:

11.Now go back to WinSCP and delete the oplibrary folder in the right pane. IMPORTANT READ THIS NEVER EVER DELETE A FOLDER ON THE LEFT PANE! It will remove EVERYTHING you have been working on from your machine/stick. IF YOU DELETE WITH WINSCP, ONLY DELETE FOLDERS IN THE RIGHT PANE!

12.Then drag the oplibrary folder from the left side and drop it inside public_html (drop it in the white area again).

13.Now go back to your browser and test your links at: publish.uwo.ca/~youruserid/oplibrary Reload/refresh the link. Notice that your links are broken now!

14.Now go to http://publish.uwo.ca/~youruserid/oplibrary/mypages and click on the teacher.html file and then try clicking on the Click here to go back to the home page link and notice it is broken too!

15. THE MORAL HERE IS: IF YOU MOVE YOUR FILES AROUND YOU MIGHT BREAK YOUR LINKS!

16.Go back to Explorer and move teacher.html back into oplibrary folder and delete the mypages folder so that everything is back the way it was (index.html and teacher.html

in the same folder!). 17.In WinSCP, delete the oplibrary folder on the RIGHT side (on the webserver) and drag it

over again from the left side to the right side and test that the links work again in the browser.

18. Now we are going to rename files to break the links. Go into Explore and rename index.html to be Index.html (with a capital I).

19.In WinSCP, delete the oplibrary folder on the RIGHT side (webserver side) and drag it over again. CLOSE your browser and then start the browser again and reload your site publish.uwo.ca/~youruserid/oplibrary in your browser. Notice that now it doesn’t show your home page automatically, that is because it only shows the file called index.html automatically, NOT the one called Index.html.

(Capitalization will mess everything up here). Click on the Index.html in your browser and then click on the link to teacher.html file. Reload your teacher.html file and then click on the link to take you back to the home page. Notice that is broken also, this is because your link was pointing to index.html NOT to Index.html! THE MORAL HERE IS: BE VERY CAREFUL WHEN YOU CHANGE FILENAMES AFTER YOU HAVE BUILT YOUR SITE, you might break all the links you have built!

20.Fix Index.html so that it is index.html again, delete oplibrary folder on the RIGHT side and reupload it to the webserver. Make sure everything works again.

21.The last mistake we want to show you is something that can happen while you are in KompoZer. Open KompoZer and open the OP Library Site. Then double click on the index.html file and click on the text that says “Click here to see our staff”, then click on the Link button, so that you see the text link to the teacher.html file:

22.In the Link Properties box, uncheck the checkbox called:URL is relative to page locationas follows:

23.Notice that there is now a long path referring to your machine in in the white box! Click on OK and save your index.html file.

24.Go to Explore and double click on the file called index.html to bring it up in a browser

25.Then try to test your link to go to teacher.html (Click here to see our staff) and it looks like it is working. DO NOT BE DECEIVED! It is only working on this machine but if you SFTP it up to panther.uwo.ca, it will no longer work. Let’s try this out.

26. In WinSCP, delete oplibrary folder on the RIGHT side. Drag your oplibrary folder from the left side to the right side and drop it in the white area (inside public_html). Then go to http://publish.uwo.ca/~youruserid/oplibrary in a browser.

27.Hover your mouse over the link to Click here to see our staff. Notice that it is pointing to your machine, this may work for you, but other people won’t be using the same machine so this link will be broken for others.

28. Right click on the page and select VIEW SOURCE (or View Page Source). Find the link to teacher.html and notice that it is referring to your machine. THIS IS WRONG as people who view your page will NOT be on YOUR machine, make sure that you never ever see things like file:///c in your HTML code, it will NOT WORK!

THE MORAL HERE IS:a. ALWAYS TEST YOUR SITE FROM A MACHINE OTHER THAN THE ONE YOU

BUILT IT ONb. IN KOMPOZER, ALWAYS CHECK THE BOX: URL is relative to page

location when you are building your site so that the HTML does not point to your actual machine.

29.

Lab 4 – Tutorial 5

Objectives:Upon completion of tutorial 5, you should be able to:

Fix a site that has broken links.

1. Someone make this site but had many problems, you are going to fix the problems. Open the site in your browser: http://cs1033.gaul.csd.uwo.ca/~lreid2/lab4llamas/

2. Notice that there are several things wrong with it, for example, the first page doesn’t show automatically, this is because the person who created it, called the home page INDEX.html instead of index.html

3. Click on the INDEX.html file and try to click on the Cool Cuts link. Notice that it doesn’t work.

4. Right click on that page and select “View Source” and see if you can see why the link doesn’t work.

5. Go back to http://cs1033.gaul.csd.uwo.ca/~lreid2/lab4llamas/ and click on the coolcuts.html file. Notice that the image doesn’t display. Notice that the image is called images/afrollama.jpg

6. Go back to http://cs1033.gaul.csd.uwo.ca/~lreid2/lab4llamas/ and click into the images folder. Look at the file names, do you see one called afrollama.jpg? Can you see the mistake the person made? (they probably renamed their file AFTER they had added it to the page)

7. Go back to the coolcuts.html page http://cs1033.gaul.csd.uwo.ca/~lreid2/lab4llamas/coolcuts.html and try to click on the Weddings link. Notice that it is broken too. Hit the back button to get back to the coolcuts.html page and right click to view source. Notice that the link looks correct:

8. But now go back to here: http://cs1033.gaul.csd.uwo.ca/~lreid2/lab4llamas/ Notice that

there is a INDEX.html file, a coolcuts.html file but no wedding.html file. The person building this site accidentally moved it into the images subfolder. Click into the images folder and you will see the wedding.html file (click on it to view it).

9. You are going to fix this site. Download this file to your memory stick: http://www.csd.uwo.ca/~lreid/cs1033labs/lab04/lab4llamas.zip

10.Right click on it and select Extract All and make sure you extract it to inside your Lab04 folder on your memory stick.

11.

12.Open KompoZer and click on the Edit Sites Button in the Site Manager Pane. Then click on the Site Name: box put Find Mistakes and then find the folder (lab4llamas) you just extracted using the Select Directory button and then hit OK.

13.Close KompoZer and open it again (KompoZer is a little buggy, if something stops working, close and open KompoZer, that often fixes things). Click on the + next to Find Mistakes to see all the files and then click on the + next to images to see the image file names.

14.Double click on the coolcuts.html file in KompoZer. Then double click on the picture of the llama. This will bring up the Image Properties box. See if you can figure out how to fix this image.

15.Using either KompoZer OR windows explorer (use windows explorer to either move or rename files), fix the site so that the images show and all the links work.

16.Use WinSCP to upload the corrected lab4llamas folder up to a webserver. This time, instead of panther.uwo.ca, you are going to move it to the cs1033.gaul.csd.uwo.ca webserver. Fill in the boxes as follows:

a. File protocol: SFTPb. Host name: cs1033.gaul.csd.uwo.cac. Port number: 1033d. User name: Your Western User IDe. Password: Your Western Password

17.Drag the lab4llamas folder from the left side to the right side and drop it in the white area near the bottom.

18.Go to this URL: cs1033.gaul.csd.uwo.ca/~yourwesternuserid to make sure ALL your links and images work (make sure you test the 3 links for EACH of the 3 pages, so you need to do 9 tests). If something doesn’t work, then delete the lab4llamas folder on the RIGHT side, fix it using “View Source” (right click on the page) and then KompoZer and/or Windows Explorer and then drag it up again using WinSCP.