Introduction T o GU Computing Facility, FTP and Web

Introduction ToGU Computing Facility, FTPand Web Dr. Jason C. H. Chen Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 chen@jepson.gonzaga.edu

Attention … • Always write the class & personal information on any assignments and exams • For example: • Bmis235-01 (or bmis235-02) • ROW: 2 • Name: John Smith

Learning Objectives • What do you have access to when you log into the machine in labs? • File Systems • MS Windows • Barney • FTP • The Blackboard System

What is Technology andWhy Technology? • Technology is not only considered simply as an asset or a capability to manage but also as a factor that has an impact on almost every management method and practice.

Drives on Local PC

File Systems • A file system is a structure that organize data in the form of files in storage media, such as a hard drive. • Technically, there are many different file systems, depending on operating systems (Windows, Linux, Unix, and Solaris), but they are quite similar from the user’s viewpoint. • From user’s viewpoints, computer files are organized in a hierarchical structure according to classification scheme the user decides, just like the catalog system in the library.

File Systems: Hierarchical Structure • Volumes (drives) -> Folders (directories) -> sub-folders ->…->files • C: drive • H: Barney account • G: CD-ROM • Root directory: The topmost directory of one volume • Current directory: The folder/directory that the user/program is working in

Windows Explorer • Windows Explorer is a GUI (graphic user interface) tool that allows the user to manage file systems Start -> Programs -> Accessories -> Windows Explorer • Two panes: • Navigation pane (hierarchical list of folders): shows the hierarchical structure of the file system. • +/- signs are used to collapse or expand the hierarchy. • Content pane: shows the contents of an ACTIVE folder • An active folder is the one highlighted or clicked that you are working on. • You need to click on the “folder” icon, not the plus (or minus) sign to make a folder active. • On the top are tool bar and menu bar

Basic Operations • Navigation pane: • My Computer • Local disk (C:) & CD-ROM (E:) • johndoe$ on ‘jepsonw2kfs’ (H:) • Content pane: Contents in an active folder • Important concepts • Which drive (volume)? C:, D; E:, or H: • Which directory (folder)? • File name? • Copy/move files between folders/drives • Create/erase files/folders

Barney System (I) • The Barney System: • manages student accounts, • provides email services (Zagmail) and • hosts web pages: If you create and upload web pages into a designated folder in your account, one will be able to see those pages with a web browser. • Note: Your assignments must be placed in that designated folder so I can grade them anywhere.

Barney System (II) • Transfer files between your Barney account and the drives on the computer you are working on. • When you are in the lab: H: drive • Note: the H: drive is a logical drive and exists only when you are in the lab. Not a physical drive called H: drive exists. This means that if you are not in the lab and if you have to access files in your barney account, you have to use other ways to download or upload files to or from your Barney account. • When you are NOT in the lab: Use FTP (explained at the end)

Type in the following URLs Always use “Firefox” as the default web browser, otherwise, some errors might be occurred. http://barney.gonzaga.edu/~your_userID http://barney.gonzaga.edu/~chen http://barney.gonzaga.edu/~chenta http://barney.gonzaga.edu/~chenta2

Creating Links Within a Document • To create a link within a document, you enclose the content that you want to format as a link in an <a> tag, and use the href attribute to identify the link target • A link’s content is not limited to text <ul style="list-style-type: circle; text-indent: 15pt"> <li><ahref="myself.pptx"> <b>Know more about me with PowerPoint presentation </b></a> </li> <li><a href="myresume.docx"><b>Visit my resume (MS-WORD format) </b></a> </li> </ul>

Creating Element Ids for Linking Documents • One way to identify elements in an HTML document is to use the id attribute • Idnames must be unique • Idnames are not case sensitive In web <a name=“top"> … <a href="#top"><span style="font-size: small">Go to the Top of the Page! </span></a>

Creating an HTML Document • In planning, identify a document’s different elements. • An element is a distinct object in the document, like a paragraph, a heading, or a page’s title • Formatting features such as boldfaced font, and italicized text may be used

The Structure of an HTML File • An HTML document is divided into two parts: the headand the body • The headelement contains information about the document, for example the document title or the keywords • The content of the head element is not displayed within the Web page

