ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~SLIDESHOW~~
====== Web Page Building Blocks and Web Site Design ======


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

**Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].

===== Web Page Building Blocks and Web Site Design =====

  * [[#books_head_first|Books]]
  * [[#A Basic HTML Page]]
  * [[#Semantic HTML]]
  * [[#Mark-up]]
  * [[#Textual Content]]
  * [[#links_images_and_other_non-text_content|Links, Images and other Non-Text Content]]
  * [[#File Names]]
  * [[#the_uniform_resource_locator_url|URLs]]
  * [[#designing_your_site|Designing Your Site]]


===== 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, “[[http://www.amazon.co.uk/HTML5-CSS3-Visual-QuickStart-Guides/dp/0321719611/ref=sr_1_7?ie=UTF8&qid=1330353300&sr=8-7|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, “[[http://oreilly.com/catalog/9780596101978|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 [[http://oreilly.com/catalog/9780596009205|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, [[http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=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, “[[http://oreilly.com/catalog/9780596009878/|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, “[[http://oreilly.com/catalog/9780596527525/|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//((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 [[wp>Metadata]].))

Examples of metadata:

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

===== A Basic HTML Page =====

  * Follow the [[http://www.bruceontheloose.com/htmlcss/examples/chapter-01/basic-html-page.html|link to the page]].
  * View source

----
<code html>
<!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>
</code>

**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 [[wp>Character_encoding|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. [[http://www.bruceontheloose.com/htmlcss/examples/chapter-01/basic-html-page-with-2nd-paragraph.html|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 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.))
  * 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.((Headings help with accessibility. All documents should start with a ''<h1>''))
  * 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 [[http://www.w3.org/standards/webdesign/accessibility|accessibility]]
  * Improved search engine optimization (SEO)
  * Lighter code and faster pages((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.))
  * Easier code maintenance and styling.
===== Mark-up ======

HTML stands for “**H**yper**T**ext //**M**ark-up// **L**anguage”

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

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

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


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

----

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:
<code html>
  <element-name [attribute=″value″]*>
</code>

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//:
<code html>
<tag-a>
  <tag-b>content</tag-b>
</tab-a>
</code>

//Incorrect//:
<code html>
<tag-a>
  <tag-b>content</tag-a>
</tab-b>
</code>

----

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

===== Textual Content =====

{{:eg-146:text.png?234x350|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 =====

  * White space is not significant((but it is preserved in the internal DOM representation of the document)). 
  * 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: 
  * ''&eacute;'' or ''&#233;'' is e-acute (<html>&eacute;</html>)
  * ''&copy;'' or ''&#169;'' is the copyright symbol <html>&copy;</html>

----

The default character set is UTF-8.

See a full list of character entities at [[http://www.elizabethcastro.com/html/extras/entities.html|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|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 [[wp>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:** <nowiki>//www.swan.ac.uk/lis/</nowiki>

//Other schemes//:
<code>
  mailto:   news:
  ftp:      gopher:
  file:     telnet:
</code>
----

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.
  * <nowiki>http://</nowiki> <html><b>www.swan.ac.uk</b></html> <nowiki>/lis/</nowiki>

----

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
<code html>
<h1 id="chapter1">Chapter 1: It begins</h1>
</code>
  * Within the page (e.g. in a table of contents) we can refer to this heading as:
<code html>
<a href="#chapter1">Jump to Chapter 1</a>.
</code>
===== Linking to part of a page across sites =====
  * From another page (in same site) we refer to this as:
<code html>
<a href="books/book1.html#chapter1">Go to Chapter 1 of Book 1</a>.
</code>
  * Across the Internet the link would be:
<code html>
<a href="http://www.books.com/books/book1.html#chapter1">
  Go to Chapter 1 of Book 1 at books.com
</a>.
</code>

----

See also [[http://eg-146.cpjobling.org.uk/pagelinks.html|pagelinks.html]].
===== Linking Images to Web Pages =====

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

[[http://www.swan.ac.uk|{{:eg-146:uws-shield.png?100x119|Jump to Swansea University pages.}}]]

The HTML Markup for this is:
<code html>
  <a href="http://www.swan.ac.uk/">
    <img src="uws-shield.jpg" alt="Jump to UWS." width="100 height="119" />
  </a>
</code>

----

See also: [[http://eg-146.cpjobling.org.uk/imglinks.html|imglinks.html]].
===== 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, <del>HTML if you don’t care about standards.</del>

<del>Use //transitional// if you want to use deprecated tags.</del>

<del>Use //frames// if you need //framesets//.</del>

===== 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!((Version 2.0 of XHTML is in //draft recommendation stage//. but it has been abandoned in favour of HTML5))

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:

<code html>
<!DOCTYPE html>
</code>

----

DOCTYPE for XHTML 1.1:

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

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

----

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

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

----

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

===== Summary =====

  * [[#books_head_first|Books]]
  * [[#A Basic HTML Page]]
  * [[#Semantic HTML]]
  * [[#Mark-up]]
  * [[#Textual Content]]
  * [[#links_images_and_other_non-text_content|Links, Images and other Non-Text Content]]
  * [[#File Names]]
  * [[#the_uniform_resource_locator_url|URLs]]
  * [[#designing_your_site|Designing Your Site]]

===== Homework ======

  - Visit the example pages [[http://www.bruceontheloose.com/htmlcss/examples/chapter-01/basic-html-page.html|Page 1]] and [[http://www.bruceontheloose.com/htmlcss/examples/chapter-01/basic-html-page-with-2nd-paragraph.html|Page 2]] and explore them using your browser's view source and developer tools((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.)) Expand these notes in any way you feel appropriate.
  - Explore the [[http://eg-146.cpjobling.org.uk|Demo Web Site]] and answer the questions given on the [[http://eg-146.cpjobling.org.uk/homework.html|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 [[https://github.com/cpjobling/web-page-building-blocks|cpjobling/web-page-building-blocks]]. Follow the links to [[https://github.com/cpjobling/web-page-building-blocks/tree/master/example/eg-146|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
  * [[eg-146:lecture13|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