Table of Contents

~~SLIDESHOW~~

Web Page Building Blocks and Web Site Design

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

Lecturer: Dr Chris P. Jobling.

Web Page Building Blocks and Web Site Design

Books (Castro and Hyslop)

<html><a href=“http://www.amazon.co.uk/HTML5-CSS3-Visual-QuickStart-Guides/dp/0321719611/ref=sr_1_7?ie=UTF8&qid=1330353300&sr=8-7” title=“HTML5 and CSS3: Visual Quick Start Guide” target=“_blank”><img src=“http://ecx.images-amazon.com/images/I/41B5bkpeqbL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU02_.jpg” alt=“HTML5 and CSS3: Visual Quick Start Guide (Cover)” height=“350” /></html>

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)

<html><a href=“http://oreilly.com/catalog/9780596101978” title=“Head First HTML with CSS &amp; XHTML” target=“_blank”> <img src=“http://covers.oreilly.com/images/9780596101978/lrg.jpg” alt=“Head First HTML with CSS & XHTML (cover)” height=“350” /></a></html>

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)

<html><a href=“http://oreilly.com/catalog/9780596009878/” title=“Web Design in a Nutshell” target=“_blank”><img alt=“Web Design in a Nutshell (Cover)” src=“http://covers.oreilly.com/images/9780596009878/lrg.jpg” height=“350” /></a></html>

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)

<html><a href=“http://oreilly.com/catalog/9780596527525/” title=“Learning Web Design” target=“_blank”><img alt=“Learning Web Design (Cover)” src=“http://covers.oreilly.com/images/9780596527525/lrg.jpg” height=“350” /></a></html>

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.

The Components of a Web Page

A web page is made up of three components

  1. Text content
  2. References to other files
  3. 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 metadata1)

Examples of metadata:

A Basic HTML Page

<!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

Semantic HTML

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

The Semantics of Our Page

Why Semantics Matter

Mark-up

HTML stands for “HyperText Mark-up Language”

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

HTML mark-up

Four Types of Mark-up provided in HTML

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

Mark-up: Types of Attributes

Parents and Children

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

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

Textual content is the bulk component of most web pages

Special Properties of HTML text

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:

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 &amp;, &lt;, &gt; and &quot;.

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:

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

Notes

  1. The filename you choose for your folders and files determins what users will have to type to get to your pages.
  2. 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.
  3. 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.
  4. 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)

URL: Scheme

Usually web protocol:

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.

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:

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:

Other Example URLs

  1. ftp://eechris@en4.swan.ac.uk
  2. news:soc.culture.welsh
  3. mailto:C.P.Jobling@Swansea.ac.uk
  4. file:///w|/work/home.htm
  5. 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

  1. FTP request
  2. News group
  3. Mail address
  4. Local file
  5. 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.

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.

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

<h1 id="chapter1">Chapter 1: It begins</h1>
<a href="#chapter1">Jump to Chapter 1</a>.

Linking to part of a page across sites

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

See also pagelinks.html.

Linking Images to Web Pages

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

Jump to Swansea University pages.

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>

See also: imglinks.html.

HTML and XHTML

HTML is rather relaxed

But XHTML:

Benefits of XHTML's Pedantry

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

Easier to:

More benefits (XML)

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

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

Versions and Flavours of (X)HTML

Three current flavours of both HTML 4 and XHTML 1.0

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!6)

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

DOCTYPE Declaration

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:

  1. 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.
  2. 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.

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:

An Example Style Rule

p {
      font-family: "Trebuchet MS", "Helvetica", sans-serif;
      font-weight: bold;    
      color: #2266cc;  
}
  1. The selector: determines which elements the rule is applied to (here <p>)
  2. Curly brackets (braces): open and close the declarations and contains style rule declarations
  3. 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

Summary

Homework

  1. Visit the example pages Page 1 and Page 2 and explore them using your browser's view source and developer tools7) Expand these notes in any way you feel appropriate.
  2. 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]

1)
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.
2)
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.
3)
Headings help with accessibility. All documents should start with a <h1>
4)
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.
5)
but it is preserved in the internal DOM representation of the document
6)
Version 2.0 of XHTML is in draft recommendation stage. but it has been abandoned in favour of HTML5
7)
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.