,

, …
• these are “logical tags”
• browsers decide how to render them
Although a few are not: ,
• these are “physical tags”
• browsers have no choice
Generally speaking
• the browser, not the web author, controls layout
• browsers sometimes behave differently
But appearance is important!
CS 200 Winter 2018 33
The Web
The response
Controlling HTML Layout
• abusing tables and frames
• new tags and attributes
• proprietary tags and attributes
• postscript and pdf (Adobe’s “Portable Document Format”) via “plugins”
Wouldn’t it be nice …
• if HTML had USER-DEFINED [named] styles?
• like those we find in word processors?
• that authors could use to control layout?
CS 200 Winter 2018 34 The Web

Cascading Style Sheets
Style definitions may appear at the beginning of a web page There are five style definitions in this example
• the first specifies the default font to be used
• the second and third attach default “properties” (ie attributes) to and

• the last two define property bundles that can be applied to

, by using classes


These are called “selectors”



}
}
} }


This paragraph will be centered.


This paragraph will be centered and bold.




This paragraph will be centered and italic.




This word will be green.




CS 200 Winter 2018 35


The Web
External CSS files
Or … style definitions may be EXTERNAL to a web page
• so that multiple web pages can use them
• much more important for HTML than for word processing
• An example style sheet file
 named simple.css
• An example html file
 that uses simple.css
Notice that all four paragraphs are centered and in Myriad Pro
• The contents of

…

and

…

“inherit” the properties of

,
 so they don’t have to explicitly set them
• Inner elements inherit properties from outer elements containing them (when that makes sense)
 — eg the …

inherit Myriad Pro from the … in which they appear
BODY { FONT-FAMILY: ‘Myriad Pro’, sans-serif }
SPAN { COLOR: green }
P { TEXT-ALIGN: center }
P.A { FONT-WEIGHT: bold }
P.B { FONT-STYLE: italic }







This paragraph will be centered.




This paragraph will be centered and bold.




This paragraph will be centered and italic.




This word will be green.




CS 200 Winter 2018 36 The Web

A Larger Example – Task B from the Winter 98 Lab Exam
T
CS 200 Winter 2018 37 The Web
LabExam.css
Note the period that begins each style name
•Block {
font-family: “Palatino, serif”;
line-height: 15px; margin-top: 7px;
font-family: “Palatino, serif”; line-height: 15px;
margin-top: 5px;
margin-left: 25px;
}
•Item2 {
}
•}
these are called classes
• such styles can be used in any tag (if they make sense…)


is (effectively) a replacement for


•Item1 {
• with no default properties
• (some properties of built-in tags like

can’t be over-ridden) [still?]
font-family: “Palatino, serif”; margin-top: 5px;
•

and

are examples of “block level tags” or elements
 (ie. they cause a line break)
is an “inline level tag” (aka an “inline element”)
• with no built-in properties
• does not cause a line break
• , , and are other examples
“STYLE” is used to set CSS attributes for a particular tag only
• eg.

blah, blah, blah…

• eg.

good stuff

• eg.

clear desk

• eg. Good work!
Block level tags generate automatic line breaks before & after.
 Inline tags do not; one can follow another on the same line.
CS 200 Winter 2018 38
•Footnote {font-family: “Palatino, serif”; font-size: 10pt;
line-height: 13px; margin-top: 5px;
}
•Emphasize {
}
•Shout {
}
font-style: italic;
font-weight: bold;
The Web

TaskB.html — the “body” part of the web page (1)
T









Sample Lab Examp – Task B






This page is best displayed with • • •






To use computers effectively it is important
•••






The problem.
As a teacher, you often want • • •






The solution.
You have a FileMaker table • • •



CS 200 Winter 2018 39
The Web
TaskB.html — the “body” part of the web page (2)




Password-protected demonstration solutions • • •






Demo Course Grades.
When the Do It! button on the Choose layout • • •






Demo Make Histograms.
Click the Get Data button in any • • •






The charts in By 5 and By 10 can • • •






You are to duplicate the behaviour • • •






(The relative weight of important pieces • • •


•••
CS 200 Winter 2018 40 The Web

Another Example, from “Eric Meyer on CSS”
http://jcbserver.uwaterloo.ca/cs200/ericMeyer/ericMeyer.html
CS 200 Winter 2018 41 The Web
T
body {
background:
The Style Sheet
rgb(153,102,51);
black;
font-family: ‘Myriad Pro’, sans-serif;
div#p2 {
margin:
}
div#menu {
float:
width:
padding:
margin:
border:
background:
}
div#menu a {
display:
text-align:
padding:
0 10em 0 2em;
right;
5em;
0;
0 -1.5em 0.25em 0.5em;
3px solid rgb(50,50,175);
white;
block;
center;
0.2em 0.5em 0.2em 0.5em;
0 11em 0 2em;
0.2em 0 0.5em 0;
center;
color:
}
div•wrap { background:
color:
margin: }
p{
rgb(251,233,198);
rgb(122,74,26);
0 2em;
0;
0.25em 1em 0.25em 1em;
1.25em;
120%;
margin:
padding:
text-indent:
line-height:
0 ≤ r, g, b ≤ 255
}}
h1, h2 {
margin:
padding: }
div#p1 {
margin:
}
0;
0.25em 0.5em 0.25em 0.5em;
0 2em 0 10em;
div#footer {
margin:
}
padding:
text-align:
font-style: italic;
color:
rgb(128,128,128);
CSS for

