1 / 21

UNTANGLING THE WEB

UNTANGLING THE WEB. How a website and your browser actually work. David Wood. Outline. Web pages Browsers Web page language – HTML What a web page looks like How HTML works Sample web page JavaScript Summary. Web Pages.

lisandra-lambert
Download Presentation

UNTANGLING THE WEB

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UNTANGLING THE WEB How a website and your browser actually work David Wood

  2. Outline • Web pages • Browsers • Web page language – HTML • What a web page looks like • How HTML works • Sample web page • JavaScript • Summary

  3. Web Pages • What you see on your screen is not what is sent to your computer • The site you are linked to sends web page display commands to your computer • Your browser interprets these commands and “paints” the web page

  4. Browser • The computer code in you browser is the key to viewing a web page • The World Wide Web Consortium (W3C) establishes the standards for rendition of a web page • The fidelity of the web page (adherence to the page designer’s intent) depends upon your browser

  5. Browser (continued) • In the early internet days (Netscape, IE1) there was little adherence to these standards • Modern browsers are closer, although IE has always marched to its own drummer. • IE 8 is much closer to the W3C standards

  6. Browser (continued) • If you view the same website with different browsers, they will likely look different • Mozilla Firefox is probably the closest to following the W3C standards

  7. HTML • The commands sent to you browser use the Hyper-Text Markup Language (HTML) • HTML is an interpretive code – each individual command is interpreted by your browser and executed in the order it is received

  8. What a Web Page Looks Like • You can view the HTML source of any web page on your browser by right clicking the mouse, then select “view source”

  9. What a Web Page Looks Like • The page will have two main parts • A front-end “boiler plate” (head) that defines this as a web page, and establishes much of the formatting information • References to external “style” sheets – called Cascading Style Sheets (CSS) • References to external scripts, such as JavaScript • Provides “Meta” information – mainly to support search engines

  10. Sample HTML Boilerplate <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Lincoln Hills Hikers</title> <meta name="description" content="Sun City Lincoln Hills California Hiking Group"> <meta name="keywords" content="active retirement, hiking"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="Thu, 1 Jan 1970 01:00:00 GMT"> <script type="text/javascript" src="mouseover.js"> </script> <link rel="stylesheet" href="mystyle.css" type="text/css" media="screen, print"> </head>

  11. What a Web Page Looks Like (continued) • The main web page content (body) • Typically the web page will consist of some kind of “frame” – often in the form of a table • The web page content will then be inside this “frame” • Tables (and tables within tables) are used frequently as a neat way to format text and images into displayable blocks

  12. What a Web Page Looks Like (continued) • Images are not sent to the page directly – the HTML contains URL (Uniform Resource Locator) references to point to the image source, where your browser goes to fetch the image

  13. Sample HTML Web Body <body leftmargin="0" topmargin="0" style="" marginheight="0" marginwidth="0"> <table style="width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td background="http://lincolnhillshikers.org/img/bg.gif" width="50%"><img src="http://lincolnhillshikers.org/img/px1.gif" alt="" border="0" height="1" width="1"></td> <td background="http://lincolnhillshikers.org/img/bg_left.gif" valign="bottom"><img src="http://lincolnhillshikers.org/img/bg_left.gif" alt="" border="0" height="16" width="17"></td> <td> <table style="width: 780px;" border="0" cellpadding="0" cellspacing="0">

  14. How HTML Works • All commands are enclosed in < > characters • Most commands occur in pairs – to start the stop the action • Example: <p> starts a text paragraph and </p> ends the paragraph • <br> stands by itself as a line break (like carriage return/linefeed)

  15. How HTML Works (continued) • If I want the paragraph to be in arial font, I can include that in the <p>, as <p style=”font-family: arial”;> • The use of punctuation (= “ : ;), as well as the reserved terms (font-family) are a bit arcane, but must be precisely adhered to • The use of arial font could also be dictated by a “style sheet” preceding the occurrence of the <p>

  16. How HTML Works (continued) • There are HTML commands for all aspects of web page formatting and content • Any text not imbedded in the < > characters is displayed as viewable text, formatted as specified prior to its occurrence

  17. How HTML Works (continued) • Good web design isolates format from content to the greatest extent possible • This is accomplished by providing page format data in Cascading Style Sheets (CSS), which are maintained separately from the page content

  18. JavaScript • Often web page designers require functionality that is beyond the capability of HTML • This additional functionality is provided through a scripting language, of which JavaScript is the most common • JavaScript effectively provides a link between HTML and basic OS functionality (like printing a screen)

  19. JavaScript (continued) • JavaScript, and most scripting languages run on the user’s computer • Other scripting languages of which you may have heard are PHP, Perl, ASP, and SQL • References to these scripts are in the boilerplate (head) section of the HTML • Some are “server-side” scripts that run on the host computer • An example is a page “hit counter” • The accumulation of the count of each visit must be maintained at the host • The browser must fetch this information from the host

  20. Summary • Web pages are sent to your computer as a sequence of HTML commands • These commands must be interpreted and executed by your browser • All browsers are not created equal • A web page consists basically of two parts: a boilerplate <head> section and a <body> section

  21. Summary (continued) • Images are not sent in the HTML – only URL references • Good web design isolates form from function (format from content) • Additional web site capability and functionality is provided by scripting languages, like JavaScript

More Related