Lecture #1: * The World Wide Web * HTML Basics

1. Lecture #1: * The World Wide Web * HTML Basics IT 130 – Internet and the Web Joseph (Yosef) Mendelsohn

2. How Web Pages are “Served”Learning Objectives • What is a web client? • What is a web server? • What is an HTTP request? • What is an HTTP response?

3. Requesting a page - Overview • A web client (usually in the form of a web browser) makes an HTTP request to a specific web server. • The web server receives the request and sends back the requested document (usually – though not always) in the form of an HTML page. • The web client parses the HTML response document and interprets the information returned by the server and displays it.

4. Understand these terms • Be sure you review and become comfortable with the following terms as they are discussed over the next section: • HTTP Client • HTTP Server • HTTP Request • HTTP Response

5. HTTP • Stands for “hypertext transfer protocol” (You don’t need to memorize this!) • In terms of networking, a protocol is a series of rules and standards that are agreed to by a committee or organization • These rules standardize one way in which computing devices can work and interact • HTTP is the protocol used by devices that wish to communicate with each other over the world wide web

6. HTTP Client • From Wikipedia: An HTTP client uses HTTP to connect to a web server over the Internet to transfer documents or other data. The most well known types of HTTP Clients include web browsers. • Software that is used to: • generate HTTP requests • send those requests to an HTTP server • interpret the HTTP response that is provided by the server • The most famous type of http client by far is the web browser - Internet Explorer, Firefox, Safari, Chrome, etc

7. The Request/Response Process Taken from ‘The Internet of Things’, p.30

8. HTTP Server • A computer somewhere that is running http server software • Colloquially, simply called a web server • This software “listens” for incoming requests from HTTP clients • When an http request comes in, the server parses (reads & interprets) that request • The server then sends out an http response • Typically, this response includes sending a document back to the web client (aka ‘http client’) • Examples of http server software: Apache, Google Web Server, Internet Information Services

9. The HTTP Request • When you type a URL, say, for the syllabus of this course, your HTTP client (browser) creates something called an ‘HTTP request’ • This request is routed (via a mechanism we will ignore for now) over the internet to an HTTP server that is connected to the internet • For the class web page, this server lives somewhere in downtown Chicago • The HTTP request contains all kinds of information that the server may need to know: • The name of the document being requested • The time the request was made • The “return address” (the internet address of the http client) • The type/name of the http client (e.g. Pocket Safari for iPhone) • etc

10. The HTTP Response • Once the server has received and parsed the http request, it answers by generating an http response. This response includes: • a status line: e.g. ‘OK’ or ‘ERROR-404’ • a header with information such as the type of document being returned (JPG, MPG, HTML, etc) • This is also packaged with the actual document that was requested. This document is commonly, but by no means always an ‘html’ document. • It can be other things such as an image, a PPT file, etc

11. ‘Parsing’ the http response • An http client such as a web browser specializes in reading http responses • Frequently included with this response is a document such as a file written in a ‘language’ called html • The client “parses” this document which contains the information to be displayed (e.g. text, pictures, etc) and the way in which it should be displayed (size, colors, font, etc, etc)

12. Example of an http request and response • If you look under week #1 of this course, you will see a document called ‘first_template.htm’ • The URL (i.e. the web address) to this document is: http://condor.depaul.edu/ymendels/it130/first_template.htm • Let’s see what happens when you type this URL into a web client…

13. Example of an http request and response:1. The HTTP Request • When you type the URL and hit enter, an “http request” is sent to the web server. • The name of this web server is ‘condor.depaul.edu’ • Here is part of the http request:

14. Example of an http request and response:2. The HTTP Response Here is what comes back:

15. Overview - How to ‘serve’ web pages • Have a computer to act as a ‘server’ with a big enough hard-drive to store all the pages you want to make available on the web. • Ensure your computer is connected to the internet • Install web server software (e.g. Apache web server) • Configure the web server (takes a little bit of know-how) • Obtain and/or create the documents that you wish to make available on the web. • Copy those documents from your local computer to the web server. This requires ‘FTP’ (later).

16. Serving web pages – The Server: Have a computer to act as a ‘server’ to send pages along when requested: A server can be any computer capable of connecting to the internet and running server-software. • The busier the site, the more powerful the computer. However the server can be as simple as your Dell desktop, or as complex as a rack of high-end dedicated computers. • Busy sites (e.g. Google, Microsoft) will have multiple redundant computers to serve their web pages.

