Creating and Maintaining Your Own Web Pages
Randall Rightmire
UCSB ESL Faculty In-Service, University of California, Santa Barbara
June 14, 2006

Thanks & Intro

Thanks for coming, and thanks to Judy and Michelle for first thinking of this.

Please sit where there are some programs already open on your desktop. Don't close them just yet.

Goals

I'd like to start with an overview of the workshop's goals.

* Understand what web pages are, what a web site is

* Understand how the pages are organized on our site

* Learn how to create a new page

* Learn how to update a page

* Learn how to upload pages to the site

* Learn how to link your new page to your existing home page

* Learn how to upload pages to the site

* (If we have time) Your feedback on what you'd like to see on our site

Think Conceptually!

I just want to say that in the beginning of the workshop I would like to get you to think conceptually. At first, I won't ask you to follow every step that I do. I just think that if you first grasp the essence of what the web does, that will make it easier when we do get to the step by step.

What are web pages?

What is a web site?

Think of a web site as a folder on a computer-a folder where you can put electronic documents that you would like to share with the world.

Just as you would drag and drop any file from one folder to another, you can drag and drop a file from a folder on your home or office computer to a folder on our web server - the computer that hosts our web site.

Others who view our web site are requesting and receiving files from the web server.

Web pages are documents!

So, in many ways, web pages are just like other documents that you make and use. In fact, all our web pages can be created or modified on your home or office computer with software you already have.

Just as you would use Word, or other Office software to create a document, you can create a web page using Word, Excel, PowerPoint, and other software.

There are a few differences, however, between web pages and ordinary documents.

Differences between web pages and other documents:

"html" format

The first difference is: we usually save documents in a format called "html." It's a universal format that is recognized by all web browsing software - Netscape, Mozilla, Internet Explorer.

Try that right now: go to file, save as, web page. That's the easiest way to create a web page; you just did it. At this point you could copy the file to our server and be done.

Create a web page

1. Go to your Word window.

2. Point to "File."

3. "Save As."

4. "Web Page."

Actually, however, what you're going to learn in this workshop is one level more advanced than that. The reason why has to do with something called "source code."

An important thing to know about html is the "source code." Basically it's what the computer sees when it looks at a web page.

How to view source code

Let's try that now: In your web browser, navigate to your home page. Right click on the page. Select "view source" or "view page source."

1. In your web browser, find your home page.

2. With your mouse, right-click.

3. Select "view page source."

What is "source code"?

Looking at the source code of a web page on our site: The actual words that appear on your web page are written in plain text. Those are all flush left, as you can see. If you want some text to be bold or underlined or in a different size, you add some special commands; that's this gibberish in between. In fact, all the information about layout-images, links, columns, tables, everything-is encoded in this gibberish.

The main thing to remember is that whenever you want to change some text, such as your office hours, you should scroll down and look for the plain English text and edit that. If you don't edit anything else, then the other features of the page will remain exactly the same.

How to edit source code

So now you want to edit this text. This window you are looking at unfortunately doesn't work as a text editor. So you want to copy the text and paste it into a program like Word or WordPad or Notepad. (By the way, if you use Microsoft's Internet Explorer, this step is automatic.)

Let's try that now. Click on the source code window; right click; select all; copy. Click on the Word window; right click; paste.

1. Click on the source code window.

2. With your mouse, right-click.

3. "Select All."

4. Right-click again.

5. "Copy."

6. Click on the Word window.

7. Right-click again.

8. "Paste."

Scroll down and look for "Spring 2006 Office Hours." Change "Spring" to "Summer." Find your hours and change them to "TBA" or "By appointment only."

9. In the Word window, scroll down and look for "Spring 2006 office hours."

10. Change "Spring" to "Summer." Find your hours and change them to "TBA" or "By appointment only."

To save the file: Use all lowercase letters. Give the file your last name, followed by a period, followed by "html."

11. To save:

* Use all lowercase

* Give the file your last name, followed by a period, followed by "html."

More differences between web pages and other documents

A separate application for "uploading"

The second difference is: there is a layer or two of security between your home computer and our web server.

That means you have to have a password to put pages on the site or make other changes to the site-what we call uploading. So it is often helpful to use a separate application to handle uploading.

So while Mac OS or Windows usually handles the copying and moving of files from one folder to another, we need a little extra power to upload to the Web. What they have created for us at LSIT-and what I will be recommending today-is their web services interface.

Recommended: LSIT Services interface

Try that right now: open a new internet browser window (Mozilla Firefox) at your workstation.

How to upload using the LSIT Services interface

1. go to http://www.lsit.ucsb.edu/

2. services/webmail

3. my account

4. file manager

5. server web shares

6. esl

7. www

8. etc as necessary

How are the pages organized on our web site?

As you can see the files on our site are organized into several folders.

If you want to put a page on our site, you should know what folder to put it into.

Our home page and most of the pages that link to it go into the root folder.

The subfolders we use are "images," "people," and "schedules."

Root folder and subfolders

All the artwork for the site, including photos of you, are in "images."

The ELPE page and the quarterly class schedules are in "schedules."

Your own homepage is in "people."

If you have additional information linked to your page, such as your CV or syllabus, it is stored in a sub-sub folder named after you.

Subfolders

* Images

* People

* Schedules

Upload your web page

Here is where we will upload to the web.

Try that right now: open a new internet browser window (Mozilla Firefox) at your workstation.

How to upload using the LSIT Services interface

9. check a file to rename

10. choose action rename items

11. add ".old" or ".bak" to the end of the filename

12. file 1 browse

13. find the file on local machine

14. double-click or "OK"

15. upload file(s)

16. verify in your browser

Summary

Here is a summary of what we have just seen so far.

1. We located the source code in a web page,

2. copied and pasted the source code into a text editing program,

3. edited the content,

4. saved the result,

5. and uploaded the revised page onto the web site.

How to put a link on your page

Next I'd like to show how you can put a link on a page. First, go to back to that web page you created in Microsoft Word. It should still be in another window on your PC.

1. Go to your Word window.

2. Highlight a section of text.

From the menu, point to "insert, hyperlink."

3. "Insert"

4. "Hyperlink"

Click on "browse the web" - it is an icon that looks like a magnifying glass hovering over a globe.

5. Browse the web

6. Select the address in the address bar.

7. right click

8. copy

9. Go back to Word.

10. Paste.

11. "OK."

That's it.

Actually, however, what you're going to learn in this workshop is one level more advanced than that. The reason why has to do with the history of our web site.

How to put a link on your page, part 2

1. Go back to your home page

2. view page source

3. select all 4.

5. copy 6.

7. go back to Word 8.

9. paste 10.

Find the place where you would like to add the link. I recommend you scroll down until just below your e-mail address.

7. Find the place where you want to add the link.

How to put a link on your page, part 2

Find the place where you would like to add the link. I recommend you scroll down until just below your e-mail address.

8. Add: