Difference between revisions of "HTML5WS"
From mi-linux
Jump to navigationJump to search| Line 11: | Line 11: | ||
* New semantic elements, e,g, header, section, footer | * New semantic elements, e,g, header, section, footer | ||
* New placeholder attribute for the text boxes | * New placeholder attribute for the text boxes | ||
| + | |||
| + | It link to a simple stylesheet (see code further down), as well as 3 JavaScript files: | ||
| + | *pusher.js | ||
| + | *jquery-1.6.2.min.js | ||
| + | *websockets.js | ||
<pre> | <pre> | ||
Revision as of 16:11, 3 August 2011
Main Page >> Advanced Web Technologies >> Workbook >> Week 05 - HTML5 Web Sockets
HTML5 Web Sockets
This page features the full code of the following webpage: http://mi-linux.wlv.ac.uk/~in9352/websockets/
index.html
The webpage itself is using the brand new HTML5 Document type, as well as HTML5 new features:
- New semantic elements, e,g, header, section, footer
- New placeholder attribute for the text boxes
It link to a simple stylesheet (see code further down), as well as 3 JavaScript files:
- pusher.js
- jquery-1.6.2.min.js
- websockets.js
<!DOCTYPE HTML>
<html>
<head>
<title>Share a happy thought</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://js.pusherapp.com/1.9/pusher.js"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/websockets.js"></script>
</head>
<body>
<header>
<h1>Share a happy thought</h1>
<p>An idea, a saying, a funny quote, a link... anything!</p>
</header>
<section id="new-message">
<form>
<input type="text" id="yourname" placeholder="Your name">
<input type="text" id="yourmessage" placeholder="Your happy thought">
<input type="button" id="postit" value="Post">
<span id="debugmessage"></span>
</form>
</section>
<section id="messages"></section>
<footer>
Powered by
<a href="http://www.html5rocks.com/en/">HTML5</a>,
<a href="http://dev.w3.org/html5/websockets/">Web Sockets</a>,
<a href="http://pusher.com/">Pusher</a>,
<a href="http://jquery.com/">JQuery</a> and
<a href="http://www.css3.info/">CSS3</a>.
Copyright 2011 by Alix Bergeret. All Rights Reserved.
</footer>
</body>
</html>
