html and xhtmls290179663.websitehome.co.uk/.../05/html-handouts.pdf · html version year status -...

Presentation

HTML and XHTML

Version Year Status- 1993 IETF working draft

http://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt

HTML

<HTML></HTML> encloses the entire document and defines it as HTML<HEAD></HEAD> comes after the opening <HTML> tag and contains the <TITLE><TITLE></TITLE> contains the name of the document and must be enclosed by <HEAD> tags<BODY></BODY> contains all of the rest of the document - it is opened after the closing </HEAD> tag and is closed at the end of the document. The only tag to go afterthe closing </BODY> tag is the closing </HTML> tag.

A - anchorADDRESS - formatting tag, often shown in italicsB - formatting tag, boldBASE - optional head element, sets base URL for related documentsBLOCKQUOTE - formatting tag, to indicate portions of text included from other documentsBR - line breakCITE - formatting tag, to indicate text is a citation from another sourceCODE - formatting tag, to indicate text is program source codeDD - list tag, definitionDIR - list tag, directoryDL - list tag, definition listDT - list tag, definition termEM - formatting tag, to indicate text is to be emphasized

H1 - structural heading, top (largest) levelH2 - structural headingH3 - structural headingH4 - structural headingH5 - structural headingH6 - structural heading, bottom (smallest) levelHR - horizontal ruleI - formatting tag, italicsIMG - image anchorISINDEX - optional head element, indicates document is a searchable indexKBD - formatting tag, indicates expected user in source codeLI - list tag, list itemLINK - indicates relationship between documents, varies from browser to browserMENU - list tag, compactedMETA - optional head element, information for client software such as last revision dateNEXTID - optional head element used by automated markup systems to keep track of anchorsOL - list tag, ordered listP - paragraph breakPRE - formatting tag, indicates text should be preformatted (monospaced, preserve whitespace)SAMP - formatting tag, used to mark text output from a computer programSTRONG - formatting tag, strongly emphasize textTT - formatting tag, typewriter text, show text in fixed fontUL - list tag, unnumbered listVAR - formatting tag, indicated a variable in program source code

HTML


2.0 1995 IETF RFCs

Various RFCs: 1866, 1867, 1942, 1980, 2070

tables, image maps, internationalisation

3.0 April 1995 Proposed by Dave Raggett / W3C

Style sheet links, tables, text flow and maths symbols

Netscape Navigator

Internet Explorer

v1 July 1995v2 November 1995v3 August 1996v4 September 1997v5 March 1999v6 August 2001v7 October 2006

Example IE only tags

<bgsound />This tag will set a sound file to play in the background as the Web page is displayed.

<marquee></marquee>With the <marquee></marquee> tag, you can create a scrolling text marquee on your Web page. This tag is also supported by MSNTV.

Example Netscape only tags

<blink></blink>The text within the <blink></blink> tag will turn on and off (blink).

<keygen></keygen>This tag was meant to generate a public key to encrypt HTML forms and make them secure

<layer></layer>The layer tag allows you to place sections of your Web page on different "layers" and treat them as separate objects within your page.

<multicol></multicol>The enclosed text will be displayed in multiple columns.

<nolayer></nolayer>The <nolayer></nolayer> tag indicates HTML that should be displayed in browsers that don't support the <layer></layer> tag

HTML


2.0 1995 IETF RFCs


3.2 Jan 1997 W3C Recommendation

Drops many of the 3.0 features, but includes vendor specific tags

Start with some html

<h1>Flash drives</h1>

<h2>Flash drive capacities</h2>

<p>Here is a picture of a 128MB flash drive which was popular at one time. Note the USB connector. 128MB is regarded as being rather small now.</p>

<img src=”memoryusb.jpg” />

<h2>Current capacities</h2>

<p>Current standards are measured in Gigabytes (1GB, 2GB) with increasingly larger sized devices scheduled to appear soon.</p>

Lets make it more “colourful” in Frontpage

<body bgcolor="#FFFFFF" text="#000080">

<h1 align="center"><font color="#408080" size="6" face="Tunga">Flashdrives</font></h1>

<h2 align="right"><font color="#FF0000" face="Impact">Flash <blink>drive</blink>

capacities</font></h2>

<blockquote> <p><font face="Arial Narrow">Here is a picture of a 128MB flash drive which was popular at one time. Note the USB connector. 128MB is regarded as being rather small now.</font></p></blockquote>

<p align="center"><img src="memoryusb.jpg" width="50%"height="50%" /> </p>

