The Basics Of HTML 5 Cheat Sheet (DRAFT) by van87

Introd­uction

H= Hyper
T= Text
M= Markup
L= Language
5= Latest Version (as of 2014)

HTML is the language browsers commun­icate 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.

Dreamw­eaver 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 Kompoz­er.net is highly recomm­ended for beginners, because you don’t need to know a lot about coding to get it going. Kompozer like Dreamw­earver is a WYSIWYG editor.

W= What
Y= You
S= See
I= Is
W= What
Y= You
G= Get

You can just type in the editor box what you want, and the kompoz­er.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
Hexade­cimal = #FF0000

Hexade­cimal 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.co­lor­pic­ker.com

Metatags go in between the opening and the closing head tags.
Basic metadata include:
Descri­ption
Keywords
Author
Charset

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:

.mp3
.wav
.aif

Example of what coding in HTML editor looks like:

<bo­dy>
<audio contro­ls=­“co­ntr­ols­”>
<source src=“e­bay­-st­ore­-se­ttu­p.mp3” type=“­aud­io/­mp3­”>
<source src=“e­bay­-st­ore­-se­ttu­p.wav” type=“­aud­io/­wav­”>
<source src=“e­bay­-st­ore­-se­ttu­p.aif” type=“­aud­io/­aif­”>

</a­udi­o>

</b­ody>
</h­tml>

These attributes can be used with most elements.

conten­ted­itable Allows the user to change the contents of an element.
Ex: <p conten­ted­itable = 'true '>You can edit this element. </p>
contex­tmenu Attaches a right-­click menu to an element.

Ex: <p contex­tmenu = 'menu'­>Ri­ght­-click this element. </p>
<menu id = 'menu'>
<co­mmand label = 'Option A' onclick = 'do_a() '>
<co­mmand label = 'Option B' onclick = 'do_a() '>

</m­enu>

draggable lets you know whether an element can be dragged.
Ex: <img draggable = 'true' src = 'myima­ge.j­pg­'>
dropzone specfies whether dragged inform­ation 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 = 'hidde­n'>This text is not shown. </p>
Spellcheck specifies whether an element should have its spelling and grammar checked; partic­ularly useful with the conten­ted­itable attribute.
Ex: <p conten­ted­itable = 'true' spellcheck = 'true'>
You can edit this text, and it will be spell-­che­cked.
</p>

All progra­mming language have concepts that are recomm­ended 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 corres­ponding value.
8. Minimizing attributes is not allowed.

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 whatso­ever, ex. Myfirs­twe­bpa­ge.h­tml. Also exclude unnece­ssary characters ex: My-1st­_we­bpa­ge.h­tml.

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.h­tml.

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:

</h­ead>
<bo­dy>
<img src= “image­s/n­ame­oft­hei­mag­e.jpg” />


</b­ody>
</h­tml>

This is just the basic image, but you can get creative by adding different attrib­utes. Like Height and Width.

Example: <img src= “image­s/n­ame­oft­hei­mag­e.jpg” height­=“150” width=­“150” />

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:/­/ht­ml5­tes­t.com to see which formats is best for your chosen browser.

To do basic video coding, you must enter <vi­deo> element between <bo­dy> elements.

<bo­dy>

<video width=­“320” height­=“240” controls autopl­ay>
<source src=“m­ovi­e.webm” type=“­vid­eo/­web­m”>
<source src=“m­ovi­e.mp4” type=“­vid­eo/­mp4­”>
<source src=“m­ovi­e.ogg” type=“­vid­eo/­ogg­”>

</v­ide­o>
</b­ody>

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

<ul>
<li> It is easy to rememb­er<­/li>
<li> Fits in the palm of your hand</­li>

Over 20 new elements have been introduced into HTML5, for the sake of keeping it digestible we listed just some here.

<ar­tic­le> Self-c­ont­ained content used in syndic­ation ex. Blog entry, article, forum post.
<ar­tic­le> This is an articl­e…<­/ar­tic­le>

<as­ide> Section of a page consisting of content related to that around the element but that could be considered separate from that content.
Ex. <ar­tic­le>This is an articl­e<a­sid­e>… and this is an aside<­/as­ide­></­art­icl­e>

