1 / 30

Web2 and WEB/ HTML Introduction

Web2 and WEB/ HTML Introduction. Dr. Jason C. H. Chen Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 chen@ jepson. gonzaga.edu. Web#1 and Web#2. Web#1 You will learn the “ process ” of creating your first personal web page

falala
Download Presentation

Web2 and WEB/ HTML Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web2 and WEB/HTML Introduction Dr. Jason C. H. Chen Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 chen@jepson.gonzaga.edu

  2. Web#1 and Web#2 • Web#1 • You will learn the “process” of creating your first personal web page • How to submit it directly from Bb. • Web#2 • You will improve your personal web page using your “logical reasoning” and “intelligence” • html01thru html04 • Learn more from html text book and complete four additional assignments

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

  4. Drives on Local PC

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

  6. Introducing the World Wide Web • 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 • 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) MAN? WAN?

  7. Introducing the World Wide Web • 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

  8. Introducing the World Wide Web • Today the Internet has grown to include hundreds of millions of interconnected computers, cell phones, PDAs, televisions, and networks • The physical structure of the Internet uses fiber-optic cables, satellites, phone lines, and other telecommunications media

  9. Structure of the Internet

  10. The Development of the Word Wide Web • Timothy Berners-Lee and other researchers at the CERN nuclear research facility near Geneva, Switzerland laid the foundations for the World Wide Web, or theWeb, in 1989 • They developed a system of interconnected hypertext documents that allowed their users to easily navigate from one topic to another • Hypertext is a method of organizing information that gives the reader control over the order in which the information is presented

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

  12. Linear versus hypertext documents

  13. Hypertext Documents • 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 • A link may point to another section of the same document, or to another document entirely • A link can open a document on your computer, or through the Internet, a document on a computer anywhere in the world

  14. 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 Webpages • Individual pages can contain text, audio, video, and even programs that can be run remotely • A Web page is stored on a Webserver, which in turn makes it available to the network • To view a Webpage, a client runs a software program called a Webbrowser, which retrieves the page from the server and displays it

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

  16. HTML: The Language of the Web • A Web page is a text file written in a language called Hypertext Markup Language • A markuplanguage 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

  17. 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/~chen

  18. Figure 1. index.html From now on, it (your personal information) is required for ALL assignments to be added. <!-- ************************************************************** Author: Jason Chen; File name: index.html Date: 5/25/2012 BMIS235-01 ROW: 1 This portion shows COMMENTS ********************************************************** --> <!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"> <!-- css codes to be added here --> </style> </head> <body style="background-color:lightgreen;" > <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> <br /><br /> <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> CSS code one word How to improve it?

  19. <!-- the "BACKGROUND" overwrites 'background-color' --> <body style="background-color:lightgreen" text="black" link="red" vlink="blue" alink="aqua" background="images/wall.gif"> <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> ******************************************************* &copy; (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> </address> <br />This document was last updated on: <script type="text/javascript"> document.write(document.lastModified); </script> Figure 1. revised partially index.html (for Web2) Anything Else?

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

  21. 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#2 <a name=“top"> … <a href="#top"><span style="font-size: small">Go to the Top of the Page! </span></a>

  22. What you should do on Web#2 • Your job in Web#2 is to figure out ALL differences between Web#1 and Web#2 and update the existing index.html with the version of Web#2. • How? • 1) Open index.html using NotePad or NotePad++ • 2) Update index.html with A)LL changes in Web#2 • 3) Use your intelligence to find their differences

  23. Figure 2. updated index.html (for Web2) <!-- ******************************************************************************* Author: Jason Chen; File name: index.html Date: 5/25/2012 BMIS235-01 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="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"> <!-- css codes to be added here --> </style> </head> <!-- the "BACKGROUND" overwrites 'background-color' --> <body style="background-color:lightgreen" text="black" link="red" vlink="blue" alink="aqua" background=“…"> <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/> link (Unvisited color) vlink (previously linked color) alink (activated link color) See Appendix B for Color Names and Color Values CSS code Why “images/…” is added?

  24. This is required for all HTML HW • <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> . … … … <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> </address>

  25. This is required for all HTML HW <!-- the following is required for all assignments --> <br />This document was last updated on: <script type="text/javascript"> document.write(document.lastModified); </script> <hr size="3" width="100%" /> <center> <h5> … … <imgsrc="images/gcan.gif" height="30" width="30" alt="Goan logo" /> <a href="http://www.gonzaga.edu">Gonzaga</a> </h5> </center> <hr size="3" width="100%" /> </body> </html>

  26. Two major tasks for completing the Web#2 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, a) 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 or Save Link 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 i) if you do not have imagesfolder 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.

  27. H: [root directory] | public_html [web folder] index.html myself.pptx myresume.docx images [images folder] gook.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif Figure 1. Web Strructure

  28. 4. 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) • 5. What/How you should turn in: email me with the following information (Fail to provide me with ALL information, you will lose major points) a) To: chen@jepson.gonzaga.edu b) Subject: BMIS235-03 Web#2 c) Message : Dr. Chen, Hereismy Web#2 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

  29. 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) Submit the Web#2 via Blackboard. Message : Dr. Chen This ismyWeb#2assignment http://barney.gonzaga.edu/~your_userID <Your Full Name> : BMIS235-03(or BMIS235-04/05) so that your grade will be posted correctly. . Make the URL linkable

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

More Related