Dr. Chen, Management Information Systems - HTML Chapter 1: Introduction to HTML, XHTML, and CSS Jason C. H. Chen, Ph.D. Professor of MIS School of Business Administration Gonzaga University Spokane, WA

Dr. Chen, Management Information Systems - HTML 2 Chapter Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms Describe the types and purposes of Web sites Discuss Web browsers and identify their purpose Define Hypertext Markup Language (HTML) and its associated standards used for Web development Discuss the use of Cascading Style Sheets (CSS) in Web development Define the Document Object Model (DOM) and describe its relationship to HTML 2

Dr. Chen, Management Information Systems - HTML 3 Chapter Objectives (cont.) Define Extensible Hypertext Markup Language (XHTML) and describe its relationship to HTML Identify tools used to create HTML documents Describe the five phases of the Web development life cycle Describe the different methods of Web site design and the purpose of each Web site structure Discuss the importance of testing throughout the Web development life cycle Explain the importance of being an observant Web user 3

Dr. Chen, Management Information Systems - HTML 4 Type the following URLs rfight.html rfight.html 4

Dr. Chen, Management Information Systems - HTML 5 What you will learn from HTML#1 Web#1 –You will learn the “process” of creating your first personal web page Web#2 –You will improve your personal web page using your “logical reasoning” and “intelligence” html01.. html04 –All resources for html01 thru html04 will be saved different from what you saved for your personal web page. –Why?

