1 Using HTML and JavaScript to Develop Website David Lash Module 1 Getting Started

2 Introduction l What this course is about: »Creating, designing, publishing web pages –Web design basics with HTML: l Controlling text formatting l Controlling fonts & adding color l Creating links l Tables and frames –Scripting »Client side scripting (as time permits) »Server side scripting

3 Competency Objectives 1. Understand what is the Internet, HTML, Web servers. 2. Can format a simple HTML page and view it with a browser. 3. Can validate html code (and understand its importance). Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

4 Today’s Agenda l What 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. Validating HTML code

5 What is the Internet? l The Federal Networking Council (FNC) agrees "Internet" refers to the global information system that 1. is logically linked together by a globally unique address space based on the Internet Protocol (IP) 2. supports communications using the Transmission Control Protocol/Internet Protocol (TCP/IP) suite or its subsequent extensions/follow-ons, and/or other IP-compatible protocols; and 3. provides, 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, , 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 E.g., condor.depaul.edu is really Try Competency Alert: You need to know this !

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

7 More Web Address Examples

8 Accessing a WebPAge A Greatly Simplified view 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. Web server also can refer to the software that controls the machine, such as Apache, IIS, Tomcat.. Competency Alert: You need to know this !

9 How Pages Move Between Browser and Webserver 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 Transfer file from Web Server back to client machine.

10 How Pages Move Between Browser and Webserver – (The bottom line) l If 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). l Two ways to ensure getting content from web server and not from cache 1.Hold down the “shift” button and then hit refresh (or reload) 2.Delete all the caches file from browser cache. –From IE goto tools->temporary internet files ->Delete files –From Netscape Edit->preferences->Advanced->Cache->Clear Cache Common Problem Area! People seem to forget this

11 Outline l What 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”

12 Ok So What Is HTML? l Up until the late 1980s, Internet’s main use for , send/received files, and bulletin board services. »Was difficult to advertise and access documents and data at a site. l Tim Berners-Lee created a simple language for display documents and links »Wrote a tool (early browser) for displaying the language »This language called HyperText Markup Language (HTML). l HTML grew quickly especially with the development of the Mosiac web browser »Mosiac eventually became Netscape and was available for free download. »HTML eventually became standardized and is now controlled by the world wide web consortium (

13 What Really Is HTML? l HyperText Markup Language - Basically a set of TAGS that you add to your text »HTML tells browsers how to display and format your text »For example, Hello This Would be Bold But not this. l Why is it used so extensively? » It is simple to use and understand » It provides ways to include lots of stuff (e.g., text, graphics, sounds, links) »It is the STANDARD HTML tags are enclosed in <>. For almost all tags there is a start and ending tag. Competency Alert: You need to know this !

14 HTML? Why Not Just Use … l Front-page or Dreamweaver or Composer or … »“HTML-editors” basically generate HTML –Sometimes also generate javascript, and flash and a few other things. –Mainly provide a WYSIWYG (What You See Is What You Get) display »However, tool knowledge doesn’t translate to HTML knowledge –Web professionals still need to dip into the HTML to get precise design, or to get something to work »Learn HTML and you can figure out these tools.

15 OK So What Is This HTML? l HTML is based using tags. HTML tags » Are Enclosed in <> –(e.g.,,, ) »Usually have a start and end tag (e.g., hello world »Are case insensitive, so the following are the same My country tis of thee Makes hello bold but world is not

16 HTML Overview - II l A set of TAGs are required of all documents... l Store in a file with either htm or html suffix »E.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. Common Problem Area! People seem to forget this

17 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. Note how new lines in file are ignored in web page display (because HTML did not indicate line break)

18 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, or Firefox). 6. From Netscape, goto f ile->open page -> choose file. (Find the file you just saved and display it!) Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

19 Start notepad and enter HTML tags. Can use notepad as a simple editor Start notepad by: start->run and enter notepad

20 Once done, goto file->saveas From notepad you need to pull down the ‘Save as type:” to All Files. Need to give file an html suffix. Note: On windows the icons are also usually different for files of different suffixes. Here ‘roman.html’ is not really an html suffix (you can tell by the icon). Its actually roman.html.txt

21 Open the file in Internet Explorer Start IE and goto file->open. Use ‘browse’ to find file. Navigate to the directory where you saved the file. If you don’t see the file, you either saved it somewhere else or it doesn’t have an html suffix. Click OK and view your file Change this drop-down to ‘view all files’ if you suspect the file has a different suffix.

22 Repeat until done with the file. 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, or Firefox). 6. From Netscape, goto f ile->open page -> choose file. (Find the file you just saved and display it!) Repeat this process until your content and display format is right.

23 Outline l What 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”

24 Eventually will publish on the Web l Use 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 or SSH/telnet directly into the web server and develop there.

