-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHTML5-Ch1-7.html
More file actions
180 lines (158 loc) · 11.1 KB
/
HTML5-Ch1-7.html
File metadata and controls
180 lines (158 loc) · 11.1 KB
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths" lang="en" style=""><!--<![endif]-->
<head>
<title>Test page for semantic tags</title>
<!-- <meta details go here>
<meta charset="utf-8">
<meta name="viewport"bcontent="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="HTML5-style-2.css">
<style>
/* Your styles go here */
</style>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<meta property="og:title" content="A Basic HTML5 Template" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
<meta name="description" content="A simple HTML5 Template for new projects.">
<meta name="author" content="Orris A BakerJr">
<meta name="google-adsense-account" content="ca-pub-9639638377144073">
<meta property="og:title" content="A Basic HTML5 Template">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
<meta property="og:description" content="A simple HTML5 Template for new projects.">
<meta property="og:image" content="image.png">
<meta name="theme-color" content="#712cf9">
<meta name="keywords" content="HTML5, Node.js, Jquery">
<meta name="author" content="Ian Andolina">
<!-- Optional Metadata-->
<meta property="og:audio" content="https://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />
<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<!--og: video example:-->
<meta property="og:video" content="https://example.com/bond/trailer.swf" />
<meta property="og:video" content="https://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
<!-- A full image example:-->
<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />
<!-- Favicon-->
<!--<link rel="icon" href="images/favicon.ico">-->
<link rel="apple-touch-icon" href="./images/apple-touch-icon.png">
<!--<link rel="stylesheet" href="css/styles.css?v=1.0">-->
<link rel="alternate" type="application/pdf" href="MainPage.pdf">
<link rel="author" href="mailto:[email protected]">
<link rel="author" type="text/html" href="https://orrisb.github.io">
<!-- Bootstrap Icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<!-- SimpleLightbox plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<!--
<link rel="stylesheet" type="text/css" href="CSS/squaretabs.css">. -->
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./talks.css" />
<script src="js/prefixfree.min.js"></script>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="../Bootstrap/dist/assets/img/HTMLBadge.ico">
<link rel="icon" type="image/x-icon" href="../Bootstrap/dist/assets/favicon.ico">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9639638377144073" crossorigin="anonymous"></script>
<!--conditional Javascript added-->
<!--[if lte IE 8]>
<script src="html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Your page text and tags go here -->
<div id="container"> <!--surround header and border with a container-->
<header> <!--change <div id="hdr"> to <header>-->
<h1>Practical HTML5 Projects</h1>
</header>
</div> <!--close top section - content area starts -->
<div id="content">
<h2>Better Solutions To Everyday Web Design Problems</h2>
<div id="leftcol">
<h3>Cottages, converted barns, caravans</h3><img alt="Cottage interior" title="Cottage interior" height="225" src="images/cotdining300.jpg" width="300">
<br>The superb interior of one of our cottages
</div>
<nav><!--use the semantic tag <nav>-->
<ul><!--start of menu list-->
<li class="btn"> <a href="accommodation.html" title="Accommodation">Accommodation</a></li>
<li class="btn"><a href="maps.html" title="Location Maps">Maps</a></li>
<li class="btn"><a href="faqs.html" title="Frequently Asked Questions">Information</a></li>
<li class="btn"><a href="attractions.html" title="Local attractions">Attractions</a></li>
<li class="btn"><a href="contact.html" title="Contact us">Contact Us</a></li>
<li class="btn"><a href="index.html" title="Return to Home Page">Home Page</a></li>
</ul><!--end of menu list-->
</nav><!--remove </div> and replace with </nav>-->
<div id="midcol">
<h3>Situated in the UK's beautiful Devon countryside</h3>
<img title="Devon countryside" alt="Devon countryside" src="images/devon398.jpg" height="229" width="398">
</div>
<br class="clear">
</div><!--content section closed-->
<!--change <div id=footer"> to <footer> and enclose text in a paragraph so that it can be centred -->
<!--change <div id=footer"> to <footer> and enclose text in a paragraph so that it can be centred -->
<footer role="contentinfo">
<div class="footer-inner">
<a href="../"><h1For Fun & Profit</h1></a>
<div class="company-details">
<p class="copyright"> © <time datetime="2013">2024</time> MarieJanes HTML5 for Fun and Profit</p>
<p class="distributor">Distributor: Findlater HempSmarts Inc & Cannabis in Action Group</p>
<p class="address">414 W 127th, New York, NY 10027</p>
<p class="telephone-number">Tel: 212-665-1678</p>
</div>
<hr class="full">
<div class="footer-nav">
<ul>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-106"><a href="#">Our Story</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="#">Our Flowers</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="#">Where To Buy</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-116"><a href="#" Blog Competition</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="#">Contact</a></li>
</ul>
<a href=" #" class="drinkaware">Enjoy Life Sensibly</a>
</div>
<hr class="full">
<div class="legalese">
<a href="#" class="visit-dot-com"><span>Visit </span>https://orrisb.github.io/#</a>
<a href="#">Cookie & Privacy Policy</a>
<a href="#">Terms & Conditions</a>
</div>
<div class="room150-link">
<a href=" #" class="designed-by">Website design by <span>Orris Baker Jr</span></a>
</div>
</div>
</footer> <!-- /footer -->
<script>
// Your JavaScript code goes here
</script>
-->of the
</body>
</html>