CPSC 203 Introduction to Computers Lab 23 By Jie Gao

10 June 2003CPSC Labs by Jie Gao The Content of the Labs Tuesday Starting Point: Basic concept; how to create and publish your first web page Organization: More pages; links; images; and put all them together Thursday Behind the Scene More tricks

10 June 2003CPSC Labs by Jie 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: D:\documents\sample.htm This file can be parsed and displayed in a web browser (Internet Explorer or Netscape)

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

10 June 2003CPSC Labs 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

10 June 2003CPSC Labs by Jie Gao Using FrontPage FrontPage is a component dedicated for creating web pages in MS Office It might not be included in some Office packages. Thus it’s possible you cannot find it on your computer at home. It can create a single web page, multiple pages, and organize the whole web site, including publishing

10 June 2003CPSC Labs by Jie Gao A Simple Web Page The workspace is like Word Just type the content you want Insert images or tables Insert a link (just a simple one, more details will be given later) Choose a place to save. The saved file is a web page (htm or html file). Use a web browser to view that web page

10 June 2003CPSC Labs 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

10 June 2003CPSC Labs 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 ftp.acs.ucalgary.ca via FTP tools, and they should be put in the directory public_html Lowercase and uppercase names are different on this server

10 June 2003CPSC Labs by Jie Gao Connect to the Server Publish your homepage to IT account using Internet Explorer Input “ ftp://ftp.acs.ucalgary.ca ” in the address bar and press enter key. In File menu, select Login As Input your user name and password and click Log On button You will see the content stored in the IT account storage

10 June 2003CPSC Labs by Jie Gao Prepare the Directory Prepare your web page directory Right click, select New  Folder, and then input the name “ public_html ” Right click on public_html folder, select Properties. Then set the permission, enable execute for Group and All Users (check them) then click OK

10 June 2003CPSC Labs by Jie Gao Transfer Web Pages Transfer your web pages to the server Open My Computer and find your web pages, including all images used in the pages Drag your web pages and images from the My Computer window into the IE ftp window Get files from the server to your computer Drag files from the IE ftp window to a folder window on your computer

10 June 2003CPSC Labs by Jie Gao Set the Permissions For each file in IE ftp window, click to select it, and then right click, select Properties. Enable read permission for Group and All Users, then click OK For each directory in IE ftp window, you should set read and execute permission for Group and All Users Only web pages with correct permissions can be visited

10 June 2003CPSC Labs by Jie Gao Visit the Web Pages Visit your homepage To visit your webpage file.htm, you can go to Replace the “user” and “file” with your own user name and file name Note: In IT account storage, uppercase and lowercase names are different, e.g. INDEX.HTML, Index.html, index.html and index.Html are different files