Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "SE 372: Web Page Design: HTML5 Week 2: Introduction to HTML5 & CSS Copyright © Steven W. Johnson January 1, 2015"— Presentation transcript:

1 SE 372: Web Page Design: HTML5 Week 2: Introduction to HTML5 & CSS Copyright © Steven W. Johnson January 1, 2015 http://line25.com/articles/10-html-entity- crimes-you-really-shouldnt-commit

2 Some history of Internet things Introduction to styles Media paradigms DRY programming Today: 2

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

4 Favor banks are between people Not transferrable Deposits > withdrawals Important to always have positive balance 4 Inspirational thought for the week:

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

6 Goal of communication: not be hindered by space / distance or time language synchronous (senkron) AND asynchronous (asenkron) Never been feasible 6 Communications:

7 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

8 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

9 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

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

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

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

15 Publisher markup of manuscript (typemarking) 15 Internet history: https://www.prismnet.com/~tcm/etwr2379/guides/typemarking.html

16 ‘Web pages’ built on: TCP-IP (networking) HTTP (messaging) SGML (scripting) Browser (interpreter) 16 Internet history:

17 Internet & Tim Berners-Lee (1990-1993): ‘invented’ HTML (specific SGML) invented browsers 17 http://bytesdaily.blogspot.com/2011/10/quote-tim-berners-lee.html Internet history:

18 18 HyperText.m: (Sept, 1990)

19 Start of Web 1.0: read-only Internet Mosaic Communications Corp. (1994) Marc Andreessen, Jim Clark First commercially successful browser (1994) Browsers/HTML history: 19 http://www.biography.com/people/marc-andreessen-9542208

20 1995: Mosaic becomes Netscape Navigator 2.0 “2 nd generation” browser included: JavaScript: Brandan Eich SSL: Taher Elgamal Cookies: Lou Montulli Browsers/HTML history: 20

21 Browsers/HTML history: 21 Browser: Netscape 100% 1993 1994 1995 1996 2003 2000

22 MS purchases source code for Spyglass (1994) Convert into Internet Explorer (1994) Browsers/HTML history: 22

23 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

24 First official standard: HTML 2.0 (Nov. 1995) Standard was 2 years behind current practice Browsers/HTML history: 24 http://inkblotonenglish.blogspot.com.tr/2013/04/shut-door-slam-door-boom.html

25 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

26 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ın ve sözşık! Benim dogili genzel dir!

27 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

28 Browser wars: technical and economic warfare Browsers/HTML history: 28 Browser: Netscape Browser: IE Browser Wars 100% 1993 1994 1995 1996 2003 2000

29 Browser wars: United States v Microsoft Corporation 253 F.3d 34 (2001). Started in 1998. Resolved with settlement Browsers/HTML history: 29

30 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

31 Netscape loses out: Browsers/HTML history: 31 Browser: WWW Browser Wars 1993 1994 1995 1996 2003 2008 20002012 100% Browser: Netscape Browser: IE W3C (1994)

32 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

33 Firefox (2004): the “next generation” of Netscape Navigator “Most standards compliant” initially customization of interface; lots of plug-ins Browsers/HTML history: 33

34 Firefox emerges: Browsers/HTML history: 34 Browser: WWW Browser: Firefox Browser Wars 1993 1994 1995 1996 2003 2008 20002012 100% Browser: Netscape Browser: IE W3C (1994)

35 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

36 Ascendancy of Chrome: Browsers/HTML history: 36 Browser: WWW Browser: Firefox Browser: Chrome Browser Wars 1993 1994 1995 1996 2003 2008 20002012 100% Browser: Netscape Browser: IE W3C (1994)

37 Today (2013): Browsers/HTML history: 37

38 Ascendancy of mobile devices: Browsers/HTML history: 38 iPhone 19992014 100% Blackberry 20072003 Android 2010

39 Three different web delivery systems: Traditional HTML Apple XcodeObjective C Android SDKXML and Java Browsers/HTML history: 39

40 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

41 Specification: developed and approved by working group Recommendation: Consensus of W3C members that specification is appropriate for wide use Notice: there are no edicts or requirements W3C: 41

42 “HTML Tags” (document title - 1991): 18 elements 14 are still in HTML 4 HTML (1993) : added Mosaic’s use of tag HTML+ (1993): tables and forms First official standard: HTML 2 (Nov. 1995) History of HTML: 42

43 Original 18 elements (well, 17 anyway): History of HTML: 43 NeXT only - deprecated - highlighting – deprecated definition list definition term