The Structure of an HTML File • The body element contains all of the content to be displayed in the Web page • The bodyelement can contain code that tells the browser how to render the content • The titleelement contains the page’s title; a document’s title is usually displayed in the title bar

Marking Elements with Tags • Elements that employ one-sided tags are called empty elements since they contain no content. An example is a line break <br/> • A third type of tag is the comment tag, which you can use to add notes to your HTML code  • Comments are useful in documenting your HTML code for yourself and others

Marking Elements with Tags • The core building block of HTML is the tag, which marks each element in a document • Tags can be two-sided or one-sided • A two-sided tag is a tag that contains some document content. General syntax for a two-sided tag: <element>content</element> in which <element> is the opening tag </element> is the closing tag • A one-sided tag contains no content; general syntax for a one-sided tag: <element /> • HTML allows you to enter element names (not file names or folder names) in either uppercase or lowercase letters

Displaying an HTML File • As you work on a Web page, you should occasionally view it with your Web browser to verify that the file contains no syntax errors or other problems • You may want to view the results using different browsers to check for compatibility

Create your First Web Page • Please note that case is “sensitive” for all file names and folder’s names in ALL web page assignments. • For example, index.html is different from Index.html

Create your first Web Page • Create the following three files (index.html, myself.pptx, and myresume.docx) and save them under the folder of public_html in the H: drive if you are doing the homework on campus. • Otherwise, you should transfer the three files (using FTP – see Figure 2) to your account inside the folder of public_html

Create the following three files (index.html, myself.pptx, and myresume.docx – a sample in Fig. 3) and save them under the folder of public_htmlin the H: drive if you are doing the homework on campus. Otherwise, you should transfer (download) the three files (using FTP – see Figure 2) to your account inside the folder of public_html • 1. Create an ‘images’ folder and copy image files (see Figure 1 for your web structure). You should copy required six image files from my images folder to your Web source. They are available for you to download from the Blackboard (under either Course Documents or Assignments). • Follow the instruction below to complete the task: • From within H: Drive, • create a new folder of images (lower case) under public_html • From within Blackboard • b) right click an image file (e.g., book.gif) • select “Save Target As” from the pop-up menu • save the book.gif in the folder of images that you just created in step a) • Please note that • if you do not have images folder in the H: drive, you should create it before you save the image file • ii) if you are working your assignment off campus, you should first save ALL image files on your local PC, you then upload (FTP) them to your Web source. • iii) repeat steps b) c) d) for the remaining image files.

2. Use NotePad (or Notepad ++) to create an html file (exactly as shown in Figure 4) and save it as index.html (lowercase). Note that you may download a ‘template’ (index_template.html) and add required html codes and save the file as index.html b) It is very important of naming the file as index.html since it is the default file name that Web Browser will invoke from your personal web page (i.e, from your GU email resource). Please note that: a) the file extension should be .html NOT.docx neither .htm b) how to do it? Hint: c) Select Save As from the File menu, then choose All Files (default is Text Documents (*.txt)) from the Save as type prompts then type the file name as index.html inside the File name box. Click on Save button when you finish. Fail to follow the instruction, the file name might become index.html.txt If you choose to name your documents different from what the names below, be sure that the file name does NOT include a space (use of a underscore, ‘_’, is recommended). case is sensitive for all file names and folder names in ALL web page assignments. For example, index.html is different from Index.HTML

From now on, it (your personal information) is required for ALL assignments to be added. main html codes should be placed here. one word Figure 1. index.html  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <HEAD> <TITLE>Home Page for your name here</TITLE> </HEAD> <BODY style="background-color: lightgreen"> … … … … … <ADDRESS>For comments about my web site, please e‑mail me at: <A HREF="MAILTO: your actual email address">your actual email address</A> <BR>This document was last updated on May 21, 2012</ADDRESS> </BODY> </html>

From now on, it (your personal information) is required for ALL assignments to be added. Figure 3. index.html  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home Page for Jason Chen</title> <style type="text/css">  </style> </head>  <body style="background-color:lightgreen" text="black" link="red" vlink="blue" alink="aqua" background="images/wall.gif">