…

a colour name
top, right, bottom, left
top, right, bottom, left
CS 200 Winter 2018
42
TheWeb

What we’ve seen
p { • • • } p.name
p#name
sets attributes for all

tags
sets attributes for all

tags sets attributes for the only

tag
There are a variety of useful selectors we haven’t discussed, including
h1, h2, h3 { • • • }
p[title] { • • • } p[title=”important”] { • • • } h1 > strong { • • • }
h1 + p { • • • }
tr > td:first-child
grouped selectors (same attributes for multiple tags)
attributes for all tags

(ie

tags having a title attribute)
attributes for all tags

attributes for appearing “immediately” within an


 eg

This is very important.

attributes for any

that immediately follows an



eg

Section A

For this para.

But not this one.

attributes for

when it is the first child of a



eg

matches this but not this

Other Selectors
and various combinations of these.
Effectively, they do “pattern matching.”
See Chapter 2 of “CSS The Definitive Guide” if you’re curious.
(You’re not expected to memorize these for CS 200—this is useful “read and recall [someday] info”)
CS 200 Winter 2018 43 The Web







much room to think

Sometimes I find myself • • •

I suppose it’s the taste • • •

a fun guy

stories
poems
art

Good evening, my name is Rootsy • • •

Adapted from “Eric Meyer On CSS,”
by Eric Meyer, © 2002.

See www.newriders.com &
www.ericmeyeroncss.com.



The HTML
CS 200 Winter 2018 44
The Web
Notice that attributes can come
 from more than one style definition
• egfromdiv.wrap{…}anddiv#p1{…},
 applied to

• whenthathappens,they’remerged
• ifthere’saconflict,“themorespecific
wins”
eg p1 over wrap because
 only one tag can have id=p1

Classes vs. IDs
Classes
• can be used any number of times
• defined like:
.red {
color: red;
}
• the . indicates that it’s a class
• this can now be applied to other styles
• eg.

will have all the attributes from

and all the attributes from .red
• If you want a class that can ONLY be applied to the

tag (and not to any other tags), defined it like:
p.red {
color: red;
}
• You can still use

with the same results as before, but

has no meaning
IDs
• should only be used once (for use with JavaScript – you don’t need to know why)
• defined like:
#red {
color: red;
}
• this can now be applied to other styles
• eg.

will have all the attributes from

and all the attributes from #red
So what should you use?
• there are reasons to use both classes and IDs
CS 200 Winter 2018 45 The Web
Discussion
The “class” attribute can be used by many tags, which share its meaning

The “id” attribute is supposed to uniquely identify a tag (ie only be used once)
 Both specify a style to use on their content
