!

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:-

PowerPoint

Presentation Software and Office

Integration

PowerPoint

1. PowerPoint overview

2. PowerPoint Basics

3 Advanced PowerPoint3. Advanced PowerPoint

4. Tips for Effective Presentations

5. Office Integration

Presentation Software! Helps us prepare materials for making a

presentation (talk, lecture, kiosk display) to

an audience

• Slides (for projection)

• Handouts (for the audience)

• Speaker’s notes (for the presenter)

! Provides tools for developing and presenting

• Views (Normal, Slide Sorter, Slide Show)

• Transitions between slides

• Animation of objects in a slide

• Hiding slides

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:+

PowerPoint 2010 OverviewQuick Access Toolbar and Title Bar

Ribbon

Slides tab

Status Bar

Notes Pane

View Buttons (Normal view shown) & Zoom Control

Slide Pane

Slides tab

&

Outline tab

Overview: The File tab

! Replaces the Office

Button

! Shows Backstage View

• A document overview• A document overview

• Commands affecting

entire document

• New (shown), Open,

Save, Print

• Send, Publish, Create

Video

Overview: Basic Terms

1. Slide: the basic unit of the presentation; each can contain 1 or more objects.

2. Object: a PowerPoint entity such as a text box, shape or graphic. Text is placed in a text box object.

3 Layout: preset combination of objects for a single3. Layout: preset combination of objects for a single slide

4. Theme/Template: a preset combination of background graphics, fonts, effects, and possibly content, that can be easily customized.

5. Views: Allow you to work on a presentation in several different ways

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:;

PowerPoint basics

Making a basic presentation

Adding slides

Working with Layouts

Views

Making a basic presentation

! Ways to make a new presentation

include:

• Blank presentation

Templates and Themes• Templates and Themes

• Installed on your computer or search online

• New from existing Presentation

! Each has particular advantages

Blank Presentation

! You get blank white slides

• You also get standard slide layouts

! You can do all the design work yourself

• background colours fonts effects• background, colours, fonts, effects

! Use when you have specific design needs

• e.g. corporate logo, colour schemes

! You can apply a theme to a blank presentation

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:;

Templates

! Templates include predefined design

elements and slides with boilerplate text

• The quickest way to make a presentation

Just edit the text to create your presentation• Just edit the text to create your presentation

! They replace the AutoContent Wizard from previous

versions of PowerPoint

! e.g. Quiz Show template

• Contains slides with animations suitable for a

question and answer presentation

Themes

! Themes also have predefined design elements

• Slide background, fonts, colours

! Themes allow you to give Office documents a

consistent look

• Simply apply a theme to change the look of the

entire document (Design – Themes)

• Use the installed themes or modify an existing

theme to create a Custom theme

• You can download more themes from Microsoft

Office Online

New from existing

! Use this option when you want to

‘recycle’ content from another

presentation

• You can edit/copy/delete slides

• You can reorganize slides

• You can apply new themes

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:;

Adding Slides

! Go to the Home tab,

Slides section

• Click the New Slide

b ttbutton

• Choose a different

layout from the

Layout list (shown)

Working with Text Layouts

! Click the Title object to

add the slide title

! The Text object

produces bulleted textproduces bulleted text

! Or, click one of the

icons to insert a non-

text object

• Table, Chart

• SmartArt, Picture

• ClipArt, Media Clip

Entering text

! Text is entered into the Slide pane in

Normal view

• Or, enter text in the Outline tab

! Typing enter completes a point

! Typing tab produces a sub-point

! Typing Shift+tab elevates a point

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:;

Normal view

! Slide pane: edit

slide objects

! Notes pane: add

speaker's notes

! Slides tab: move &

copy slides

! Outline tab: work

with slide text

Slide sorter view

! Shows slide miniatures to allow you to

work with a presentation’s organization

• Move slides (click and drag)( g)

• Copy slides (right click and drag)

• Add Transitions and other Animations

• Hide slides (right click)

• Removes slide from slide show without deleting it

from the presentation

• Cannot modify the slides’ content

Slide Show View

! Slides are shown in full-screen mode

! Changing slides:

• Click the mouse or type down-arrow or

space bar to go to the next slidespace bar to go to the next slide

• Type up-arrow to go to the previous

slide

• Type a slide number and enter to go

directly to that slide

• Point near the bottom-left of the screen,

click the rectangular icon to get this

navigation menu

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:1

Advanced PowerPoint

Advanced PowerPoint! Modifying Themes

! Hiding slides

! Master slides

! Headers and Footers

! Transitions and Animations

• Transitions, Animation Effects, Advanced Animation

! Office tools

• Format painter, Drawing tools, Text boxes

! Printing a presentation

• Handouts and Speaker's notes

! Working with images

! Saving in other formats

Modifying a Theme

! On the Design Tab:

• Colors: choose a new Color Set or Create New

Theme Colors

• Fonts: choose a new Font Set or Create New

Theme Fonts

• Effects: e.g. 3D or Shadow effects

• Background: Solid, Transparent or Gradient Color,

Picture or Texture Fill

• Live Preview shows how changes will look before

applying them

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:;

Hiding Slides

! Hidden slides are not shown in Slide

Show view

! Why hide slides?Why hide slides?

• To shorten a presentation

• without deleting slides

• To add extra slides (just in case)

• You may want slides containing detailed info to

answer specific questions

Hiding Slides (2)

! To Hide slides:

• On the Slides pane or in Slide Show view

• Right click a slide and choose Hide Slideg

! To display hidden slides during a slide

show:

• Use the Slide navigation menu

• If you know the slide number, type it and then

the enter key

Master Slides

! View - Master Views

! Master Slides control the format of all slides• Font and style for Title and Text objects

• Font and bullet styles for Text objectsy j

• Background, orientation, etc.

! Slide master view looks like Normal view, but instead of slides, you work with masters

• A Slide master, which affects all slides

• Layout masters (one for each layout), which affect only those slides using that layout

• Choose a Master on the left, edit the Master styles on the right

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:;

Headers and Footers

! Insert – Text - Header &

Footer

• Footers are included as

objects in Mastersj

• This command allows quick

access to headers/footers

• Date/time

• Slide number

• Footer text

• Handout Masters have both

header and footer objects

Formatting Headers and Footers• Format these objects

in the Slide Master• Footer objects are

there even if you have not added footers

• Select an object and l f ttiapply formatting

• You can add text too• Placeholders in the

object show where the footer will be

• Just add your text to the placeholder

Headers and Footers

! To get a different footer on Title slides:

• In the Header and Footer dialog, omit the footer

from the Title slide

Add a text box to the bottom of the Title slide• Add a text box to the bottom of the Title slide

• Use Insert – Text Box

• A "one-off" solution for that slide only

• Or, you can add the text box to the Title Slide

Layout Master• All Title slides will have the same footer

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:-,

Transitions and Animations

! Transitions and animations tabs

! Are used to enhance your slide show

• Transition effects are applied when slides are

changed

• Animation effects are applied to bullet points

• Advanced animation to provide sophisticated

control over text and graphics effects

• Entrance, exit and emphasis effects

Transitions

! In Slide sorter view, select slides

• Or use the Apply To All button

! Select the visual effect you wantSelect the visual effect you want

! Select a Transition sound, if desired

• Use this sparingly!

! Select Transition timing, if desired

• On mouse click, or automatically

Animation effects

! These allow bullet points (and their sub-

points) to be displayed individually

! To apply to a single slide:To apply to a single slide:

• Click in the text box you wish to animate

• In the Animations tab, choose an Animation

effect from the Animation list

! To apply to all slides:

• Perform the above steps in Template Master

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:--

Animation effects (2)

! To animate sub-points separately:

• In Animations tab, select Animation Pane

• Apply an animation effect to the text boxpp y

• An entry will appear in the Animation Pane

• Click the down arrow on the entry and choose

Effect Options

• Select the Text Animation tab

• Choose desired entry from the Group text list

Advanced Animation

! Sophisticated animation for text and graphics

! Display the Animation Pane

• The objects in your slide are labeled with numbers

! Click on an object and choose an effect from the j

Add Animation tool

! Entrance, Emphasis, Exit, Motion Path effects

• An entry appears in the Animation Pane

I love

animation!

Advanced Animation (2)

! You can animate the same object more than

once

! Reorder or delete effects in the Pane

! Preview animation with the Play button

! Modify the animation

• Start: on click, with previous, after previous

• Duration and delay timings

• Effect options: sound, dim, repeat, rewind, etc.

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:-+

Office Tools

! Format Painter: use it to “paint” text and graphic formats onto additional objects.

! Right-clicking on the slide background (i.e. a spot not occupied by an object) gives aspot not occupied by an object) gives a context menu with the following choices:• Slide layout

• Select a new layout

• Reset the layout – i.e. undo any changes you made to a slide’s layout

• Slide background

• Paste options (also on Home - Paste tool)

Drawing Tools

! Home tab, Drawing group

! Use the tools to create simple shapes

• e.g. lines, rectangles, ovals, arrows, text boxes, calloutsg g

! Add Fill, Outline and Shape Effects

! Arrange the shapes

• Order the objects in layers

• Group shapes together to create a new shape

• Position objects to a Grid, Rotate objects

Text boxes

! Most layouts contain text boxes, but you can add

others yourself

• For example, labelling an image (see Slide 4)

! Insert – Text - Text Box! Insert – Text - Text Box

• also found in the Drawing Shapes

• Select the tool, then drag a box

• Type your text, then format as desired

• List style (default is none)

• Text direction and alignment

• The green circular handle is used to rotate the box

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:-;

Shapes and Text

