Internet with HTML
- 2. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly 1989) Wanted researchers to be able to “link” or cross- reference each others research papers By mid 1980s we had DNS – domain name service to map domain names to IP address
- 3. WWW (cont.) • Berners-Lee developed a simple protocol, HTTP – HyperText Transfer Protocol for exchanging information via hypertext links • The documents themselves were to be marked up using HTML – HyperText Markup Language • HTML based on SGML - Standard Generalized Mark- up Language which was widely used in publishing industry
- 4. WWW (cont.) Early 1990s World Wide Web ramped up 1993 – NCSA - National Center for Supercomputers (University of Illinois) released Mosaic browser 1994 – Netscape was formed
- 5. Important Web Programs • Web Server: This is a program that manages web sites on server computers. The web server accepts requests from other programs (clients) asking for pages from the web sites. • Browsers: Programs like Internet Explorer and Firefox that act as clients for web servers requesting pages for the user and displaying the returned pages.
- 6. HTML • HyperText Markup Language – HTML is used to mark up a document to tell browser how it should be displayed, nothing about content • Allows us to markup up text with special tags that inform the web browsers how the content should be displayed • For the most part HTML tags are placed in “angle brackets” like <b> and occur in pairs like <b> Here is some text </b>
- 7. Some HTML tags • html – this tag together with its end tag enclose the entire document • head – there are two sections to the document, the head and the body. For the most part the head section contains the title of the document • title – encloses the page title shown in title bar at the top • body – enclose the body of the document, essentially all of the displayed content
- 8. A Minimal HTML document <html> <head> <title> Title of your page </title> </head> <body> All the good stuff goes here </body> </html>
- 9. More tags • h1 – There are six levels of headings in HTML, numbered h1 through h6 with h1 being the largest and boldest • p – Marks the beginning of a new paragraph. • ul – enclose an unordered list – bullet list • ol – enclose an ordered or numbered list • li – enclose an item in a list
- 10. Unordered Lists
- 11. Ordered Lists
- 14. More tags • br – Causes a line break to occur. Does not use an end tag (Recommend: <br/> • hr – Causes a horizontal line to be drawn across the page. No end tag. (Recommend: <hr/>) • b – enclosed text is bold • i – enclosed text is in italics
- 15. The anchor tag • The anchor tags, <a> and </a>, are used with links. – To specify a link from a location in your page to a location in current page or another page on the web. – To specify a location in your page that can be linked to from another location in the current page or from another page.
- 16. Making links – HREF Attribute • General form is <a href = “URL”> link-phrase</a> – URL (Uniform Resource Locator) is the web address to link to – link-phrase is the phrase to appear on your page for the user to click in order to execute the link.
- 17. Linking to other places: HREF attribute Suppose we want to have a link on our page to link to W&L’s home page. The following markup will achieve this: <a href=“http://www.wlu.edu”> My University </a>
- 18. Locations that can be linked to: Name attribute In order to link to specific locations within a page, these locations must first be given names that are recognized by HTML. To do this we use the anchor tag again, but now using the NAME attribute rather than the HREF attribute.
- 19. Linking to locations in same page General form is <a name = “location-name”> Location-title</a> where location-name is the name that will be used in anchors that link to this location, and Location-title will appear at the position where the Name anchor is placed.
- 20. Linking to named locations in same page Example: <a name=“Ch2”>Chapter 2 – Tree Algorithms</a> Suppose we put the above tag at the beginning of the Chapter 2 section of our page. Then to link from another location to Chapter 2, we could use any of the following: <a href= “#Ch2”> Chapter 2</a> <a href = “#Ch2”> Tree Algorithms</a> <a href = “#Ch2”> Chapter 2 – Tree Algorithms</a> Here the # indicates that we are linking to an anchor location within the page.
- 21. Linking to named locations in another page Example: <a name=“Ch2”>Chapter 2 – Tree Algorithms</a> Suppose the named location above occurs in “MyReport.html” and that we would like to place a link to that location in “MyWork.html”. At the place where we want the link, we could have <a href = “MyWork.html#Ch2”> See Chapter 2 </a> assuming these files are in same location. Otherwise, use the full web address to MyWork.html.
- 22. Images Here is an example for having an image in the file <img src =“TractorRide.jpg”>
- 23. Background Color • We can add a background color to our web page by adding a bgcolor attribute to the Body tag: <body bgcolor = “value”> • The value can be either a “known” color or a color specified with the 6 hex digit system.
- 24. Background Color (cont.) • There is a long list of “known” colors, but only 16 that are guaranteed to validate with all browsers: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow • To specify a background color with hex digits use the form <body bgcolor = “#D454C8”> for example