<h2 align="center"><font color="#800040" face="Comic Sans MS">Currentcapacities</font></h2>

<blockquote> <p><font face="Arial Narrow">Current standards are measured in Gigabytes (1GB, 2GB) with increasingly larger sized devices scheduled to appear soon.</font></p>

</blockquote></body>

Lost the content ...

<body bgcolor="#FFFFFF" text="#000080">

<h1 align="center"><font color="#408080" size="6" face="Tunga">Flashdrives</font></h1>

<h2 align="right"><font color="#FF0000" face="Impact">Flash <blink>drive</blink>

capacities</font></h2>

<blockquote> <p><font face="Arial Narrow">Here is a picture of a 128MB flash drive which was popular at one time. Note the USB connector. 128MB is regarded as being rather small now.</font></p></blockquote>

<p align="center"><img src="memoryusb.jpg" width="50%"height="50%" /> </p>

<h2 align="center"><font color="#800040" face="Comic Sans MS">Currentcapacities</font></h2>

<blockquote> <p><font face="Arial Narrow">Current standards are measured in Gigabytes (1GB, 2GB) with increasingly larger sized devices scheduled to appear soon.</font></p>

</blockquote></body>

... in with the ‘style’ or design

Also

• What happens when the same content is to beused in different ways...

...displayed in different styles

Print

• Typically B&W

• Headers & Footers

• Page numbers

PDAs / Mobile devices

• Smaller screen• May not support

full range of colours or fonts

Readers for visual impairments

• Enlarges text

• May discard pictures

• May read the page aloud

HTML


2.0 1995 IETF RFCs



4.0 Dec 1997 W3C Recommendation

Offers “flavours” of HTML - adds, cleans and deprecates features

HTML 4.0

Marks some elements and attributes as deprecated

Strict Deprecated features forbidden

Transitional Deprecated features allowed

Frameset Frames are allowed

HTML 4.0 - Doctypes

Semantic HTML and CSS

Use HTML to describe the content and structure of the document

Use CSS to describe the presentation

Semantic HTML

• No official specification

• NOT presentation (style) or how conveyed

Semanticadj.Of or relating to meaning, especially meaning in language.

Of, relating to, or according to the science of semantics.

• Use HTML to convey the meaning of the document (content)

Semantic HTML

• Avoid presentation markup

<h1>, <h2>, ..<h6><p>, <li><em>, <strong><blockquote>, <cite>

<font color="..., align="center"...<font ...face="...<blink>bgcolor="#FFFFFF" text="#000080"<hr>, <i>, <b>,<br>,<ul>... etc..

Good Bad

<em> instead of <i><strong> instead of <b>

Marking up example

Raw design (text)...

Flash drives

Flash drive capacities

Here is a picture of a 128MB flash drive which was popular at one time. Note the USB connector. 128MB is regarded as being rather small now.

Include image here

Current capacities

Current standards are measured in Gigabytes (1GB, 2GB) with increasingly larger sized devices scheduled to appear soon.

<h1>Flash drives</h1>

<h2>Flash drive capacities</h2>

<p>Here is a picture of a 128MB flash drive which was popular at one time. Note the USB connector. 128MB is regarded as being rather small now.</p>

<img src=”memoryusb.jpg” />

<h2>Current capacities</h2>

<p>Current standards are measured in Gigabytes (1GB, 2GB) with increasingly larger sized devices scheduled to appear soon.</p>

Added semantic markup...

So we end up with this:

And NOT this:

<html><head><title><b>Flash drive</b></title>

<body><b><p>Flash drives</p></b>

<p><i>Flash drive capacities</i></p>

<p>Here is a picture of a 128MB flash drive which was popular at one time. Note the USB connector. 128MB is regarded as being rather small now.</p><img src="memoryusb.jpg" /></img>

<p><i>Current capacities</p>

Current standards are measured in Gigabytes (1GB, 2GB) with increasingly larger sized devices scheduled to appear soon.</p>

</html>

Which comes from this mess:

No other tags allowed in titlesMissing </head>Attempting to use other tags rather than <h1>

<html><head><title><b>Flash drive</b></title>

<body><b><p>Flash drives</p></b>

<p><i>Flash drive capacities</i></p>

<p>Here is a picture of a 128MB flash drive which was popular at one time. Note the USB connector. 128MB is regarded as being rather small now.</p><img src="memoryusb.jpg" /></img>

<p><i>Current capacities</p>

Current standards are measured in Gigabytes (1GB, 2GB) with increasingly larger sized devices scheduled to appear soon.</p>