! Solid shapes (like the callout balloon

h ) l ishown) can also contain text

• Just create the shape, then start typing

• Note the diamond shaped handle on this

shape to adjust the “tail” of the balloon

Handouts

! For paper copies of

your presentation

• e.g. 3-up with Notes

! Handouts are for the

audience

! To Print:

• File – Print

• choose Handouts in

the Print Layout list

Speaker’s Notes

! Intended for the

presenter only

• Notes Page view

shown here

• View – Presentation

Views – Notes Page

! To Print:

• File – Print

• choose Notes Pages in

the Print Layout list

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:-;

Images

! Insert – Images

• Picture from a file

• Clip Artp

• Screenshot inserts an image of any window

on your computer that is not minimized

• The tool lets you select the window you want

• Photo Album: a simple way to create a

presentation containing several photo

images (more later)

Digital Camera Pictures

! Using digital camera pictures can

produce very large file sizes

• Use the crop tool to trim unneeded partsp p

• Use compression

• Click on a picture, then click on the Picture Tools

Format tab

• Click on Compress Pictures in the Adjust Group

• Click Options…

Photo Album

! Use this feature to quickly create a

presentation containing several pictures

• Insert - Photo Album - New Photo Album

• Select the pictures, click Insert

• Select the desired Album Layout

• Select Captions below all pictures

• insert a Text Box slide after pictures for more

detailed descriptions

• You can add other slides later

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:-;

Other Formats

! PowerPoint supports many options for

distributing your presentation

! File – Save and Send

• Broadcast Slide Show: People can see the

presentation in real time on the web

• Save as PDF file or Save as Images

• Create a video (.wmv file)

• Package to a CD

• Many others

Tips for effective

presentations

Design Guidelines

! Light text on dark background is most readable

! Most important points in top third

• title first

• top down structure of main points and sub-pointsp p p

! Use LARGE fonts

• >40 points for titles

• 24-36 point for points

! 5 or 6 points per slide

! KIS (Keep it Simple)

• fancy backgrounds just make for clutter

• animations can become annoying to audience

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:-;

Use Word to write the text

! Write your presentation text in Word's outline

view

• It avoids the distractions of PowerPoint; you

concentrate on the contentconcentrate on the content

! Heading levels become slides and points

• Level 1 heading starts a new slide

• Levels 2, 3, etc. become points, sub-points

! Home - New Slide, click the bottom of the

button

• Choose Slides from Outline

Topic #1: You

! Take a minute to introduce yourself to the

audience before you start the

presentation

• Don't forget to make eye contact

• Move across a large room

Start with the conclusion

! A good presentation builds to a

conclusion

• By writing the conclusion first, you give y g y g

yourself a target to aim for

! State your conclusion at the beginning as

well as at the end

• It will help your audience see where the parts

of the presentation are leading

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:-1

Personalize the presentation

! Whenever possible, speak about your personal interest or involvement in the topic

A di i i• An audience is more receptive to someone with a personal stake, as opposed to a spokesman

! Tell a story• An anecdote illustrates how your topic affects

people

Think like a newspaper

! A slide is like a newspaper story

• The title should be short and catchy

• It should be about a single topicg p

• The most important information is at the

beginning

One slide per minute

! Budget one slide per minute for the time

you have to make your presentation

• More than this and you will have to rush y

through slides, or worse, not finish all the

slides

! It's easier to slow down than speed up!

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:-;

Use graphics and charts

! Charts are much more effective than

words or numbers for numeric

information

! The use of images or diagrams can

simplify the discussion of a complex topic

Controlling the screen

! To get the audience's undivided

attention, blank the screen

• Use the 'B' key to toggle to black (and back)y gg ( )

• Use the 'W' key to toggle to white (and back)

! Use Alt+tab to switch to other

applications without exiting the slideshow

! Use Ctrl+esc to activate the Start button

Office Integration

Office applications working together

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:-;

Microsoft Office Suite

! The Office applications are known as a

suite

• A collection of applications designed to work pp g

together

! Different Office applications can

communicate with each other

• Example from COMP 1260: mail merge

OLE

! OLE: Object Linking and Embedding

! Used to place objects and text from an

existing file into your presentation

! Can be used for:

• Word documents

• Excel spreadsheets and charts

• Graphics

• Hypertext (links work only in Slide Show)

• Select the link text, Insert – Links - Hyperlink

Embedding

! A copy of data from source document is

embedded into the destination

! Can choose different data types:

• Object: can edit the data using the original• Object: can edit the data using the original

application (double-click)

• not connected to the source document

• Picture: only an image of the source data is

placed in the destination

• uses less resources than an object (smaller files)

• others (e.g. Formatted Text) as applicable

!"#$%!"&'( )&'($%*+,-+

./0!*-+1,*."234($%*5678$*99 -:+,

Linking

! Information from the source document is

linked to the destination

! The linked information is dynamically

retrieved from the source document

• If the source document changes, the linked data

will change as well

• Resource-intensive (can be slow)

! Caution: if the source document is moved

elsewhere on disk (or deleted), the link is

broken

Using OLE

! Copy an object

! Select Paste Special

• Home - Clipboard, -

Paste - Paste SpecialPaste Paste Special...

! Paste (embedding)

! Paste link (linking)

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<0

Intro to HTML

1. What is HTML?

2. HTML documents

3. HTML elements

D t l t• Document elements

• Block elements

4. Character-level elements

• Informational vs. presentational (physical)

1. What is HTML?

! HyperText Markup Language

• A language for describing the structure and

formatting of a web page

• We will concern ourselves with simple, text-based

web pages for the time being

! A web document contains both content and

HTML elements

• A browser displays the content according to the

instructions specified through the HTML elements

What can I do with HTML?

! Headings, Paragraphs, Lists etc.

• Web page structure

• <h1>Big Heading</h1>, <p>Paragraph</p>

! Fonts (type, colour, size, … )

• Text description

• <p style="color:red">red text</p>

! Background, Images, Links

• Additional contents types

• <a href="myhomepage.html">my homepage</a>

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<.

Platform Independence

! Web documents can be viewed on different computer platforms, e.g. Mac or PC, and in different browsers, e.g. Internet Explorer or FireFox

• They should look the same (with minor differences)

• e.g., may have different default fonts

! This is called platform independence• This is a very powerful concept

• People can use the Web without being tied to one type of computer or browser

• This is one of the reasons for the Web's popularity

Platform dependence

! Most software is platform dependent

• Software works on a specific platform

• e.g. MS Office has different versions for Windows PC and

MacMac

• Trying to run Mac software on a PC is futile

! But a Word document can be opened on

both platforms

• The .doc (or .docx) file format has greater platform

independence

Platform Independence & HTML

! Because HTML is platform independent we

can create our web pages on any computer

• HTML can be written on one platform for one

browser and interpreted on another platform orbrowser and interpreted on another platform or

by another browser on the same platform

• This is because HTML documents are pure text

files (no special control characters as, for

example, in Word or pdf files)

• All you need is a web browser that can interpret

HTML

• … and all web browsers can do that

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<=

2. HTML documents

! A basic HTML document contains:• The content to be displayed

• HTML elements to provide structure and formatting

! Any content placed into this document appears in a browserin a browser

! How this content is displayed in a browser depends on the HTML elements

• Elements are denoted with tags

! We must provide both the content and the elements explicitly in our web documents

• Compare to using a word processor; formatting is done implicitly using tools

HTML documents! HTML documents are pure text documents

• Created using any text editor

• e.g. Mac (bbedit, TextWrangler)

• e.g. Windows (Notepad, TextPad)g ( p , )

• e.g. Unix (pico, vi)

! There are also web-site authoring tools

• e.g. DreamWeaver, FrontPage

• They are meant for developing large web sites

• They are typically costly commercial products

Writing HTML documents

! We will use in this course TextPad to develop our

web pages

! TextPad provides some support for web page

developmentdevelopment

• It is installed on all Windows lab machines at U of M

! You can download it from http://www.textpad.com/

! It is “nagware” – you can use it and don’t have to

buy it but it will “nag”

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<=

Two views of HTML documents! Text editor view

• Both the content and elements are visible

! Web browser view

• Elements are not visible, but cause visible results

! As you work on a web document, you

must switch regularly between the views

• This means you must get used to editing the

document in your text editor, then switching to a

browser to view the results

• Use “View” and then “In Web Browser” in

TextPad

What does TextPad offer?

! TextPad for Windows• automatic indentation

• syntax highlighting• using colours to differentiate content from element

tagsg

• clip libraries• Insert elements from a list instead of typing

• available in the Open Area labs

• available to install at home• go to textpad.com

! Important: Save document with extension html (as text) for PC / Mac

Windows text editors

! Notepad• acceptable, but offers no HTML editing

features

W dP d! WordPad• probably should avoid because people

confuse Rich Text Format (rtf) and text

• rtf documents contain extra formatting elements that will not be recognized by browsers

• also offers no HTML editing features

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<=

Beware!!

! You MUST use a text editor to create your web documents in this course• Using web authoring tools (e.g. FrontPage)

for assignments is considered to befor assignments is considered to be Academic Dishonesty

! Do NOT use editors that may be included with web browsers• They may make unintended changes to your

tags when the document is saved

Organizing HTML documents

! Your HTML documents should be well-organized

• This means you should use spacing and indentation in your

document so that it is easy to read and modify

• Elements should be clearly visible and the organization

should correspond to the intended structure

• e.g. use blank lines above and below paragraphs

• e.g. list items should always be on their own line

! Browsers don't "care" whether your document is well

organized or poorly organized

• As long as the HTML elements are used correctly

• But it's much easier to work with HTML if it is well-organized

Incorrect HTML

! Incorrect HTML produces unpredictable

results

• For example, a common error is creating an open

tag with no matching closing tag

• Results may vary from one browser to another

• Missing or invalid tags are HTML bugs

• Some bugs are easier to find than others

• Catch bugs early and fix them right away as

small bugs can compound your problems later on

• Incrementally test your HTML

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<=

Creating HTML documents

! As we learn HTML we will create our web documents off-line

• We can work with the documents on a computer and view them in a web browser on that same computer

! The documents are not accessible on-line• that is they can't be viewed on the World Wide Web• that is, they can t be viewed on the World Wide Web

! Typically, new web sites are created off-line

! Once the site is complete, it is brought on-line by uploading it to a web server

• This requires knowledge about the web server, in particular the Operating System it uses

• We will look at this process later in the course

3. HTML elements

! Elements describe the structure of a web page (e.g. paragraphs, lists, tables)

• They may also describe formatting (e.g. font)

! Elements are specified using tags• Tags are denoted by the symbols "<" and ">".

• Tags occur in pairs that contain part of the web page

! The element tells the browser how to structure the contents of the tags

• e.g. the paragraph element

<p>It was a dark and stormy night.</p>

Dyadic Elements

! Earlier we said that element tags occur in pairs• called opening and closing tags

• closing tag is the same as opening tag, but with a slash before the element name, e.g. <p>…</p>

! Elements that require both are dyadic elements• they always are used to contain part of the page

! Ford calls these tag pairs

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<4

Monadic Elements

! Some elements use only the opening tag

! These are called monadic elements• They provide structural info about the web page that doesn't

involve content

• e.g. <br> starts a new line

! Ford calls these single tags

! XHTML requires that monadic elements be self-closing

• e.g. The self--closing version is <br />

• The element name is followed by a space and a slash

Monadic and Dyadic Elements

! New markup languages like XML and

XHTML require closing tags that are

optional in HTML.

! For example:For example:

• <p> (paragraph) tells the browser to display the

text that follows it starting on a new line, after

leaving a blank line

• The <p> tag does not require a </p> in HTML,

but it is now a good idea to use one at the end of

the paragraph, in preparation for XHTML.

Basic document structure

! All HTML documents have the same basic elements and structure

! Basic HTML document elements (note the indentation)

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<=

Document elements! <html> … </html>

• The entire document is contained by these tags

! <head> … </head>

• Information about the document (including the title) is contained by these tagstitle) is contained by these tags

