HTML5WS

From mi-linux
Revision as of 16:10, 3 August 2011 by In9352 (talk | contribs)
Jump to navigationJump to search

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
<!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>
Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=HTML5WS&oldid=6890"