Welcome to my blog :)

This is a site comprised of a personal collection of notes and information serving as a single reference place for examples, tips, codes, testing, instructions, workarounds and troubleshooting with a record of external links to help during web design or managing and maintaining mobile devices and PC. I'm not a novice nor an expert...just a LittleBitGeeky here on blogspot.com

Saturday, August 23, 2014

HTML5 CHEAT SHEET

HTML5 REFERENCE SHEET
New Tags and Functions





PERTINANT DESIGN REFERENCE LINKS:

TEST & VIEW CODE SNIPPETS
http://www.w3schools.com/html/tryit.asp?

HTML VALIDATION CHECKER-Hypertext Markup Language
http://validator.w3.org/#validate_by_input

CSS VALIDATION CHECKER-Cascading Style Sheet
http://jigsaw.w3.org/css-validator/#validate_by_input

HTML4/5 Tag Reference:
http://www.w3schools.com/tags/default.asp

JavaScript Events: (onclick, onload, onhover)
http://www.w3schools.com/tags/ref_eventattributes.asp

CSS Reference:
http://www.w3schools.com/CSSref/default.asp

HTML5 New Elements:
http://www.w3schools.com/html/html5_new_elements.asp

HTML5 Web Storage
http://www.w3schools.com/html/html5_webstorage.asp

HTML4/5 Forms & Input
http://www.w3schools.com/html/html_forms.asp





HTML 5 DOCUMENT MINIMUM REQUIREMENTS
<!DOCTYPE html> (only one declaration. period.)
< html>
< head>
<meta charset="UTF-8">
< title>Title of the document</title>
< /head>

< body>
Content of the document......
< /body>

< /html>



OTHER DOCUMENT COMMANDS

<!DOCTYPE html> (HTML5 compliant. Open Tag)
<html>
<head>
     <!--this is a HTML comment of any kind, anywhere...--> 
     <title>Title of the document required</title> (closed tag)
     <base href="http://www.URL/images/">
                   (base creates a default URL and target for all links on a page. Open Tag)    
     <link rel="stylesheet" type="text/css" href="styles.css">
                   (links a separate style sheet to the document. Open Tag)    
     <meta name="keywords" content="Add keywords for search engines">
     <meta name="description" content="Add Description of your Page">
     <meta name="author" content="Add Authors Name ">

      <script type="text/javascript"> (Defines a client-side script, such as a JavaScript)
     document.getElementById("demo").innerHTML = "Hello JavaScript!";
     document.getElementById("demo").style.fontSize = "25px";
     document.getElementById("image").src = "picture.gif";
     </script>


     <noscript>(display this if scripts turned off. Closed Tag) 
      Sorry, your browser does not support JavaScript!
     </noscript>
     <style> (Define formatting via CSS)    
     Element Name to Define
     {
     format-what:specific1 specific2 specific3;
     format-another:color; size; etc;
     }
     </style>
</head>




<body>
<h1>MAIN TITLE HEADING</h1>
<h2>Sub Heading</h2>
      <p>
      <h3>Minor Heading to h6</h3>
       Elements and Contents of the page
       </P>
<hr /> (Horizontal Rule)
        


</body>
</html>








HTML RULES
In HTML the <img> tag has no end tag.
In XHTML the <img> tag must be properly closed.</img>


--------------------------
a href & mailto

<a href="http://www.mysite.com/index.html">Go To My Site</a>

href="#" is an in-page anchor (jump)

page anchor <a name="part2">Part 2</a>   + jump to anchor <a href="#part2">Go To Part 2</a>
<a href="page1.html#part2">Go To Page 1, Part 2</a>

<head><base target="_blank"> every link on page will open in a new window

<a href="mailto:myname@mysite.com">Click Here to Email Me</a>
<a href="mailto:myname@mysite.com?subject=Inquiry From Website">Click Here to Email Me</a>



# represents the start of a hash value. Strictly speaking it should have something following it (eg. #xx will link to the spot in the page that has id="xx"). With most browsers if you don't specify a value following it defaults to the top of the page.