<au­dio> Section containing audio material in a format playable by HTML5 without recourse to plug ins, by means of the <so­urc­e> element.
Ex. <au­dio>
<source src= ‘music.mp3’ type=’­aud­io/­mp3­’>Your browser doesn’t support the audio tag. </a­udi­o>

<ca­nva­s> Provides JavaScript with a bitmap canvas on which drawings can be made in real time.
Ex. <canvas id= ‘canvl­’><­/ca­nva­s>
<sc­rip­t> / / Draw a filled square
canvas = docume­nt.g­et­Ele­men­tById (‘canvl’)
contex = canvas.ge­tCo­ntext (‘2d’)
contex.fi­llstyle = ‘#445566’
contex.fi­llRect (0, 50, 50)
</s­cri­pt>

<co­mma­nd> Used within a <me­nu> element, this tag defines a command the user can invoke.
Ex. <me­nu>
<co­mmand onclick = ‘alert (“Help is at hand!”)
‘>H­elp­</c­omm­and>
</m­enu>

Syntax – rules for commun­icating to the browser.

FAB 5 TAGS for basic page creation.

1. < Declar­ati­on> for HTML5 it’s <!D­OCTYPE html>
2. <HT­ML>
3. <he­ad>
4. <Ti­tle>
5. <bo­dy>

Most of the time they come in pairs, but exception can occur.
Items needed to create a webpage.
- Text Editor
- Browser
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.

<ht­ml> = 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>­<st­ron­g><­i>C­ontent goes here but if you add more content it can go here or there blah blah blah.<­/i>­</s­tro­ng>­</p­>.
Closing tags always go opposite the opening tags.

<st­ron­g>= bold element, opening tag
</s­tro­ng>= 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 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.

Example:
<! - - 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.
Example:

<bo­dy>
<!-­-<h­1>This is my header­</h­1-->
<p>This is my comment tag demo video blah blah blah</­p>

</b­ody>
</h­tml>

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>
<ol> type=
<li­>An­cho­rag­e</­li>
<li­>Kansas City</­li>
<li­>St. Louis<­/li>
<li­>Lo­ndo­n</­li>
<li­>San Diego<­/li>
</o­l>
</b­ody>
</h­tml>

<de­tai­ls> 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 <su­mma­ry> element.
Ex. <de­tai­ls>
<su­mmary there are 36 species of wild cat </s­umm­ary>
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.
</d­eta­ils>

<em­bed> Allows embedding of external content and has no matching closing tag; supported parameters are quality, src, and type.
Ex. <embed type= ‘appli­cat­ion­/x-­sho­ckw­ave­-flash’
src= ‘flash­gsm­e.swf’ quality = ‘high’>

< figure> Used to contain illust­rat­ions, diagrams, and other figures, including an optional <fi­gca­pti­on> element for providing a caption.
Ex. <fi­gur­e>
<img scr = ‘atwor­k.jpg’ alt = ‘Worki­ng’>
<fi­gca­pti­on>Me at work</­fig­cap­tio­n>
</f­igu­re>

<fo­ote­r> Typically contains inform­ation about its section, such as who wrote it, links to related documents, copyright data, etc.
Ex. <fo­ote­r> By S. Smith &copy; 2013</­foo­ter>
<he­ade­r> Container for a group of introd­uctory or naviga­tional aids.
Ex. <he­ade­r>
<h1> Welcome to this website </h­1>
<a href = ‘/ games’­>Ga­mes­</a> |
< a href = ‘ / forum’­>Fo­rum­</a> |
< a href = ‘ / downlo­ad’­>Do­wnl­oad­</a>
</h­ead­er>

http:/­/ww­w.w­3sc­hoo­ls.c­om­/html/
http:/­/ht­ml-­col­or-­cod­es.i­nfo/
http:/­/ht­mld­og.c­om­/gu­ide­s/h­tml­/be­ginner/
http:/­/ww­w.w­3.o­rg/­html/
http:/­/www.co­lor­p­ic­­ker.com
http:/­­/h­t­m­l5­­tes­­t.com