CS101 Lecture 09: Intermediate HTML: Frames and CSS Aaron Stevens - - PDF document

▶
cs101 lecture 09 intermediate html frames and css
SMART_READER_LITE
LIVE PREVIEW

CS101 Lecture 09: Intermediate HTML: Frames and CSS Aaron Stevens - - PDF document

Nov 30, 2022 266 likes •356 views

CS101 Lecture 09: Intermediate HTML: Frames and CSS Aaron Stevens 7 February 2011 1 What Youll Learn Today How to make a web page look decent - formatting the website. How to have the same look-and-feel across many web pages. 2

slide-1
SLIDE 1

1

1

Aaron Stevens

7 February 2011

CS101 Lecture 09: Intermediate HTML: Frames and CSS

2

What You’ll Learn Today

– How to make a web page look decent - formatting the website. – How to have the same look-and-feel across many web pages.

slide-2
SLIDE 2

2

3

What makes a webpage suck?

http://www.webpagesthatsuck.com

  • ffers some checklists

– Content Depth: Too much/too little on a page – Display: Mix and match text font, size, colors on one page – High-tech: too much whiz-bank technology (JavaScript, Flash animations, music, videos) – Graphics: too big, too flashy, too animated – Navigation: unclear transitions between pages

4

Some Proven Tools

HTML Frames segment the formatted output into regions

– Organize the information

Cascading Style Sheets (CSS) coordinate the formatting, look and feel

– Consistency of visual experience

Example: CS101 website

slide-3
SLIDE 3

3

5

HTML Frames

Frames segment the formatted output into regions (e.g. top, left).

6

HTML Frames

Defining a frame set

  • in index.html
  • create “frames”
  • name each frame
  • load each frame
slide-4
SLIDE 4

4

7

Each frame is an .html file

8

More Control Over Formatting

  • Tags like: <H1>, <h2>…, <B>, <I> only

go so far in creating a look and feel.

  • Internet Explorer introduced the <FONT> tag

to specify exact fonts, sizes, colors, etc.

– Web pages with these tags didn’t always work on

  • ther browsers.
slide-5
SLIDE 5

5

9

Consistent Formatting

W3C introduced Cascading Styles to:

– solve the problem of inconsistent browsers – simplify HTML source by externalizing format – Write-once, use-many formatting

Cascading Style Sheets (CSS) uses an external file to specify format details.

10

CSS Syntax

CSS has it’s own syntax; it’s not HTML. The CSS file uses elements with this syntax: selector {property: value} Example: body {color: black} p {font-family: "sans serif"}

slide-6
SLIDE 6

6

11

Using a Style Sheet in HTML

Must add the <link> element to the <head> section

  • f the .html file.:

This is how we tell the HTML to use a CSS file for style information.

12

Define Styles in a .css file

Example:

slide-7
SLIDE 7

7

13

HTML using CSS

14

What You Learned Today

– What makes webpages suck… – Frames – Cascading Style Sheets (CSS)

slide-8
SLIDE 8

8

15

Announcements & To Do List

– Readings:

  • HTML Tutorial

http://www.w3schools.com/HTML/

  • Reed ch 3, pp. 53-57 (today)
  • http://www.webpagesthatsuck.com

– HW 3 due WED 2/9