It most certainly does NOT represent NULL in any way whatsoever. Anyone who thinks that is misusing the value.


<a href="#nogo"> does nothing (even on menu drop dropdowns)


--------------------------------



HTML5: THE NEW LATEST WEB STANDARD

 HTML5 with CSS3 & JavaScript is designed to replace both HTML 4, XHTML, and the HTML DOM Level 2 and specially designed to deliver rich content without the need for additional plugins like Flash. HTML5 is cross-platform, meaning its designed to work with multiple devices like a PC, Tablet, Smartphone or  Smart TV. HTML5 is constructed by a the World Wide Web Consortium (W3C) and has been working in corporation with the Web Hypertext Application Technology Working Group (WHATWG) since 2006.



 HTML5 NEW FEATURES:
offers new elements, new attributes and full CSS3 support, So playing audio /video and implementing modern day features like drag and drop will be easier. This includes adding animation to graphics, music, movies, 3D graphics, and the ability to build complicated web applications more easily as well as Local Storage & Local SQL Database.




HTML5 NEW WEB PAGE ELEMENTS
In order to indicate navigation links, header, and footer, it previously used non-semantic code like <div id="nav">, <div class="header">, or <div id="footer">. HTML5 offers new semantic elements to clearly define different parts of a web page.  Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content. http://www.w3schools.com/html/html5_semantic_elements.asp

HTML5 WEB STORAGE:
The use of cookies are omitted with HTML5 local storage capabilities, where web pages can instead store data locally within the user's browser. Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari. Web Storage is faster, more secure and the data is not included with every server request, but rather used only when its asked for. Large amounts of data can be stored without affecting the performance of the website. The data is stored in name/value pairs, and a web page can only access data stored by itself which is never transferred to the server like cookies. A greater storage limit is gained as well, with a minimum of 5MB of data.


HTML5 Web Storage provides two new objects for storing data on the client:

  • window.localStorage - stores data with no expiration date
  • code.sessionStorage - stores data for one session (data is lost when the tab is closed)
Before using web storage, check browser support for localStorage and sessionStorage:

if(typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}



WHEN TO USE HTML5? 
A question I can't seem to find an answer for today. As of 6-25-14, HTML5 appears to still be in progress because the code validator at W3C says "The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you."



 All major browsers (Chrome, Firefox, Internet Explorer, Safari, Opera) support the new HTML5 elements and APIs, and continue to add new HTML5 features to their latest versions. It is my opinion that users with older machines and or and outdated browsers may display the webpage incorrectly, although I currently see online web page design sites already using HTML5 like http://www.wix.com/.


HTML 4.01 VS HTML5 ATTRIBUTES:


In HTML5 there is only one DOCTYPE declaration, and it is very simple:

<!DOCTYPE html>


HTML5 MAIN CONTENT PAGE CONTAINERS:
HTML5 offers new semantic elements to clearly define different parts of a web page VS <div id="nav">, <div class="header">, or <div id="footer">. The following new block elements automatically define sections of the webpage. http://www.w3schools.com/html/html5_semantic_elements.asp

•<header> Top Page Header Page or Section
•<nav> Navigation Links for Menu
•<section> A group of content w/a heading
•<article> Self Contained Independent content i.e. comment, blog post, news story)
•<aside> Sidebar or content aside from main content
•<figure> Self Contained Visual Content (i.e. illustrations, photos, diagrams)
•<figcaption> Defines a caption for a <figure> element
•<footer> Bottom of Page or Section
•<details>
•<summary>
•<mark>
•<time>


CSS TO DISPLAY AS BLOCK -rendering fix
This will make these elements display properly in older browsers.

header, section, footer, aside, nav, main, article, figure
{
display: block;
}


IE8 AND BELOW CSS ISSUE - JavaScript workaround
IE8 and earlier does not know how to render CSS on elements that it doesn't recognize so the new elements of  HTML5 cannot be styled. Thankfully, Sjoerd Visscher has discovered a JavaScript workaround called "HTML5 Shiv", to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.You can download and read more about the HTML5 Shiv at: http://code.google.com/p/html5shiv/


