Tasc workshop presentation

1,781 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,781
On SlideShare
0
From Embeds
0
Number of Embeds
1,109
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tasc workshop presentation

  1. 1. <HACKASAURUS>  
  2. 2. Learn  HTML  and  CSS     Learn  more  about  STEM       Remix  websites  from  the  web   GOALS  
  3. 3. Science   Technology   Engineering   Math   GOALS  
  4. 4. PARTICIPANTS     MOUSE       TASC     HACKASAURUS/  HIVE  (introducHon  from  Omar  and  Youssef)       hKp://hackasaurus.org/en-­‐US/   INTRODUCTIONS  
  5. 5. 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  
  6. 6. 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  
  7. 7. Hack  a  dance  move!  
  8. 8. 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  
  9. 9. 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  
  10. 10. Macintosh:       Copy:  Command  +  C   Paste:  Command  +  V       PC:     Copy:  CTRL  +  C   Paste:  CTRL  +  V       Copy  &  Paste  
  11. 11.     <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  
  12. 12. 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  
  13. 13. 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  
  14. 14. 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  
  15. 15. Share     Discussion     Badges     SHARING  

×