Skip to content

Instantly share code, notes, and snippets.

@NSkelsey

NSkelsey/whatisdom.html

Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NSkelsey/d590af722007d604aa8a to your computer and use it in GitHub Desktop.
Save NSkelsey/d590af722007d604aa8a to your computer and use it in GitHub Desktop.
Download ZIP
annas
Raw
whatisdom.html
<!DOCTYPE html>
<html>
<head>
<title> Anna's Explanation of the Document Object Model </title>
</head>
<body style=
"background-color:#6699ff;
text-align:center;
font-family:MyriadPro-Regular;
font-size:40px;
color:#ffffff;
margin=0px auto;"/>
<!-- Head links -->
<div>
<a href="https://www.youtube.com/watch?v=-LXl4y6D-QI">
<img src="images/smiley.png" width="70" height="70" style="float: right; width: 5%; margin-left: 0.01%;" />
</a>
<a href="http://www.w3schools.com/dom/dom_nodes_create.asp">
<img src="images/exclampoint.png" width="70" height="70" style="float: right; width: 5%; margin-left: 0.01%;" />
</a>
<a href="http://bit.ly/1oButQW">
<img src="images/questionmark.png" width="70" height="70" style="float: right; width: 5%; margin-left: 0.01%;"/>
</a>
</div>
<!-- The Lead -->
<div>
<img src="images/header.png" width="900" height="300" style="float:center" />
</div>
<div>
<hr style=
"height:5px;
width:40%;
align:center;
color:#ffffff;
background-color:#ffffff" />
</div>
<!-- DOM definition -->
<img src="images/LOL DOM Jokes.jpg" width="700" height="500"/>
<div style="background:#85adff; border:1px solid #85adff; padding: 8px 6px; text-align:center; float:center; box-shadow:10px 10px 30px 0px #1f2e4c">
<span style="font-size:40px;" />
<br>
<p><i>defined as:</i></p>
<p>
"a platform and language-neutral interface that allows programs
and scripts to dynamically access and update the content, structure,
and style of a document"
</p>
<a href="http://www.w3.org/DOM/">
<p style="font-size:25px;">(world wide web consortium)</p>
</a>
</span>
</div>
<!-- JC Confu -->
<img src="http://www.lezebre.lu/images/21629-trollface-meme-jackie-chan-s.png" width="800" height="800" float:center;/>
<p>
feeling like Jackie Chan?
</p>
<img src="images/dancers.png" style="float:left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">
<img src="images/dancers2.png" style="float:left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">
<img src="images/dancers3.png" style="float:left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">
<p style="clear:both;"></p>
<!-- Explanation -->
<div>
<hr style=
"height:3px;
width:30%;
align:center;
color:#ffffff;
background-color:#ffffff" />
<b><u><p style="float: center;">SIMPLIFIED</p></b></u>
<br>
</div>
<div style="background:#b2ccff; border:1px solid #b2ccff; padding: 8px 6px; text-align:center; float:left; width: 40%; box-shadow:10px 10px 30px 0px #1f2e4c">
<p>
<span style= "font-size:40px;" />
<i>for the auditory learners:</i>
<br>
The DOM let's you manipulate HTML to allow JavaScript to interact with it to create dynamic web pages.
</p>
</div>
<div style="background:#b2ccff; border:6px solid #b2ccff; padding: 11px 9px; text-align:center; float:right; width: 40%; box-shadow:10px 10px 30px 0px #1f2e4c font-size:40px;" />
<p><i>for the visual learners:</i></p>
<p>how JavaScript utilizes the DOM to communicate with HTML</p>
<p style="font-size:25px;">
(in chart form)
</p>
</div>
<div style="background:#85adff; border:1px solid #85adff; padding: 8px 6px; text-align:center; float:center; box-shadow:10px 10px 30px 0px #1f2e4c">
<img src="images/ocdchart.png"/>
</div>
<div>
<hr style=
"height:5px;
width:40%;
align:center;
color:#ffffff;
background-color:#ffffff" />
</div>
<!-- Conclusion -->
<div style="background:#d1e0ff; border:1px solid #d1e0ff; padding: 8px 6px; text-align:center; float:left; width: 47%; box-shadow:10px 10px 30px 0px #1f2e4c">
<p>(before)</p>
<p>most people's initial response to the DOM...</p>
<br>
<img src="http://themidnightalliance.files.wordpress.com/2013/08/running-scared.gif" width="100%" height="310"/>
</div>
<div style="background:#d1e0ff; border:1px solid #d1e0ff; padding: 8px 6px; text-align:center; float:right; width: 47%; box-shadow:10px 10px 30px 0px #1f2e4c">
<p>(after)</p>
<p>*hopefully* most people's response to the DOM...</p>
<br>
<img src="https://courtneyinecuador.files.wordpress.com/2014/07/understand.gif" width="100%" height="310"/>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment