Web Page Building Blocks and Web Site Design

Contact Hour 12: Notes for the Session on Tuesday 6th March, 2012.

Books (Castro and Hyslop)

Elizabeth Castro and Bruce Hyslop, “HTML5 and CSS3: Visual Quick Start Guide,” 7th Ed., Peachpit Press, 2012. ISBN: 0321719611. Web site: http://www.bruceontheloose.com/htmlcss/. I used this for most of the examples.

Books (Head First)

Elisabeth Freeman and Eric Freeman, “Head First HTML with CSS & XHTML,” O’Reilly Media Inc. 2005. ISBN: 0-596-10197-X. Brilliant new addition to the Head First series (see Head First Java). Many more Head First books on web technology, programming and applications are now available!

Books (Dive into HTML5)

Dive into HTML5 by Mark Pilgrim with contributions from the community. Free online at http://diveintohtml5.info/.

In print as Mark Pilgrim, HTML5: Up and Running, O'Reilly Media, Inc., 2010. ISBN-10: 0596806027, Amazon.

Books (Niederst Robbins -- Nutshell)

Jennifer Niederst Robbins, “Web Design in a Nutshell,” 3rd Ed., O’Reilly, February 2006. ISBN: 0-596-00987-9. Very good reference! Buy if you’re serious about Web Design.

Books (Niederst Robbins -- Web Design)

Jennifer Niederst, “Learning Web Design - A Beginner's Guide to (X)HTML, Stylesheets and Web Graphics,” 3rd Ed., O’Reilly Media Inc., June 2007. ISBN: 0-596-52752-7. Very nice book. I have the second edition.

Introduction

While web pages have become increasingly complex, their underlying structure is simple.

A web page is built on a structure that is defined in HTML.
HTML houses your content and describes its meaning.
Bowsers render your HTML encased content for users.

The Components of a Web Page

A web page is made up of three components

Text content
References to other files
Markup

All defined in text so easily created, stored and viewed.

Text content is the bare text that appears on the page to inform visitors about your business, family vacation, products, or whatever the focus of your page is.

References to other files include references to images, audio, video and SVG files that can be loaded into the page, links to other HTML pages, as well as stylesheets (for presentation) and JavaScript (to add behaviour).

Markup the HTML elements that describe your text content and make the references work. (The m in HTML stands for markup.)

Meta Data

In addition to the visible content, a web page also includes HTML that provides information about the page itself. This is called metadata¹⁾

Examples of metadata:

Information about the content's primary language
Character encoding
Accessibility information

A Basic HTML Page

Follow the link to the page.
View source

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Blue Flax (Linum lewisii)</title>
  </head>
  <body>
    <article>
       <h1>The Ephemeral Blue Flax</h1>
 
       <img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
 
       <p>I am continually <em>amazed</em> at the beautiful, delicate 
       <a href="http://en.wikipedia.org/wiki/Linum_lewisii" rel="external" title="Learn more about the Blue Flax">Blue 
       Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower 
       remains by the afternoon. They are the very definition of ephemeral.</p>
    </article>
  </body>
</html>

Things to note

The markup starts with the HTML doctype declaration <!DOCTYPE html>
The HTML markup (highlighted in the view source window) is enclosed between the “tags” <html lang=“en”>…</html>
- The 'lang=“en”' attribute specifies that the text content of the document is english. You could be more specific, for example lang=“en-UK” if you wanted to use UK spellings for words like colour, behaviour and aluminium that are spelled differently in US english (en-US).
The content of the head which contains the metadata and consists of a:
- title (usually displayed in the browser tab, but also used in bookmarks and results of google searches)
- <meta charset=“utf-8” /> declares the character encoding of the document.
The content of the body element (between the opening <body> and closing </body> tags) is displayed in the browser

Semantic HTML

Markup with Meaning. Second example.

View source.

The example is the same as the previous one except that it has an extra paragraph added. You should note that the HTML elements do not dictate how the content should appear, just what they mean. Each browser has a default stylesheet which dictates how each element is displayed by default. You can see this by inspecting the elements using your browser's built-in developer tools.