44 HTML is about data/text transmission Format poor Makes sense for scientific papers; not for web New commercial Internet: format rich History of HTML: 44 http://redkiteprayer.com/2012/04/

45 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

46 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

47 History of HTML 47 HTML 3-type style: HTML 4-type style: HTML 5-type style: Quick brown fox Quick brown fox Quick brown fox

48 Break 48

49 CSS is also W3C recommendation CSS developed by: Håkon Lie (CERN, Opera) Robert Cailliau (CERN) History of CSS 49

50 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

51 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

52 CSS2 recommendation complete in 1998 Initial implementation faster than CSS1 ‘full implementation’: 2007-2009 CSS2: positioning media types, aural History of CSS 52

53 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

54 Democracy and capitalism are messy But ultimately, the best product wins History of CSS 54

55 Open ‘styles’ folder, ‘index.html’ Create a folder ‘images’. Move images into it Lab: styles 55

56 ‘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/tagchange appearance for site Lab: styles 56

57 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

58 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

59 Find ‘ ’ tag and add style for color red Instruction ends with closing tag ‘Inline’ style rule Lab: styles 59 My Title

60 Make last paragraph red Add ‘Inline’ style rule to last tag Lab: styles 60 Lorem Ipsum text

61 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

62 Embedded styles: styles in Styles placed in 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

63 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