! <title> … </title>

• The page title is contained by these tags and will be displayed in the browser title bar

! <body> … </body>

• The content of a page is contained by these tags

A First HTML document! A simple document in text editor view:

<html>

<head>

<title>My Document</title>

</head>

<body>

Thi i ! /<p>This is easy!</p>

</body>

</html>

! Not all of the elements in this example are strictly necessary, but they should be included in each HTML document you create

Block Elements

! The previous elements provided the

basic structure of our HTML document

! Block elements specify the structure ofBlock elements specify the structure of

the content of our page• Block elements occupy the entire width of the

browser window

• blank space is left above and below the element

• e.g. headings, paragraphs, lists

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<=

Headings

! Headings are most often used to identify

sections and subsections

• Just like in a word processor document

! There are six different heading levels

<h1> </h1> t i t t l t f t• <h1>…</h1> most important - largest font

• <h6>…</h6> least important - smallest font

! Don’t use headings to simply make text

bigger or smaller

Paragraph

! The paragraph is another block element

• blank space is left above and below

• the text contained in <p>…</p> fills the entire p p

width of the browser window

• the browser decides when to start a new line

• just like word wrap in a word processor

• Try resizing the browser window and watch

the browser redraw the paragraphs

Line break

!The line break is a monadic element

• It tells the browser to display the following

text on the next line with no blank space

above, e.g.

<p><p>

i thank You God for most this amazing <br />

day: for the leaping greenly spirits of trees <br />

and a blue true dream of sky; and for everything <br />

which is natural which is infinite which is yes

</p>

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<0/

HTML Character Codes

! Since "<" and ">" denote tags in HTML, what if

we want these symbols in our document?

! HTML has character codes for these symbols

• use &lt; or &gt; instead

• Character codes begin with "&" and end with ";"

• e.g., &amp; for ampersand, meaning &

• e.g., &pi; for the Greek letter pi, meaning !

Unicode

! What is Unicode?

• A standard for representing and manipulating text

• Unicode uses 2 or more bytes to represent

characters (ASCII 1 b t )characters (ASCII uses 1 byte)

! Why do we need Unicode?

• To represent many alphabets (not just Latin)

• Applications that understand Unicode can be

adapted to other languages without being rewritten

• A concept called internationalization and localization

Browsers and Unicode

! Most modern browsers provide support for

Unicode characters

• A browser will display a Unicode character if it can

fi d i t f t i t ll d th tfind an appropriate font installed on the computer

• e.g. Arial Unicode MS, Lucida Sans Unicode

! You can specify Unicode characters using

numeric character codes

• e.g. " (a Dingbat font character)

• &#9986; (decimal) &#x2702; (hexadecimal)

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<00

Review

! Every HTML document has a basic structure

• <html>, <head>, <title>, <body>, …

! Some elements are monadic

! <br />br /

! Some elements are dyadic

! <b> … </b>

! Multiple elements can be applied

! <i><b>This is italics and bold!</b></i>

! Use characters codes for special symbols

! &lt; for < and &gt; for >

Lists

! A lot of content on the web is in the form of lists:

• As bulleted lists of point, or

• As numbered list

U d d (b ll t d) Li t! Unordered (bulleted) List

• <ul> … </ul>

! Ordered (numbered) List

• <ol> … </ol>

! Single List Items in a list

• <li> … </li>

Lists

! Each <li> … </li> causes a new bulleted or

numbered point (item) to start.

• This formatting is done automatically by the browser

! Example! Example

<ul>

<li>This is the first item</li>

<li>This is the second one</li>

<li>This is the third item</li>

</ul>

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<0.

Editing HTML Code

! Use spacing and indentation in the editor window to organize your HTML code, e.g. lists.

! Your web page will still function correctly but without spacing and indentation, it's difficult to read and edit your HTML code.

! Remember to use indentation and spacing in your assignments.

Attributes for Lists

! We can use the type attribute for ordered lists to get different kinds of numbering

• e.g., <ol type="I">

Valid types:! Valid types:

• "I" = roman numerals; "i" = small roman numerals

• "A" = alphabetical, capital letters; "a" = lowercase

• "1" = Arabic numerals (default)

! The start attribute specifies the starting value

• <ol start="15"> - the list numbering starts at 15

! Later we will use CSS styles to modify list attributes

Definition Lists

! A definition list is helpful when you have a list of terms, and you want to include an indented definition for each term.

! For example: p

HTML

the language for creating web pages

LISTSmany varieties are supported

! to get this kind of list, use the definition list tags - <dl>…</dl>

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<0=

Definition Lists

! for the term to be defined

• <dt>...</dt>

! for the definition

• <dd>…</dd>

! So in a text editor window, our example

would look like…

Our Example

<dl>

<dt>HTML</dt>

<dd>the language for creating webpages</dd>

<dt>LISTS</dt>

<dd> HTML supports ordered, unordered and definition

lists</dd>

</dl>

Definition Lists

! They’re not just for definitions

! You can use them anywhere you have

a term for a header and then itemsa term for a header and then items

connected to the term

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<0=

Nested Lists

! You can nest one list inside another

• a sub-list

Start a list and when you want a sub! Start a list, and when you want a sub-

list, just start a second list inside a list

item.

! For example…

Nested List example

<ol>

<li>Birds

<ol type="a">

<li>Swallows</li>

<li>Starlings</li>

! Things to note:

• Sub-lists are

completely contained

within an item of the<li>Starlings</li>

</ol>

</li>

<li>Bats

<ol type="a">

<li>Vampire</li>

<li>Common Brown</li>

</ol>

</li>

</ol>

within an item of the

main list

• Indentation is used to

help us see the list

structure

Nested Lists

! Here indenting really helps to organize

your HTML in the text editor view.

! It would be almost impossible to follow

if we ran it together

! Note that the indenting does nothing at

all to the browser view; it just helps

keep the lists organized.

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<0=

Horizontal Lines

! <hr /> (horizontal rule)

• a monadic block element that draws a horizontal line

across the browser window

! The <hr /> element has many attributes that can

alter its appearance

• Later we will again use CSS styles for this purpose

! For example:

• <hr size="4" noshade />

• gives a line 4 pixels high without 3-D shading

4. Character-level / inline elements

! We have seen block elements

• They describe the structure of the web page

! We look now at character-level (inline) elements

• They describe the text itself

! Two types of character-level elements:

• Informational elements

• describe the role the text plays

• e.g. emphasized

• Presentational (or physical) elements

• describe the physical format of the text

• e.g. bold

Informational Elements

! Allow the browser to “decide” the display

• e.g., <em>...</em> for emphasis

• what is common for emphasis today might not be common tomorrowcommon tomorrow

• a common emphasis for a typewriter was underline, but today italics is used instead

! New generations of browsing devices may use something completely different

• e.g. web-enabled cell phones

• e.g. voice browser for the visually impaired

!"#$%&#%&'()* +,"#-$&./0.

12)3&0.4/&1%567#-$&89:;-&!! .<0=

Other Informational Elements

• <em> … </em>

• Emphasis

• <strong> … </strong>

Strong emphasis• Strong emphasis

• <address> … </address>

• Display an e-mail address

! Many more. See book or HMTL Quick

