1. Dr. Chen, Management Information Systems (Web#2) Web1 and WEB/HTML Introduction [Learning by Doing] Dr. Jason C. H. Chen Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 chen@gonzaga.edu

2. Dr. Chen, Management Information Systems (Web#2) Attention … Always write the class & personal information on any assignments and exams For example: –Bmis235-01 (or bmis235-02) –ROW: 2 –Name: John Smith –Filename: web1.html (if needed)

3. Dr. Chen, Management Information Systems (Web#2) Learning Objectives File Systems MS Windows Barney FTP The Blackboard System

4. Dr. Chen, Management Information Systems (Web#2) Web1 and Web2 Web1 –You will learn the “process” of creating your first personal web page –How to submit it directly from Bb. Web2 –You will improve your personal web page using your “logical reasoning” and “intelligence” html01thru html08 –Learn more from html text book and complete six additional assignments

5. Dr. Chen, Management Information Systems (Web#2) Type in the following URLs http://barney.gonzaga.edu/~your_userID http://barney.gonzaga.edu/~chenta http://barney.gonzaga.edu/~chenta2 http://barney.gonzaga.edu/~chenta2 http://barney.gonzaga.edu/~chen Always use “Firefox” as the default web browser, otherwise, some errors might be occurred.

6. Dr. Chen, Management Information Systems (Web#2) http://barney.gonzaga.edu/~chenta

7. Dr. Chen, Management Information Systems (Web#2) The following page is for your web2 assignment

8. Dr. Chen, Management Information Systems (Web#2) 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.

9. Dr. Chen, Management Information Systems (Web#2) Drives on Local PC

10. Dr. Chen, Management Information Systems (Web#2) 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.

11. Dr. Chen, Management Information Systems (Web#2) 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

12. Dr. Chen, Management Information Systems (Web#2) 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

13. Dr. Chen, Management Information Systems (Web#2) 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

14. Dr. Chen, Management Information Systems (Web#2) 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 on the Bb.

15. Dr. Chen, Management Information Systems (Web#2) 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)

16. Dr. Chen, Management Information Systems (Web#2) 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?

17. Dr. Chen, Management Information Systems (Web#2) 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

18. Dr. Chen, Management Information Systems (Web#2) Structure of the Internet

19. Dr. Chen, Management Information Systems (Web#2) Check Your H: drive If you can’t see your H: drive, enter the following \\barney\myfiles then press

20. Dr. Chen, Management Information Systems (Web#2) 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

21. Dr. Chen, Management Information Systems (Web#2) Linear versus hypertext documents

22. Dr. Chen, Management Information Systems (Web#2) 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

23. Dr. Chen, Management Information Systems (Web#2) Using a browser to view a Web document from a Web server

24. Dr. Chen, Management Information Systems (Web#2) 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

25. Dr. Chen, Management Information Systems (Web#2) Type in the following URLs http://barney.gonzaga.edu/~your_userID http://barney.gonzaga.edu/~chenta http://barney.gonzaga.edu/~chenta2 http://barney.gonzaga.edu/~chenta2 http://barney.gonzaga.edu/~chen Always use “Firefox” as the default web browser, otherwise, some errors might be occurred.

26. Dr. Chen, Management Information Systems (Web#2) header nav main footer Four Basic HTML5 Semantic Elements Home Page for Jason Chen HTML provides new tools for improving/structuring webpage design, including semantic elements for specific types of content div id=“container” [Basic Required HTML elements]

27. Dr. Chen, Management Information Systems (Web#2) HTML5 Components (p.29) 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 email and other application. Home Page for Jason Chen

28. Dr. Chen, Management Information Systems (Web#2) header nav main footer div id=“container”

29. Dr. Chen, Management Information Systems (Web#2) div id=“container” header nav main footer Four Basic HTML5 Semantic Elements

30. Dr. Chen, Management Information Systems (Web#2) Steps before downloading web resources Create a folder of bmis235-0x-public_html (0x stands for your section number such as bmis235-03-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)

31. Dr. Chen, Management Information Systems (Web#2) 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  web1) to your PC.

32. Dr. Chen, Management Information Systems (Web#2) available under Assignments & Cases  Web Design Assignments and Resources  web1

33. Dr. Chen, Management Information Systems (Web#2) Web Repository What is your Web Repository? public_html under H: Drive 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

34. Dr. Chen, Management Information Systems (Web#2) <!-- ***************************************************************************** Author: Jason Chen; File name: index.html (Web1) Date: 1/25/2016 BMIS235-01 ROW: 1 Note that there is a new folder of css created in this version **************************************************************************--> …. … For comments about my web site, please e-mail me at: chen@gonzaga.edu Phone: 509-313-3421 Figure 1. index-template.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

35. Dr. Chen, Management Information Systems (Web#2) <!-- ***************************************************************************** Author: Jason Chen; File name: index.html (Web1) Date: 1/25/2016 BMIS235-01; ROW: 1 Note that there is a new folder of css created in this version *************************************************************************--> Home Page for Jason Chen document.write(Date()) Welcome to JASON CHEN's Home Page! Know more about me with PowerPoint presentation Visit my resume (MS-WORD format) Figure 1. index.html (web1) ul: Unordered List li: List Item will study in ch4 (cascading style sheet)

36. Dr. Chen, Management Information Systems (Web#2) ******************************************************* © (your name here)... (your add any appropriate information here)... ******************************************************* Go to the Top of the Page! For comments about my web site, please e-mail me at: chen@gonzaga.edu Phone: 509-313-3421 This document was last updated on January 21, 2016; by Jason Chen Figure 1. index.html (cont.) Go to <a id of “top” How to improve it? one word replaced with your info.

37. Dr. Chen, Management Information Systems (Web#2) 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 tag, and use the href attribute to identify the link target A link’s content is not limited to text Know more about me with PowerPoint presentation Visit my resume (MS-WORD format)

38. Dr. Chen, Management Information Systems (Web#2) 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 … Go to the Top of the Page!

39. Dr. Chen, Management Information Systems (Web#2) Appendix C - Color Reference Palette (APP 29) W3Schools: www.w3schools.com/tags/ref_colorpicker.asp CSS Portal: www.cssportal.com/css3-color-names/ Color Picker: www.colorpicker.com/ HTML Color Codes: http://html-color-codes.info/ HTML Color Names: http://html-color-codes.info/color- names/ http://html-color-codes.info/color- names/

40. Dr. Chen, Management Information Systems (Web#2) 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

41. Dr. Chen, Management Information Systems (Web#2) 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

42. Dr. Chen, Management Information Systems (Web#2) 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

43. Dr. Chen, Management Information Systems (Web#2) 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 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

44. Dr. Chen, Management Information Systems (Web#2) 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: content in which is the opening tag is the closing tag A one-sided tag contains no content; general syntax for a one-sided tag: HTML allows you to enter element names (not file names or folder names) in either uppercase or lowercase letters

45. Dr. Chen, Management Information Systems (Web#2) What you should do on Web1 See Web1 assignment How? 1. Create a new folder of css under public_html directory. 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  web1 ) to your PC. 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

46. Dr. Chen, Management Information Systems (Web#2) available under Assignments & Cases  Web Design Assignments and Resources  web1

47. Dr. Chen, Management Information Systems (Web#2) 3. b) 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 4) and save it as myresume.docx Major tasks for completing the Web1

48. Dr. Chen, Management Information Systems (Web#2) 5. When done, copy/transfer the following four files into your web repository (publich_html) (i.e.,, either in H: drive (on campus) or using FileZilla FTP (off campus)): a) index.html, myself.pptx and myresume.docx to public_html directory b) styles-web1.css (the one your downloaded) to public_html/css/ 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) http://barney.gonzaga.edu/~chenta2 or, http://barney.gonzaga.edu/~chenta2 http://barney.gonzaga.edu/~your_userID 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. 67-70, 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).

49. Dr. Chen, Management Information Systems (Web#2) H: [root directory] or Your User_ID | public_html [web folder] index.html myself.pptx myresume.docx css [css folder] styles-web1.css Figure 1. Your Personal Web Page Design Structure images [images folder]

50. Dr. Chen, Management Information Systems (Web#2) 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 email). 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. Eenter the following information in the “2. Assignment Submission” window:

51. Dr. Chen, Management Information Systems (Web#2) 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 http://barney.gonzaga.edu/~your_userID : BMIS235-02 (or BMIS235-03/05) so that your grade will be posted correctly.. Make the URL linkable

52. Dr. Chen, Management Information Systems (Web#2) 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. Dr. Chen, Management Information Systems (Web#2) Problem on Displaying your web page Step 4. Mark ‘Execute’ on Group and Public permissions mark

54. Dr. Chen, Management Information Systems (Web#2) What happen if you are working your web assignments off campus? FTP (FileZilla)

55. Dr. Chen, Management Information Systems (Web#2) 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. Dr. Chen, Management Information Systems (Web#2) Figure 2: How to Use FTP (FileZilla client) Step 1: Login to your account and Invoke FileZilla client (SFTP)

57. Dr. Chen, Management Information Systems (Web#2) 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

58. Dr. Chen, Management Information Systems (Web#2) FileZilla Client tutorials: http://www.youtube.com/watch?v=Wtqq1Mn 1ltA (15:39) http://www.youtube.com/watch?v=Wtqq1Mn 1ltA

59. Dr. Chen, Management Information Systems (Web#2) End of Web1