Things to note

Header elements h1…h6 are rendered differently to normal text
Some elements (e.g. article, h1, and p display on their own line, while others (e.g. the 'a' and the 'em') render on the same line as other content. This again is a function of the stylesheet. On-the-same-line content is known as phrasing content. The rest are known as semantic elements.²⁾
In HTML5 the small tag is intended to mean small print rather than render small
New elements header, footer, nav, article, section, and others have been added to HTML5 to enrich the semantic meaning of your content.

The Semantics of Our Page

<article> – a distinct piece of content
Heading <h1>, <h2>, etc. Should be regarded as heading, subheading etc.³⁾
Image <img> – alt describes the image and should always be present.
Paragraph <p> may contain phrasing elements such as:
Emphasis <em> and
Link <a> – puts the Hypertext into HTML and makes the Web what it is.

Why Semantics Matter

Improve accessibility
Improved search engine optimization (SEO)
Lighter code and faster pages⁴⁾
Easier code maintenance and styling.

Mark-up

HTML stands for “HyperText Mark-up Language”

Allows information about the structure of a document to be included in the document itself.

Includes formatting instructions
Describes the relationships between parts of the document
Is text-based so universally accessible

HTML mark-up

Four Types of Mark-up provided in HTML

Elements
Attributes
Values
Declarations (discussed later)

Mark-up: Non-empty Elements

  <element-name [attribute="value"]* >
     Labels that identify the different 
     parts of a web page.
  </element-name>

A non-empty element consists of an element opening tag: <tag-name>, zero-or more attributes (name-value pairs), content which can contain other elements and a closing tag </tag-name>.

Mark-up: Empty Elements

  <element-name [attribute=″value″]* />

Elements can be empty. An empty element consists of a tag opening: <tag-name; zero-or more attributes (name-value pairs) and a tag closing />.

In HTML5 and HTML4, the slash at the end of the tag is optional, and you can write:

  <element-name [attribute=″value″]*>

However, in XHTML, the slash is required. For consistency with XHTML, we will use the closing slash except in a few isolated cases. It does no harm in HTML 4 or HTML5.

Mark-up: Attributes and Values

Attributes contain information about the data in the document.
Attributes always have a name and a value.
Value is enclosed in double quotes.

Mark-up: Types of Attributes

Arbitrary text: alt=“Picture of my cat Lucy.”
Enumerated or predefined values: media=“screen” media=“print”
Number or percentage: width=“300” (pixels) height=“50%”
Colour: either a name or hexadecimal representation of the Red, Blue, Green content of the colour bgcolor=“white”, bgcolor=“#FF55FF”
References to other files/objects in the form of a URL: src=“http://www.swan.ac.uk/map.gif”

Parents and Children

If one element contains another, it is considered to be the parent of the enclosed, or child element.
Any elements contained in the child element are considered descendants of the outer, parent element.

A web page can thus be represented by a tree which:

provides the foundations for the inheritance rules in style sheets
can be manipulated as such by scripting languages.

Elements must be Properly Nested

Correct:

<tag-a>
  <tag-b>content</tag-b>
</tab-a>

Incorrect:

<tag-a>
  <tag-b>content</tag-a>
</tab-b>

Make sure that you know why the second example is incorrect.

Textual Content

Textual content is the bulk component of most web pages

Special Properties of HTML text

White space is not significant⁵⁾.
Spaces, tabs, new lines are compressed into a single space.

This means that you can’t rely on spaces to get layout effects.

HTML Text is Unicode

You can either use character entities or character codes for foreign language characters and symbols.

For example:

é or é is e-acute (<html>é</html>)
© or © is the copyright symbol <html>©</html>

The default character set is UTF-8.

See a full list of character entities at www.elizabethcastro.com/html/extras/entities.html

& < > and " are special

You Can't type &, <, >, or “ directly into text, you must use the entities &, <, > and ".

This makes the presentation of example HTML code in a web page something of a challenge!

Links, Images and other Non-Text Content

Links put the HyperText into HTML and allow a document to directly refer to (part of) another document.

Examples of images and other Multimedia content include:

GIF, JPEG, PNG, SVG images
Audio
Video
Flash animations

Note that each piece of multimedia content to be displayed in the page requires a separate HTTP request and may require a plug-in or helper application to display.

File Names

Guidelines when building a web site

use all lower case letters in file names
separate words with a dash
for consistency use all lower case letters and dashes for folders too
use a proper extension .html

Notes

The filename you choose for your folders and files determins what users will have to type to get to your pages.
Use of lower case letters makes it easier for your visitors to avoid typos and makes it easier for you to build your site and the links between pages and resources.
Dashes are preferred to spaces because spaces have to be encoded with special characters which are hard to remember and type. Search engines prefer dashes to underscores.
Web servers usually identify the type of object to send to the browser by file extension. Although .htm (the default on Windows) can be used, html is more universally used and is preferred.

Hypertext

Hypertext was conceived by Vennevar Bush in the 1940s, named by Ted Nelson in the 1960s and incorporated into the Web by Tim Berners-Lee in the 1980s.

Hypertext is (Loosely) modelled on the human brain in which associations are made by linking neurons. “Semantic Web” links associated ideas into a world-wide web.

See Hypertext for more information.

The Uniform Resource Locator (URL)

Addresses any resource (web page, file, image, video, web application) on the Internet.
Invented by Tim Berners-Lee (along with HTTP and HTML)

URL: Scheme

Usually web protocol:

http: //www.swan.ac.uk/lis/

Other schemes:

  mailto:   news:
  ftp:      gopher:
  file:     telnet:

The scheme specifies the application protocol to be used by the web browser (user agent) to access the resource. In this example, the protocol is the web protocol HTTP – Hypertext Transfer Protocol.

URL: Host

The host part of the URL is the DNS name or IP address with an optional port number.

http:// <html><b>www.swan.ac.uk</b></html> /lis/

If the host field is a DNS name then the browser will need to perform a DNS lookup to find the corresponding IP address. The port number is normally assumed to be 80 and is omitted. However, it can be specified when the web server is not running on port 80 as as in http://webcache.swan.ac.uk:3128/ which is the proxyy server for the University.

URL: Path

URL path: usually directory-path + file:

http://www.swan.ac.uk /lis/

Path and Host in HTTP GET Request

GET /lis/ HTTP/1.1
Hostname: www.swan.ac.uk

Proof – follow the link and view headers in Firebug:

<html><a target=“firebug” href=“http://www.swan.ac.uk/lis/”>http://www.swan.ac.uk/lis/</a></html>

Only path is included in HTTP request line
Hostname field is included in HTTP request header

Other Example URLs

ftp://eechris@en4.swan.ac.uk
news:soc.culture.welsh
mailto:C.P.Jobling@Swansea.ac.uk
file:///w|/work/home.htm
http://voyager.swan.ac.uk/cgi-bin/Pwebrecon.cgi?DB=local&v1=1&ti=1,1&Search_Arg=Castro&Search_Code=NAME_&CNT=10&phrase_type=1&HC=3&SID=1

Explanation

FTP request
News group
Mail address
Local file
A CGI script with arguments

Note the browser may not handle all of these itself. It may call on another application (e.g. mail or news reader client) to handle the URL. It is important to note that the file “protocol” accesses local files only, and doesn't use a web server or a network connection (although the operating system may use a network connection to open a file that is stored on a network file server).

Linking Within a Site

Most links that you create will be to other pages or objects on your own site. E.g.

Home page to section pages
Section pages to content pages
Back links, etc.

You typically do not include http://hostname for such links.

Linking Within a Site

The browser will assume that the resource is on the same server as the current page.

It will attempt to use the path to find the resource.
Paths can be ”absolute“ rooted at the document root of the web site or ”relative“ either to the document root or to the current web page.

Relative pathname notation can be a bit tricky (easier to understand if you are familiar with UNIX filename notation)

It is important to note that the browser constructs the path from the rules that follow. When a link is followed, or an object is downloaded into the current web page, the full resource path is always sent in the HTTP request!

Understanding Paths: An Example Website

Visit the demo website http://eg-146.cpjobling.org.uk/index.html to learn more about paths and how they relate to the physical files served by a web site.

Linking within a Page

You can also link to any element within a page that has an id attribute set.
For example, say a web page contains

<h1 id="chapter1">Chapter 1: It begins</h1>

Within the page (e.g. in a table of contents) we can refer to this heading as:

<a href="#chapter1">Jump to Chapter 1</a>.

Linking to part of a page across sites

From another page (in same site) we refer to this as:

<a href="books/book1.html#chapter1">Go to Chapter 1 of Book 1</a>.

Across the Internet the link would be:

<a href="http://www.books.com/books/book1.html#chapter1">
  Go to Chapter 1 of Book 1 at books.com
</a>.

Linking Images to Web Pages

Often we want an image to act as a link to another website. For example:

The HTML Markup for this is:

  <a href="http://www.swan.ac.uk/">
    <img src="uws-shield.jpg" alt="Jump to UWS." width="100 height="119" />
  </a>

HTML and XHTML

HTML 4 is mark-up for forgiving browsers.
XHTML is mark-up that insists that standards are used!
HTML 4 and XHTML use precisely the same elements, attributes and values.
They differ in syntax.
HTML5 will accept either syntax but since XHTML style enforces good practice, we'll use that.

HTML is rather relaxed

But XHTML:

requires that html, head, body and DOCTYPE be present.
insists that all tags (even empty ones) have to be closed.
requires that all attribute values are enclosed in quotes.
demands that all elements, attributes and predefined values be in lower case.
requires that all values, even those that have same name as the attribute be present.

Benefits of XHTML's Pedantry

Keeps code consistent, well structured and free of non-standard tags.

Easier to:

update and edit
format with CSS
generate from or convert to a database
adapt to other systems, such as hand-held devices or assistive technologies

More benefits (XML)

Logical step on transition from HTML to XML (see later)

Is a new standard so will be supported well into the future.
Tags for older browsers are deprecated and will eventually not be supported.

Since these notes were written the community has somewhat rejected XML in the favour of HTML5, an evolution of HTML4.

More benefits: browser support and accessibility

More likely to be properly and consistently supported by modern browsers on all platforms.
Eases support for statutory accessibility guidelines.

Versions and Flavours of (X)HTML

Three current flavours of both HTML 4 and XHTML 1.0

transitional, frames, and strict.

XHTML 1.1 and HTML5 reject many of the tags that are deprecated in HTML 4 strict and frames,

Use HTML5/XHTML 1.1 if you want to use standards, ~~HTML if you don’t care about standards.~~

~~Use transitional if you want to use deprecated tags.~~

~~Use frames if you need framesets.~~

Strict Flavours of (X)HTML

Strict HTML/XHTML does not allow either framesets or deprecated tags.

Latest version of XHTML recommendation is XHTML 1.1 strict only!⁶⁾

HTML5 better reflects actual usage of HTML in web applications etc and will be used in this module!

DOCTYPE Declaration

You specify which version and flavour of (X)HTML you are using with a DOCTYPE declaration.
If your (modern) browser doesn’t find a DOCTYPE declaration it uses Quirks mode.
If it does, it can be stricter about how it interprets your HTML code.

DOCTYPE for HTML5:

<!DOCTYPE html>

DOCTYPE for XHTML 1.1:

<!DOCTYPE html
          PUBLIC " -//W3C//DTD XHTML 1.1//EN"
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >

Language and Character Set

The Web is international and you should ensure that you specify the language that your web pages are written in and the character encoding that is used to render your page's content.

This is done like this:

<!DOCTYPE html>
<html lang="en"><!-- language of the document -->
  <head>
    <meta charset="utf=8"><!-- character encoding -->
    <title>...</title>
  </head>
  :
</html>

Notes:

utf-8 is the encoding that is typically used for English and the major Europea languages. For other languages, you may have to use other encodings.
you can also specify the direction of the text on the page. Default is left-to-right but right-to-left can also be specified.

Style sheets

Every web browser uses a default scheme to display each HTML tag.

E.g. text in an h1 element is often larger than and h2 tag. Both are usually shown bold face.

To give more control you should add style using style sheets.

Styles are defined by the Cascading Style Sheet (CSS) standard.

The "cascade" in Cascading Style Sheets

Styles are said to cascade because:

styles defined in an external style sheet, will be overridden by styles defined in the head of a document
which in turn will be overridden by styles defined locally in an element
and finally all styles can be overridden by local browser settings.

An Example Style Rule

p {
      font-family: "Trebuchet MS", "Helvetica", sans-serif;
      font-weight: bold;    
      color: #2266cc;  
}

The selector: determines which elements the rule is applied to (here <p>)
Curly brackets (braces): open and close the declarations and contains style rule declarations
This rule has three declarations:
- Each declaration has a property name followed by a colon, one or more values (separated by commas) and a final semicolon.
- Here we define the the font-family (whichever is the first that the browser supports), font weight (bold), and the (foreground) colour of the text in a paragraph.

Designing Your Site

What do you want to convey?
Consider your audience
What will appeal to them?
Lots of graphics or quick downloads?
How many pages will you need?
What sort of structure will you have?
Do you want your visitors to follow a set direction?
Do you want them always to be able to go in any direction?
Sketch out your site on paper.
Devise a simple, consistent naming system for your pages, images and external files.

Homework

Visit the example pages Page 1 and Page 2 and explore them using your browser's view source and developer tools⁷⁾ Expand these notes in any way you feel appropriate.
Explore the Demo Web Site and answer the questions given on the homework page.

Acquiring the Code

If you would like a copy of the web site to serve as a basis for your own projects, it is available from GitHub in cpjobling/web-page-building-blocks. Follow the links to example/eg-146 to view the source code. Choose download to download a copy of the site (and a version of the the presentation) as a zip file. Alternatively, join GitHub and clone the project!

Coming Next

[This module list is being updated to HTML5 as we go along. Expect to see some changes in the table of contents]

An Introduction to Web Content
Web Page Building Blocks and Web Site Design
Basic HTML Structure
Cascading Style Sheets
CSS Layout
More XHTML: Lists, Tables and Frames
Dynamic Effects with CSS and JavaScript
Applets, Plug-ins and Multimedia
XML and XSLT
Forms and CGI

¹⁾

Literally data about the data: For example, a webpage may include metadata specifying what language it's written in, what tools were used to create it, and where to go for more on the subject, allowing browsers to automatically improve the experience of users. See Metadata.

²⁾

In older versions of the standard, there were block-level and inline-elements in the HTML definition. However, HTML5 insists that decisions of how the elements should be rendered is now completely in the realm of the stylesheets. They are declared in the default stylesheet as you can see by examining the elements in your browser's development tools.

³⁾

Headings help with accessibility. All documents should start with a <h1>

⁴⁾

Older versions of HTML relied on presentational tags, tables for layout, etc to get the display effect desired by web designers. This became the stylesheet's job in strict versions of HTML 4 and XHTML 1, and XHTML 1.1. HTML5 completes the process by removing the old tags from valid markup.

⁵⁾

but it is preserved in the internal DOM representation of the document

⁶⁾

Version 2.0 of XHTML is in draft recommendation stage. but it has been abandoned in favour of HTML5

⁷⁾

Latest versions of Google Chrome, Safari, Opera and Internet Explorer 9 have built-in developer tools. If you are using Firefox, the latest version, 10, has developer tools built-in. For older versions you will need to install the Firefug plugin http://getfirebug.com.

Table of Contents

Web Page Building Blocks and Web Site Design