Reference on links page

Presentational Elements

" Specify the physical format of the text

• e.g. <b> (bold)

• e.g. <i> (italic)

• Many more. See book or HMTL Quick

Reference on links page

" We will study a better method of

specifying the format later:

! Cascading Style Sheets (CSS)

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>1

Introduction to XHTML

Markup Languages

! A markup language is a set of rules that describes the layout, format or structure of a document

! Markup languages existed long before the Web• In publishing, "markup" is added to a manuscript, giving

i t ti t th i tinstructions to the printers

! Standard Generalized Markup Language (SGML): first standardized markup language

• it provides the framework for markup languages used on the web (HTML & XHTML)

• Not until web's popularity exploded in mid 1990's that the benefits of SGML were realized

SGML

! Is the ancestor of, and provides framework for,

current web markup languages: XHTML, XML

and HTML

! Has been used in many industries for large-

scale documentation projects

! Primary goal: to provide a standard format and

structure for large documents

• Allowing these documents to be used by a number of

programs e.g. display, information retrieval

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>/

SGML

! Is complex and hence expensive to

implement

• OK for large corporations and organizations g p g

! Has not gained wide acceptance in the

marketplace for small- or medium-sized

projects

HTML: 1st language of the Web

! A markup language developed using SGML• A language for describing web pages

• A compact language (compared to SGML)

• Provided a portable document format that was not• Provided a portable document format that was not tied to any particular program or platform

• An open language (not owned by anyone)

• Free to use

! Developed in the 1990's at CERN in Switzerland

HTML documents

• HTML documents are simple text documents embedded with markup elements

• They are completely portable across platforms and programsp g

• HTML documents can be displayed using any program running on any OS that knows how to interpret the HTML language

• Gave developers incredible amount of flexibility, and allowed them to move files freely among platforms and programs

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>=

HTML Limitations

! Its small size means it is hard to extend or

customize the language

• Browsers added their own extensions to HTML to

meet the demand for more functionality y

• This means HTML slowly lost platform independence

! HTML has syntax rules, but does not require

that web pages follow them strictly

• Poorly written pages won't work with the latest web-

enabled devices (PDAs, cell phones, other devices)

HTML Limitations

! Many HTML elements describe how

something should be displayed in a web

browser (the presentation)( p )

• OK when browsers were the only programs

that displayed web pages

• How should new web-enabled devices (cell

phones, speech programs, PDA's) display a

web page?

HTML Limitations Summary

! HTML elements are primarily used for defining presentation and formatting styles

• they do not provide any information about the data itself

! HTML has a finite number of elements• cannot be extended or customized

HTML d t f d t t dh t t i t! HTML does not force documents to adhere to strict syntax rules

• makes it difficult for web devices to interpret poorly written code

! HTML’s limitations are further being felt with the introduction of new technologies, such as cell phones, voice and speech programs and PDAs

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>?

XML

! XML – eXtensible Markup Language

! XML is a meta language

• a set of rules for building markup languages

! XML separates structure from presentation

! XML supports adding new elements as needed

! XML is likely the language of the future for the

Web

• It is not widely supported yet though

XHTML

! XHTML is a markup language for Web

documents written in XML

• It is HTML 4.0 written in XML

! It is a bridge between the old and new

technologies

• It works with older browsers since it consists

of HTML elements

• It will work with new technology since it is

written in XML

Differences between HTML & XHTML

! HTML is reformulated into XHTML

! They are same except that XHTML can be

extended beyond what HTML can doextended beyond what HTML can do

! Many times the term HTML and XHTML

are used interchangeably

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>?

Differences between HTML & XHTML

! Not too many differences since the

elements are the same

• XHTML documents begin with a prologg p g

• The <html> element contains an XML

Namespace attribute

• All element names are written in lowercase

• All elements must have a start tag and end tag

• All attributes must have a value and it must be

contained in quotes

XHTML Versions

! There are 3 versions of XHTML

• Transitional is the most used (currently)• Most resembles HTML, but allows deprecated

(obsolete) elements(obsolete) elements

• Frameset supports the use of frames• i.e. multiple independent windows in the browser

• Strict is the future of web page development• Separates structure from presentation

• The one we will use

DOCTYPE

! What is a DOCTYPE?

• Short for Document Type Declaration

! It specifies a standard the browser should comply with when rendering your pages

! What info does the DOCTYPE contain?

• The name of the standard

• A URL to a DOCTYPE the browser can download

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>?

Strict DOCTYPE

! The DOCTYPE must be first thing in your web page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

// / / / /"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

! The Strict DOCTYPE is specified here

! Why?

• It declares we will follow the rules of HTML

strictly, so the latest web devices will be able to

interpret our pages

DOCTYPE Declaration

! Opening: <!• Meaning: declaration about to begin

• Other place this opening is used: Comments• Other place this opening is used: Comments

! DOCTYPE:

• Meaning: Code is declaring document type

DOCTYPE Declaration

! html:

• Meaning: document type being written in

HTML

• Because we are using XHTML, which is case g ,

sensitive, this has to be in lower case

! PUBLIC:

• Declaring the document as a public document

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>5

DOCTYPE Declaration

! "-//w3c//DTD XHTML 1.0 Strict//EN"

• This syntax defines the host of the

document’s language type and version (W3C)

• DTD is list of allowed elements and attributes

! Never Place anything above DOCTYPE

declaration

XML Namespace! Following the DOCTYPE is the root element:

• <html> </html>

• In the opening tag we add a “namespace”

• It is required by XHTML Strict

The Namespace defines the names of elements! The Namespace defines the names of elements and attributes being used by the document

• Ford also suggests optional lang and xml:lang attributes, which specify the language in which the document is written

<html xmlns="http://www.w3.org/1999/xhtml"

lang="en" xml:lang="en">

head and title

! <head> </head>

• This element provides a heading to your web

page document (with <title> element) in the

title bar of your browser window

! Elements in the head includes

• <title>, <meta>, <script>, <style>, <link>

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>?

Meta Elements

! This provides info about the page

• This is called metadata

! The meta element is used to includeThe meta element is used to include

metadata in our documents

• Two forms of the meta element:

• note that it is self-closing

<meta http-equiv="name" content="content" />

<meta name="name" content="content" />

http-equiv Meta Elements

! The http-equiv version provides info that

control the actions of the browser

• It actually provides info that is normally sent y p y

by the web server in an HTTP Header along

with your page

• We will specify the character encoding

<meta http-equiv="Content-Type"

content="text/html; charset=ISO-8859-1" />

This renders the web content in Latin characters including

English. More universal format is UTF-8 (Unicode character set)

name Meta Elements

! The name meta element provides non-

header info about your page

• e.g. <meta name="description" content="The g p

Detective Shows page" />

• e.g. <meta name="keywords"

content="Dragnet, Ironsides, Kojak, Mannix" />

• <meta name="Generator" content="TextPad

4.0" />This is not displayed in the web page; like other elements in the

head portion, this information is used by the browser and other

resources such as search engines

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>?

<body>

! <body> </body>

• This is where all the action takes place

• All content of page is defined within this p g

element

The code so far

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> MY TITLE </title>This is just a comment mentioning</head>

<body>

<!-- Main contents -- >

</body>

</html>

This is just a comment mentioning

the main contents go here

Elements

! XHTML is case-sensitive

• This means all element tags must be in

lowercase

• e.g. <html> not <HTML> or <Html>

! All elements must have opening and

closing tag pairs

• e.g. <p>…</p>

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>10

Single Tags

! What about monadic elements (single

tags) like <br>?

! XHTML has a shorthand so that such tagsXHTML has a shorthand so that such tags

are self-closing

• e.g. <br />

• There must be a space before the slash

Attributes

! Attribute names are also case-sensitive

• Must also be in lowercase

! All attributes must have a valueAll attributes must have a value

• e.g. <table border> won’t work

! All attribute values must be enclosed in

quotes

• e.g. <table border="1">

Quoting Attributes

! Quotes may be nested

• Nested quotes alternate between single and

double quotes

• e.g. <img src = "dragnet.jpg"

alt = "Scene from 'Dragnet', 1959" />

!"#$%&#%&'()*+ ,-"#.$&/01/

23*4&1/50&2%678#.$&9:;<.&!! =>11

W3C Validator

! XHTML is strict about following rules

• Hard to get it right on your own

! W3C offers a web-based page validationW3C offers a web based page validation

service

• Submit your web page and it will check it for

valid XHTML

http://validator.w3.org/file-upload.html

W3C Validator

! The Validator needs to know 2 things about your web page:

• The DOCTYPE (i.e. which version of HTML or XHTML d)XHTML was used)

• We have already included this in the web page

• The encoding (i.e. which character set was used, e.g. ASCII)

• We need to supply this information also

• in a meta element (see slide 23)

!

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;.

Cascading Style Sheets

Introduction to CSS

Structure vs. Style

! HTML defines the structure of your web page

• e.g. tables, lists, paragraphs, etc

! It doesn’t let you control the actual way your page looks

(its form)(its form)

! More and more, people want to have control of the form

of their pages without having to resort to tricks like using

tables or making their page one large image

HTML Evolution

! HTML 1

• A text-only, purely structural language

• Tags describe the structure of a page, NOT style or positioning

• All formatting was left up the web clientg p

• Predominantly used by researchers

! HTML started to change with the introduction of Mosaic,

the first Graphical browser

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;,

HTML 2 and 3

! Graphical browsing allowed the Web to

grow rapidly in popularity

! Style and position attributes started toStyle and position attributes started to

creep into HTML

• e.g. presentational tags, font tag

! Maintaining large web sites became an

