HTML5 Tutorial
HTML5 Basics
HTML5, the latest version of HTML, the formatting language that produces web pages - including the one you read this on, of course - has taken the web development community by storm.
On one hand, it is easy to learn; On the other hand, it has the potential to evolve and then pose a serious threat to Flash, which is more or less synonymous with impressive animations.
HTML5 has come about thanks to the cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG), in their collective pursuit to make the web a true treasure trove for mankind.
This tutorial shows you the following in an easy-to-learn manner:
- The basic structure of a web page
- The main elements of a web page
- How to manipulate the elements to produce a meaningful web page using simple application like Microsoft's Notepad
Finding a good book to master HTML5 can be very challenging: there are so many around - most with eye-catching titles and very complex substance.
Therefore, Vivax Solutions strongly recommends Sams Teach Yourself HTML, CSS and JavaScript as a stepping stone towards your destination of a competent web developer.
Then, you can get a comprehensive practical understanding by reading Core HTML5 Canvas for those who really want to delve into HTML5.
Please click the image to access Amazon:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<meta charset="UTF-8">
</head>
<body>
<foot>
</foot>
</body>
</html>
The first line define the document type. The rest is the page structure in HTML5.
Headings
In HTML5, there are 6 different types of headings for a web page, starting from <h1>, the largest, to <h6>, the smallest. They are as follows:
<h1>First Heading</h1>
<h2>Second Heading.</h2>
<h3>Third Heading.</h3>
<h4>Fourth Heading.</h4>
<h5>Fifth Heading.</h5>
<h6>Sixth Heading.</h6>
In addition to the fundamental tags, there are quite a few other tags which are essential to produce a meaningful web page.
The following image shows some of the main ones:
See the Pen LVjKML by VivaxSolutions (@VivaxSolutions) on CodePen.
See the Pen GJvbaB by VivaxSolutions (@VivaxSolutions) on CodePen.
Lists
An ordered list - numbered - or an unordered - bulleted - list could be made as follows:
See the Pen QbMXee by VivaxSolutions (@VivaxSolutions) on CodePen.
Tables
HTML5 tables give us a very creative way to arrange data on web pages. The following shows a basic table:/p>
See the Pen bdrXrb by VivaxSolutions (@VivaxSolutions) on CodePen.
Images
HTML5 <img> element gives us the opportunity to put images on web pages, with the following attributes:
src = source of the image
width = width of the image
height = height of the image
alt = description of the image
See the Pen VLzorG by VivaxSolutions (@VivaxSolutions) on CodePen.
Links
Links let us move from one web page to another web page in the same site or any site on the internet. It can just be a text link or an image link, as shown by the following:
See the Pen qdXeoY by VivaxSolutions (@VivaxSolutions) on CodePen.
Line Breaks, empty space, Emailing and Comments
HTML5 gives us elements for line breaks and comments too.
- Line Break
- - <br>
- Comment
- - <!--This is a comment.--->
- Simple Emailing
- - <a href="mailto:info@vivaxsolutions.com" >Email Me</a>
- Empty space
- -
Next