Overview/Questions Review: formatting HTML pages Frames Style - - PDF document

▶

Mar 27, 2024 270 likes •345 views

CS101 Lecture 18: Advanced HTML: Frames and CSS John Magee Examples from www.w3.org 18 July 2013 1 Overview/Questions Review: formatting HTML pages Frames Style Sheets 2 1 HTML Frames Frames segment the formatted output into

SLIDE 1

1 John Magee

Examples from www.w3.org

18 July 2013

CS101 Lecture 18: Advanced HTML: Frames and CSS

Overview/Questions

– Review: formatting HTML pages – Frames – Style Sheets

SLIDE 2

2

HTML Frames

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

HTML Frames

Defining a frame set (in index.html):

http://www.w3.org/TR/html401/present/frames.html

SLIDE 3

3

HTML Frames

Defining a frame set (in index.html): A FrameSet html file has no <body> tag! Instead, it designs the layout of the frames, and tells the page to load separate html files into each frame. index.html topleft.html mainframe.html bottomleft.html

HTML Frames

Example: Course web page

– http://www.cs.bu.edu/courses/cs101/ – View Source shows the frames. – Right click inside a frame, then you can view the individual frame’s source. – Notice the target=“mainframe” or target=“_blank” attribute in the navigation links.

SLIDE 4

4

Inconsistent Browsers

 Tags like: <H1>, <h2>…, <B>, <I>

nly 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

n other browsers.

Externalize Formatting

W3C introduced Cascading Styles to:

– solve the problem of inconsistent browsers – simplify HTML source by externalizing format

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

SLIDE 5

5

CSS Syntax

The CSS file uses elements with this syntax: selector {property: value} Example: body {color: black} p {font-family: "sans serif"}

Using a Style Sheet in HTML

Add this element to the <head> section:

SLIDE 6

6

Define Styles in a .css file

Example:

Simplified HTML

SLIDE 7

Overview/Questions Review: formatting HTML pages Frames Style - - PDF document

1

John Magee

CS101 Lecture 18: Advanced HTML: Frames and CSS

Overview/Questions

– Review: formatting HTML pages – Frames – Style Sheets

2

HTML Frames

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

HTML Frames

Defining a frame set (in index.html):

3

HTML Frames

Defining a frame set (in index.html): A FrameSet html file has no <body> tag! Instead, it designs the layout of the frames, and tells the page to load separate html files into each frame. index.html topleft.html mainframe.html bottomleft.html

HTML Frames

Example: Course web page

– http://www.cs.bu.edu/courses/cs101/ – View Source shows the frames. – Right click inside a frame, then you can view the individual frame’s source. – Notice the target=“mainframe” or target=“_blank” attribute in the navigation links.

4

Inconsistent Browsers

 Tags like: <H1>, <h2>…, <B>, <I>

 Internet Explorer introduced the <FONT>

tag to specify exact fonts, sizes, colors, etc.

– Web pages with these tags didn’t always work

Externalize Formatting

W3C introduced Cascading Styles to:

– solve the problem of inconsistent browsers – simplify HTML source by externalizing format

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

5

CSS Syntax

The CSS file uses elements with this syntax: selector {property: value} Example: body {color: black} p {font-family: "sans serif"}

Using a Style Sheet in HTML

Add this element to the <head> section:

6

Define Styles in a .css file

Example:

Simplified HTML

7

CSS Examples

CS101 Homework/Lab web pages