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>

 



CSS3

If you are one, when you see an impressive demonstration of a new CSS3 feature, you can’t wait to start using it in websites.

Of course, then you see that it is available in only one or two of the major browsers (and this never includes IE), so ultimately you decide to wait. The good news for you – with the latest browser releases, there are a few awesome features that are finally supported everywhere, and you can start using them right now!



1. Style solves the common problem:

Different browsers act differently to documents, so W3C standardized CSS standard that is supported by all major browsers.

2. Stylesheet can save a lot of work:

Font and Style attributes of HTML are used to format the document, so we define them using CSS in a separate file, by changing at one place we can modify our entire website pages.

3. Multiple style cascade:

Style can cascade into many ways i.e. into a single element, head or external files.



Three parts of CSS

  • The Style
  • Their Placement
  • Style Cascade

Style Definition

  • Selector
  • Declaration [Property:Value]


Custom CSS (ID & Class) Styles

HTML Base/Tag Styles

Advanced CSS Selector Styles

  • A particular combination of tags
  • A specific id attribute

Psuedo Classes e.g. a:hover



Custom CSS (Class) Selector can apply on any HTML tag 

<head>
<style type="text/css">
  body{ color: blue;}
  h2,h3,h5 { color: green;}
  h1{
    font-size: 36px;
    font-weight: bold;
    color: blue;
  }
  p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: red;
  }
</style>
</head>


 



