Tasc workshop presentation

<HACKASAURUS>  

Learn  HTML  and  CSS    

Learn  more  about  STEM      

Remix  websites  from  the  web  

GOALS  

Science  Technology  Engineering  Math  

GOALS  

PARTICIPANTS    

MOUSE      

TASC    

HACKASAURUS/  HIVE  (introducHon  from  Omar  and  Youssef)      

hKp://hackasaurus.org/en-­‐US/  

INTRODUCTIONS  

What  is  meant  by  the  term  hack?    

Why  is  learning  about  the  web  and  hacking  important?    

What  exactly  is  a  hack  jam?    

Who  created  Hackasaurus?    

What  happens  when  hack  jam  parHcipants  publish  their  hacked  webpages  online?  

 What  is  HTML  and  CSS?  

QuesHons  

Hack      1.  To  cut  or  chop  with  repeated  

and  irregular  blows  

2.  To  break  up  the  surface  of  (soil).    3.  To  alter  (a  computer  program):  

hacked  her  text  editor  to  read  HTML.  

 4.  To  gain  access  to  (a  computer  

file  or  network)  illegally  or  without  authorizaHon:  hacked  the  firm's  personnel  database.  

DefiniHon  from  The  Free  DicHonary:    hKp://www.thefreedicHonary.com/hacking  

Hack  a  dance  move!  

ELEMENTS:    

 I  can  <em>  hear</em>  you!      

ATTRIBUTE:      

<a  href=“hAp://wikipedia.org”>Wikipedia</a>  is  cool.      

NO  CLOSING  TAG:      

<img  src=“hAp://seriouscat.com/serious_cat_is_serious.jpg”>      

NESTING:  a  href=“hAp://en.wikipedia.org/wiki/Lolcat”>  <img  src=”hAp://seriouscat.com/serious_cat_is_serious.jpg”>    

</a>    

FULL  LIST  HERE:  hKps://developer.mozilla.org/en/HTML/Element  

HTML  

STYLE  ATTRIBUTE:    I  can  <em  style=“color:  red”>hear</em>  you!    

 SEMICOLONS:    

I  can  <em  style=“color:  red;  background:  pink”>hear</em>  you!                

hKps://developer.mozilla.org/en/CSS_Reference    

CHEAT  SHEET  

CSS  

Macintosh:      Copy:  Command  +  C  Paste:  Command  +  V      PC:    Copy:  CTRL  +  C  Paste:  CTRL  +  V      

Copy  &  Paste  

<img  width="150"  height="150"  src="hKp://www.progeKodiogene.eu/DEV/wp-­‐content/uploads/2011/02/tram04-­‐150x150.jpg"  class="aKachment-­‐thumbnail"  alt="Tram  ProgeKo  Diogene"  Htle="Tram  ProgeKo  Diogene"  style="opacity:  1;  ">  

Images:  jpg,  png,  gif  

Install    hKp://hackasaurus.org/en-­‐US/goggles/    Cheat  sheets    Demonstrate    Before:    hKp://www.prospectpark.org/environment/wildlife    

Amer:  hKp://poof.hksr.us/pxlixgzq  

X-­‐RAY  GOGGLES  

1.  Choose  a  STEM  based  website      2.  Use  goggles  to  examine  html  content  on  page      3.  Edit  content  on  page  in  whatever  way  you  want    4.  Publish  your  new  website!  

HACK  A  WEBSITE  

hKp://www.prospectpark.org/environment/wildlife  

hKp://www.ptable.com/    

BIODIVERSITY  

CHEMISTRY  

hKp://www.space.com/  

OUTER  SPACE  

hKp://antoine.frostburg.edu/chem/senese/101/index.shtml  

Share    Discussion    Badges    

SHARING