1. Introduction To GU Computing Facility, FTP and Web
Dr. Jason C. H. Chen
Professor of MIS
School of Business Administration
Gonzaga University
Spokane, WA 99258

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

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

4. What is Technology and Why 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.

5. C: D:
my network places
Drives on Local PC

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

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

8. Windows/File 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

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

10. Barney System (I) The Barney System:
manages student accounts,
provides 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 on the Bb.

11. Barney System (II)
Transfer files between your Barney account and the drives on the computer you are working on.
Use FTP such as FileZilla (explained at the end)

12. Introducing the World Wide Web
A network is a structure linking computers together for the purpose of sharing resources such as printers and files
Users typically access a network through a computer called a host or node
A computer that makes a service available to a network is called a server
A computer or other device that requests services from a server is called a client
One of the most common network structures is the client-server network
LAN?
WAN?
MAN?

13. Introducing the World Wide Web
If the computers that make up a network are close together (within a single department or building), then the network is referred to as a local area network (LAN)
A network that covers a wide area, such as several buildings or cities, is called a wide area network (WAN)
The largest WAN in existence is the Internet
In its early days, the Internet was called ARPANET and consisted of two network nodes located at UCLA and Stanford, connected by a phone line

14. Structure of the Internet

15. Hypertext Documents
When you read a book, you follow a linear progression, reading one page after another
With hypertext, you progress through pages in whatever way is best suited to you and your objectives
Hypertext lets you skip from one topic to another
The key to hypertext is the use of hyperlinks (or links) which are the elements in a hypertext document that allow you to jump from one topic to another

16. Linear versus hypertext documents

17. Hypertext Documents, Web Servers and Web Browsers
An entire collection of linked documents is referred to as a Web site
The hypertext documents within a Web site are known as Web pages
Individual pages can contain text, audio, video, and even programs that can be run remotely
A Web page is stored on a Web server, which in turn makes it available to the network
To view a Web page, a client runs a software program called a Web browser, which retrieves the page from the server and displays it

18. Using a browser to view a Web document from a Web server

19. HTML: The Language of the Web
A Web page is a text file written in a language called Hypertext Markup Language
A markup language is a language that describes a document’s structure and content
HTML is not a programming language or a formatting language
Styles are format descriptions written in a separate language from HTML that tell browsers how to render each element. Styles are used to format your document

20. Type in the following URLs
Always use “Firefox” as the default web browser, otherwise, some errors might be occurred.

21. Four Basic HTML5 Semantic Elements
div id=“container”
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles-web1.css">
<title>Home Page for Jason Chen</title>
<meta charset="utf-8">
</head>
<body>
header
[Basic Required HTML elements]
nav
main
HTML provides new tools for improving/structuring webpage design, including semantic elements for specific types of content
footer

22. HTML5 Components (p.29) <!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href="css/styles-web1.css">
<title>Home Page for Jason Chen</title>
<meta charset="utf-8">
</head>
meta tag contains information about the data on the webpage
The meta tag designates the type of character set the browser should use, charset=“utf-8”
utf (Unicode Transformation Format) is a compressed format that allows computers to display and manipulate text.​
Utf-8 is standard for HTML5 pages and is the preferred encoding standard for and other application.

23. div id=“container”
header
nav
main
footer

24. Four Basic HTML5 Semantic Elements
div id=“container”
header
nav
main
footer

25. Your Turn … Create folder(s) on the desktop / laptop
So that you can map (copy) required files from desktop/laptop to your web folder efficiently and successfully

26. Steps before downloading web resources
Create a folder of bmis235-0x-public_html (0x stands for your section number such as bmis public_html) on c: (or d:) drive
Create a folder of css under bmis235-0x-public_html
Create a folder of images under bmis235-0x-public_html (for web2)
Create all required files (later) and save in bmis235-publich_html folder [see next two slides]

27. Files and Folders should downloaded/created on PC

28. Download all docs from Bb
See page 1 on the Web1 HW
Download the two data files:
index_template.html and
styles-web1.css
from Bb (available under Assignments & Cases  Web Design Assignments and Resources  data files for … web1) to your PC and save them in two appropriate folders.

