sololearn html5

26.1 introduction to html

<DOCTYPE HTML> <meta charset="UTF-8">

27.1 content model

  • Metadata
  • Embedded
  • Interactive
  • Heading
  • Phrasing
  • Flow
  • Sectioning

28.1 html5 structure

  • header
  • nav
  • artcle
  • section
  • footer

29.1 header, nav, & footer

<body>
  <header>
    <h1>most important heading</h1>
    <h3>less important heading</h3>
  </header>
</body>

<footer></footer>

<nav>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">about us</a></li>
    </ul>
</nav>

30.1 article, section & aside

<article>
    <h1>the article title</h1>
    <p>contents of the article element</p>
        <section>
            <h1>heading</h1>
            <p>content or image</p>
        </section>
        <aside>
            <p>gift will be delivered to you whithin 24 hours</p>
        </aside>  
</article>

31.1 the audio element

<audio src="audio.mp3" controls>
  audio element not supported by your browser
</audio>
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="aduio.ogg" type="audio/ogg">
  audio element not support by your browser
</audio>
<audio controls autoplay loop>

32.1 the video element

<video controls autoplay loop>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" tyoe="video/ogg">
  vido is not supported by your browser
</video>

33.1 the progress element

status: <progress min="0" max="100" value="35">
</progress>

34.1 web storage api

  • local storage
  • session storage
    localstorage.setItem("key1","value1");
    alert(localStorage.getItem("key1")); localStorage.removeItem("key1"); localStorage.clear();

35.1 geolocation api

navigation.geolocation.getCurrentPossition();

36.1 drag&drop api

<img draggable="true" />

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      function allowDrop(ev){
      ev.preventDefault();
      }
      function drag(ev){
      ev.dataTransfer.setData("text", ev.target.id);
      }
      function drop(ev){
      ev.preventDefault();
      var data = ev.dataTranafer.getData("text");
      
      ev.target.appendchild(document.getElementById(data));
      }
    </script>
  </head> 
  <body>
    <div id="box" ondrop="drop(event)"
    ondragover="allowDrop(event)"
    style="border:1px solid black;
    width:200px; height:200px"></div>
    
    <img id="image" src="sample.jpg" draggable="true"
    ondragstar="drag(event)" width="150" height="50"
    alt="" />
  </body>
</html>