Figure 3. index.html (cont.) <a name="top"> </a> <script type="text/javascript"> document.write(Date()) </script> <center> <h1>Welcome to JASON CHEN's Home Page! </h1> </center> <br /> <br/> <ul style="list-style-type: circle; text-indent: 15pt"> <li><a href="myself.pptx"> <b>Know more about me with PowerPoint presentation </b></a> </li> <li><a href="myresume.docx"><b>Visit my resume (MS-WORD format) </b></a> </li> </ul> <imgsrc="images/book.gif" height="100" width="100" align="right" alt="Book logo" /> <br /> <br /> <br /> <br /> <br /> <br/> <pre> <b> ******************************************************* © (your name here) ... (your add any appropriate information here) ... ******************************************************* </b> </pre> <br /> <br /> <br /> <br /> <br /> <br /> <center> <a href="#top"><span style="font-size: small">Go to the Top of the Page! </span></a> </center> <address>For comments about my web site, please e-mail me at: <a href="MAILTO:chen@jepson.gonzaga.edu"> chen@jepson.gonzaga.edu <imgsrc="images/mailbox.gif" height="36" width="36" alt="Mailbox logo"/></a> <br /> <i>This document was last updated on: <script type="text/javascript"> document.write(document.lastModified); </script> </i> </body></html> one word

3. Test your first web page a) invoke a Web Browser (e.g., preferable Firefox) b) type in your URL, e.g. http://barney.gonzaga.edu/~chenta It is required to “Validate” and “View” your HTML code and debug/correct the code before you submit the assignment (see HTML p.73-77 or a pdf file for Validating HTML code for details). URL: validator.w3.org In this assignment, you not only learn programming skills with html in creating and enhancing your web page (e.g., hypertext link) but also the management of your web resources with image files. It is always a good idea (and a good practice) to keep all your graphic files (or other relevant data resources) in a certain sub-folder. Please notice again that all file names and folder names (e.g., images) are case sensitive.

http://barney.gonzaga.edu/~chenta

5. Validating your HTML program • It is required to “Validate” and “View” your HTML code (validator.w3.org) and debug/correct the code before you submit the assignment (see HTML p.73-77 or a file for Validating HTML code for details)

What/How you should turn in 6. What/How you should turn in: email me with the following information (Fail to provide me with ALL information, you will losemajor points) a) To: chen@jepson.gonzaga.edu b) Subject: BMIS235-03 Web#1 (or BMIS235-04 Web#1) c) Message : Dr. Chen: Here is my Web#1 assignment. http://barney.gonzaga.edu/~your_userID <Your Full Name> at the end of the message line so that I can record/grade your homework.

What happen if you are working your web assignments off campus? FTP

Why do you need to know FTP? • Simply say, FTP (File Transfer Protocol) is a tool that allows you to transmit files between computers or between other electronic devices in distance. For example, when you download a piece of MP3 music, you are using download software based on FTP. FTP also underpins many online auction and gaming. • It just simply looks and works a little bit different. The reason you need to learn how to use FTP is because sooner or later you need to transfer files from one computer to another and the most convenient way is to use FTP.

What is FTP? • FTP (File Transfer Protocol) is a set of rules that regulate how two computers (client/server) establish connections, submit and receive messages, and reorganize messages. When downloading a file from the Internet, you're transferring the file to your computer (called client) from another computer (called serverorhost) in distance over the Internet. • The server computer is usually a dedicated computer with an FTP address to provide file transfer services. An FTP server is like a warehouse for computer files. You can store (upload) or retrieve (download) files from there.

You need to provide some information to create connection with the FTP server. The meanings of those fields are: • Profile Name • Host Name/Address • Host Type • User ID • Password • Account • Anonymous • Save Password • Initial Directories • Comment

After you provide necessary information, clicking on the OK button will establish the connection between the machine you are working on and the host. The FTP Client usually has two panes: The pane on the left displays the files on your local computer and the pane on the right displays the files on the remote computer.

Transferring files is quite straightforward: (1) choose the right folder/directory in either local machine or remote machine (2) choose the file you want to transfer (3) click on one of the direction arrows located between the panes. The above procedure is the same for upload (from local machine to remote machine) and for download (from remote machine to local machine).

Introduction T o GU Computing Facility, FTP and Web