unmanageable task

HTML 4

! The latest version of HTML marks a return

to a purely structural language

! CSS is used to provide style andCSS is used to provide style and

positional control

! Just as in word processing, styles provide

an effective means of managing the

appearance of many documents

Containment

! CSS styles are applied to HTML elements

• e.g. <p>, <li>, <h1>

! In order to apply styles properly, browsers must know

exactly where elements begin and endexactly where elements begin and end

! This means all elements must have both an opening and

closing tag

• e.g. <p>…</p>

! This concept is called containment

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;<

Formatting control

! In HTML, it is hard to control things like:• margins

• spacing between lines and words

• type size and face• type size and face

• image positioning

! Cascading Style Sheets (CSS) give you direct control of the form of your web pages

• if you want a margin on your page, just specify it without having to resort to tables with empty columns or using empty lists

CSS Design

! There are many reasons for CSS Design

• Keeping presentation and style separate

• Make formatting changes once in CSS and g g

control all the documents using this CSS

• Since the CSS is loaded onto the browser’s

memory, fast browsing is possible with

continuing styles

What’s in a CSS? CSS Rules

! A style is a series of rules that assign values to CSS

properties

! A rule consists of a selector and at least one declaration

! A rule looks like:! A rule looks like:

• selector {declaration; declaration; … declaration}

! The selector selects the HTML to which the style will

apply

• Many types of selectors are available; some widely supported by

various browsers, others not

• See Appendix B of Ford for web resources

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;:

What’s in a CSS? CSS Rules

! A declaration is made up of at least one CSS property and related property value; It looks like:

• property: value

! e.g. h2 {font-size: 16pt; font-style: italic; font-family: arial; color: lightblue}

• h2 is the selector for your h2 headers and declaration is made up of the font propertiessuch as font-size, font-style, font-family and colorwith appropriate property values 16pt, italic, arialand lightblue respectively

Properties - Color & Background! color specifies the foreground colour (i.e. the text) of

an element

! background-color specifies the background colour

! Colour can be specified by:• Name, e.g. aquag q

• Hex RGB value, e.g. #00FFFF

• Decimal RGB value, e.g. rgb(0,255,255)

• All these examples specify the colour aqua

! background-image: url("../Images/spots.gif")• Loads the image file ../Images/spots.gif and places it in the

background of an element

• It can be relative (path) or a complete URL

Browser Generic Font Families

! Modern web browsers recognize several categories of font families

• Proportional: normal font for body text

• Sans-serif: e.g. Arial, Helvetica

• Serif: e.g. Times New Roman

• Monospace: typewriter font

• Cursive: handwriting style

• Fantasy: a decorative font

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;<

Browser Generic Font Families

! A particular browser may or may not have all the families listed

• Each of the families a browser does have will h d f lt f t hi h h ihave a default font, which you can change in the browser preferences

! We can use these font families as a kind of “backup” choice when we are specifying a particular font face

Properties - Font! font-family: Times, serif, sans-serif, "Times New

Roman", Courier, ...• you have to put quotes around multi-word font family names

(don’t forget to use a generic family name too)

! font-size: 10pt | 2.5em | small | large• “em” is ems, a measurement relative to the current height ofem is ems, a measurement relative to the current height of

an element’s font (1em = no change, 2.5em = 2.5 times as tall)

! font-style: normal | italic

! font-weight: normal | bold | bolder | lighter | 100-900

Properties - Text

! These affect how text is displayed on a

line

• vertical-align: baseline | sub (subscript) |

super (superscript)super (superscript)

• text-decoration: underline | overline | line-

through

• text-transform: capitalize (first letter of each

word) | uppercase | lowercase

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;<

Properties - Lists

! Replaces deprecated list attributes• For unordered lists:

• list-style-type: disc | circle | square | none

• list-style-image: url(bullet.gif)

• For ordered lists:

• list-style-type: lower-roman | upper-roman | lower-alpha | upper-alpha

• For either:

• list-style-position: inside | outside

• The outside value indents the text so that the list marker is 'outside' the list item (the default behavior)

• No substitute for the start attribute apparently

Properties - Block (paragraph)

! Margins and Padding (space between)

• Specify properties for all 4 sides at once

• e.g. margin: 2em, padding: 30px

• Or specify top, bottom, left and right individually

• e g margin-bottom padding-top• e.g. margin bottom, padding top

! Alignment, Indentation and Line Spacing

• text-align: left | right | center | justify

• text-indent: (indent the first line of an element)

• line-height: normal | 1.1 | 110%

Properties - Block Borders

! Properties for border width, color and style

• Specify properties for all 4 sides at once

• border-width, border-color, border-style

• Or specify top, bottom, left and right individually

• e.g. border-top-width, border-right-style

• Width values: thin | medium | thick

• or use em-values, pixels, etc.

• Style values: dotted | dashed | solid | double | groove | ridge |

inset | outset

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;2

Properties - White space

! White space means blanks, tabs, new lines

• Browsers ignore white space when displaying your pagesp y g y p g

• We use the <pre> tag to display text with white space preserved

! Use the white-space property to control what happens with white space

• white-space: normal | pre | nowrap

Shorthand properties

! Shorthand properties let you specify in a

single definition a set of related properties

• some or all of the set may be specifiedy p

• the background property includes background-

color, background-image, background-repeat,

background-attachment and background-position

• the font property includes font-style, font-variant,

font-weight, font-size/line-height and font-family

• e.g. p { font: italic bold 12pt/14pt Times, serif }

CSS rules! You can have several selectors, separated by

commas, sharing the same rule

• e.g. h1,h2,h3,h4,h5,h6 {font-family: helvetica}

! A selector can appear in several rules

• e.g. h1 {text-align: center} can be used together with the rule

aboveabove

! Any element can have a rule, and any type of

declaration can be specified, even if it doesn’t make

sense

• e.g. img {font-family: helvetica}

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;<

CSS comments

! You can add comments to your CSS rules

• They are different from HTML comments

! CSS comments are enclosed by /* and */CSS comments are enclosed by / and /

• like HTML comments, they can span multiple

lines, e.g.

/* This is a CSS comment

that spans several lines */

Applying CSS rules – 6 ways! CSS rules can be located in several areas

• Browser Style – default

• User style – created by user for his/her special needs. These styles available in a separate style sheet

• inline in an element tag and applied via style attribute – good for one-time stylesfor one time styles.

• embedded within the head of your HTML to control that document

• in a separate text document (with the extension .css) which you link into your HTML. Any document linked to this style sheet gets this style. This is where high control power of CSS is found.

• IE also supports importing stylesheets. Similar to linked styles and enables you to import styles into a linked style sheet.

Applying CSS rules – 6 ways

! Once you have specified the form of

your document using CSS, you can

change things just by changing the rules

in the CSS itselfin the CSS itself

• a bit like using named styles in a word

processor

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;<

What does cascading mean?

! Cascading is an application hierarchy

! A document may be affected by CSS rules from several sourcesfrom several sources

• a linked or imported style sheet

• embedded or inline CSS

• Browser or user style

! An element may be affected by several rules

What does cascading mean?

! Browsers cascade rules to determine which rule has priority

• inline styles (highest priority) (closest to the element))

• embedded styles

• linked styles

• imported styles

• browser default styles (lowest priority)

• User Style will override any other styles specifications

These two treated equally

Inline rules

! Inline rules are specified with the style attribute

• e.g. <p style="font-family: 'Times New Roman'; background:

green">

• The value of the style attribute consists of CSS definitions

enclosed in quotes

• Note the nested quotes used to enclose multi-word font family

names

! The inline rule affects only the one element it is

contained within

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;.-

Embedded rules! are placed within the <style>…</style> tag in

the document’s head• embedded rules affect entire document, e.g.

<head><style type="text/css">y yph1{font-family:arial, helvetica, sans-serif;

font-size: 48pt; color:red}p{font-family: "Times New Roman", serif;}

</style></head>

Linked rules! You can have many pages use the same style

information

• place your rules into a separate text document

• nothing but style rules go into this document, i.e. no

<html> <head> etc tags<html>, <head>, etc tags

• this file’s name MUST have the extension .css

• e.g. mystyle.css

! Use the Link tag in the head of every document that

will use this sheet, e.g.

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

Linked vs. Embedded rules

! To ensure embedded rules have priority

over linked rules, place the embedded

rules after the linked stylesheety

• i.e. the link element should appear before the

style element in the head of the document

• Most browsers will give the linked styles

priority if the link is moved after the

embedded styles

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;..

Imported Style Sheets

! Importing involves 2 types of style sheets:

• Separate style sheet that’s to be imported (say, import.css)

• Embedded style sheet in the document

<head>head

<style type="text/css">

@import url (import.css);

</style>

</head>

Importing is done by the directive @import

Import into Linked Style Sheets

! Might have various style modules for

various specific purpose (ads, tables,

forms etc.))

• Place these style sheets in separate module

files (mod1.css, mod2.css …..)

• Then import them into the styles.css file

• Link the styles.css file to the main sheet

(index.html)

Inheritance! Inheritance means that styles are inherited from

their parent elements; For example,

<body><h1> My header </h1>

<p> Subsequent Text </p>p q p

</body>

! Both p and h1 elements are considered children of body element. The styles for the body will be inherited by these two elements until another rule is made that overrides the inherited style

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;.,

Class selectors! You can define different properties for

an element by using class selectors

• e.g. p.isgreen {color: green}p.isred {color: red}

! You use the class= attribute in the tag! You use the class= attribute in the tag to select the class you want

• e.g. <p class="isgreen">

! You can also create class selectors that aren’t attached to any particular tag

