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 regions (e.g. top, left). 3 HTML Frames Defining a frame set (in index.html): http://www.w3.org/TR/html401/present/frames.html 4 2
HTML Frames Defining a frame set (in index.html 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. topleft.html mainframe.html bottomleft.html 5 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. 6 3
Inconsistent Browsers 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 other browsers. 7 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. 8 4
CSS Syntax The CSS file uses elements with this syntax: selector {property: value} Example: body {color: black} p {font-family: "sans serif"} 9 Using a Style Sheet in HTML Add this element to the <head> section: 10 5
Define Styles in a .css file Example: 11 Simplified HTML 12 6
CSS Examples CS101 Homework/Lab web pages 13 7
Recommend
More recommend
