Hypertext Markup Language HTML Chapter 2

Hypertext Markup LanguageHTMLChapter 2Supporting Material for “Using Google App Engine” - O’Reilly and Associateswww.appenginelearn.com

Unless otherwise noted, the content of this course material is licensed under a CreativeCommons Attribution 3.0 /.Copyright 2009, Charles Severance

ePOSTPythonData StorememcacheTemplates

The big picture. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 -strict.dtd" html xmlns "http://www.w3.org/1999/xhtml" xml:lang "en" head title University of Michigan /title .A web server produces HTMLwhich is handed to a browser whichneeds to lay it out in a blink of aneye and have it pixel perfect as godas a print brochure.

HTML A way of marking up text to indicate that some text is different thanother text We “tag” portions of the text to communicate meaning h1 Google App Engine: About /h1 p Welcome to the site dedicated to learning theGoogle Application Engine. We hope you findwww.appenginelearn.com useful. /p

h1 Google App Engine: About /h1 p Welcome to the site dedicated tolearning the Google ApplicationEngine. We hope you findwww.appenginelearn.com useful. /p Whitespace andline wrapping.

li a href "mailto:si539@ctools.umich.edu"title "Send mail to si539@ctools.umich.edu" si539@ctools.umich.edu /a /li Learning from“View Source”

Evolution of HTML

The Web is a Young Technology Invented in early 1990’sPopular in 1994Robert Cailliau coFounder of the WorldWide-Webhttp://www.dr-chuck.com/media.php?id 70

HTML has evolved a *lot* overthe years - as computers andnetworks have gotten faster.19952007

An Iterative Process Designers want to do something We develop new standards that handle new requirements in an elegantmanner New Browsers arrive in the marketplace with the new standardThey figure out how to do it with current generation browsersWe figure out requirements - but HMTL gets uglier and quirkier - then theHTML starts to break

History of HTML / CSS HTML 1.0 - 1993 - The Good Old Days - life was simpleHTML 2.0 - 1995 - Some interesting layout features - abusedCSS 1 - 1996HTML 3.2 - 1997HTML 4.0 - 1997 - Layout moving toward CSSCSS Level 2 - 1998HTML 4.01 - 1999 - What we use todayHTML has evolved a *lot* overthe years - as computers andnetworks have gotten faster.

The Good Old Days h1 Hello World /h1 Hi there. p img src ”x.gif” A Paragraph ul li List one li List 2 /ul In the good old days youwrote HTML and browsersdisplayed it - since we wrote itby hand - and modems wereslow - it was never too longand never too complex. Thebrowser was never the ratelimiting factor.Writing HTML was like usinga simple, weak wordprocessor. The tags acted asformatting commands to thebrowser.

The Ugly Middle Ages Web Designers designed to browser capabilities - down to particular minorversions of browsers. Extensive testing was needed on lots of browsers HTML was UGLY, Hard to develop, and brittle - what looked superb on onebrowser - often was broken on another browser - even a later release of thesame brower.Designers used tables, nested tables, and chopped up graphics to gain controlof the look and feel or web pages to produce a “print-like” experience.

The Modern Era HTML is clean and simpleThere is no presentation in HTML - font, color, spacing, etc etcNo use of tables except for tabular dataCSS controls all layout, and look and feelStill a bit challenging - but converging

1990-1994HTML was simple and pages looked pretty ugly.1995-1999HTML became more complex and each browserwas different.2000-2005Browsers slowly supported CSS to varying levels.HTML was still ugly to support multiple browsers.New browsers supported CSS. Old browsers were2005-2008still pretty pervasive but diminishing.2009 The last “pre-CSS” browser (IE5) is 0.1%http://www.w3schools.com/browsers/browsers stats.asp

What does this mean for us? Don’t bother with the intermediate steps :)Either keep it simple - or do it well - simple does workIf you want a professional site use all of the best practices Presentation in CSS Semantic markup in ss-validator/

