se 372: web page design: html5 week 2: introduction to html5 & css copyright © steven w....

SE 372: Web Page Design: HTML5

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:

The favor bank:

metaphor (mecaz) describes need for good acts

civility pays off

idea that good acts are returned with interest

Inspirational thought for the week:

Favor banks are between people

Not transferrable

Deposits > withdrawals

Important to always have positive balance

withdrawals can be for ‘bad behavior’

always be on time

don’t be sick for the first year

each ‘favor’ you ask for costs

Goal of communication: not be hindered by

space / distance

or time

language

synchronous (senkron) AND asynchronous (asenkron)

Never been feasible

Communications:

Intergalactic Network: 1962 (JCR Licklider)

First conception of the Internet

‘Everything’ connected to one network

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

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’)

Internet history:

Hyper:

4 or more dimensions (math)

unusual, abnormal

non-sequential connection (computer science)

Internet history:

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:

• 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

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

Internet history:

Publisher markup of manuscript (typemarking)

Internet history:

https://www.prismnet.com/~tcm/etwr2379/guides/typemarking.html

‘Web pages’ built on:

TCP-IP (networking)

HTTP (messaging)

SGML (scripting)

Browser (interpreter)

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:

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

Browser:Netscape

1993199419951996 20032000

MS purchases source code for Spyglass

(1994)

Convert into Internet Explorer (1994)

Browser wars (1995 - 1999):

anti-competitive practices at Microsoft

who would control browser market

whose vision of Internet would prevail

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

Browser wars: innovations in HTML

language of HTML, DOM

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

Browser wars: technical and economic warfare

Browser:Netscape

Browser:IE

Browser Wars

1993199419951996 20032000

Browser wars:

United States v Microsoft Corporation 253 F.3d 34 (2001). Started in 1998.

Resolved with settlement

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

Netscape loses out:

Browser:WWW

Browser Wars

1993199419951996 2003 20082000 2012

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%

Firefox (2004):

the “next generation” of Netscape Navigator

“Most standards compliant” initially

customization of interface; lots of plug-ins

Firefox emerges:

Browser:WWW

Browser:Firefox

Browser Wars

1993199419951996 2003 20082000 2012

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)

Ascendancy of Chrome:

Browser:WWW

Browser:Firefox

Browser:Chrome

Browser Wars

1993199419951996 2003 20082000 2012

Browser:Netscape

Browser:IE

W3C(1994)

Today (2013):

Ascendancy of mobile devices:

iPhone

1999 2014

Blackberry

20072003

Android Android

Three different web delivery systems:

Traditional HTML

Apple Xcode Objective C

Android SDK XML and Java

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

Specification: developed and approved byworking group

Recommendation: Consensus of W3C membersthat specification is appropriate for wide use

Notice: there are no edicts or requirements

“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:

Original 18 elements (well, 17 anyway):

History of HTML:

<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:

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:

History of HTML

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

Original HTML: styles hard-coded into

browser

Solution: separate presentation from

structure

Currently 3 different ‘generations’ of

Idea of style sheets is not new (SGML)

What was new: cascading

History of CSS

CSS1 recommendation complete in 1996

1999: browsers near-full implementation

of CSS1

the idea of separation of concerns

text and general layout

margin, padding

classes and ids

History of CSS

CSS2 recommendation complete in 1998

Initial implementation faster than CSS1

‘full implementation’: 2007-2009

positioning

media types, aural

History of CSS

CSS3 introduced in modules in 2011

‘Broadly supported’ has ‘experimental’

modules

Hickson: may not be implemented until

rounded rectangles

gradients

drop shadows

eye candy

History of CSS

Democracy and capitalism are messy

But ultimately, the best product wins

History of CSS

Open ‘styles’ folder, ‘index.html’

Create a folder ‘images’. Move images

into it

Lab: styles

‘index.html’ has some text; ‘styles.css’ is

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

HTML has one default appearance (‘format poor’)

HTML is structural (yapı) language

CSS is style language to define layouts

CSS is a formatting language

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

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

Instruction ends with closing tag

‘Inline’ style rule

Lab: styles

<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

<p style=“color: red”>Lorem Ipsum text</p>

Problem!! Do I have to do this every

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

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

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;}

Embedded style rules:

page-level rules

overwrite site-level (external) rules

similar to embedded JavaScript

Lab: styles

Make the body (‘page’) background light

Location in <head> not critical

Typically after the <title>

Must call before you use

Lab: styles