Dr. Chen, Management Information Systems - HTML H: [root directory] | public_html [web folder] index.html myself.pptx myresume.docx images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif html01 [folder for HTML#1] images [images folder] hungerfightlogo.jpg myhungerfight.html For html01 What’s new here? How do you create it? The following is the Directory Structure for HTML#1 assignment

Dr. Chen, Management Information Systems - HTML 7 7 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.

Dr. Chen, Management Information Systems - HTML 8 What Is the Internet? The Internet is a worldwide collection of computer networks that links billions of computers used by businesses, government, educational institutions, organizations, and individuals using modems, phone lines, television cables, satellite links, fiber-optic connections, and other communications devices and media A network is a collection of two or more computers that are connected to share resources and information The Internet backbone is a collection of high-speed data lines that connect major computer systems located around the world An Internet Service Provider (ISP) is a company that has a permanent connection to the Internet backbone 8

Dr. Chen, Management Information Systems - HTML 9 What Is the Internet? 9

Dr. Chen, Management Information Systems - HTML 10 What Is the World Wide Web? The World Wide Web, also called the Web, is the part of the Internet that supports multimedia and consists of a collection of linked documents Hypertext Transfer Protocol (HTTP) is a set of rules for exchanging text, graphics, sound, video, and other multimedia files Web pages are linked documents, or pages of information, on the Web A Web site is a related collection of Web pages that is created and maintained by an individual, company, educational institution, or other organization A home page is the first document users see when they access a Web site 10

Dr. Chen, Management Information Systems - HTML 11 What Is the World Wide Web? 11

Dr. Chen, Management Information Systems - HTML 12 Web Servers Web pages are stored on a Web server, or host, which is a computer that stores and sends (serves) requested Web pages and other files Publishing is copying Web pages and other files such as graphics and audios to a Web server 12

Dr. Chen, Management Information Systems - HTML 13 Web Site Types and Purposes An Internet site, also known as a Web site, is a site generally available to the public An intranet is a private network that uses Internet technologies to share company information among employees An extranet is a private network that uses Internet technologies to share business information with others Electronic commerce (e-commerce) is the buying and selling of goods and services on the Internet 13

Dr. Chen, Management Information Systems - HTML 14 Internet, Intranet and Extranet: Web Site Types and Purposes

Dr. Chen, Management Information Systems - HTML 15 Web Site Types and Purposes 15

Dr. Chen, Management Information Systems - HTML 16 Web Browsers A Web browser, also called a browser, is a program that interprets and displays Web pages and enables you to view and interact with a Web page –Microsoft Firefox, Mozilla Firefox, and Apple Safari –What is the first web browser? –Answer: Mosaic A Uniform Resource Locator (URL) is the address of a document or other file accessible on the Internet – A hyperlink, also called a link, is an element used to connect one Web page to another Web page that’s located on the same server or used to link Web pages located on a different Web server located anywhere in the world

Dr. Chen, Management Information Systems - HTML 17 Web Browsers 17

Dr. Chen, Management Information Systems - HTML 18 What Is Difference Between a Client and a Server? Client & Server Computers 18

Dr. Chen, Management Information Systems - HTML 19 Linking Internal Databases to the Web DATABASE TRENDS N 19

Dr. Chen, Management Information Systems - HTML 20 Web-Based Client/Server Database Architecture Network Web server Database Server Web Browser 5. Retrieved data 4. Data query 7. Data-based Web page 8. Data-based Web page 1. Request for data-based Web page 6. Retrieved data 3. Data query 2. Request for data-based Web page Legend Communications Between Web browser And Web server Communications Between Web server And database server 20

Dr. Chen, Management Information Systems - HTML 21 What Is Hypertext Markup Language? Web pages are created using Hypertext Markup Language (HTML), which is an authoring language used to create documents for the World Wide Web HTML uses a set of special instructions called tags or markup to define the structure and layout of a Web document and specify how the page is displayed in a browser HTML is platform independent, meaning you can create, or code, an HTML file on one type of computer and then use a browser on another type of computer to view that file as a Web page 21

Dr. Chen, Management Information Systems - HTML 22 What Is Hypertext Markup Language? 22

Dr. Chen, Management Information Systems - HTML 23 HTML Elements 23

Dr. Chen, Management Information Systems - HTML 24 HTML Coding Practices 24

Dr. Chen, Management Information Systems - HTML 25 A Simple Table and HTML Structure of a Table The layout of a graphical table two rows two columns beginning of the table structure first row of two in the table end of the table structure Second row of two in the table

Dr. Chen, Management Information Systems - HTML 26 A Simple Table and HTML Structure of a Table The layout of a graphical table two rows two columns beginning of the table structure first row of two in the table end of the table structure table cells You do not need to indent the tags or place them on separate lines, but you may find it easier to interpret your code if you do so. After the table structure is in place, you’re ready to add the text for each cell. Second row of two in the table First Cell Second Cell Third Cell Fourth Cell We will study more about how to create tables in chapter 4.

Dr. Chen, Management Information Systems - HTML 27 HTML Versions HTML has gone through several versions, each of which expands the capabilities of HTML The most recent version of HTML is HTML 4.01, although most browsers still support HTML versions 3.2 and

Dr. Chen, Management Information Systems - HTML 28 Document Object Model (DOM) Document Object Model (DOM) describes a combination of HTML tags, CSS, and a scripting language such as JavaScript DOM allows JavaScript and other languages to manipulate the structure of the underlying document to create interactive, animated Web pages Have you learned (or implemented) any?

Dr. Chen, Management Information Systems - HTML 29 Cascading Style Sheets Cascading Style Sheets (CSS) allows you to specify the style for an element within a single Web page or throughout an entire Web site We start using CSS in Chapter 2 and will learn more in chapter 7. See next slide for CSS example

Dr. Chen, Management Information Systems - HTML Figure 2. updated index.html (for Web2) <!-- ******************************************************************************* Author: Jason Chen; File name: index.html Date: 5/25/2012 BMIS ROW: 1 Note that there is an image folder (images) created in this version This portion shows COMMENTS ********************************************************************************** --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Home Page for Jason Chen <!-- css codes to be added here --> document.write(Date()) Welcome to JASON CHEN's Home Page! link (Unvisited color) vlink (previously linked color) alink (activated link color) Partial codes for Web#2 CSS code

Dr. Chen, Management Information Systems - HTML 31 Extensible Hypertext Markup Language (XHTML) Extensible Markup Language (XML) is a markup language that uses tags to describe the structure and content of a document, not the format Extensible Hypertext Markup Language (XHTML) is a reformulation of HTML formatting so it conforms to XML structure and content rules 31

Dr. Chen, Management Information Systems - HTML 32 Extensible Hypertext Markup Language (XHTML) 32

Dr. Chen, Management Information Systems - HTML 33 Tools for Creating HTML Documents A text editor (e.g., Notepad or Notepad++) is a program that allows a user to enter, change, save, and print text, such as HTML An HTML text editor is a program that provides basic text editing functions, as well as more advanced features such as color-coding for various HTML tags, menus to insert HTML tags, and spell checkers An HTML object editor, such as Eiffel Software object editor, provides the additional functionality of an outline editor that allows you to expand and collapse HTML objects and properties, edit parameters, and view graphics attached to the expanded objects A WYSIWYG editor is a program that provides a graphical user interface that allows a developer to preview the Web page during its development 33

Dr. Chen, Management Information Systems - HTML 34 Tools for Creating HTML Documents Fig hungerfight html file 34

Dr. Chen, Management Information Systems - HTML <!-- File name: greenhome.html Author: Jason Chen Date: 5/25/2012 BMIS235-01, Row No.: 2 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Hunger Fight Fight Against World Hunger Our school and schools around the world have recently joined forces to fight against world hunger. The office for the Fight Against World Hunger team is located next to the bookstore. You can drop off food and money donations there. We also have donation drop-off locations at participating grocery stores. See the list of stores as well as additional information on the bulletin board outside our team office. What you can do to help: Join the school's Fight Against World Hunger team with a $10 donation Buy requested food at participating grocery stores and leave at drop-off locations Volunteer to collect money and donations around the community Fig (b) Create myhungerfight.html using Notepad (basic version) Required for all html HWs 35

Dr. Chen, Management Information Systems - HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Hunger Fight Fight Against World Hunger Our school and schools around the world have recently joined forces to fight against world hunger. The office for the Fight Against World Hunger team is located next to the bookstore. You can drop off food and money donations there. We also have donation drop-off locations at participating grocery stores. See the list of stores as well as additional information on the bulletin board outside our team office. What you can do to help: Join the school's Fight Against World Hunger team with a $10 donation Buy requested food at participating grocery stores and leave at drop-off locations Volunteer to collect money and donations around the community This document was last updated on: document.write(document.lastModified); Fig (b) Create myhungerfight.html using Notepad (final version) What is difference with this code [line] and previous one? Required for all html HWs

Dr. Chen, Management Information Systems - HTML Fig (a) hungerfight.html using Notepad++ 37

Dr. Chen, Management Information Systems - HTML 38 Creating an HTML Document It is a good idea to plan out a Web page before you start coding Draw a planning sketch or create a sample document using a word processor Preparatory work can weed out errors or point to potential problems

Dr. Chen, Management Information Systems - HTML 39 Systems Development Lifecycle (SDLC) 39

Dr. Chen, Management Information Systems - HTML 40 Web Development Life Cycle 40

Dr. Chen, Management Information Systems - HTML 41 An Example: Creating an HTML Document

Dr. Chen, Management Information Systems - HTML 42 Web Development Organizational Standards 42

Dr. Chen, Management Information Systems - HTML 43 Web Site Design and Development – (1 of 5) A linear Web site structure connects Web pages in a straight line 43

Dr. Chen, Management Information Systems - HTML 44 Web Site Design and Development - (2 of 5) A hierarchical Web site structure connects Web pages in a tree-like structure 44

Dr. Chen, Management Information Systems - HTML 45 A webbed Web site structure has no set organization Web Site Design and Development – (3 of 5) 45

Dr. Chen, Management Information Systems - HTML 46 Web Site Design and Development - (4 of 5) A broad Web site is one in which the home page is the main index page, and all other Web pages are linked individually to the home page 46

Dr. Chen, Management Information Systems - HTML Web Site Design and Development - (5 of 5) A deep Web site is one that has many levels of pages, requiring the user to click many times to reach a particular Web page 47

Dr. Chen, Management Information Systems - HTML 48 Web Site Testing Usability is the measure of how well a product, such as a Web site, allows a user to accomplish his or her goals Usability testing is a method by which users of a Web site or other product are asked to perform certain tasks in an effort to measure the product’s ease-of-use and the user’s perception of the experience Compatibility testing is done to verify that the Web site works with a variety of browsers and browser versions Stress testing determines what happens on your Web site when greater numbers of users access the site

Dr. Chen, Management Information Systems - HTML 49 Web Site Testing (Usability) See lab1-1.docx (available on \datafiles\ch01\) 49

Dr. Chen, Management Information Systems - HTML 50 Chapter Summary Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms Describe the types and purposes of Web sites Discuss Web browsers and identify their purpose Define Hypertext Markup Language (HTML) and its associated standards used for Web development Discuss the use of Cascading Style Sheets (CSS) in Web development Define the Document Object Model (DOM) and describe its relationship to HTML 50

Dr. Chen, Management Information Systems - HTML 51 Chapter Summary (cont.) Define Extensible Hypertext Markup Language (XHTML) and describe its relationship to HTML Identify tools used to create HTML documents Describe the five phases of the Web development life cycle Describe the different methods of Web site design and the purpose of each Web site structure Discuss the importance of testing throughout the Web development life cycle Explain the importance of being an observant Web user 51

Dr. Chen, Management Information Systems - HTML 52 HWs HTML assignment –Do “hungerfight.html” as illustrated on page 13

Dr. Chen, Management Information Systems - HTML HW Complete hungerfight web page (p. 13) and the result is shown below. required for all HTML HWs 53

Dr. Chen, Management Information Systems - HTML 54 HTML#1 HWs HTML#1 assigned HW (type the following URL)

Dr. Chen, Management Information Systems - HTML <! fungerfight Web Page File name: myhungerfight.html Author: Jason Chen Date: 5/28/2012 Text page: HTML, p. 13 (Figure 1-10 (b) *** Note that there is an “images” folder (images) created in this version ----> Our school and schools around the world have recently joined forces to fight against world hunger. The office for the Fight Against …. What you can do to help:... Modify and complete all missing HTML statements. 55

Dr. Chen, Management Information Systems - HTML <! Chemistry Classes Web Page File name: myhungerfight.html Author: Jason Chen Date: 1/28/2013 Text page: HTML, p.42 Figure 1-33 *** Note that there is an “images” folder (images) created in this version ----> Welcome to the Robert Service High School Chemistry Web page. Read below to learn about our classes and policies. Chemistry Classes... Class Policies Modify and complete all missing HTML statements. sample 56

Dr. Chen, Management Information Systems - HTML 57 What is the next? Create a new folder ‘html01’ under public_html Create another new folder ‘images’ under html01 All HTML tutorials and homework should be saved under an appropriate folder such as html01 for chapter01 All image files for HTML should be saved under this images (i.e., public_html/html01/images/), this is not the images right under public_html) Copy/download appropriate data files and save it under html01 folder. Open it with Notepad and save it as myhungerfight.html. Copy/download all three image files and save them under html01/images/ folder. Modify/change your myhungerfight.html exactly the same as shown on the handout. You are strongly recommended to create same directory structure on your PC From now on, employ all what you learned from HMTL texts and enhance your personal web page (i.e., index.html) 57

Dr. Chen, Management Information Systems - HTML <!-- hungerfight Web Page File name: myhungerfight.html Author: Jason Chen Date: 5/28/2012 Text page: HTML, p.13 Note that there is an “images” folder (images) created in this version --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Hunger Fight … Fig (b) Create myhungerfight.html using Notepad We will complete all these command lines File name: myfungerfight.html 58

Dr. Chen, Management Information Systems - HTML Fight Against World Hunger Our school and schools around the world have recently joined forces to fight against world hunger. The office for the Fight Against World Hunger team is located next to the bookstore. You can drop off food and money donations there. We also have donation drop-off locations at participating grocery stores. See the list of stores as well as additional information on the bulletin board outside our team office. What you can do to help: Join the school's Fight Against World Hunger team with a $10 donation Buy requested food at participating grocery stores and leave at drop- off locations Volunteer to collect money and donations around the community … What is different from the text (p.13)? The text will be displayed if the image file can’t be found 59

Dr. Chen, Management Information Systems - HTML This document was last updated on: document.write(document.lastModified); Required for ALL html HWs 60

Dr. Chen, Management Information Systems - HTML H: [root directory] | public_html [web folder] index.html myself.pptx myresume.docx images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif html01 [folder for HTML#1] images [images folder] hungerfightlogo.jpg myhungerfight.html For html01 What’s new here? How do you create it? The following is the Directory Structure for HTML#1 assignment 61

Dr. Chen, Management Information Systems - HTML H: [root directory] | public_htm [web folder] | images [images folder] hungerfightlogo.jpg html01 [folder for HTML#1] index.html myself.pptx myresume.docx Images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif … … images [images folder] All other *.gif image files All other *.html files html02 [folder for HTML#2] images [images folder] All other *.jpg image files All other *.html files html08 [folder for HTML#8] For your personal Web Page The following is the Directory Structure for All HTML Assignments myhungerfight.html

Dr. Chen, Management Information Systems - HTML 63 Test the HTML ght.html fight.html

Dr. Chen, Management Information Systems - HTML HW Complete hungerfight web page (p. 13) and the result is shown below. required for all HTML hws 64

Dr. Chen, Management Information Systems - HTML 65 What/How you should turn in for HTML#1 1.Download data files, hungerfightlogo.jpg, under html01 2.What/How you should turn in: me with the following information (Fail to provide me with ALL information, you will lose major points) a) To: b) Subject: BMIS HTML#1 c) Message : Dr. Chen at the end of the message line so that I can record/grade your homework. 65