h1 Google App Engine: About /h1 p Welcome to the site dedicated tolearning the Google ApplicationEngine. We hope you findwww.appenginelearn.com useful. /p Whitespace andline wrapping.

Tags have a beginning and end. h1 Google App Engine: About /h1 p Welcome to the site dedicated tolearning the Google ApplicationEngine. We hope you findwww.appenginelearn.com useful. /p

HTML Tag BasicsStart tagTags “mark up” the HTMLdocument. The tags are read andinterpreted by the browser - butnow shown.A self closing tag does not need acorresponding end tag.End tag h1 Hello World /h1 Attribute img src ”x.gif” / Self-closing tag

What about ‘s in HTML? h1 HTML: Special Characters /h1 p Special characters are indicated bythe & character. We can use thisto display < and > /p

HTML Links One of the key things about HTML is making a set of pages andmaking “hypertext” links amongst those pages Links are what make the “web” a “web” - it is a web of interlinkeddocuments. The interlinked nature of the web leads to the “knowledge “ thesearch engines like Google appear to have

h1 The First Page /h1 p If you like, you can switch to the a href "http://www.dr-chuck.com/page2.htm" Second Page /a . /p A link is a “hot spot” on the page. Itcan be text or an image. Often it isvisually marked to make it easier to“notice” so as to engouage users toclick!“a” is short for “anchor” and “href”is short for “hypertext reference”

h1 The Second Page /h1 p If you like, you can switch back to the a href "page1.htm" First Page /a . /p A link is a “hot spot” on the page. Itcan be text or an image. Often it isvisually marked to make it easier to“notice” so as to engouage users toclick!“a” is short for “anchor” and “href”is short for “hypertext reference”

Absolute Reference a href "http://www.dr-chuck.com/page2.htm" Second Page /a StarttagWhere togo if clicked.ClickableText a href "page1.htm" First Page /a Relative ReferenceEndtag

Absolute .vs. Relative a href "http://www.dr-chuck.com/page2.htm" Second Page /a Hypertext references can be a full URL - and refer to some otherpage on anywhere on the Internet. a href "page1.htm" First Page /a Or the reference can be a file name that is assumed to be in thesame folder as the current document (relative reference).

Navigation With Anchor Tags Sometimes we want to make a menu that provides our usersconsistent navigation across page.

A List . h1 a href "index.htm" AppEngineLearn /a /h1 ul li a href "sites.htm" Sites /a /li li a href "topics.htm" Topics /a /li /ul h1 Google App Engine: About /h1 p Welcome to the site dedicated tolearning the Google Application Engine.We hope you find www.appenginelearn.comuseful. /p Bulleted List

A List of Links. h1 a href "index.htm" AppEngineLearn /a /h1 ul li a href "sites.htm" Sites /a /li li a href "topics.htm" Topics /a /li /ul h1 Google App Engine: About /h1 p Welcome to the site dedicated tolearning the Google Application Engine.We hope you find www.appenginelearn.comuseful. /p Links

Multiple Files We can put multiple files in the same directory and then use them inrelative links.csev ls -l-rw-r--r-- 1 csev staff 618 Dec 18 22:56 index.htm-rw-r--r-- 1 csev staff 883 Dec 18 22:57 sites.htm-rw-r--r-- 1 csev staff 679 Dec 18 22:57 topics.htmcsev

h1 a href "index.htm" AppEngineLearn /a /h1 ul li a href "sites.htm" Sites /a /li li a href "topics.htm" Topics /a /li /ul csev ls -l-rw-r--r-- 1 csev staff 618 Dec 18 22:56 index.htm-rw-r--r-- 1 csev staff 883 Dec 18 22:57 sites.htm-rw-r--r-- 1 csev staff 679 Dec 18 22:57 topics.htmcsev Navigation