<head> <style> body { background: #CCCCFF; } </style></head>

Lab: styles

<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

<head> <style> body { background: #CCCCFF; font-family: Arial; } </style></head>

Can create using ‘Page Properties’

Right-click Design Window – Page

Properties

Lab: styles

<head> <style> body { background: #CCCCFF; font-family: Arial; } </style></head>

External style rules:

placed in .css file, included in a style

weakest in terms of cascade

strongest in terms of impact on site

primary means to style a site*

Lab: styles

Create style sheet: File – New – CSS

Save to proper location

Lab: styles

Create style sheet: File – New – CSS

Link the style sheet:

Lab: styles

May see other includes with ‘type’

HTML5: ‘types’ are no longer required

Technically, quotes aren’t either

Universal support - quotes

Lab: styles

<!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

<!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

<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

<p><img src="images/linuxlogo.png" width="10%" height="auto" alt="Linux OS Logo" title="Linux OS Logo"> Lorem ipsum … </p>

Lab: styles

<p><img src="images/linuxlogo.png" width="10%" height="auto" alt="Linux OS Logo" title="Linux OS Logo"> Lorem ipsum … </p>

Lab: styles

.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

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

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

Lab: styles

#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

Style sheet made up of style rules

Style rules made up of a:

selector

declaration

declaration made up of a:

property

Styles

.style1 { color: #990000; font-size: 19px; text-align: center;}

Styles

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

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

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

<!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 */

Create this body style:

Click on ‘+’ button

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;}

Body style defines page appearance, text

font-family applied to all text in tags

class declarations:

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

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

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;}

Open ‘styles.css’

Notice styles are built into page; page not saved

‘styles.css’ may be edited manually or in wizard

Open ‘design’ window in Dreamweaver

Styles shown there as well (not editable)

Separate listings for:

embedded styles

external styles

Pseudo-class declarations:

Element followed by a state/action

a:link { text-decoration: none; color: #930;}

Be careful that your link states are same

Each state same face, size, weight, line-

height

Changing ornaments can also be a

problem

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:

List appearance can be changed with:

January 1, 2015

Open folder ‘space’ and ‘index.html’

Purpose of lab: apply styles

Lab: space

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

Three locations for style rules:

inline

embedded

external

Use external styles:

two pages (index & atlas)

keep HTML clean

Lab: space

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

Lab: space

Site design best practice:

Lab: space

domain

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

everything defined once

Types of selectors:

grouped

element

pseudo-class

CSS3 primer:

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

Lab: space

h1 { color: #FFCCCC; font-size: 19px; background: blue;}

Analyze the HTML

Lab: space

Analyze the output:

Lab: space

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

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

email, body have same font color

margins on images is the same

list items and links have same font-

Lab: space

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)

Lab: space

/* 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

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

‘OK’

Lab: space

/* 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

<body> describes the page’s attributes

(özellik):

<p> tag appearance (face, size, color,

line-height)

page background

page padding/margins

Lab: space

/* 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

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

a:link a:visited a:hover

Lab: space

/* 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

Top row of links is center aligned

Options:

use a <div>, <header>, or

group style for h1, h3, .links (already

.links .links

Lab: space

Images are on margin, text wrapped

around

Float: left, right

Add margin to image so text doesn’t

Image lines up with page margin though

Images always at top of paragraph; no

margin

Lab: space

/* 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

.layer { margin: 10px; margin: 50px 20px 10px 30px; margin-top: 50px; margin-right: 20px; margin-bottom: 10px; margin-left: 30px; }

Lab: space

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

Horizontal rules

Default style: whole page, left margin

We want:

width of 50% of page

centered in window

Lab: space

Horizontal rules:

Width of rule is ½ of page

‘margin: auto;’ is centering command on

blockhr { width: 50%; margin: auto;}

center in container

Lab: space

After link added; still must fix the HTML

Lab: space

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

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

First three lines centered and fonts

updated

Lab: space

1915-1957

1958-1960

Gemini and Apollo

Change these to h2:

Lab: space

Change these to h2:

Lab: space

Fix the ‘links’ row at top:

links go to location in page based on

link: uses ‘named anchor’ on page

add named anchors in front of each

named anchors are name only (no

extension)

Keep them short (case sensitive)

Lab: space

Add named anchors:

click in front of ‘1915’

choose ‘anchor’ icon

enter ‘sect1’ in box

1915 to 1957

1958 to 1960

[ 1915 - 1957 ] [ 1958 - 1960 ] [ 1961 ] [ 1962 ] [ 1963 ] [ Gemini & Apollo ]top

Gemini & Apollosect6

Lab: space

Dreamweaver MX 2004 creates link as:

This is deprecated. Change to:

Lab: space

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

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

So far: (links to sections work)

Lab: space

Link back to top of page; link row

Lab: space

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

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

Lab: space

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

Click before ‘People’

Insert – Images – open images folder

select nasa_logo.png

Lab: space

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”

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”

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’

Add ‘alt’ of:“The Earth”

http://validator.nu

http://jigsaw.w3.org/css-validator/

Lab: space

Organize your style sheet

Order is not usually important; finding things is

Recommended order (alphabetic):

grouped elements

elements

classes

pseudo-classes

Lab: space

Break 165

Project Xanadu: 1960

paper, video metaphors limiting and

the Internet, new media with new

metaphors

To date: need to innovate has been

strongerthan need to develop metaphors

A new paradigm (paradigma)

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

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

Consistencies with television:

juried shows

talk shows (“radio on television”):

opening monologue

2 guests

musical guest

A new paradigm

Consistencies with books:

page margins

line height

font and font size

navigation

element locations

A new paradigm

The book The movie

A new paradigm

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

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

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

Abstraction (soyutlama): big thing into its pieces

Normalizing a database; objects in OOP

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

Analyze the HTML

<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>

Use better elements (separate by function)

<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:

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

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)

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)

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

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

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

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:

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:

h1, h3, h4 {text-align: center;

}body {

font-family: Arial;font-size: 87.5%;background: #F3F3F3;

font-family: Georgia;font-size: 2.0em;color: red;line-height: 2.5em;

font-size: 1.5em;line-height: 2.0em;

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:

Add ‘clear: both;’ to h2 style

1. The Intergalactic Network was primarily concerned with:

A. How the system would be usedB. Networking/hardwareC. Telecommunications issuesD. SoftwareE. End users

2. Project Xanadu was primarily concerned with:

A. How the system would be usedB. Networking/hardwareC. Telecommunications issuesD. SoftwareE. End users

3. The metaphor of the Internet is closest to:

A. MoviesB. BooksC. ArtD. ScienceE. Television

3. ‘Hyper’ means:

A. Non-sequentialB. 4 or more dimensionsC. Very large, unusualD. Not serial

3. ARPANet is crediting with developing:

A. Faster computersB. Category 5 ethernetC. Packet switchingD. TCP and IP protocolsE. HTTP protocol

4. Tim Berners-Lee WWW system was built on:

A. TCP-IPB. HTTPC. SGML

5. The first commercially successful browser was:

A. WWWB. Internet ExplorerC. Google ChromeD. Netscape NavigatorE. Firefox

6. Netscape is credited with developing these technologies:

A. HTMLB. SSLC. XMLD. CSSE. JavaScriptF. Cookies

7. Netscape is credited with developing these technologies:

A. HTMLB. SSLC. XMLD. Images in web pagesD. CSSE. JavaScriptF. CookiesG. Blink

8. Internet Explorer was originally developed by:

A. MicrosoftB. NetscapeC. WWWD. W3C

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

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

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

12. HTML is considered to be:

A. Format poorB. Format richC. Semantically poorD. Semantically rich

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

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

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

16. Identify which is an type/tag, class, id:

Type:Class:Id:

B.p { color: #F3C; opacity: .5;}

A.#this { color: #F3C; opacity: .5;}

C..that { color: #F3C; opacity: .5;}

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

18. Identify the parts of a style rule:

A. TitleB. DeclarationC. SelectorD. Style ruleE. PropertyF. ValueG. Attribute

#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

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

21. In HTML5, the preferred tag for a break is:

A. <BR>B. <br>C. <br />D. <br></br>

Assignment: firstpage

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

se 372: web page design: html5 week 2: introduction to html5 & css copyright © steven w....

nelson slide

internet history

hypertext hypertext

direction hypertext

xanadu model

xanadu server

html5 week

original hypertext model

Documents

learning : php, mysql, javascript, css & html5 by robin...

html5 & less css

html css xml html5 - cesare...

good css and html5

the...

adaptive mobile web pages using html5 and css for

html and css 6 th edition getting started with html5

pro html5 with css, javascript, and multimedia -...

integrating javascript and html5 html5 & css 7 th edition

html5 & css - wayne state...

html5 bootcamp: essential html, css, & javascript

html5 and css in hindi

noveo web intership html5, css, interface

detecting redundant css rules in html5...

abstract technical skills education html | html5 css

html5/css3 course introduction to html5 · html5/css3...

html5 & css overview

html5 features on tizen...html5 forms, selectors api, media...

html5 and css3 layout with css page 1 - profstruck.net and...

html5, css, javascript style guide and coding conventions