HTML5

HTML - Hypertext Markup Language is a basic building block of every webpage. This is the fifth and current version of the HTML standard. 
HTML is a client-side technology, this means that web browser compiles it.

HTML is used for structuring and presenting content of a webpage means here user can code and specify header, footer, section, aside panel etc.



HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard.

HTML is client-side technology, this means that web browser compiles it.



Doctype specifies that webpage follows the standard of HTML5

HTML specifies the start/end of document

Head contains information for web browsers, web bots etc

Body is the place where user writes it code/contents

<!DOCTYPE html>
<html lang="en-pk">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="ICT Trainings delivers trainings on IT.">
    <title>Interact Academy | Best Training Institute</title>
</head>
<body>
    <h1>Interact Academy&copy; - Web Development</h1>
    <hr>
    <img src="images/pmp-ad.jpg" alt="Web Development Course Starting">
    <h2>HTML</h2>
    <p>
        <em>HTML - Web development is the work involved in developing a website</em> what we call "back-end processing". There are numerous steps in the web development process. From gathering basic information to the formation of the site, and finally the maintenance of page to keep the website up-to-date. Web development can range from establishing a simple single page of plain text to complex web-based internet applications.

    </p>
</body>
</html>

 



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Text Tags [P, Span]</title>
</head>
<body>
    <p>paragraph – use to display plain text in block formation &nbsp; here</p>
    <pre>text here</pre>
    <span>span - use to display plain text in non-block formation</span>
    <p><dfn>HTML is the standard markup language for creating web pages.</dfn></p>
</body>
</html>

 



<ul></ul> unordered list – creates an unordered list
<ol></ol> ordered list – creates an ordered list 

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>Text Tags [UL, OL]</title>
</head>
<body>
   <ul>
     <li>HTML5</li>
     <li>CSS3</li>
     <li>JS</li>
   </ul>
</body>
</html>

 



<dl></dl> definition list – use to explain terms
<details></details> details – create an expand/collapse effect 

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>Text Tags [DL, Details]</title>
</head>
<body>
   <details>
      <summary>List</summary>
      <dl>
          <dt>HTML5</dt><dd>HyperText Markup Language</dd>
          <dt>CSS3</dt><dd>Cascading Style Sheet</dd>
      </dl>
   </details>
</body>
</html>

 



img – display images on the webpage

image map – allows placing links on different parts of one image

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>Incorporate Images & Image Map</title>
</head>
<body>
   <img src="image.png" alt="image" usemap="#Map">
<map name="Map">
   <area shape="circle" coords="225,65,48" href="http://ict-trainings.com" target="_blank">
   <area shape="circle" coords="311,250,40" href="http://ict-innovative.com" target="_blank" alt="">
</map>
</body>
</html>

 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>Display a guage: </p>
    <meter value="50" min="0" max="100">0 out of 100</meter>
    <meter value="0.7" >70%</meter>
     
    <progress></progress>
    <progress value="40" max="100"></progress> 

    <figure><img src="sales2010.jpg"></figure>

    <!– Used to add plugins/embed videos to HTML-->
    <embed width="600" height="300" src="videos/how-to-create-stock-photos.mp4"></embed>

    <dialog open>This is an open dialog window</dialog>
</body>
</html>

 



SVG images can be saved as the smallest size, unlike png, jpeg and other image format.

It does not contains fixed set of dots so it is easily print with high resolution.

SVG image can zoom a certain level without decreasing the picture quality.

You can easily edit SVG image with using any text editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
    </svg>

    <svg width="200" height="100">
        <rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />
    </svg>
    
    <svg width="210" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:yellow;
           stroke-width:5; fill-rule:nonzero;" />
    </svg> 

    <img src="images/angular.svg" width="100">
</body>
</html>

 



Html5 introduce new tag which is used to draw graphics on the web page.

It draws graphics on the web by using JavaScript.

Canvas is only a container for graphics you must need to write a script to draw graphics on a webpage.

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>Canvas</title>
</head>
<body>
   <canvas id="myCanvas" width="200" height="100" style="border:3px solid #FDFF06;"> </canvas>
   <script>
       var c = document.getElementById("myCanvas");
       var ctx = c.getContext("2d");
       ctx.fillStyle = "#FF0000";
       ctx.fillRect(0,0,150,100);
   </script>
</body>
</html>