CPSC 203 Introduction to Computers

CPSC 203Introduction to Computers Tutorial 59 & 64 By Jie (Jeff) Gao

What Is a Web Page? • A file with the extension “htm” or “html” • This file can be at the remote server (with a web address) or at the local computer (with a file path). Examples: • http://www.cpsc.ucalgary.ca/~deur/203/w06/ • c:\temp\sample.htm • This file can be parsed and displayed in a web browser (Internet Explorer or Netscape) CPSC Tutorial by Jie Gao

Elements in a Web Page • Title: The text appears in the browser title bar • Content: • Paragraphs • Headers • Images • Links • Tables • … CPSC Tutorial by Jie Gao

Tools to Create a Web Page • WYSIWYG (What You See Is What You Get) tools for creating a web page: • Word: Create a document, then “Save as Web Page…” • FrontPage: A web page editor; the interface is similar to Word • Netscape composer: A free web page editor in Netscape CPSC Tutorial by Jie Gao

A “Page” • An HTML document (*.htm or *.html) is a web “page” • A web page is displayed in browsers as a long, continuous page • The concept of “page” in web pages is equivalent to “a single HTML document” • In these two weeks, “a page” just means “a web page document” CPSC Tutorial by Jie Gao

A Simple Web Page • We can use Word or FrontPage to create web pages • Type the content you want • Insert images, lists, tables, … • Insert a link: Use menu Insert  Hyperlink • Choose a place to save. (In Word, choose “Save as Web Page”.) The saved file is a web page (htm or html file). • Use a web browser to view that web page CPSC Tutorial by Jie Gao

After Saving the File • Files saved in Word (e.g. webpage.htm) will have a folder webpage_files along with it. This contains images and other resources used by webpage.htm and should always be put together with webpage.htm. • Files saved in FrontPage also requires images to be put together with them. • Web page files do not store images inside them! The images are in separate files. CPSC Tutorial by Jie Gao

Plan a Web Site • A “web site” is normally a collection of web pages (multiple files). • It has an entrance (start page), often named index.html • The start page contains links to other web pages • All web pages can be visited by following a series of links from the start page CPSC Tutorial by Jie Gao

Publish Web Pages • You need to publish your web pages to a web server so that the others can visit them • A web server is a computer connected to the Internet. It has a web address (host name), so people can find and visit it via this name • The web servers have some particular storage. When a web page is being visited, the web server will find the page in the storage and provide it to the visitor CPSC Tutorial by Jie Gao

The University Web Server • We are using the University web server • You need an IT account to publish your web pages to the University server • Web pages should be transferred to the WebDisk, and they should be put in the directory public_html • Lowercase and uppercase names are different on this server CPSC Tutorial by Jie Gao

Connect to the Server • Publish your homepage to IT account using the WebDisk tools • Connect to your WebDisk • You will see the content stored in the WebDisk in the drive (normally U:) in “My Computer” CPSC Tutorial by Jie Gao

Prepare the Directory • Prepare your web page directory • By default you should have a folder with the name “public_html” • If you do not have it, right click, select New  Folder, and then input the name “public_html” CPSC Tutorial by Jie Gao

Transfer Web Pages • Transfer your web pages to the server, or transfer them back to your computer • Just like copying a file from one folder to another, use “copy” then “paste”, or arrange the two windows in good positions and drag files from one to another. • Remember you need to transfer images as well CPSC Tutorial by Jie Gao

Try to Visit Your Web Site • Open a browser and type:http://homepages.ucalgary.ca/~ituser/webpage.htm • ituser is your IT username • webpage.htm is the file name of your start page • You should be able to see your web page, • Or be prompted to input a username and password • In this case, you need to set the permission CPSC Tutorial by Jie Gao

Set the Permissions • On the University computers, you have a button “Set Permission” on the WebDisk disconnect window • Or go to IT home page and browse to the “Managing your account” and then “Webdisk sharing utility” • Set read permission for all internet users on public_html folder CPSC Tutorial by Jie Gao

Assignment 4 • Create your own web pages • At least 4 web page documents • Publish them to the University web server • To get started, consider the content of your web pages first. Make a clear plan what to be discussed on each page and input content. CPSC Tutorial by Jie Gao

Assignment 4 • Publish them to the University web server • Your existing web pages at other places cannot be used as this assignment submission • You can use any tool you like, but you have to create web pages • The URL (address) of your web page should be sent to me by e-mail by due time:gaoj@cpsc.ucalgary.ca CPSC Tutorial by Jie Gao

CPSC 203 Introduction to Computers