Style sheets can come from
• the web page author
• the user, who can often specify a style sheet in the browser’s preferences
• the browser (ie. built-in)
— And this is their order of priority (from high to low) when a conflict arises for a particular attribute
Browsers are finicky about CSS syntax
• if your CSS seems to have no effect, check for syntax errors / use a CSS validator
The detailed rules for resolving conflicts are (considerably) more complicated;
• see Section 8.1.9 of “HTML & XHTML – The Definitive Guide,” 5/e, for a fuller explanation
• or Chapter 3, “Structure and the Cascade,” in Cascading Style Sheets – The Definitive Guide for details — but you shouldn’t need to
Note: there’s a lot more to CSS than we’ve had time to talk about
CS 200 Winter 2018 46 The Web

For More (Optional) Information on CSS
Western Civilization’s
• “Complete CSS Guide” at
 http://www.westciv.com/style_master/academy/css_tutorial/introduction/css_intro.html
• “Properties Introduction” (the Complete CSS Guide’s section on CSS attributes) at
 http://www.westciv.com/style_master/academy/css_tutorial/properties/index.html
HTML & XHTML — The Definitive Guide, 5/e, by Musciano & Kennedy, Chapter 9, “Cascading Style Sheets”
• on reserve in the library (an earlier edition, without “XHTML” in the title
• or at http://safari.ora.com > MY BOOKSHELF – Book 26 from a University computer

Chapter 8 “Cascading Style Sheets” & the appendix “Cascading Style Sheet Properties Quick Reference”
• (the 6th edition was published in October of 2006)
Cascading Style Sheets — The Definitive Guide, by Eric Meyer
• 3rd edition, © 2006, O’Reilly & Associates, 0-596-52733-0.
• or the 2/e at http://www.safari.ora.com > MY BOOKSHELF – Book 9 from a University computer
Typetester: a neat web page (w/Javascript+CSS) for comparing various fonts side-by-side in your browser
• typetester.maratz.com
XyleScope: a neat tool for dissecting the CSS in pages you encounter on the web ($20, Mac only) • www.culturedCode.com/xyle/
CS 200 Winter 2018 47 The Web
TypeTester: typetester.maratz.com
T
CS 200 Winter 2018 48 The Web

Common Sources of Confusion in the Lab
You can use Firefox or Safari’s File > Open File… menu item
• that’s effectively what PageSpinner’s Preview button / menu item does
• HOWEVER
File > Open File… is not as fussy about paths as most web servers
– it won’t complain about spaces in URLs
– it won’t complain about trailing blanks in file names
• So you MUST also ask student.cs.uwaterloo.ca web server to access your web pages 
 to be certain that the URLs in them work
www.student.cs.uwaterloo.ca/YourUsername/root.html
Browsers “cache” (most) pages you have browsed on your local disk
• When you’ve changed the contents of a page and saved it to your network disk from PageSpinner,

option-click the Reload button or And a word of advice … use
• closing tags (eg ,

)
• indentation
• blank lines
to structure your HTML

— it makes debugging much easier
CS 200 Winter 2018
to ensure your browser REALLY gets the new version
49 The Web
Finally…
Remember that does NOT mean

• …
• enclose information ABOUT the web page • that is not displayed IN the page
•

illustrates this better than Most browsers have a “View > Source…” menu item

that will show you the HTML source for the page currently being displayed Warning
• CSS is still not perfectly implemented by contemporary browsers,
 although the situation is much better now than it was a few years ago
• So use the latest release of whatever browser you like
 when experimenting with Cascading Style Sheets
• Also, StyleMaster has lots of info about browser quirks & bugs
CS 200 Winter 2018 50 The Web




X – O

– – O

O – X


This text is centered WITHIN
the space occupied by the <example> … </example> block.

CS 200 Winter 2018 51
The Web
XML
doc { font-family: font-size:
} xmlTable {
display:
“Comic Sans MS”, sans-serif; 20pt;
table;
color:
background-color: yellow;
black; margin-top:
Use LR margins of auto
 to center a block-level
 element within its parent.
Use text-align: center
 to center text within
 an element.
52 The Web
margin-left: margin-right:
}
row {
display:
}
cell {
display:
1em; auto;
auto; table-row;
table-cell;
ToyTable.css
padding-right: 0.2em; padding-left: 0.2em; padding-top: 0.2em; padding-bottom: 0.2em;
width: text-align:
} example {
display:
padding: background-color: cyan;
margin-left: margin-right: text-align:
}
CS 200 Winter 2018
0%; 50%;
center;
1.5em; center;
block;




X – O

– – O

O – X



This text is centered WITHIN
the space occupied by the <example> … </example> block.

0.5em;


XML—w/o the



X – O

– – O

O – X


This text is centered WITHIN
the space occupied by the <example> … </example> block.

CS 200 Winter 2018 53
The Web
CSS + JavaScript To Change The Default Font
Example: changing the font locally
S?
• local:
• remote:
http://127.0.0.1/cs200/switchingFontsWithJavascript/JensHomePage.html http://jcbserver.cs.uwaterloo.ca/cs200/switchingFontsWithJavascript/JensHomePage.html
CS 200 Winter 2018 54 The Web

The Javascript for this Example
S?




•••

Choose A Font


Arial

Palatino

Comic Sans MS




CS 200 Winter 2018
Think about Excel scripting as you read this 55 JavaScript. The Web
CSS + JavaScript To Switch Style Sheets
Example: switching style sheets dynamically
• local: http://127.0.0.1/cs200/switchingStyleSheets/JensHomePage.html
• remote: http://jcbserver.cs.uwaterloo.ca/cs200/switchingStyleSheets/JensHomePage.html
S?
See JensHomePage.html and the javascript source file global.js in …/cs200/switchingStyeSheets/ for details if you’re curious.
(Note that the color of the “Warning!” paragraph is chosen randomly.)
CS 200 Winter 2018 56 The Web

CSS + JavaScript
Adding a little JavaScript to CSS (of the sort covered in CS 100)
• dynamically changing CSS attributes
• collapsing menus
• absolute positioning of layers (remember Photoshop & Illustrator?)
• and much, much more
Example:
• local: http://127.0.0.1/dynamicMenus.html
• remote: http://jcbServer.cs.uwaterloo.ca/cs200/ericMeyer/dynamicMenus.html
CS 200 Winter 2018 57
The Web




absolute;
2.5in;
0.5in;
CS 200 Winter 2018
58 The Web
text-align:
center;
The CSS for this Example
S?
position:
left:
top:
background-color: #FFFF00;
padding:
25px;
sans-serif; }
none; none;
} }
15pt; bold;

