HTML5-CSS3/html5.html at master · janbthomas/HTML5-CSS3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>HTML5</title>
<style type="text/css">
body {
	font-family:	Arial, Helvetica, sans-serif;
	font-size:		12px;
	color: #333399;
	background-color: #FFFFFF;
	margin-bottom: 20px;
	}

.mainBody {
	margin-left: auto;
	margin-right: auto;
	width: 900px;
}
section, header, footer, .mainVideo {
	display: block;
}

.contentSection {
	display: block;
	clear: both;
}

.mainContent {
	display: inline-block;
	width: 550px;
}

aside {
	display: inline-block;
	width: 250px;
	font-style: italic;
	vertical-align:top;
}

#video {
	width: 450px;
	display: inline-block;
	vertical-align: top;
}
#videotext {
	width: 350px;
	display: inline-block;
	vertical-align: top;
}
.html5-examples {
	display: block;
}
.logo {
	float:left;
}
nav li {
	display: inline-block;
	padding: 10px;
}
</style>
</head>
<body>
<header>
  <h1 align=center>New HTML 5 tags</h1>
</header>
<div class="mainBody">
  <div id="mainVideo">
  <div id="video">
  <embed src="video/Artwork.swf" width="400" height="200" wmode="transparent" volume="0" />
  </div>
  <div id="videotext">
  <p>HTML5 allows for mp4, ogg and webm.  With flash use the embed tag.  With YouTube use the iframe.  According to YouTube this will run the HTML5 video player.</p>
  <p><a href="http://www.janbthomas.com/dragdrop.php" target="_blank">See an examle of Drag and Drop</a></p>
  <p><a href="http://www.janbthomas.com/simple-gallery.php" target="_blank">See an example of CSS3: shading and transitions.</a></p>
  </div>
  </div>
<div class="html5-examples">
  <header>
    	<img src="images/janbthomas.png" alt="janbthomas.com web development" class="logo"/>
        <h1>Jan's HTML5 Website</h1>
    <nav>
      <ul>
        <li><a href="index.php">HOME</a></li>
        <li><a href="websites.php">WEBSITES</a></li>
        <li><a href="about.php">ABOUT JAN</a></li>
        <li><a href="jansblog">BLOG</a></li>
      </ul>
    </nav>
   </header>

   <div class="contentSection">
   <div class="mainContent">
    <p>Semantic HTML - Want to label your elements according to their function on the page.  Here are some tags:</p>
    <p>HTML5 header tag used multiple times on a page.  Can include introductory or navigational elements.</p>
    <p>HTML5 nav tag holds navigational items.  A nav tag can go inside of a header.</p>
    <p>HTML5 footer tag holds information about the company or person that produced content on the page.</p>
    <p>HTML5 aside tag is for information that does not directly relate to the main content on the page.</p>
    <p>HTML5 section tag groups related information together.</p>
    </div>

    <aside>
    <p>View the HTML5 wiki page to see what new and exciting things can be done with HTML5 pages.</p>
    </aside>
    </div>
    <footer>
    <p id="copywrite">&copy; 2014 JanBThomas Last Updated February 2014. <a href="jansblog/privacy-policy" class="uline">Privacy Policy</a></p>
    </footer>
  </div>
</div>
</body>
</html>