Html Course


HTML5 new features are based on HTML, CSS, DOM, and JavaScript, and reduce the need for external plugins (like Flash).

About HTML5 syntax

HTML5 syntax is compatible with both HTML4 and XHTML.
- You can close the single tag elements (META, BR, HR, INPUT, IMG) with a slash, <tag />, like in XHTML; or you can choose to not add the slash, <tag>.
- You can use both lower case, or upper case for the name of the tags and attributes.
So, all the variants bellow are valid HTML5:

<meta charset='utf-8'>

 OR, closed with slash:
 
<meta charset='utf-8' />
<img src='image.jpg' alt='Some text'>
 OR:
<img src='image.jpg' alt='Some text' />
 OR, with upper case:
<IMG src='image.jpg' ALT='Some text'>
<br>
 OR:
<BR>
 OR:
<br />

- In HTML5 you can choose to not specify the type attribute for the elements <script>, and <style>, it is optional.
<script>
 // JavaScript code
</script>
<style>
 /* CSS code */
</style>
• All these variants are valid in HTML5.

HTML5 structure

HTML5 doctype is much simpler:
<!doctype html>
Meta charset tag is much simpler:
<meta charset='utf-8'>

Divs are now used for styling rather than structure; HTML5 includes several new structural items that help define parts of the document.
These are the main structural elements you'll use most often in HTML5:

HTML5 comes with other interesting items such as the <video> and <audio>, plus new and changed elements and attributes, but this tutorial is a quick quide that presents just the basics that will let you quickly move from HTML4 or XHTML to HTML5.

Here's a common structure of a HTML5 document that contains a top header (with a horisontal main menu), a section in the left side (with a vertical menu and an aside, for a banner), another section (that contains a header, two articles and footer), and a footer in the bottom of the page (click on the picture below):
HTML5 structure

You can also use the id, and class attributes, <div>, <span>, <p>, and other HTML tags to design and organize the content of your HTML document.
In the example below there are the HTML5 and CSS codes to create a web page based on the structure (template) presented in the image above:

The HTML5 document

<!doctype html>
<html>
<head>
 <meta charset='utf-8' />
 <title>Web Development Courses and Tutorials</title>
 <meta name='description' content='Example document in HTML5, template, courses and tutorials' />
 <meta name='keywords' content='html5, html5 tutorials' />
 <link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>

<header id='page_header'>
 <h1>Web Development Courses and Tutorials</h1>
 <nav>
 <ul>
 <li><a href='/' title='Home'>Home</a></li>
 <li><a href='//marplo.net/' title='Free Courses'>Free Courses</a></li>
 <li><a href='//marplo.net/forum/'>Forum</a></li>
 <li><a href='/contact' title='Contact Us'>Contact Us</a></li>
 </ul>
 </nav>
</header>

<section id='posts'>
 <header id='posts_header'>
 <h2>HTML5 Tutorials</h2>
 </header>
 <article class='post'>
 <header>
 <h3>Quick learning Guide</h3>
 </header>
 <div class='ctext'>
 Learn about the new features in HTML5.<br />
 New tags, and structure elements.
 </div>
 <aside class='post_baner'>Here can be a banner</aside>
 <p>
 <em>HTML5</em> new features are based on HTML, CSS, DOM, and JavaScript, and reduce the need for external plugins (like Flash).<br />
 A lot of the new features of HTML center around creating a better platform for web-based applications, <a href='https://coursesweb.net/html/html5-quick-tutorial_t' title='HTML5 Quick Tutorial'>Read more</a> ...
 </p>
 </article>
 <article class='post'>
 <header>
 <h3>New Form elements and attributes in HTML5</h3>
 </header>
 <div class='ctext'>
 HTML forms are used to pass data to a server, to be processed by a programming language (like PHP, ASP). HTML forms can also be used with script languages, like JavaScript.
 </div>
 <p>
 HTML5 adds a number of new input types for form (datetime, datetime-local, date, month, week, time, number, range, email, url, search, and color), <a href='https://coursesweb.net/html/form-elements-attributes-html5' title='New Form elements'>Read more</a> ...
 </p>
 </article>
 <footer id='post_footer'>
 <p>See more HTML lessons and tutorials: <a href='https://coursesweb.net/html/' title='HTML Course'>HTML Course</a>.</p>
 </footer>
</section>

<section id='sidebar'>
 <nav>
 <ul>
 <li><a href='https://coursesweb.net/html/' title='HTML Course'>HTML Course</a></li>
 <li><a href='https://coursesweb.net/css/' title='CSS Course'>CSS Course</a></li>
 <li><a href='https://coursesweb.net/javascript/' title='JavaScript'>JavaScript</a></li>
 <li><a href='https://coursesweb.net/php-mysql/' title='PHP-MySQL'>PHP-MySQL</a></li>
 <li><a href='https://coursesweb.net/flash/' title='Flash-ActionScript 3'>Flash-ActionScript 3</a></li>
 <li><a href='https://marplo.net/jocuri' title='Flash Games'>Flash Games</a></li>
 </ul>
 </nav>
 <aside class='sidebar_baner'>Banner in sidebar</aside>
</section>

<footer id='page_footer'>
 <p>From: <a href='https://coursesweb.net/' title='Free Web Development courses'>coursesweb.net</a></p>
</footer>
</body>
</html>

CSS code, in the style.css file

body {
 width: 99%;
 margin: 2px auto;
 font-family: Arial, 'MS Trebuchet', sans-serif;
 text-align: center;
}
header, footer, section, aside, nav, article { display: block; }

header#page_header {
 width: 100%;
 margin: 4px auto;
 border: 2px solid blue;
}
header#page_header nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#page_header nav ul li {
 display:inline;
 margin: 0 20px 0 0;
 padding: 1px;
}
section#posts {
 float: right;
 width: 79%;
 background-color: #f1f2fe;
 border: 1px solid yellow;
}
section#posts header#posts_header {
 background-color: #abcdef;
 border: 1px solid green;
}
article.post {
 margin:10px;
 background-color: yellow;
 text-align: left;
}
article.post aside {
 float: right;
 margin-top: -58px;
 width: 250px;
 height: 120px;
 background-color: #fefefe;
}
article.post p { clear: right;}
section#sidebar {
 float: left;
 width: 18%;
 background-color: #d7d8fe;
 border: 1px solid green;
 padding:5px;
}
section#sidebar nav ul {
 margin: 3px auto;
 text-align: left;
 padding: 0 0 0 15px;
}
section#sidebar aside {
 width: 160px;
 height: 250px;
 margin: 10px auto;
 background-color: #fefefe;
}
footer#page_footer {
 clear: both;
 width: 100%;
 margin: 4px auto;
 border: 2px solid blue;
}

These CSS rules are stored in an external file, named 'style.css', and it is included in the HTML document with the following code, added in the HEAD section.
<link rel='stylesheet' type='text/css' href='style.css' />
To create web pages with HTML5, you should also know CSS.

- Click Example HTML5 structure, to see how the web page with this example looks.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
HTML5 Quick Tutorial

Last accessed pages

  1. Star shapes with CSS (11114)
  2. Follow the mouse cursor with a DIV inside a Parent (8273)
  3. CSS Course - Free lessons (21648)
  4. SHA256 Encrypt hash in JavaScript (31103)
  5. Calling Function and Class Method with Name from String (5710)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (318)
  2. PHP Unzipper - Extract Zip, Rar Archives (110)
  3. Read Excel file data in PHP - PhpExcelReader (101)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (74)
Chat
Chat or leave a message for the other users
Full screenInchide