\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{JdOp}
\pdfinfo{
  /Title (html.pdf)
  /Creator (Cheatography)
  /Author (JdOp)
  /Subject (HTML 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}{D1CD62}
\definecolor{LightBackground}{HTML}{F9F8EB}
\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{HTML Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{JdOp} via \textcolor{DarkBackground}{\uline{cheatography.com/33574/cs/10464/}}}
\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}JdOp \\
  \uline{cheatography.com/jdop} \\
  \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 10th January, 2017.\\
   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*}{2}

\begin{tabularx}{8.4cm}{x{3.12 cm} x{4.88 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Basic required things}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}!DOCTYPE html\textgreater{}\{\{nobreak\}\} & Tells the browser what language it is reading. \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}html\textgreater{}\textless{}/html\textgreater{} & This starts the HTML document, everything is wrapped by this \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}!-{}-      -{}-\textgreater{} & Comment. \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Inside \textless{}html\textgreater{}\textless{}/html\textgreater{}}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}head\textgreater{}\textless{}/head\textgreater{}\{\{nobreak\}\} & Contains information about your HTML file. \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\textless{}body\textgreater{}\textless{}/body\textgreater{}\{\{nobreak\}\} & Iis where you put your content, such as text, images and links. \tn 
% Row Count 5 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Inside \textless{}head\textgreater{}\textless{}/head\textgreater{}}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}title\textgreater{}\textless{}/title\textgreater{}\{\{nobreak\}\} & Cointains the title of the window or the tab. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\textless{}style\textgreater{}\textless{}/style\textgreater{}\{\{nobreak\}\} & Better use external styling, this one will override everything. \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\textless{}link \textgreater{} & Accepts rel=" " and href=" " inside the tag, doesn't close, will let you add external style sheets. \tn 
% Row Count 11 (+ 5)
% Row 3
\SetRowColor{white}
\textless{}meta \textgreater{}\{\{nobreak\}\} & Is used to specify which character set is used, page description, keywords, author, and other metadata.  Metadata is used by browsers (how to display content), by search engines (keywords), and other web services. \tn 
% Row Count 21 (+ 10)
% Row 4
\SetRowColor{LightBackground}
\textless{}script\textgreater{}\textless{}/script\textgreater{}\{\{nobreak\}\} & Is used to define client-side JavaScripts. \tn 
% Row Count 23 (+ 2)
% Row 5
\SetRowColor{white}
\textless{}base \textgreater{} & specifies the base URL to use for all relative URLs contained within a document. \tn 
% Row Count 27 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\textless{}noscript\textgreater{}\textless{}/noscript\textgreater{}\{\{nobreak\}\} & Let user know that his browser doesn't support scripting \tn 
% Row Count 30 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Attributes of \textless{}meta \textgreater{}}}  \tn
% Row 0
\SetRowColor{LightBackground}
name=" " & Specifies a name for the metadata, can contain: application-name, author, description, generator, keywords and viewport. \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
content=" " & Gives the value associated with the http-equiv or name attribute \tn 
% Row Count 8 (+ 3)
% Row 2
\SetRowColor{LightBackground}
charset=" " & Specifies the character encoding for the HTML document, try UTF-8. \tn 
% Row Count 11 (+ 3)
% Row 3
\SetRowColor{white}
http-equiv=" "\{\{nobreak\}\} & Provides an HTTP header for the information/value of the content attribute \tn 
% Row Count 15 (+ 4)
% Row 4
\SetRowColor{LightBackground}
scheme=" " & Specifies a scheme to be used to interpret the value of the content attribute \tn 
% Row Count 19 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.28 cm} x{4.72 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Inside \textless{}body\textgreater{}\textless{}/body\textgreater{}}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}p\textgreater{}\textless{}/p\textgreater{} & Defines a paragraph. preferible to breakline (according to stackexchang). \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\textless{}h\#\textgreater{}\textless{}/h\#\textgreater{} & Bold, larger letters, accepts numbers from 1 to 6, h4 is equal to \textless{}p\textgreater{}\textless{}strong\textgreater{}. \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\textless{}a href=" "\textgreater{}\textless{}/a\textgreater{} & Inserts a link. \tn 
% Row Count 9 (+ 1)
% Row 3
\SetRowColor{white}
\textless{}img src=" " /\textgreater{} & Inserts an image, closes with / at the end, inside an \textless{}a\textgreater{} can be a hyperlink. \tn 
% Row Count 13 (+ 4)
% Row 4
\SetRowColor{LightBackground}
\textless{}ol\textgreater{}\textless{}/ol\textgreater{} & Ordered list, use \textless{}li\textgreater{}\textless{}/li\textgreater{} to add elements. \tn 
% Row Count 15 (+ 2)
% Row 5
\SetRowColor{white}
\textless{}ul\textgreater{}\textless{}/ul\textgreater{} & Unordered list, use \textless{}li\textgreater{}\textless{}/li\textgreater{} to add elements. \tn 
% Row Count 17 (+ 2)
% Row 6
\SetRowColor{LightBackground}
style=" " & This attribute can be used in paragraph and headings. \tn 
% Row Count 20 (+ 3)
% Row 7
\SetRowColor{white}
\textless{}strong\textgreater{}\textless{}/strong\textgreater{}\{\{nobreak\}\} & Strong, bold. \tn 
% Row Count 22 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\textless{}em\textgreater{}\textless{}/em\textgreater{} & Emphasis, cursive. \tn 
% Row Count 23 (+ 1)
% Row 9
\SetRowColor{white}
\textless{}table\textgreater{}\textless{}/table\textgreater{} & Usar \textless{}tr\textgreater{}\textless{}/tr\textgreater{} para crear renglones y \textless{}td\textgreater{}\textless{}/td\textgreater{} para datos, \textless{}th\textgreater{}\textless{}/th\textgreater{} para headers además de \textless{}thead\textgreater{}, \textless{}tbody\textgreater{} y \textless{}tfoot\textgreater{} con sus respectivos cierres para organizar.\textless{}caption\textgreater{}\textless{}/caption\textgreater{} para nombrar la tabla. \tn 
% Row Count 32 (+ 9)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.28 cm} x{4.72 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Inside \textless{}body\textgreater{}\textless{}/body\textgreater{} (cont)}}  \tn
% Row 10
\SetRowColor{LightBackground}
colspan="\#" & Attributo agregado a las tablas para indicar que se expanda \# renglones. \tn 
% Row Count 4 (+ 4)
% Row 11
\SetRowColor{white}
\textless{}div\textgreater{}\textless{}/div\textgreater{} & Para hacer divisiones, pueden ser estilizadas independientemente con CSS, además de barras, menues y botones. \tn 
% Row Count 9 (+ 5)
% Row 12
\SetRowColor{LightBackground}
\textless{}form\textgreater{}\textless{}/form\textgreater{} & Defines a form that is used to collect user input, will include many input methods like boxes and choices. \tn 
% Row Count 14 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Inside the \textless{}form\textgreater{}\textless{}/form\textgreater{}}}  \tn
% Row 0
\SetRowColor{LightBackground}
action=" " & Is needed to tell the form where its contents will be sent to, sometimes scripts. \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
method=" " & How the data in it is going to be sent, get(see what is there) or post(lenghtier, invisible, safe). \tn 
% Row Count 9 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\textless{}input \textgreater{} & You put info here, various types. \tn 
% Row Count 11 (+ 2)
% Row 3
\SetRowColor{white}
type=" " & text(no needed, default. Can have initial value=" "), password(hid letters), checkbox(can have checked attribute), radio(select one), submit(send form, accepts value=" " too). \tn 
% Row Count 19 (+ 8)
% Row 4
\SetRowColor{LightBackground}
\textless{}textarea\textgreater{}\textless{}/textarea\textgreater{}\{\{nobreak\}\} & Accepts rows=" " and cols=" " so you can put large texts. \tn 
% Row Count 22 (+ 3)
% Row 5
\SetRowColor{white}
\textless{}select\textgreater{}\textless{}/select\textgreater{} & It's a box with options use \textless{}option\textgreater{}\textless{}/option\textgreater{} to give options, and selected and value attributes. \tn 
% Row Count 27 (+ 5)
% Row 6
\SetRowColor{LightBackground}
name=" " & Needed, or else will be ignored, those are variable names to be used in the script. \tn 
% Row Count 31 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Inside the \textless{}form\textgreater{}\textless{}/form\textgreater{} (cont)}}  \tn
% Row 7
\SetRowColor{LightBackground}
\textless{}fieldset\textgreater{}\textless{}/fieldset\textgreater{} & Makes a nice delimitation in the window \tn 
% Row Count 2 (+ 2)
% Row 8
\SetRowColor{white}
\textless{}legend\textgreater{}\textless{}/legend\textgreater{} & For the fieldset! \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.76 cm} x{4.24 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Global style=" " attribute}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{style="property:value;} "\{\{nobreak\}\} & This is the general form to use this attribute, separate with commas aditional property:value s. \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
color & Defines font color, can use words for color, like red, blue and yellow. \tn 
% Row Count 9 (+ 4)
% Row 2
\SetRowColor{LightBackground}
background-color & Same, can use words \tn 
% Row Count 10 (+ 1)
% Row 3
\SetRowColor{white}
font-family & Defines the font to be used for an HTML element, try the generic ones: serif,sans-serif,cursive,fantasy and monospace \tn 
% Row Count 16 (+ 6)
% Row 4
\SetRowColor{LightBackground}
font-size & Defines the text size for an HTML element, try percentages or px \tn 
% Row Count 20 (+ 4)
% Row 5
\SetRowColor{white}
text-align & Defines the horizontal text alignment for an HTML element, try center, left or right. \tn 
% Row Count 25 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}