Skip to content

Commit 1a6a5d5

Browse files
author
Apress
committed
First commit
0 parents  commit 1a6a5d5

File tree

741 files changed

+13736
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

741 files changed

+13736
-0
lines changed

‎9781430242758.jpg

8.6 KB
Loading

‎LICENSE.txt

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
Freeware License, some rights reserved
2+
3+
Copyright (c) 2012 Adrian W. West
4+
5+
Permission is hereby granted, free of charge, to anyone obtaining a copy
6+
of this software and associated documentation files (the "Software"),
7+
to work with the Software within the limits of freeware distribution and fair use.
8+
This includes the rights to use, copy, and modify the Software for personal use.
9+
Users are also allowed and encouraged to submit corrections and modifications
10+
to the Software for the benefit of other users.
11+
12+
It is not allowed to reuse, modify, or redistribute the Software for
13+
commercial use in any way, or for a user�s educational materials such as books
14+
or blog articles without prior permission from the copyright holder.
15+
16+
The above copyright notice and this permission notice need to be included
17+
in all copies or substantial portions of the software.
18+
19+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22+
AUTHORS OR COPYRIGHT HOLDERS OR APRESS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25+
SOFTWARE.
26+
27+

‎Practical HTML5 Projects/Code01/HTML5-Ch1-7.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<head>
4+
<title>Test page for semantic tags</title>
5+
<meta charset=utf-8>
6+
<link rel="stylesheet" type="text/css" href="HTML5-style-2.css">
7+
<!--conditional Javascript added-->
8+
<!--[if lte IE 8]>
9+
<script src="html5.js">
10+
</script>
11+
<![endif]-->
12+
</head>
13+
<body>
14+
<!--<div id="container">--><!--surround header and border with a container-->
15+
<header><!--change <div id="hdr"> to <header>-->
16+
<h1>Devon's Rural Retreats</h1>
17+
</header>
18+
<!--</div>--><!--close top section - content area starts -->
19+
<div id="content">
20+
<h2>Award winning accommodation, self catering or bed and breakfast</h2>
21+
<div id="leftcol">
22+
<h3>Cottages, converted barns, caravans</h3><img alt="Cottage interior" title="Cottage interior"
23+
height="225" src="images/cotdining300.jpg" width="300"><br>The superb interior
24+
of one of our cottages
25+
</div>
26+
<nav><!--use the semantic tag <nav>-->
27+
<ul><!--start of menu list-->
28+
<li class="btn"> <a href="accommodation.html" title="Accommodation">Accommodation</a>
29+
</li>
30+
<li class="btn"><a href="maps.html" title="Location Maps">Maps</a>
31+
</li>
32+
<li class="btn"><a href="faqs.html" title="Frequently Asked Questions">Information</a>
33+
</li>
34+
<li class="btn"><a href="attractions.html" title="Local attractions">Attractions</a>
35+
</li>
36+
<li class="btn"><a href="contact.html" title="Contact us">Contact Us</a>
37+
</li>
38+
<li class="btn"><a href="index.html" title="Return to Home Page">Home Page</a>
39+
</li>
40+
</ul><!--end of menu list-->
41+
</nav><!--remove </div> and replace with </nav>-->
42+
<div id="midcol">
43+
<h3>Situated in the UK's beautiful Devon countryside</h3>
44+
<img title="Devon countryside" alt="Devon countryside" src="images/devon398.jpg"
45+
height="229" width="398">
46+
</div>
47+
<br class="clear">
48+
</div><!--content section closed-->
49+
<!--change <div id=footer"> to <footer> and enclose text in a paragraph so that it
50+
can be centred -->
51+
<footer><p>Footer goes here</p>
52+
</footer>
53+
</body>
54+
</html>