29. available under Assignments & Cases  Web Design Assignments and Resources  data files for …  web1

30. 4. The result is shown on the next slide
1.select
2. Select files and folders
3. Select “Upload”
4. The result is shown on the next slide

31. Web Directory Structure for web1 and web2
Therefore, the directory structure on the desktop (or laptop) matches with web folder (i.e., public_html)

32. Web Repository (Folder)
What is your Web Repository?
public_html (using FileZilla to login)
along with your account
Remember that case is sensitive for all file names and folder names in ALL web page assignments. For example, index.html is different from Index.HTML
Also,
href=“css/styles-myweb.css”> is different from
href=“CSS/styles-myweb.css”>

33. main html codes should be placed here.
Figure 1. index-template.html
<!DOCTYPE html>
<!-- *****************************************************************************
Author: Jason Chen; File name: index.html (Web1)
Date: 1/25/2017
BMIS235-01
ROW: 1
Note that there is a new folder of css created in this version
**************************************************************************-->
<html lang="en">
<head> ….
<meta charset="utf-8">
</head>
<body>
<div id="container">
<br> <br> <br> <br> <br> <br> <br>
<pre> …
</pre>
<nav>
</nav> <br> <br>
<footer>
<p> For comments about my web site, please me at: <a
</a> <br>
Phone: <a href="tel: "> </a> </p> <!--Insert phone link-->
</footer>
</div>
</body>
</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

34. (cascading style sheet)
Figure 1. index.html (web1)
<!DOCTYPE html>
<!-- *****************************************************************************
Author: Jason Chen; File name: index.html (Web1)
Date: 1/25/2017
BMIS235-01; ROW: 1
Note that there is a new folder of css created in this version
*************************************************************************-->
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles-web1.css">
<title>Home Page for Jason Chen</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<a id="top"></a>
<script type="text/javascript"> document.write(Date()) </script>
<header>
<h1>Welcome to JASON CHEN's Home Page! </h1>
</header> <br> <br>
<nav>
<ul>
<li><a href="myself.pptx"> Know more about me with PowerPoint presentation </a> </li>
<li><a href="myresume.docx"> Visit my resume (MS-WORD format) </a> </li>
</ul>
</nav> <br> <br> <br> <br> <br> <br> <br>
will study in ch4
(cascading style sheet)
ul: Unordered List
li: List Item

35. How to improve it? one word Figure 1. index.html (cont.)
<main>
<pre> <b>
*******************************************************
© (your name here)
...
(your add any appropriate information here)
</b>
</pre> <br> <br> <br> <br>
<nav>
<div class="gotop">
<a href="#top">
<span style="font-size:small; color:bluewhale;">Go to the Top of the Page! </span></a>
</div>
</nav> <br> <br>
</main>
<footer>
<p> For comments about my web site, please me at:
<a </a> <br>
Phone: <a href="tel: "> </a> </p> <!--Insert phone link-->
<!-- the following is required for all assignments -->
<i> <br>This document was last updated on January 21, 2016; by Jason Chen</i>
</footer> <hr>
</body>
</html>
Go to <a id of “top”
replaced with your info.
one word
How to improve it?

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

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

38. Appendix C - Color Reference Palette (APP 29)
W3Schools:
CSS Portal:
Color Picker:
HTML Color Codes:
HTML Color Names:

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

40. The Structure of an HTML File
An HTML document is divided into two parts: the head and the body
The head element 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

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

42. 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
<!-- comment -->
Comments are useful in documenting your HTML code for yourself and others

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

44. What you should do on Web1
See Web1 assignment
1. Create the following two folders on the PC: i) a folder of bmis235-0x-public_html (0x stands for your section number such as bmis public_html) on c: (or d:) drive, and ii) another folder of css under bmis235-0x-public_html. The web design structure is shown in Figure 1.
2. Download the two data files of index_template.html and styles-web1.css from Bb (available under Assignments & Cases  Web Design Assignments and Resources data files for …  web1) to your PC and save them in two appropriate folders respectively (see Figure 4 and pptx file)
3. Create your first HTML file with the file name of index.html or open index_tempalte.html by right clicking the file then select “Open with” finally choose Notepad++ or simply select “Edit with Notepad++” (Figure 2).
a) Use Notepad ++ to create an html file (Figure 3) and save it as index.html (lower case). Note that you may download a ‘template’ (index_template.html) and add required html codes shown in Figure 3 and save the file as index.html

