Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ATEC 3361 INTERNET STUDIO

Week 2

RIGHT-BRAIN WARM UP

BUILDING BLOCKS OF WEB PAGES
SEMESTER PROJECT

INFLUENCE VS.  INSP...
.
2
K

LATERAL
THINKING
WARM UP
II. /4‘; TE? 'é‘I T"-: IIII’(. IIiiIfi; ¥Z

; .  Kit . . . .

 

The fish is done frying.  Move two of the four sticks and ...
II. /4‘; TE? 'é‘I T"-: IIIK. IIiiIfi; ¥Z

; .  Kit . . . .

 

The fish is done flying.  Move two of the four sticks and put...
LATERAL THINKING

Can you draw this object in three dimensions? 

 

 

FRONT SIDE
The from indicates that the Small The s...
LATERAL THINKING

 

Here’s one possibility: 

 

Here’s a more elegant possibility: 

 

INTERNET STUDIO Class 2
LESSON IN A
TWEET

7732c-W3‘ (I (III-[fZ’I‘c’/7I‘L’
/25/wceiz (rz'fI(z. I/
1‘/ ;2z'/2/ems‘ mm’ / ‘/.72"/ Ila’/ ‘.I
-zv/30 ...
BUILDING BLOCKS of WEB PAGES
llil-I3lIIE. ’f: i-‘Tia BI_@I: I~’ OIVIIEB 

I — 
l r if HYPERTEXT MARKUP LANGUAGE ’- i i CASCADING STYLESHEET
'7.

i  JAV...
H I HYPERTEXT MARKUP LANGUAGE ‘ S CASCADING STYLESHEET J S JAVASCRIPT

Content. 
Structure

lN‘I'flWET'S'l‘UDIO class.  '2
...
H I HYPERTEXT MARKUP LANGUAGE ‘ S CASCADING STYLESHEET J S JAVASCRIPT

Appearance
Layout

lMTE| WE| "S'| 'UDIO Class ‘2
Km...
H I HYPERTEXT MARKUP LANGUAGE ‘ S CASCADING STYLESHEET J S JAVASCRIPT

Bebavior
Interactivity

lMTE| WE| "S'| 'UDIO Class ...
I I" e V  . 
|"* i HYPERTEXT MARKUP LANGUAGE ' i CASCADING STYLESHEET I‘ ‘ JAVASCRIPT

Content Appearance Be/ Javior
Struc...
WEB DEVELO PER TOOLBAR

 

N. ’-‘ ~ - I E 

,4‘ _§‘I  r-  II  i _‘ if  inf (pf:  
i i .1 I
. m 1 3 _-E .  Q ' 1' , 

Disab...
HT HYPERTEXT MARKUP LANGUAGE

INTERNET STUDIO Class 2
I-. «=: n htnrzm
HT HYPERTEXT MARKUP LANGUAGE

Content
Structure

INTERNET STUDIO Class 2

min Marin: -v
19 mm.  ~ ,1 (t. .,. ..t ‘ ,  (‘A ~ g mm.  - L;  Itntqu - [ -. .-wum:  ~ 0 u'l(rl4.To5‘|  ‘ /  0.. -. '< ‘ /  Inn v z‘ tum...
ontnnn-. |,caauu-fiuts-gr-m-awn-nu Iu-mm--. mau-u-/ omu-[nntu-)1u--ovtc~suu-| |ionuuu-
Duuhlr Slvlos Oublo AIISMM Y’rA

Add...
Content
Structure

Visit csszengarden. com

Disable styles
(option+ O + A)

HTML Only page

INTERNET STUDIO Class 2

Q bum...
’m1.'. x . '.vr-; ’- ~: '

""! lp/ xwwn as 019‘N‘! I)ly’1'3EIZ1103-hypefitll/ 'yp£" I v 0

World Wide Web

'H1c Woddwidcwcb...
Creation 1991
HTM L+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4 1999
HTML 5 under development

 

Tim Bemers-Lee

INTERNET ST...
Content h 1
Structure h 2

I3

Visit csszengarden. com

P.  3. 3
Disable styles
(option+O>+ A) [13
HTML Only page p

INTER...
Content
Structure

Display element

information:  visually
inspect HTML elements on

the page

INTERNET STUDIO Class 2

  ...
Content
Structure

Display element
information:  visually
inspect HTML elements on
the page

INTERNET STUDIO Class 2

9 D-...
HT

Content
Structure

View Source (option+O+U)

INTERNET STUDIO Class 2
Ken Starzer

 
 
  
   
   
  
 
   
    
 
 
  
...
HT

Content
Structure

View Source (option+O+U)

I document type declaration

tells the browser how to
render the code on ...
HT

Content
Structure

View Source (option+<}+U)

I document type declaration

I html tags
code that “markup” the
content ...
HT

Content
Structure

View Source (option+<}+U)

I document type declaration

I html tags

I html attributes (bold)

asso...
HT

Content
Structure

View Source (option+{}+U)

document type declaration
html tags
html attributes (bold)

html attribu...
HT

Content
Structure

View Source (option+{}+U)

I document type declaration
I htmltags
I html attributes (hold)

I html ...
HT

Content
Structure

View Source (option+{}+U)

I document type declaration

I html tags
html attributes (bold)

html at...
HT

Content
Structure

View Source (option+{}+U)

document type declaration
html tags
html attributes (bold)

html attribu...
HT

Content
Structure

View Source (option+{}+U)

document type declaration
html tags
html attributes (bold)

html attribu...
HT

Content
Structure

CSS

ZEN C-ARDEN

‘)3:  t.  ~ «gr: 

I
.  .v AU n

. .uN. i

 

Display Element

 _  dcrlioiulriili...
Content
Structure

Display Element
Information

another way to view
HTML source code

INTERNET STUDIO Class 2

Se. ircr- r...
CS CASCADING STYLESHEET

INTERNET STUDIO Class 2
men htnrzm
CS CASCADING STYLESHEET

Appearance
Layout

INTERNET STUDIO Class 2

min Marin: -v
x’) I-ltullwww »~5~-. v./20:3 

 

C-J‘ " www. (ssz¢ngarcen. mm/ Z14/2l4.(ssN-8lw1a- R‘ _  - Q 7- Q *3 O '
amm - Moslvurcd...
Appearance
Layout

/0
/ o
/ e
/ u

/0
/ e

css Zen Garden default style - ‘Tranquillc' by Dave Shea - http: //vvv. mozzobl...
cs   a 4
Appearance
Layout

CSS file references HTML
tags:  html,  body.  p

nun (
margin:  01
gaddinq:  0:

(ant:  751 qa...
Appearance
Layout

CSS file references HTML
tags:  html,  body.  p

INTERNET STUDIO Class 2

" " " Mozilla Firefox

4?‘ '9 ...
fcontainor (

background:  url(/001/zen-bq. jpq) no-repeat top left: 

flpfearancg padding:  o 175px o 110px; 
margin:  0;
...
CS

Appearance
Layout

External file from HTML

INTERNET STUDIO Class 2

? ‘.I' I‘!  ‘ulfl/ fI'l
CS

Appearance
Layout

    <etyle type-"text/ cu" title-‘currentstylfl uedla-'acreen">

Oimport "/001/001 . cea"y
</ atyle>...
Appearance
Layout

External file from HTML
May reference image files

INTERNET STUDIO Class 2

'r': 

ins ins.  ins. 
JPGI P...
@ntnuo-. |,cuus-)Ims-gron---a| m.. -1u-mma-. mu«. um-/ omu-(mn-¢rno--ou«tam-| ||ouuuu-

    

C

Arrearame 3 C35 ZEN GARDE...
CS

Appearance
Layout

External file from HTML

May reference image files
Edit CSS (option+O+ D)

INTERNET STUDIO Class 2
Ke...
,-— — . ‘ 1
tv C55 Zen Carder.  The 324.. 

 

G‘ F C csszengarderuom «. ' _ B- Q ~” , _ Q Q
BQVl»' — Non Vtsnted ' School...
CS

Appearance
Layout

External file from HTML
References images
Edit CSS

lMTHlNEl"S'l‘UDlO Class.  ‘2
Ken Starzer

. .9 ,...
Appearance
Layout

External file from HTML
References images
Edit CSS

INTERNET STUDIO Class 2

it C55 Zen Carder.  The 324...
.giI'9.': 

3:13;)

   

l)ett'ttt’-xtd (hr . ~ : tnp’r html filg un.1t‘. << file

-) Select 3 Design; 

.  i. .'t< : t.tI_t...
-- . -.-. y)-,   ~-— —~
. - y_,  .—. ,-}, p_/  . _‘_ ‘ y ’ ‘ , 
I -12.”:  
J‘ -= --~*'  x

.  -,  mill

( T/ ‘‘l£| “-ah! ’...
A demonstration of
what am be
aaaornplished uisuafil
thrmgh (X-based
design.  Selzd any style
flute!  from line E5! to
bad i...
CS

Appearance
Layout

External file from HTML
References images
Change look,  without
changing HTML

With one exception,  ...
CS

Apfearance
Layout

 

External file from HTML
References images
Change look,  without
changing HTML

 

The CSS file ea...
CS

Appearance
Layout

External file from HTML  v A

References images
Change look,  without
changing HTML

 
 

The CSS fi...
I i_ESC}¥3II W 

   WAIEET

Separate content from
/ zzyoz. /t. 

INTERNET STUDIO Class 2
LESSON IN A
TWEET

Sepamte [017/L’)? /‘ from
/ zI_V01/1‘. 

  I I T/ I/I L . s‘tI‘z/ ctz/ mas‘

CO NTENT _VOZ/ I“/ D1131’....
LESSON IN A
TWEET

Separate content fro/22

/ nyoz. /t. 
  H TML . s‘trz/ ctz/ res  
CONTENT ~V°”"/ W‘ LAYOUT

C S S fly/ ‘...
JS JAVASCRIPT

INTERNET STUDIO Class 2
men . ‘IIfl(7.I'. 'l
JS JAVASCRIPT

Be/ .7a= vz'or
Interactivity

INTERNET STUDIO Class 2

min 5IJr7I? I
Bebavior
Interactivity
Visit . .rr1ar>. s_-9.<. >.c2.¢L| e,. .c. <_>. r_n

INTERNET STUDIO Class 2

9 Disable ' L Coo’-ues...
.9 Disable - ‘ Cook. “ -  CSS - .  fovms ' E] Images ‘ I Inlovrrulion - .  Miscellaneous ' / ' Outhnc ' I

U .  G Plugins ...
JS

Bebavior
Interactivity

Don't reinvent the
whee| :JavaScript
libraries let you hit
the ground running

mootoo| s.net

...
/1 7_lE‘‘‘‘’‘~’‘it' law A

'""ir ‘ri ",  ,. “". ,""“"°
  WEET
jcz-vcIScript /22‘z'1zgl‘
extra / E// zctio/ m// ty to
n 'I....
t F‘ ' .  (-
,  I I HYPERTEXT MARKUP CASCADING  JAVASCRIPT

V LANGUAGE ,  I  STYLESHEET

INTERNET STUDIO Class 2
HYPERTEXT MARKUP CASCADING
HT LANGUAGE CS STYLESHEET  ’AVA5CR'PT

Content Appearance Behavior
Structure Layout Interactivi...
HYPERTEXT MARKUP CASCADING
HT LANGUAGE CS STYLESHEET  JAVASCRWT

Content Appearance Bebavior
Structure Layout Interactivit...
HT HYPERTEXT MARKUP LANGUAGE

INTERNET STUDIO Class 2
men . t. tr7.r. ~r
HT HYPERTEXT MARKUP LANGUAGE  

Content
Structure

INTERNET STUDIO Class 2
men §Inr7.l'. 'l
HT

Content
Structure

View Source (option+<}+U)

document type declaration
html tags
html attributes (bold)

html attribu...
Content
Structure

i— start lag —: 

<tag name>

INTERNET STUDIO Class 2
Content
Structure

i— start lag —: 

<tag name> content

INTERNET STUDIO Class 2
Content
Structure

i— staittag —:  l— endtag —: 

<tag name> content </ tag name>

INTERNET STUDIO Class 2
Content
Structure

i— staittag —:  l— endtag —: 

<tag name> content </ tag name>

A element

INTERNET STUDIO Class 2
!= — startlag —:  i— endtag —: 

comm;  <tag name> content </ tag name>
Structure

A element

line 56 <h1>css Zen Garden</...
Content
Structure

fine 61 <abbr tit1.e= "Cascading Style Sheets">CSS</ abbr>

INTERNET STUDIO Class 2
t i it ‘ll =
Content
Structure

fine 61 <abbr 1:it1e= "Cascaclittg Style Sltee"cs">CSS</ abbr>

INTERNET STUDIO Class 2
Content
Structure

start lag

fine 61 <abbr tit1e= "Cascatlittg Style Sltee’ts">CSS</ abbr>

INTERNET STUDIO Class 2
Content
Structure

start lag

fine 61 <abbr tit1e= "Cascatlittg Style Sltee’ts">CSS</ abbt-*>

INTERNET STUDIO Class 2
Content
Structure

starting T:  send tag-: 

fine 61 <abbr tit1e= "Cascading Style Shee”cs">CSS</ abba-*>

INTERNET STUDIO ...
Content
Structure

starting C:  send tag-: 

fine 61 <abbr tit1e= "Cascading Style SI1ee”cs">CSS</ ebb: -*>

INTERNET STUDI...
Content
Structure

content
starttag T:  send tag-: 

fine 61 <abbr title= "Cascading Style Sheets">CSS</ abbr>

INTERNET ST...
Content
Structure

content
starttag T:  rend tag-: 

fine 61 <abbr title= "Cascading Style Sheets">CSS</ abbr-*>

INTERNET ...
Content
Structure

content
starttag T:  rend tag-: 

fine 61 <abbr title= "Cascading Style Sheets">CSS</ abbr-*>

e element...
Content
Structure
content
starttag end tag

element

INTERNET STUDIO Class 2
Ken Starzer
HT

Content
Structure

content

zstzm  end tag
re atlnbute er

5.
(D
C1
| —‘
/ 
no
:3‘
9'
8.
V. ’
1;
V

INTERNET STUDIO Cl...
Content content

S’”"’”"’ starttag C:  2-endtag-: 
»j attribute -
: —— value

fine 61 <abbr title= "Cascading Style Sheets"...
HT HYPERTEXT MARKUP LANGUAGE  HTM L

Content
Structure

INTERNET STUDIO Class 2
men §Inr7.1?l
luthtml

Cl071f€7’ll‘ <! doctype html)

< )

Structure < >

charset= "utf—8“>
>Hy First rrebpage</ 

< >Hy First hIebpage<...
< !  doctype html>

Content <lIt| I|'l->
Structure <head>
<meta charset= "utf—8“>
<title>My First webpage</ title>
</ head...
< !  doctype html>

Content <l'It| |Il. >
Structure </ html>

INTERNET STUDIO Class 2
Ken Starzer
< !  doctype html>

Content <lItI| I1>
Structure <head>
</ head>

</ html>

INTERNET STUDIO Class 2
Ken Starzer
< ' <3.= ;><: ’iy; :e.  7T’: ":: ‘.= ;:: »

Cbnumt <html>
Structure <|1ead>
<meta charset= "utf—8“>
<title>My First webpag...
Content
Structure

<title>My First webpage</ title>

INTERNET STUDIO Class 2

ll1|'. ,lv
Content
Structure <head>

<meta charset= "utf—8“>
<title>My First webpage</ title>
</ head>

INTERNET STUDIO Class 2

? ‘....
< !  doctype html>

Content <lIt| I|'l->
Structure <head>

<meta charset= "utf—8“>

<title>My First Webpage</ title>
</ he...
< !  doctype html>

Content <lIt| I|'l->
Structure <head>
<meta charset= "utf—8“>
<title>My First Webpage</ title>
</ head...
< !  doctype html>

Content <lIt| I|'l->
Structure <head>
<meta charset= "utf—8“>
<title>My First webpage</ title>
</ head...
tags you know
<! doctype html>
<htmI>

Content

Structure <head>
<meta>
<tit1e>
<body>
<h1> heading 1
<p> paragraph
<! — c...
ll'Fl_lsIEllt3iE VS lilSi3li°’i‘fii' ON:  ’@= tJR
P EEZT

INTERNET STUDIO Class 2
Il'Fl_l: JEIl€: E 

INTERNET STUDIO Class 2
Hrvie Srrcn 5ll‘['’. r.'

LPGALILHV viw.  Au cnuxnhvs HAYLJHKO H)5Il. JN'

 

Mugged

I An Arllur

 

Featured Showcase:  ...
THE DIFI INF TVE DIEI INF WINF THE DIFLINF AWARDS THF DIEIINF CONFERENCE

I I
fi  W V the worlds #1 package design website
...
I

CSSMAN A

LATEST UPDATES (LOOKING FOR COLOURS)

_ .  .. T
. . __r
(I 

r-H-u-—-AI--an-an
Wham

 

0 Salim Rahman ;  U T...
ax Subscfibe V Find 'AI-rlclcs ‘ Logos l1lu_-itralians ‘ Websites ‘ Business Cards 4 Photos ‘ Patterns - Fouls

5 I’7m‘TL: ...
What are you working on?  DnDb": >?e IS show and 1e I for creatwes.  Sign up as a apecunom

POPULAR HIGHUGHTS

 

EVERYONE...
l’(‘l1II| gl1llll

Quid:  Llnls

Hm-~,  Pearce as Sam.  at
AICA/ NV

A Cu:  0' Cr. vI|4:4: -. :~ Eco: 
Opuu

tutu-II.1yn: ...
IEEIVI IS

INTERNET STUDIO Class 2
VLOCK

bit. l/hA225l

INTERNET STUDIO Class 2
‘~ v H ‘II ‘: ',‘r:
Pentagranfsjames Bib: -r's redesigned Starbucks logo
~—— not used

 
 

197!

NET

STARBUCKS     

bit.  I/  eQNTX

 

INT...
Life    

 
 

who D: -r. .-; n
any-f» -up
u. ... ... » . ., p. ..». y v . .., 
rm:  um , -
__. _M, ", N| IMm| Iv. »4v
Dvw...
RAINBOW IN YOUR HAND ’

masa-ka. com/ htmUrainbow. html A

INTERNET STUDIO Class 2
LESSON IN A
TWEET

77.75 . x'0/1/2‘/ an you
m~‘zzfu is 0/2/_ 1/ as‘
. s‘fr0/lg ax Z‘/ .78 / >20/2/5//1
yozz '-2'5 (/ é"/ T...
Influence / Jappens

7.0/Jen you’re looking

for it. 

Inspiration / Jappens

7.0/Jen you’re not. 

INTERNET STUDIO Class 2...
INSPIRATION
. ..I$ different for everyone
. ..g: an't be scheduled
. ..I$ elusive
RATIO I
.  ,. }.: . , 
.. .IS E‘zI'I'I'€i'<-2i‘I'I' ror eve I"y0i"I8.

7738/7 a'on’1‘ worry (I/ )0]/ Z‘ -w/ am‘ ~wo2'/ <5‘...
INSPIRATION
. ..can't be Scheduled. 

77.75/2 ironic. ’ 015)/ >oI‘f1// zifias‘ fo 1'/ It/ ‘czI_s‘c yo; /7‘

c/ .7mza’. s‘ ...
INSPIRATION
. ..| s elusive. 

77.78/I / _7(l‘Z’(’ (I /9/an fo (‘(1/51.‘/ /I1’ if. 

INTERNET STUDIO Class 2
I21‘ I’!  ,uI...
IPAD SKETCHBDOK

5.1;.  malts -: c~rv~

 

E
W
K
S
E
0
M

FIELD NOTES MEMD BDDK

EDWARD TUFTE GRAPH PAPER

4 . -52.. ... .
LESSON IN A
TWEET

I/ g//1/U/ Ia’ 2'5 /7o2‘2‘o‘uw/ ,
/ "m/ >z'mf1'o/ z ix m/ vim’. 
CIFIIXL’ 0/J/ >o2‘f1/zzif/ "ox
fo M/ ‘...
Upcoming SlideShare
Loading in …5
×

Presentation 9 8

13,543 views

Published on

Presentation 2 of ATEC3361

Published in: Education
  • Get the best essay, research papers or dissertations. from ⇒ www.HelpWriting.net ⇐ A team of professional authors with huge experience will give u a result that will overcome your expectations.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Don't forget another good way of simplifying your writing is using external resources (such as ⇒ www.HelpWriting.net ⇐ ). This will definitely make your life more easier
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Longest and best orgasms ever, I love it. And she thinks it's hot, a real turn on for both of us ◆◆◆ https://tinyurl.com/semenax101
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Presentation 9 8

  1. 1. ATEC 3361 INTERNET STUDIO Week 2 RIGHT-BRAIN WARM UP BUILDING BLOCKS OF WEB PAGES SEMESTER PROJECT INFLUENCE VS. INSPIRATION ASSIGNMENT INTERNET STUDIO Class 2
  2. 2. . 2 K LATERAL THINKING WARM UP
  3. 3. II. /4‘; TE? 'é‘I T"-: IIII’(. IIiiIfi; ¥Z ; . Kit . . . . The fish is done frying. Move two of the four sticks and put the fish outside the pan (while retaining the pads shape). INTERNET STUDIO Class 2
  4. 4. II. /4‘; TE? 'é‘I T"-: IIIK. IIiiIfi; ¥Z ; . Kit . . . . The fish is done flying. Move two of the four sticks and put the fish outside the pan (while retaining the pans shape). Answer: INTERNET STUDIO Class 2
  5. 5. LATERAL THINKING Can you draw this object in three dimensions? FRONT SIDE The from indicates that the Small The side view tells ‘us that it is a hole. rectangle inside the large one is And that the h°IC 15 3 510‘- either a projection or a hole. INTERNET STUDIO Class 2
  6. 6. LATERAL THINKING Here’s one possibility: Here’s a more elegant possibility: INTERNET STUDIO Class 2
  7. 7. LESSON IN A TWEET 7732c-W3‘ (I (III-[fZ’I‘c’/7I‘L’ /25/wceiz (rz'fI(z. I/ 1‘/ ;2z'/2/ems‘ mm’ / ‘/.72"/ Ila’/ ‘.I -zv/30 are I‘2'z'/ ,‘z'vrI/ .' one . s‘0/-Empro/9/t’/ /1.x‘, f/ .78 0/E/ am‘ I‘I‘mfc. s‘ f/10112. INTERNET STUDIO Week 2 I‘. I' I‘! ‘II«‘. ’i'I' I
  8. 8. BUILDING BLOCKS of WEB PAGES
  9. 9. llil-I3lIIE. ’f: i-‘Tia BI_@I: I~’ OIVIIEB I — l r if HYPERTEXT MARKUP LANGUAGE ’- i i CASCADING STYLESHEET '7. i JAVASCRIPT INTERNET STUDIO Class 2
  10. 10. H I HYPERTEXT MARKUP LANGUAGE ‘ S CASCADING STYLESHEET J S JAVASCRIPT Content. Structure lN‘I'flWET'S'l‘UDIO class. '2 Km Starnr
  11. 11. H I HYPERTEXT MARKUP LANGUAGE ‘ S CASCADING STYLESHEET J S JAVASCRIPT Appearance Layout lMTE| WE| "S'| 'UDIO Class ‘2 Km Starter
  12. 12. H I HYPERTEXT MARKUP LANGUAGE ‘ S CASCADING STYLESHEET J S JAVASCRIPT Bebavior Interactivity lMTE| WE| "S'| 'UDIO Class ‘2 Km Starter
  13. 13. I I" e V . |"* i HYPERTEXT MARKUP LANGUAGE ' i CASCADING STYLESHEET I‘ ‘ JAVASCRIPT Content Appearance Be/ Javior Structure Layout Interactivity INTERNET STUDIO Class 2
  14. 14. WEB DEVELO PER TOOLBAR N. ’-‘ ~ - I E ,4‘ _§‘I r- II i _‘ if inf (pf: i i .1 I . m 1 3 _-E . Q ' 1' , Disable ' Cooknes ' CSS ~ Forms ' Images ' I'I‘orm: It«on ' Vlnscelaceo. -s ' 0-: N: - Res II 1.4 . . K‘, . 4 «All Styles sees J } . I / I View CSS 360C . _ ' ~_. J} T / 1 FOR MOZILLA FIREFOX INTERNET STUDIO Class 2
  15. 15. HT HYPERTEXT MARKUP LANGUAGE INTERNET STUDIO Class 2 I-. «=: n htnrzm
  16. 16. HT HYPERTEXT MARKUP LANGUAGE Content Structure INTERNET STUDIO Class 2 min Marin: -v
  17. 17. 19 mm. ~ ,1 (t. .,. ..t ‘ , (‘A ~ g mm. - L; Itntqu - [ -. .-wum: ~ 0 u'l(rl4.To5‘| ‘ / 0.. -. '< ‘ / Inn v z‘ tum - 0 u-v. s.u. .vn - m Oahu": - Content . 4" l E ‘ u . ‘ I ‘ Structure ~ ‘[71; ifgrslqg-29"” ‘:4: ’, '.. y]_q/ Visit S; S§Z_EDfl,3!'. d_€fl-.6911! ' A demonstration of what can be . 'tccontpIisItcd through (LS5-based design. Select any sly]: - sheet from the list to load it mto this page. Download the example and THE ROAD TO ENLICHTENMIENT I. m-: _ng: £lr1£: '<1'¢z§xsm-. To'x'l | _ ‘4 I - , ! um. »-bvo'>; rm. Mu on It-I: tndv um‘ ' I ' Sp i_l_r_| fill lcltct cfbrowscr-spectftc tags. tncompanble L'nwM7—. '.s. We uh I; av r‘; :)_i'; V"f‘lt ‘fit The: 2%; . rn. u:~n Iicmn to . rr wtth r. .1rt'. y. Lr Wm In no (hv: L UR‘-l'l()Xl()r(‘(l lt*<'hntqut-. tn new . - if ‘:2’: -:'im‘. ’.-J--1;: F. -.. -l! *:€<-. -r-. . '!f‘ -. -14:-‘: .-. 4 J mr FIILUOT browwr rrmtors. , ,. .;. §.§Iv; ." 7%, ,‘ 7- fl gt: FA ml rttrntttcnt has been . l(hIt‘V(‘(l thzmks to thr rm-5-«. '1 Jtt: .1" [mr<lt: ;tt¢' on the tmporlant lessons of the Q0 / /HAT IQ THIC AROI IT7 "'5 / INTERNET STUDIO Class 2
  18. 18. ontnnn-. |,caauu-fiuts-gr-m-awn-nu Iu-mm--. mau-u-/ omu-[nntu-)1u--ovtc~suu-| |ionuuu- Duuhlr Slvlos Oublo AIISMM Y’rA Add User Style Sheet. .. {Mable Browser Delault Styles Display Style lnlomutlott VOV Disable Embedded Stvlu Display Styles Dy Media Type > Disable Inlinc Styles _ usable United Style Sheets Edit CS5 OD _ [cloud Ltnltod 5ty1¢ Shoots {Mable Mm Sryln Use Ioldu Io: Model View CS5 Disable Individual SM: Sheet Visit csszengarden. com Disable styles (option+ O + A) A demonstration of what can be accomplished through CS5-based design. Sclcct any style sheet from the list to load it into this page. Download the example ! and 1 THE ROAD TO ENLIGHTENMENT Littering a dark and dreary road lay the past relics of browser-specific tags, tncompauble DOMS. broken CS5 support. and abandoned browsers. We must clear the mind olthe past. Web enlightenment has been achieved thanks to the tireless elTorts of folk like the W3C, WASP. and the major browser creators. The CSS Zen Garden invites you to relax and meditate on the important lessons of the mastrrs. Begin to see with clarity. Learn to use the timt-—hunurcd techniques in new invigorating fashion. Become one with the web. <0 / /HAT IQ Tl—l| § ARDI IT7 INTERNET STUDIO Class 2 Ken Starzer
  19. 19. Content Structure Visit csszengarden. com Disable styles (option+ O + A) HTML Only page INTERNET STUDIO Class 2 Q bum - 1 (oc~¢t - 1 cs: « fi It>'W‘l - ‘:3 «mm: v [ Mtorrralar - 1*. M-scl-‘. 'VI(ou ~ / 0.: re - / fit-size - / Yooii - 0 V-‘E-v5t>. iv<E ' ill Dot: CS8 Zen Garden The Beauty ofCSS Design A ikmntistruiur. (it what can be accomplished through CSS-based Llcsign. Sclcct my style )l'll. ‘L'l {mm the llil to load it into U113 page. Download the eumpic ‘ ‘mi lllt‘ and tn 3-'- The Road to Enlightutmenl lJ| YL'ntl_L' I slut and dreary mid l. iy lhc p. i~t relic: ulbmsucrwpecilic tags, incompatible D0.VlI. brulen (‘SS support. and iibiii-iduncd bmwscn. W: mm: i: Ic. it lht‘ rii nil ntttie p. «'. . Web enlightenment has been fl£h)C1Ed th. iiilit to the tirelcu cllurls M lull. like the W3C. Win53‘. and the major bmwitcr < The CSS Zen G. in2(r. ln‘ltCI you In reliu and mcditiitr nn the imtmrunl lemons of the m1s". cn. Hcglri in set: with cl. inty. Leam tn uxc the time-hnnnmd tccr So What Is This About‘! Then: Li 1 : r~r. t.. ~iiini_: rwed to show the pmwr ofCSS. The Zen Garden . Ilt'l'I‘ to excite. |I‘. ;9|lt. <1lld encourage pamcip-. itioii. To begin. View some at the ¢l| (hit very ; v.ir_r: The HT. ll. remains the same. the only tlimi: that hlh changed it the extcm.1lCSStlle. Yes.1enJly. CS5’ Al: Il um lctt‘ ind total cuntml our the )lVl(‘ or n hyprm-itt iiuciimvnt The only wly Ehll can he illuxtntrd in I wny Ih. it get: people Eltlltd ll by di- llluw mic In uni: hunt) from nini. -iim-. Dcxiitiirn and uidciii alike luv: ucititritmtvd In the hr. -my til the vu-b. we can itlwnyn push it {Ul'| lK'l' Plrddpatlon Stmrir IU. Il tktiyn Pm zlWl| y been our llK'u You an mudilying ihit pnitr. 0 stniriy CSS xltillu . inc ncv; cu. :ry too. but the example liln iur cniiiiiit-med - act‘ the (‘ H 1.‘ '- tur ndiiiiuc-l tutiirinlx . inti tip on working with CSS Ymi . ~.iy modily th< (_l‘ mm in my w. iy you with, but rnt the HTML. Thu nuy wt-rn d. iuntitiy ill lint it you've never wiirkcd tlin may bclure. but itvllm Dounltud the umplc lll‘-ll. and C5 in work on I copy bully. Once you have completed ynur mnterpiccc (itnd plcnsc. don'l submit hiill-linnhnl wurlt) in xchivc of 13.1! lIl(' mil . iiI nuoc; .itcd llCl! .JD|1ll( choose to use it we will dew niu. id ii and place it on our xcrvcr. Benefit: Vniy pi. -tici; i.ii: ? F-at i’O. ‘l§‘, nIll(rI. |r1pll’. I[lm1.. A!Id I l'(Iulfl' we em all nrlrr In h0Wflf, peoplc how iimalinyt CSS nu-illy can equal p who will be ttiniurmv-. and gallery -it tuturi: l((hnlq| .E we can llll look lorwiud In / ' Requirements ‘ J ‘ u- _‘, .- I V1icr: p0<n‘. blC, Vht would like to sec mostly CSS I 5:. 2 usage. CSS 3 St J should be limited In wtdclyuippcrlcd elements (mi, wnouldl
  20. 20. ’m1.'. x . '.vr-; ’- ~: ' ""! lp/ xwwn as 019‘N‘! I)ly’1'3EIZ1103-hypefitll/ 'yp£" I v 0 World Wide Web 'H1c Woddwidcwcb (W3) : 3 vs Idc-Ame hvx‘n'.7-_-x‘ -. to a Luge ur. n'ct. c of documents. : n."orrr. ‘:uon :1-Lnc': :I 11-. :u: x:nc axrmng to gnc unxvcrsal access E'cr)1hing there is onhnc about W3 is Imkcd dimcdy or indimcdy to this document. includmg an cxccuuxc . ~.: :zr. ;;_ oflhc pmpct. .I ' '. ‘1[. s , Pc'. ;.. ' . .'o‘cmhcrs W3 new 5 , Fr». ucniix . -hhcd E‘1(ls-' '¢1t‘C~‘_7 POu1.I: I'S! L) the world‘: onhnc infor! r_a'. inn_i, c;L~ . ’3 &‘! 'C1'! .CKC. on me browser you are using Sofnx . ;.'-: A us: of W'3 prupct components and their an-mm state. (c. g‘ Jill _’; -.‘-I: . ’; X 1 32:2 . Sgnr . To-3!» . .! :1rrbo: .L: *_~m. ') ) _E1;)a’. d0CuI‘mnl. 'x1ion on W} and rtfcrcnccs. A list of some people involved in that project. H: xt.7r3 A summary oflhc history ofzhc pmjccn H9"-« _. cjg 7 If you would lie to suppon the -wt-b_. cud; Gcmng the code b, ;. 3.: _, n;: ;:_E[E .605. bit. |y/ wwwhistory One of the very first web pages (November 3, 1992) INTERNET STUDIO Class 2
  21. 21. Creation 1991 HTM L+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4 1999 HTML 5 under development Tim Bemers-Lee INTERNET STUDIO Class 2 : ~ v n ‘. I,': ’,‘rx
  22. 22. Content h 1 Structure h 2 I3 Visit csszengarden. com P. 3. 3 Disable styles (option+O>+ A) [13 HTML Only page p INTERNET STUDIO Class 2 css Zen Garden: The Beauty in CS5 Design http. //csszerigarden. <om/ Q . ..-' ' ‘C’-I ‘A-’; _._ll_. ~ D: sa: :e ‘ ‘ Coo‘-tic-5 ' CS5 ‘ Forms - W-ages ' mtorrrtition ' ‘As<e| .‘. -eons - 0.: re - Res-ze ‘ css Zen Garden The Beauty of Design A demonstration of what can be accomplished visually through _C_§§_-based design. Select any style sheet from the list to lo: Download the sample t1;tni_t'Lle and §: §_ll. l£I The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags. incompatible _[V)OV. /ls. and broken CS_S suppon. Today. we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk and the major browser creators. The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Let be) Lime-honored techniques in new and invigorating fashion. Become one with the web. So What is This About? There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite. inspire. and cnoout-. begin. View some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The ct the only thing that has changed is the cxtemal . css file. Yes. malty. CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way excited is by demonstrating what it can truly be. once the reins are placed in the hands of those able tiytebeauty from s examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers hav~ . Qeir mar change. . _ . . . V , I ‘v if I
  23. 23. Content Structure Display element information: visually inspect HTML elements on the page INTERNET STUDIO Class 2 Q5,_, :., .‘¢o¢. ¢,. ,;5,. iyWl, -~; _,= m-. m.» 'l"lI <(fiUv4-’I'. ‘ll‘-. "l - [mu 0. D wI. Iv Anavrv-mom CSSZen D1D| .wA(cen| (cvs D s: I!: vK-«hots D splay ARIA Qolu The Beauty ofCSS Design 0 , ,.. , 9.. 0 mnsnom D snlay Dw Ovdev A dcmonsxnuar. of mm: (21.1 bu: accomplxsllcd Ihmugh CS5-y - - ~ ' 5'7"’ "' ‘I: II»! to lo-‘J It nil-1 llm II-Ir: D sauy II: A Class Denna Dounlmd mt : umpIc“mfll1rand ~~ 3"‘ o 591;, Lu-.3 Dam; 0 mm Dblen lnlor-mt-on The Road in Enlighlunnenl D splay Srau Lave» D splay Tab Indu lglu-nn_: I an -Ind dxnry mad l. Iy lhc pm n-ht: ulbmwsc D Sflljy nble Deplh D splay Tnble lnlomuhon ‘ V W: mm: I: lc. u lhl‘ m m} nllht‘ p. q'. . Wcb rnlughlcnmcnl has I 9 ml" 7,”, MWDU, “ of loin. lm: '. .“. c '. ‘C. . :SP. and '1»: mqor brow-per E 0 solar ToD09raph‘( lnlovmanon I’ ad Duolnze Ids 11 CSS suppxi. and nltandoucd luvuscn. The CSS Zcn mum. ln‘llc you In n-lu and mcdnnlr on In 0 sec huh Cllnf) Lum In u-c mg urn: -honomd Inch So “hat [3 This Ahmt? Vuew Anchol lnlarrralcon V-cw Color lnlorrnauon Then: Li 1 . 'r~r. t.. ~u; nI: rwcd lo ‘hm: um pmwr ofCSS. Th: 2 V-cw Dc-cumenl Oull-nc )u. '2;: p. mIcxp; .uon. To btgin, -Ira some ohhc cxis (hn vrry ; v.Ir_I: The MT. I1. rcm. uns lhc umc. (he only lhulr V-cw Do(um¢Dl Sue (u. really. V-cw Jq. uS<naI '0J CS5’ Allmu um Iclr xm! mu! cunlml mrr lhr uylc 0! a lay] V, " Lmk | ,,a°, ,,, a._, °,. , : Illuslrdltd u_ Lha: gm ptopk‘ cxtm. -d )3 by dc mus: mic In uni: h<. Iul) from nlruclun-. Dcxumrn And us my we“ 1,9 gnyomamn "Int “Ch; Me n ; lu_-5 pukh ll fu. -(. ".tr, View Page lnlorrnano-I Plrtldpatlon V-cw Rtsoons: Headers Slnmr nuul nkuyn Pm zlwIIy hcrn our luau» You an mudnlylng ! hI pnytr. o slnxny CSS xlullu . mc ncu~u. :ry loo. bul Inc cnmplc llln are cmmnrmrd - an‘ ‘hr (‘ H l. ‘ '- fur ndI. :n. ;cd lu'I)n. Il and hp on uotlnnx wnlh CSS Yum . ~-.1) muddy lh< (_lc | h(‘(‘l In my may you wuh, hul rm Ihc HTML. Thu nuy “Tm daunmw nl llm If you've nrvct wurkcd lhn may bclurr. but lnllm Dmnzllud mu: umplc HI‘-ll. Am! C5 In work on I copy bully. Dnrc you hm‘: mmplclcnl your mnusrpnccc (Imd plcxuc. don'l submll hull-llnnlvnl work) 1.1 xchnc of tux lIl(' Ind . IlI nuocmcd um-ls. and If xx: choosc In use ll we vull dour nlu. ul u and plot: IKOI1 our xcrvcr. Bentfiu V011) pJ. 'T| CI{Ll! .". ‘ F-at rn; np, nmnn, Insplmmn. end I n-mutt: wt an all nrlrr In showmy, people how umallng CSS Ivally can cqual p «ho wll be mmurmv-. and gnllcry ul lumrr ltchnlqhn u: can nll look {orwud In / ' Requlnmmu ‘ J ‘ u- _‘, .- 1 W110: p-: ><w. blc, vn: would llkc Io sec mostly CSS I . & 2 usage. CSS 3 5: J should be llmucd ID wndclyunppcrlcd clcmcnts (ml, wnouldl
  24. 24. Content Structure Display element information: visually inspect HTML elements on the page INTERNET STUDIO Class 2 9 D-ulxt - ‘L Cook-n » / css - i Volrvu - HI I. -r. l1e - 1 I-'lt. in-aliur - 1’. VvI(-larva. ) ~ / on m - / no.1: - I ‘am - 0 VrwSu. i'u - m opnm - Qweuomioae. CSS Zen Garden The Beauty of CS_§ Design A dcmonstniuon of what can be accomplished through CSS«hased design. Select any style sheet from the 1:»! to load it into this ptigc. Download the example html_ltL; and L: }, _l| IC "l‘liFRb? £l as Enllihltfill Linlning I dart and dnzary mad lay the past relics of bmwscr-specific tags. "incompatible D0._ls. hmlu: n CSS support. and tihandoncd hmwncts. We must clear the mind of the past. Web cnliglitcnmcnt Int) been achict-ad thanks to the timlcss cflorts oflolk like the W3C. WASP. tind the Ituijor DIOWKI‘ creators. The CSS Zen Garden invites you to relax and meditate on the important lessons ofihc masters. Begin to so: with clarity. Lcam to use the time-honorod Icchtiiqucs int So What Is This About? There is a conunuing need to show the povucr of CS5. The Zen Garden aims to excite. inspire. and cncoumge participation. To begin. View some of the citisurig dcsigi this very page. The HTML tvcmains the same. the only thing that has changed is thc cittcninl CSS file. Ycs. really. CSS allow! complete and total control ovcr lh: stylc of: hypertext dmumcnt. The only way this can be Illustrated in I way that gcLs pcoplc cxcitcd is by dcmnriunttt Element lnlon-mt ion DOM Layout (ow role-‘article’ id-’: eri~pr«-c—olc" class-'crr-anole"> l‘Elg’t: lzsox; «tum H3391; </ div> Position Text / — dtaplcy: block; tant-to-wily: ' . ,1 . ‘ ’ . - 25.’; /
  25. 25. HT Content Structure View Source (option+O+U) INTERNET STUDIO Class 2 Ken Starzer <l&. “I'YPI’ htlJ> Gin! lug-'cn'> Gab tin aha-not-‘nit! -l"> <uuo>csa Ion Garden: ‘nu Ioulty of C88 DoI1qn</ “€10 «link :01-'sty1o| hoct" nth-"Icroon" In! -' 21lI214.can1v-ha 2013'> <1L| h ml-'|1uzmu' typo-’upp1Lcnt£on/ rnu>: I.I. ' title-‘IE8’ Il. 'Of"| 'h£2l/ lUlV. Ol in I: -'v1.ovpor¢. ' outfit-‘width-darken-width, initial-nculo-1.o'> tn I1-‘author’ accent-‘Dave 8hoq'> tn I1-‘description’ accuse-‘A bmnotntion of that can be noezlluhod V1 in I: -‘robots’ outfit-'A11'> <l--(it 1: II’ 91> <u-rip: un': - ‘script / bcnlsnbiv. jn '></ script» <l[oadi! )--> </ hub <I-- View source in I lecture, not a bug. Thanks for your curiosity and Intlfllt in pnrticipuingl Doro an the auhlooiou guideline: to: the now and ifirovod cnasoogardonaxnn C883? 0! con: -lo! Prefix for ALL browser: when nooooury. go rupoaninp cut your layout at nuleipln ICIOOD Jinn. yout brovlor coating baseline: I894, neon: Grant/ Pitofox/ safari, and ix/ An: Grncolul dogradauon in ocoqtablo, and In tact highly oueourngod. uu cluaol for styling. Don't use lb. nub loan an cool, just lake turn you ban I license to than the (1100. Ion union that are applied via the G8 £110 (10. Googlo Panel) will work (inn, coat that toquln cuum I911. won't. zypuuc in nnpporcod, not the not on I PO90 lot uaago instructions: beeper/ /g1ehub. ccn/ nusoblno/ cu coal Illlll And a low tips on building your C88 (110: —
  26. 26. HT Content Structure View Source (option+O+U) I document type declaration tells the browser how to render the code on the P399 INTERNET STUDIO Class 2 Ken Staner <! &.“)'YPI’ hen» Gill. lug-'on'> Qoob {to olu-not-‘nit! -I’> <uuo>csa Ian Gordon: ‘rho Ioouty of C88 Do|1qn</ tin» <l. lnl :91-'etylo| hoct" Q11:-‘Maroon’ inl-"/21ll210.con? v-hng2013'> <l. L|h ml-'|1uzmu' typo-’uppl1ut£on/ rental’ title-‘I38’ Ito! -‘lug: /[IMv. o| <-u I: -'vLovport. ' oontut-‘width-dovloo-width, lnltinl-oculo-1.o'> tn I1-‘author’ accent-‘Deva 8hou'> tin I1-‘description’ cause-‘A hmnotntion of that can be nooalluhod vi the I: -‘rebate’ outfit-'n11'> <1--(1: 1: II’ 91> <u-rlpt un: - ‘script / henlsnbiv. jn '></ script» <I[oodi! )--> </ hub <I-- View source in I lecture, not a bug. Thanks for you: curiosity and lacunae la purciclpetlngl Doro an the auhlooiou guideline: to: the now and ifirovod cnasoogurdonaxnn C883? 0! coo: -lo! Prefix for ALL browser: when nooooury. go rupoanlnp cut your layout at nulciplo ICIOOD Jinn. yout brovlor coating baseline: I894, nncont Caron: /Pltofox/ safari, and lw/ An: Grocolul dogradaelon in ocoqtablo, and In tact highly oueourugod. uu clause: [or styling. Don't use ids. nub loan on cool, just lake turn you how I license to than the lilac. lost union that no applied via the G8 £110 (10. Googlo Panel) will work (inn, coat that toquln cuum Hill. won't. zypuuc in nnpportod, not the not on I PO90 lot uaogo instructions: beeper/ /g1ehub. oon/ nusobluo/ cu oon/ IIIIII And a low tips on building your C88 lilo: —
  27. 27. HT Content Structure View Source (option+<}+U) I document type declaration I html tags code that “markup” the content on the page INTERNET STUDIO Class 2 Ken Starzer <l&. “)'YPI’ htl. l> 0&1 lug-"en"> <heel> its ole: -set-‘int! -I'> <tit. le>c88 ten Garden: The Bounty o! C88 Desi¢n</ tluv <l1eI rel-'sty1ssheet' mile-‘screen’ Ire! -‘I214/21l. cse7v-hsg2013'> <lleh rel-'s. I.ternste' type-'spplicsti. on/ rssu| .l' title-'IB8' I20!-'htQl/ £IlV. cl the I1-'vi. evport' ooetct-"vldth-device-width, initinl-scsle-1.o'> tee I1-'suthor' eoetat-‘Dove 8hes'> the I1-‘description’ eoetset-‘A dsmnstretion of ehst can be socalished vi its I: -‘robots’ oeetat-'s1l'> <1--11: 1: rs 91> <script sro- ‘script / htelsshi V. js '></ script> <l(endii‘)--> </ heeb <I-- View source is s festure, not s hug. Thanks for your curiosity snd interost in psrtioipstingl Here ere the suhission guidelines (or the new snd igroved csssengerdenaxn: C883? 0! course! Prefix for ALL browsers where neoesesry. go responsive: test your lsyout st eultiple screen sises. your hroveer testing bsseline: I894, recent Chroes/ Pirefox/ sstsri, snd ix/ An: Grscelul degrsdstion is secqtsble, snd in tact highly encouraged. use classes for styling. Don't use ids. web fonts are cool, just eske sure you hsvo s license to shnrs the files. losI services thst ere npplied vie the G8 file (is. Google Poets) will work fine, eost thst require oustm Hill. won't. zypuuc is supported, see the rest on I P090 ! or usege instructions: https: //githulhooe/ eessohlue/ css - And s lee tips on building your C88 tile:
  28. 28. HT Content Structure View Source (option+<}+U) I document type declaration I html tags I html attributes (bold) associated properties of an html tag; more than one attribute may appear INTERNET STUDIO Class 2 Ken Starzer <. lfl. ‘1’YPI’ htl. l> 0&1 Lang-'en'> <heed> the ohareet-'ut£-I‘> <tltle>c88 len Garden: The Beauty of C88 Design</ tlt1e> rel. -'etylesheet' mdia-‘screen’ Ire! -'/214/210.css7v-hag2013'> rel-‘alternate’ type-‘application/ rssunl‘ title-'l88' Ire! -'http: //eev. o| I1-'vi. evport' oeetaet-‘width-device-width, initial-ecsle-1.o'> II: -‘author’ content-‘Dave Bhea'> e: -'desoription' eeeteet-‘A deeonetration of what can he aoooqllsbed vi ax-‘robots’ oeetset-'ell'> Ill! <I--(if lt ll’ 91> <script src- ‘script / htelsshi V. js '></ script> <l(endif]--> </ heab <I-- View source is a feature, not a bug. Thanks for your curiosity and interest in participating! Here aro the subission guidelines for the near and igroved csssengardema-1 C883? or course! Prefix for ALL browsers vhere necessary. go responsivw test your layout at eultiple screen sises. your browser testing baseline: 39¢, recent areas/ Pirefoe/ safari, and ilfi/ An: Gracelul degradation is scoqtahle, and in fact highly encouraged. use classes for styling. Don't use ids. web fonts are cool, just aahe euro you havo a license to share the files. Best services that are applied via the as file (is. Google Fonts) will work fine, eost that require custa "ll. won't. bvpexit is supported, see the roots on I P090 (or usage instructions: https: //github. cee/ aessoblue/ css A And a fee tips on building your C88 file:
  29. 29. HT Content Structure View Source (option+{}+U) document type declaration html tags html attributes (bold) html attribute value identifying information assigned to an element INTERNET STUDIO Class 2 Ken Starzer A2,. .- . .. : .,. ,_. . _ . »., .», -~.3~~, .-, .’. ..'. '-I. .,LL». L,§—L. :.‘. Graceful degradation is acceptable, and in fact highly encouraged. use classes for styling. Don't use ids. web fonts are cool, just make sure you have a license to share the files. Hos! services that are applied via the $5 file (is. Googlc Pants) will work fine, nest that rogulre cnsta sun. won't. iypelit is supported, see the readas on I page for usage instructions: https: //giI: hnb. c<n/ -szzoblue/ csszengaran. cc-/ And a few tips on building your CSS file: use . -first-child, :1ast-child and . -nth-child to get at um-classed elsents use . -:before and : .~a. fter to create pseudo-eljts for extra styling use -iltiple background images to apply as many as you need to any slssnt use the Ksllun llethcd for image replacement, if still needed. http. -// goo. gl/ GI rim‘: rely on the extra divs at the botta. Use x. -before and . -.-after instead. <hody id-‘css-zen-garden'> <div class-‘page-vrappar'> <sectioe class-'int. ro' id-‘ran-int-. ro'> <lsection> <d. i.v class-‘lain suooort. ina' id-‘zen-support-. i.nu' role-'nain'> Qaeder role-'banner'> <u>css zen carden</ h1> <h2>‘1'ha Beauty of <nhhe' title-‘Cascading Style Shaet. s'>CSs</ ebhr> Desigt <lheader'> <div class-'su—nry' id-‘zen-su—ary' role-'article'> <p>A daonstration of what can be accoqlished through <ahhr title-‘Case <p>Doi-rnload the example <a hret‘-'/ e lea/ index‘ title-‘This page's soc </ div <di. v class-‘pres-bis‘ id-‘zen-preanb1e' role-'artic1e'> <hJ>'l'ha Road to Bnlighl-. ennent</ h3> <p>I. itter. 'Lng a dark and dreary road lay the past relics oi browser-specs‘ <p>He must clear the nind of the past. Hob enlightenment has been achias <p>'fhe css zen Garden invites you to relax and neditate on the important </ div>
  30. 30. HT Content Structure View Source (option+{}+U) I document type declaration I htmltags I html attributes (hold) I html attribute value Ioomments informative only. seen only in code view INTERNET STUDIO Class 2 Ken Starzer A2,. .- . .. : .,. t_. . _ . »., .», -~.3~~, .-, .’. ..'. '-I. .,LL». L.§—L. :.‘. Graceful degradation is acceptable, and in fact highly encouraged. use classes for styling. Don't use ids. web fonts are cool, just make sure you have a license to share the files. Hos! services that are applied via the $5 file (ie. Google Pants) will work fine, -cast that require cnata sun. won't. Typexit is supported, see the readns on I page for usage instructions: https: //githuh. c<n/ nezzoblue/ csszengarden. c¢-/ And a few tips on building your CSS file. - use . -first-child, :1aat-child and . -nth-child to get at nm-classed elsmts use uheiore and . -.-after to create pseudo-elenmts for extra styling use -Jltiple background images to apply as many at you need to any elnent use the xellun Method for image replacement, if still needed. http. -// goo. gl/ GI don't rely on the extra diva at the bottm. Use . -.-before and . -.-after instead. <hody id-‘cal-zen-garden'> <div claaa-‘page-vrapper'> <sectioa claaa-'intro' id-‘zen-intro'> <laectioa> <d. i.v claaa-‘main aunportinsf id-‘zen-lI1Dnortin¢' role-'aain'> Qeador role-'hanner'> <u>css zen carden</ h1> <h2>‘1'he Beauty of <ahht title-‘Cascading Style Sheeta'>CSs</ ahhr> Desigt <lhaadar> <div class-'au—ary' id-‘zen-au—ary' role-'article'> <p>h daonstration of what can he aoooqlished through <ahl: r title-‘Case <p>DoI-unload the example <a href-'/ e lea/ index‘ title-"l'hia page'l ac: </ div> <div claaa-'preaIble' id-‘zen-preaab1e' role-'artic1e'> <hJ>'l'he Road to Rn1ightennent</ h3> <p>I. itter. 'Lng a dark and dreary road lay the past relics oi browser-apeci <p>He not clear the hint! of the past. Heb enlightenment has been achias <p>'fhe css zen Garden invites you to relax and -editate on the important </ div>
  31. 31. HT Content Structure View Source (option+{}+U) I document type declaration I html tags html attributes (bold) html attribute value COIIIIIEIIIS content (regular) content that appears on the page INTERNET STUDIO Class 2 Ken Starzer - use classes for styling. Don't use ids. - veb fonts are cool, just make sure you have a license to share the files. Hos! services that are applied via the $5 file (ie. Googls Pants) will work fine, most that require custcn BEL won't. Typexit is supported, see the readms on I page for usage instructions: https: //github. an/ nezzoblue/ csszengarden. ccnl And a few tips on building your CSS file. - use . -first-child, :last-child and . -nth-child to get at nan-classed elements use . -.-before and . -.-after to create pseudo-elemmts for extra styling use -altiple background images to apply as many as you need to any element use the Kellum Method for image replacement, if still needed. http. -// goo. gl/ GI don't rely on the extra divs at the bottm. Use . -.-before and . -.-after instead. _—> <body id-‘css-zen-garden'> <div class-‘page-wrappei-'> <sectioe class-'intro' id-‘zen-intro'> Quads: role-'banner'> <n>css len Garden</ h1> ¢2>'l'he Beauty of <abbs' title-‘Cascading Style Sheets'>CSS</ abbt> Desigr <lheadsr> <div class-'su—ary' id-‘zen-au—ary" role-'article'> <p>h dconstration of what can be aoooqlished through <abhr title-‘Case <p>Dm-unload the example <a hrsf-'/ e lea/ index‘ title-‘This page's so: </ div> <div class-'prea*mble' id-‘zen-prealb1e' role-'artic1e'> <hJ>'I'he Road to Rnlightennent</ h3> <p>Littering a dark and dreary road lay the past relics of browser-specs‘ <p>He must clear the nind of the past. Heb enlightenment has been achiaa <p>'l'he CSS zen Garden invites you to relax and meditate on the important <Idiv> <Isectiea> <div class-‘main supporting‘ id-‘zen-supporting‘ role-'aain'>
  32. 32. HT Content Structure View Source (option+{}+U) document type declaration html tags html attributes (bold) html attribute value comments content (regular) character entity references special characters not on your keyboard. eg: Ois ⇧ INTERNET STUDIO Class 2 Ken Starzer </11> <e hrof-' 214[” a1eI| -"design-nemo">Ve: de Hoderne</ o> by </11> </ u1> </ eev> </ d$v> <dLv clone-‘design-archival" id-'de| iqn—aroh1vo| ‘> <hJ clean-“archive: ”>A: ohiveIt</ hJ> <nev role-"navlget1on"> <u1> <18 clans-"noxt'> <3 hrs! -" Z14/gegel”> Next Design: <| pcn clean-”1ndLcator'>bteequo: </open: </ o> </11> <1£ ales: -"v1ew|1l”> <e bro! -"httgx(/ vvw. noaIob1uo. coallengerdonlalldonignll View All Design: </ e> </1L> </ u1> </ nev> </ dLv> <dLv clans-"zen-resources" id-‘ten-roIourooe'> <h3 clean-”: oIourco| ">ReIource| t</ h3> <u1> <1£ clean-‘view-cl| "> <3 bro! -"/214/114.cII' title-‘View the Iourco CB8 £110 of tt View Thin DeIiqn&I8Z17;e <ebbr title-”CaeoedLn¢ Style st </1£> <18 clues-‘col-ro| ourco| '> <0 bro! -”httgx[/ vvw. no: :ob1uo. oou[| engerdon/ reoouroeI/ ' tit] <nbbr title-'CaIoad1ng style Shoot| ">CSs</ nbh: > Roeource </1£> <18 clues-"zen-! aq”> <e hrs! -"httgx[/ vvu. me: Iob1uo. aou[| onge: don/ leg/ ' title-‘A 1 <ehb: title-"Frequently Asked 0uoIt1onn'>P </ Ihbr> </1£> <11 clues-‘son-Iubn1t"> <0 bro! -“htt 1 / vvv. me: Iobluo. oon Ion
  33. 33. HT Content Structure View Source (option+{}+U) document type declaration html tags html attributes (bold) html attribute value comments content (regular) character entity references INTERNET STUDIO Class 2 Ken Starzer </1i> <3 href-“ 214[” e13ee-"design-n3me">Verde Hodern3</ e> by </11> </ II1> </ e3v> </ div> <div cieee-‘design-archival‘ id-‘design-arohive| ‘> <hJ ole I-“arohivee'>A: ohiveIt</ hJ> <n3v role-"nevig3tion"> <ul> <li c13|| -"next'> <3 heel-" Z14/g3gel"> Next Design: <| p3n 013:3-"indicetor'>5te3quo; </epee: </ e> </ li> <li eleel-"viewe1l"> <3 href-"httgx(/ vvw. neaIob1ue. coallengerdenlalldeeignel View All Deeiqne </3> </1i> </ u1> </ e3v> </ div> <div e133|- ten-reeouroee" id-‘ten-reeouroee'> <h3 eleee-"reIourcee">ReIource| t</ h3> <ul> <li eleee-‘view-c33"> <3 bro! -"/214/114.cIe' title-"View the source CSS file of tt View Thin De| iqn&IE217;e <3hbr title-'Caeo3din¢ Style st </1i> <1i eleee-‘eel-reeource3'> <3 href-'httgx[/ vvw. ne: :ob1ue. oou[| eng3rden/ reeouroeI/ ' tit] <3bbr title-'Caeoading style sheet3">CSs</3hh: > Reeource </1i> <1i eleee-"zen-! eq”> <3 href-“httgx[/ vvu. me: Iob1ue. aou[| eng3:den/ leg/ ' title-‘A 1 <3hbr title-"Frequently Asked 0ueetione">P </3hbr> </1i> <1i eleee-‘sen-eubnit"> <3 href-”htt 1 / vvv. me: Ioblue. oon sen
  34. 34. HT Content Structure CSS ZEN C-ARDEN ‘)3: t. ~ «gr: I . .v AU n . .uN. i Display Element _ dcrlioiulriiliuii ol wlizu an be auomplislicd through CSS-based dc-sign Sclcc. any style ilirel lium lhtr r Ilm in load ll into this pagc HTML source code Download thccxaimplr: }_ and ; THE ROAD TO ENLIGHTENMENT Liuerinx ll dzuk and dreary road lav the past relics of I: _rows<-r-six-tifii. lain. uicoznmuble D0.ts. broken Hementlnlormation I ' I . ..u. ooaylrxss-zen-gurus‘ . .c, .,. .,. M.. , clwlzen-surrwriery . ' DOM Layout ¢> height: 54px; math: 731px; </ V> Position Text display: block: font-fa-«Hy: 'Lbre nasI: ervi11e'. sons-serif; float: none; font-size: 13.t333px; position: static; lmerheightz 26.5667“; INTERNET STUDIO Class2 View Source Ken Srarzer
  35. 35. Content Structure Display Element Information another way to view HTML source code INTERNET STUDIO Class 2 Se. ircr- rt‘ Hip "/ '-‘. ’‘v c-. <.zi-no I'Ct‘. ". corn" <body id'~CS’—Zvn-qJId“n'> <div clan: 'piqu—ureppvr'> <u«ction class-‘intro’ id-'zvn-intro'> <hvndrr ro1c~'b4nnvr'> <hl>CSS lcn Cardcn</ hl> <h2>The Beauty of <abbr title-‘Cascading Stylv Shvvts'>CSS</ nhbr> Dcsigm </ hvndPr> <div clans-'nurrtry' id-'zvn—rur try" role-'artic1v"> <p>A demonstration o! what can be accorplinhcd through <abbr title-'Ca: o <p>Dounload the example <a hrot-'t;5;: Rg; A;5' §‘t‘¢'-Tali page’. sou </ div> <div class-"prvirbln' id-‘z~n—p: werblw' role-'xrLic1~'> <h3>Thc Road to Enliqhtcnmcnt</ hJ> <p>Littcring a dark and dreary road lay the past rclicn of browser-npcci <p>wc rust clear the rind of the past. Hob enlightenment has been achiev <p>Thc css zen Garden invites you to relax and ncditatc on the important </ div> </ srction> <div G1!! !-"rain supporting‘ id-': —wupporLinq' role-‘rt-r <div C185!-'vxplin_ ion‘ id- . H xp1:niLion' rolo- - ' <hJ>so what in This About? </h3> <p>Thcrc is a continuing need to show the power of <abhr title-'cx; cxdin <p)<abbr title-‘Cascading Style Sh~~: .">CS$</ nbbr> allows complete and u </ div>
  36. 36. CS CASCADING STYLESHEET INTERNET STUDIO Class 2 men htnrzm
  37. 37. CS CASCADING STYLESHEET Appearance Layout INTERNET STUDIO Class 2 min Marin: -v
  38. 38. x’) I-ltullwww »~5~-. v./20:3 C-J‘ " www. (ssz¢ngarcen. mm/ Z14/2l4.(ssN-8lw1a- R‘ _ - Q 7- Q *3 O ' amm - Moslvurcd - S<hoc« - ram - Mow» - L«D. 'a'u - ‘ » Crvc: 'n; v"-Frfhz Food - v Q Duqo - E] v . , . Eoo'L. -vrh - '_7 »- ; > ; >: ~ caomu - ‘ L Cc pinmnur‘ [Q Dnblc - J, Cooluu - 1- :55 - fi rovm - {:1 Images ~ I i-*‘o-rv*2X: o' - 6 MIX: .; 'eous - / 0.: -we - / name - I Yoozs Apfearance / - bun css -/ . I -vcbkil—box—ai1ingx bozdo: —box: /' Safaxx/ Chrosc, other Kcbxxt '/ —moz-box—5izinqx boxdcr—box: I‘ Pircfox, other Gecko ‘I [ box-uizinqx bordcr—box: /° Opera/ IE ao 0/ I pnddinqx 0; marqinx O; I body I colors IJZSDSO: background: Ittf: (ant-family: ‘Libru Bnskvrvil1c'. nan: -auril; I font-size: 7o; I I‘L'l.1v body ( I I color: I0dBbal: -vcbkit-Lranuilion: all 0.25: cane-out; —noz-transition: all 0.25s canr-oul: lranuitionn All D.25n canv-out: Lox! -dncoratlcnx nono; axvinilod ( colon Il| S9S21 ) axhovcr, nxtocun ( color: lD599c2: tux: -dvcoxnticnx undcrlinv: ) abbr ( bordoxx none; tr: xt—u'| nulotmx upporcanop font-ulxcx D.9cw; letter-Ipacinqx D.01c: ; hjgpzz [wwyg. c;szengardeg. com(2,1fiL2A14,css? y= §may_29_13_ INTERNET STUDIO Class 2
  39. 39. Appearance Layout /0 / o / e / u /0 / e css Zen Garden default style - ‘Tranquillc' by Dave Shea - http: //vvv. mozzobluc. conl ‘I css released under Creative Conmons License - http: //crcntivccommons. org/ licenses/ by-nc—sa/1.0/ All associated graphics copyright 2003, Dave Shea '/ Added: May 7th, 2003 0/ IMPORTANT ‘ / This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, Eoel {roe to study the CSS and use techniques you learn from it elsewhere. '/ The Zen Garden dclsult was the first I put together. and almost didn't make the cut. 1 brictly ll ‘Salmon Cream Cheese‘ as the main style for the Garden, but switched back to this one before lau All graphics in this design were illustrated by me in Photoshep. Google Image Search provided in some of the elements. I did a bit of research on Kanji to come up with the characters on the to; can read that will most likely tell you it nakcs no sense, but the best I could do was putting t characters for ‘beginning’ 'completo' and ‘skill’ to roughly say something like ‘we're breaking It's A stretch. '/ http: L/www. csszengarden. com/214/2 14.css? v=8may2013_ INTERNET STUDIO Class 2
  40. 40. cs a 4 Appearance Layout CSS file references HTML tags: html, body. p nun ( margin: 01 gaddinq: 0: (ant: 751 qaorgin, inn: -merit; lino-height: 1.88889: colorx lSS575J; background: lift ur1(/001/b1ousona. jpg) no-repent bottom right; margin: 0; padding: 0; ) margin-top: 0; text-align: justify: ) PI http: L/www. csszengarden. com/214/2 14.css? v=8may2013 INTERNET STUDIO Class 2 Ken SIZIYZGI
  41. 41. Appearance Layout CSS file references HTML tags: html, body. p INTERNET STUDIO Class 2 " " " Mozilla Firefox 4?‘ '9 *3 L_L. _JE; I fig) Dasable ' L Cookncs - / CSS ' _‘ Forms v ‘_‘_ xmaqes - W Informanon - __ _ 'ms(eII.1neous ' , ‘ Ourzne ' 1:1 Iusuze - - http: I/csszengarden. (om/00lI0Ol. <ss V I / ' specific diva '/ Icontainor ( background: url(/001/zen-bg. jpq) no-repeat top left; padding: 0 175px 0 110px; margin: 0; position: relative; I Ilntro ( min-width: 470px; width: IODI; ) / ' using an image to replace text in an hl. This trick courtesy Douglas Bowman, httpx/ /vHv. Itopdesh Upagoflcador hl ( background: transparent urlt/ O01/h1.gi£) no-repeat top left: margin-top: lopx; display: block; " A " Source of‘ ht! £'/ Icsszengarden. com/ <body id-"css-zen-qa: don"> (div id-"conta; nvr"> <div id-"inL: o'> (div id-"pag-IIna<: 'rr"> <h1><span>caa zen Gardcn</ Ipan></ h1> <h2><Ipan>The Beauty of (acronym title-"Caucading Stylw $nfints">CSS</ acronym </ div> <dlv id-“quicksu wary‘) - p1“><rpan>A demonstration of what can be accomplished visually tho 'p2”><apan>Dovnload the aample <a hrof-”/ zen ardrn-sen 1n. hLmZ" tit </ dlv> <div ld- prnarbl~"> <hJ><apan>Thc Road to EnllghLcnmcnt</ epnn></ hJ> <p al 3"><npnn>Littnring a dark and dreary road lay the past rnlica of <p cl 1"><upan>Today, we must clear the mind of past practices. Web cnl <p alaea-"p3"><epan>Thc can ion Garden invitca you to relax and meditate on T; » </ div> </ div> <div ld-"uuuuoxL; nuTvxL'>
  42. 42. fcontainor ( background: url(/001/zen-bq. jpq) no-repeat top left: flpfearancg padding: o 175px o 110px; margin: 0; position: relative; Layout , CSS file references HTML tags: html, body. p References custom elements in HTML attribute values CSS File <div id-'containor“> INTERNET STUDIO Class 2 HTML File Ken Smrzer
  43. 43. CS Appearance Layout External file from HTML INTERNET STUDIO Class 2 ? ‘.I' I‘! ‘ulfl/ fI'l
  44. 44. CS Appearance Layout <etyle type-"text/ cu" title-‘currentstylfl uedla-'acreen"> Oimport "/001/001 . cea"y </ atyle> INTERNET STUDIO Class 2 men . tar7.r. ~r
  45. 45. Appearance Layout External file from HTML May reference image files INTERNET STUDIO Class 2 'r': ins ins. ins. JPGI PNGI CIF IMAGES
  46. 46. @ntnuo-. |,cuus-)Ims-gron---a| m.. -1u-mma-. mu«. um-/ omu-(mn-¢rno--ou«tam-| ||ouuuu- C Arrearame 3 C35 ZEN GARDEN Layout ‘ . . ‘- on. u_/ I. 55 U1.l_EIl External file from HTML 0 May reference image files . A demonstration of what can be accomplished through CSS-based design. Sclcct any style sheet from the list to load it into this page. Download the example 1 ' and 1 THE ROAD TO ENLIGI-ITENMENT Littering a dark and dreary road lay the past relics of browser-specific tags, tncompauble DOMs. brokcn CSS support. and abandoned browsers. We must clear the mind olthe past. Web cnltghtcnmcnt has been achieved thanks to [he urclcss ellons of folk like the W3C, WASP, and the major browser creators. The CSS Zen Garden invites you to relax and meditate on the important lessons of the mast: -rs. Begin to see with clarity. Learn to use the um: -—honurcd lcchniqucs in new and invigorating fashion. Become one with the web. SQ / /HAT IQ Tl—ll§ ARFHI IT7 INTERNET STUDIO Class 2 Ken Starzer
  47. 47. CS Appearance Layout External file from HTML May reference image files Edit CSS (option+O+ D) INTERNET STUDIO Class 2 Ken Starzer ‘_+ c E i'C’; «IL_. .- Elan» fiuosxvtsm¢- Elsa-new firmer Quanta» fitnanso ‘canny-rung. .. fiFood- fiuuenetp: IE7 Ejmoo-Iv ct--mI~oh-t-l9r«o-ouv-: 'T2a-aun-i3s--a- @otnue-. |.coakzes-)l~cs-firou-s-BI-n. ngu-iuuuunm-Qua-Juneau-/ ounnev/ ustn-/ ‘routs Dlsablestyles Add User Style Sheet. .. Display Style Inlormation Display Styles By Media Type . . 0 ( O CSSZencuden Tnesuu Er § r; .w. ».-. csszengarden. com wv ZEN GARDEN Reload Linked Style Sheets Use Border Box Model View CSS A dcmonstmtjon of what can be accomplished through CSS-but-d dcstgn Select any style sheet from the lit (0 load it into this page. Download the cxamplc 1 and 1 THE ROAD TO ENLICHTENMENT Lmcn'ng il dark and dreary road lay the past rl‘l| C3 of browser-spcnfic tags. tncompaublc D0.Vls, broken CSS auppon. and abandoned browxtrs. Wc muat clear the mtnd ul lht past. Web cnltghtcnmcnt has been achtrvcd thanks to the ltrclcu clfuru of la like the W3C, WASP, and the FHIJUY browser crtaton The CSS Zen Gudrn xnvitcs you to rrlux and mrdmtr on the ttnportant lcuom of the mastcn Began to Stfl
  48. 48. ,-— — . ‘ 1 tv C55 Zen Carder. The 324.. G‘ F C csszengarderuom «. ' _ B- Q ~” , _ Q Q BQVl»' — Non Vtsnted ' School - rave) ~ Movies - Lnbums - t“: . Carvo-ton—Farme Food - Bole Me as 5} Once - Q - q_ , . Bookmark - L3 wqmqhu - Capture - _= Seed v Q DlS3bl¢ - L Cocues - is CSS - fi {arms ' E Images ' I l| ’l’0l'l'VL1hOfl ' Q Ml§C£l‘. 'U| €OAS ‘ / Out‘-ne - I Reslze - I Toots - Layout External file from HTML References images ': ,'. .,. .-r. ,,. .., -,-, .,~u». ~ , ;'Ayr-'. / Edit css I : demonstration of what can be accomplished through CsS~b. nsed design. Select any style sl’lf. ‘CX from the its: to load it tnto this DJHE. Ed: t('_SS S 3 X ‘I 5‘ f Search L-' css Embedded Styles 11, H2 I paddtng: 0 13%; ecrgtnz 3; color: H03: fontmetght: mr-al; } .1 { pcdatng-top: B: INTERNET STUDIO Class 2
  49. 49. CS Appearance Layout External file from HTML References images Edit CSS lMTHlNEl"S'l‘UDlO Class. ‘2 Ken Starzer . .9 , ('1 5Slm(. art1en fhzlenu - + E]'i(- 9 -’. -w-v~csslenqIrden. (om C E Q“ Cc-. v_; : Q § Q fi Q Q mnmu fiuouvmua~ : ;sam- firmu §: uovia- fiuonmu ‘(swollen-Same. .. groan fiance-hr Le gnugwlc q~-.4 eooumun-Qnt9mgm-ilEeapwa-g}sqn4- Quuu--, Lcoam-fias-Qronns-in-nu- twmm. .n-0usaeuno. a-/ eu: -n-/ uuaa~lvoos- A demumtrutiun 05 what em be netutttplished through (. ‘S5~b. ued dexigtt. Select any style sheet from the int to load it utto tins D‘. lk’L‘. E css Embedded Styles
  50. 50. Appearance Layout External file from HTML References images Edit CSS INTERNET STUDIO Class 2 it C55 Zen Carder. The 324.. G‘ F C csszengarden. com «. ' _ B- Q ~” , _ Q Q Bevin - Most Vts-ted ' School - rave) ~ Movies - Ltbums - t‘_n Carvo-ton—F. ‘|rme Food - Bole Me as 5} Once - Q - Q, .. Bookmark - L3 litqhltqltl - Capture - _= sm: v DISJDIE - L COCHES - is CSS - fi Tovrvts ' E Images ' I Irtlomutlon - fl Mtscettaneous ‘ / Out‘-ne - I Restze - I Toots - ", ‘:, ,-. ',’. (,. :_:5- , ,1 ‘’; x,‘ I, '.. ,l_-U : demonstration of what can be aceomplislted through CsS~b. tsed design. Select any style sI’lf. ‘Cl from the its: to load it tnto this DJHE. EdttC$S S 3 X ‘I 5‘ f Search L-' css Embedded Styles 41, H2 I paddtng: 0 13%; ecrgtnz 3; color: H03: fontmetght: mr-al; } '11 { pcdatng-too: B;
  51. 51. .giI'9.': 3:13;) l)ett'ttt’-xtd (hr . ~ : tnp’r html filg un.1t‘. << file -) Select 3 Design; . i. .'t< : t.tI_tir: :: -V. he -. I . . D'. ‘.‘lt; .|'. lt D0‘-I ~ Undertheseal ' by Ercstoltz 3 Make_'n Proud by». na N’r: Agho-I and soon, Jsnfler f OfC'lId Beauy ‘ by gun Mg -.25 % {I by Jusl-n Cray ; $l! iiE2t1_L11 -‘ by Ben awn Kkemm ~ §akura_ ; by lalsaxa Uctda . - run . . . ' Kvo: oForest
  52. 52. -- . -.-. y)-, ~-— —~ . - y_, .—. ,-}, p_/ . _‘_ ‘ y ’ ‘ , I -12.”: J‘ -= --~*' x . -, mill ( T/ ‘‘l£| “-ah! ’ . I / _ , ’.‘ "‘, _ A V0 / ,A x. . V as/ *' , ._. . ; _J ,4“ l . Adtmatstrarlanqfwltatcunbrurcumplishedtrisuullu . . . «~_--- - through (.85-based dt>. s1'gvt. Seiertuny style sheet/ ruyt the I li. <rtDt'oadt'tt'n. ’utfIt'spagr. I I . Dmwtntnntzsxstrtz 2 SI’. » t I / ’ “ . t y I . '4 § . ', * Till" RORD TC IT! ‘(L! G)lT}TN. l? i51T littering‘. a dark and dreary road lay the past rr. -lis : 4 of browser-spedfic tags, incompatible DOMS, and . V broken CSS support. ‘ W . >ZI. )I(7T A m; .TL"-IN’ ' ' Today. we must clear the mind of past pradices. P . V Web enli; -,hlr. -nment has been achieved thnnlsto . 5,, I 4 the tireless efforts offolk like the W3C, WaSl’ and V by 1-, ”; 5;. -,; ';z the major browser creators. . 2. Make "om Proud by . '». ’teItuel . H‘mI: t/ It'e: /t w ' C from r. -tt‘1 . The as Zen Garden invites you to relax and _me<litatc. ttr1thq. im; mtttnLl~: ssatzs of the masters. -V‘ Begin to see with chant)‘. I1.-uztt to use the (yet to _ . I be) llutr-huuo. -ed tedutiqueain new and r 5’ Orchldgmmy ; _ - A by lwt-tr: _'l. 't. lZ‘Elf'll -4 lmtrefltlfv ffleiblvnt. He u-mo wall: the mob. . — —v. -V » -’-— Oceanscape by JILSIU. Gl'l. t/ war I t 1;. r - -7.. css Co. ,Ltd. rum _‘u’OU_‘_r_ by Bt'Il)fl”lll1Ait't. V‘llll I—' _ ‘ - 5- Sakura ‘ ‘ X 1. u : _ by '1ul. «tuu Lidtttla , .l—lgrt! l-lut. ... ._, ,,_m
  53. 53. A demonstration of what am be aaaornplished uisuafil thrmgh (X-based design. Selzd any style flute! from line E5! to bad it into this page. }_ littering a dark and dreary road lay the past relits of browser-specific tags. incompatible DOMS. LT; past practices. Web enlightenment has been achieved thank; to W3C, Was? and the major browser creators. - relax and meditate on the important lessons of the masters. GARDEN csszengarden. com M_h, _n"wd so mm is nus noun J b”: ::, yu]Rd(_n , .:: ,.md There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to - use the (yet to be) time-honored techniques in new and with the web. excite, inspire, and encourage participation. To begin, View some of the existing designs in the
  54. 54. CS Appearance Layout External file from HTML References images Change look, without changing HTML With one exception, the HTML code on these three pages are exactly the same. s-—. .ua_ao-u-. n.~p--a.4. __. ... —. -«-3.. .. INTERNET STUDIO Class 2 been Starzrgr
  55. 55. CS Apfearance Layout External file from HTML References images Change look, without changing HTML The CSS file each page uses is different. s-‘.5-_u. .-. ..n. -.. _.. .u. —.. ¢. _n—a—c-. .—. INTERNET STUDIO Class 2 men . tar7.r. ~r
  56. 56. CS Appearance Layout External file from HTML v A References images Change look, without changing HTML The CSS file each page uses is different. each with its unique code and image references. INTERNETSTUDIO Class2 men 5-Inr7.F. 'r
  57. 57. I i_ESC}¥3II W WAIEET Separate content from / zzyoz. /t. INTERNET STUDIO Class 2
  58. 58. LESSON IN A TWEET Sepamte [017/L’)? /‘ from / zI_V01/1‘. I I T/ I/I L . s‘tI‘z/ ctz/ mas‘ CO NTENT _VOZ/ I“/ D1131’. INTERNET STUDIO Class 2 ‘~ v n ‘H ‘: ',‘r:
  59. 59. LESSON IN A TWEET Separate content fro/22 / nyoz. /t. H TML . s‘trz/ ctz/ res CONTENT ~V°”"/ W‘ LAYOUT C S S fly/ ‘nznts mm’ sty/ ex e/ en/ ent_s‘ on your ‘we/ mite. INTERNET STUDIO Class 2 I‘. i' Fl , ‘II«‘. i'f| ' I
  60. 60. JS JAVASCRIPT INTERNET STUDIO Class 2 men . ‘IIfl(7.I'. 'l
  61. 61. JS JAVASCRIPT Be/ .7a= vz'or Interactivity INTERNET STUDIO Class 2 min 5IJr7I? I
  62. 62. Bebavior Interactivity Visit . .rr1ar>. s_-9.<. >.c2.¢L| e,. .c. <_>. r_n INTERNET STUDIO Class 2 9 Disable ' L Coo’-ues ' , _., _,, ,v CS5 ' fl Forms ' IE Images ' " u_. .. . f lnforrnatnon ' ff Misceilaneous ' / ' Oufine ' I *Ken : :: Dallas 7 . U _. '3 ‘~” . Z_ 4 Van data :20l4Gooqe Te! _, - a prob
  63. 63. .9 Disable - ‘ Cook. “ - CSS - . fovms ' E] Images ‘ I Inlovrrulion - . Miscellaneous ' / ' Outhnc ' I U . G Plugins Contrbuta Evans - - - Be/ savior Interactivity Don't reinvent the wheel: Javascript libraries let you hit the ground running jquery. com VIEW Source on UERY II~_ I‘ vi-lm_ Safafi Opera, '. T.hv: yne_ and WU! ) What is jQuery? INTERNET STUDIO Class 2
  64. 64. JS Bebavior Interactivity Don't reinvent the whee| :JavaScript libraries let you hit the ground running mootoo| s.net INTERNET STUDIO Class 2 t- - II ‘J v Q Disable ' ‘ Cookies ' / "3' CSS - . forms ' E Irnaqes v [ Information - . Miscellaneous ' / Outline - I mooroofs a compact Jcivascripv Irameworlt MooTooIs is a compact, modular, ODJQCI-Orieflled Javascript framework designed for the intennediate to advanced Javascript developer. It allows you to write powerful, tiexible. and cross—Drowser code with its elegant, well documented, and coherent API. l. ‘r()()TDO S COCO 't', 'Sf}l3f. ‘IS 5'. ’ C’ S'. iIf‘C£I! G'5 3'13 d. ’)f. ‘$"'. "l'()W . 't. "y '-‘-«I<l"‘ "Q5 IS (. ‘X’. t'? ’lS'Vl'. ‘ ', / EJ£)C. lT'l(, 'I"Yr'. 'C it"‘C "A5 'Y‘(. ‘r'I"tV‘: ;It. VE1"EilfI. £‘ f‘r'i"18:} £1 rL)y' TL) I)'C)'WSE‘ t-Vld El S"d{) IO t1f‘t'}é3'SI£I"G MOOTOOLS mootooIs. net ser Compatibility ools IS compatible and lully tested Wllh Sat‘. -=. ' , at Explorer 6+, “ '(? ‘:2x, L‘; ;:r. -vi, and fl” ‘, "‘>. §. ' ooTools out now! ro ava criptwtt Ready to take your MooTools knowledge to a new level? Then gain .2. r: v:; :y oi ~'~-
  65. 65. /1 7_lE‘‘‘‘’‘~’‘it' law A '""ir ‘ri ", ,. “". ,""“"° WEET jcz-vcIScript /22‘z'1zgl‘ extra / E// zctio/ m// ty to n 'I. UL'7[7]§(Ig‘L. ’ t/ ant can / 7£)['(§). /7tL')I7 / ’/Jc’ 1/5(: ’]'. ‘' L L’/ Zgclgt’/ /Zc’/ If nnn’ / nn/ ce t/ ye experie/ zce enyier. INTERNET STUDIO Class 2
  66. 66. t F‘ ' . (- , I I HYPERTEXT MARKUP CASCADING JAVASCRIPT V LANGUAGE , I STYLESHEET INTERNET STUDIO Class 2
  67. 67. HYPERTEXT MARKUP CASCADING HT LANGUAGE CS STYLESHEET ’AVA5CR'PT Content Appearance Behavior Structure Layout Interactivity INTERNET STUDIO Class 2 i r I] ‘.7 :
  68. 68. HYPERTEXT MARKUP CASCADING HT LANGUAGE CS STYLESHEET JAVASCRWT Content Appearance Bebavior Structure Layout Interactivity V BROWSERS INTERNET EXPLORER FIREFOX CHROME SAFARI OPERA adoption 23% 19% 49% 5% 1% latest version: 10 22 27 6 15 INTERNET STUDIO Class 2 i- r n xi w_r; .-,
  69. 69. HT HYPERTEXT MARKUP LANGUAGE INTERNET STUDIO Class 2 men . t. tr7.r. ~r
  70. 70. HT HYPERTEXT MARKUP LANGUAGE Content Structure INTERNET STUDIO Class 2 men §Inr7.l'. 'l
  71. 71. HT Content Structure View Source (option+<}+U) document type declaration html tags html attributes (bold) html attribute value comments content (regular) character entity references INTERNET STUDIO Class 2 Ken Starzer <. lflX. ‘!'YPI’ htl. l> Qhl lang-'on'> <haal> {ta chance-'ut£-I'> <tltlo>C88 Ion Oardam 'l'ha Beauty of C88 D¢Ilgn</ tluv ta! -'atylaahaot' mdla-‘screen’ Ira! -'/214/210.caa? v-hag20l3‘> :01-‘alternate’ typo-‘application/ raaunl‘ tltlo-'l88' Ire! -'httg: //vw. o| I1-'vl. ovport' oantant-'rldth-davleo-vldth, lultlal-acalo-1.0'> can-'authox' contact-‘Dave Bhoa'> a: -'doaorlptlon' contact-‘A danooatratlou 0! what can be aoooqllahod V! I1-'robota' contact-'all'> III! <I--(ll It 1]’ 9)) <a¢. -ript an: - ‘ac. -rlpt / htnlsalu" v. 1}: '></ acr. t'. pt> <l[oadJ. !)--> </ Ioab <[-- Vin! aourca la a feature, not a bug. Thanks for you: curiosity and interact in participating! Ban an the auhlaaioa guldcllnoa for the now and iwmvod caaaaagardamccr C883? 0! contact Prefix for Au. brovaata when noooaaary. go tupoaain; teat your layout at multiple acrooa alaaa. your browser toatlng baseline: It9¢, "cont Grout/ Fltolox/ salatl, and lw/ An: Gracolul degradation la accaptabla, and in tact highly encouraged. uu claaaoa for atyllnq. Don't uaa lb. vlb fouta an cool, juat lake nun you ban a licaaaa to abate tba fllaa. Boat an-vicoa that are applied via the G5 lilo (lo. Googlo Poata) will work Lina, noat that roquiro cuatm Dill. won't. lypoxit la anppottod, an the mate on I P090 (or usage lnatructioaar httpar/ /gltIIub. can/ noaaobluc/ can And a {our tips on building your C88 Illa:
  72. 72. Content Structure i— start lag —: <tag name> INTERNET STUDIO Class 2
  73. 73. Content Structure i— start lag —: <tag name> content INTERNET STUDIO Class 2
  74. 74. Content Structure i— staittag —: l— endtag —: <tag name> content </ tag name> INTERNET STUDIO Class 2
  75. 75. Content Structure i— staittag —: l— endtag —: <tag name> content </ tag name> A element INTERNET STUDIO Class 2
  76. 76. != — startlag —: i— endtag —: comm; <tag name> content </ tag name> Structure A element line 56 <h1>css Zen Garden</ h1> 57 <h2>The Beauty of Design</ h2> 66 <h3>The Road to En1ightenment</ h3> INTERNET STUDIO Class 2
  77. 77. Content Structure fine 61 <abbr tit1.e= "Cascading Style Sheets">CSS</ abbr> INTERNET STUDIO Class 2 t i it ‘ll =
  78. 78. Content Structure fine 61 <abbr 1:it1e= "Cascaclittg Style Sltee"cs">CSS</ abbr> INTERNET STUDIO Class 2
  79. 79. Content Structure start lag fine 61 <abbr tit1e= "Cascatlittg Style Sltee’ts">CSS</ abbr> INTERNET STUDIO Class 2
  80. 80. Content Structure start lag fine 61 <abbr tit1e= "Cascatlittg Style Sltee’ts">CSS</ abbt-*> INTERNET STUDIO Class 2
  81. 81. Content Structure starting T: send tag-: fine 61 <abbr tit1e= "Cascading Style Shee”cs">CSS</ abba-*> INTERNET STUDIO Class 2
  82. 82. Content Structure starting C: send tag-: fine 61 <abbr tit1e= "Cascading Style SI1ee”cs">CSS</ ebb: -*> INTERNET STUDIO Class 2
  83. 83. Content Structure content starttag T: send tag-: fine 61 <abbr title= "Cascading Style Sheets">CSS</ abbr> INTERNET STUDIO Class 2
  84. 84. Content Structure content starttag T: rend tag-: fine 61 <abbr title= "Cascading Style Sheets">CSS</ abbr-*> INTERNET STUDIO Class 2
  85. 85. Content Structure content starttag T: rend tag-: fine 61 <abbr title= "Cascading Style Sheets">CSS</ abbr-*> e element INTERNET STUDIO Class 2
  86. 86. Content Structure content starttag end tag element INTERNET STUDIO Class 2 Ken Starzer
  87. 87. HT Content Structure content zstzm end tag re atlnbute er 5. (D C1 | —‘ / no :3‘ 9' 8. V. ’ 1; V INTERNET STUDIO Class 2 Ken Starzer
  88. 88. Content content S’”"’”"’ starttag C: 2-endtag-: »j attribute - : —— value fine 61 <abbr title= "Cascading Style Sheets">CSS</ abbr> e element INTERNET STUDIO Class 2
  89. 89. HT HYPERTEXT MARKUP LANGUAGE HTM L Content Structure INTERNET STUDIO Class 2 men §Inr7.1?l
  90. 90. luthtml Cl071f€7’ll‘ <! doctype html) < ) Structure < > charset= "utf—8“> >Hy First rrebpage</ < >Hy First hIebpage</ > Sublime Text < >He1lo. class! </ > TextEdit ( on Mac) Notepad ( on PC ) INTERNET STUDIO Class 2
  91. 91. < ! doctype html> Content <lIt| I|'l-> Structure <head> <meta charset= "utf—8“> <title>My First webpage</ title> </ head> <body> <h1>My First webpage</ h1> <p>Hello, class! </p> <! -— a Ken creation -—> </ body> </ html> INTERNET STUDIO Class 2 ‘~ v n ‘H ‘: ',‘r:
  92. 92. < ! doctype html> Content <l'It| |Il. > Structure </ html> INTERNET STUDIO Class 2 Ken Starzer
  93. 93. < ! doctype html> Content <lItI| I1> Structure <head> </ head> </ html> INTERNET STUDIO Class 2 Ken Starzer
  94. 94. < ' <3.= ;><: ’iy; :e. 7T’: ":: ‘.= ;:: » Cbnumt <html> Structure <|1ead> <meta charset= "utf—8“> <title>My First webpage</ title> </ head> <body> <h1>My First Webpage</ h1> <p>Hello, class! </p> <! -— a Ken creation -—> </ body> </ html> INTERNET STUDIO Class 2 Ken Starzer
  95. 95. Content Structure <title>My First webpage</ title> INTERNET STUDIO Class 2 ll1|'. ,lv
  96. 96. Content Structure <head> <meta charset= "utf—8“> <title>My First webpage</ title> </ head> INTERNET STUDIO Class 2 ? ‘."r‘I *. lr: ’.‘n'r
  97. 97. < ! doctype html> Content <lIt| I|'l-> Structure <head> <meta charset= "utf—8“> <title>My First Webpage</ title> </ head> </ html> INTERNET STUDIO Class 2 hr‘ Fl , rlr‘. t'fI'l
  98. 98. < ! doctype html> Content <lIt| I|'l-> Structure <head> <meta charset= "utf—8“> <title>My First Webpage</ title> </ head> <body> </ body> </ html> INTERNET STUDIO Class 2 P<"H , l-'IT7I"l
  99. 99. < ! doctype html> Content <lIt| I|'l-> Structure <head> <meta charset= "utf—8“> <title>My First webpage</ title> </ head> <body> <h1>My First webpage</ h1> <p>Hello, class! </p> <! -— a Ken creation -—> </ body> </ html> INTERNET STUDIO Class 2 ‘~ v n ‘H ‘: ',‘r:
  100. 100. tags you know <! doctype html> <htmI> Content Structure <head> <meta> <tit1e> <body> <h1> heading 1 <p> paragraph <! — conlnents —> try out these tags <h2>. . . <h3> headings <eIn> italics <strong> bo| d no closing tag <hr> horizontal rule <br> line break INTERNET STUDIO Class 2 r. <': n Marin: -i
  101. 101. ll'Fl_lsIEllt3iE VS lilSi3li°’i‘fii' ON: ’@= tJR P EEZT INTERNET STUDIO Class 2
  102. 102. Il'Fl_l: JEIl€: E INTERNET STUDIO Class 2
  103. 103. Hrvie Srrcn 5ll‘['’. r.' LPGALILHV viw. Au cnuxnhvs HAYLJHKO H)5Il. JN' Mugged I An Arllur Featured Showcase: Gal E I Tl f’c. nd~c. bku. ta III'| RI LOGOPON . logopond. com 1 1:, .‘ , ,._ t-.1u: ~.. ;u ' ! h>I{'! I:
  104. 104. THE DIFI INF TVE DIEI INF WINF THE DIFLINF AWARDS THF DIEIINF CONFERENCE I I fi W V the worlds #1 package design website about directory robs‘ advertise register sign l"i ‘by Hoogesteger ‘ ': .—. ._ ' L’ I _ ‘ v . e - . J * = " ) Nowvoucansav ~ / ‘ mi i. .-rvi. r IH| t ’M‘1Ii7l‘ lll-'7 I iii i><vIIliHv. . lr‘<l, lA‘_IlI(_' [l'I Ilrlypl K '[ J _- § ilIpliIy» alrll illi-A . ~ aéj J J / ‘by Hoogesteger I5 a lBn'. BSllC JLIC8 Uflfllt story lrom Holand its a raw brand to: the Dutch mane! aasec aroiinc our big idea ul "Just ptcked and , '.wesse<! ' Since 1955 llull expert Piei Hoogt-zslegt-r has supolied h-5 Inca seasonal ]. AICe to hotels aro res: a.irarrs 0.11 challenge was to create ar‘ honest: siraigrit tormrc brand: to reflect ’IlS uncompromising approach to creating the purest , uices Our brand name: ‘try Hoogeslegef. 3 direct and SUB 9l'. lorward Ou' big idea. ‘[451 picked and pressed : symixxises lmll morphing I'| lO _u. ce and allows Ihe mg. -edieris to speak Icir lhemselves Frum 3" I THE DIELINE : thedieIine. com pausellnrtliouglif smart design for brands wilh purpuse E ‘ : "tit
  105. 105. I CSSMAN A LATEST UPDATES (LOOKING FOR COLOURS) _ . .. T . . __r (I r-H-u-—-AI--an-an Wham 0 Salim Rahman ; U T “ } CSS MANIA cssmanIa. com LOFTENBERG ‘ ! *THES| |J| §S* I . DESIGN TO XHTML ERILLIANTIJ’ AFFORDABLE We Dsign 59° Code your Newsletter The real web hosnng iocalec In Sca n No 111! h<>: .nr>g
  106. 106. ax Subscfibe V Find 'AI-rlclcs ‘ Logos l1lu_-itralians ‘ Websites ‘ Business Cards 4 Photos ‘ Patterns - Fouls 5 I’7m‘TL: 'IvV 'hL~1,oflmI“c-nv ‘*v; uq. .« m. .- :5f_1‘I. ~‘, U:: i., :oo. -«; ,I, I'I, --37. 1-, ._. a‘r. »,_g} ¢(-'-_ r,44g_>Ii'I'1'; ;‘, . ~-.0"-‘-Li/ "'§3z. ’u-. -=: i»'. '-‘ T. T: V 43:; -r T Ev. " - 0 :5 T; >: :‘~-y'}w: .t': T"': ’-: ’ "V" V T» T : ii2H?72A4717.. c’f: ’—T4 " I Kg I 1‘! :2 . “~ ‘xi 1 ‘ ‘I I Stock Designs “ ' T 6:; I I‘ V ‘‘. g; & LOGOS -- 7 1 ‘ o _’L ' 6- ‘E To I ‘ Crvsmvc-l'd/ 'IwI1Is I I ' BRILLIANTLY AFFORDABLE ‘ - J You'll Love , ;. LI :41 A / ' OC .1 , THE DESIGN II! SPIR! -Ti0II I I thedesigninspiration. com/ category/ websites ‘ '. .r3'I!1 , ~
  107. 107. What are you working on? DnDb": >?e IS show and 1e I for creatwes. Sign up as a apecunom POPULAR HIGHUGHTS EVERYONE DEBUTS PLAYOFFS E cums Gum . .« an-o-on Ivo- Iogo mu5'. .'at on con tyrxmvaphy Cesnnn reruve uu . veb5:2c~ upnon-3 cons web verio' tyne EIDD bL. !!: >r ADS EV DRIDEIIJLE w. - . ... -u a Lead un Designer mtrfi n. :«. ».n. _~, 4.vmr; r1n». .gr, .-4, ‘ frxrrn IJIF | 'VL' {car-. ROGUES 4 :3 Curt‘: Stacks! f Adam Korobnko I Qavon Jochsch E Rob Erskine E Matthew Harpin n Amanda Wallace
  108. 108. l’(‘l1II| gl1llll Quid: Llnls Hm-~, Pearce as Sam. at AICA/ NV A Cu: 0' Cr. vI|4:4: -. :~ Eco: Opuu tutu-II.1yn: n!n Sarah :1 men Cen: ':I PA w. c~. u~I GI. -nc-no Sax-ah av AIGA Wb: on-sm Amm Mllcv '. u So-: .:| < . u AICA Cm. c4sI»d Da"u. - we. 5 C| cv: k ‘ov an An: 'I<! I.-K I'c: u1cI.1 I’| I :5‘. Ccr‘1.‘LIry 0cm. v~. c IIDN wan Gom And Sam M (. .m: u~. x Nr. -waPcn1agram AIIPOSB -- Ponlobo Partners Omccs Danie-I Weil: Drawing the Process LIko many doslgvs. Pentagram’: Dance-I Weul uses s-Ietchung Io wsualnze. generals and ralnne rzs Ideas Wed has, by rvs estImahon. mo'eI'1an 375 skmchoooks. gov-g all the way back I0 1978 In a new short Illm Irecled by Ncolas Heller Well shale: some 0! I145 recani notebooks afid talks abo. n how dvawung helps hm Imk Ideas Imm subqsms as Moe-(wgmg as Kanonsky and vac. ... I-I cleaners mspmng new lawns and oqacls him In mcsnl Dock lo: an Arcmecl Sun In the him an axe-Izhes Io: Weul : week My Motnorcaro. Bononon ma israol Musoum. Unlod A-«mos anamo Savoy Hotel ‘In a way we nooks n-. -come mm a dusty and record Io: My Ihoughls ma mags I see. me Ihmgs I INNK about. mama desugm | ‘m oes>gnmq, ‘snys Wel 'DIawmg Is adesngmaia Mos! Iundamenlm loot ll .5 nosugx mnklrq made wsnnto ‘ Anmocluv. humus. Puck-O¢"I. Proeuzu. Landau Du-cl wml. Vldoo 01/24/20l)'PvmIIuIn PENTAGRAM LJQ9D§I'Lt31'3;TI_-QQLTI
  109. 109. IEEIVI IS INTERNET STUDIO Class 2
  110. 110. VLOCK bit. l/hA225l INTERNET STUDIO Class 2 ‘~ v H ‘II ‘: ',‘r:
  111. 111. Pentagranfsjames Bib: -r's redesigned Starbucks logo ~—— not used 197! NET STARBUCKS bit. I/ eQNTX INTERNET smono Class 2 _ 7°"
  112. 112. Life who D: -r. .-; n any-f» -up u. ... ... » . ., p. ..». y v . .., rm: um , - __. _M, ", N| IMm| Iv. »4v Dvwqn / I'IuI‘-]u| l'r, ‘Jv vv V s. ,.. I.. ~;. D‘-MITWI , ,,W_. ‘,l‘_] '>HI II r. ‘uc. u.~. ... -nwug 0.. ... .” Wm r In) m_; v. ., u. ‘:. m.u_, 1976 1982 I989 I995 1999 1» . E I to ‘n11 1:11 1;. I: ;; - 1' x > : : " - RIO” School Ek_, m,: m|. ‘" Pvtidle ! I.g}I School Cilllujt '~'>rkf: .|:9
  113. 113. RAINBOW IN YOUR HAND ’ masa-ka. com/ htmUrainbow. html A INTERNET STUDIO Class 2
  114. 114. LESSON IN A TWEET 77.75 . x'0/1/2‘/ an you m~‘zzfu is 0/2/_ 1/ as‘ . s‘fr0/lg ax Z‘/ .78 / >20/2/5//1 yozz '-2'5 (/ é"/ T/I(’('{. INTERNET STUDIO Class 2 I v II ‘M =
  115. 115. Influence / Jappens 7.0/Jen you’re looking for it. Inspiration / Jappens 7.0/Jen you’re not. INTERNET STUDIO Class 2 Ken Starzer
  116. 116. INSPIRATION . ..I$ different for everyone . ..g: an't be scheduled . ..I$ elusive
  117. 117. RATIO I . ,. }.: . , .. .IS E‘zI'I'I'€i'<-2i‘I'I' ror eve I"y0i"I8. 7738/7 a'on’1‘ worry (I/ )0]/ Z‘ -w/ am‘ ~wo2'/ <5‘ for f/ ye/71. Finn’ oz/1‘ -w/ .701‘ Two)‘/ cs / oryoz/ . INTERNET STUDIO Class 2
  118. 118. INSPIRATION . ..can't be Scheduled. 77.75/2 ironic. ’ 015)/ >oI‘f1// zifias‘ fo 1'/ It/ ‘czI_s‘c yo; /7‘ c/ .7mza’. s‘ for 1.715]? /.I‘(Iz‘I'0/I. INTERNET STUDIO Class 2 P<"I1 , I-'II'7I"l
  119. 119. INSPIRATION . ..| s elusive. 77.78/I / _7(l‘Z’(’ (I /9/an fo (‘(1/51.‘/ /I1’ if. INTERNET STUDIO Class 2 I21‘ I’! ,uII‘. I'fI' I
  120. 120. IPAD SKETCHBDOK 5.1;. malts -: c~rv~ E W K S E 0 M FIELD NOTES MEMD BDDK EDWARD TUFTE GRAPH PAPER 4 . -52.. ... .
  121. 121. LESSON IN A TWEET I/ g//1/U/ Ia’ 2'5 /7o2‘2‘o‘uw/ , / "m/ >z'mf1'o/ z ix m/ vim’. CIFIIXL’ 0/J/ >o2‘f1/zzif/ "ox fo M/ ‘/7 if, (7/zz/ /.711-1.’: [I / >/(Ill / so ((1/Jfz/21) if. INTERNET STUDIO Class 2 Ia-' n ‘-IF1’, 'I'I

×