‎Practical HTML5 Projects/Code01/HTML5-style-2.css

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*equalise for various browsers and change #header to header*/
2+
div body header #content { margin:0; padding:0; border:0;
3+
}
4+
body { background:#FFF url(images/green-grad.jpg) repeat-x; margin:auto;
5+
}
6+
/*add display attributes for the semantic tags*/
7+
header, footer, section, article, nav { display:block;
8+
}
9+
/*remove the # from #header*/
10+
header {width:920px; height:180px; padding:0; border:10px white solid;
11+
background: url(images/header3.jpg); margin:10px auto;
12+
}
13+
h1 { font-size:300%; color :white; position: relative; left:90px; top: 55px; width:480px;
14+
}
15+
#rosette { position:relative; left:750px; top:5px; }
16+
#content { background-color:transparent; border-left:10px white solid; border-right:10px white solid;
17+
border-bottom:10px white solid; width: 904px; margin-top:-10px; margin-left:auto; margin-right:auto; padding:8px; font-size:medium; color:maroon;
18+
}
19+
h2 { font-size:x-large; color:white; margin:0 0 10px 0;
20+
}
21+
h3 { font-size:large; color:white; margin:0 0 6px 0;
22+
}
23+
#leftcol { float:left; width: 310px; vertical-align:top;
24+
}
25+
/*#rightcol { width: 135px; float:right; height: 252px; margin-right:10px;
26+
}*/
27+
#midcol { margin-left:315px; margin-right:145px; margin-top:10px; vertical-align:top;
28+
}
29+
/*set nav block position and width*/
30+
/*nav { margin:10px 30px 0 10px; width:135px; float:right;
31+
}*/
32+
nav ul { margin:10px 0 10px 0; width:135px; float:right;
33+
}
34+
/*Set un-ordered list style within the menu block only. This removes bullets*/
35+
nav li { list-style-type:none;
36+
}
37+
/* set general side button styles */
38+
li.btn { margin-bottom: 3px; text-align: center; width:130px;
39+
}
40+
/* set general anchor styles and include the zoom fix for IE6*/
41+
li.btn a { display: block; color: white; font-weight: bold; text-decoration: none; zoom:1;
42+
}
43+
/* specify mouse state styles */
44+
/* mouseout (default) */
45+
li.btn a { background:#559a55; color: white; border: 5px outset #559a55; padding-bottom:3px;
46+
}
47+
/* mouseover */
48+
li.btn a:hover { background: red; color:white; border: 5px outset red;
49+
}
50+
/*mouse active*/
51+
li.btn a:active { background:maroon; border: 5px inset maroon;
52+
}
53+
br.clear { clear:both;
54+
}
55+
#midcol img { margin-left:10px;
56+
}
57+
footer { clear:both; color:maroon; text-align:center;
58+
}

‎Practical HTML5 Projects/Code01/SVG-inline-circle.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<head>
4+
<title>Embed an SVG circle inline</title>
5+
<meta charset=utf-8>
6+
</head>
7+
<body>
8+
<h1> SVG </h1>
9+
<svg>
10+
<!--<svg xmlns="http://www.w3.org/2000/svg" version="1.1">-->
11+
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="blue">
12+
</svg>
13+
</body>
14+
</html>

