CS 1033 Multimedia 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

contents

Before 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 SITE

1. 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 desktop

4. 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 WEBPAGE

1. In the Site Manager window, click on the OP Library Website

2. 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.

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> to learning and the future.<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 KompoZer

23.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 Notepad

26.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 Library

to

Welcome 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 TITLE

1. Open KompoZer. In the Site Manager window, click on the OP Library Website

2. 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 –

Home

b. Author textbox, type: your name

c. 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: SFTP

b. Host name: panther.uwo.ca

c. Port number: 22

d. User name: Your Western User ID

e. Password: Your Western Password

2. Hit the Login Button

3. If prompted, click on the Continue Button

4. 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 location

as 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 ON

b. 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.

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.

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: SFTP

b. Host name: cs1033.gaul.csd.uwo.ca

c. Port number: 1033

d. User name: Your Western User ID

e. 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.