info + web tech course

© Anselm SpoerriDigital Media Production

Digital MediaProduction

Info + Web Tech Course

Anselm Spoerri PhD (MIT)SC&I @ Rutgers University

[email protected]@gmail.com


Lecture 3 – Overview

XHTML Elements Recap – Hierarchy of Tags– Block and Inline Elements– div | id | class

Cascading Style Sheet = CSS– Formatting Rules– Inline | Internal | External specification of CSS rules

CSS Demo

CSS Navigation using Lists

Testing & Debugging Web Pages Check Easy Stuff First

Lectures – Week 3 Contenthttp://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week3


Recap & New – Web Basics: HTML Elements & Tags

HTML is made up of elements<tag>Content</tag>(read as: open tag, content, close tag)

Three major elements needed on HTML page<html> - container for all of our HTML code

<head> - put data for browser and other machines

<body> - put content to show to the user

Block-level elements take up own space vertically

(<p>, <h1>, <h2>, ...)

<div> page division

Inline-level elements placed inside other elements

(<a>, <img>, <strong>, <em>, …)


Page Layout – DIVs

Two methods for creating Web Page Layout‒ Tables (last lecture)

‒ DIVs and CSS (this lecture)

Structure Your Pages URL

‒ Divide logical sections of document into div elements

Produces “linear / natural flow” of divs

pageContent

header

navigation

main content

footer

<div>

<div> header content </div>

<div> navigation content </div>

<div> main content </div>

<div> footer content </div>

</div>


Page Structure – Hierarchy & Naming Elements

Body of (X)HTML document encloses Content of Web page.

Breaking up Page into Divisions (DIV)

Creating a Line Break: <br />

Hierarchical Structure of Web pages‒ Elements contained inside another element (latter = parent, former = child)

Naming Elements

‒ id="name" can be applied only once unique

#idName {…} define CSS rule

‒ class="name" can be applied many times

.className {…} define CSS rule

Useful with div (content blocks) and span (inline text) elements


Page Layout – DIVs with IDs

Name div elements with unique IDs

pageContent

header

navigation

main content

footer

<div id="pageContent">

<div id="header"> text/images/links </div>

<div id="navi"> text/images/links </div>

<div id="content"> text/images/links </div>

<div id="footer"> text/images/links </div>

</div>


CSS

Cascading Style Sheets = CSS

‒ Collection of Formatting Rules

‒ Control Appearance of web page: blocks and text

‒ Ensure a more Consistent Treatment of Page Layout and Appearance in Browsers

‒ Separation of Content from Presentation

– Easier to Maintain Appearance since Make Change in Single Location

– Simpler and Cleaner HTML code shorter loading times


CSS (cont.)

Cascading Style Sheets (CSS)

‒ Control Text propertiesSpecific fonts and font sizes; bold, italics, underlining, and text shadows;

text color and background color; link color and link underlining; etc.

‒ Control Format & Position of Block-level Elements Set margins and borders for block-level elements; position them in a specific

location; add background color; float text around them; etc.

‒ Liquid layouts: expand/contract based on Browser width.

‒ Easy to apply Same Layout to Whole Site and only need to modify external CSS file.

‒ Minus: Not all browsers support CSS the same way.


CSS (cont.)

CSS Style Sheet stored

a) External CSS style sheet (.css file linked to page and using a link or an @import rule in the head section of a document).

b) Internal (or embedded) CSS style sheet (included in style tag in head portion of an HTML document).

c) Inline styles (defined within specific tag instance in HTML document) Using Inline styles is not recommended.

CSS Rule = Selector and Block of Declarations

Enclosed by {...} brackets and separated by ;

Declaration = Property: Value;


CSS – General Structure of CSS Rule

Basic syntax for Internal and External CSS:

selector {property1: value1; property2: value 2;}

HTML tag you want to modify

Value you want property to takeProperty you want to change

p { text-align: left; color: black; font-family: Arial; }

causes

Font to be left-alignedFont to be Arial and black


CSS Rules – id and class Rules in Internal Style Sheet

<head>

<style type="text/css">

/* Comment: pageContent ID and define font to use for page and the top and left margins as well page width. This pageContent div contains all the other

divs */#pageContent {

font-family: Verdana, Geneva, sans-serif;

font-size: 12px;

margin-top: 10px;

margin-left: 50px;

width: 500px;

}

/* blue text class */

.blueText {color:#009;

}

</style>

</head>


CSS Rules – id and class Rules Applied in <body>

<body>

<div id="pageContent">

<div id="content">

<h1>Heading1</h1>

<p class="blueText">Open paragraph</p>

</div>

</div>

</body>


Location of CSS Style Definition

Inline style (causes only the tag to have desired properties)

<p style="font-family:Arial; color:blue">Something blue </p>

Internal stylesheet (specific to a document)

– Causes all tags in document to have property– <style> tag inside <head> tag of document

