HTML Hypertext Markup Language - Open.Michigan

HTMLHypertext Markup LanguageCharles Severancewww.dr-chuck.com

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 p This is a paragraph with a strong loud /strong word in it. /p p And this is yet another paragraph. /p

li a href "mailto:si539@ctools.umich.edu"title "Send mail to si539@ctools.umich.edu" si539@ctools.umich.edu /a Source: CTools http://ctools.umich.edu /li 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 70http://en.wikipedia.org/wiki/Robert Cailliau

The big picture. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " html xmlns "http://www.w3.org/1999/xhtml" xml:lang "en" head title University of Michigan /title .A web server produces HTML whichis handed to a browser which needsto lay it out in a blink of an eye andhave it pixel perfect as good as aprint brochure.(Screenshot) Source: http://www.umich.edu(Server) CC: BY Ketmonkey (flckr) .en

HTML has evolved a *lot* over theyears - as computers and networkshave gotten faster.19952007Source: www.yahoo.com

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* over theyears - as computers and networkshave gotten faster.http://en.wikipedia.org/wiki/HTML

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 you wroteHTML and browsers displayed it- since we wrote it by hand - andmodems were slow - it wasnever too long and never toocomplex. The browser wasnever the rate limiting factor.Writing HTML was like using asimple, weak word processor.The tags acted as formattingcommands to the browser.

The Ugly Middle Ages Web Designers designed to browser capabilities - down to particularminor versions of browsers. Extensive testing was needed on lots of browsers HTML was UGLY, Hard to develop, and brittle - what looked superbon one browser - often was broken on another browser - even a laterrelease of the same brower.Designers used tables, nested tables, and chopped up graphics to gaincontrol of the look and feel of 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-1999 HTML became more complex and each browser was different.2000-2005 Browsers slowly supported CSS to varying levels. HTML wasstill ugly to support multiple browsers.2005-2008New browsers supported CSS. Old browsers were still prettypervasive 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 - don’t make all the mistakes:) 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 HTML

HTML

HTML Tag BasicsStart tagTags “mark up” the HTMLdocument. The tags are read andinterpreted by the browser - butnot 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

The Basic Outline !DOCTYPE . html head !-- Describes and sets up the document -- /head body !-- The document to be displayed -- /body /html

A Simple but Modern Page !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 -strict.dtd" html xmlns "http://www.w3.org/1999/xhtml" head title Learning the Google App Engine /title /head body h1 Google App Engine: About /h1 p Welcome to the site dedicated to learning the Google Application Engine. We hope you findwww.appenginelearn.com useful. /p /body /html

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 -strict.dtd" html xmlns "http://www.w3.org/1999/xhtml" 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 Begin TagWhitespace and end lines do not matter except in attributes.End TagAttribute

Validating HTML To validate a web page, you can use the online validatorPaste, or upload the HTML or use a URLhttp://validator.w3.org

HTML HEAD META NAME "GENERATOR" CONTENT "Adobe PageMill 3.0 Win" TITLE dr-chuck.com /TITLE /HEAD BODY BGCOLOR "#000000" LINK "#AAAAAA" VLINK "#AAAAAA" ALINK "#AAAAAA" table Border 0 tr .Source: W3C http://validator.w3.org/checkSource: www.dr-chuck.com

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " html xmlns "http://www.w3.org/1999/xhtml" xml:lang "en" head title University of Michigan /title .Source: W3C http://validator.w3.org/checkSource: www.umich.edu

h1 Google App Engine: About /h1 p Welcome to the sitededicated to learning theGoogle Application Engine.We hope youfind www.appenginelearn.comuseful. /p White space and line ends in HTML are ignored - thebrowser re-flows text based on width and font.

Browser Text Wrapping / ResizeThe browser wraps lines based on its width - resizing the browserdynamically re-wraps lines.

Symbols body h1 HTML: Special Characters /h1 p Special characters are indicated bythe & character. We can use thisto display < and >. /p /body

Header Levels h1 First Major Heading /h1 h2 First Subheading /h2 h2 Second Subheading /h2 h3 A Sub-subheading /h3 h1 Another Major Heading /h1 h2 Another Subheading /h2 Headers were very ugly in default rendering - most folks started with h3 .

Lists body h1 App Engine: Topics /h1 ul li Python Basics /li li Python Functions /li li Python Python Objects /li li Hello World /li li The WebApp Framework /li li Using Templates /li /ul /body

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 Comments

Link AnatomyStart TagClickable Text a href "sites.htm" Sites /a Where to go when link isclicked (an attribute).We will make this pretty later with CSS.End Tag

Links Between Files 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.com useful. /p

Multiple Filescsev 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

Special File Names When a URL points to a directory in your web server, it looks for afle with a special name: index.html, index.htm, index.php, default.htm, etc. While there is a convention, the “default fle” is confgurable - 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 fle.

Navigating 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

Images

Begin TagImages img src "appengine.jpg"Which image to displayOptional - makesdisplay quicker. Willresize to fit.width "142" height "109"alt "Google App Engine Logo"style "float:right" / End TagPut the image on the right andwrap text around it.Show this when hovering,images are off, or for screenreaders.All information is communicated through the attributes of the img tag.

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 directory as the fileindex.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

Summary HTML has gone through many changes and evolutions It started clean and simple - then got ugly and nasty - now we areback to a clean and simple approachHTML Markup needs to focus on meaning - not formattingFormatting is handled using CSS - Cascading Style Sheets

History of HTML / CSS HTML 1.0 - 1993 - The Good Old Days - life was simple HTML 2.0 - 1995 - Some interesting layout features - abused CSS 1 - 1996 HTML 3.2 - 1997 HTML 4.0 - 1997 - Layout moving toward CSS CSS Level 2 - 1998 HTML 4.01 - 1999 - What we use today HTML has evolved a *lot* over the years - as computers and networks have gotten faster.