tasc workshop presentation
DESCRIPTION
TRANSCRIPT
<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