Contribute
HTML 5

Introduction to HTML5

Topics to be covered

  • What HTML5 is
  • Semantic Markup
  • Forms
  • Audio & Video
  • Data Storage
  • What is CSS
  • Inheritance and Cascading
  • Style Sheets
  • Page Layout and Nav bars
  • Web Matrix and Demo

What HTML 5 is
HTML5 is the fifth version of HTML. Now what is HTML? thinkzoo HYPER TEXT MARKUP LANGUAGE. Caps means I am shouting, but it is a shout that needs to be done. Let's understand each word of it. Hyper as we all know means to get exaggerated or tempered about something. Here it also has a similar meaning, when taken together with Hyper Text. This means it gives a simple text a hyper meaning. For instance, a simple text video writes changes to an Iframe where a video is played when rendered on a browser. HTML is used to create web pages in web applications. WebPages! In a simple way, a page that is rendered on the web is called a web page. Let us get a brief history of it also. :( Though the sad part is let's get into it a bit.

timeline

The preceding image says it all. But I would like to describe something interesting here. HTML4 was to be suppressed by XHTML but the World Wide Web Consortium (W3C) never got heavily biased by XHTML. HTML5 was being secretly developed by the WHATG group. HTML5 is a combination of many technologies and techniques and approaches for the web. Thus the HTML5 was so convincing that it was approved by the W3C recently.

Semantic Markup

First let's understand what semantic is! Semantic in the dictionary means it is related to meaning in language and logic. That means what logic/idea you get you derive text out of it and HTML5 gives you the desired output. Like for instance, you think of logic where you want a user to show the amount of download/upload done or progressed. So here we derive the word progress and HTML5 gives the tag element that gives a GUI letting the user know the progress done in the process. Thus, Semantic Markup means that the markup language does not only have syntax/syntactical meaning but also has a semantic meaning.

Doctype html simplified

That has been simplified prior to the previously used and has been replaced. Just for information, the syntax is case-insensitive.

The image shows, the html starts with the doctype that lets the web browser know that the document being loaded is of type "html".

Then is the html lang="en" that states that the HTML document is written in the English language.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <link rel="stylesheet" href="/StyleSheet.css" />  
  6.         <script src="/Script.js"></script>  
  7.         <title>MSDC Odisha</title>  
  8.     </head>  


Forms in HTML

HTML Forms are required when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card and so on. A form takes the input from the user and stores them in the server. Various attributes are:
  • Action: Backend/Server-side code for storing the records.

  • Method: GET/POST, suggests whether to post data/input or get the data input into the form elements.

  • Target: Specifies the window/frame where the end result script will be shown, _blank, _self, _parent.

We will see the example in the demo codes.

  1. <form name="contactForm">  
  2.   
  3.                    <label for="fName">First Name</label><br />  
  4.                    <input type="text" id="fName" name="fName" placeholder="Firstname" />  
  5.                    <br /><br />  
  6.                    <label for="lName">Last Name</label><br />  
  7.                    <input type="text" id="lName" name="lName" placeholder="Lastname" />  
  8.                    <br /><br />  
  9.                    <label for="eMail">E-Mail</label><br />  
  10.                    <input type="email" id="eMail" name="eMail" placeholder="E Mail" multiple />  
  11.                    <br /><br />  
  12.                    <label for="homepage">Homepage Url</label><br />  
  13.                    <input type="url" name="homepage" />  
  14.                    <br /><br />  
  15.                    <label for="add">Phone Number</label><br />  
  16.                    <input type="tel" id="phone" name="ph" />  
  17.                    <br><br>  
  18.                    <label for="add">Address</label><br />  
  19.                    <input type="text" id="add" name="add" placeholder="Address" />  
  20.                    <br><br>  
  21.                    <label for="comments">Comments</label><br />  
  22.                    <textarea id="comments" name="comments"></textarea>  
  23.                    <br /><br />  
  24.                    <input type="submit" id="save" class="buttonS" value="Save" />  
  25.                    <input type="button" id="retrieve" class="buttonR" value="Retrieve" />  
  26.                    <input type="button" id="delete" class="buttonD" value="Delete" />  
  27.                </form>  


