Using HTML and JavaScript to Develop Website

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

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

3. Competency Objectives • Understand what is the Internet, HTML, Web servers. • Can format a simple HTML page and view it with a browser. • 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 • 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. Competency Alert: You need to know this! What is the Internet? • 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. 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/ TCP/IP protocol is the standard protocol for moving Internet data! Services such as web pages, email, chat, bulletin boards

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 http://www.depaul.edu/~dlash/mystuff.html Get the file mystuff.html View pages under dlash user id. 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).

7. More Web Address Examples

8. Accessing a WebPAge A Greatly Simplified view Competency Alert: You need to know this! 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..

9. How Pages Move Between Browser and Webserver Client Machine Web Server 1. Check Cache 2. 3. 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. 3. Transfer file from Web Server back to client machine.

10. How Pages Move Between Browser and Webserver – (The bottom line) • 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). • Two ways to ensure getting content from web server and not from cache • Hold down the “shift” button and then hit refresh (or reload) • 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 • 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? • Up until the late 1980s, Internet’s main use for email, send/received files, and bulletin board services. • Was difficult to advertise and access documents and data at a site. • 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). • 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 (http://www.w3.org)

13. What Really Is HTML? Competency Alert: You need to know this! • 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, <FONT COLOR=BLUE> Hello </FONT> <B> This Would be Bold </B> But not this. HTML tags are enclosed in <>. For almost all tags there is a start and ending tag. • 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

14. HTML? Why Not Just Use … • 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? • HTML is based using tags. HTML tags • Are Enclosed in <> • (e.g., <font>, <b>, <img src=121> ) • Usually have a start and end tag (e.g., <b> hello </b> world • Are case insensitive, so the following are the same <b> My </b> country <i> tis </I> of thee <B> My </b> country <i> tis </i> of thee <B> My </B> country <I> tis </I> of thee Makes hello bold but world is not

16. HTML Overview - II • A set of TAGs are required of all documents <HTML> ... </HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> • 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 Common Problem Area! People seem to forget this 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.

17. HTML Overview - Example The header section of document <html> <head> <title> Mypage </title> </head> <body> Welcome to Website Design. Stuff you write here becomes your HTML document. </body> </html> This title appears in the upper left hand corner of browser. Not in the body of the document Indicates start and end of HTML document Inside the <body> … </body> 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 Start->run enter notepad 2. Enter your tags and document 3. From notepad window, goto file->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 file->open page -> choose file. (Find the file you just saved and display it!) Common Problem Area! People seem to forget this Competency Alert: You need to know 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 Need to give file an html suffix. From notepad you need to pull down the ‘Save as type:” to All Files. 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. Change this drop-down to ‘view all files’ if you suspect the file has a different suffix. 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

22. Repeat until done with the file. Repeat this process until your content and display format is right. 1. From your PC goto Start->run enter notepad 2. Enter your tags and document 3. From notepad window, goto file->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 file->open page -> choose file. (Find the file you just saved and display it!)

23. Outline • 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 • 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 • 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. Current directory on Web server Current directory on PC PC Files and directories Web server Files and directories

28. Outline • 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 ... The header section of document <HTML> <HEAD> <TITLE>Mypage </TITLE> </HEAD> <BODY> Welcome to Website Design </BODY> </HTML> Indicates start and end of HTML 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 These spaces are ignored. • Blank spaces without tags are ignored: <HTML> <HEAD> <TITLE> Formatting a WWW Page </TITLE> </HEAD> <BODY> 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. <HR> But the class does have some work to do. </BODY> </HTML>

31. HTML Comments These comments are ignored. The Tag <!--- ---> is used to indicate comment: <HTML> <!-- ! Example of a Basic HTML Program ! Written by Dave Lash For Web Page Design ! To demonstrate the use of comments. --><HEAD> <TITLE> THIS is a sample web Page </TITLE> </HEAD> <BODY> Welcome To Exploring The Internet </BODY> </HTML>

32. Paragraph and Break Tags Two of the most basic tags are: <P> …… </P> -- Causes a new paragraph<br> …… <br /> -- Causes a line break <hr> …… <hr /> -- 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 Creates a line <HTML><HEAD><TITLE> Web Page With "P" Tag</TITLE> </HEAD> <BODY> Welcome To Exploring The Internet <HR> Hopefully you will find this course interesting. <P> In this course, you will develop a broad knowledge of the Internet </P><P> This class meets at night. </P><P> CLASS 1 - Introduction To The Internet <BR> CLASS 2 - Email <BR> CLASS 3 - HTML<BR> </BODY></HTML> Create a new paragraph Line Break Note > 1 tag per line

34. Using Attributes with Tags Many tags also have optional attributes : • <P> ……… </P> -- Causes a new paragraph • align=center|right|left • aligns the text to the center, right or left.E.g., <P align=left> • <hr> or <hr /> --- 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., <HR noshade size=12 width=50%>

35. Paragraph and Break Tags Create a left justified paragraph • <HTML><HEAD><TITLE> Web Page With "P" Tag </TITLE> • </HEAD><BODY> • Welcome To Exploring The Internet • <HR> • Hopefully you will find this course interesting. • <P align=left> • In this course, you will develop • a broad knowledge of the internet • </P><P align=right> • This class meets at night. • <P align=center> • CLASS 1 - Introduction To The Internet • <BR clear=right> • CLASS 2 - Email • <HR noshade width=30% size=10> • <HR width=30% size=10 align=left> • <HR size=12 WIDTH=155 align=right> • CLASS 3 - HTML • </BODY></HTML> 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 <title> tag <H1> ……… </H1> -- First Level Header<H2> ……. </H2> -- Second Level <H3> …….. </H3> --- Third Level <H4> …….. </H4> --- Fourth Level <H5> …….. </H5> --- Fifth Level

37. Header Example H1 is the largest header. It will cause line break and be large and bold • <HTML><HEAD><TITLE> THIS is a sample web Page </TITLE> • </HEAD> • <BODY> • <H1> INTRODUCTION </H1> • Welcome To Website Design. • Hopefully you will find this course to be informative and interesting.<H1> Overview </H1>In this course, you will develop a broad knowledge of the Internet technology. • <H1> Meeting Times </H1> • The class will meet every other week on Thursday's (naperville) or • Saturday's (O'hare) • <H2> Dates and Times </H2><H3>CLASS 1</H3> • Introduction To The Internet • <H3>CLASS 2</H3>Email<H3>CLASS 3 </H3> • HTML</BODY></HTML> H2 and H3 will be smaller

38. Header Error Example • <HTML><HEAD> <TITLE> THIS is a sample web Page • </TITLE></HEAD><BODY> • <H1> INTRODUCTION </H1>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. <P><H1> Overview </H1> • 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. • <P> <H1> Meeting Times </H1> • 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! • --> • <H2> Dates and Times • <P>CLASS 1 - Introduction To The Internet<BR> CLASS 2 - Email • <BR>CLASS 3 - HTML • </BODY></HTML> Accidentally left off the </H2> tag Note how browser continues H2 until end of document

39. Outline • 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 • <HTML><HEAD><TITLE> This is a sample web Page </TITLE> • </HEAD> <BODY> • <H1> INTRODUCTION </H1> • Yet another example web page. In this one I forgot to end the document. • <br> 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 Soln: Use An HTML Validator. • Such as a Web Site (upload code) • Or HTML validator lite (for free) at: http://www.download.com File->open to open documents Use tools-> validate to show html errors File save and undo works like notepad or word Alphabetic index of HTML tags Your errors are shown here are the bottom

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 • What is HTML? • What is the Internet? (3 attributes) • What is a Web Server?

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

45. A quick couple of questions • 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 • What is the Internet? • What is a Web Server?

46. A quick couple of questions • What is HTML • 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. • 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 • 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 • <HTML><HEAD> • <TITLE> A first Web Page </TITLE> </HEAD><BODY> • <h1>A favorite Saying</h1> • One of my favorites quotes is: "Steady plodding leads to success • but hasty speculation leads to poverty." • <HR> This page was designed by me. • </BODY> • </HTML>

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

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