</html>

Which comes from this mess:

Attempting to use other tags rather than <h2>

Image tag not properly closedMissing <h2>

Missing <p>Missing </body>

Other things to avoid

<br> tags to create lines

Do NOT use tables for page layout - not semantic

Tables are usually more bytes of markup

Longer to download, and more traffic for the host

Tables are usually slower to layout for the browser/can’t do

incremental rendering

Takes longer for the user to see anything on the page

Tables may require you to chop single, logical images into multiple

ones

Redesign very difficult and also increases page load time

Tables break text copying on some browsers

Annoying to the user

Break screen readers

Microsoft home page from 2006

HTML


2.0 1995 IETF RFCs





4.1: Tweaks, fixes and eventually ISO - standardisation


2.0 1995 IETF RFCs






XHTML

XHTML 1.0

XML syntax rules have to be followed

Strict Same as HTML 4.0 Strict

Transitional Same as HTML 4.0 Transitional

Frameset Same as HTML 4.0 Frameset

Tags must be in lower case

End tags cannot be omitted

Empty elements must close properly so<image src = “myimage.png” >

<TITLE>My title </TITLE>

<p>Most tags have an end tag that’s requiredso don’t forget your end tag

<title>My title </title>

</p>

/>

Tags must be correctly nested

Attribute values must be in quotes

<b>Example text in boldwith <i>incorrect</b> nesting </i>

<img src=“correctly_quoted.jpg” />

XHTML


2.0 1995 IETF RFCs






1.1 May 2001 W3C Recommendation

XHTML 1.1

Reformulates the standard into a set of modules

Strict Same as HTML 4.0 Strict

Adds more international language support

All presentation done through CSS

Cascading Style Sheets

CSS level 117 Dec 1996, revised 11 Jan

1999http://www.w3.org/TR/REC-

CSS1

CSS level 212-May-1998, revision

Candidate recommendation on 2.1, July 2007

http://www.w3.org/TR/REC-CSS2/

http://www.w3.org/TR/CSS21/

CSS level 3 Working draft documentshttp://www.w3.org/Style/CSS/

current-work

Variable browser support for different levels

http://www.webdevout.net/browser_support.php

Final transformed document

Content

Design+

A style sheet

Final transformed document

Content

Design+

A different style sheet

Semantic HTML example

Example

http://business.kingston.ac.uk

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Faculty of Business and Law</title>

<link href="images/csslp.css" rel="stylesheet" media="screen" type="text/css"><link rel="alternate" type="application/rss+xml" href="http://bustech2.kingston.ac.uk/rss.php" title="Faculty of Business and Law (Kingston University) - News Feed"><link rel="alternate" type="application/rss+xml" href="http://bustech2.kingston.ac.uk/rss_events.php" title="Faculty of Business and Law (Kingston University) - Events Feed"><style type="text/css"></style>

<div id="middle_col2"> <span class="Heading_title">Welcome</span> <p style="font-family: Lucida Grande,verdana; line-height: 19px; font-size: 12px;" align="justify">TheFaculty of Business and Law was established in 1984 combining theSchool of Business and School of Law, which can both trace their rootsback to the 60s. Currently it has more than 5,000 students enrolled onover 30 undergraduate and postgraduate programmes delivered on either apart-time or full-time basis. <br> <br> Our aim is to provide a modern, stimulating business education, balanced between academic theory and practical applications. Graduates from Kingston University are recognised as top-quality, marketable professionals. <br> </p> <br>

<span class="Heading_1_orange" style="font-family: Lucida Grande,verdana; line-height: 19px; font-size: 12px;"><strong>Latest news</strong></span><span class="Heading_1_orange"><strong>:</strong></span> <a href="http://bustech2.kingston.ac.uk/rss.php"><img src="images/feed.gif" alt="Rss feed" border="0" height="16" width="16"></a><br> <table border="0" cellpadding="3" cellspacing="0" width="98%"> <tbody><tr> <td><img src="images/report.gif" alt="news_icon"></td> <td class="news_line style31 style23"><a href="http://bustech2.kingston.ac.uk/news_item.php?id=82"><span class="Heading_1">Kingston law graduate appointed President of the Surrey Law Society ...</span></a><br> <span class="style39">Surrey Law Society (SLS) has appointed Keith ...<span class="bodytext_small"><a href="http://bustech2.kingston.ac.uk/news_item.php?id=82">Read more</a></span></span></td> <td class="style38" valign="top" width="145"><div class="bodytext_small" align="right">22 Jan 2008 - 11:04:00</div></td> </tr> <tr> <td><img src="images/report.gif" alt="news_icon"></td> <td class="news_line style31 style23"><a href="http://bustech2.kingston.ac.uk/news_item.php?id=81"><span class="Heading_1">Law students in European regional final ...</span></a><br> <span class="style39">A team from Kingston Law School comprising Level 6 ...<span class="bodytext_small"><a href="http://bustech2.kingston.ac.uk/news_item.php?id=81">Read more</a></span></span></td> <td class="style38" valign="top" width="145"><div class="bodytext_small" align="right">21 Jan 2008 - 10:58:00</div></td> </tr> <tr> <td><img src="images/report.gif" alt="news_icon"></td>

