HTML basics - Make use of sample codes

So you want to learn HTML5 !

You don't need to look any further, HTML kept simple, learn as fast as you want....

All about HTML, your mark up language

The aim is to give you an understanding how HTML -CSS is formed, to help the understanding of full Tutorials later.


Reminder that HTML ( Hyper Text Markup Lanuage), is the way of arranging a simple layout, similar to the way you layout a letter. Your Name, Address,Subject heading, Text content,Closing name of sender, is an simple example.

The markup is as follows; using opening and closing chevrons <p> content </p>

Comments

HTML comments are structured as follows;    <!- - This is a HTML comment- ->
CSS comments are structured as follows;    /* This is a CSS comment*/

They are only used sparingly to help remind you what purpose an element serves, as used in the coding below.

Simple HTML5 Layout

<DOCTYPE html!> <!- - This instructs browser that the docuement is using the HTML language- ->
<html> <!- - html language starts here - ->
<head> <!- - Not shown on screen but where instructions re other items (language, Title etc) are given to code - ->
<link rel="stylesheet" type="text/css" href= "stylenamespaces.css">
<!- - Used to point html to the style sheet location- ->
<meta charset="utf-8">
<title>FIRST WEB PAGE </title>
<!- - Used by search engines to identify what the page is about- ->
<meta http-equiv="content-type" content="text/html;
<!- - Confirming what content contains, and script type to use- ->
</head> <!- - Head closing tag. Each tag below has a closing tag ->
<body>    <!- - Body tag the start of actual web page display ->
<article> <!- - Article can have a number of relative sections ->
<section>
<h3> Contents 1 Page  </h3> <!- - This is a heading h3 size- ->
<p> Easy Peasy I hear you say</p> <!- - This is a paragraph with content- ->
</section>
<section>
<h4> Contents 2 Page  </h4> <!- - This is a heading h4 size- ->
<p> Not Easy Peasy I am afraid to say</p> <!- - This is a paragraph with content- ->
</section>
</article>
</body>
</html>

Sample HTML code; Element, Attribute and Tag

"a" is an element defining a hyperlink-- "href" is my web site address, refered to as an attribute, with the "My website" indicating that you can retrieve it by pressing. The Element opens and closes with Tags <a></a>

Typical Elements and their uses

You have already seen the use of h1-h6 (headings), p (paragrapgh), div (division) a( Anchor link-address,
using 1. href= "file" / or 2. src="source of Media-picture etc." span=(An area styled using a class in a CSS file.)

There are a large number of elements and the full version can be viewed by looking at an HTML guide, on how to use at


Try any of the links below to review HTML

w3schools re HTML guide

Shay Howe's HTML-CSS guide

Developer Monzilla re HTML guide

Html Dog guide/book

For details of available HTML editors go to Site Map for links HTML Editors