\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{van87}
\pdfinfo{
  /Title (the-basics-of-html-5.pdf)
  /Creator (Cheatography)
  /Author (van87)
  /Subject (The Basics Of HTML 5 Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{135CB0}
\definecolor{LightBackground}{HTML}{F0F4FA}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{The Basics Of HTML 5 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{van87} via \textcolor{DarkBackground}{\uline{cheatography.com/20354/cs/3175/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}van87 \\
  \uline{cheatography.com/van87} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 12th May, 2016.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML 5 Made Simple}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Introduction \newline % Row Count 1 (+ 1)
{\bf{H= Hyper}} \newline % Row Count 2 (+ 1)
{\bf{T= Text}} \newline % Row Count 3 (+ 1)
{\bf{M= Markup}}  \newline % Row Count 4 (+ 1)
{\bf{L= Language}} \newline % Row Count 5 (+ 1)
{\bf{5= Latest Version (as of 2014)}} \newline % Row Count 6 (+ 1)
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.% Row Count 15 (+ 9)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML Editor}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{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.  \newline % Row Count 8 (+ 8)
{\bf{W= What}} \newline % Row Count 9 (+ 1)
{\bf{Y= You}} \newline % Row Count 10 (+ 1)
{\bf{S=   See}} \newline % Row Count 11 (+ 1)
{\bf{I=    Is}} \newline % Row Count 12 (+ 1)
{\bf{W= What}} \newline % Row Count 13 (+ 1)
{\bf{Y= You}} \newline % Row Count 14 (+ 1)
{\bf{G= Get}} \newline % Row Count 15 (+ 1)
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.% Row Count 19 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML Colors}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{3 Methods of color:}} \newline % Row Count 1 (+ 1)
Name = RED \newline % Row Count 2 (+ 1)
RGB  = 255 R, 0 G, 0 B \newline % Row Count 3 (+ 1)
Hexadecimal = \#FF0000 \newline % Row Count 4 (+ 1)
Hexadecimal code is mostly used in html 5 color. Always use the \# sign following 3 points of digits.  \newline % Row Count 7 (+ 3)
They range ONLY from 0123456789 in numbers and abcdef. Nothing above the "f", no Z, G, W etc. \newline % Row Count 9 (+ 2)
If you have chrome, you can install colorzilla extension add on or go to www.colorpicker.com% Row Count 11 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML5 Meta Tags}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Metatags go in between the opening and the closing head tags.  \newline % Row Count 2 (+ 2)
Basic metadata include:  \newline % Row Count 3 (+ 1)
{\bf{Description}}  \newline % Row Count 4 (+ 1)
{\bf{Keywords}}  \newline % Row Count 5 (+ 1)
{\bf{Author}}  \newline % Row Count 6 (+ 1)
{\bf{Charset}}% Row Count 7 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML 5 Audio Tag}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{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.  \newline % Row Count 3 (+ 3)
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.  \newline % Row Count 8 (+ 5)
But to keep this simple and basic here are the most common: \newline % Row Count 10 (+ 2)
{\bf{.mp3}} \newline % Row Count 11 (+ 1)
{\bf{.wav}} \newline % Row Count 12 (+ 1)
{\bf{.aif}} \newline % Row Count 13 (+ 1)
Example of what coding in HTML editor looks like: \newline % Row Count 14 (+ 1)
\textless{}body\textgreater{} \newline % Row Count 15 (+ 1)
\textless{}audio controls="controls"\textgreater{} \newline % Row Count 16 (+ 1)
       \textless{}source \seqsplit{src="ebay-store-settup.mp3"} type="audio/mp3"\textgreater{} \newline % Row Count 18 (+ 2)
       \textless{}source \seqsplit{src="ebay-store-settup.wav"} type="audio/wav"\textgreater{} \newline % Row Count 20 (+ 2)
       \textless{}source \seqsplit{src="ebay-store-settup.aif"} type="audio/aif"\textgreater{} \newline % Row Count 22 (+ 2)
 \textless{}/audio\textgreater{} \newline % Row Count 23 (+ 1)
\textless{}/body\textgreater{} \newline % Row Count 24 (+ 1)
\textless{}/html\textgreater{}% Row Count 25 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Newly Added HTML 5 Attributes}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{These attributes can be used with most elements. \newline % Row Count 1 (+ 1)
{\bf{contenteditable}} Allows the user to change the contents of an element. \newline % Row Count 3 (+ 2)
Ex: \textless{}p contenteditable = 'true '\textgreater{}You can edit this element. \textless{}/p\textgreater{}  \newline % Row Count 5 (+ 2)
{\bf{contextmenu}} Attaches a right-click menu to an element. \newline % Row Count 7 (+ 2)
Ex: \textless{}p contextmenu = 'menu'\textgreater{}Right-click this element. \textless{}/p\textgreater{} \newline % Row Count 9 (+ 2)
       \textless{}menu id = 'menu'\textgreater{} \newline % Row Count 10 (+ 1)
       \textless{}command label = 'Option A' onclick = 'do\_a() '\textgreater{} \newline % Row Count 12 (+ 2)
       \textless{}command label = 'Option B' onclick = 'do\_a() '\textgreater{} \newline % Row Count 14 (+ 2)
 \textless{}/menu\textgreater{} \newline % Row Count 15 (+ 1)
{\bf{draggable}} lets you know whether an element can be dragged.  \newline % Row Count 17 (+ 2)
Ex: \textless{}img draggable = 'true' src = 'myimage.jpg'\textgreater{} \newline % Row Count 18 (+ 1)
{\bf{dropzone}} specfies whether dragged information is to be copied, moved, or linked when it is dropped on an element; supported values are {\bf{copy}},{\bf{link}} and {\bf{move}}. \newline % Row Count 22 (+ 4)
Ex: \textless{}div dropzone= 'copy'\textgreater{}\textless{}/div\textgreater{} \newline % Row Count 23 (+ 1)
{\bf{hidden}} specifies whether an element should be hidden from display. \newline % Row Count 25 (+ 2)
Ex: \textless{}p hidden = 'hidden'\textgreater{}This text is not shown. \textless{}/p\textgreater{} \newline % Row Count 27 (+ 2)
{\bf{Spellcheck}} specifies whether an element should have its spelling and grammar checked; particularly useful with the {\bf{contenteditable}} attribute.  \newline % Row Count 31 (+ 4)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Newly Added HTML 5 Attributes (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Ex: \textless{}p contenteditable = 'true' spellcheck = 'true'\textgreater{} \newline % Row Count 2 (+ 2)
       You can edit this text, and it will be spell-checked. \newline % Row Count 4 (+ 2)
\textless{}/p\textgreater{}% Row Count 5 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Rules of Coding To Live By}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{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.  \newline % Row Count 6 (+ 6)
{\bf{1.	HTML documents must all have 1 root element.}}  \newline % Row Count 8 (+ 2)
{\bf{2.	Make sure that every tag opened is closed.}} \newline % Row Count 9 (+ 1)
{\bf{3.	Empty elements must also be closed.}}  \newline % Row Count 10 (+ 1)
{\bf{4.	It is good practice to rest your tags for cleaner coding.}} \newline % Row Count 12 (+ 2)
{\bf{5.	Ensure that tag and attribute names are lower case.}} \newline % Row Count 14 (+ 2)
{\bf{6.	Quote attribute values with a single or double quote, (') (").}} \newline % Row Count 16 (+ 2)
{\bf{7.	Attributes must have a corresponding value.}}  \newline % Row Count 18 (+ 2)
{\bf{8.	Minimizing attributes is not allowed.}}% Row Count 19 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Of course, there is always an exception to a rule, but these are just the standard rules to follow.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Saving A File}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{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.  \newline % Row Count 8 (+ 8)
Browsers don't care whether or not the letters are lower case. Just stay within the guidelines mentioned, and you should be ok.  \newline % Row Count 11 (+ 3)
If you want the browser to auto find your page you must be name index.html.% Row Count 13 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML Images}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{How to add images to your page}} \newline % Row Count 1 (+ 1)
Look up the folder where your image is held \newline % Row Count 2 (+ 1)
Write the code in the index file to bring those images on the index page \newline % Row Count 4 (+ 2)
\textless{}img /\textgreater{} tag doesn't have open and closing, it's all the same \newline % Row Count 6 (+ 2)
Image tag looks like this:  \newline % Row Count 7 (+ 1)
\textless{}/head\textgreater{} \newline % Row Count 8 (+ 1)
\textless{}body\textgreater{} \newline % Row Count 9 (+ 1)
\textless{}img src= \seqsplit{"images/nameoftheimage.jpg"} /\textgreater{}   \newline % Row Count 10 (+ 1)
\textless{}/body\textgreater{} \newline % Row Count 11 (+ 1)
\textless{}/html\textgreater{} \newline % Row Count 12 (+ 1)
This is just the basic image, but you can get creative by adding different attributes. Like Height and Width. \newline % Row Count 15 (+ 3)
{\bf{Example:  \textless{}img src= \seqsplit{"images/nameoftheimage.jpg"} height="150" width="150" /\textgreater{}}}% Row Count 17 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML 5 Video Tag}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{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 \newline % Row Count 5 (+ 5)
Go to http://html5test.com to see which formats is best for your chosen browser. \newline % Row Count 7 (+ 2)
To do basic video coding, you must enter \textless{}video\textgreater{} element between \textless{}body\textgreater{} elements. \newline % Row Count 9 (+ 2)
\textless{}body\textgreater{} \newline % Row Count 10 (+ 1)
\textless{}video width="320" height="240" controls autoplay\textgreater{} \newline % Row Count 12 (+ 2)
       \textless{}source src="movie.webm" type="video/webm"\textgreater{} \newline % Row Count 14 (+ 2)
       \textless{}source src="movie.mp4" type="video/mp4"\textgreater{} \newline % Row Count 16 (+ 2)
       \textless{}source src="movie.ogg" type="video/ogg"\textgreater{} \newline % Row Count 18 (+ 2)
\textless{}/video\textgreater{} \newline % Row Count 19 (+ 1)
\textless{}/body\textgreater{}% Row Count 20 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML Unordered Lists}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{An unordered list, is a list of items without a definite order. Like listing bullets stating benefits of a product for example.  \newline % Row Count 3 (+ 3)
\textless{}ul\textgreater{}- Unordered List \newline % Row Count 4 (+ 1)
\textless{}ul\textgreater{} \newline % Row Count 5 (+ 1)
       \textless{}li\textgreater{} It is easy to remember\textless{}/li\textgreater{} \newline % Row Count 6 (+ 1)
        \textless{}li\textgreater{} Fits in the palm of your hand\textless{}/li\textgreater{}% Row Count 7 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{New HTML5 Elements}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Over 20 new elements have been introduced into HTML5, for the sake of keeping it digestible we listed just some here. \newline % Row Count 3 (+ 3)
{\bf{\textless{}article\textgreater{}}} Self-contained content used in syndication ex. Blog entry, article, forum post.  \newline % Row Count 5 (+ 2)
\textless{}article\textgreater{} This is an article…\textless{}/article\textgreater{} \newline % Row Count 6 (+ 1)
{\bf{\textless{}aside\textgreater{}}} Section of a page consisting of content related to that around the element but that could be considered separate from that content.  \newline % Row Count 9 (+ 3)
Ex. \textless{}article\textgreater{}This is an article\textless{}aside\textgreater{}… and this is an aside\textless{}/aside\textgreater{}\textless{}/article\textgreater{} \newline % Row Count 11 (+ 2)
{\bf{\textless{}audio\textgreater{}}} Section containing audio material in a format playable by HTML5 without recourse to plug ins, by means of the \textless{}source\textgreater{} element.  \newline % Row Count 14 (+ 3)
Ex. \textless{}audio\textgreater{} \newline % Row Count 15 (+ 1)
	\textless{}source src= 'music.mp3' type='audio/mp3'\textgreater{}Your browser doesn't support the audio tag. \textless{}/audio\textgreater{} \newline % Row Count 18 (+ 3)
{\bf{\textless{}canvas\textgreater{}}} Provides JavaScript with a bitmap canvas on which drawings can be made in real time.  \newline % Row Count 20 (+ 2)
Ex. \textless{}canvas id= 'canvl'\textgreater{}\textless{}/canvas\textgreater{} \newline % Row Count 21 (+ 1)
      \textless{}script\textgreater{} / / Draw a filled square \newline % Row Count 22 (+ 1)
         canvas = document.getElementById ('canvl') \newline % Row Count 24 (+ 2)
         contex	     = canvas.getContext ('2d') \newline % Row Count 26 (+ 2)
         contex.fillstyle = '\#445566' \newline % Row Count 27 (+ 1)
         contex.fillRect (0, 50, 50) \newline % Row Count 28 (+ 1)
     \textless{}/script\textgreater{} \newline % Row Count 29 (+ 1)
{\bf{\textless{}command\textgreater{}}} Used within a \textless{}menu\textgreater{} element, this tag defines a command the user can invoke.  \newline % Row Count 31 (+ 2)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{New HTML5 Elements (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Ex. \textless{}menu\textgreater{}  \newline % Row Count 1 (+ 1)
	\textless{}command onclick = 'alert ("Help is at hand!") \newline % Row Count 3 (+ 2)
	'\textgreater{}Help\textless{}/command\textgreater{} \newline % Row Count 4 (+ 1)
     \textless{}/menu\textgreater{}% Row Count 5 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Creating The Basic Page}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Syntax – rules for communicating to the browser. \newline % Row Count 2 (+ 2)
FAB 5 TAGS for basic page creation.  \newline % Row Count 3 (+ 1)
{\bf{1.	\textless{} Declaration\textgreater{} for HTML5 it's \textless{}!DOCTYPE html\textgreater{}}} \newline % Row Count 5 (+ 2)
{\bf{2.	\textless{}HTML\textgreater{}}} \newline % Row Count 6 (+ 1)
{\bf{3.	\textless{}head\textgreater{}}} \newline % Row Count 7 (+ 1)
{\bf{4.	\textless{}Title\textgreater{}}} \newline % Row Count 8 (+ 1)
{\bf{5.	\textless{}body\textgreater{}}} \newline % Row Count 9 (+ 1)
Most of the time they come in pairs, but exception can occur.  \newline % Row Count 11 (+ 2)
Items needed to create a webpage.  \newline % Row Count 12 (+ 1)
-	Text Editor \newline % Row Count 13 (+ 1)
-	Browser \newline % Row Count 14 (+ 1)
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.   \newline % Row Count 19 (+ 5)
HTML5 supports the self- closing tag format /. It is placed before \textgreater{} of a tag.  \newline % Row Count 21 (+ 2)
{\bf{\textless{}html\textgreater{} = opening tag}} \newline % Row Count 22 (+ 1)
{\bf{\textless{}/ html\textgreater{}= closing tag.}} \newline % Row Count 23 (+ 1)
\textless{}br /\textgreater{} -tag doesn't open or close, this is called the break tag. It will move your content to the next line% Row Count 26 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML Nesting}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Nesting is when you assign different HTML elements to the same block of content.  \newline % Row Count 2 (+ 2)
Example: \textless{}p\textgreater{}\textless{}strong\textgreater{}\textless{}i\textgreater{}Content goes here but if you add more content it can go here or there blah blah blah.\textless{}/i\textgreater{}\textless{}/strong\textgreater{}\textless{}/p\textgreater{}.  \newline % Row Count 5 (+ 3)
Closing tags always go opposite the opening tags.  \newline % Row Count 7 (+ 2)
\textless{}strong\textgreater{}= {\bf{bold element}}, opening tag \newline % Row Count 8 (+ 1)
\textless{}/strong\textgreater{}= {\bf{bold element}}, closing tag \newline % Row Count 9 (+ 1)
\textless{}i\textgreater{}= {\emph{italicized}} element, opening tag \newline % Row Count 10 (+ 1)
\textless{}/i\textgreater{}={\emph{italicized}} element, closing tag \newline % Row Count 11 (+ 1)
\textless{}p\textgreater{}= paragraph element, opening tag \newline % Row Count 12 (+ 1)
\textless{}/p\textgreater{}= paragraph element, closing tag% Row Count 13 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML Comments Tag}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{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.  \newline % Row Count 5 (+ 5)
Example: \newline % Row Count 6 (+ 1)
 {\bf{\textless{}! - - this is where my sales page begins - - \textgreater{}}} \newline % Row Count 8 (+ 2)
{\bf{Opening comment tag = \textless{}! - -}} \newline % Row Count 9 (+ 1)
{\bf{Closing comment tag = - - \textgreater{}}} \newline % Row Count 10 (+ 1)
If you would like see what a page looks like without an element, you don't have to erase that element.  \newline % Row Count 13 (+ 3)
You can comment it out.  \newline % Row Count 14 (+ 1)
Example:  \newline % Row Count 15 (+ 1)
\textless{}body\textgreater{} \newline % Row Count 16 (+ 1)
  {\bf{\textless{}!-{}-\textless{}h1\textgreater{}This is my header\textless{}/h1-{}-\textgreater{}}} \newline % Row Count 17 (+ 1)
  {\bf{\textless{}p\textgreater{}This is my comment tag demo video blah blah blah\textless{}/p\textgreater{}}} \newline % Row Count 19 (+ 2)
\textless{}/body\textgreater{} \newline % Row Count 20 (+ 1)
\textless{}/html\textgreater{}% Row Count 21 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML Ordered Lists}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{What is an order list? \newline % Row Count 1 (+ 1)
An ordered list is a list of items with a definite order. Ex: Dave's top ten.  \newline % Row Count 3 (+ 2)
How to set up an ordered list? \newline % Row Count 4 (+ 1)
\textless{}ol\textgreater{} Ordered List \newline % Row Count 5 (+ 1)
\textless{}li\textgreater{} List Item \newline % Row Count 6 (+ 1)
\textless{}h2\textgreater{} Top 5 Cities I've lived in\textless{}/h2\textgreater{} \newline % Row Count 7 (+ 1)
\textless{}ol\textgreater{} type= \newline % Row Count 8 (+ 1)
\textless{}li\textgreater{}Anchorage\textless{}/li\textgreater{} \newline % Row Count 9 (+ 1)
\textless{}li\textgreater{}Kansas City\textless{}/li\textgreater{} \newline % Row Count 10 (+ 1)
\textless{}li\textgreater{}St. Louis\textless{}/li\textgreater{} \newline % Row Count 11 (+ 1)
\textless{}li\textgreater{}London\textless{}/li\textgreater{} \newline % Row Count 12 (+ 1)
\textless{}li\textgreater{}San Diego\textless{}/li\textgreater{} \newline % Row Count 13 (+ 1)
   \textless{}/ol\textgreater{}  \newline % Row Count 14 (+ 1)
\textless{}/body\textgreater{} \newline % Row Count 15 (+ 1)
\textless{}/html\textgreater{}% Row Count 16 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{New Elements (continuation)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}details\textgreater{}}} 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 \textless{}summary\textgreater{} element. \newline % Row Count 5 (+ 5)
Ex. \textless{}details\textgreater{} \newline % Row Count 6 (+ 1)
          \textless{}summary there are 36 species of wild cat \textless{}/summary\textgreater{} \newline % Row Count 8 (+ 2)
 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.  \newline % Row Count 12 (+ 4)
     \textless{}/details\textgreater{} \newline % Row Count 13 (+ 1)
{\bf{\textless{}embed\textgreater{}}} Allows embedding of external content and has no matching closing tag; supported parameters are quality, src, and type.  \newline % Row Count 16 (+ 3)
Ex. \textless{}embed type= \seqsplit{'application/x-shockwave-flash'} \newline % Row Count 18 (+ 2)
	src= 'flashgsme.swf' quality = 'high'\textgreater{}  \newline % Row Count 19 (+ 1)
{\bf{\textless{} figure\textgreater{}}} Used to contain illustrations, diagrams, and other figures, including an optional \textless{}figcaption\textgreater{} element for providing a caption.  \newline % Row Count 22 (+ 3)
Ex. \textless{}figure\textgreater{} \newline % Row Count 23 (+ 1)
          \textless{}img scr = 'atwork.jpg' alt = 'Working'\textgreater{} \newline % Row Count 25 (+ 2)
          \textless{}figcaption\textgreater{}Me at work\textless{}/figcaption\textgreater{} \newline % Row Count 26 (+ 1)
     \textless{}/figure\textgreater{} \newline % Row Count 27 (+ 1)
{\bf{\textless{}footer\textgreater{}}} Typically contains information about its section, such as who wrote it, links to related documents, copyright data, etc. \newline % Row Count 30 (+ 3)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{New Elements (continuation) (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Ex. \textless{}footer\textgreater{} By S. Smith \© 2013\textless{}/footer\textgreater{} \newline % Row Count 1 (+ 1)
\textless{}header\textgreater{} Container for a group of introductory or navigational aids. \newline % Row Count 3 (+ 2)
Ex. \textless{}header\textgreater{} \newline % Row Count 4 (+ 1)
	\textless{}h1\textgreater{} Welcome to this website \textless{}/h1\textgreater{} \newline % Row Count 5 (+ 1)
	\textless{}a href = '/ games'\textgreater{}Games\textless{}/a\textgreater{} |  \newline % Row Count 6 (+ 1)
	\textless{} a href = ' / forum'\textgreater{}Forum\textless{}/a\textgreater{} | \newline % Row Count 7 (+ 1)
	\textless{} a href = ' / download'\textgreater{}Download\textless{}/a\textgreater{} \newline % Row Count 8 (+ 1)
            \textless{}/header\textgreater{}% Row Count 9 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{For More Information Visit These Sites}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{http://www.w3schools.com/html/} \newline % Row Count 1 (+ 1)
\seqsplit{http://html-color-codes.info/} \newline % Row Count 2 (+ 1)
\seqsplit{http://htmldog.com/guides/html/beginner/} \newline % Row Count 3 (+ 1)
http://www.w3.org/html/ \newline % Row Count 4 (+ 1)
\seqsplit{http://www.colorpicker.com} \newline % Row Count 5 (+ 1)
 http://html5test.com% Row Count 6 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}