25 Publishing On The Web - II l Place the copied files into the public_html directory Your pages must be in this directory (or you won’t see them on the Internet)! Common Problem Area! People seem to forget this

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 More on FTP Main Screen. PC Files and directories Current directory on PC Current directory on Web server Web server Files and directories

28 Outline l What 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”

29 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).

30 HTML Only Responds To Tags l Blank 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. These spaces are ignored.

31 HTML Comments 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 These comments are ignored.

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

33 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 - CLASS 3 - HTML Create a new paragraph Creates a line Line Break Note > 1 tag per line

34 Using Attributes with Tags Many tags also have optional attributes : ……… -- Causes a new paragraph »align=center|right|left »aligns the text to the center, right or left. E.g., or --- Draws a solid horizontal line »align=center|left|right - sets horizontal alignment »noshade - Display as a solid (noshaded) bar »size=number - thickness of rule in pixels »width=number or % - Length of rule in pixels or % of screen. »E.g.,

35 Paragraph and Break Tags 1. Web Page With "P" Tag 2. 3.Welcome To Exploring The Internet 4. 5.Hopefully you will find this course interesting In this course, you will develop 8.a broad knowledge of the internet This class meets at night CLASS 1 - Introduction To The Internet CLASS CLASS 3 - HTML 19. Create a left justified paragraph Center it Solid HR that’s 30% of screen & 10 pixels

36 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

37 Header Example 1. THIS is a sample web Page INTRODUCTION 5.Welcome To Website Design. 6.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. 7. Meeting Times 8.The class will meet every other week on Thursday's (naperville) or 9.Saturday's (O'hare) 10. Dates and Times CLASS 1 11.Introduction To The Internet 12. CLASS 2 CLASS 3 13.HTML H1 is the largest header. It will cause line break and be large and bold H2 and H3 will be smaller

38 Header Error Example 1. 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 4. 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. 5. Meeting Times 6. The class will meet every other week on Thursday's (naperville) or Saturday's (O'hare) 7. <!-- Opps I forgot to close off the H2 tag! 8. --> 9. Dates and Times 10. CLASS 1 - Introduction To The Internet CLASS CLASS 3 - HTML 12. Accidentally left off the tag Note how browser continues H2 until end of document

39 Outline l What 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”

40 Using HTML Validators Why Bother to validate HTML code? 1. Browser do not fully enforce HTML standard –E.g., Often are ‘forgiving’ if forget to close a tag or omit something 1. This is a sample web Page INTRODUCTION 4. Yet another example web page. In this one I forgot to end the document. 5. Yet I don't get an error. Did not end document but it displays OK. BUT WHAT ABOUT ‘IE’ or NETSCAPE OR A PREVIOUS VERSION or NEXT VERSION?

41 Using HTML Validators Use tools-> validate to show html errors File->open to open documents Your errors are shown here are the bottom File save and undo works like notepad or word Alphabetic index of HTML tags Soln: Use An HTML Validator. »Such as a Web Site (upload code) »Or HTML validator lite (for free) at:

42 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”

43 A quick couple of questions l What is HTML? l What is the Internet? (3 attributes) l What is a Web Server?

44 A quick couple of questions l What is HTML? l What is the Internet? l What is a Web Server?

45 A quick couple of questions l What is HTML? »HyperText Markup Language - Basically a set of TAGS that you add to your text –HTML tells browsers how to display and format your text l What is the Internet? l What is a Web Server?

46 A quick couple of questions l What is HTML l What is the Internet? –is logically linked together by a globally unique address space based on the Internet Protocol (IP) –supports communications using the Transmission Control Protocol/Internet Protocol (TCP/IP) suite or its subsequent extensions/follow-ons, and/or other IP-compatible protocols; and –provides, uses or makes accessible, either publicly or privately, high level services layered on the communications and related infrastructure described herein. l What is 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. Web server also can refer to the software that controls the machine, such as Apache, IIS, Tomcat..

47 Module 1 Hands on Assignment l Create an HTML page that looks like the following: Competencies required: 1. Create a script and execute it. 2. Manipulate arithmetic variable.

48 One possible solution A first Web Page 3. A favorite Saying 4. One of my favorites quotes is: "Steady plodding leads to success 5. but hasty speculation leads to poverty." 6. This page was designed by me

49 HW Hands-on assignment l Change that webpage to look like the following:

50 What to do with homework 1.Do not hand in the homework yet. 2.HW will be ‘collected’ when you publish to the WWW. 3.For now, complete the assignment, a save to your personal machine. I will ask you to publish it later.

51 One more item... l In order to get space on the DePaul Web Server. 1.You need to see the DePaul Lab Assistant 2.Ask to activate your account. 3.Do this even if you ‘have’ an account. (Its routine practice, for them to suspend inactive accounts).