In 1989, Tim Berners-Lee, working at the European particle physics institute known as CERN (Centre European pour la Recherche Nucleaire), proposed a system to allow scientists to share papers with other using electronic networking methods. His idea became what is called the World-Wide Web.HyperText is a way to link and access information of various kinds as a web of nodes in which the user can browse at will.
Html stands for Hyper text mark up language which was proposed by a physicist Tim Berners-Lee, at Cern in late 1990. The first ever tag used by Berner lee was <html> in 1991.In 1992, when there were all of 50 web servers in the world, CERN released the portable Web browser as freeware. Marc Andreesen, who was working at the National Center for Supercomputing Applications, created a browser called Mosaic which was released in 1993. Shortly after that, he left NCSA to found Netscape. Many of us are confused wheather it is a programming language or not.So Guys, this is a markup language not a programming language. The programming language is different with some programming logic and frameworks like C, JAVA etc. Now lets go through some intresting Concepts of hTmL. The first version of the Netscape browser implemented HTML 1.0.
The <!Doctype> tag is used to declare at the top of the html document.
The <!Doctype> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
There is always a confusion for the beginners. Is Doctype is case sensitive or not ?. The <!Doctype> declaration is not case sensitive. <!Doctype> is not a tag its only a declaration. You can specify it in any way.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Hello World
</body>
</html>
| HTML4.01 | HTML5 |
|---|---|
| Doctype declaration in Html is too longer. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
DOCTYPE declaration in Html5 is very simple "<!DOCTYPE html> |
| Audio and Video are not part of HTML4 | Audio and Videos are integral part of HTML5 e.g. <audio> and <video> tags. |
| Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc | Vector graphics is integral part of HTML5 e.g. SVG and canvas |
| It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices. | JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it) |
| Html5 use cookies. | It provides local storage in place of cookies. |
| Not possible to draw shapes like circle, rectangle, triangle. | Using Html5 you can draw shapes like circle, rectangle, triangle. |
| Works with all old browsers | Supported by all new browser. |
Before HTML5, a video and audio could only be played in a browser with a plug-in (like flash).
The HTML5 <video> and <audio> element specifies a standard way to embed a video and play audio in a web page.
Example:
<video width="100px" controls autoplay >
<source src="abc.mp4" type="video/mp4">
</video>
<audio controls autoplay>
<source src="bc.mp3" type="audio/mpeg">
</audio>
In the above example <audio> and <video> tags are used to add media functionality. Controls attribute
adds audio and video controls, like play, pause, and volume.
The easiest way to play videos in HTML, is to use YouTube. It is very simple just use the id of the video that you want to
embed in your webpage. Every Youtube Video has an unique id youtube will display an id , just copy it and paste into
your src attribute.That's it.
Example:
<iframe width="420" height="345" src="https://www.youtube.com /embed/Xdsy1_Cdz45">
</iframe>
Xdsy1_Cdz45 is the id of the video.
To add Google map in your webpage , we will use a simple html page. Just follow the simple steps as folllows:
a. Set the section or div where you want to display your map.
<div id="mapEx" style="width:500px;height :500px">
b.Create a Function to use The Google Map Properties
In the below function we are using the location of India . So , use the latitude and longitude which centered to delhi.
<script>
function helloMaps() {
var mapattr = {
center: new google.maps.LatLng(28.644800 ,77.216721),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("mapEx"), mapattr);
}
</script>
The latitude of New Delhi, Delhi, India is 28.644800, and the longitude is 77.216721. The LatLng stands for latitude and longitude. There are various types of maps for example: ROADMAP, SATELLITE, HYBRID, and TERRAIN.
c. Add the google Map to your Webpage which is provided by javascript library lopt cated at Google . Add the reference Script to the Google Map API with a callback to helloMaps function:
hence, the required Script as:
<script src="https://maps.googleapis.com/maps/api/js?callback=helloMaps"></script>
The resultant Code is:
Example:
<!DOCTYPE html>
<html>
<body>
<div id="mapEx" style="width:500px;height :500px;"></div>
<script>
function helloMaps() {
var mapattr = {
center: new google.maps.LatLng(28.7041, 77.1025),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("mapEx"), mapattr);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=helloMaps"></script>
</body>
</html>
You can also attach your CV or Resume in your Webpage by this simple trick .Just use normal anchor tag
<a></a> and give the attribute name download, Lets do it practically.
Example:
<a href="/abc.doc" download>Click to Download CV</a>
5. How to avoid Others to copy or inspect Your webpage Source?
You can avoid others to inspect your webpage source and copying text of your webpage, It is very simple to resist this activities of others , just use oncontextmenu attribute on your body tag and return false..
It will disable the right click of the mouse .
Example:
<body oncontextmenu="return false;">
.......
</body>
6. Additional tags introduced in HTML5
There are lots of new tags and features are included. As we discussed earlier <audio> and <video> that handle multimedia
content . <Canvas> elements were added, and support for scalable vector graphics (SVG) content.
Here are some more tags which introduced in HTML5.
Example:
<main>, <section>, <article>, <header>, <footer>, <aside>, <nav> and <figure> and many more.
We have explore history of html in brief and some basic concept of Html . We explained Why there is need of migration of html older version to Html5 . Also discuss the Benefits of Html5. We covered some really interesting topics and examples of Html5, Which is very usefull for any website or webapp.Friends this is just a start , some more will be surely in Future , Your advice for any improvement and feedback is important for me.