csev ls -l-rw-r--r-- 1 csev staff 618 Dec 18 22:56 index.htm-rw-r--r-- 1 csev staff 883 Dec 18 22:57 sites.htm-rw-r--r-- 1 csev staff 679 Dec 18 22:57 topics.htmcsev We create theappearance of a fixed“menu” by including thenavigation at the sameplace in each page.

Special File Names When a URL points to a directory in your web server, it looks for afile with a special name: index.html, index.htm, index.php, default.htm, etc. While there is a convention, the “default file” is configurable - sonothing is “sure” Usually index.htm or index.html is a safe betThis only works when viewing through a web server - when viewingfrom disk, you must view the file.

body !-- Make sure to style the h1 -- h1 App Engine: Topics /h1 ul li Python Basics /li li Python Functions /li li Python Python Objects /li !-- Leave these two out for a while li Hello World /li li The WebApp Framework /li -- li Using Templates /li /ul /body HTML Comments

Images

Begin TagImagesWhich image to display img src "appengine.jpg"Optional - makesdisplay quicker.Will resize to fit.width "142" height "109"alt "Google App Engine Logo"style "float:right" / End TagPut the image on the rightand wrap text around it.Show this when hovering,images are off, or forscreen readers.All information is communicated through the attributes of the img tag.B

Images h1 img src "appengine.jpg" width "142" height "109"alt "Google App Engine Logo"style "float:right"/ Google App Engine: About /h1 p Welcome to the site dedicated tolearning the Google Application Engine.We hope you find www.appenginelearn.com useful. /p In this case, the file appengine.jpg needs to be in the same directoryas the file index.html.

h1 img src "appengine.jpg" width "142" height "109"alt "Google App Engine Logo"style "float:right"/ Google App Engine: About /h1 p Welcome to the site dedicated tolearning the Google Application Engine.We hope you findwww.appenginelearn.com useful. /p

h1 img src "appengine.jpg" width "142" height "109"alt "Google App Engine Logo" / Google App Engine: About /h1 p Welcome to the site dedicated tolearning the Google Application Engine.We hope you find www.appenginelearn.com useful. /p h1 img src "appengine.jpg" width "142" height "109"alt "Google App Engine Logo"style "float:right"/ Google App Engine: About /h1 p Welcome to the site dedicated tolearning the Google Application Engine.We hope you find www.appenginelearn.com useful. /p

HTML Document Structure

Well-Formed HTML Documents Browsers need to know what contract you are agreeing to (doctype)We need a section for meta-data about the HTML document (head)And then the displayable content of the HTML document (body)

Outline of an HTML Document !DOCTYPE html head meta-data. /head body Page content. /body /html Contract about theHTML style usedthe page.Metadata aboutthe page.Displayable contentof the page.

Outline of an HTML Document !DOCTYPE html head meta-data. /head body Page content. /body /html Contract about theHTML style usedthe page.Metadata aboutthe page.Displayable contentof the page.

A Simple but Modern Page !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd" html head title Learning the Google App Engine /title /head body h1 Google App Engine: About /h1 p Welcome to the site dedicated tolearning the Google Application Engine.We hope you find www.appenginelearn.com useful. /p /body /html

Browsers: Lost in Transition Between 1995 and 2003 browsers were different - often onpurpose to attempt to make their market share “sticky” At some point we knew there needed to be a future whereall browsers did *exactly* the same thing based on CSS andHTML standards How to get from “here” to “there” - no one could “win”

HTML ProprietaryExtensions1993SIMPLEUGLYHTML1999HTML ProprietaryExtensionsHTML ProprietaryExtensions2008StandardCSS andHTMLHow do we let browserscontinue their evil ways whiletransitioning to standards?

QuirksModeHTML ProprietaryExtensionsInconsistencyis OKHTML ProprietaryExtensions1993SIMPLEUGLYHTMLHTML SS andHTMLWeb developers andbrowsers are expectedto be “perfect.”Responsibility goesboth ways.

Designing for the Browsers out there.www.w3schools.com/browsers/browsers stats.asp