To enable the HTML5 Shiv (after downloading), insert the following code into the <head> element, which is a comment that only versions earlier than IE9 reads. It must be placed in the <head> element because Internet Explorer needs to know about the elements before it renders them.


<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
< ![endif]-->












NEW FEATURES IN HTML5:
  • Support for local storage
  • <source> Defines multiple media resources for media elements (<video> and <audio>)
  • <audio> Defines sound elements for media playback
    <video> Defines video or movie elements for media playback
  • <track> Defines text tracks for media elements (<video> and <audio>)
  • FORM CONTROLS:
  • NEW calendar, date, time, email, url, search
  • ALL FORM IMPUT TYPES:
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • <header> Defines a header for a document or section
  • <footer> Defines a footer for a document or section
  • <main> Specifies the main content of a document
  • <section> Defines a section in a document
  • <article> Defines an article
  • <figure> Specifies self-contained content
  • <figcaption> Defines a caption for a <figure> element
  • <aside> Defines content aside from the page content
  • <details> Defines additional details that the user can view or hide
  • <summary> Defines a visible heading for a <details> element
  • <dialog> Defines a dialog box or window
  • <embed> Defines a container for an external (non-HTML) application
  •  
  • <nav> Defines navigation links
  • <canvas> element for 2D drawing
  • <mark> Defines marked/highlighted text
  • <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
  • <bdo> Overrides the current text direction
  • <wbr> Defines a possible line-break




UNSUPPORTED ATTRIBUTES IN HTML5:

align, border, hspace, longdesc, and vspace
target: _blank, _self, _top, _parent frame_name
<center> Not supported in HTML5. Use CSS instead.
<font> Not supported in HTML5. Use CSS instead.
<frame> Not supported in HTML5.
<strike> Not supported in HTML5. Use <del> instead.
<big> Not supported in HTML5. Use CSS instead.
<div align: left, right, center, justify






Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).




USE LOWER CASE IN CODING:
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.






BASIC HTML TAGS


<!--...--> Defines a comment
<body> Defines the document's body
Add Javascript Window Events: http://www.w3schools.com/tags/ref_eventattributes.asp
<body onafterprint="printmsg()">
<a> Defines a hyperlink
src is the source of a link
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<div> Defines a section
<div style="color:#0000FF; font:italic bold 25px/30px Georgia, serif">
style Specifies formating
class Specifies one or more classnames for an element (refers to a class in a style sheet)
id Specifies a unique id for an element
title Specifies extra information about an element
can apply javascript event to div

<blockquote cite="http://www.URL">Indents a section that is quoted from another source .
<q> Defines a short quotation
<img> Defines an image
<button> Defines a clickable button
Add Javascript for Mouse Events
<button onclick="copyText()">Copy Text</button>
<input> element
Add Javascript Keyboard events:
<input type="text" onkeypress="displayResult()">
<label> Defines a label for an <input> element
<li> Defines a list item
<ol> Defines an ordered list
<ul> Defines an unordered list
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description/value of a term in a description list
<option> Defines an option in a drop-down list
<select> Defines a drop-down list
<object> Defines an embedded object
<param> Defines a parameter for an object
<menu> Defines a list/menu of commands
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<tr> Defines a row in a table
<col> Specifies column properties for each column within a <colgroup> element 
<colgroup> Specifies a group of one or more columns in a table for formatting
<form> Defines an HTML form for user input
Add Javascript Events: http://www.w3schools.com/tags/ref_eventattributes.asp
<form action="demo_form.asp" onsubmit="checkForm()">

<textarea> Defines a multiline input control (text area)