• e.g. .emphasis {font-family: impact; font-weight:bold; text-decoration: blink}

ID selectors

! Similar to class selectors

• one important difference

• You may use classes any

number of times

• IDs may appear only once

! ID selectors are used to

denote sections of a

document, e.g.

<div id="header">y pp y

• In the rule, a hash mark is

placed in front of the ID name

• e.g. #content {background-

color: white; color: black}

! You use the id= attribute in the

tag to select the ID you want

• e.g. <div id="content">

d d eade

</div>

<div id="content">

</div>

<div id="footer">

</div>

Descendant selectors

! A big problem with classes is that we must use the class attribute in every tag

! We can avoid this and still get the benefit of classes by using descendant selectors

• e.g. #content p {text-indent: 2em}

• All paragraphs that are contained in an element with the content id (e.g. the div element in the previous example) will use this rule

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;.<

Links and Pseudo-classes! The <a> element has several states depending

on what the user has done while browsing• The user has not visited (clicked) a link

• The user has visited a link

The user is in the process of clicking a link• The user is in the process of clicking a link

• The user is hovering over (pointing to) a link

! Each of these states is specified by a pseudo-class

• a:link, a:visited, a:active, a:hover

! Each of these pseudo-classes can have a style associated with them

Rollovers

! We can use the link pseudo-classes to produce a “rollover” effect

• i.e. a link changes appearance when the user h ithovers over it

• e.g.

a:link{color: blue}

a:hover{color:red}

will cause the link to change colour when the user points to it

Pseudo-elements

! Pseudo-classes depend on the state of an

element

! What if we want different parts of anWhat if we want different parts of an

element to appear different, depending on

its position in the element?

• e.g. drop-cap

! Pseudo-elements permit this

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;.:

Pseudo-elements

! Two pseudo-elements recognized by most

newer browsers

• first-letter

• applies only to the first letter of an element

• good for applying drop-caps to a paragraph

• first-line

• applies to the first line of an element

Drop-cap

! Classes and pseudo-elements can be

combined to permit a drop-cap

p.dropcap:first-letter{font-size: 3em; float: left; p p p { ; ;

font-family: "Brush Script MT", Cursive}

<p class="dropcap">The first letter of this

paragraph will be a drop-cap.</p>

<p>This paragraph will not have a drop-

cap.</p>

The font element

! The font element is deprecated

• It is presentational; it gives information about

how text should be displayed on the page

• However, you will see it used in web pages to

specify font colour, font face, font size

! We will briefly describe the font element

but we will use CSS to work with fonts in

our pages

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;.<

The font face attribute! We can specify a particular font face using

this attribute

• The problem is, we have no way of knowing which fonts will be installed on a given computercomputer

! To get around this problem, we usually provide a list of font faces

• A browser will work through the list, using the first font it finds installed on the computer

• Ensure the last font in the list is a generic font family name

face attribute examples

! The list is enclosed in quotes, with commas

separating items

• No quotes needed around multi-word font names

• <font face = "Times New Roman, Times,

Proportional" >

• <font face = "Arial, Helvetica, Sans-

serif" >

• <font face = "Courier New, Courier,

Monospace" >

Font color attribute

! You can change the colour of text using

the color attribute

• e.g. <font color="blue">Blue g

Mood</font>

• There are about 17 colour names (aqua, black, blue, fuchsia,

gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, and orange)

! We will cover colour in detail later

!"#$%&#%&'(( )*"#+$&,-.,

'/01&.,2-&'%345#+$&6789+&!! :;.<

Font size attribute

! You can specify font size in absolute or relative terms:

! Absolute

• 7 sizes from 1 to 7 (default size is 3)

• <font size="6">

• Note: different browsers measure font size differently

! Relative: • size="+1" size="–2"

• Changes the font size relative to the default

! Note: you can change the default size using the basefont tag, e.g. <basefont size="6">

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @A6

Comments, Links and Tables

Comments - HTML

! Comments are used to include information that is not part of the page content

! They are used to give directives to the author or colleagues who follow up the document beforecolleagues who follow up the document before they release it

• They are contained in a comment element

• e.g. <!-- Last revision Aug 11 -->

! The browser ignores comment elements• Typically, a page author uses comments to explain

any hard-to-understand HTML

Comments - HTML

! Comments can span several lines

• Can be used to "comment out" (temporarily remove) web page content

! l t<!-- later

<a href="exam.pdf"> practice exam</a>

-->

• Of course users can still view the commented out HTML in the source

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @A4

Comments - CSS

! Comments can be inserted in a CSS style file

! They are slightly different• They open with a forward slash followed by an asterisk

(star) and close with an asterisk followed by a forward l hslash

• Any comment within this area is not interpreted by the browser

• The following header description is commented out from a CSS file!!

/* h2 {font-size: 16 pt; font-style: italic; font-family: arial;color: lightblue} */

Comments - JavaScript

! Some JavaScript used in contemporary web

browsers may not be supported by older browsers

! In order to avoid problems with older browsers,

web authors would "hide" the JavaScript

• Using both HTML and JavaScript comments

• contemporary web browsers can interpret the

JavaScript, but older ones treat it as a comment

• Not so common anymore as older browsers are updated

• Please refer to page 289 of Ford

Linking in HTML1. Linking to files in the same folder

2. Web Site Organization

3. Linking to files in different folders

Absolute and Relative References• Absolute and Relative References

4. Intrapage Linking (Linking within the

same page)

5. The mailto Link (email link)

6. Linking Issues

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @AB

1. Linking to files in the same folder! To create a link from one page to

another, you must have at least two pages.

! Assume you have a folder which contains two files:contains two files:

• index.html

• schedule.html

! Our goal is to create a link in !index.html" that will open the file !schedule.html"

Basic reference with href

! If you want to create a link in index.htmlthat will open schedule.html, type this in the body of index.html:

<a href="schedule.html">Here is the

schedule</a>

! When you open index.html in a browser, Here is the schedule will appear as a hyperlink

The <a> Tag

! <a> creates an anchor

! an anchor marks a location, either of the link

itself, or of a destination of a link inside a

pagepage

! </a> closes the anchor tag. <a> has many

attributes.

• when making a link from one page to

another, we use an href attribute to enter

the destination file:

<a href="schedule.html">Schedule</a>

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @AB

2. Web Site Organization

! Large web sites organize their web

documents using folders

• Easier to manage a large collection of filesg g

• Can restrict access to certain parts of the

site

! You must understand how to navigate

the directory structure in order to create

links

Web Site Organization example

mywebsiteindex.htmllinks.htmlimages

mexico.jpgmail.gif

! The whole web site is contained in the folder mywebsite

• index.html is the main page for the web site

The subfolder images containsg

sportshockey.htmlcurling.htmlbowling.html

tutorialsindex.htmllinks.htmltables.html

• The subfolder images contains image files

• The subfolder sports contains sport related pages

• The subfolder tutorials contains web tutorial pages

• it also contains another page called index.html

3. Linking to Files in different folders

Relative Links

! From: mywebsite/index.html

! To: mywebsite/links.html

<a href="links html">My Links</a><a href= links.html >My Links</a>

! From: mywebsite/index.html

! To: mywebsite/sports/bowling.html

<a href="sports/bowling.html">

Bowling Page</a>

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @A@

3. Linking to Files in different folders

Relative Links

! From: mywebsite/sports/hockey.html

! To: mywebsite/index.html

<a href="../index.html">Back</a>

! From: mywebsite/tutorials/tables.html

! To: mywebsite/sports/hockey.html

<a href="../sports/hockey.html">

Hockey Page</a>

Common errors

! mismatched or incorrect quotes:

"href=/../Notes/"

or:or:

href=../Notes/"

! including an initial “/”:

href="/../Notes/"

Absolute and Relative Referencing

! Absolute references specify a complete URL

• That is, exact address of the file to link to, including

the domain and subdirectory.

• use them when linking to an external web site

• e.g. <a href="http://tsn.ca/curling/"> TSN curling

page</a>

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @AB

Absolute and Relative Referencing

! Relative references means that you describe

the location of the link's destination relative to

the location of the file containing the link, as in

the previous examples

• use them when linking within a web site

• That is, the file is available in the same server

References Attribute

! Attributes can be added to the linked documents that adds additional cues for browsing

! The title attribute:

• e.g. <a href="http://tsn.ca/curling/" title="The TSN Curling World"> TSN curling page</a>TSN Curling World > TSN curling page</a>

• With the above title attribute, as soon as the cursor hovers over the link !TSN Curling Page", a separate text box will appear with the content:

The TSN Curling World

Absolute references within a site

! Could we use absolute references to link within

a web site?

! Yes, but…

O l if h h b l d d b• Only if the page has been uploaded to a web server

• It makes it harder to reorganize a large web site since

using absolute links binds those links to specific

locations

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @A:

4. Linking within the Same Page –

Intrapage Linking

! If you want to make a link to a different section

of a web page, you begin by marking the

destination with an anchor tagg

! This is very good with very long documents

! For example, if you want a link at the bottom of

a page that says, “Click here to get to the top

of this page”, you would:

Linking within the Same Page –

Intrapage Linking

• Create an anchor around some text (or graphic) at the top of the page: <a name="top">Welcome to my home page</a>

• Create a link to that anchor (the one named “top” that you just created) at the bottom of the page:Click <a href="#top"> here </a> to go to the top of thisClick a href #top here /a to go to the top of this page.

• You can also specify both a page and an anchor:Click <a href="index.html#top">here </a> to go to the top of the index.

• Assumes there is an anchor named “top” in index.html

• The octothorpe # is very important here!!

Linking to a specific location

• Just like linking to other parts of the document from within the page, linking to a specific location in another document is also possible

• e.g. <a href="http://tsn.ca/curling/#recent-champions" title="The TSN Curling World"> Click here to see a list of Recent TSN curlinghere to see a list of Recent TSN curling Champions</a>

• Of course, this requires an anchor<a name="recent-champions"> Recent Champions </a> at appropriate location of the page

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @AB

5. The mailto Link (email link)! Not really a link since it doesn't locate the user to a

different place

• mailto: attribute is used

• It starts the browser's e-mail client with the To: e-mail

address already filled in

<a href="mailto:frodo@theshire.com">

click here to e-mail me</a>

! It isn't used much anymore

• The browser's e-mail client may not be configured properly

• Spambots use the mailto: attribute to harvest e-mail

addresses

E-mail Obfuscation

! Hiding your e-mail address from

spammers

! Spammers use web-crawling programsSpammers use web crawling programs

called spambots to harvest e-mail

addresses from web pages

• The mailto link is an inviting target for

spambots

• They look for the user@domain pattern

Simple obfuscation techniques

! Don’t use mailto links

! Spell out key parts of the address

• e.g. frodo at theshire dot com

! Use a graphic to display your e-mail address

! Use a table to break up your address into

segments

! None of these allow the use of a mailto link

though

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @AB

Obfuscation with character codes

! Browsers will recognize numeric ASCII

character codes

• You can spell an e-mail address using p g

character codes, making it harder to harvest

• The ASCII code can be specified in decimal

or hexadecimal

• e.g. ASCII code for @ is &#64; (decimal) or

%40 (hexadecimal)

Obfuscation example

<a href=mailto:baggins@theshire.com">

Convert to hexadecimal character codes

<a href = "mailto %62%61%67%67%69%6E%73%40%74"mailto:%62%61%67%67%69%6E%73%40%74%68%65%73%68%69%72%65%2E%63%6F%6D">

! See the Links section of the Course web site to convert an e-mail address into character codes

7. Linking Issues

! Should you be allowed to link to any site on the

Internet?

• Should you pay for the right?

• Should you get paid?

! Should you be held liable for the contents of the

sites you link to?

• e.g. linking to a site that provides the download of

illegal software

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @A65

Tables

Tables

! An HTML table is a block element that defines rows and columns

• Can be used to display tabular data

• Also used to control the layout of web pages• Also used to control the layout of web pages

! The <table> … </table> tags define a table

! Some of the table attributes:• Borders and shading

• Cell spacing and padding

• Cell merging

Defining Rows! A table is defined row by row

• The <tr> … </tr> tag set defines one row

! Columns are not explicitly defined• The number of items defined in each row determines

the number of columnsthe number of columns

! Table items may be of two types• Header items are defined using table heading <th> …

</th> tags

• Data items are defined using table data <td> … </td>tags

• Header cells are displayed differently than data cells by the web browser

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @A66

Table Columns

! It’s up to you to keep track of the number of columns (items) in each row

• If you have different numbers of items in rows, your table will still be displayed, but with less than ideal p y ,results

! Careful formatting of your HTML table will help avoid this problem

• Use a separate line for each item

• Use indentation and comments

A Simple Table<table width="50%" border="4" cellspacing="5" cellpadding="6"><caption> Student Marks</caption><tr> <!-- Header row -->

<th>Student Number</th><th>Mark</th>

</tr><tr> <!-- Data row 1 -->

<td>789</td><td>789</td><td>82</td>

</tr><tr> <!-- Data row 2 -->

<td>890</td><td>67</td>

</tr></table>

Table Caption

! The caption element is optional

• <caption>…</caption>

• It must be the first thing after the opening <table> tag

Only one caption is permitted• Only one caption is permitted

• It provides a descriptive title for the table

• It appears above the table

! The caption element can provide useful information

about the table for people using non-visual browsers

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @A64

Table Attributes! border=n

• Specifies the thickness (in pixels) of the border

(frame) around the table cells (choose any number

including zero)

Z i ft d f i hi th t it• Zero is often used for arranging graphics, so that it

doesn’t really look like a table

• Default is 0 in most browsers

• The attribute without a value gives a 1 pixel border

• <table> no border

• <table border="4"> 4 pixel border

Table Attributes

! width=N

• Sets the width of the table to N pixels – this is the fixed width for the table even if the browser window expandsexpands

• N% for a percentage of the whole page – this is a dynamic or fluid width. As the window expands so is the table width proportionately

• Common: width="100%" to span the page

Table Attributes

! cellspacing=n

• Specifies spacing between the cells

• Default is 2 pixels

• Common: cellspacing="0" used with borders• Common: cellspacing= 0 used with borders

! cellpadding=n

• Specifies spacing between the cell text and border

• Default is 1 pixel

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @A6B

Deprecated table attributes

! Although these attributes still work in browsers, use styles instead

! bgcolorSets the background colour• Sets the background colour

• Use the background-color property

! align• Sets the horizontal alignment of the table in the

browser window

• This is not handled consistently by all browsers using CSS unfortunately

Row Attributes

! align=

• Lets you set the alignment of every cell in the row

horizontally (left, right, center of the cell)

! valign=

• Lets you set the vertical alignment of every cell in

the row (top, middle, bottom of the cell)

! bgcolor= (deprecated)

• Use CSS background-color property

Data & Header Attributes

! All Row attributes can be used with <td> & <th>

• So you can override them for particular cells

! We can also specify the width of cells

Will apply to every cell in the column• Will apply to every cell in the column

• The default is to make the cells in the column just wide enough to hold the widest contents

• Width is specified as an absolute value or as a percentage of the width of the entire table

! The width attribute is now deprecated• Use the width CSS property

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @A6B

Tables are Flexible

! You can have anything as table data items (even another whole table!)• You can control the size of any table cell on the

screen

• Good for arranging things in the web page

! Many web pages use them to place images at arranged spots on the screen • the other cells simply contain spaces or nothing at

all

! However, this practice has been overridden by styles specified in CSS

Merging Cells

! You can merge cells in adjacent rows/columns• Known as spanning in HTML

! The rowspan and colspan attributes are used with <td> and <th> to merge cellswith <td> and <th> to merge cells

• <td colspan="3"> - merge this cell with the next two (in the same row)

• <td rowspan="3"> - merge this cell with the corresponding cells in the next two rows

Merging Cells

! Spanning rows/columns affects the number of items a row or rows will contain

• Using colspan reduces the number of items i th tin that row

• Using rowspan reduces the number of items in one or more subsequent rows

! It can be confusing at first

• Again, good formatting of your HTML helps

!"##$%&'()*+%,')-%.)/-01$' 2+%&$3)4564

!789)64:5)!"#;<&$3)='->$)?? @A6@