Audio & Video
  1. <video autoplay width="400" controls>  
  2.             <source src="/4-10-2014 8-06-00 PM.mp4" type="video/mp4">  
  3.         </video>  
  4.         <audio controls>  
  5.             <source src="" type="audio/mp4">.  
  6.         </audio>  

In HTML5, there is no need any more to use iframes and load the videos/audios. The HTML5 audio and video tags make it simple to add media files to a website. We just need to set the src attribute to let the frame know which video or audio to play and also it sets the other attribute like a loop that plays the media file continuously, auto play lets the media file play when the page loads, controls let the controls icons to view on the frame and height width.

Data Storage

This is a very new concept that has been introduced in HTML5 that helps store data in case there is a slow connection. Thus this introduces a balance between server-side and the client-side processing. This is an extension to cookies. There are the following two types of data storage schemes:
  • Session Storage
  • Local Storage

Local Storage

Before HTML5 was introduced, data was stored in cookies and code was maintained on the server only. But now in HTML5, local storage is introduced where data can be stored in large bulk, without affecting the performance of the website. Unlike cookies, the storage limit is 5MB. The Local storage is based on the domain. All pages can access the stored data from the same domain since the data gets stored locally. window.localStorage: (stores without expiration time).

  1. function initiate(){  
  2.     var saveButton = document.getElementById("save");  
  3.     var retrieveButton = document.getElementById("retrieve");  
  4.     var deleteBUtton = document.getElementById("delete");  
  5.     saveButton.addEventListener('click', saveItem);  
  6.     retrieveButton.addEventListener('click', retrieveItem);  
  7.     deleteBUtton.addEventListener('click', deleteItem);  
  8. }  
  9.   
  10. function saveItem(){  
  11.     var firstName = document.getElementById("fName").value;  
  12.     var lastname = document.getElementById("lName").value;  
  13.     var email = document.getElementById("eMail").value;  
  14.     var address = document.getElementById("add").value;  
  15.     var comments = document.getElementById("comments").value;  
  16.     localStorage[firstName] = address;  
  17.     document.getElementById("fName").value = "";  
  18. }  
  19.   
  20. function retrieveItem(){  
  21.     var data = document.getElementById("retrieveData");  
  22.     var firstName = document.getElementById("fName").value;  
  23.     var add = localStorage[firstName];  
  24.     data.innerHTML =  add;  
  25. }  
  26. function deleteItem(){  
  27.     if (confirm('Delete?')) {  
  28.         var firstName = document.getElementById("fName").value;  
  29.         localStorage.removeItem(firstName);  
  30.         alert("Deleted");  
  31.         document.getElementById("retrieveData").value = '';  
  32.     }  
  33. }  
  34. addEventListener("load", initiate);  


Session Storage