64 Embedded style rules: page-level rules overwrite site-level (external) rules similar to embedded JavaScript Lab: styles 64 body { background: #CCCCFF; }

65 Make the body (‘page’) background light blue Location in not critical Typically after the Must call before you use Lab: styles 65 body { background: #CCCCFF; }

66 Lab: styles 66 body { background: #CCCCFF; }

67 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 body { background: #CCCCFF; font-family: Arial; }

68 Can create using ‘Page Properties’ Right-click Design Window – Page Properties Lab: styles 68

69 Lab: styles 69 body { background: #CCCCFF; font-family: Arial; }

70 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

71 Create style sheet: File – New – CSS Save to proper location Lab: styles 71

72 Create style sheet: File – New – CSS Link the style sheet: Lab: styles 72

73 May see other includes with ‘type’ HTML5: ‘types’ are no longer required Technically, quotes aren’t either Universal support - quotes Lab: styles 73 A History of Space Travel A History of Space Travel A History of Space Travel

74 Linking generally preferred over importing Importing: a stylesheet from another domain Import downloads serially Lab: styles 74 A History of Space Travel @import url(“styles.css”);

75 Lorem ipsum … In ‘index.html’: Drag/drop image next to 1 st open must be inside tags Image sets first line-height in Change image dimensions to percentage Image width, height scale with window Lab: styles 75 Lorem ipsum …

76 Lab: styles 76 Lorem ipsum …

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

78 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”: Lorem ipsum …

79 Lab: styles 79.left { float: left; margin-right: 10px; margin-bottom: 10px; }

80 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

81 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 3 rd paragraph Lorem ipsum …

82 Lab: styles 82 Done!

83 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

84 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

85 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 86 Lab: Dreamweaver style wizard Open ‘index.html’ in Dreamweaver Include style sheet by clicking on ‘link’ icon Find ‘styles.css’ in the ‘wizard’ folder, select it Save

87 87 Styles Wizard: Your_Name Lab: Dreamweaver style wizard ‘styles.css’ now included in ‘index.html’ @charset "utf-8"; /* CSS Document */

88 88 Create this body style: Click on ‘+’ button Lab: Dreamweaver style wizard

89 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 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 91 class declarations: class name: ‘.’ followed by text (not a number) Lab: Dreamweaver style wizard

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

93 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 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 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 96 Pseudo-class declarations: Element followed by a state/action Lab: Dreamweaver style wizard a:link { text-decoration: none; color: #930; }

97 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 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 99 List appearance can be changed with: class id Lab: Dreamweaver style wizard

100 100 Done! Lab: Dreamweaver style wizard

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

102 Open folder ‘space’ and ‘index.html’ Purpose of lab: apply styles Lab: space 102

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

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

105 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

106 Goal: 1 rule for each appearance type Unique styles: ididentifier: # Repeated styles: classidentifier:. Write element style rules as much as possible Use classes and ids as needed Combine styles as much as possible (DRY) Lab: space 106

107 Lab: space 107

108 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

109 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

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

111 Stylesheet Style rule: selector declaration(s): property value Lab: space 111 h1 { color: #FFCCCC; font-size: 19px; background: blue; }

112 Analyze the HTML Lab: space 112

113 Analyze the output: Lab: space 113

114 Analyze the output: page has a title (h1) each section has a title (h2) author (h3) body text (text in tags) link (normal, hover, visited) email 2 image appearances: float left, right Lab: space 114

115 Lab: space 115 h1 text h2 text h3 text

116 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

117 Lab: space 117 Create ‘styles.css’ (File – New – CSS) Save into ‘space’ folder Open ‘index’ and ‘atlas’ Add this code to the of each file (not tag)

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

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

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

121 Lab: space 121 describes the page’s attributes (özellik): tag appearance (face, size, color, line-height) page background page padding/margins

122 Lab: space 122 body

123 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; } describes the page’s attributes (özellik): t, r, b, l

124 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

125 Lab: space 125 a:linka:visiteda:hover

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

127 Lab: space 127 Top row of links is center aligned Options: use a,, or group style for h1, h3,.links (already done).links

128 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

129 Lab: space 129 left right

130 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

131 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

132 132 Email used once: email address Color comes from link styles Add appearance of oblique text /* styles for page footer */ #mail { font-style: oblique; }

133 Lab: space 133 Horizontal rules Default style: whole page, left margin We want: width of 50% of page centered in window

134 Lab: space 134

135 Lab: space 135 Horizontal rules: Width of rule is ½ of page ‘margin: auto;’ is centering command on block hr { width: 50%; margin: auto; } center in container

136 Lab: space 136 After link added; still must fix the HTML

137 Lab: space 137 Now, fix the ‘index’ page: save your work; refresh your browser NASA Space Exploration and the Mercury Project by Shirley Johnson [ 1915 - 1957 ]      [ 1958 - 1960 ]      [ 1961 ]      [ 1962 ]      [ 1963 ]      [ Gemini & Apollo ] People in the future may regard humankind's first… NASA Space Exploration and the Mercury Project by Shirley Johnson [1915-1957]      [1958-1960]      [1961]      [1962]      [1963]      [Gemini & Apollo] People in the future may regard humankind's first…

138 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 Exploration and the Mercury Project Cem Çoraplıoğlu

139 Lab: space 139 First three lines centered and fonts updated

140 Lab: space 140 1915-1957 1958-1960 1961 1962 1963 Gemini and Apollo Change these to h2:

141 Lab: space 141 Change these to h2:

142 Lab: space 142

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

144 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 & Apollo sect6

145 Lab: space 145 Dreamweaver MX 2004 creates link as: This is deprecated. Change to: 1915 to 1957

146 Lab: space 146 Add links: link for 1915 is #sect1 [1915-1957] ] [ 1915 - 1957 ] [ 1958 - 1960 ] [ 1961 ] [ 1962 ] [ 1963 ] [ Gemini & Apollo ]

147 Lab: space 147 Add links: repeat for other links (sect2 – sect6) [ 1915-1957 ] [ 1958-1960 ]      [ 1961 ]      [ 1962 ]      [ 1963 ]      [ Gemini & Apollo ] People in the future … [ 1915 - 1957 ] [ 1958 - 1960 ] [ 1961 ] [ 1962 ] [ 1963 ] [ Gemini & Apollo ]

148 Lab: space 148 So far: (links to sections work)

149 Lab: space 149 Link back to top of page; link row

150 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 [Return to Top]

151 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

152 Lab: space 152 Last job; add the images Once picture for each section or paragraph Images are inline, but when added to text, define line-height until floated

153 Lab: space 153 Click before ‘People’ Insert – Images – open images folder select nasa_logo.png

154 Lab: space 154 Select the image Choose class of ‘right’ or add text to image Add ‘alt’ of: “NASA Logo”

155 Lab: space Click left of “In 1915” insert altas_mercury.png Select image and apply style ‘left’ Add ‘alt’ of: “Atlas Liftoff”

156 Lab: space Click left of “In June 1958” insert 7astronauts.jpg Select image and apply style ‘right’ Add ‘alt’ of: “The Right Stuff”

157 Lab: space Click and insert chimp_ham.jpg Select image and apply style ‘right’ Add ‘alt’ of: “Ham the Chimp”

158 Lab: space Click left of “On May 5, 1961” insert glenn_grissom_sheppard.jpg Select image and apply style ‘right’ Add ‘alt’ of: “Mercury Astronauts”

159 Lab: space Click left of “After several” (1962) insert john_glenn.jpg Select image and apply style ‘right’ Add ‘alt’ of: “John Glenn”

160 Lab: space Click left of “on August 11, 1962” insert schirra_splash_down.jpg Select image and apply style ‘right’ Add ‘alt’ of: “Landing”

161 Lab: space Find “manually” in middle of ‘1963’ paragraph. Insert white_eva.jpg and apply style ‘left’ Add ‘alt’ of: “Space Walk”

162 Lab: space Click in front of ‘The Gemini and insert white_eva.jpg and apply style ‘left’ Add ‘alt’ of: “The Earth”

163 HTML: http://validator.nu CSS: http://jigsaw.w3.org/css-validator/ Lab: space 163

164 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

165 Break 165

166 Project Xanadu: 1960 paper, video metaphors limiting and wrong the Internet, new media with new metaphors To date: need to innovate has been stronger than need to develop metaphors 166 A new paradigm (paradigma) http://en.wikipedia.org/wiki/Ted_Nelson

167 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

168 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 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 170 Consistencies with television: juried shows talk shows (“radio on television”): band opening monologue 2 guests musical guest A new paradigm

171 171 Consistencies with books: page margins line height font and font size color navigation element locations A new paradigm

172 172 The book The movie A new paradigm >< =

173 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

174 174 http://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

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

176 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

177 Abstraction (soyutlama): big thing into its pieces Normalizing a database; objects in OOP Lab: making DRY stylesheets 177

178 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

179 Analyze the HTML Lab: making DRY stylesheets 179 Title of Paper First Section Title Lorem ipsum dolor sit … platonem id nec. Second Section Title Ad ius nostro … civibus singulis pri. >Third Section Title Nam corrumpit incorrupte … Hinc ponderum in cum. Agam eius ex vel. >Fourth Section Title Postea maiorum constituto … in cum. Agam eius ex vel. Copyright © Your_Name h1 h2 h3 h4 p

180 Use better elements (separate by function) Lab: making DRY stylesheets 180 Title of Paper First Section Title Lorem ipsum dolor sit … platonem id nec. Second Section Title Ad ius nostro … civibus singulis pri. >Third Section Title Nam corrumpit incorrupte … Hinc ponderum in cum. Agam eius ex vel. >Fourth Section Title Postea maiorum constituto … in cum. Agam eius ex vel. Copyright © Your_Name

181 Chart out the attributes: Lab: making DRY stylesheets 181 familysizecolorlinebackalign bodyArial87.5%#F3F3F3 h1Georgia2.0emred2.5emcenter h2Arial1.5emblack2.0emleft h3Arial.75em#9999991.0emcenter h4center pArial1.0emblack1.6em#F3FFF3left floattoprightbottomleft.leftLeft5px.rightright5px

182 font-family: body cascades to all text Lab: making DRY stylesheets 182 familysizecolorlinebackalign bodyArial87.5%#F3F3F3 h1Georgia2.0emred2.5emcenter h21.5emblack2.0emleft h3.75em#9999991.0emcenter h4center p1.0emblack1.6em#F3FFF3left floattoprightbottomleft.leftLeft5px.rightright5px

183 font-size: each one is unique (define in element) Lab: making DRY stylesheets 183 familysizecolorlinebackalign bodyArial87.5%#F3F3F3 h1Georgia2.0emred2.5emcenter h21.5emblack2.0emleft h3.75em#9999991.0emcenter h4center p1.0emblack1.6em#F3FFF3left floattoprightbottomleft.leftLeft5px.rightright5px

184 color: black is default (define in element) Lab: making DRY stylesheets 184 familysizecolorlinebackalign bodyArial87.5%#F3F3F3 h1Georgia2.0emred2.5emcenter h21.5em2.0emleft h3.75em#9999991.0emcenter h4center p1.0em1.6em#F3FFF3left floattoprightbottomleft.leftLeft5px.rightright5px

185 line-height: define in element Lab: making DRY stylesheets 185 familysizecolorlinebackalign bodyArial87.5%#F3F3F3 h1Georgia2.0emred2.5emcenter h21.5em2.0emleft h3.75em#9999991.0emcenter h4center p1.0em1.6em#F3FFF3left floattoprightbottomleft.leftLeft5px.rightright5px

186 background: define in body and p only Lab: making DRY stylesheets 186 familysizecolorlinebackalign bodyArial87.5%#F3F3F3 h1Georgia2.0emred2.5emcenter h21.5em2.0emleft h3.75em#9999991.0emcenter h4center p1.0em1.6em#F3FFF3left floattoprightbottomleft.leftLeft5px.rightright5px

187 align: left is default (ignore), group center Lab: making DRY stylesheets 187 familysizecolorlinebackalign bodyArial87.5%#F3F3F3 h1Georgia2.0emred2.5emcenter h21.5em2.0em h3.75em#9999991.0emcenter h4center p1.0em1.6em#F3FFF3 floattoprightbottomleft.leftLeft5px.rightright5px

188 Two classes: Lab: making DRY stylesheets 188 familysizecolorlinebackalign bodyArial87.5%#F3F3F3 h1Georgia2.0emred2.5emcenter h21.5em2.0em h3.75em#9999991.0emcenter h4center p1.0em1.6em#F3FFF3 floattoprightbottomleft.leftLeft5px.rightright5px

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

190 Completed page: Lab: making DRY stylesheets 190

191 Add ‘clear: both;’ to h2 style Lab: making DRY stylesheets 191

192 1. The Intergalactic Network was primarily concerned with: A.How the system would be used B.Networking/hardware C.Telecommunications issues D.Software E.End users Quiz: 192

193 2. Project Xanadu was primarily concerned with: A.How the system would be used B.Networking/hardware C.Telecommunications issues D.Software E.End users Quiz: 193

194 3. The metaphor of the Internet is closest to: A.Movies B.Books C.Art D.Science E.Television Quiz: 194

195 3. ‘Hyper’ means: A.Non-sequential B.4 or more dimensions C.Very large, unusual D.Not serial Quiz: 195

196 3. ARPANet is crediting with developing: A.Faster computers B.Category 5 ethernet C.Packet switching D.TCP and IP protocols E.HTTP protocol Quiz: 196

197 4. Tim Berners-Lee WWW system was built on: A.TCP-IP B.HTTP C.SGML Quiz: 197

198 5. The first commercially successful browser was: A.WWW B.Internet Explorer C.Google Chrome D.Netscape Navigator E.Firefox Quiz: 198

199 6. Netscape is credited with developing these technologies: A.HTML B.SSL C.XML D.CSS E.JavaScript F.Cookies Quiz: 199

200 7. Netscape is credited with developing these technologies: A.HTML B.SSL C.XML D.Images in web pages D.CSS E.JavaScript F.Cookies G.Blink Quiz: 200

201 8. Internet Explorer was originally developed by: A.Microsoft B.Netscape C.WWW D.W3C Quiz: 201

202 9. The ‘Browser Wars’ dealt with these problems/issues: A.The monopoly power of the W3C B.Who would run the ISPs C.Bundling of the browser into the OS D.The need for a compatible HTML system Quiz: 202

203 10. One lesson to be learned from the Browser Wars is: A.Microsoft always wins B.Netscape’s browsers were best C.Proprietary systems lose out to open source over time D.The W3C needs to be more powerful E.The Internet wasn’t big enough for both browsers Quiz: 203

204 11. The W3C: A.Manages the Internet B.Works towards building a vision of the future C.Passes regulations with 2/3 of member votes D.Develops recommendations and specifications E.Is dominated by browser vendor companies Quiz: 204

205 12. HTML is considered to be: A.Format poor B.Format rich C.Semantically poor D.Semantically rich Quiz: 205

206 13. The W3C: A.Manages the Internet B.Works towards building a vision of the future C.Passes regulations with 2/3 of member votes D.Develops recommendations and specifications E.Is dominated by browser vendor companies Quiz: 206

207 14. One argument against WHATWG is: A.They are dominated by consumer groups B.They are dominated by browser vendors C.They are dominated by ISPs D.They are dominated by hardware manufacturers Quiz: 207

208 15. Which style rule ranking goes from highest specificity to lowest: A.Inline, external, embedded B.External, embedded, inline C.Embedded, inline, external D.Inline, embedded, external E.External, inline, embedded F.Embedded, external, inline Quiz: 208

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

210 17. The order of preferred use (most to least) of these style rules is: A.Inline, external, embedded B.External, embedded, inline C.Embedded, inline, external D.Inline, embedded, external E.External, inline, embedded F.Embedded, external, inline Quiz: 210

211 18. Identify the parts of a style rule: A.Title B.Declaration C.Selector D.Style rule E.Property F.Value G.Attribute Quiz: 211 #this { color: #F3C; } No such thing color: #F3C; #this Whole thing color #F3C No such thing

212 19. The assumed size for a font that is ‘1em’ in pixels is: A.12px B.16px C.24px D.48px E.96px Quiz: 212

213 20. “float: right;” means: A.The text moves to the right B.The text moves to the left C.The image moves to the right and the text flows around left D.The image moves to the left and the text flows around right E.The page becomes right-aligned Quiz: 213

214 21. In HTML5, the preferred tag for a break is: A. B. C. D. Quiz: 214

215 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

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


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

Similar presentations


Ads by Google