The Content for this Example
S?


An Illustration of Dynamic Fonts & Menus

Larger Title

Smaller Title

UofW (+/-)

• CS 200
• CS 230
• CS 436
• Other sites (+/-)
  • 
    Oops … this browser doesn’t implement the IFRAME tag.
    );”> CS
    );”> jcbServer );”> Math
    );”> Oscar );”> UofW
    );”> Daring Fireball );”> Mac Geekery );”> Ars Technica );”> Slashdot
    );”> Apple );”> Microsoft );”> Mozilla
    

  
  
  Adapted from Section 6.13 of “The CSS Cookbook,” by Christopher Schmitt, O’Reilly & Associates.
  See also the documentation for CSS attributes in the “CSS Pocket Reference.”
  CS 200 Winter 2018 59 The Web
  The JavaScript for this Example
  
  
  S?
  CS 200 Winter 2018 60 The Web

  
  

  CS 200 Winter 2018
  61
  The Web

  Related Posts

  matlab simulation

  程序代写 CS代考 / matlab代写代考, simulation

  AB202 Assignment 1: Arkapong

  程序代写 CS代考 / c++代做

  MSc C++ Programming

  程序代写 CS代考 / c++代做

  MSc Assessed Prolog Lab Exercise 2

  程序代写 CS代考 / Prolog代写代考

  Spring Session:2015:Assignment 1

  程序代写 CS代考 / c++代做, UML

  Assignment 2: "Inception and Elaboration"

  程序代写 CS代考 / UML

  android app

  程序代写 CS代考 / android, Java代写代考

  COMP220: Software Development Tools

  程序代写 CS代考 / Java代写代考, junit

  ASCII Character Codes (http://jcbServer.cs.uwaterloo.ca/cs125/asciiCodes2.html) >td+td+td {color:red; } >td+td+td+td{color:black; }
  Decimal Value	Bits	Char	Abbr	Meaning