First commit

Apress · Oct 16, 2016 · 8396f66 · 8396f66
commit 8396f66
Show file tree

Hide file tree

Showing 728 changed files with 34,861 additions and 0 deletions.
diff --git a/9781430247166.jpg b/9781430247166.jpg
diff --git a/Code - Published/.DS_Store b/Code - Published/.DS_Store
diff --git a/Code - Published/chapter01/.DS_Store b/Code - Published/chapter01/.DS_Store
diff --git a/Code - Published/chapter01/absolutePositioning/absolutePositioning.html b/Code - Published/chapter01/absolutePositioning/absolutePositioning.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>Absolute positioning</title>
+
+<style>
+
+#stage
+{
+  position: relative;
+  display: block;
+  width: 400px;
+  height: 300px;
+  border: 1px dashed black;
+}
+
+#square
+{
+  position: absolute;
+  top: 120px;
+  left: 200px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: black;
+}
+
+</style>
+
+<div id="stage">
+  <div id="square"></div>
+</div>
diff --git a/Code - Published/chapter01/backgroundImages/backgroundImages.html b/Code - Published/chapter01/backgroundImages/backgroundImages.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<title>Background images</title>
+
+<style>
+
+#cat
+{
+	width: 100px;
+	height: 100px;
+	background-image: url("cat.png");
+}
+
+</style>
+
+<div id="cat"></div>
diff --git a/Code - Published/chapter01/backgroundImages/cat.png b/Code - Published/chapter01/backgroundImages/cat.png
diff --git a/Code - Published/chapter01/class/class.html b/Code - Published/chapter01/class/class.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>Using a class</title>
+
+<style>
+
+.animal
+{
+	font-family: Monaco, "Courier New", monospace;
+  font-size: 50px;
+}
+
+</style>
+
+<div class="animal">Cat</div>
+<div class="animal">Tiger</div>
+<div class="animal">Hedgehog</div>
diff --git a/Code - Published/chapter01/classAndId/classAndId.html b/Code - Published/chapter01/classAndId/classAndId.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>Using a class and id together</title>
+
+<style>
+
+.animal
+{
+	font-family: Monaco, "Courier New", monospace;
+	font-size: 30px;
+}
+
+#cat
+{
+	font-style: italic;
+}
+
+#tiger
+{
+	font-weight: bold;
+}
+
+#hedgehog
+{
+	text-decoration: underline;
+}
+
+</style>
+
+<div class="animal" id="cat">Cat</div>
+<div class="animal" id="tiger">Tiger</div>
+<div class="animal" id="hedgehog">Hedgehog</div>
diff --git a/Code - Published/chapter01/floatingElements/cat.png b/Code - Published/chapter01/floatingElements/cat.png
diff --git a/Code - Published/chapter01/floatingElements/floatingElements.html b/Code - Published/chapter01/floatingElements/floatingElements.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<title>Floating elements</title>
+<style>
+
+#stage
+{
+  display: block;
+	width: 400px;
+	height: 300px;
+	border: 1px dashed black;
+}
+
+img
+{
+	display: block;
+}
+
+</style>
+
+<div id="stage">
+  <img src="cat.png">
+  <img src="tiger.png">
+  <img src="hedgehog.png">
+</div>
diff --git a/Code - Published/chapter01/floatingElements/hedgehog.png b/Code - Published/chapter01/floatingElements/hedgehog.png
diff --git a/Code - Published/chapter01/floatingElements/tiger.png b/Code - Published/chapter01/floatingElements/tiger.png
diff --git a/Code - Published/chapter01/floatingElementsFinished/.DS_Store b/Code - Published/chapter01/floatingElementsFinished/.DS_Store
diff --git a/Code - Published/chapter01/floatingElementsFinished/cat.png b/Code - Published/chapter01/floatingElementsFinished/cat.png
diff --git a/Code - Published/chapter01/floatingElementsFinished/floatingElementsFinished.html b/Code - Published/chapter01/floatingElementsFinished/floatingElementsFinished.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<title>Floating elements</title>
+
+<style>
+
+@font-face 
+{
+  font-family: LondrinaSolid-Regular;
+  src: url("LondrinaSolid-Regular.otf");
+}
+
+#stage
+{
+  display: block;
+	width: 400px;
+	height: 300px;
+	border: 1px dashed black;
+}
+
+h1
+{
+  clear: left;
+  display: block;
+  text-align: center;
+	padding-top: 50px;
+	font-family: LondrinaSolid-Regular;
+	font-size: 40px;
+}
+
+.animal
+{
+	display: block;
+	width: 100px;
+	height: 100px;
+	margin-left: 25px;
+	margin-top: 50px;
+	float: left;
+}
+
+#cat
+{
+  background-image: url("cat.png");
+}
+
+#tiger
+{
+  background-image: url("tiger.png");
+}
+
+#hedgehog
+{
+  background-image: url("hedgehog.png");
+}
+
+</style>
+
+<div id="stage">
+<div class="animal" id="cat"></div>
+<div class="animal" id="tiger"></div>
+<div class="animal" id="hedgehog"></div>
+<h1>Dangerous Animals!</h1>
+</div>
diff --git a/Code - Published/chapter01/floatingElementsFinished/hedgehog.png b/Code - Published/chapter01/floatingElementsFinished/hedgehog.png
diff --git a/Code - Published/chapter01/floatingElementsFinished/tiger.png b/Code - Published/chapter01/floatingElementsFinished/tiger.png
diff --git a/Code - Published/chapter01/id/id.html b/Code - Published/chapter01/id/id.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<title>Using an id</title>
+
+<style>
+
+#stage
+{
+  width: 400px;
+	height: 300px;
+	border: 1px dashed black;
+}
+
+</style>
+
+<div id="stage"></div>
diff --git a/Code - Published/chapter01/organizingFiles/newStyle.css b/Code - Published/chapter01/organizingFiles/newStyle.css
@@ -0,0 +1,9 @@
+h1
+{
+  font-size: 40px;
+}
+
+p
+{
+  font-family: Helvetica, Verdana, Arial, sans-serif; 
+}
diff --git a/Code - Published/chapter01/organizingFiles/simpleDocument.html b/Code - Published/chapter01/organizingFiles/simpleDocument.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<title>A simple document</title>
+<link rel="stylesheet" href="newStyle.css">
+
+<h1>Page Heading</h1>
+<p>A bit of text.</p>
diff --git a/Code - Published/chapter01/projectFolder/.DS_Store b/Code - Published/chapter01/projectFolder/.DS_Store
diff --git a/Code - Published/chapter01/projectFolder/images/.DS_Store b/Code - Published/chapter01/projectFolder/images/.DS_Store
diff --git a/Code - Published/chapter01/projectFolder/images/photo.jpg b/Code - Published/chapter01/projectFolder/images/photo.jpg
diff --git a/Code - Published/chapter01/projectFolder/sounds/song.mp3 b/Code - Published/chapter01/projectFolder/sounds/song.mp3
diff --git a/Code - Published/chapter01/projectFolder/src/.DS_Store b/Code - Published/chapter01/projectFolder/src/.DS_Store
diff --git a/Code - Published/chapter01/projectFolder/src/main.html b/Code - Published/chapter01/projectFolder/src/main.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>Organizing project folders</title>
+<link rel="stylesheet" href="style.css">
+
+<h1>Organizing project folders</h1>
+
+<h2>Images</h2>
+<img src="../images/photo.jpg">
+
+<h2>Video</h2>
+<video controls>
+<source src="../videos/movie.mp4">
+</video>
+
+<h2>Audio</h2>
+<audio controls>
+<source src="../sounds/song.mp3">
+</audio>
diff --git a/Code - Published/chapter01/projectFolder/src/style.css b/Code - Published/chapter01/projectFolder/src/style.css
@@ -0,0 +1,14 @@
+h1, h2
+{
+	font-family: Monaco, Courier, monospace;
+}
+
+h1
+{
+	font-size: 20px;
+}
+
+h2
+{
+	font-size: 16px;
+}
diff --git a/Code - Published/chapter01/projectFolder/videos/movie.mp4 b/Code - Published/chapter01/projectFolder/videos/movie.mp4
diff --git a/Code - Published/chapter01/simpleWebPage/ocean.jpg b/Code - Published/chapter01/simpleWebPage/ocean.jpg
diff --git a/Code - Published/chapter01/simpleWebPage/simpleWebpage.html b/Code - Published/chapter01/simpleWebPage/simpleWebpage.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+<title>A web page</title>
+</head>
+
+<body>
+
+<h1>A simple web page</h1>
+<p>Everything you see on this page was made using basic HTML tags.</p>
+
+<h2>This is a sub-heading</h2>
+<p>You use HTML tags to <em>structure information</em>. This is a paragraph of text structured with a p tag.</p>
+
+<h2>Making lists</h2>
+<p>You can also use tags to <strong>make a list</strong> of things.</p>
+<ul>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ul>
+
+<h2>Adding links</h2>
+<p>Its easy to create hyperlinks to other web pages, or to create a link to generate an email. Here's how:</p>
+<ul>
+  <li><a href="http://www.w3schools.com" target="_blank">Here's a good resource</a> for learning HTML.</li>
+  <li>If you want to say Hi, <a href="mailto:hello@kittykatattack.com?Subject=Hello%20there!">Send me an email</a>.</li>
+</ul>
+
+<p>Add a photo with an img tag, like this:</p>
+<img src="ocean.jpg" alt="A photo of the ocean">
+
+</body>
+</html>
diff --git a/Code - Published/chapter01/styledWebPage/ocean.jpg b/Code - Published/chapter01/styledWebPage/ocean.jpg
diff --git a/Code - Published/chapter01/styledWebPage/styledWebpage.html b/Code - Published/chapter01/styledWebPage/styledWebpage.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>A web page</title>
+<style>
+
+h1
+{
+	font-family: Georgia, “Times New Roman”, serif;
+	font-size: 30px;
+	color: #7924ff;
+	font-style: italic;
+	font-weight: bold;
+}
+
+h2
+{
+  font-family: "Lucida Console", Monaco, monospace;
+  font-size: 20px;
+  color: teal;
+}
+
+p, li
+{
+
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 16px;
+}
+
+em
+{
+	text-decoration: underline;	
+	font-style: normal;
+}
+
+strong
+{
+	font-weight: bold;
+	color: red;
+}
+
+
+li 
+{
+	list-style-type: square;
+}
+
+a
+{
+	color: green;
+	text-decoration: none;
+}
+
+a:hover
+{
+	background-color: black;
+	color: white;
+}
+
+img
+{
+  width: 250px;
+	height: auto;
+	border-style: dashed;
+	border-width: 2px;
+	border-color: navy;
+	padding: 10px;
+}
+
+</style>
+</head>
+
+<body>
+<h1>A simple web page</h1>
+<p>Everything you see on this page was made using basic HTML tags.</p>
+
+<h2>This is a sub-heading</h2>
+<p>You use HTML tags to <em>structure information</em>. This is a paragraph of text structured with a p tag.</p>
+
+<h2>Making lists</h2>
+<p>You can also use tags to <strong>make a list</strong> of things.</p>
+<ul>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ul>
+
+<!-- This is a comment in the document. It won't appear in the web browser-->
+
+<h2>Adding links</h2>
+<p>Its easy to create hyperlinks to other web pages, or to create a link to generate an email. Here's how:</p>
+<ul>
+  <li><a href="http://www.w3schools.com" target="_blank">Here's a good resource</a> for learning HTML.</li>
+  <li>If you want to say Hi, <a href="mailto:hello@kittykatattack.com?Subject=Hello%20there!">Send me an email</a>.</li>
+</ul>
+
+<p>Add a photo with an img tag, like this:</p>
+<img src="ocean.jpg" alt="A photo of the ocean">
+
+</body>
+</html>
diff --git a/Code - Published/chapter02/.DS_Store b/Code - Published/chapter02/.DS_Store