comp 1850 | introduction to web design and development

lecture three

agenda

  • HTML development
  • adding images
  • colors & entities
  • intro to cascading style sheets
  • how do style sheets work?
  • applying style sheets to web pages
  • readings

a brief history of HTML

  • 1989 - Tim Berners Lee creates the Hypertext Markup Language
  • 1998 - HTML versioning reaches 4.01
  • 1999 - HTML is merged with XML creating XHTML 1.0
  • 2014 - XHTML 1.0 was standard until October 2014
  • present - HTML 5 is the current W3C standard

HTML 4.01 template



XHTML 1.0 template



HTML 5 template



validate your HTML code

  • validate your XHTML code to ensure that you are creating well formed and correct documents
  • only valid code can be expected to behave predictably in the various browsers
  • W3C validator: http://validator.w3.org/
  • optionally use Firefox and install the HTML validator extension

image references

  • images are inline elements
  • <img> - image element
  • note that there is no "anti-tag" for this element - it is an inline tag
  • usage: <img src="/images/widget_logo.gif">
  • one of the most essential (and attribute-heavy!) tags
  • some notes about images in general:
    • when used in word documents, usually a bitmap or windows metafile (.bmp, .wmf)
    • on web: must be one of two formats: .gif or .jpeg (.jpg)
    • referenced like hyperlinks, if you know complete url
    • more commonly referenced as inline, that is, as part of the document
    • common to have a directory where all images are placed: /images, /pics, /gifs, etc.
    • path names must be exact to access file
  • attributes:
    • * required * source of image (src):
      e.g., <img src="images/widget_logo.gif">
    • * required * alternate display (alt):
      e.g., <img src="images/widget_logo.gif" width="574" height="99" alt="widget logo">
    • dimensions (width, height) in pixels:
      e.g., <img src="images/widget_logo.gif" width="574" height="99">
    • border width (border):
      e.g., <img src="images/widget_logo.gif" width="574" height="99" alt="widget logo" border="2">
    • text alignment (top, bottom, middle) - refers to text alignment in relation to image
    • image alignment (left, right) - refers to image position on page:
      e.g., <img src="images/widget_logo.gif" width="574" height="99" alt="widget logo" border="2" align="left">
    • spacing (hspace, vspace):
      e.g., <img src="images/widget_logo.gif" width="574" height="99" alt="widget logo" border="2" align="left" hspace="10" vspace="10">
  • why do we need to be specific?
    • the more you can tell the browser about the structure of the document, the faster it will be served up to the user - and speed is crucial to this medium

colors and entities

Some useful links for determining HTML colors and creating special characters.

introduction to cascading style sheets

  • HTML is a structural language: pages are coded according to their logical structure - nothing to do with presentation
  • style refers to the set of attributes applied to individual elements - essentially the elements of presentation:
    • section head = bold, Verdana, green, 14 point
  • in HTML we use several tags to achieve styles, applied to each individual structural element (fonts, colors, etc.)
  • cumbersome, repetitive, and against the spirit of HTML (structural, remember?)
  • CSS allows you to separate structure from presentation - why is this good?
    • if you define a style called "section head" you can apply that style to all section titles in a document or a site using the label "section title" (it's not really called a label...more on that later)
    • if you suddenly decide that you want all the section titles to be blue, you change the style definition, not the individual structural tags
  • very powerful if you have hundreds of pages!
  • CSS is not HTML - separate code that enhances HTML by allowing you to redefine the way existing HTML tags work
  • many design-related HTML tags are being abandoned or made obsolete (deprecated) by CSS - they still work, and will for some time, but they are on the way out
  • 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:
    1. selector
    2. property
    3. 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:
    1. HTML selector - the HTML selector (P, H3, etc.) is used to redefine how the tag displays:
      p {font: bold 16pt verdana;}
    2. Class - a "free agent" rule that can be applied to any tag at your discretion:
      .introhead {font: bold 48pt verdana;}
    3. ID - work like class selectors, but usually apply to only one element on the page:
      #mainnav {position: absolute; margin-top: 20px;}
  • three places to define rules:
    1. in an external document that is then linked or imported into your HTML page(s); called an external rule
    2. in the head of a document to affect an entire web page; called an embedded rule
    3. 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
  • one final IMPORTANT note: in the release of the XHTML standard, selectors are case-sensitive and must be lowercase

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
  • not a huge departure from HTML though, because we're still using a sort of "attribute/value" system
  • 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:
    1. first, set up the rules in a separate text document and save it with a .css extension
    2. 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>
  • rel="stylesheet" defines the link to a stylesheet
  • href="filename.css" is the URL for the external file

old school vs. new school

Styling text and background colours old school:

<body text="black" bgcolor="white">
<p><font size="2" face="arial">Some text</p>

Styling text and background colours new school:

body {
	color: black;
	font-size: 1em;
	font-family: arial,verdana;
	background-color: white;
}

Styling links old school:

<body link="orange" vlink="silver" alink="yellow">

Styling links new school:

a:link {
	color: orange;
}
a:visited {
	color: silver;
}
a:hover {
	color: yellow;
}
a:active {
	color: tomato;
}

Some info on link specificity from Eric Meyer.

valid your CSS code

validate your code:

  • validate your CSS code to ensure that you are creating correct documents
  • only valid code can be expected to behave predictably in the various browsers
  • if writing external css files, you can validate them with the W3C CSS validator: http://jigsaw.w3.org/css-validator/

css for images

Based on the "old school" image attributes above, here's how you'd use CSS rules instead:

  • border (border-width, border-style, border-color):
    • shortcut: img {border: 1px solid black;}
    • can also use: border-top, border-top-width, border-top-style etc.
  • image alignment (float):
    • img {float: right;} or img {float: left;}
    • centred: img {display:block ; margin:0 auto ;}
  • spacing (padding):
    • img {padding: 10px 5px 40px 34px;} (top, right, bottom, left)
    • can also use: padding-top, padding-bottom, padding-right, padding-left etc.
  • margin (margin):
    • img {margin: 10opx 15px 0 30px;} (top, right, bottom, left)
    • can also use: margin-top, margin-bottom, margin-right, margin-left etc.

id and class

id and class are attributes which allow you to define your own selectors.

Use id when defining a unique instance on the page. A block of code that displays the navigation bar will only appear once on the page, thus id is useful to identify it for styling. In CSS, use the # character to indicate an id.


<style type="text/css">
#copyright{
	border-style:dashed;
}
</style>
<p id="copyright">© COMP1850 2007</p>

Use class when defining a style to be used throughout a page. If you want to apply the same style more than once in a page, use class. In CSS, use the . character to indicate a class.


<style type="text/css">
.customlink{
	background-color:lightblue;
}
</style>
<a class="customlink" href="#">Click me</a>

critical resources

Only valid code can be expected to behave predictably in the various web browsers. Always ensure you are publishing error-free code.

Bookmark (and use) the online validators

  1. HTML validator
  2. CSS validator
home | about the course | readings | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colors | 04 | css: links & tables | 05 | css: page layout | 06 | information architecture | 07 | design principles | 08 | css: layout & graphics | 09 | html forms | 10 | client side scripting | 11 | scripting & analytics | jeff parker | students on bcitcomp.ca | textbook website | my.bcit | bcit | bcit: computing |