COMP 135 Web Site Design Intermediate

COMP 135Web Site Design Intermediate Week 3

Review • Rules of XHTML • Start with proper DOCTYPE and namespace • Declare character encoding with <meta>element • All element names and attributes lowercase • Quote all attribute values • Assign values to all attributes • Close all tags • Close “empty” tags with a space and a slash • Do not put double dashes inside comments • Use character references for displaying less-than, greater-than and ampersands in your content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Use markup elements for their meaning and not for the way they look

Anatomy of a CSS Rule Œ Ž • Œ The selector identifies HTML elements that the rule will be applied to, either the actual element name or class attribute values and unique identifiers. • Curly braces contain the properties of the element you want to manipulate with the values you want to change them to. The braces plus their content is called the declaration block. • ŽThe property/value pairs are separated from each other by semi-colons. The properties are separated from their respective values by colons. Each line is called a declaration. selector { property1: value; property2: value; property3: value; }

Doubles the default size of the font • Changes the font of the paragraph to the Arial font. • Changes the colour of all the text to red. • Adds a solid blue two pixel thick border around the paragraph • This selects every single <p> element in the HTML document(s) this CSS applies, to and: p {font-size: 2em;font-family: Arial;color: red;border: 2px solid blue;}

Other CSS Selectors ID selector: # Class selector: . HTML <h1 id=“chapter”>Chapter 1</h1> <p class=“summary”>Loremipsum</p> CSS <style type=“text/css”> #chapter { font-size: 3.5em; } .summary { font-style: italic; } </style>

Links and Lists • Link element and anchor link element (hyperlinks) • Lists • Ordered • Unordered • Definition

<link> element Placed in <head> element Used for applying external CSS files to your document: <link rel="stylesheet" type="text/css" href="/~pchee/styles/main.css" /> Can have any number of <link> elements but only in the <head> of the document

<a> element • Hyperlink <a href=“index.html” title=“Home Page”>Home</a>

Absolute Hyperlinks Use http://protocol and domain name to link to another web server or on the same server http://www.smashingmagazine.com http://www.flemingcollege.com Can also include subdirectories and file names: http://fleming0.flemingc.on.ca/~pchee/fts/2011/wsdi http://www.utata.org/whereilive11/faq.html

Relative Hyperlinks Links that are on the same server as the current page Implies a required starting point

Assume that file_to_link_from.html is the file you are linking from

To link to the link.html file in the same directory than the hyperlink would specify: link.html To link to link2.html, in the folder in the same directory, then you create a link to folder/link2.html To link to link3.html in the parent folder of the folder of the current file then use two dots to specify “go up one level” : ../link3.html

Root Relative Link • If you want to link to the very top directory of the web site (the root or document root) than put a slash at the front of the file path • If link3.html was in the top directory of the web site, you can specify /link3.html instead of ../link3.html • On the Fleming College web server / will re-direct you to www.flemingcollege.com • To link back to your default home page use /~username, where username is your Fleming login

Styling Links Links have several different states: • link (unvisited) • Default state; what they should look like when first seen. Coloured blue • visited • Style of link previously visited [ clicked on or followed ] and coloured purple • hover • Style whilst mouse is hovering over it • focus • Style of link when given focus by another means than the mouse [ keyboard ] • active • Style of link when activated; mouse button held down while pointer over link [ changes to :focus when mouse button released ]; also style of last activated link when going back to document from your browser history

CSS Link Styling • Uses pseudo-classes to create appropriate element selector • Append to the selector used for links • e.g. a:link { color: red; }a.resources:visited { color: green; }a.resoruces:hover { background-color: yellow; }

Link Styling Best Practices • Give link and visited distinctive styles • focus, hover and active can often be given the same styling or perhaps a simple variation for active • Need to put the selectors in the following order because of CSS inheritance: • link, visited, hover (and focus), and active • Use this mnemomic – LoVeHAte[ :focus goes next to :hover ]

Lists • Used for grouping related pieces of information: • Shopping lists, steps in a recipe, concert tour dates, etc. • Navigation menus, tabbed interfaces • Three types of HTML list elements: • Unordered list: group related items in no particular order • Ordered list: group related items in a specific order • Definition list: define a set of terms and related definitions

Unordered List Markup <ul> <li>bread</li> <li>coffee beans</li> <li>milk</li> <li>butter</li> </ul>

