HTML 5 Made Simple
5= Latest Version (as of 2014)
HTML is the language browsers communicate what the web page will look like. HTML 5 as of 2014, is the latest version of HTML. HTML5 code is clearer and easier for browsers to read and interpret. Works with variety of complex devices such as cell phones and tablets. If you’d like to see what the coding looks like in your browser, right click then select view page source to see the coding also known as tags.
Dreamweaver is the most popular and most expensive editor. There are many editors that don’t cost too much but do lack certain features, and you need to have a background in coding in order to make them work. That is why Kompozer.net is highly recommended for beginners, because you don’t need to know a lot about coding to get it going. Kompozer like Dreamwearver is a WYSIWYG editor.
You can just type in the editor box what you want, and the kompozer.net will give you what you need. See what is out there and choose the one that suits you the most.
3 Methods of color:
Name = RED
RGB = 255 R, 0 G, 0 B
Hexadecimal = #FF0000
Hexadecimal code is mostly used in html 5 color. Always use the # sign following 3 points of digits.
They range ONLY from 0123456789 in numbers and abcdef. Nothing above the “f”, no Z, G, W etc.
If you have chrome, you can install colorzilla extension add on or go to www.colorpicker.com
HTML5 Meta Tags
Metatags go in between the opening and the closing head tags.
Basic metadata include:
HTML 5 Audio Tag
In HTML5, it is not necessary to rely on third-party plug-in software to play audio and video, that capability is already built in.
In order to add audio file to your page you will need multiple audio formats to suit the needs of most browsers, that way your site visitors will be able to view them. There are many audio formats used for major browsers.
But to keep this simple and basic here are the most common:
Example of what coding in HTML editor looks like:
<source src=“ebay-store-settup.mp3” type=“audio/mp3”>
<source src=“ebay-store-settup.wav” type=“audio/wav”>
<source src=“ebay-store-settup.aif” type=“audio/aif”>
Newly Added HTML 5 Attributes
These attributes can be used with most elements.
contenteditable Allows the user to change the contents of an element.
Ex: <p contenteditable = 'true '>You can edit this element. </p>
contextmenu Attaches a right-click menu to an element.
Ex: <p contextmenu = 'menu'>Right-click this element. </p>
<menu id = 'menu'>
<command label = 'Option A' onclick = 'do_a() '>
<command label = 'Option B' onclick = 'do_a() '>
draggable lets you know whether an element can be dragged.
Ex: <img draggable = 'true' src = 'myimage.jpg'>
dropzone specfies whether dragged information is to be copied, moved, or linked when it is dropped on an element; supported values are copy,link and move.
Ex: <div dropzone= 'copy'></div>
hidden specifies whether an element should be hidden from display.
Ex: <p hidden = 'hidden'>This text is not shown. </p>
Spellcheck specifies whether an element should have its spelling and grammar checked; particularly useful with the contenteditable attribute.
Ex: <p contenteditable = 'true' spellcheck = 'true'>
You can edit this text, and it will be spell-checked.
Rules of Coding To Live By
All programming language have concepts that are recommended that you follow. Whether you are just starting out ( don’t worry, if you are dedicated you will pick up quick) or have some experience under your belt, here are some principles to stand by.
1. HTML documents must all have 1 root element.
2. Make sure that every tag opened is closed.
3. Empty elements must also be closed.
4. It is good practice to rest your tags for cleaner coding.
5. Ensure that tag and attribute names are lower case.
6. Quote attribute values with a single or double quote, (‘) (“).
7. Attributes must have a corresponding value.
8. Minimizing attributes is not allowed.
Of course, there is always an exception to a rule, but these are just the standard rules to follow.
Saving A File
Saving a file is so simple that we all do it without thinking about it. But as it was mentioned before, to save a web page file, ALWAYS save as a .html or .htm. You can name the file anything you’d like, just remember to not leave any space in between whatsoever, ex. Myfirstwebpage.html. Also exclude unnecessary characters ex: My-1st_webpage.html.
Browsers don’t care whether or not the letters are lower case. Just stay within the guidelines mentioned, and you should be ok.
If you want the browser to auto find your page you must be name index.html.
How to add images to your page
Look up the folder where your image is held
Write the code in the index file to bring those images on the index page
<img /> tag doesn’t have open and closing, it’s all the same
Image tag looks like this:
<img src= “images/nameoftheimage.jpg” />
This is just the basic image, but you can get creative by adding different attributes. Like Height and Width.
Example: <img src= “images/nameoftheimage.jpg” height=“150” width=“150” />
HTML 5 Video Tag
All browsers don’t recognize all video formats. To get the major browsers to accept your videos, you must have a variety of video formats that suit specific browsers. Example of formats: .mp4, .mov, .webm, .avi, .ogg
Go to http://html5test.com
to see which formats is best for your chosen browser.
To do basic video coding, you must enter <video> element between <body> elements.
<video width=“320” height=“240” controls autoplay>
<source src=“movie.webm” type=“video/webm”>
<source src=“movie.mp4” type=“video/mp4”>
<source src=“movie.ogg” type=“video/ogg”>
HTML Unordered Lists
An unordered list, is a list of items without a definite order. Like listing bullets stating benefits of a product for example.
<ul>- Unordered List
<li> It is easy to remember</li>
<li> Fits in the palm of your hand</li>
New HTML5 Elements
Over 20 new elements have been introduced into HTML5, for the sake of keeping it digestible we listed just some here.
<article> Self-contained content used in syndication ex. Blog entry, article, forum post.
<article> This is an article…</article>
<aside> Section of a page consisting of content related to that around the element but that could be considered separate from that content.
Ex. <article>This is an article<aside>… and this is an aside</aside></article>
<audio> Section containing audio material in a format playable by HTML5 without recourse to plug ins, by means of the <source> element.
<source src= ‘music.mp3’ type=’audio/mp3’>Your browser doesn’t support the audio tag. </audio>
Ex. <canvas id= ‘canvl’></canvas>
<script> / / Draw a filled square
canvas = document.getElementById (‘canvl’)
contex = canvas.getContext (‘2d’)
contex.fillstyle = ‘#445566’
contex.fillRect (0, 50, 50)
<command> Used within a <menu> element, this tag defines a command the user can invoke.
<command onclick = ‘alert (“Help is at hand!”)
Creating The Basic Page
Syntax – rules for communicating to the browser.
FAB 5 TAGS for basic page creation.
1. < Declaration> for HTML5 it’s <!DOCTYPE html>
Most of the time they come in pairs, but exception can occur.
Items needed to create a webpage.
- Text Editor
Let’s get organized, by creating folder to keep all of your work in one place. When right clicking and creating a new file make sure it is saved as an HTML not a TXT. The browser won’t recognize TXT.
HTML5 supports the self- closing tag format /. It is placed before > of a tag.
<html> = opening tag
</ html>= closing tag.
<br /> -tag doesn’t open or close, this is called the break tag. It will move your content to the next line
Nesting is when you assign different HTML elements to the same block of content.
Example: <p><strong><i>Content goes here but if you add more content it can go here or there blah blah blah.</i></strong></p>.
Closing tags always go opposite the opening tags.
<strong>= bold element, opening tag
</strong>= bold element, closing tag
<i>= italicized element, opening tag
</i>=italicized element, closing tag
<p>= paragraph element, opening tag
</p>= paragraph element, closing tag
HTML Comments Tag
HTML comments in coding can mostly be used as a remainder, note within the code, even to brand you as the creator of the page as web developer. It is only seen by you, client or whoever looks at the source page of your site.
<! - - this is where my sales page begins - - >
Opening comment tag = <! - -
Closing comment tag = - - >
If you would like see what a page looks like without an element, you don’t have to erase that element.
You can comment it out.
<!--<h1>This is my header</h1-->
<p>This is my comment tag demo video blah blah blah</p>
HTML Ordered Lists
What is an order list?
An ordered list is a list of items with a definite order. Ex: Dave’s top ten.
How to set up an ordered list?
<ol> Ordered List
<li> List Item
<h2> Top 5 Cities I’ve lived in</h2>
New Elements (continuation)
<details> creates a clickable heading with the default title of “Details”; when clicked, the contents of the element are toggled into and out of view; you may replace the default title with your own using the <summary> element.
<summary there are 36 species of wild cat </summary>
The 36 species of the wild cat family are spread across most of the globe excluding the continents of Antartica and Australia and some island groups.
<embed> Allows embedding of external content and has no matching closing tag; supported parameters are quality, src, and type.
Ex. <embed type= ‘application/x-shockwave-flash’
src= ‘flashgsme.swf’ quality = ‘high’>
< figure> Used to contain illustrations, diagrams, and other figures, including an optional <figcaption> element for providing a caption.
<img scr = ‘atwork.jpg’ alt = ‘Working’>
<figcaption>Me at work</figcaption>
<footer> Typically contains information about its section, such as who wrote it, links to related documents, copyright data, etc.
Ex. <footer> By S. Smith © 2013</footer>
<header> Container for a group of introductory or navigational aids.
<h1> Welcome to this website </h1>
<a href = ‘/ games’>Games</a> |
< a href = ‘ / forum’>Forum</a> |
< a href = ‘ / download’>Download</a>
For More Information Visit These Sites