<br> Defines a single line break
<hr> Defines a thematic change in the content
<small> Defines smaller text
<strong> Defines important text
<sup> Defines superscripted text
<u> Defines text that should be stylistically different from normal text 
<b> Defines bold text (HTML 5 should use <h1> to <h6> <em> <strong> <mark> tags. Or use CSS "font-weight" property to set bold text.
<i> Defines a part of text in an alternate voice or mood


IMAGE EMBED:
<img src="url" alt="popup words" align="middle" height="42" width="42"/> (size in pixels)


Insert Image within the same website/server directory:
<img src="smiley.gif" alt="popup Words">


To link an image to another document, simply nest the <img> tag inside <a> tags.

TEXT FORMAT:
 <h2 style="font-size: 20px;">
 <b> Bold
 <i> Italic
 <small> Smaller Text
 <mark> Highlight Text


JUMP TO PAGE SECTION:
 <A HREF="#codeword">Display Words</A>
<h2><A NAME="codeword">


Blogger changes to : (does not work)
<a href="https://www.blogger.com/blogger.g?blogID=8759371562974226236#gentips">display words</a>


<h2><a href="https://www.blogger.com/null" name="gentips">
　


JUMP ATTRIBUTE TO FIX IN MY BLOGS:
http://backroadrivers.blogspot.com/2014/06/complete-tent-buyers-guide.html




OPEN PAGE IN A NEW TAB
omitted in html5..........target="_blank"


BUTTONS
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>


HTML TABLES
<table> Table
<tr> Table Row
<th>Table Row Heading (By default, major browsers display as bold and centered:<td> Table Row Data Cell (HTML Elements: text, img, list, tables, etc)
<caption> Table Caption
<colgroup> Group of 1 or more columns for formatting
<col> Column properties for ea column within <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table


Cells that span 2 columns wide:
<th colspan="2">Long Display Text</th>


Table Example:
<table border="1" style="width:300px"> (CSS Define Width)
<tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Points</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table>


Table Format via CSS:
<style>
 table,th,td (Define borders for both the table and the table cells)
 { border:1px solid black; }
th (use CSS to left-align the table headings, default center)
{text-align:left;}
th,td
{padding:15px;}
</style>


FORM CONTROLS ELEMENTS (HTML5*)


<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
*<datalist> Specifies a list of pre-defined options for input controls
*<keygen> Defines a key-pair generator field (for forms)
*<output> Defines the result of a calculation


FORMS: The Input Element


* The most important form element is the <input> element.
* The <input> element is used to select user information.
* <input autocomplete="on|off"> The autocomplete attribute of <input> element specifies whether or not an input field should have autocomplete enabled.
* Use the <label> element to define labels for <input> elements.
* Complete Input List: http://www.w3schools.com/tags/tag_input.asp


TYPES OF FORMS:
http://www.w3schools.com/html/html_forms.asp
An HTML form with two different input types; text and submit:
     <form action="demo_form.asp">
     Username: <input type="text" name="usrname"><br>
     <input type="submit" value="Submit">
     </form>


 button
 checkbox
 color
 date
 datetime
 datetime-local
 email
 file
 hidden
 image
 month
 number
 password
 radio
 range
 reset
 search
 submit
 tel
 text
 time
 url
 week 


TEXT FIELD:
<form>
First name:< input type="text" name="firstname"><br>
Last name:< input type="text" name="lastname">
< /form>


PASSWORD FIELD:
<form>
Password:< input type="password" name="pwd">
< /form>


REQUIRED FIELD:
<form action="demo_form.asp">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>


RADIO BUTTONS:
<form>
< input type="radio" name="sex" value="male">Male<br>
< input type="radio" name="sex" value="female">Female
< /form>


CHECKBOXES:
<form>
< input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
< input type="checkbox" name="vehicle" value="Car">I have a car
< /form>


PRESELECTED CHECKBOX:
<form action="demo_form.asp">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car
<br><input type="submit" value="Submit">
</form>


BUTTONS:
<form action="">
<input type="button" value="Hello world!">
</form>


SUBMIT BUTTON:
<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
< /form>


DROP DOWN LIST: (w/pre-selection)
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>


TEXT AREA:
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>


TWO TEXT FIELDS WITH SUBMIT BUTTON:
<form name="input" action="demo_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "demo_form_action.asp".</p>


TWO SUBMIT BUTTONS WITH DIFFERENT TARGET WINDOWS
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank" value="Submit to a new window">
</form>
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)