Ordered List Markup <ol> <li>Gather ingredients</li> <li>Mix ingredients together</li> <li>Place ingredients in baking dish</li> <li>Bake in oven for one hour</li> </ol>

Definition List Markup <dl> <dt>Milk</dt> <dd>A white, liquid dairy product</dd> <dt>Bread</dt> <dd>A baked food made with flour</dd> <dt>Butter</dt> <dd>A yellow, solid dairy product</dd> <dt>Coffee</dt> <dd>A beverage made from the ground seeds of the fruit of coffee trees</dd> </dl>

You must pair at least one <dt></dt> with at least one <dd></dd> <dt></dt> should always come first in the source order; don’t nest <dd> within <dt></dt> Each term and definition is a definition group You can associate more than one term with a single definition or one term with more than one definition

Nesting Lists A list item can contain another list The nested list should be related to one specific list item The nested list is contained inside the list item when writing the markup

<ul><li>Apples<ol> <li>Empire</li> <li>Gala</li> <li>Delicious</li><ul><li>Apples<ol> <li>Empire</li> <li>Gala</li> <li>Delicious</li> </ol> </li> <li>Peaches</li> <li>Pears</li> </ul>

Styling Lists ul { background-color: #FF9393; width: 20em; padding-top: 1em; padding-bottom: 1em; font-family: Arial, Helvetica, sans-serif; border: 2px solid #A60000; } ul > li { margin: 1em 1em1em 0.5em; font-weight: bold; } ol > li { margin-top: 0.5em; margin-left: -24px; font-size: 0.8em; color: #A60000; font-weight: normal; }

Changing Bullet/Numeral Types • Use the CSS list-style-type property on <ul> elements to change the bullet style • Options include: • square • circle • disc • none

Letters • For ordered lists options include alphabetic: • lower-alpha [ a, b, c... ] • upper-alpha [ A, B, C... ] • lower-greek[ α, β, γ... ]

Numbers • For ordered lists options include alphabetic: • decimal Default[ 1, 2, 3... ] • decimal-leading-zero [ 01, 02, 03... ] • lower-roman [ i, ii, iii... ] • upper-roman[ I, II, III... ] • georgian[ an, ban, gan... ] • armenian[ mek, yerku, yerek.. ]

Custom Bullets • Add small images for custom bullets using list-style-image: • list-style-image: url(bullet.gif)

<div> and <span> again Generic container elements Use with unique identifier attribute, id, or classification attribute, class, to give your document better semantic markup Also creates selectors for CSS

Classitis • Better <p>Text goes here</p> <p>More text goes here</p> <p>Still more text goes here</p> • Semantic <div id=“maincontent”> • <p>Text goes here</p> • <p>More text goes here</p> • <p>Still more text goes here</p> • </div> Poor <p class=“bodycopy”>Text goes here</p> <p class=“bodycopy”>More text goes here</p> <p class=“bodycopy”>Still more text goes here</p>

Divitis • Semantic <div class=“primarycontent”> • <h2><span class=“biggertext”>Welcome</span> to Member Page!</h2> • <p>welcome returning members</p> • <p class=“warning1”>If you are not a member <a href=“/gohere/” class=“warning2”>go here</a>!</p> • </div> Poor <div class=“primarycontent”><div class=“yellowbox”> <div class=“heading”><span class=“biggertext”>Welcome</span> to Member page!</div><div class=“bodytext”>Welcome returning members</div> <div class=“warning1”>If you are not a member <a href=“/gohere/” class=“warning2”>go here</a>!</div></div> </div>>

Semantic Markup <div id=“page”> <div id=“header”> <ul class=“menu”> <li><a href=“/”id=“here”>Home</a></li> <li><a href=“/stuff/”>Stuff</a></li> </ul> </div> <div id=“maincontent”> <h1>Strong Heading</h1> <p>Some text goes here</p> </div> <div id=“footer”> <address>Contact us at: info@stuff.dom</address> </div> </div>

HTML5 <div id=“page”> <header> <nav> <ul class=“menu”> <li><a href=“/”id=“here”>Home</a></li> <li><a href=“/stuff/”>Stuff</a></li> </ul> </nav> </header> <section id=“maincontent”> <h1>Strong Heading</h1> <p>Some text goes here</p> </section> <footer> <address>Contact us at: info@stuff.dom</address> </footer> </div>

COMP 135 Web Site Design Intermediate