<head> <style type="text/css"> p { font-family:Arial; color:blue;} </style> </head>

External stylesheet (can control multiple documents)– Ensure consistent appearance of website

<head> <link rel="stylesheet" href="mystyle.css" type="text/css" /></head>


CSS – Cascasde of How Rules are Applied

Style Rules “Cascade” from broad to narrow:

– Browser’s Default Behavior

– External Style Sheet

– Internal Style Sheet

– Inline Style


CSS Demo – Step 1

Step 1

‒ Download “startPage.html” fromhttp://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec3/Steps

‒ Save “startPage” as “page1.html” in folder “week3”

‒ Create nested div structure

pageContent,header, navi, content, footer

‒ Assign id name to div


CSS Demo – Step 2

Step 2

‒ Create Internal CSS Style Sheet

<style type="text/css">

‒ Create CSS Rule for id="pageContent"

font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-top: 10px;margin-left: 50px;width: 500px;

‒ Create CSS Rule for class="blueText"

color:#009;


CSS Demo – Step 3

Step 3

‒ Create CSS Rule for id="header"

font-size: 9px;border-bottom-width: thin;border-bottom-style: solid;border-bottom-color: #333;

‒ Create CSS Rule for id="navi"

font-size: 14px;background-color: #E1E3F7;padding: 5px;margin-top: 5px;


CSS Demo – Step 4

Step 4

‒ Create CSS Rule for id="content"

font-size: 12px;

‒ Apply class="blueText"

<p> tag inside div with id="content"

‒ Create CSS Rule for id="footer"

font-size: 10px;border-top-width: thin;border-top-style: solid;border-top-color: #666;


CSS – Navigation Bar using Lists and CSS

<ul>

<li><a href="home.html">Home</a></li>

<li class="here"><a href=“features.html">Features</a></li>

</ul>

CSS property - display: block; and float: left; and clear: both;

Hyperlink States: a:link | a:visited | a:focus | a:hover | a:active

Navigation = Lists of Links

example


CSS – Navigation Bar using Lists and CSS (cont.)

Remove Bullets, Eliminate Padding and Margins

#navi ul { list-style-type: none; padding: 0px; margin: 0px; overflow: hidden; }

Display Link as Block (area of link clickable) and Constrain Width

#navi a {display: block;width: 100px; }

Horizontal Navigation

Use floated <li> method for uniform look

#navi li { float: left; }

You are Here Indicator

#navi li.here a { text & background properties }

and want CSS rules for different states of hyperlink


CSS – Navigation Bar and States of Link Element

Selecting Link Element based on their State Navigation Structure

Since a link can be in more than one state at a time, it is important to define rules in following order:

1. a:link

2. a:visited

3. a:focus

4. a:hover

5. a:active

LVFHA

a:link, a:visited { color: #FFF; }

a:focus, a:hover, a:active { color: #000; }

#navi a:link, #navi a:visited { color: #FFF; }

#navi a:focus, #navi a:hover, #navi a:active { color: #000; }


Testing & Debugging Web Pages

• Before looking for a big problem, check common little problems :)

• Work incrementally

• Use process of elimination (use comments to make code active / inactive).

• Be careful about typos.

• In CSS, not sure if the problem is with the property or the selector, use a very simple declaration (color: red).


Check Easy Stuff First - General

• Refresh browser so that latest file is shown

• Upload actual file and refresh browser so that latest file is shown

• Upload file in the correct location

• Make sure you save file

• Upload any related files: CSS, images, SWF etc.

• Make sure spelling of URL = spelling of filename.

• Test in multiple browsers

• Test on different computer than the one used to create the files


Check Easy Stuff First – HTML & XHTML

HTML

• Make sure you used correct spelling of tags

• Be careful about nesting and make sure you have closing tags

• Use HTML Transitional

XHTML

• Make sure all attribute value enclosed in straight, not curly, quotes

• All elements have opening and closing tags (always put space before / for “ />” closing tag).

• XHTML is case-sensitive.

• Include # when specifying hexadecimal colors.


Check Easy Stuff First – CSS

• Use colon (:) to separate your properties from value (color: red;).

• Complete each property-value pair with semicolon (;)

• No spaces between number and their units (16px).

• Close brackets.

• Don’t quote values.

• Use accepted value.

• Don’t forget closing < /style> tag.

• Make sure linked (X)HTML document to the proper CSS file(s).

• Watch the spaces and punctuation between selectors.


Check Easy Stuff First – Testing Your Page

1. Validate (X)HTML and CSS.

2. Open in Browser

3. Formatting correct?

4. Hyperlinks work & correct?

5. CSS file referenced properly?

6. All images appear?If not, check the easy stuff first, especially spelling of filenames and don’t use spaces in filenames and saved as GIF or JPEG.

7. Upload files to server (and set permissions if needed).

8. View pages in different browsers.

9. Still Stuck check for typos and check easy stuff first :)

info + web tech course

Documents