l02 4up

2
1. Introduction
A web page has structure
HTML5
COM1004: Web and Internet Technology
It also has appearance

CSS
Lecture 2: Anatomy of a Web page

Dr. Steve Maddock and Dr. Mike Stannett s.maddock@dcs.shef.ac.uk m.stannett@dcs.shef.ac.uk
And interaction
JavaScript
Next semester: And sometimes a back-end database on a server

PHP, MySQL
28/09/2012
Dr Steve Maddock, The University of Sheffield
1. Introduction
Use of HTML5 to structure the page Elements include:
header, nav, article, section, aside, footer, div
Search facility
1. Introduction
The appearance of the website can be controlled using a stylesheet
Cascading Style Sheets (CSS) is used for Web documents
banner navbar
There are also elements for headings, paragraphs, tables, figures, spans, And more advanced features
canvas, video, audio,
main content
with other areas, e.g. links
With footer
Without
28/09/2012
28/09/2012
5 Demo of switching stylesheets: http://adactio.com/?skin=default
1. Introduction
And interaction: JavaScript
Example: move the figures on the page Moving balls HTML5 games canvas and JavaScript
28/09/2012
28/09/2012
2. Structure and appearance

<!DOCTYPE html> <html lang="en">
3. HTML: A potted history
Structure: HTML
Appearance: CSS
h1 { color: teal; font-family: Georgia, serif; font-size: 200%; } p { color: blue; } ul { padding-left: 100px; list-style-type: circle; } li { color: #123456; }
<head> <meta charset="utf-8" /> <title>Team X</title>  </head> <body> <h1>Team X</h1> <p>We are Team X.</p> <ul> <li>Art</li> <li><a href="h t t p : / / w w w . t h e s i m p s o n s . c o m / ">Bart</a> </ l i> <li>Cara</li> </ul> </body> </html>
Annotate a document to, for example, show its structure eXtensible Markup Language (XML)
Strict set of rules for defining the encoding a document or an arbitrary data structure
HyperText Markup Language (HTML) for Web documents is not strict
http://en.wikipedia.org/wiki/File:RecipeBook_XML_Example.png
teamx1.html
teamx1.css
28/09/2012 Dr Steve Maddock and Dr Mike Stannett, The University of Sheffield
<link rel="stylesheet" href="teamx1.css" />

28/09/2012
10

1998: W3C decided XML was the future
eXtensible Markup Language metalanguage a language for defining other markup languages used to define many of the Webs markup languages, e.g. VoiceXML

SGML HTML HTML 4 XML XHTML SVG MathML
blue indicates ancestry; orange indicates which metalanguage was used to define each language
B. Lawson and R. Sharp, Introducing HTML5, New Riders 2011
2004: WHATWG Web Hypertext Application Technology Group

Opera, Mozilla, Apple, www.whatwg.org Web Applications 1.0
2006: W3C resurrected their HTML working group

2009: stopped work on XHTML 2.0 Score: Purity of design 0 1 pragmatism and not breaking the Web
XHTML Extensible HTML

Encourages valid, well-structured code
Now being developed simultaneously by the two groups

living HTML spec Current spec is over 900 pages
www.w3.org/TR/html5 whatwg.org/html5
Work began on XHTML 2.0

Broke backwards compatibility
2014 is the target date for W3C Recommendation
p.109, Chapman, N and J. Chapman, Web Design: A complete introduction, John Wiley & Sons, 2006.
28/09/2012 Dr Steve Maddock, The University of Sheffield 28/09/2012 Dr Steve Maddock, The University of Sheffield
W3C [CC-BY-3.0 (www.creativecommons.org/licenses/by/3.0)], via Wikimedia Commons
11
12
4. HTML Markup
A general document is made up of elements
start mix of text and tag elements <??> matching end tag </??>
4. HTML Markup
<body> <h1>Team X</h1> <p>We are Team X.</p> <ul> <li>Art</li> <li><a href="http://www.thesimpsons.com/">Bart</a></li> <li>Cara</li> </ul> </body>
<body> Can also have empty elements, e.g. <br /> <h1>Team X</h1> <p>We are Team X.</p> <ul> <li>Art</li> <li><a href="http://www.thesimpsons.com/">Bart</a></li> <li>Cara</li> </ul> </body>
Six heading elements: h1,h2,h3,h4,h5,h6 The paragraph element: p List types:

Unordered lists (ul); items (li) Ordered lists (ol); items (li)
Attributes are named properties of elements

28/09/2012 Dr Steve Maddock, The University of Sheffield
attribute_name = value inside quotes
Definition lists (dl); items (dt term and dd definition)
The hyperlink (anchor) element is a

28/09/2012
13
14
5. Hyperlinks
The ends of hyperlinks are called anchors
They link a source and a destination <a href="URL">link text</a>
5.1 Relative URLs

Orange gives the relative filenames from the start position:
From within
<a href="../feedback.html">feedback</a>
The .. refers to the next folder level up in the hierarchy
Default display: blue and underlined Once visited: purple and underlined
<body> <h1>Team X</h1> Uses an absolute URL <p>We are Team X.</p> <ul> <li>Art</li> <li><a href="http://www.thesimpsons.com/">Bart</a></li> <li>Cara</li> </ul> </body>
Absolute URL: <a href="http://www.desperatesw.co.uk/TF/../ feedback.html">feedback</a>

Chapman, N and J. Chapman, Web Design: A complete introduction, John Wiley & Sons, 2006.
28/09/2012
15
16
5.1 Relative URLs

Useful because can easily move whole Web site to a different host machine, as the links are relative Fragment identifier can be used to link to a location within a document:
<a href="../feedback.html#Comments">Send a comment</a>
2. Structure and appearance

Structure: HTML
Appearance: CSS
h1 { color: teal; font-family: Georgia, serif; font-size: 200%; } p { color: blue; } ul { padding-left: 100px; list-style-type: circle; } li { color: #123456; }
<head> <meta charset="utf-8" /> <title>Team X</title>  </head> <body> <h1>Team X</h1> <p>We are Team X.</p> <ul> <li>Art</li> <li><a href="h t t p : / / w w w . t h e s i m p s o n s . c o m / ">Bart</a> </ l i> <li>Cara</li> </ul> </body> </html>
The location in the document is identified with an id:

<h1 id="Comments">Your comments</h1>
Implicit destination anchor at the start of every document

<a href="#">Jump to top of page</a>
teamx1.html
teamx1.css
<link rel="stylesheet" href="teamx1.css" />

28/09/2012 Dr Steve Maddock, The University of Sheffield 28/09/2012
17
18
6. The doctype and the head

Must include in all of your html files Specifying the doctype triggers browsers that need it to operate in html standards mode The root level of the document is the html element The html element has a language attribute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Team X</title> </head> <body>
6.1 History: XHTML document type declaration

XHTML is an XML-based language, defined by a document type definition (DTD) An XHTML document must include a document type declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

A comment
DTD Strict
Modern Web browsers have the DTD incorporated into their code.
Public Identifier -//W3C//DTD XHTML 1.0 Strict//EN -//W3C//DTD XHTML 1.0 Transitional//EN URL http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd
en means English <HTML lang="fr"> <HEAD> <TITLE>Un document multilingue</TITLE> </HEAD> www.w3.org/TR/html4/struct/dirlang.html
Transitional
Frameset
-//W3C//DTD XHTML 1.0 Frameset//EN
http://www.w3.org/TR/xhtml1/DTD/ xhtml1-frameset.dtd
28/09/2012
19
20
6.2 The document head

The content of the head element is not rendered in the browser window The title element is compulsory and is displayed in the title bar The meta element provides a general-purpose mechanism for adding metadata to HTML documents charset defines the documents character encoding
Security risk of not setting it Must be in first 512 bytes multibyte character encoding for Unicode.

<head> <meta charset="utf-8" /> <title>Team X</title> </head> <body>
Other meta data elements use name and content attributes Other elements
link stylesheets (see later in this lecture) script JavaScript (see a later lecture)

<head> <meta charset="utf-8" /> <title>Team X</title> <link rel="stylesheet" href="teamx1.css" /> <meta name="author" content="Steve Maddock" /> <meta name="description" content="Team X web site for COM1004" /> <meta name="keywords" content="Team X, sports" /> </head>
28/09/2012
21
html
22

<meta name="robots" content="index, nofollow" />
7. Document structure
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Team X</title> </head> head body
title
h1
p ul
ul ul ul
metadata
Chapman, N and J. Chapman, Web Design: A complete introduction, John Wiley & Sons, 2006.
<body> a <h1>Team X</h1> <p>We are Team X.</p> content <ul> <li>Art</li> <li><a href="http://www.thesimpsons.com/">Bart</a></li> <li>Cara</li> </ul> </body> </html>
28/09/2012
28/09/2012
23
24
7.1 Layout
<body> <h1>Team X</h1> Indent 2 spaces <p>We are Team X.</p> <ul> <li>Art</li> <li><a href="http://www.thesimpsons.com/">Bart</a></li> <li>Cara</li> </ul> </body> <body> <h1>Team X</h1> <p>We are Team X.</p> Indent 4 spaces <ul> <li>Art</li> <li><a href="http://www.thesimpsons.com/">Bart</a></li> <li>Cara</li> </ul> </body>
8. Appearance
A browser (sometimes called a User Agent) has defaults for the appearance of each element A browser can offer the user options to override these defaults Alternative: Glue a stylesheet
Some editors will layout the code for you There are also tools to tidy up your HTML, e.g. HTML Tidy (http://inf ohound.n et/tidy/)
28/09/2012
28/09/2012
25
26
8.1 Gluing a stylesheet to a document

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Team X</title> <link rel="stylesheet" href="teamx1.css" /> </head> <body> <h1>Team X</h1> <p>We are Team X.</p> <ul> <li>Art</li> <li><a href="http://www.thesimpsons.com/">Bart</a></li> <li>Cara</li> </ul> </body> </html>
8.2 The CSS

<!DOCTYPE html> <html lang="en"> teamx1.css h1 { color: teal; <head> font-family: Georgia, serif; <meta charset="utf-8" /> font-size: 200%; <title>Team X</title> } <link rel="stylesheet" href="teamx1.css" /> p{ </head> color: blue; <body> } <h1>Team X</h1> ul { <p>We are Team X.</p> padding-left: 100px; <ul> list-style-type: circle; <li>Art</li> } <li><a href="http://www.thesimpsons.com/">Bart</a></li> <li>Cara</li> </ul> </body> </html>
28/09/2012
li { color: #123456; /* hexadecimal */ } A comment
teamx1.html
27
28
8.2 The CSS

A stylesheet is a set of rules
Selector { Property: Value; }
h1 { color: teal; font-family: Georgia, serif; font-size: 200%; } p{ color: blue; } ul { padding-left: 100px; list-style-type: circle; } li { color: #123456; /* hexadecimal */ }
8.3 Alternative ways to glue a stylesheet to a document

Link to a stylesheet which is in its own file:
<head> ... <link rel="stylesheet" href="teamx1.css" /> </head>
Preferred option
This applies to all occurrences of the relevant element

(See inheritance and cascading)
Old style:
<head> ... <link rel="stylesheet" type="text/css" href="teamx1.css" /> </head>
Multiple declarations separated by semicolons
Embed it in the head element:

<head> ... <style> ...style information goes here... </style> </head>
If property value has a space, use quotes:
Inline it:
<h1 style="color: teal;">My heading</h1>
font-family: "Lucida Handwriting", Papyrus, serif;
28/09/2012
28/09/2012
29
30
8.4 Cascading selectors
Highest priority
9. Debugging
Firefox add-on: getfirebug.com
Cascading priority scheme for CSS sources:

Author/designer styles inline styles, embedded styles, external style sheets User style a local CSS-file specified by the user (possibly using options in the web browser) (user can add !important to end of a rule to override author style) User agent (browser) style Lowest the browser's default presentation of elements priority
Thus inline styles have highest priority (ignoring !important) Different styles can be applied depending on the output device being used, e.g. screen and print versions
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
28/09/2012 Dr Steve Maddock, The University of Sheffield 28/09/2012 Dr Steve Maddock, The University of Sheffield
31
10. Summary
When creating a Web page, separate the structure and the appearance
The structure is given using HTML The appearance is controlled using CSS (Interaction using JavaScript see a later lecture)
Structure and content
+
style 1 (no style)
+
style 2
Next lectures:
HTML5: div; Semantic elements (header, nav, section, article, footer), figure, ; The box model (); Typography CSS: class and id; Contextual selectors; Pseudo-classes; Inheritance and cascading
margin (transparent) border
padding
content
28/09/2012

l02 4up

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

l02 4up

Uploaded by

Copyright:

Available Formats

2

COM1004: Web and Internet Technology

It also has appearance

Lecture 2: Anatomy of a Web page

Next semester: And sometimes a back-end database on a server

Dr Steve Maddock, The University of Sheffield

Dr Steve Maddock, The University of Sheffield

Dr Steve Maddock, The University of Sheffield

5 Demo of switching stylesheets: http://adactio.com/?skin=default

Dr Steve Maddock, The University of Sheffield

Dr Steve Maddock, The University of Sheffield

2. Structure and appearance

3. HTML: A potted history

HyperText Markup Language (HTML) for Web documents is not strict

<link rel="stylesheet" href="teamx1.css" />

3. HTML: A potted history

3. HTML: A potted history

B. Lawson and R. Sharp, Introducing HTML5, New Riders 2011

2004: WHATWG Web Hypertext Application Technology Group

2006: W3C resurrected their HTML working group

XHTML Extensible HTML

Now being developed simultaneously by the two groups

Work began on XHTML 2.0

2014 is the target date for W3C Recommendation

W3C [CC-BY-3.0 (www.creativecommons.org/licenses/by/3.0)], via Wikimedia Commons

Six heading elements: h1,h2,h3,h4,h5,h6 The paragraph element: p List types:

Attributes are named properties of elements

attribute_name = value inside quotes

Definition lists (dl); items (dt term and dd definition)

The hyperlink (anchor) element is a

5.1 Relative URLs

The .. refers to the next folder level up in the hierarchy

Absolute URL: <a href="http://www.desperatesw.co.uk/TF/../ feedback.html">feedback</a>

Dr Steve Maddock, The University of Sheffield

5.1 Relative URLs

2. Structure and appearance

The location in the document is identified with an id:

Implicit destination anchor at the start of every document

<link rel="stylesheet" href="teamx1.css" />

6. The doctype and the head

6.1 History: XHTML document type declaration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

content </body> </html>

-//W3C//DTD XHTML 1.0 Frameset//EN

Dr Steve Maddock, The University of Sheffield

6.2 The document head

6.2 The document head

<!DOCTYPE html> <html lang="en">

content </body> </html>

Dr Steve Maddock, The University of Sheffield

6.2 The document head

Dr Steve Maddock, The University of Sheffield

Dr Steve Maddock, The University of Sheffield

Dr Steve Maddock, The University of Sheffield

8.1 Gluing a stylesheet to a document

8.2 The CSS

li { color: #123456; /* hexadecimal */ } A comment

8.2 The CSS

Selector { Property: Value; }

8.3 Alternative ways to glue a stylesheet to a document

This applies to all occurrences of the relevant element

Multiple declarations separated by semicolons