Listing out some HTML Tips for future use.
Linking script and stylesheet in HTML
<script src="main.js"></script> <link href="style.css" rel="stylesheet"></link>
New in HTML5
canvas | audio | svg | header | footer | aside | article | nav | section etc…
————–
CSS Reset – Removes browser default styles
Normalize.css – Sets a stndard across all browsers
———–
parseInt(“20″) + 20 = 40;
—–
Semantic HTML – Semantic tags like header, nav, section, footer, etc are used that convey infomation about the content.
HTML4 vs HTML5
=> HTML4 DOCTYPE declaration was too length, while in HTML5, it’s just <!DOCTYPE html>
=> HTML5 has more semantic tags and also has multimedia supporting attributes
=> HTML4 is compatible with almost all browsers, where HTMl5 is picking up fast.
——————-
New input types – DateTime, Placeholder, Number, Tel, Email
————————————-
What are Meta tags in HTML
Meta tags or meta elements provide more information about the contents of a web page. They are also used by search engines to show descriptions.
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta name="author" content="www.computerhope.com"> <meta name="description" content="Helping you with ALL your computer questions"> <meta name="keywords" content="computer, technical, free, help, support"> ...
HTML APIs
=> DOM Level 1
=> DOM Level 2 Core
=> DOM Level 2 HTML
=> DOM Level 3
HTML5 APIs
=> Media API – To control the audio and video elements on the page
=> Text Track API – To interact with subtitles, captions, etc=> Drag and Drop – To drag and drop elements in the browser by setting the draggable property to true on an element
=> Application cache – Storing files on the local by defning them in a manifest file, thus making them available offline
=> User Interaction – Setting contenteditable property and using localStorage can make it easy to track user made changes
=> History – Allows to manipulate entries in the user’s hsitory, holding data to restore page-state, and update url without refershing page.
=> Geolocation, IndexedDB, Selectors, Filesystem, etc
——————–
WebSQL – A database in the browser to store information. It is obsolete.
indexedDB replaces the WebSQL, with features like Creating transactions, creatint tables, inserting to table, reading data and deleting data.
—————
A minimum of 3 tags, namely, HTML, head and body are required to create a HTML page
—————-
A custom data attribute starts with data- (data-level=”complex”), and they can be accessed using JavaScript APIs
————
Cookies drawbacks
=> Being sent with every request, slows down the request
=> Limited to 4KB, sometimes not enough.
—————–
Storage happens only in String format
Session Storage
sessionStorage.setItem (‘key’,’value’);
sessionStorage.getItem(‘key’);
sessionStorage.removeItem(‘key’);
sessionStorage.clear();
for (var i = 0; i < sessionStorage.length; i++) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
}
Local Storage
localStorage.setItem (‘key’,’value’);
localStorage.getItem(‘key’);
localStorage.removeItem(key);
localStorage.clear()
———————
datalist is used for autocomplete feature of input
<input type="text" list="countries" name="country" />
<datalist id="countries">
<option value="India">India</option>
<option value="United States"></option>
</datalist>
——————-
fieldset is used to group multiple form-controls
<fieldset>
<legend>Personal Information</legend>
First Name: <input type="text" /> <br/><br/>
Last Name: <input type="text" /> <br/><br/>
p_Address: <input type="text" />
</fieldset>
———————-
Features available to WebWorker – Can access
=> The navigator object
=> The location object
=> XMLHttpRequest
=> setTimeOut/clearTimeOut/setInterval/clearInterval
=> importScripts
=> spawning other WW
Limitations of WebWorker – Can’t access
=> DOM elements
=> window object
=> document object
=> parent object
————————–
You can read more on HTML from MDN.
For reading more, please visit this for JavaScript and this for CSS.