1. IS 556 Fall 20031 Web Page Design/Development David A. Lash 630.979.5940 dlash@condor.depaul.edu Week 1 - Introduction David Lash

2. 2 Introduction zWhat this course is about: yCreating, designing, publishing web pages xWeb design basics with HTML: Controlling text formatting Controlling fonts & adding color Creating links Tables and frames xScripting –Client side scripting –Server side scripting yCourse web site (with syllabus links) http://condor.depaul.edu/~dlash/extra/Webpage/index.html http://condor.depaul.edu/~dlash/extra/Webpage/index.html

3. David Lash 3 Today’s Agenda zWhat we will talk about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document. 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

4. David Lash 4 What is the Internet? zThe Federal Networking Council (FNC) agrees "Internet" refers to the global information system that xis logically linked together by a globally unique address space based on the Internet Protocol (IP) xsupports communications using the Transmission Control Protocol/Internet Protocol (TCP/IP) suite or its subsequent extensions/follow-ons, and/or other IP-compatible protocols; and xprovides, uses or makes accessible, either publicly or privately, high level services layered on the communications and related infrastructure described herein. Services such as web pages, email, chat, bulletin boards TCP/IP protocol is the standard protocol for moving Internet data! All systems on Internet share a common addressing method (called IP addresses) For Example 135.14.12.22. E.g., condor.depaul.edu is really 140.192.1.6. Try http://140.192.1.6/~dlash/http://140.192.1.6/~dlash/

5. David Lash 5 The Amazing Journey of Internet Data - (Steps to access a distant web page (e.g, www.ibm.com)) 1. You sit down at your PC, say in Chicago Il and type in a web address (e.g., www.ibm.com) 2. You are connected to ISP via via modem, DSL or corporate network. Original diagram can be found at: http://navigators.com/internet_architecture.html

6. David Lash 6 3. Your “request” may travel over a variety of transmission methods (depending how you are set up). There may be a set of telephone switches (or cable network) between you and your ISP’s physical location. 4. Your ISP has a set of incoming lines to receive all calls to provide access. Your ISP likely has a local email server (to receive and hold your email) and maybe even a Web Server machine (to allow you tp publish pages) The Amazing Journey of Internet Data – (Getting to your ISP).

7. David Lash 7 5. Since your web page “request” is on a distant web server, your request goes over the Internet backbone. The remote host probably plugs in via his/her ISP POP over here (just like your access does). 6. The Web Page your access might be physically stored on this machine. Since the backbone is world wide might be on the other side of the world. “Content” is stored on the hosting machine. Might be video, audio, web page content. The Amazing Journey of Internet Data – (Getting to your ISP). More information on how the Internet works? http://www22.verizon.com/about/community/learningcenter/articles/displayarticle1/0,1727,1024z3,00.html

8. David Lash 8 Resolving Web Addresses -When type in address at top of browser, you provide a logical Universal Resource Locator (URL) address. -The URL maps to a specific web server address and file to access on that web server http://www.depaul.edu/~dlash/mystuff.html The protocol to use to send the data. The http or hypertext transfer protocol is most common for WWW pages. Domain name that maps to the address of a specific computer (or set or computers). View pages under dlash user id. Get the file mystuff.html

9. David Lash 9 More Web Address Examples

10. David Lash 10 A Greatly Simplified view (of access a web page on a web server). A web server is a computer on the network that holds files (often for more than 1 user). It listens for http file requests (on the internet) and responds to them.

11. David Lash 11 How Pages Move Between Browser and Webserver 1. 1. Check the browser disk area (known as cache) to see if file has been recently viewed. 2. If file not in browser then translate the URL to a physical web (IP) address and request file from Web Server. Check Cache Client Machine Web Server 2. 3. 3. Transfer file from Web Server back to client machine.