17. Serving web pages: Server Software • A computer program called a web server listens (constantly) for HTTP requests and responds by sending back HTTP responses. • An example of an http request is: http://www.nytimes.com/index.html • An example of an http response is (usually) the web page document that is sent back to your computer • Several software companies publish web server software • Some of the better known server software programs include: • Apache HTTP Server • Microsoft IIS (Internet Information Services) • Google’s GWS (Google Web Server)

18. Serving web pages – Creating and uploading information • See rest of the course.

19. Creating Content • Your average web client (aka http client, aka browser) can understand many languages • HTML (Hypertext markup language) • Javascript • CSS (cascading stylesheets) • PHP, Ajax, Ruby, others • Each language has its particular uses • In this course will cover the first three above • We will begin with HTML

20. HTML HTML = HyperText Markup Language HyperText text containing navigable links to other texts A Markup Language a method of adding information to the text indicating the logical components of a document and instructions for layout of the text on the page, which can be interpreted by some automatic system You can see the HTML of most web pages by selecting View  Source on your web browser.

21. HTML: The Language of the Web Web pages are text files written in HTML. HTML is easy to write and even nonprogrammers can learn to use it. HTML allows web page authors to create documents that can be displayed across different operating systems. HTML describes the format of web pages through the use of tags. Web browsers read the HTML file, interpret the HTML tags, and render (display) the web page accordingly Ideally, all browsers should display pages exactly the same. However, different web browsers frequently display pages differently!

22. Creating Web pages In order to create your own web pages in this course you need: A text editor (not a web design application like FrontPage or Dreamweaver) (e.g. TextPad, TextWrangler, PSPad) For reasons I’ll explain in class, do NOT use Windows Notepad or TextEdit on the Mac A web browser for testing the pages(e.g. Firefox, Internet Explorer, Safari, Opera, Chrome – or test with ALL of them!) An account on a functioning web server to store your files and make them available online (e.g. students.depaul.edu)

23. Basic process for creating web pages Write HTML file text file (i.e. do not write in Word) name the file extension .html or .htm View on your local machine (File  Open) Upload your file(s) to the server When you create a web document, you will be working ona computer in home, ona laptop, etc. This means that the file is NOT yet available on the internet. To make it visible on the web, you must first copy that file to the web server. The protocol for copying files between computers on the internet is called “FTP” Any additional files you wish to make available on the web such as images or videos or PPTs, etc, etc, must also be uploaded

24. File extensions HTML files must be saved with a .html or .htm extension. HTML editors like TextPad do this automatically (when you click on File  Save As and choose ‘Save as HTML’) Important: Be sure that you can view the extensions of your files. By default, Windows and Mac computers, typically hide extensions. Instructions for ensuring that extensions are visible in Windows: In Windows Explorer or in My Computer, click on Organize  Folder and Search Options  View (tab)  UN-check the box that says “Hide extensions for known file types”.

25. ** Respect Case ! ** • Case refers to capital as opposed to lower-case letters • In the programming world, you should ALWAYS be respectful of case. Though some situations are forgiving about it, others are not. For thisr eason, if you are shown a tag in lower-case, always write it in lower case and vice-versa. • In other words, if a tag is listed as ‘img’, you should NOT write IMG or Img etc.

26. Our first HTML… • HTML tags are designed to tell the http client how the text is organized • The most common organization of document is into headings, subheadings, sub-subheadings etc • We also frequently use lists • HTML is also used to tell the client when we are “switching languages” • HTML is also used to give the browser information about the current document, such as the language being used

27. A very basic HTML page • <!DOCTYPE html> • <html lang="en"> • <head> • <meta charset="utf-8“ /> • <title>My first web page</title> • </head> • <body> • Hello world! • </body> • </html> • Notes: • Every page should have the document tags <!DOCTYPE>,<html>, <head>, charset metatag, <title>, <body>  don’t forget this on your assignments! • Every tag has a corresponding closing tag • Tags are properly nested

28. Anatomy of an HTML tag • Example – the ‘h1’ tag: <h1>This is a level 1 heading</h1> • Tags are encased in ‘<‘ and ‘> brackets • I usually call them “angled brackets” • Every tag must be “closed” • A closing tag has a forward slash ‘/’ • In the example above, the </h1> is the closing tag