<head>
        <style type="text/css">
        /* Applying selector on specific tag */
        p.uppercase {text-transform: uppercase}
        p.lowercase {text-transform: lowercase}
        p.capitalize {text-transform: capitalize}
        p.bkclr {background-color: #0000ff;}
        /* Can apply selector on any tag */
        .lowercase {text-transform: lowercase}
        </style>
</head>
<body>
        <p class="uppercase">This is some text in a paragraph</p>
        <p class="lowercase">This is some text in a paragraph</p>
        <p class=”bkclr”>This is some text in a paragraph</p>
</body>
</html>

 

 



<html>
<head>
    <style type="text/css">
    #uppercase {text-transform: uppercase}
    #bkclr {background-color: #0000ff;}
    </style>
</head>
<body>
    <p id="uppercase">This is some text in a paragraph</p>
    <p id=“bkclr">This is some text in a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">#container p{color:red;}
    td h3 {color: blue;}
    </style>
</head>
<body>
    <h3>This is some text in a paragraph</h3>
    <table border="0" cellspacing="8"cellpadding="0" >
    <tr>
    <td width="800" valign="middle"colspan="2">
    <h3>Now h3 is in td to test context style</h3>
    </td>
    </tr>
    <div id=“container”><p>Great to be here</p></div>
</body>
</html>

 



 Div tag can be place anywhere in the document. We can use it in absolute or relative to other elements.


    <div id=“myDiv”>
    </div>
    Child <div> tag
    <div id=“myDiv”>
    <div id=“childDiv”></div>
    </div>
   

 



<head>
        <style type=“text/css”>
        #myDiv{ position: absolute; top: 25px; left: 11px; width: 560px; height:350; background-color: grey;}.box
        </style>
</head>
<body>
    <div id=“myDiv”>
    <div class=“box”></div>
    </div>
</body>

 



<html>
<head>
    <style type="text/css">
    h3 {font-family: times}
    p {font-family: courier}
    p.sansserif {font-family: sans-serif}
    </style>
</head>
<body>
    <h3>This is header 3</h3>
    <p>This is a paragraph</p>
    <p class="sansserif">This is a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    h1 {font-style: italic}
    h2 {font-style: normal}
    p {font-style: oblique}
    </style>
</head>
<body>
    <h1>This is header 1</h1>
    <h2>This is header 2</h2>
    <p>This is a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p.normal {font-variant: normal}
    p.small {font-variant: small-caps}
    </style>
</head>
<body>
    <p class="normal">This is a paragraph</p>
    <p class="small">This is a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p.normal {font-weight: normal}
    p.thick {font-weight: bold}
    p.thicker {font-weight: 900}
    </style>
</head>
<body>
    <p class="normal">This is a paragraph</p>
    <p class="thick">This is a paragraph</p>
    <p class="thicker">This is a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{font: italic small-caps 900 12px arial}
    </style>
</head>
<body>
    <p>This is a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p.dotted {border-style: dotted}
    p.dashed {border-style: dashed}
    p.solid {border-style: solid}
    p.double {border-style: double}
    p.groove {border-style: groove}
    p.ridge {border-style: ridge}
    p.inset {border-style: inset}
    p.outset {border-style: outset}
    </style>
</head>
<body>
    <p class="dotted">A dotted border</p>
    <p class="dashed">A dashed border</p>
    <p class="solid">A solid border</p>
    <p class="double">A double border</p>
    <p class="groove">A groove border</p>
    <p class="ridge">A ridge border</p>
    <p class="inset">An inset border</p>
    <p class="outset">An outset border</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p.soliddouble {border-style: solid double}
    p.doublesolid {border-style: double solid}
    p.groovedouble {border-style: groove double}
    p.three {border-style: solid double groove}
    </style>
</head>
<body>
    <p class="soliddouble">Some text</p>
    <p class="doublesolid">Some text</p>
    <p class="groovedouble">Some text</p>
    <p class="three">Some text</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p.one{border-style: solid;border-color: #0000ff}
    p.two{border-style: solid;border-color: #ff0000 #0000ff}
    p.three{border-style: solid;border-color: #ff0000 #00ff00 #0000ff}
    p.four{border-style: solid;border-color: #ff0000 #00ff00 #0000ffrgb(250,0,255)}
    </style>
</head>
<body>
    <p class="one">One-colored border!</p>
    <p class="two">Two-colored border!</p>
    <p class="three">Three-colored border!</p>
    <p class="four">Four-colored border!</p>
    <p><b>Note:</b> The "border-color"property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{border-style: solid;border-bottom-width: 15px}
    </style>
</head>
<body>
    <p><b>Note:</b> The "border-bottom-width"property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{border-style: solid;border-left-width: 15px}
    </style>
</head>
<body>
    <p><b>Note:</b> The "border-left-width"property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{border-style: solid;border-right-width: 15px}
    </style>
</head>
<body>
    <p><b>Note:</b> The "border-right-width"property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{border-style: solid;border-top-width: 15px}
    </style>
</head>
<body>
    <p><b>Note:</b> The "border-top-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{border-bottom: medium solid #ff0000}
    </style>
</head>
<body>
    <p>Some text.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p {border-left: medium solid #ff0000}
    </style>
</head>
<body>
    <p>Some text.</p>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    p.one{border-style: solid;border-width: 5px}
    p.two{border-style: solid;border-width: 5px 10px}
    p.three{border-style: solid;border-width: 5px 10px 1px}
    p.four{border-style: solid;border-width: 5px 10px 1px medium}
</style>
</head>
<body>
    <p class="one">Some text</p>
    <p class="two">Some text</p>
    <p class="three">Some text</p>
    <p class="four">Some text</p>
    <p><b>Note:</b> The "border-width" property
    does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    p{border: medium double rgb(250,0,255)}
</style>
</head>
<body>
    <p>Some text</p>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
    <p>This is a paragraph with no margin specified</p>
    <p class="leftmargin">This is a paragraph with a specified left margin</p>
</body>
</html>

 



<html>
<head>
 <style type="text/css">
     p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
    <p>This is a paragraph with no margin specified</p>
    <p class="rightmargin">This is a paragraph with a specified right margin</p>
</body>
</html>
                

 



<html>
<head>
<style type="text/css">
    p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
    <p>This is a paragraph with no margin specified</p>
    <p class="topmargin">This is a paragraph with a specified top margin</p>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
    <p>This is a paragraph with no specified margins</p>
    <p class="margin">This is a paragraph with a specified margins</p>
    <p>This is a paragraph with no specified margins</p>
</body>
</html>      

 



<html>
<head>
<style type="text/css">
    td {padding-left: 2cm}
</style>
</head>
<body>
    <table border="1">
    <tr>
    <td>This is a tablecell with a left padding. This is a tablecell with a left padding.</td>
    </tr>
    </table>
</body>
</html> 

 



<html>
<head>
<style type="text/css">
    td {padding-bottom: 2cm}
</style>
</head>
<body>
    <table border="1">
    <tr>
    <td>This is a table cell with a bottom padding</td>
    </tr>
    </table>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    ul.disc {list-style-type: disc}
    ul.circle {list-style-type: circle}
    ul.square {list-style-type: square}
    ul.none {list-style-type: none}
</style>
</head>
<body>
    <ul class="disc">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul>
    <ul class="circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul>
    <ul class="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul>
    <ul class="none">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    ul{list-style-image: url('arrow.gif')}
</style>
</head>
<body>
    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul> 
</body>
</html>