lecture four
UPDATED Jan 22, 2013 | Chap 3 (PPT)
agenda
- HTML5 syntax rules
- checking your work (code validation)
- cascading style sheets structure
- applying style sheets to web pages
- readings
HTML5 syntax rules
To be "well-formed" and verifiable, all HTML5 documents must adhere to W3C HTML Rules, although these are more forgiving than the stricter XHTML 1.0 standard.
Some coding details implicated in common mistake are given below:
- all elements must be properly nested
- this is not valid:
<p><b>Bolded Text</p></b>
- this is not valid:
- all container tags must close:
- e.g.,
<p>Some text here</p> - empty elements are not closed: e.g.
<img src="some_image.gif">
- e.g.,
- HTML5 is not case-sensitve, but sticking to lower-case for everything is a good rule of thumb:
<Img src="some_image.gif">better as<img src="some_image.gif">- The name of a file such as
some_image.gifmust match the actual file name on the associated computer system. Whether case-sensitivity will cause you problems depends, in this case, on the operating system. Notoriously for COMP 1850, mixed-case file names that "work fine" on the WINDOWS platform will fail on the upload site. This is becausebcitwebdev.comis LINUX hosted, and operating systems in the UNIX family, like LINUX, are case-sensitive.
- all values must be quoted:
<body bgcolor=black>should be<body bgcolor="black">
- every HTML5 document must have these elements:
<!DOCTYPE html><html lang="en">- an HTML tag with language declaration<head>- every page must have a HEAD section contained in HEAD tag<meta charset=utf-8" />(nested within<head></head>)<title>(nested within<head></head>) to title the page for web browsers and other purposes, not displayed on page
<body>every page must have a BODY section contained by BODY tag
See also 12 Common Problems With HTML5 and Differences Between HTML and XHTML.
sample HTML5 document
validating your code
- validate your code to ensure that you are creating well formed documents
- W3C validator: http://validator.w3.org/
In-class Exercise #1: Validation:
- View this page: wwhome.html and copy it's URL.
- Paste the URL into the validator
- Note that there are several technical errors.
- Save the file wwhome.html to your computer so you can work on it
- Using the notes above and the chapters in your book, correct the page called
wwhome.htmluntil it validates as a well-formed XHTML document. _ - Change the file to be an HTML5 document and repeat the process. Correct until it validates as a well-formed HTML5 document.
introduction to cascading style sheets
- style refers to the set of attributes applied to individual elements
- CSS allows you to separate structure from presentation - why is this good?
- many design-related HTML tags are being abandoned or made obsolete (deprecated) by CSS while HTML5 has introduced some new semantic tags
- Article on semantic meanings for common presentational tags
- HTML5 New Elements
- Let's Talk About Semantics
- Flowchart for deciding which tag to use for what
- the idea is that style sheets should be used to relieve HTML of the responsibilities of presentation
how do style sheets work?
- cascading style sheets don't require any fancy software or plug-ins - just rules
- a CSS rule defines what the HTML should look like and how it should behave in the browser window
- three parts to a CSS rule:
- selector
- property
- value
- selector {property: value;} = rule
- selector - can be HTML, class or ID (see below)
- {property: value;} = declaration
- properties identify what is being defined: font-family, font-weight, font-size, color, etc.
- values are assigned to define the nature of the property: verdana, bold, 16pt, green, etc.
- three base types of CSS rules, as determined by their selector:
- HTML selector - the HTML selector (P, H3, etc.) is used to redefine how the tag displays:
p {font: bold 16pt verdana;} - Class - a "free agent" rule that can be applied to any tag at your discretion:
.introhead {font: bold 48pt verdana;} - ID - work like class selectors, but usually apply to only one element on the page:
#mainnav {position: absolute; margin-top: 20px;}
- HTML selector - the HTML selector (P, H3, etc.) is used to redefine how the tag displays:
- three places to define rules:
- in an external document that is then linked or imported into your HTML page(s); called an external rule
- in the head of a document to affect an entire web page; called an embedded rule
- in an HTML tag: in the body of the document to affect one tag only; this is called an inline rule
- this is the cascading part of CSS as you could, in fact, use inline, embedded and external rules together: an inline rule will override an embedded rule, which will override an external rule
- Case sensitivity? It can get complex. Rule of thumb is to use lowercase whenever possible. (See Case Sensitivity in ... )
applying style sheets to web pages
- to set the style for an indivdual HTML tag (i.e., an inline rule), we use the following syntax:
<h1 style="color: red;">content</h1> - in this way we're gaining more control over the display because there's more things we can do with each tag
- the main use for CSS is to set the styles for an entire document, which is done by adding the following to your HEAD section:
<style type="text/css">
h1 {color: red;}
</style> - in effect, isn't much different from adding style to an individual tag; except that you can manage style for ALL H1 tags in document from ONE PLACE
- the major benefit of CSS is the external file: allows you to define all your styles for a site in one document, and link it to all pages
- changes to a style can be made once and affect all instances of the style throughout a site
- setting up an external CSS file is a two step process:
- first, set up the rules in a separate text document and save it with a .css extension
- then, link the document to each page using the <link> tag:
<head>
<title>document</title>
<link rel="stylesheet" type="text/css" href="filename.css">
</head>
Sample CSS File (text file saved with .css extension)
- rel="stylesheet" defines the link to a stylesheet
- href="filename.css" is the URL for the external file
Hands On Practice 3.8 - Trillium Media Design
Objective
Work through the Trillium Media Design example in the HTML5 (6th ed.) text book in Hands On Practice 3.2 (p.86) through to Hands On Practice 3.8 (p.104).
Download the starter.html here, or via your student access.
Hands On Practice 3.9 - Cascade
p. 106 of text.
homework #3: JavaJam Coffee House
Work through the JavaJam Coffee House case study on pages 122-124. Do tasks 1 through 5. Upload your finished work and submit the URL for the home page to your instructor via my.bcit.ca email as with all previous homework exercises. Be sure to test your uploaded site to ensure links work as expected.
Find the starter files for the Chapter 3 work at:
Note:Use Right Click choice "Save Page As" to capture text, or you can "view source" and save from the resulting display if your browser is configured appropriately.
Note: Although the site design calls for four files, only two feature in the Chapter 3 work. "Music" and "Jobs" aren't required for this homework.
Homework is due by start of class in week five.