29. Some key HTML Tags <!DOCTYPE html> Tells the web client to operate in something called “standards” mode. We will discuss this at a later point in the course. This tag must be the very first line of your html file. <html> … </html> Encases the entire HTML document – with the exception of the DOCTYPE tag. <head> … </head> Text in this part of the document is NOT displayed in the browser’s window. It frequently contains tags such as <title>, <meta>, <script> and others.

30. <title> … </title> Displayed in the browser’s title bar. It is also used as the default bookmark description. <meta charset=“utf-8”> Important for security purposes – will be discussed at a later point. <body> … </body> The contents displayed in the browser’s window. Everything that appears on the page is contained within these tags. Some key HTML Tags contd

31. The “Heading” tag An example of a ‘structure’ tag Headings: <h1> … </h1>  boldest and largest <h2> … </h2> <h3> … </h3> <h4> … </h4> <h5> … </h5> <h6> …. </h6>  lightest and smallest

32. Some other tags • Paragraph: <p> … </p> A blank line is inserted before the paragraph. • Line Break: <br /> • Horizontal rule: <hr /> • Ordered lists: <ol> … </ol> • Unordered lists: <ul> … </ul>

33. An example – Note how white space is ignored… <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title> IT 130: The Internet and the Web </title> </head> <body> <h1>Important! (This is an H1)</h1> <p>Notice that the ‘p’ tag places spaces before and after the paragraph. </p> <h3>Spacing test (this is an H3)</h3> <p>Here I am spacing things widely. Note how extra spaces do <em>not</em> make a difference. I just left a blank line, but it doesn’t appear! (I need a ‘br’ tag!) </p> <p>Another paragraph!</p> </body> </html>

35. Styling Tags – what NOT to do Visual syling should NOT be done using HTML. Instead, we will do our styling using something called CSS. So if you wish to underline, or change a color , or change a font, you should not use HTML. While there are tags that let you do so, these tags are being deprecated (phased out) and therefore should not be used by a competent programmer. Some examples: Font <font> </font> Center <center> </center> Underline <u> </u> To reiterate: Just because tags work, does NOT mean that it’s okay to use them. Certain tags have been deprecated which means that they are being phased out of the HTML standard. Later on in the course when we learn about CSS, we will stop using deprecated tags.

36. Deprecated Tags An HTML tag or attribute is said to be deprecated if it is the current version of HTML but will be eliminated from future versions of HTML. There are numerous deprecated out there. So though they are still technically part of HTML, their use is discouraged when writing new web pages. In this course we are going to avoid using depracated tags whenever possible. The BEST way to find out which tag to use is via a reliable reference. A great way to start is at: http://www.w3schools.com (Bookmark this web page on your computer).

37. How to Ace this Course • There is no magic formula. • You do not have to be smart. • You do have to do three things: • Learn (lecture / read / study) • Review • PRACTICE what you have been learning • This is by FAR the most important of all • Even if you “think you got it” • Do lots of practice and you’ll do well. • Don’t practice and you will not do well. • Remember: There is no magic formula.

38. How to ace this course contd:-Watch the “yeah yeahs” • The most dangerous thing you can do is to sit there and think “yeah, yeah, I got this.” • It is entirely possible you understand the concepts – but you will quickly see that it is an entirey different thing when you sit down to a blank screen and try to make things happen – particularly when the coding gets more involved.

39. Learning Web Design The best way to learn HTML, CSS, and Javascript is by typing up files yourself and modifying them, and experimenting as much as possible. Learning to program is like learning a foreign language. It’s not enough to read the rules of the language. There are no shortcuts or magic formulas. Believe me – if there were, I would be the first one to tell you about them! There is only one way – and that is: PRACTICE! 39

40. Begin by working with your files locally: • Create your HTML text and view it in your browser before uploading them to your web account. • Click on File  Open and navigate to your file. Or, simply type the name of the file in the URL box.

41. Uploading your files to a web server using FTP Once your files are ready to be published on the web, you will need to copy (“upload”) them to the web server. To move files between two computers on the internet, we will make use of a protocol called “file transport protoco” or, ‘FTP’. To use FTP: The remote computer, (i.e. the web server) must be running FTP Server software’ The local (i.e. your) computer must be running ‘FTP Client software. Just as there are many different kinds of http client software out there (Safari, Firefox, etc), there are many different FTP clients out there aas well. The one I would recommend you download and use is FileZilla to transfer the files to the students.depaul.edu server. See the ‘Resources’ page on the course web site for more information. THINK about what you are doing as you do this. There will be questions on your exams to test your conceptual understanding of the FTP process.

42. < / Lecture>