12. David Lash 12 How Pages Move Between Browser and Webserver – (The bottom line) zIf you visits a page now and revisit in 15 minutes (or even tomorrow) your page might be coming from cache (and not be the “freshest” content). yE.g., visit http://webwizard.awl.com/~phppgm/index.php note how the counter (on bottom) does not change if you hit refresh.http://webwizard.awl.com/~phppgm/index.php zTwo ways to ensure getting content from web server and not from cache yHold down the “shift” button and then hit refresh (or reload) yDelete all the caches file from browser cache. xFrom IE goto tools->temporary internet files ->Delete files xFrom Netscape Edit->preferences->Advanced->Cache->Clear Cache

13. David Lash 13 Introduction zWhat we will talk about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document. 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

14. David Lash 14 Ok So What Is HTML? zUp until the late 1980s, people used Internet for email, send/received data and bulletin board services. yWas not an easy way to advertise and access documents and data at a site. zTim Berners-Lee created a simple language for display documents and links yWrote a tool (early browser) for displaying the language yThis language called HyperText Markup Language (HTML). zHTML grew quickly especially with the development of the Mosiac web browser yMosiac eventually became Netscape and was available for free download. yHTML eventually became standardized and is now controlled by the world wide web consortium (http://www.w3.org)

15. David Lash 15 What Really Is HTML? zHyperText Markup Language - Basically a set of TAGS that you add to your text yHTML tells browsers how to display and format your text yFor example, Hello This Would be Bold But not this. zWhy is it used so extensively? y It is simple to use and understand y It provides ways to include lots of stuff (e.g., text, graphics, sounds, links) yIt is the STANDARD yIts creation is one of the big reasons the WWW became popular. HTML tags are enclosed in <>. For almost all tags there is a start and ending tag.

16. David Lash 16 HTML? Why Not Just Use … zFront-page or Dreamweaver or Composer or … y“HTML-editors” basically generate HTML xSometimes also generate javascript, and flash and a few other things. xThere main advantages are that they provide a WYSIWYG (What You See Is What You Get) display. yLearn the tool and you still don’t understand how pages are displayed or how WWW works xUsually web authors still need to dip into the HTML to get precise design, or to get something to work yLearn HTML and you can figure out these tools.

17. David Lash 17 OK So What Is This HTML? zHTML is based using tags. HTML tags y Are Enclosed in <>  (e.g.,,, ) yUsually have a start and end tag (e.g., hello world yAre case insensitive, so the following are the same My country tis of thee Makes hello bold but world is not

18. David Lash 18 HTML Overview - II zA set of TAGs are required of all documents... zStore in a file with either htm or html suffix yE.g., mypage.html or mypage.htm or homepage.html Starts and ends your entire HTML document Defines the “header” section for your HTML document Defines the main body section for your HTML document WARNING: DO NOT USE SPACES IN FILENAMES!!!! For example DO NOT call your file “my page.html”. It might work on a PC but will NOT work on UNIX Web Server. WARNING2: Be careful with capitals. Try to use all lower case. For example “mypage.html” NOT MyPage.html.

19. David Lash 19 HTML Overview - Example Mypage Welcome to Website Design. Stuff you write here becomes your HTML document. Indicates start and end of HTML document The header section of document This title appears in the upper left hand corner of browser. Not in the body of the document Inside the … tags is the main portion of your document. Try it now. Copy this text to note pad, save the file and then display the file in IE or Netscape. Note how new lines are ignored when you display the HTML document.

20. David Lash 20 Steps To Create HTML Document & Display 1. From your PC goto S tart->run enter n otepad 2. Enter your tags and document 3. From notepad window, goto f ile->saveas 4. Enter a filename with HTML suffix (SECOND WARNING!! No spaces or caps please!). 5. Start Netscape (or IE). 6. From Netscape, goto f ile->open page -> choose file. (Find the file you just saved and display it!)

21. David Lash 21 But how do I publish that? 1.Get an account on a webserver. yDo that today, ask lab administrator for an email account. Will create space on students.depaul.edu 2. Create an html file locally on PC. (See previous steps) yTest out your file locally. Make sure it displays right locally. 3. Copy your file from your PC to the Web server yWe will use FTP (See next slide). 4. View your file over the Internet.  E.g., If your file was myfile.html and userid jsmith Then you would access using the following web address : http://students.depaul.edu/~jsmith/myfile.html Web server name A tilde ‘~’ followed by your user id (email handle) The file name you copied over.

22. David Lash 22 Publishing On The Web zUse FTP to copy files from your PC to the Web server Note: There are other ways to get your pages on a web server. Many developers telnet directly into the web server and develop there.

23. David Lash 23 Publishing On The Web - II zPlace the copied files into the public_html directory Your pages must be in this directory (or you won’t see them on the Internet)!

24. David Lash 24 Publishing On The Web - III zDestination Directory - put file in public_html zHomepage - must be called index.html zWebServer - students.depaul.edu zSpace Available - 2 MB zYour URL - students.depaul.edu/~yourlogin zUse FTP - Copy using FTP.

25. David Lash 25 Steps To Publish Files From DePaul Lab 1. Start->Internet Applications->FTP y(Start->programs->depaul online->ftp from at home with DePaul Online) 2. Fill in: yHost Name: students.depaul.edu yUser Id: your DePaul userid yPassword: your DePaul password 3. From FTP window goto window->tile horizontally 4. Double click public_html on WEBSERVER side (One side is PC files the other is remote system (or web server) 5. On PC side find the file you want to publish (by clicking through files/directories) 6. Drag the file(s) from PC side to Web server side! (Select and hold right mouse button to drag.)

26. David Lash 26 Starting up FTP Enter your webserver name: students.depaul.edu Enter your web server userid: dlash Enter your web server password: apb73a1ks Click OK when your done 1. Start->Internet Applications->FTP (Start->programs->depaul online->ftp from at home with DePaul Online) 2. Fill in: Host Name: students.depaul.edu User Id: your DePaul userid Password: your DePaul password

27. David Lash 27 How to tell if your connected? On this screen I entered the wrong password. Note error message here and that this side is blank. Successful connection! Note the status here and the PC files are here and Web server files are here.

28. David Lash 28 More on FTP Main Screen. PC Files and directories Current directory on PC Current directory on Web server Web server Files and directories

29. David Lash 29 Navigating FTP Navigate to location of file on PC and highlight the file you want to copy Note the different directory name Navigate to public_html directory (by double clicking folder name). Note the new folder location. IT IS VITAL THAT YOU COPY TO public_html

30. David Lash 30 Copy The File Highlight file and then hit the -> button to copy from PC side to Web server side SECOND WARNING: Again make sure you are in public_html directory on web server You can click “date” to sort by date and then file you transferred should appear at the top. ANOTHER WARNING LOOK AT THE FILE NAME. MAKE SURE NO CAPITALS OR SPACES

31. David Lash 31 WARNING! FTP Timeout after 2-3 mins Unfortunately, if you don’t use the FTP screen for about 2-3 minutes, your connection will timeout If you get this you must click connect or close and then resign in again.

32. David Lash 32 Outline zWhat we will talk about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document. 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

33. David Lash 33 We already saw... Mypage Welcome to Website Design Indicates start and end of HTML document The header section of document Appears in upper left hand corner of browser window This is where most of TAGS usually are and text your displaying (w/i BODY tags).

34. David Lash 34 HTML Only Responds To Tags zBlank spaces without tags are ignored: Formatting a WWW Page Welcome To Exploring The Internet Hopefully you will find this course to be informative and interesting. I hope that you have fun while learning about the Internet. But the class does have some work to do. http://condor.depaul.edu/~dlash/extra/Webpage/examples/02HTMLsimp2.html These spaces are ignored.

35. David Lash 35 HTML Only Responds To Tags The Tag is used to indicate comment : <!-- ! Example of a Basic HTML Program ! Written by Dave Lash For Web Page Design ! To demonstrate the use of comments. --> THIS is a sample web Page Welcome To Exploring The Internet http://www.depaul.edu/~dlash/extra/Webpage/examples/02HTMLSimpWComments.html These comments are ignored.

36. David Lash 36 Paragraph and Break Tags Two of the most basic tags are: …… -- Causes a new paragraph …… -- Causes a line break …… -- Draws a solid horizontal line Actually you can get away without ending these tags. The browsers know what you mean.

37. David Lash 37 Paragraph and Break Tags Web Page With "P" Tag Welcome To Exploring The Internet Hopefully you will find this course interesting. In this course, you will develop a broad knowledge of the Internet This class meets at night. CLASS 1 - Introduction To The Internet CLASS 2 - Email CLASS 3 - HTML http://condor.depaul.edu/~dlash/extra/Webpage/examples/02HTMLSimpWComments.html Create a new paragraph Creates a line Line Break Note > 1 tag per line

38. David Lash 38 Using Arguments with Tags Many tags also have optional arguments: : z ……… -- Causes a new paragraph yalign=center|right|left yaligns the text to the center, right or left. E.g., z …….. --- Draws a solid horizontal line yalign=center|left|right - sets horizontal alignment ynoshade - Display as a solid (noshaded) bar ysize=number - thickness of rule in pixels ywidth=number or % - Length of rule in pixels or % of screen. yE.g.,

39. David Lash 39 Paragraph and Break Tags Web Page With "P" Tag Welcome To Exploring The Internet Hopefully you will find this course interesting. In this course, you will develop a broad knowledge of the internet This class meets at night. CLASS 1 - Introduction To The Internet CLASS 2 - Email CLASS 3 - HTML http://condor.depaul.edu/~dlash/extra/Webpage/examples/02paraparmeter.html Create a left justified paragraph Center it Solid HR that’s 30% of screen & 10 pixels

40. David Lash 40 Paragraph and Break Tags Headers are used to create section titles - not the tag ……… -- First Level Header ……. -- Second Level …….. --- Third Level …….. --- Fourth Level …….. --- Fifth Level

41. David Lash 41 Header Example THIS is a sample web Page INTRODUCTION Welcome To Website Design. Hopefully you will find this course to be informative and interesting. Overview In this course, you will develop a broad knowledge of the Internet technology. Meeting Times The class will meet every other week on Thursday's (naperville) or Saturday's (O'hare) Dates and Times CLASS 1 Introduction To The Internet CLASS 2 Email CLASS 3 HTML http://condor.depaul.edu/~dlash/extra/Webpage/examples/02headers.html H1 is the largest header. It will cause line break and be large and bold H2 and H3 will be smaller

42. David Lash 42 Header Error Example THIS is a sample web Page INTRODUCTION Welcome To Exploring The InternetHopefully you will find this course to be informative and interesting. I hope that you have fun while learning about the Internet. Overview In this course, you will develop a broad knowledge of the Internet technology and understand how it can be useful to work personal and work life. Meeting Times The class will meet every other week on Thursday's (naperville) or Saturday's (O'hare) <!-- Opps I forgot to close off the H2 tag! --> Dates and Times CLASS 1 - Introduction To The Internet CLASS 2 - Email CLASS 3 - HTML http://condor.depaul.edu/~dlash/extra/Webpage/examples/02headererror.html Accidentally left off the tag

43. David Lash 43 Introduction zWhat we will talk about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document. 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

44. David Lash 44 Using HTML Validator Lite Advantages: 1. Can use to validate HTML code and determine errors 2. Can obtain HTML validator lite (for free) at: http://www.download.com (enter validator in the search box.) - Have a screen with 2 major parts: - Top part works like notepad - Bottom part shows HTML errors when you do a tools->validate. How to start: - From lab goto start->Internet Applications->SNL

45. David Lash 45 HTML Validator Lite Use tools-> validate to show html errors File->open to open documents Your errors are shown here are the bottom Use tags for quick insert of tags File save and undo works like notepad or word Alphabetic index of HTML tags

46. David Lash 46 Summary What we talked about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document (FTP) 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”