SE 372: Web Page Design: HTML5 Week 2: Introduction to HTML5 & CSS Copyright © Steven W. Johnson January 1, 2015

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


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


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:


Hyper:

4 or more dimensions (math)

very

unusual, abnormal

non-sequential connection (computer science)

10

Internet history:


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


20


21

Browser:Netscape

100%

1993199419951996 20032000

MS purchases source code for Spyglass

(1994)

Convert into Internet Explorer (1994)


22

Browser wars (1995 - 1999):

anti-competitive practices at Microsoft

who would control browser market

whose vision of Internet would prevail


23

Economic

Technical

First official standard: HTML 2.0 (Nov. 1995)

Standard was 2 years behind current practice


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


25

Browser wars: innovations in HTML

language of HTML, DOM


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


27

Browser wars: technical and economic warfare


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


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


30

Netscape loses out:


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%


32

Firefox (2004):

the “next generation” of Netscape Navigator

“Most standards compliant” initially

customization of interface; lots of plug-ins


33

Firefox emerges:


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)


35

Ascendancy of Chrome:


36

Browser:WWW

Browser:Firefox

Browser:Chrome

Browser Wars

1993199419951996 2003 20082000 2012

100%

Browser:Netscape

Browser:IE

W3C(1994)

Today (2013):


37

Ascendancy of mobile devices:


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


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


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


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


89

Create this body style:


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


91

class declarations:

class name: ‘.’ followed by text (not a number)


92

.left { float: left; margin: 0px 5px 5px 0px; /* Dreamweaver lists out */}


93

id declared in same way:

click on ‘+’ and choose ‘xxx’

enter ‘#’ and id name of your choice


#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


95

Open ‘design’ window in Dreamweaver

Styles shown there as well (not editable)

Separate listings for:

embedded styles

external styles


96

Pseudo-class declarations:

Element followed by a state/action


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


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:


99

List appearance can be changed with:

<ul>

<li>

class

id


100

Done!




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)

email

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)


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


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


178

Analyze the HTML


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)


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:


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


182




h2 1.5em black 2.0em left

h3 .75em #999999 1.0em center

h4 center

p 1.0em black 1.6em #F3FFF3 left


.left Left 5px 5px


font-size: each one is unique (define in element)


183




h2 1.5em black 2.0em left

h3 .75em #999999 1.0em center

h4 center

p 1.0em black 1.6em #F3FFF3 left


.left Left 5px 5px


color: black is default (define in element)


184




h2 1.5em 2.0em left

h3 .75em #999999 1.0em center

h4 center

p 1.0em 1.6em #F3FFF3 left


.left Left 5px 5px


line-height: define in element


185




h2 1.5em 2.0em left

h3 .75em #999999 1.0em center

h4 center



.left Left 5px 5px


background: define in body and p only


186




h2 1.5em 2.0em left

h3 .75em #999999 1.0em center

h4 center



.left Left 5px 5px


align: left is default (ignore), group center


187




h2 1.5em 2.0em

h3 .75em #999999 1.0em center

h4 center

p 1.0em 1.6em #F3FFF3


.left Left 5px 5px


Two classes:


188




h2 1.5em 2.0em

h3 .75em #999999 1.0em center

h4 center

p 1.0em 1.6em #F3FFF3


.left Left 5px 5px


Finished style sheet:


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:


190

Add ‘clear: both;’ to h2 style


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



January 1, 2015

Documents

SE 372: Web Page Design: HTML5 Week 2: Introduction to HTML5 & CSS Copyright © Steven W. Johnson January 1, 2015