Spanning Rows/Columns<table border="1"> <!-- This is actually a 3x3 table -->

<tr align="center">

<th rowspan="2" valign="bottom">Student Number</th>

<th colspan="2">Mark</th>

</tr>

<tr align="center">

<td>A1</td><td>A1</td>

<td>A2</td>

</tr>

<tr align="center">

<td>789</td>

<td>67</td>

<td>88</td>

</tr>

</table>

Combine rowspan and colspan

<table border="1"> <!-- This is a 3x3 table -->

<tr align="center">

<th rowspan="2" colspan="2" valign="bottom">Student Registration Number(spanning 2 rows and 2 columns)(spanning 2 rows and 2 columns)

</th>

</tr>

</table>

This kind of markup is also possible

Empty Cells

! Data tables sometimes contain empty cells• Some browsers won’t draw a border around a <td>

or <th> element that is empty

• Especially noticeable when cellspacing > 1Especially noticeable when cellspacing 1

• Blank spaces don’t help (remember the browser ignores whitespace)

! Solution: use a non-breaking space

• &nbsp; is the character code

!

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;.

Colour

Representing Colour in Computers

Using Colour in CSS

Colour

1. Colour Theory1. Origin of Colours

2. Colour Perception

3 Primary colours and Colour Composition3. Primary colours and Colour Composition

2. Choosing Colours1. Specifying colour in CSS

2. Web safe

3. Choosing colour schemes

Origin of colours! People perceive colours because our

primitive ancestors ate fruits and berries

• discriminate berries from foliage

• discriminate edible from non-edible fruits

evolutionary advantage• evolutionary advantage

• bears and birds also have colour vision

! In contrast, carnivores tend to have limited

colour vision

• e.g., cats, dogs can't see what you see on TV

• but they have more sensitive noses to follow

prey

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;,

Origin of colours! People have 3 kinds of colour-sensitive cone

cells in their retinas (red, green, blue)

• colour-blind people have:

• defective cones with shifted sensitivities, or

• reduced numbers or sensitivities of cones

• 8% of males, < 1% of females

• see the Wikipedia link on the web site

• dogs have 2 kinds of colour-sensitive cells

! Colour is based on light frequency

• any combination of frequencies that stimulates

cells in the same way will seem to be the same

colour

Colour Perception

! Colour perception is based on different wave

lengths of light, which stimulates receptors

(cones) in the eye.

! Specific frequencies or wave lengths of light

correspond to certain colours.

Colour Perception

! People perceive colour through 3 kinds of cone cells

(receptors) in the retina, which respond to red, green, and

blue (we are tri-chromatic):

Cone type Name Range Peak sensitivity

Cone cells in the human eye

! !"#$%&'( )**++,**"-. ))*"-.

/ ""#01''-( ),*++23*"-. ,))"-.

4 #"#5'6( ,**++7**"-. ,8*"-.

! A combination of light frequencies that stimulates cells in the