‎Practical HTML5 Projects/Code01/aside.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<head>
4+
<title>HTML5 exercise, an aside</title>
5+
<meta charset=utf-8>
6+
<style type="text/css">
7+
h1 {
8+
font-size:160%; font-weight:bold;
9+
}
10+
aside, section, article {
11+
display:block;
12+
}
13+
section {width:450px; margin:auto;
14+
}
15+
article {
16+
width:445px; text-align:left;
17+
}
18+
aside {width:180px; padding:5px; margin:5px 0 0 5px; float: right;
19+
border:1px black solid;
20+
}
21+
</style>
22+
<!--[if lte IE 8]><!--conditional Javascript added-->
23+
<script src="html5.js" type="text/javascript">
24+
</script>
25+
<![endif]-->
26+
</head>
27+
<body>
28+
<section>
29+
<h1>Which browser should you design for?</h1>
30+
<article>
31+
<strong>The answer is all of them.</strong> If you survey a group of computer
32+
aficionados you will get very different answers compared with the general
33+
public’s answers.&nbsp;
34+
I worked as a freelance computer technician for over eleven years, During that
35+
period
36+
I never came across a single person who was using a browser other than Internet Explorer.
37+
<aside>
38+
The great majority of ordinary folk are using IE because it came pre-installed with their computers.
39+
</aside>
40+
None had ever heard of Mozilla Firefox, although I did meet one person whose son had put Firefox on his computer,
41+
he wanted me to remove it because he did not know what it was.
42+
The great majority of ordinary folk are using IE because it came pre-installed
43+
with their computers. When reading magazine surveys, it would be safer to increase the survey figures for Internet Explorer.
44+
The result would mean that you should make sure that your websites work in IE7 and IE8 because these
45+
are the most popular by default. It would be safe to predict that there will be a strong swing
46+
towards IE 9 when it is finalised in 2011.
47+
</article>
48+
</section>
49+
</body>
50+
</html>

‎Practical HTML5 Projects/Code01/blue-circle-svg.svg

+5
Loading

‎Practical HTML5 Projects/Code01/figure.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<head>
4+
<title>Using the Figure and Caption tags</title>
5+
<meta charset=utf-8>
6+
<style type="text/css">
7+
figure, hgroup { display:block;
8+
}
9+
figure {width:300px; padding:10px; border:1px black solid;
10+
}
11+
</style>
12+
<!--[if lte IE 8]>
13+
<!--conditional Javascript added-->
14+
<script src="html5.js" type="text/javascript">
15+
</script>
16+
<![endif]-->
17+
</head>
18+
<body>
19+
<figure>
20+
<img alt="The river Coly" height="196" src="images/colrivblu.jpg" width="298" />
21+
<figcaption><br>Fig 10 Using the HTML5 figure tag
22+
</figcaption>
23+
</figure>
24+
</body>
25+
</html>

‎Practical HTML5 Projects/Code01/html5-nav.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<head>
4+
<title>The nav tag</title>
5+
<meta charset=utf-8>
6+
<link rel="stylesheet" type="text/css" href="nav-style.css">
7+
<!--[if lte IE 8]>
8+
<script src="html5.js">
9+
</script>
10+
<![endif]-->
11+
</head>
12+
<body>
13+
<div id="container">
14+
<header>
15+
<h1>header goes here</h1>
16+
</header>
17+
<nav>
18+
<ul>
19+
<li><a href="#" title="Page 2">Page Two</a></li>
20+
<li>
21+
<a href="#" title="Page 3">Page Three
22+
</a></li>
23+
<li>
24+
<a href="#" title="Page 4">Page Four</a></li>
25+
<li><a href="#" title="Home page">
26+
Home Page</a></li></ul>
27+
</nav>
28+
<div id="content">
29+
<article>
30+
<strong>Article<br></strong>From a local newspaper:<p><strong>Are you illiterate?</strong><br />Write today for a <strong>Free</strong> course.<br>
31+
Easy payment terms. </p>
32+
</article>
33+
<article>
34+
<strong>Another Article</strong><br>Poster in store window:<p>
35+
<strong>Stock up for Christmas</strong><br>Limited to one per
36+
family.<br>Free Delivery &pound;2</p></article>
37+
<article>
38+
<strong>Another Article</strong><br />Mark Twain said:-&quot;Life is one darn thing after another&quot;<p>
39+
So true, but we can still laugh about it</p></article>
40+
</div></div>
41+
<footer>
42+
<strong>Footer goes here</strong>
43+
</footer>
44+
</body>
45+
</html>

‎Practical HTML5 Projects/Code01/html5.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Practical HTML5 Projects/Code01/images/_vti_cnf/cotdining300.jpg

+4
Loading

‎Practical HTML5 Projects/Code01/images/_vti_cnf/devon420.jpg

