Evolution history of HTML by timeline
XHTML
Before starting little bit discuss about XHTML first.
Wrong:
<input type="checkbox" name="vehicle" value="car" checked />
Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked" />
How to Convert from HTML to XHTML
HTML5
Basically HTML5 has it’s many new syntactical features, which include the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content. Due to these new elements, it will be very easy to integrate multimedia and graphical content to the web without using flash and third party plugins. There are also another new elements like <section>, <article>, <header> and <nav> which enrich the semantic value of the document.
The most interesting new API's in HTML5 are:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
Important Tags
<details>
<summary>Copyright 1999-2018.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<header>
<footer>
<nav>
<progress>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
</audio>
<embed src="helloworld.swf">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Input Types
<input type="text" name="firstname" value="Mickey" id="name">
<input type="password">
<input type="submit" value="Submit">
<input type="reset">
<input type="radio" name="gender" value="male" checked>
<input type="checkbox" name="vehicle1" value="Bike">
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
HTML 5
<input type="color" name="favcolor">
<input type="date" name="bday">
<input type="date" name="bday" max="2018-08-30" min="2018-08-01">
<input type="email" name="email">
<input type="month" name="bdaymonth">
<input type="number" name="quantity" min="1" max="5">
<input type="range" name="points" min="0" max="10">
<input type="search" name="googlesearch">
<input type="tel" name="usrtel">
<input type="time" name="usr_time">
<input type="url" name="homepage">
<input type="week" name="week_year">
Input Type Attributes
<input type="text" name="firstname" value="John">
<input type="text" name="firstname" value="John" readonly>
<input type="text" name="firstname" value="John" disabled>
<input type="text" name="firstname" value="John" size="40">
<input type="text" name="firstname" maxlength="10">
HTML 5
The novalidate attribute is a <form> attribute.
When present, novalidate specifies that the form data should not be validated when submitted.
<form action="/action_page.php" novalidate>
<input type="text" name="fname" autofocus>
<input type="email" name="email" autocomplete="off">
<form action="/action_page.php" method="get">
<form action="/action_page_binary.asp" method="post">
<input type="submit" formtarget="_blank" value="Submit to a new window">
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="number" name="quantity" min="1" max="5">
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="text" name="fname" placeholder="First name">
<input type="text" name="usrname" required>
<input type="number" name="points" step="3">
XHTML
Before starting little bit discuss about XHTML first.
EXtensible HyperText Markup Language
- stricter than HTML
- DOCTYPE is mandatory
- <html>, <head>, <title>, and <body> are mandatory
- Elements must be properly nested, properly closed and in lower case
- Attribute names must be in lower case, Attribute values must be quoted, Attribute minimization is forbidden
Wrong:
<input type="checkbox" name="vehicle" value="car" checked />
Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked" />
How to Convert from HTML to XHTML
- Add an XHTML <!DOCTYPE> to the first line of every page
- Add an xmlns attribute to the html element of every page
- Change all element names to lowercase
- Close all empty elements
- Change all attribute names to lowercase
- Quote all attribute values
HTML5
Basically HTML5 has it’s many new syntactical features, which include the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content. Due to these new elements, it will be very easy to integrate multimedia and graphical content to the web without using flash and third party plugins. There are also another new elements like <section>, <article>, <header> and <nav> which enrich the semantic value of the document.
The most interesting new API's in HTML5 are:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
Important Tags
<details>
<summary>Copyright 1999-2018.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<header>
<footer>
<nav>
<progress>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
</audio>
<embed src="helloworld.swf">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Input Types
<input type="text" name="firstname" value="Mickey" id="name">
<input type="password">
<input type="submit" value="Submit">
<input type="reset">
<input type="radio" name="gender" value="male" checked>
<input type="checkbox" name="vehicle1" value="Bike">
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
HTML 5
<input type="color" name="favcolor">
<input type="date" name="bday">
<input type="date" name="bday" max="2018-08-30" min="2018-08-01">
<input type="email" name="email">
<input type="month" name="bdaymonth">
<input type="number" name="quantity" min="1" max="5">
<input type="range" name="points" min="0" max="10">
<input type="search" name="googlesearch">
<input type="tel" name="usrtel">
<input type="time" name="usr_time">
<input type="url" name="homepage">
<input type="week" name="week_year">
Input Type Attributes
<input type="text" name="firstname" value="John">
<input type="text" name="firstname" value="John" readonly>
<input type="text" name="firstname" value="John" disabled>
<input type="text" name="firstname" value="John" size="40">
<input type="text" name="firstname" maxlength="10">
HTML 5
The novalidate attribute is a <form> attribute.
When present, novalidate specifies that the form data should not be validated when submitted.
<form action="/action_page.php" novalidate>
<input type="text" name="fname" autofocus>
<input type="email" name="email" autocomplete="off">
<form action="/action_page.php" method="get">
<form action="/action_page_binary.asp" method="post">
<input type="submit" formtarget="_blank" value="Submit to a new window">
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="number" name="quantity" min="1" max="5">
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="text" name="fname" placeholder="First name">
<input type="text" name="usrname" required>
<input type="number" name="points" step="3">
No comments:
Post a Comment
This is a User Friendly Blog.
Simple Interface and Simple Controls are used.
Post your comments so i can modify blog regarding your wish.