Learn HTML and HTML5
- 1. HTML & HTML5 It’s time to upgrade skills
- 2. HTML History HTML first version came in the market in 1990 because of Tem-Berner’s lee efforts. HTML stands for Hypertext Markup Language. It was started with version 1.0 in the year 1990 and now we are using HTML5 which was released in the year 2014. Html is not the programming language but it is a markup language which understands all the browser and used for front end design . Every browser understands html. Hope we will see new upgrade in the html version but still most of the features of HTML5 are in draft .
- 3. DOCTYPE A Doctype is a SGML document type declaration. We keep this to parse the document correctly. There were three different types of doctype in the html . 1. Strict Doctype 2. Transitional Doctype 3. Frameset Doctype So when we start the html markup we have to declare the document type whether it is of which type in above three types. But in HTML5 we need not to mention the type of the document in the head
- 4. DOCTYPE HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE HTML>
- 5. Character Encoding Once we declare the document type then we need to declare the character set in the head section of the html . ASCII was the first character encoding which defined 128 alpha numeric characters. When we write the html code we will use any type of characters that will support by ASCII. Some of the special characters codes which are called HTML entity codes likes », «, &, © etc.
- 6. Global Structure HTML 4.0 Document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h1> welcome to the web page</h1> </body> </html>
- 7. Global Structure HTML 5 Document <!DOCTYPE HTML"> <html> <head> <meta charset=UTF-8"> <title>Welcome to the session HTML</title> </head> <body> <h1> welcome to the webpage</h1> </body> </html>
- 8. What is HTML5 ? ● Html 5 is the latest and most enhanced version of html . ● Html5 is the combination of xhtml and html4. ● Html5 has new API ● Html5 has new Semantic Elements or we can call structural elements. ● Html5 has new form elements. ● Html5 has new form attributes. ● Html5 has new graphic elements.
- 9. HTML5 New Structural or Semantic Elements Semantic we call because it clearly represent the particular section in the webpage. Non semantic which never express any meaning like span tag. <header>, <nav>, <section>, <article>, <figure>, <figcaption> <aside>, <footer> . It supports all the modern browsers. Unrecognized elements in older browsers treat as inline element so we should teach to the older browsers to treat as block level element. To work perfectly the Html5 elements you can include the javscript file reference of HTMLSHIV in head section.
- 10. HTML5 New Form Input Types and Attributes Now we have good input elements in the Html5 version and those really reduce the burden on designers and developers. All Modern browsers are supporting the input types . Color, range, number, search, date, month, tel, progress, url etc. Attributes: Autocomplet, autofocus, required, formmethod, formenctype, min, max, multiple,placeholder, readonly etc. There are lot many attributes and input types are there but i list down some popular in Html.
- 11. HTML5 New Graphic & Multimedia Elements Now we have audio and video elements in the Html5. There are graphic elements as well like canvas, SVG. Html5 is supporting the google maps as well for displaying the map into the webpage with the help of refernce script which is located into the google. We just need to creat the object and we have to pass the keys and values of map options. Before the video tag people were using the reference of youtube and anyother social video websites to display the video into the webpage. But now we can directly implement using simple properties in the elements like src of the file, type, autoplay etc.
- 12. It’s time to create web page any questions?