+4
Loading

‎Practical HTML5 Projects/Code01/images/_vti_cnf/green-grad.jpg

+4
Loading

‎Practical HTML5 Projects/Code01/images/_vti_cnf/header3.jpg

+4
Loading

‎Practical HTML5 Projects/Code01/images/_vti_cnf/rosette-128.png

+4
Loading

‎Practical HTML5 Projects/Code01/images/colrivblu.jpg

25.6 KB
Loading

‎Practical HTML5 Projects/Code01/images/cotdining300.jpg

23.1 KB
Loading

‎Practical HTML5 Projects/Code01/images/devon384.jpg

34.5 KB
Loading

‎Practical HTML5 Projects/Code01/images/devon398.jpg

35.6 KB
Loading

‎Practical HTML5 Projects/Code01/images/green-grad.jpg

933 Bytes
Loading

‎Practical HTML5 Projects/Code01/images/header3.jpg

28.2 KB
Loading

‎Practical HTML5 Projects/Code01/images/menu-bullet.gif

237 Bytes
Loading

‎Practical HTML5 Projects/Code01/images/rosette-128.png

5.85 KB
Loading

‎Practical HTML5 Projects/Code01/inline-svg.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<head>
4+
<title>HTML5 inline SVG</title>
5+
<meta charset=utf-8>
6+
</head>
7+
<body>
8+
<h1> SVG </h1>
9+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
10+
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="blue">
11+
</svg>
12+
</body>
13+
</html>

‎Practical HTML5 Projects/Code01/mark.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<head>
4+
<title>HTML5 exercise, mark</title>
5+
<meta charset=utf-8>
6+
<!--[if lte IE 8]><!--conditional Javascript added-->
7+
<script src="html5.js" type="text/javascript">
8+
</script>
9+
<![endif]-->
10+
<style type="text/css">
11+
h1 {
12+
font-size:160%; font-weight:bold; margin-top:5px; margin-bottom:0;
13+
}
14+
h2 {
15+
font-size:130%; font-weight:bold; margin-top:0; margin-bottom:5px;
16+
}
17+
aside, section, article {
18+
display:block;
19+
}
20+
#content {width:450px; margin:auto;
21+
}
22+
article {
23+
width:445px; text-align:left;
24+
}
25+
aside {width:180px; padding:5px; margin:5px 0 0 5px; float: right;
26+
border:1px black solid;
27+
}
28+
mark {
29+
background-color:#FFCC66;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<div id="content">
35+
<h1>A demonstration of &lt;mark&gt;</h1><br/>
36+
<h2>Which browser should we design for?</h2>
37+
<article>
38+
<strong>The answer is all of them.</strong> If you survey a group of computer
39+
aficionados you will get very different answers compared with the general
40+
public’s answers.&nbsp;
41+
I worked as a freelance computer technician for over eleven years, During that
42+
period
43+
I never came across a single person who was using a browser other than <mark>Internet Explorer</mark>.
44+
<aside>
45+
The great majority of ordinary folk are using <mark>IE</mark> because it came pre-installed with their computers.
46+
</aside>
47+
None had ever heard of Mozilla Firefox, although I did meet one person whose son had put Firefox on his computer,
48+
he wanted me to remove it because he did not know what it was.
49+
The great majority of ordinary folk are using <mark>IE</mark> because it came pre-installed
50+
with their computers. When reading magazine surveys, it would be safer to increase their survey figures for <mark>Internet Explorer.</mark>
51+
The result show that you should ensure that your websites work in <mark>IE7</mark> and <mark>IE8</mark> because these
52+
are the most used (by default). It would be safe to predict that there will be a strong swing
53+
towards <mark>IE 9</mark> from 2011.
54+
</article>
55+
</div>
56+
</body>
57+
</html>

‎Practical HTML5 Projects/Code01/mysvg.svg

+4
Loading

0 commit comments

Comments
 (0)