<td class="news_line style31 style23"><a href="http://bustech2.kingston.ac.uk/news_item.php?id=80"><span class="Heading_1">Place in national final for BA Business Management student ...</span></a><br> <span class="style39">Ronald Katamba beat eight other students in a ...<span class="bodytext_small"><a href="http://bustech2.kingston.ac.uk/news_item.php?id=80">Read more</a></span></span></td> <td class="style38" valign="top" width="145"><div class="bodytext_small" align="right">11 Jan 2008 - 10:09:00</div></td> </tr> <tr> <td><img src="images/report.gif" alt="news_icon"></td> <td class="news_line style31 style23"><a href="http://bustech2.kingston.ac.uk/news_item.php?id=79"><span class="Heading_1">Deutsche Bank aided by BIT student project ...</span></a><br> <span class="style39">Students studying on the BSc (Hons) Business ...<span class="bodytext_small"><a href="http://bustech2.kingston.ac.uk/news_item.php?id=79">Read more</a></span></span></td> <td class="style38" valign="top" width="145"><div class="bodytext_small" align="right">07 Jan 2008 - 11:28:00</div></td> </tr> <tr valign="top"> <td style="font-family: Verdana; font-size: 11px;" colspan="3"><div align="right"><a href="http://bustech2.kingston.ac.uk/news.php">More</a></div></td> </tr> </tbody></table> </div>

<div id="right_col"> <form id="search" name="search" method="post" action="search.php"> <table style="background-image: url(images/search_back.jpg); background-repeat: no-repeat; background-position: center top;" border="0" cellpadding="2" cellspacing="0" width="100%"> <tbody><tr> <td colspan="2"><span class="style9"><span class="style41"><strong>Search Business & Law:</strong></span></span></td> </tr> <tr> <td colspan="2"><input id="searchterm" name="searchterm" type="text"></td> </tr> <tr> <td colspan="2"><div align="right"> <input name="Submit2" value="Search" type="submit"> </div></td> </tr> </tbody></table> </form> <div align="center"> <p><br> <img src="images/amba_ac.jpg" alt="AMBA" height="54" width="160"><br> </p> <p><br> <img src="images/cim_ac.jpg" alt="CIM" height="60" width="160"></p> <p><br> <img src="images/cipd.gif" alt="CIPD" height="74" width="74"><br> <br> </p> </div> </div>

<div class="contentcenter_bottom" align="center"> © <a href="http://www.kingston.ac.uk/copyright/index.htm">Kingston University</a> | <a href="http://www.kingston.ac.uk/disclaimer/index.htm">Disclaimer</a> | <a href="http://www.kingston.ac.uk/">Kingston University Web site</a> </div> </div></div><script src="images/urchin.js" type="text/javascript">

</script>

<script type="text/javascript">

_uacct = "UA-930382-3";

urchinTracker();

</script></body></html>

Step Action

1 Strip all presentation out

2 Only keep / apply semantic HTML

3 Mark out logical content blocks (div and span)

Exercise• Cross out all CSS that shouldn’t be in the

source

• Use semantic HTML to convey the meaning of the document

div

• markup logical shapes in the document

<div id="name"> .....

</div>

span

• markup logical shapes inside another element

here is some example text with an important <span id="note"> note that may be styled in a different way </> to the rest of the document.

header

leftmenu main rightmenu

footer

Semantic names

• Avoid presentation/location based names

branding, search, links, navigation, news, content, subcontent, badges, siteinfo

header, footer, leftcolumn, rightcolumn, main ...

Good Bad

branding

navigation contentMain contentSub

siteInfo

branding

navigation contentMain contentSub

siteInfo

news

searchInput

badges

html and xhtmls290179663.websitehome.co.uk/.../05/html-handouts.pdf · html version year status -...

Documents