Before HTML5 was introduced, data was stored in cookies and code was maintained on the server only. But now in HTML5, session storage is introduced where data can be stored without affecting the performance of the website. Unlike Local Storage, in the session storage, the data is stored in the session and it also depends on the session. Once the session expires, the data is lost. But this not the case in the local storage. The data persists without a time limit, whereas in the session storage the data is lost once the session expires or the browser is closed. window.sessionStorage: (stores with a session expire time).
  1. function initiate(){  
  2.     var saveButton = document.getElementById("save");  
  3.     var retrieveButton = document.getElementById("retrieve");  
  4.     var deleteBUtton = document.getElementById("delete");  
  5.     saveButton.addEventListener('click', saveItem);  
  6.     retrieveButton.addEventListener('click', retrieveItem);  
  7.     deleteBUtton.addEventListener('click', deleteItem);  
  8. }  
  9.   
  10. function saveItem(){  
  11.     var firstName = document.getElementById("fName").value;  
  12.     var lastname = document.getElementById("lName").value;  
  13.     var email = document.getElementById("eMail").value;  
  14.     var address = document.getElementById("add").value;  
  15.     var comments = document.getElementById("comments").value;  
  16.     sessionStorage[firstName] = address;  
  17.     document.getElementById("fName").value = "";  
  18. }  
  19.   
  20. function retrieveItem(){  
  21.     var data = document.getElementById("retrieveData");  
  22.     var firstName = document.getElementById("fName").value;  
  23.     var add = sessionStorage[firstName];  
  24.     data.innerHTML =  add;  
  25. }  
  26. function deleteItem(){  
  27.     if (confirm('Delete?')) {  
  28.         var firstName = document.getElementById("fName").value;  
  29.         sessionStorage.removeItem(firstName);  
  30.         alert("Deleted");  
  31.         document.getElementById("retrieveData").value = '';  
  32.     }  
  33. }  
  34. addEventListener("load", initiate);  

Here we end the discussion of HTML5, now let's move onto CSS.

What a Cascading Style Sheet (CSS) is

Let's discuss the definition word by word.

"Cascading" in this context means that because more than one StyleSheet rule can applied to a specific piece of HTML, there must be a known way of determining which specific StyleSheet rule applies to which piece of HTML.

Stylesheet, as it explains itself, is a sheet where styles are specified for the HTML elements on the pages. Descendants inherit style from ancestors. More specific styles win over the inherited style.

Identifiers, Class and Pseudo Elements

Identifiers are represent in an element as id="IDENTIFIER NAME". These are the unique pieces that can only be attached/added to a specific element. These are accessed using the character "#".

Classes are represented in an element as class="CLASS NAME". These are the pieces that are defined once in the stylesheet and can be used in multiple elements. These are accessed using the character "." (dot).

  1. li:nth-child(odd) {  
  2.     background-color: AliceBlue;  
  3. }  
  4.   
  5. li:nth-child(even) {  
  6.     background-color: Ivory;  
  7. }  


Pseudo elements are: first-child: last-child: nth-child (odd/even) these elements are predefined and are accompanied or they succeed the letters of the HTML tag elements, like:
  1. ul:first-child{  
  2. } 

Specificity Rule

A very nice concept to understand for using CSS in an effective manner. Let's look into the concept.

Id: a
Class: b  
Pseudo Elements: c 
ex:- ul ol li .red a = 0; b=1; c=3 => sp = 013 

As you can see in the preceding example, we can see ID has the highest specificity. See in the example, in other words ul ol li .red, there is one class so b=1, pseudo elements are 3, so c=3. Thus the specificity turns out to be 013. Taking another example, ul #listID .redList, here the specificity turns out to be a=1;b=1;c=1 so 111.

Page Layout

layout
  • Layout contain boxes, that is block-level elements.
  • Use HTML Semantic tags.
  • Else if Semantic tag don't work, use.
  • For making a column: set width set float.
  • For Layout, start with content and Identify boxes.

Nav Bars

  1. <nav>  
  2.       <ul class="menu">  
  3.           <li><a href="#">Home</a></li>  
  4.           <li><a href="#">Team</a></li>  
  5.           <li><a href="#">Events</a></li>  
  6.           <li><a href="#contactUs">Contact Us</a></li>  
  7.       </ul>  
  8.           </nav>  

 

  • Is a set of links.
  • List of various areas/pages using.
  • Remove the bullets {list-style: none}.
  • Eliminate padding and margins.
  • Set display to inline-block to eliminate new lines.
  • Style the links (as you wish).

WebMatrix

This is a very lightweight, open-source tool provided by Microsoft that can be downloaded from the link below: For Web Matrix.

WebMatrix can be downloaded also from the Microsoft Web Platform Installer from the following link: For Web Platform Installer.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs