se 372: web page design: html5 week 2: introduction to html5 & css copyright © steven w....
TRANSCRIPT
SE 372: Web Page Design: HTML5
Week 2: Introduction to HTML5 & CSSCopyright © Steven W. Johnson
January 1, 2015
http://line25.com/articles/10-html-entity-crimes-you-really-shouldnt-commit
Some history of Internet things
Introduction to styles
Media paradigms
DRY programming
Today:
2
The favor bank:
metaphor (mecaz) describes need for good acts
civility pays off
idea that good acts are returned with interest
3
Inspirational thought for the week:
Favor banks are between people
Not transferrable
Deposits > withdrawals
Important to always have positive balance
4
Inspirational thought for the week:
Job:
withdrawals can be for ‘bad behavior’
always be on time
don’t be sick for the first year
each ‘favor’ you ask for costs
5
Inspirational thought for the week:
Goal of communication: not be hindered by
space / distance
or time
language
synchronous (senkron) AND asynchronous (asenkron)
Never been feasible
6
Communications:
Intergalactic Network: 1962 (JCR Licklider)
First conception of the Internet
‘Everything’ connected to one network
7
Internet history:
http://www.ibiblio.org/pioneers/licklider.html
Project Xanadu: 1960
Ted Nelson (1937 – ?)
‘hypertext’ and ‘hypermedia’ (c. 1965)
‘everything is a link’
A new media, a new metaphor
8
Internet history:
http://en.wikipedia.org/wiki/Ted_Nelson
Text is a linear thing. We read in one direction
Hypertext has no linear constraint
Hypertext has ability to ‘open’ other hypertext
Hypertext = a file (‘web pages’)
9
Internet history:
http://en.wikipedia.org/wiki/Ted_Nelson
Hyper:
4 or more dimensions (math)
very
unusual, abnormal
non-sequential connection (computer science)
10
Internet history:
http://en.wikipedia.org/wiki/Ted_Nelson
11
PROJECT XANADU MISSION STATEMENT
DEEP INTERCONNECTION, INTERCOMPARISON AND RE-USE
Since 1960, we have fought for a world of deep electronic documents-- with side-by-side inter-comparison and frictionless re-use of copyrighted material.
We have an exact and simple structure. The Xanadu model handles automatic version management and rights management through deep connection.Today's popular software simulates paper. The World Wide Web (another imitation of paper) trivializes our original hypertext model with one-way ever-breaking links and no management of version or contents.
WE FIGHT ON.
Internet history:
12
• Every Xanadu server is uniquely and securely identified. • Every Xanadu server can be operated independently or in a network. • Every user is uniquely and securely identified. • Every user can search, retrieve, create and store documents. • Every document can consist of any number of parts each of which may be of any data type. • Every document can contain links of any type including virtual copies ("transclusions") to any other
document in the system accessible to its owner. • Links are visible and can be followed from all endpoints. • Permission to link to a document is explicitly granted by the act of publication. • Every document can contain a royalty mechanism at any desired degree of granularity to ensure
payment on any portion accessed, including virtual copies ("transclusions") of all or part of the document.
• Every document is uniquely and securely identified. • Every document can have secure access controls. • Every document can be rapidly searched, stored and retrieved without user knowledge of where it is
physically stored. • Every document is automatically moved to physical storage appropriate to its frequency of access
from any given location. • Every document is automatically stored redundantly to maintain availability even in case of a
disaster. • Every Xanadu service provider can charge their users at any rate they choose for the storage,
retrieval and publishing of documents. • Every transaction is secure and auditable only by the parties to that transaction. • The Xanadu client-server communication protocol is an openly published standard. Third-party
software development and integration is encouraged.
17 Principles of Xanadu:
Internet history:
ARPANet (network of networks: 1968)
Advanced Research Projects Agency Network
Connected universities and research centers
Firsts:
packet switched data (circuit switched)
TCP and IP
HTTP protocol
13
Internet history:
Invention of SGML (1986 - IBM):
Charles Goldfarb
Ed Mosher
Ray Lorie
Meta language used to structure documents
Like XML, no specific tag set
14
Internet history:
Publisher markup of manuscript (typemarking)
15
Internet history:
https://www.prismnet.com/~tcm/etwr2379/guides/typemarking.html
‘Web pages’ built on:
TCP-IP (networking)
HTTP (messaging)
SGML (scripting)
Browser (interpreter)
16
Internet history:
Internet & Tim Berners-Lee (1990-1993):
‘invented’ HTML (specific SGML)
invented browsers
17http://bytesdaily.blogspot.com/2011/10/quote-tim-berners-lee.html
Internet history:
18
HyperText.m: (Sept, 1990)
Start of Web 1.0: read-only Internet
Mosaic Communications Corp. (1994)
Marc Andreessen, Jim Clark
First commercially successful browser (1994)
Browsers/HTML history:
19http://www.biography.com/people/marc-andreessen-9542208
1995: Mosaic becomes Netscape Navigator 2.0
“2nd generation” browser included:
JavaScript: Brandan Eich
SSL: Taher Elgamal
Cookies: Lou Montulli
Browsers/HTML history:
20
Browsers/HTML history:
21
Browser:Netscape
100%
1993199419951996 20032000
MS purchases source code for Spyglass
(1994)
Convert into Internet Explorer (1994)
Browsers/HTML history:
22
Browser wars (1995 - 1999):
anti-competitive practices at Microsoft
who would control browser market
whose vision of Internet would prevail
Browsers/HTML history:
23
Economic
Technical
First official standard: HTML 2.0 (Nov. 1995)
Standard was 2 years behind current practice
Browsers/HTML history:
24http://inkblotonenglish.blogspot.com.tr/2013/04/shut-door-slam-door-boom.html
Browser wars (1995 - 1999):
Microsoft embedded IE in Windows (bundling)
Gave away IE ‘for free’
Problems:
Netscape cost $49
anti-competitive (rekabet karşıtı)
can’t delete IE
Browsers/HTML history:
25
Browser wars: innovations in HTML
language of HTML, DOM
Browsers/HTML history:
26
genzel (genç + güzel)dogili (dost + sevgili)
düşünkın (düşünmek + şaşkın)Sözşık (sözlar + kanşık)
Senin düşkınve sözşık!
Benim dogili genzel dir!
Deprecate/deprecated (beğenmemek):
old, out of date, do not use
removed from service
future support by browsers in question
HTML 2 and 3.2 = new tags
HTML 4 and xhtml 1 = deprecate old
Browsers/HTML history:
27
Browser wars: technical and economic warfare
Browsers/HTML history:
28
Browser:Netscape
Browser:IE
Browser Wars
100%
1993199419951996 20032000
Browser wars:
United States v Microsoft Corporation 253 F.3d 34 (2001). Started in 1998.
Resolved with settlement
Browsers/HTML history:
29
Browser wars ended with:
market share: Netscape lost, Microsoft won
embedding issue: MS ‘won’
innovation issue: both ‘lost’
Lesson to learn: proprietary solution never hold up over the long term
Browsers/HTML history:
30
Netscape loses out:
Browsers/HTML history:
31
Browser:WWW
Browser Wars
1993199419951996 2003 20082000 2012
100%
Browser:Netscape
Browser:IE
W3C(1994)
Safari (2003):
embedded in OSX
compliant to Acid 2 and 3, and HTML 5
Mac only (typical of Apple)
full of Apple phobias
Safari mobile browser 15% of market
Safari desktop: <3%
Browsers/HTML history:
32
Firefox (2004):
the “next generation” of Netscape Navigator
“Most standards compliant” initially
customization of interface; lots of plug-ins
Browsers/HTML history:
33
Firefox emerges:
Browsers/HTML history:
34
Browser:WWW
Browser:Firefox
Browser Wars
1993199419951996 2003 20082000 2012
100%
Browser:Netscape
Browser:IE
W3C(1994)
Chrome (2008):
minimal design:
no bloatware
no add-ons
no plug-ins
built for Web 2.0 and HTML 5.0
each tab is a separate process
½ footprint of Firefox (≈120 M)
Browsers/HTML history:
35
Ascendancy of Chrome:
Browsers/HTML history:
36
Browser:WWW
Browser:Firefox
Browser:Chrome
Browser Wars
1993199419951996 2003 20082000 2012
100%
Browser:Netscape
Browser:IE
W3C(1994)
Today (2013):
Browsers/HTML history:
37
Ascendancy of mobile devices:
Browsers/HTML history:
38
iPhone
1999 2014
100%
Blackberry
20072003
Android Android
2010
Three different web delivery systems:
Traditional HTML
Apple Xcode Objective C
Android SDK XML and Java
Browsers/HTML history:
39
World Wide Web Consortium
International standards organization
Develops specifications/recommendations
Divided into working groups
Has 322 members in February 2011 including:
Netscape, Microsoft, Adobe, Opera
W3C:
40
Specification: developed and approved byworking group
Recommendation: Consensus of W3C membersthat specification is appropriate for wide use
Notice: there are no edicts or requirements
W3C:
41
“HTML Tags” (document title - 1991):
18 elements
14 are still in HTML 4
HTML (1993) : added Mosaic’s use of <img> tag
HTML+ (1993): tables and forms
First official standard: HTML 2 (Nov. 1995)
History of HTML:
42
Original 18 elements (well, 17 anyway):
History of HTML:
43
<HTML><TITLE><NEXTID> NeXT only - deprecated<A><ISINDEX><PLAINTEXT><LISTING><P><H1> - <H6><ADDRESS><HP1> highlighting – deprecated<DL> definition list<DT> definition term<UL><OL><LI><MENU><DIR>
HTML is about data/text transmission
Format poor
Makes sense for scientific papers; not for web
New commercial Internet: format rich
History of HTML:
44http://redkiteprayer.com/2012/04/
New tags and new attributes = “Christmas”
new font colors, blink, marquee
HTML 2, and 3 added appearance features
HTML 4 consolidated (birleştirilmiş) appearance
deprecated many Christmas toys from 2 & 3
History of HTML:
45
xhtml: enforcing rules/consistency
xhtml 2.0: pure XML implementation
do XML in Week 9, not for feint-hearted
HTML5 is about semantics, devices, Web 2.0
creation of WHATWG (2004)
introduction of HTML5 (2005)
mobile web
information architecture/semantics
History of HTML:
46
History of HTML
47
HTML 3-type style:
HTML 4-type style:
HTML 5-type style:
<div align=“center” class=“section”><p>Quick brown fox</p></div>
<section><p class=“body”>Quick brown fox</p></section>
<FONT SIZE=“3” FONT=“arial” ALIGN=“center”>Quick brown fox</FONT>
Break 48
CSS is also W3C recommendation
CSS developed by:
Håkon Lie (CERN, Opera)
Robert Cailliau (CERN)
History of CSS
49
Original HTML: styles hard-coded into
browser
Solution: separate presentation from
structure
Currently 3 different ‘generations’ of
CSS
Idea of style sheets is not new (SGML)
What was new: cascading
History of CSS
50
CSS1 recommendation complete in 1996
1999: browsers near-full implementation
of CSS1
CSS1:
the idea of separation of concerns
text and general layout
margin, padding
classes and ids
History of CSS
51
CSS2 recommendation complete in 1998
Initial implementation faster than CSS1
‘full implementation’: 2007-2009
CSS2:
positioning
media types, aural
History of CSS
52
CSS3 introduced in modules in 2011
‘Broadly supported’ has ‘experimental’
modules
Hickson: may not be implemented until
2022
CSS3:
rounded rectangles
gradients
drop shadows
eye candy
History of CSS
53
Democracy and capitalism are messy
But ultimately, the best product wins
History of CSS
54
Open ‘styles’ folder, ‘index.html’
Create a folder ‘images’. Move images
into it
Lab: styles
55
‘index.html’ has some text; ‘styles.css’ is
blank
Add styles to:
elements with inline styles
pages with embedded styles
sites with external styles
Styles applied to:
class multiple items on a
page/site
id a unique usage
type/tag change appearance for site
Lab: styles
56
HTML has one default appearance (‘format poor’)
HTML is structural (yapı) language
CSS is style language to define layouts
CSS is a formatting language
57
Lab: styles
Tags have a default appearance (defined
by browser)
Styles supersede (yerine geçmek) browser
Job of styles: re-define that appearance
Overwrite:
the default HTML instructions
browser general instructions
Lab: styles
58
The quick brown fox<p>The quick brown fox</p>
<p style=“color: red”>The quick brown fox</p> The quick brown fox
Find ‘<h1>’ tag and add style for color
red
Instruction ends with closing tag
‘Inline’ style rule
Lab: styles
59
<h1 style=“color: red”>My Title</h1><h1 style=" /*listing of declarations */ ">My Title</h1>
Make last paragraph red
Add ‘Inline’ style rule to last <p> tag
Lab: styles
60
<p style=“color: red”>Lorem Ipsum text</p>
Problem!! Do I have to do this every
time?
With inline styles, yes
Inline affects only elements where
located
Violates DRY: Don’t Repeat Yourself
Define everything once, use many times
Inline styles are ‘court of last resort’ (son
çare)
Lab: styles
61
Embedded styles: styles in <head>
Styles placed in <style> element
These styles apply to entire document
Called into HTML using:
element: HTML element itself
id: a single element; unique
identity, use
class: many elements: group
identity
Lab: styles
62
Appearance of different selectors
Declarations end in semi-color; except last
Styles & style sheets:
p { //element color: #990000;}.style { //class color: #990000;}#style { //id color: #990000;}a:hover { //pseudo-class color: #990000;}
63
Embedded style rules:
page-level rules
overwrite site-level (external) rules
similar to embedded JavaScript
Lab: styles
64
<style> body { background: #CCCCFF; }</style>
Make the body (‘page’) background light
blue
Location in <head> not critical
Typically after the <title>
Must call before you use
Lab: styles
65
<head> <style> body { background: #CCCCFF; } </style></head>
Lab: styles
66
<head> <style> body { background: #CCCCFF; } </style></head>
Goal: define each style once
No limit on declarations in style rules
Last style rule not required to have
semi-colon
Styles all body text
Lab: styles
67
<head> <style> body { background: #CCCCFF; font-family: Arial; } </style></head>
Can create using ‘Page Properties’
Right-click Design Window – Page
Properties
Lab: styles
68
Lab: styles
69
<head> <style> body { background: #CCCCFF; font-family: Arial; } </style></head>
External style rules:
placed in .css file, included in a style
sheet
weakest in terms of cascade
strongest in terms of impact on site
primary means to style a site*
Lab: styles
70
Create style sheet: File – New – CSS
Save to proper location
Lab: styles
71
Create style sheet: File – New – CSS
Link the style sheet:
Lab: styles
72
<head> <link href=“styles.css” rel=“stylesheet”></head>
May see other includes with ‘type’
HTML5: ‘types’ are no longer required
Technically, quotes aren’t either
Universal support - quotes
Lab: styles
73
<!DOCTYPE HTML><html> <head> <meta charset=“utf-8”> <title>A History of Space Travel</title> <link href=“styles.css” type=“text/css” rel=“stylesheet”> </head>
<!DOCTYPE HTML><html> <head> <meta charset=“utf-8”> <title>A History of Space Travel</title> <link href=“styles.css” rel=“stylesheet”> </head>
<!DOCTYPE HTML><html> <head> <meta charset=utf-8> <title>A History of Space Travel</title> <link href=styles.css rel=stylesheet> </head>
Linking generally preferred over
importing
Importing: a stylesheet from another
domain
Import downloads serially
Lab: styles
74
<!DOCTYPE HTML><html> <head> <meta charset=“utf-8”> <title>A History of Space Travel</title> <link href=“styles.css” rel=“stylesheet”> <style> @import url(“styles.css”); </style> </head>
<p><img src="images/linuxlogo.png" width=“225" height=“255" alt="Linux OS Logo" title="Linux OS Logo"> Lorem ipsum … </p>
In ‘index.html’:
Drag/drop image next to 1st open
<p>
<img> must be inside <p> tags
Image sets first line-height in <p>
Change image dimensions to
percentage
Image width, height scale with window
Lab: styles
75
<p><img src="images/linuxlogo.png" width="10%" height="auto" alt="Linux OS Logo" title="Linux OS Logo"> Lorem ipsum … </p>
Lab: styles
76
<p><img src="images/linuxlogo.png" width="10%" height="auto" alt="Linux OS Logo" title="Linux OS Logo"> Lorem ipsum … </p>
Lab: styles
77
.left { float: left; margin-right: 10px; margin-bottom: 10px;}
Class: used on more than one element
Add this rule on the .css page to “float
left”:
Lab: styles
78
.left { float: left; margin-right: 10px; margin-bottom: 10px;}
Class: used on more than one element
Add this rule on the .css page to “float
left”:<p><img src="images/linuxlogo.png“ class=“left” width="10%" height="auto" alt="Linux OS Logo" title="Linux OS Logo">Lorem ipsum … </p>
Lab: styles
79
.left { float: left; margin-right: 10px; margin-bottom: 10px;}
Lab: styles
80
Font size based in ems
Ems better than pixels for x-device
96-pixel monitors not a problem
326-pixel monitors using dip can be
problem
Fonts scale best when you use ‘em’
CSS/HTML use 16 pixels as base font
size
Lab: styles
81
#size{ font-size: 0.875em;}
class: used on more than one element
id: used on unique elements (containers)
Add this rule on the .css page
Add this id to the 3rd paragraph
<p id=“size”>Lorem ipsum … </p>
Lab: styles
82
Done!
Style sheet made up of style rules
Style rules made up of a:
selector
declaration
declaration made up of a:
property
value
Styles
.style1 { color: #990000; font-size: 19px; text-align: center;}
83
Styles
84
How are conflicting rules managed
That’s the cascade
Rules are placed in order of importance
Most important rule is used
inline-embedded-external:
inline wins
Lab: Dreamweaver style wizard
85
Use Dreamweaver style wizard
Open ‘wizard’ folder (in-class files)
Create a new style sheet (File – New – CSS)
Save as ‘styles.css’ in ‘wizard’ folder
86
Lab: Dreamweaver style wizardOpen ‘index.html’ in Dreamweaver
Include style sheet by clicking on ‘link’ icon
Find ‘styles.css’ in the ‘wizard’ folder, select it
Save
87
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Styles Wizard: Your_Name</title> <link href="styles.css" rel="stylesheet"> </head> <body> </body></html>
Lab: Dreamweaver style wizard‘styles.css’ now included in ‘index.html’
@charset "utf-8";/* CSS Document */
88
Create this body style:
Click on ‘+’ button
Lab: Dreamweaver style wizard
89
Create this body style:
Lab: Dreamweaver style wizard
body { background-color: rgba(0, 255, 0, .2); color: #990; font-size: 87.5%; //14px on 96-px monitor font-family: arial, helvetica, sans-serif; text-align: center;}
90
body { background-color: rgba(0, 255, 0, .2); color: #990; font-size: 87.5%; //14px on 96-px monitor font-family: arial, helvetica, sans-serif; text-align: center;}
Body style defines page appearance, text
font-family applied to all text in tags
Lab: Dreamweaver style wizard
91
class declarations:
class name: ‘.’ followed by text (not a number)
Lab: Dreamweaver style wizard
92
.left { float: left; margin: 0px 5px 5px 0px; /* Dreamweaver lists out */}
Lab: Dreamweaver style wizard
93
id declared in same way:
click on ‘+’ and choose ‘xxx’
enter ‘#’ and id name of your choice
Lab: Dreamweaver style wizard
#something { font-family: Arial; color: #90F; font-size: 1.25em;}
94
Open ‘styles.css’
Notice styles are built into page; page not saved
‘styles.css’ may be edited manually or in wizard
Lab: Dreamweaver style wizard
95
Open ‘design’ window in Dreamweaver
Styles shown there as well (not editable)
Separate listings for:
embedded styles
external styles
Lab: Dreamweaver style wizard
96
Pseudo-class declarations:
Element followed by a state/action
Lab: Dreamweaver style wizard
a:link { text-decoration: none; color: #930;}
97
Be careful that your link states are same
size
Each state same face, size, weight, line-
height
Changing ornaments can also be a
problem
Lab: Dreamweaver style wizard
98
a:link { //not used (“Blue link”) text-decoration: none; color: #930;}a:hover { //mouseover border-bottom: 2px solid; background-color: #CCF; color: #FF0000;}a:visited { //already visited (“Purple link”) text-decoration: none; color: #0FF;}
Three main link definitions:
Lab: Dreamweaver style wizard
99
List appearance can be changed with:
<ul>
<li>
class
id
Lab: Dreamweaver style wizard
100
Done!
Lab: Dreamweaver style wizard
SE 372: Web Page Design: HTML5
Week 2: Introduction to HTML5 & CSSCopyright © Steven W. Johnson
January 1, 2015
Open folder ‘space’ and ‘index.html’
Purpose of lab: apply styles
Lab: space
102
Lab: space
103
Open ‘space’ folder (Week 2 In-class)
Create an ‘images’ folder
Move the images into that folder
Open Dreamweaver and ‘index.html’
.css: a meta language that describes presentation
.css: a text file
.css separates presentation from site content
‘Cascade’: which rule to use?
Can be based in a media dependency (like mobile)
Can also be conditional
Lab: space
104
Three locations for style rules:
inline
embedded
external
Use external styles:
two pages (index & atlas)
keep HTML clean
Lab: space
105
overwrites embedded rules
overwrites external rules
Goal: 1 rule for each appearance type
Unique styles: id identifier: #
Repeated styles: class identifier: .
Write element style rules as much as
possible
Use classes and ids as needed
Combine styles as much as possible
(DRY)
Lab: space
106
Lab: space
107
Site design best practice:
Lab: space
108
domain
js
css
json
scss
styles.css
styles.min.css
index.html
scripts.js
scripts.min.js
data.json
data.xml
images
Strategy:
like normalizing a database
minimize redundancy, dependency
as few rules as possible
no duplicated declarations
organize rules
comment your styles (/* */ for comments)
Lab: space
109
everything defined once
Types of selectors:
grouped
element
class
id
pseudo-class
CSS3 primer:
110
h1, h2, h3 { font-family: arial;
h1 { color: #FFCCCC; font-size: 19px;}
.mainLayer { color: #EEEE44; background-color: #333333; margin: 5px;}
#titleLayer { color: #FFEEDD; background-color: #993333;}
a:hover { color: #669999;}
Stylesheet
Style rule:
selector
declaration(s):
property
value
Lab: space
111
h1 { color: #FFCCCC; font-size: 19px; background: blue;}
Analyze the HTML
Lab: space
112
Analyze the output:
Lab: space
113
Analyze the output:
page has a title (h1)
each section has a title (h2)
author (h3)
body text (text in <p> tags)
link (normal, hover, visited)
2 image appearances: float left, right
Lab: space
114
Lab: space
115
h1 text
h2 text
h3 text
Analyze the output:
h1 & h2 same color
h2 & h3 same font
H1, h3, row of links are centered on
page
email, body have same font color
margins on images is the same
list items and links have same font-
size
Lab: space
116
Lab: space
117
Create ‘styles.css’ (File – New – CSS)
Save into ‘space’ folder
Open ‘index’ and ‘atlas’
Add this code to the <head> of each file (not <head> tag)
<head> <link href="styles.css" rel="stylesheet"></head>
Lab: space
118
/* styles for space web site */h1, h2 { color: #FFCC00;}h2, h3 { font-family: Arial, Helvetica, sans-serif;}h1, h3, .links { text-align: center;}
Add these style rules to ‘styles.css’ file:
Lab: space
119
Add a font family to Dreamweaver:
install font ‘Stencil’ in your computer
click on ‘font’; choose ‘Edit Font List’
browse for ‘Stencil’; double arrow to
left
‘OK’
Lab: space
120
/* styles for header text */h1 { font-family: Stencil; font-size: 42px; line-height: 1em; font-weight: 200;}
h2 { font-size: 28px;}
h3 { font-size: 22px; color: #999900;}
Describe unique characteristics
(özellikleri):
Lab: space
121
<body> describes the page’s attributes
(özellik):
<p> tag appearance (face, size, color,
line-height)
page background
page padding/margins
Lab: space
122
body
Lab: space
123
/* body and p text styles */body { font-family: “Times New Roman”, Times, serif; font-size: 19px; line-height: 1.1em; color: #FFFFCC; background-image: url('images/starcluster.jpg'); padding: 5px 10px 10px 0px;}
<body> describes the page’s attributes
(özellik):
t, r, b, l
Lab: space
124
Links are used to move in site
‘pseudo-class’: a.link, a.hover, a.active,
a.visited
Basic strategy:
define link appearance once
change link color only for each
pseudo-class
Lab: space
125
a:link a:visited a:hover
Lab: space
126
/* styles for links */a:link { color: #33CC99;}
a:hover { color: #996600; background-color: #FFCC99;}
a:visited { color: #FF6600;}
Links use ‘body’ font, at .9em (defined in
a moment)
Lab: space
127
Top row of links is center aligned
Options:
use a <div>, <header>, or
<section>
group style for h1, h3, .links (already
done)
.links .links
Lab: space
128
Images are on margin, text wrapped
around
Float: left, right
Add margin to image so text doesn’t
touch
Image lines up with page margin though
Images always at top of paragraph; no
margin
Lab: space
129
left
right
Lab: space
130
/* styles for images */.left { float: left; margin-right: 10px; margin-bottom: 10px;}
.right { float: right; margin-left: 10px; margin-bottom: 10px;}
Floating images
Declarations can be customized:
declarations may be compiled (collect in order)
Dreamweaver usually shows single-line styles
131
.layer { margin: 10px; margin: 50px 20px 10px 30px; margin-top: 50px; margin-right: 20px; margin-bottom: 10px; margin-left: 30px; }
Lab: space
Lab: space
132
Email used once: email address
Color comes from link styles
Add appearance of oblique text
/* styles for page footer */#mail { font-style: oblique;}
Lab: space
133
Horizontal rules
Default style: whole page, left margin
We want:
width of 50% of page
centered in window
Lab: space
134
Lab: space
135
Horizontal rules:
Width of rule is ½ of page
‘margin: auto;’ is centering command on
blockhr { width: 50%; margin: auto;}
center in container
Lab: space
136
After link added; still must fix the HTML
Lab: space
137
Now, fix the ‘index’ page:
save your work; refresh your browser
<body> <p>NASA Space Exploration<br>and the Mercury Project</p> <p>by Shirley Johnson</p> <p>[ 1915 - 1957 ]      [ 1958 - 1960 ]      [ 1961 ]      [ 1962 ]      [ 1963 ]      [ Gemini & Apollo ]</p> <p>People in the future may regard humankind's first…
<body> <h1>NASA Space Exploration<br>and the Mercury Project</h1> <h3>by Shirley Johnson</h3> <p class="links">[1915-1957]      [1958-1960]      [1961]      [1962]      [1963]      [Gemini & Apollo]</p> <p>People in the future may regard humankind's first…
Lab: space
138
Now, fix the ‘index’ page:
select title and change ‘Format’ to h1
select author line and change ‘Format’
to h3 NASA Space Explorationand the Mercury Project
Cem Çoraplıoğlu
Lab: space
139
First three lines centered and fonts
updated
Lab: space
140
1915-1957
1958-1960
1961
1962
1963
Gemini and Apollo
Change these to h2:
Lab: space
141
Change these to h2:
Lab: space
142
Lab: space
143
Fix the ‘links’ row at top:
links go to location in page based on
year
link: uses ‘named anchor’ on page
add named anchors in front of each
year
named anchors are name only (no
extension)
Keep them short (case sensitive)
Lab: space
144
Add named anchors:
click in front of ‘1915’
choose ‘anchor’ icon
enter ‘sect1’ in box
1915 to 1957
1958 to 1960
sect1
sect2
[ 1915 - 1957 ] [ 1958 - 1960 ] [ 1961 ] [ 1962 ] [ 1963 ] [ Gemini & Apollo ]top
Gemini & Apollosect6
Lab: space
145
Dreamweaver MX 2004 creates link as:
This is deprecated. Change to:
<h2><a name="sect1"></a>1915 to 1957</h2>
<h2><a id="sect1"></a>1915 to 1957</h2>
Lab: space
146
Add links:
link for 1915 is #sect1
<p class="links"><a href="#sect1">[1915-1957]</a>]
[ 1915 - 1957 ] [ 1958 - 1960 ] [ 1961 ] [ 1962 ] [ 1963 ] [ Gemini & Apollo ]
Lab: space
147
Add links:
repeat for other links (sect2 – sect6)
<p id="center"><a name="top"></a>[<a href="#sect1">1915-1957</a>] [<a href="#sect2">1958-1960</a>]      [<a href="#sect3">1961</a>]      [<a href="#sect4">1962</a>]      [<a href="#sect5">1963</a>]      [<a href="#sect6">Gemini & Apollo</a>]</p><p>People in the future …
[ 1915 - 1957 ] [ 1958 - 1960 ] [ 1961 ] [ 1962 ] [ 1963 ] [ Gemini & Apollo ]
Lab: space
148
So far: (links to sections work)
Lab: space
149
Link back to top of page; link row
Lab: space
150
Link back to top of page; link row
Select ‘[Return to Top]’; link to
‘index.html’ or #
# is a pseudo-link; bad habit but
commonly done<a href="#">[Return to Top]</a><a href="index.html">[Return to Top]</a>
Lab: space
151
Email link:
highlight the address
in Link box, type mailto: and paste
on email address: add id of ‘mail’
copy two web addresses and make
links
Lab: space
152
Last job; add the images
Once picture for each section or
paragraph
Images are inline, but when added to
text, defineline-height until floated
Lab: space
153
Click before ‘People’
Insert – Images – open images folder
select nasa_logo.png
Lab: space
154
Select the image
Choose class of ‘right’ or add text to
image<img src="images/nasa_logo.png" width="150" height="138" class="right">
Add ‘alt’ of:“NASA Logo”
<img src="images/nasa_logo.png" width="15%" height="auto" class="right">
Lab: spaceClick left of “In 1915” insert
altas_mercury.png
Select image and apply style ‘left’<img src="images/atlas_mercury.png" width="150" height="138" class=“left">
Add ‘alt’ of:“Atlas Liftoff”
<img src="images/atlas_mercury.png" width="15%" height="auto" class=“left">
Lab: spaceClick left of “In June 1958” insert
7astronauts.jpg
Select image and apply style ‘right’<img src="images/7astronauts.jpg" width="20%" height="auto" class="right">
Add ‘alt’ of:“The Right Stuff”
Lab: spaceClick and insert chimp_ham.jpg
Select image and apply style ‘right’<img src="images/chimp_ham.jpg" width="17.5%" height="auto" class="left">
Add ‘alt’ of:“Ham the Chimp”
Lab: spaceClick left of “On May 5, 1961” insert
glenn_grissom_sheppard.jpg
Select image and apply style ‘right’<img src="images/glenn_grissom_sheppard.jpg" width="20%" height="auto" class="left">
Add ‘alt’ of:“Mercury Astronauts”
Lab: spaceClick left of “After several” (1962) insert
john_glenn.jpg
Select image and apply style ‘right’<img src="images/glenn_grissom_sheppard.jpg" width="17.5%" height="auto" class="left">
Add ‘alt’ of:“John Glenn”
Lab: spaceClick left of “on August 11, 1962” insert
schirra_splash_down.jpg
Select image and apply style ‘right’<img src="images/schirra_splash_down.jpg" width="20%" height="auto" class="right">
Add ‘alt’ of:“Landing”
Lab: spaceFind “manually” in middle of ‘1963’
paragraph. Insert white_eva.jpg and
apply style ‘left’<img src="images/white_eva.jpg" width="20%" height="auto" class="left">
Add ‘alt’ of:“Space Walk”
Lab: spaceClick in front of ‘The Gemini and insert
white_eva.jpg and apply style ‘left’
<img src="images/earth.png" width="20%" height="auto" class="right">
Add ‘alt’ of:“The Earth”
HTML:
http://validator.nu
CSS:
http://jigsaw.w3.org/css-validator/
Lab: space
163
Organize your style sheet
Order is not usually important; finding things is
Recommended order (alphabetic):
grouped elements
elements
ids
classes
pseudo-classes
Lab: space
164
Break 165
Project Xanadu: 1960
paper, video metaphors limiting and
wrong
the Internet, new media with new
metaphors
To date: need to innovate has been
strongerthan need to develop metaphors
166
A new paradigm (paradigma)
http://en.wikipedia.org/wiki/Ted_Nelson
167
Main point in the design of any media:
consistent look and feel
consistent positioning and use
high usability
intuitive
All driven by familiarity
One constant: “don’t mess with the formula”
A new paradigm
Consistencies with music:
two verses, musical interlude, closing verse
use a very small set of known instruments
rhythm: dotted quarter note, 1/8 note
major = happy
minor = sad
one song = 3 minutes
A new paradigm
169
Consistencies with movies:
framed in good versus bad, romantic comedy
cliché “rich bad guy” (TV as well)
stories supporting culture:
good versus evil
right and wrong
90 minutes in length
plot twist near the end
A new paradigm
170
Consistencies with television:
juried shows
talk shows (“radio on television”):
band
opening monologue
2 guests
musical guest
A new paradigm
171
Consistencies with books:
page margins
line height
font and font size
color
navigation
element locations
A new paradigm
172
The book The movie
A new paradigm
><=
173
Problem with Internet: every site is different
Each domain generates its own look
Some well done, some not
Consistency in interface remains a problem
A new paradigm
A new paradigm
174http://responsivedesign.is/articles/rwd-podcast-episode-16-john-allsopp
Ted Nelson is laughing at us
“A Dao of Web Design” John Allsopp (2000)
Give up on complete control; go with flow
Grant me the serenity to accept the things I cannot change,
The courage to change the things I can,
And the wisdom to know the difference
Term coined by Ethan Marcotte (2010)
site development paradigm
site scales to hardware
A new paradigm
175
http://www.alistapart.com/articles/responsive-web-design/
Open ‘dry.html’ (‘styles’ folder)
A prototype of a web page
Change elements, add classes, ids as needed
Make a DRY CSS style sheet (drystyle.css)
Strategy:
use elements as much as possible
use class, id as needed
Lab: making DRY stylesheets
176
Abstraction (soyutlama): big thing into its pieces
Normalizing a database; objects in OOP
Lab: making DRY stylesheets
177
Style sheet is organized: all data defined once
Same process used to normalize databases/tables
Steps to write styles:
define all property/value combinations used
duplicated properties, values in group styles
repeated descriptors become classes
unique items are defined in element, id
Lab: making DRY stylesheets
178
Analyze the HTML
Lab: making DRY stylesheets
179
<body background: #F3F3F3 font-family: arial font-size: 87.5%> <p font-family: Georgia font-size: 2em line-height: 2.5em color: red text-align: center>Title of Paper</p> <p font-family: Arial font-size: 1.5em line-height: 2.0em color: black text-align: left>First Section Title</p> <p font-family: Arial font-size: 1.0em line-height: 1.6em color: black background: #F3FFF3 text-align: left> <img src="images/androidlogo.png" width: 15% height: auto float: right margin-top 5px margin-left: 5px>Lorem ipsum dolor sit … platonem id nec.</p> <p font-family: Arial font-size: 1.5em line-height: 2.0em color: black text-align: left>Second Section Title</p> <p font-family: Arial font-size: 1.0em line-height: 1.6em color: black background: #F3FFF3 text-align: left> <img src="images/windowslogo.png" width: 15% height: auto float: left margin-bottom: 5px margin-right: 5px>Ad ius nostro … civibus singulis pri.</p> <p font-family: Arial font-size: 1.5em line-height: 2.0em color: black text-align: left>>Third Section Title</p> <p font-family: Arial font-size: 1.0em line-height: 1.6em color: black background: #F3FFF3 text-align: left> <img src="images/maclogo.png" width: 15% height: auto float: right margin-top 5px margin-left: 5px>Nam corrumpit incorrupte … Hinc ponderum in cum. Agam eius ex vel.</p> <p font-family: Arial font-size: 1.5em line-height: 2.0em color: black text-align: left>>Fourth Section Title</p> <p font-family: Arial font-size: 1.0em line-height: 1.6em color: black background: #F3FFF3 text-align: left><img src="images/linuxlogo.png" width: 15% height: auto float: left margin-bottom: 5px margin-right: 5px>Postea maiorum constituto … in cum. Agam eius ex vel.</p> <p font-family: Arial font-size: .75em line-height: 1.0em color: #999999 text-align: center>Copyright © Your_Name</p> <p text-align: center><img src="images/maclogo.png" width: 5% height: auto></p></body>
h1
h2
h3h4
p
Use better elements (separate by function)
Lab: making DRY stylesheets
180
<body background: #F3F3F3 font-family: arial font-size: 87.5%> <h1 font-family: Georgia font-size: 2em line-height: 2.5em color: red text-align: center>Title of Paper</h1> <h2 font-family: Arial font-size: 1.5em line-height: 2.0em color: black text-align: left>First Section Title</h2> <p font-family: Arial font-size: 1.0em line-height: 1.6em color: black background: #F3FFF3 text-align: left>Lorem ipsum dolor sit … platonem id nec.<img src="images/androidlogo.png" width: 15% height: auto float: right margin-top 5px margin-left: 5px></p> <h2 font-family: Arial font-size: 1.5em line-height: 2.0em color: black text-align: left>Second Section Title</h2> <p font-family: Arial font-size: 1.0em line-height: 1.6em color: black background: #F3FFF3 text-align: left> <img src="images/windowslogo.png" width: 15% height: auto float: left margin-bottom: 5px margin-right: 5px>Ad ius nostro … civibus singulis pri.</p> <h2 font-family: Arial font-size: 1.5em line-height: 2.0em color: black text-align: left>>Third Section Title</h2> <p font-family: Arial font-size: 1.0em line-height: 1.6em color: black background: #F3FFF3 text-align: left>Nam corrumpit incorrupte … Hinc ponderum in cum. Agam eius ex vel.<img src="images/maclogo.png" width: 15% height: auto float: right margin-top 5px margin-left: 5px></p> <h2 font-family: Arial font-size: 1.5em line-height: 2.0em color: black text-align: left>>Fourth Section Title</h2> <p font-family: Arial font-size: 1.0em line-height: 1.6em color: black background: #F3FFF3 text-align: left><img src="images/linuxlogo.png" width: 15% height: auto float: left margin-bottom: 5px margin-right: 5px>Postea maiorum constituto … in cum. Agam eius ex vel.</p> <h3 font-family: Arial font-size: .75em line-height: 1.0em color: #999999 text-align: center>Copyright © Your_Name</h3> <h4 text-align: center><img src="images/maclogo.png" width: 5% height: auto></h4></body>
Chart out the attributes:
Lab: making DRY stylesheets
181
family size color line back align
body Arial 87.5% #F3F3F3
h1 Georgia 2.0em red 2.5em center
h2 Arial 1.5em black 2.0em left
h3 Arial .75em #999999 1.0em center
h4 center
p Arial 1.0em black 1.6em #F3FFF3 left
float top right bottom left
.left Left 5px 5px
.right right 5px 5px
font-family: body cascades to all text
Lab: making DRY stylesheets
182
family size color line back align
body Arial 87.5% #F3F3F3
h1 Georgia 2.0em red 2.5em center
h2 1.5em black 2.0em left
h3 .75em #999999 1.0em center
h4 center
p 1.0em black 1.6em #F3FFF3 left
float top right bottom left
.left Left 5px 5px
.right right 5px 5px
font-size: each one is unique (define in element)
Lab: making DRY stylesheets
183
family size color line back align
body Arial 87.5% #F3F3F3
h1 Georgia 2.0em red 2.5em center
h2 1.5em black 2.0em left
h3 .75em #999999 1.0em center
h4 center
p 1.0em black 1.6em #F3FFF3 left
float top right bottom left
.left Left 5px 5px
.right right 5px 5px
color: black is default (define in element)
Lab: making DRY stylesheets
184
family size color line back align
body Arial 87.5% #F3F3F3
h1 Georgia 2.0em red 2.5em center
h2 1.5em 2.0em left
h3 .75em #999999 1.0em center
h4 center
p 1.0em 1.6em #F3FFF3 left
float top right bottom left
.left Left 5px 5px
.right right 5px 5px
line-height: define in element
Lab: making DRY stylesheets
185
family size color line back align
body Arial 87.5% #F3F3F3
h1 Georgia 2.0em red 2.5em center
h2 1.5em 2.0em left
h3 .75em #999999 1.0em center
h4 center
p 1.0em 1.6em #F3FFF3 left
float top right bottom left
.left Left 5px 5px
.right right 5px 5px
background: define in body and p only
Lab: making DRY stylesheets
186
family size color line back align
body Arial 87.5% #F3F3F3
h1 Georgia 2.0em red 2.5em center
h2 1.5em 2.0em left
h3 .75em #999999 1.0em center
h4 center
p 1.0em 1.6em #F3FFF3 left
float top right bottom left
.left Left 5px 5px
.right right 5px 5px
align: left is default (ignore), group center
Lab: making DRY stylesheets
187
family size color line back align
body Arial 87.5% #F3F3F3
h1 Georgia 2.0em red 2.5em center
h2 1.5em 2.0em
h3 .75em #999999 1.0em center
h4 center
p 1.0em 1.6em #F3FFF3
float top right bottom left
.left Left 5px 5px
.right right 5px 5px
Two classes:
Lab: making DRY stylesheets
188
family size color line back align
body Arial 87.5% #F3F3F3
h1 Georgia 2.0em red 2.5em center
h2 1.5em 2.0em
h3 .75em #999999 1.0em center
h4 center
p 1.0em 1.6em #F3FFF3
float top right bottom left
.left Left 5px 5px
.right right 5px 5px
Finished style sheet:
Lab: making DRY stylesheets
189
h1, h3, h4 {text-align: center;
}body {
font-family: Arial;font-size: 87.5%;background: #F3F3F3;
}h1 {
font-family: Georgia;font-size: 2.0em;color: red;line-height: 2.5em;
}h2 {
font-size: 1.5em;line-height: 2.0em;
}h3 {
font-size: .75em;color: #999999;line-height: 1.0em;
}
p {font-size: 1.0em;line-height: 1.6em;background: #F3FFF3;
}.left {
float: left;margin-right: 5px;margin-bottom: 5px;
}.right {
float: right;margin: 5px 0px 0px 5px;
/*top right bottom left */}
Completed page:
Lab: making DRY stylesheets
190
Add ‘clear: both;’ to h2 style
Lab: making DRY stylesheets
191
1. The Intergalactic Network was primarily concerned with:
A. How the system would be usedB. Networking/hardwareC. Telecommunications issuesD. SoftwareE. End users
Quiz:
192
2. Project Xanadu was primarily concerned with:
A. How the system would be usedB. Networking/hardwareC. Telecommunications issuesD. SoftwareE. End users
Quiz:
193
3. The metaphor of the Internet is closest to:
A. MoviesB. BooksC. ArtD. ScienceE. Television
Quiz:
194
3. ‘Hyper’ means:
A. Non-sequentialB. 4 or more dimensionsC. Very large, unusualD. Not serial
Quiz:
195
3. ARPANet is crediting with developing:
A. Faster computersB. Category 5 ethernetC. Packet switchingD. TCP and IP protocolsE. HTTP protocol
Quiz:
196
4. Tim Berners-Lee WWW system was built on:
A. TCP-IPB. HTTPC. SGML
Quiz:
197
5. The first commercially successful browser was:
A. WWWB. Internet ExplorerC. Google ChromeD. Netscape NavigatorE. Firefox
Quiz:
198
6. Netscape is credited with developing these technologies:
A. HTMLB. SSLC. XMLD. CSSE. JavaScriptF. Cookies
Quiz:
199
7. Netscape is credited with developing these technologies:
A. HTMLB. SSLC. XMLD. Images in web pagesD. CSSE. JavaScriptF. CookiesG. Blink
Quiz:
200
8. Internet Explorer was originally developed by:
A. MicrosoftB. NetscapeC. WWWD. W3C
Quiz:
201
9. The ‘Browser Wars’ dealt with these problems/issues:
A. The monopoly power of the W3CB. Who would run the ISPsC. Bundling of the browser into the OSD. The need for a compatible HTML system
Quiz:
202
10. One lesson to be learned from the Browser Wars is:
A. Microsoft always winsB. Netscape’s browsers were bestC. Proprietary systems lose out to open source over timeD. The W3C needs to be more powerfulE. The Internet wasn’t big enough for both browsers
Quiz:
203
11. The W3C:
A. Manages the InternetB. Works towards building a vision of the futureC. Passes regulations with 2/3 of member votesD. Develops recommendations and specificationsE. Is dominated by browser vendor companies
Quiz:
204
12. HTML is considered to be:
A. Format poorB. Format richC. Semantically poorD. Semantically rich
Quiz:
205
13. The W3C:
A. Manages the InternetB. Works towards building a vision of the futureC. Passes regulations with 2/3 of member votesD. Develops recommendations and specificationsE. Is dominated by browser vendor companies
Quiz:
206
14. One argument against WHATWG is:
A. They are dominated by consumer groupsB. They are dominated by browser vendorsC. They are dominated by ISPsD. They are dominated by hardware manufacturers
Quiz:
207
15. Which style rule ranking goes from highest specificity to lowest:
A. Inline, external, embeddedB. External, embedded, inlineC. Embedded, inline, externalD. Inline, embedded, externalE. External, inline, embeddedF. Embedded, external, inline
Quiz:
208
16. Identify which is an type/tag, class, id:
Type:Class:Id:
Quiz:
209
B.p { color: #F3C; opacity: .5;}
A.#this { color: #F3C; opacity: .5;}
C..that { color: #F3C; opacity: .5;}
BCA
17. The order of preferred use (most to least) of these style rules is:
A. Inline, external, embeddedB. External, embedded, inlineC. Embedded, inline, externalD. Inline, embedded, externalE. External, inline, embeddedF. Embedded, external, inline
Quiz:
210
18. Identify the parts of a style rule:
A. TitleB. DeclarationC. SelectorD. Style ruleE. PropertyF. ValueG. Attribute
Quiz:
211
#this { color: #F3C;}
No such thingcolor: #F3C;#thisWhole thingcolor#F3CNo such thing
19. The assumed size for a font that is ‘1em’ in pixels is:
A. 12pxB. 16pxC. 24pxD. 48pxE. 96px
Quiz:
212
20. “float: right;” means:
A. The text moves to the rightB. The text moves to the leftC. The image moves to the right and the text flows around leftD. The image moves to the left and the text flows around rightE. The page becomes right-aligned
Quiz:
213
21. In HTML5, the preferred tag for a break is:
A. <BR>B. <br>C. <br />D. <br></br>
Quiz:
214
Assignment: firstpage
215
Write a style sheet for this week’s assignment
At a minimum:
style text
style an image
style a link
style a list
SE 372: Web Page Design: HTML5
Week 2: Introduction to HTML5 & CSSCopyright © Steven W. Johnson
January 1, 2015