45. available under Assignments & Cases  Web Design Assignments and Resources  data files for …  web1

46. Major tasks for completing the Web1
3. b) It is very important to rename/save 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 repository). Please note that
i) the file extension should be .html NOT .docx neither .htm.
ii) case is sensitive for all file names and folder names in ALL web page assignments. For example, index.html is different from Index.HTML
4. Next, create the following two additional documents:
a) a powerpoint file introduces yourself (something you want to share with your friends and/or sell yourself to your future employer) and save it as myself.pptx
b) a resume file in MS-WORD format (see Figure 5) and save it as myresume.docx

47. 5. When done, copy/upload the following four files into your web repository (publich_html) using FileZilla FTP:
a) index.html, myself.pptx and myresume.docx to public_html/ directory
b) styles-web1.css (the one your downloaded) to public_html/css/ directory
(a) and (b) can be done in a single process by using FileZilla (See Step 2 in Figure 4)
6. Test your first web page:
a) invoke a Web Browser (e.g., Firefox)
b) type in your URL (the following is my URL – for teaching purpose)
or,
7. 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 pp , 123, 241, 294, or a pdf file for Validating HTML code for details)
8. What/How you should turn in: (Fail to provide me with ALL information, you will lose major points).

48. public_html [web folder]
Figure 1. Your Personal Web Page Design Structure
public_html [web folder]
images [images folder]
index.html
myself.pptx
myresume.docx
css [css folder]
styles-web1.css

49. 8. What/How you should turn in: (Fail to provide me with ALL information, you will lose major points). Notifying your instructor by uploading Web#1 message to the Blackboard (not via ). See detailed instruction on the document of “Instruction_Web_Assignments_Bb” available on the Bb. Please note that you should click “Write Submission” to enable the text editor box. Enter the following information in the “2. Assignment Submission” window:

50. What/How you should turn in
8. (cont.)
Upload Web1 to the Blackboard and make sure to enter the following information in the “2. Assignment Submission” Box :
Dr. Chen
This is my Web1 assignment
<Your Full Name> : BMIS (or BMIS235-03/05)
so that your grade will be posted correctly. .
Make the URL linkable

51. What/How you should turn in
8. (cont.)
Upload Web1 to the Blackboard and make sure to enter the following information in the “2. Assignment Submission” Box :
Dr. Chen
This is my Web1 assignment
<Your Full Name> : BMIS (or BMIS235-03/05)
so that your grade will be posted correctly. .
Make the URL linkable

52. Problem on Displaying your web page (Forbidden Message)
If you receive ‘Forbidden’ message, please do the following steps:
Step 1. Connect your account using FileZilla
Step 2. Right click on public_html
Step 3. Select ‘File Attribute on the pop-up menu
right click
select

53. Problem on Displaying your web page
Step 4. Mark ‘Execute’ on Group and Public permissions
mark

54. What happen if you are working your web assignments off campus?
FTP (FileZilla)

55. FTP - FileZilla
Open the site manager, as seen below, and use these settings for a new site: Host: barney.gonzaga.edu Server Type: SFTP - SSH File Transfer Protocol Logon Type: Normal User: [your GU username goes here] Password: [your GU password goes here]
Please note that you should have only “My Sites” section when you open “Site Manager”.
You should change the protocol from “FTP” to “SFTP” and enter your personal logon information as follows. Click connect, then you will see the main window.

56. Figure 2: How to Use FTP (FileZilla client)
Step 1: Login to your account and Invoke FileZilla client (SFTP)

57. Step 2: Select three files from your computer (on the left side) to be transferred then upload to our Web server (ie., Barney server): 1) index.html, 2) myresume.docx and 3) myself.pptx