same way is perceived as the same colour.

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;<

Spectral response of cone cells

!This means, e.g. the blue receptor cones may also respond to

red or green.

Colour Blindness

! Colour-blindness - difference in receptors:

• defective cones with shifted sensitivities,

• reduced number of cones or sensitivity of cones,

• more types of cones: women can be tetra-

h ti i 4 i l ( ll !)chromatic, i.e. sense 4 primary colours (really!)

• men are often red-green blind, i.e. they cannot

properly distinguish certain red and green tones

• Dogs have only 2 kinds of colour-sensitive cells

(but they can watch TV!).

Primary Colours and

Colour Compositionp

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;<

Primary Colours

! Primary colours are colours, from which all others can be obtained by mixing.

! The choice of primaries is not unique.

We se 3 primaries beca se e ha e 3 kinds of! We use 3 primaries because we have 3 kinds of cones for colour vision.

Colour Composition

! We distinguish subtractive and additive composition of colours:

• subtractive means, light is taken away (darker), e.g. subt act e ea s, g t s ta e a ay (da e ), e gprinting process (light reflected or absorbed).

• additive means, more light is produced (brighter), e.g. TV (light generated and emitted).

Subtractive Primary Colours! Subtractive Primaries (reflected light)

• Artists paints etc.

• red, blue and yellow

• Printers (3 or 4 colour cartridges)• Printers (3 or 4 colour cartridges)

• cyan, yellow, magenta (CYM)

• cyan, yellow, magenta, black (CYMK) for

darker blacks

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;<

Subtractive Composition of Primary colours

GreenYellowBlue

Purple Orange

Red

Black

White

Subtractive Composition of Primary colours

GreenYellowCyan

Bl k

Blue Red

Magenta

Black

White

Additive Primary Colours

! Additive Primaries (originating light)

• TVs, Computers, CRTs

• red, green, blue (RGB)

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;:

Additive Composition of Primary colours

CyanGreenBlue

White

Magenta Yellow

Red

White

Black

Specifying colours in CSS

! Basic colours can be referred to by

name in CSS

• There are 17 valid names in CSS 2.1

• aqua, black, blue, fuchsia, gray, green, lime,

maroon navy olive purple red silver tealmaroon, navy, olive, purple, red, silver, teal,

white, yellow and orange (just added)

! We can also specify colours in terms of

their primary colour intensitiesRed, Green, Blue

Specifying colours in CSS

! Any colour can be represented as a mixture of

red, blue, and green

! Colours are specified as a triple RGB where! Colours are specified as a triple RGB, where

• R specifies the intensity of the red component

• G specifies the intensity of the green component

• B specifies the intensity of the blue component

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;2

Specifying RGB in CSS

! Each primary colour has 256 intensity

levels that can be specified in 3 ways

• Decimal RGB values (0…255)( )

• e.g. color: rgb(128, 128, 128)

• Percentage RGB values (0%…100%)

• e.g. color: rgb(50%, 100%, 30%)

• Hexadecimal RGB values (00…FF)

• e.g. color: #00FFCC

Hexadecimal! It’s a number in base 16

! Why base 16? A shorthand way of writing binary numbers

• It’s the way Computer Scientists see the world…

! In binary we only have 0 and 1 to count on so! In binary, we only have 0 and 1 to count on, so our counting sequence goes 0, 1, 10, 11, 100,101,110,111,1000 and so on

! 1000 is only 8, and takes 4 digits (actually bitsor binary digits) to state, so these get long

! One hexadecimal digit = 4 binary digits; 8 in hex is shorter than 8 in binary

Hexadecimal! In hex, there are 16 digits—0…15 (just like in

decimal there are 10—0...9)

! We have no “digits” for 10 and up, because…well…we usually don’t count that way!y

! So we use the letters A … F (or a … f) to denote the digits 10 … 15

! So the hex value FF0000 represents the binary number 1111 1111 0000 0000 0000 0000

! 2 hex digits can represent numbers from 0 to 255

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;<

! There are only a few obvious ones - pure red, green, blue (FF in the respective component, 00 in others), white, black

• red #FF0000

• green #00FF00

Hexadecimal colour specification

• blue #0000FF

• white #FFFFFF

• black #000000

! Secondary colours are also easy• Mixing two primaries

• red and green yellow #FFFF00

• green and blue cyan #00FFFF

• red and blue magenta #FF00FF

! If the digits for all three primary colours are in matched pairs, we can use a shorthand notation

• We can list just one digit of the pair

• Works for CSS property values, but NOT for HTML attribute values

e g

Hexadecimal shorthand

• e.g.

• red #FF0000 becomes #F00

• green#00FF00 becomes #0F0

• blue #0000FF becomes #00F

• white #FFFFFF becomes #FFF

• black #000000 becomes #000

Basic colour Specifications

Aqua

(0,255,255)

(#00FFFF)

Black

(0,0,0)

(#000000)

Blue

(0,0,255)

(#0000FF)

Fuchsia

(255,0,255)

(#FF00FF)

Gray

(128,128,128)

Green

(0,128,0)

Lime

(0,255,0)

Maroon

(128,0,0)( , , )

(#808080)

( , , )

(#008000)

( , , )

(#00FF00)

( , , )

(#800000)

Navy

(0,0,128)

(#000080)

Olive

(128,128,0)

(#808000)

Purple

(128,0,128)

(#800080)

Red

(255,0,0)

(#FF0000)

Silver

(192,192,192)

(#C0C0C0)

Teal

(0,128,128)

(#008080)

White

(255,255,255)

(#FFFFFF)

Yellow

(255,255,0)

(#FFFF00)

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;<

! Specifying colours in ‘hex’ can be difficult

• Lots of resources on the web to help

• See the Links page

! A palette of 216 web safe colours is the

3. Choosing colours for a web site

p

best option

• See the link on web safe colours on the Course

web site

Colour depth

! A computer graphics term

• It refers to the number of bits used to represent a

distinct colour

Older hardware (e g VGA monitors) supports 8 bit• Older hardware (e.g. VGA monitors) supports 8-bit

colour depth (256 colours)

• Modern computer hardware supports 24-bit colour

depth (16,777,216 colours)

• You may see the term "32-bit colour"

• This means 24-bit colour depth with 8 unused bits (why?)

• Modern hardware works most efficiently with 32 bits

Web safe colours! Web safe colours won’t dither

• Dithering: if the display can't represent a colour (because of limited colour depth), it is approximated by combining two colours it does support

• 2 different coloured pixels are placed side-by-side to fool the eye into seeing another colourthe eye into seeing another colour

• some computers display only 256 colours

! 216 web safe colours • Because the operating system reserves about 40

colours, there are only 216=6x6x6 colours available.

• Each component is either 00, 33, 66, 99, CC or FF

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;.-

Choosing colours

! Colour is the first thing that will make an impression with viewers of your site

! Some things to consider when choosing a colour scheme:

• Simple schemes are generally better• Choose no more than 3 colours

• People associate colours with emotions• Your colour scheme should convey an appropriate

emotion

• Schemes for text should provide easy readability• good contrast without causing reader fatigue

• consideration for colour-blindness

! Colour pairs that are (in some way) opposites

• In art and design, opposites on a colour wheel

• When placed next to each other, complements make each

other appear brighter

• In computer graphics, colours that when mixed

Complementary colours

In computer graphics, colours that when mixed

produce white

• #00FFFF and #FF0000

• #9933FF and #66CC00

• Complementary colours that also have very high (or

low) RGB intensities provide high contrast

Complementary Colours (print)! Complementaries of primary colours

The complementary colour of a primary colour (red, blue, or

yellow) is the colour you get by mixing the other two primary

colours. So the complementary colour of red is green, of blue is

orange, and of yellow is purple.

! What about secondary colours?What about secondary colours?

The complementary of a secondary colour is the primary colour

that wasn't used to make it. So the complementary colour of

green is red, of orange is blue, and of purple is yellow.

! What happens if you mix complementary colours?

You get a tertiary colour, particularly browns.

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;..

The Colour Triangle (print)! The colour triangle

The three primary colours are in the corners. The

colour you get by mixing two primaries is between them

(red and yellow make orange; red and blue make

purple; yellow and blue make green). The

complementary colour of a primary colour is the colour

opposite it (green is the complementary of red, orange

for blue, and purple for yellow).

Analog and Triad Colours

! Analog colours are adjacent on the colour

wheel

• Analog colours can create a harmonious feelg

! Triad colours are equally spaced on the

colour wheel

• Triad colours create a scheme that is

colourful but balanced

Colour schemes for text

! Some examples of good and

bad colour schemes for text

• The top 3 have good contrast

and do not tire the reader's eyes

Black on White

Yellow on Blue

Yellow on Blackand do not tire the reader s eyes

• Using Red and Green will make

your page unreadable for colour-

blind readers

• Using Red and Blue can create

a 'shimmer' effect that causes

reader fatigue

Red on Green

Green on Red

Red on Blue

Blue on Red

!"#"$% &'()*%+,-.,

!/01+.,2-+!"34$)*%+5678*+99 :;.,

Here is

some text!

Here is

some text!

Here is

some text!

Here is

t t!

Here is

t t!

Here is

t t!some text! some text! some text!

Here is

some text!

Here is

some text!

Here is

some text!

Colour Pickers

! Want to know the RGB spec of a colour on

your screen?

• Microsoft Paint has an Edit Colors command that

will show the RGB spec of a colourwill show the RGB spec of a colour

! Or, try a freeware colour picker utility

• go to versiontracker.com

• Search for color picker

• Picks from existing colour on your desktop

• Find closest web-safe colour