\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{Jianmin Feng (taotao)}
\pdfinfo{
  /Title (html-cheatsheet.pdf)
  /Creator (Cheatography)
  /Author (Jianmin Feng (taotao))
  /Subject (html cheatsheet 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}{095906}
\definecolor{LightBackground}{HTML}{F7F9F7}
\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 cheatsheet Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Jianmin Feng (taotao)} via \textcolor{DarkBackground}{\uline{cheatography.com/79308/cs/19818/}}}
\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}Jianmin Feng (taotao) \\
  \uline{cheatography.com/taotao} \\
  \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 13th June, 2019.\\
   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}{What's HTML}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Hyper Text Markup Language \newline % Row Count 1 (+ 1)
HTML describes the structure of Web pages using markup \newline % Row Count 3 (+ 2)
HTML elements are the building blocks of HTML pages \newline % Row Count 5 (+ 2)
HTML elements are represented by tags \newline % Row Count 6 (+ 1)
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on \newline % Row Count 8 (+ 2)
Browsers do not display the HTML tags, but use them to render the content of the page% Row Count 10 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Html Version:HTML	1991,HTML 2.0(1995), HTML 3.2(1997),HTML 4.01(1999), XHTML(2000),HTML5 (2014)}  \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 structure}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{1. element, nested, \textless{}start tag\textgreater{} content \textless{}/closing tag\textgreater{} \newline % Row Count 2 (+ 2)
{[}h1,p, hr, a, ul,ol,li, br, form, input,select, option, img{]} \newline % Row Count 4 (+ 2)
1) section: html, body,address,article,aside,footer,header,h1-6,hgroup,main,nav,section \newline % Row Count 6 (+ 2)
2)meta: base, head,link,meta,style,title \newline % Row Count 7 (+ 1)
3) text content: blockquote, dd, dir,div, dl,dt,figcaption,figure,hr,li,main,ol,p,pre,ul \newline % Row Count 9 (+ 2)
4) Inline text semantics: a,abbr,b,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rb, p,rt,ruby,s,samp,small,span, strong,subsup,time,tt,u,var,wbr \newline % Row Count 12 (+ 3)
5) img/multimedia:area,audio,img,map,track,video \newline % Row Count 13 (+ 1)
6) embeded content: applet,embed,iframe,noembed,object,param,picture,source \newline % Row Count 15 (+ 2)
7) scripting:canvas,noscript,script, \newline % Row Count 16 (+ 1)
8) demarcating edits:del,ins \newline % Row Count 17 (+ 1)
9) table content: table,th, tr, td, tbody, tfoot, thead,caption, col,colgroup \newline % Row Count 19 (+ 2)
10) forms: form,input,select,option,textarea, button,datalist,fieldset,label,caption,meter,optgroup,output,progress \newline % Row Count 22 (+ 3)
11) interactive: details, dialog,menu, menuitem,summary \newline % Row Count 24 (+ 2)
12) webcomponent: slot,template \newline % Row Count 25 (+ 1)
13) obsolete: acronym\textgreater{}abbr,applet\textgreater{}object,basefront,bgsound\textgreater{}audio, big,blink,center,command,conent,dir,element,frame,frameset, font,image\textgreater{}img,isindex,keygen,listing,marquee,menuitem,miticol,nextid,nobr, noembed,noframes,plaintext,shadow,spacer,strike,tt,xmp \newline % Row Count 31 (+ 6)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML structure (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{2. attribute of elements: always inside start tag, name=value, recommend quoted value, double quotation pref, single quotation needed sometimes \newline % Row Count 3 (+ 3)
id(for js,link etc),class(css),style(css),data-x attr (), href(a), src/alt/width/height  (img), lang(html), title( p), disabled,required,checked \newline % Row Count 6 (+ 3)
3. \textless{}head\textgreater{} is container of html meta data, nothing to do with heading \newline % Row Count 8 (+ 2)
4. view source right click \newline % Row Count 9 (+ 1)
5 style: stype="property:value;" \newline % Row Count 10 (+ 1)
\seqsplit{style="background-color:powderblue;"} \newline % Row Count 11 (+ 1)
style="color:blue;" \newline % Row Count 12 (+ 1)
\seqsplit{style="font-family:courier;"} \newline % Row Count 13 (+ 1)
style="font-size:300\%;" \newline % Row Count 14 (+ 1)
\seqsplit{style="text-align:center;"} \newline % Row Count 15 (+ 1)
6 formating : b, string,i,em,mark,small,del,ins,sub,sup \newline % Row Count 17 (+ 2)
7.quotation:  \newline % Row Count 18 (+ 1)
q,  \newline % Row Count 19 (+ 1)
blockquote cite="https://.....",  \newline % Row Count 20 (+ 1)
abbr title="...." \newline % Row Count 21 (+ 1)
address, cite(italic), bdo dir="rtl",bdo dir="ltr" \newline % Row Count 23 (+ 2)
8 comments \textless{}!-{}-    -{}-\textgreater{}% Row Count 24 (+ 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}{color}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Color values: \newline % Row Count 1 (+ 1)
1. predefined: red,green, blue,black,white etc \newline % Row Count 2 (+ 1)
2. rgb(r,g,b):rgb(255,0,0),(0,255,0),(0,0,255),(0, 0, 0),(255, 255, 255) \newline % Row Count 4 (+ 2)
3. hex:\#ff0000, \#00ff00,\#0000ff, \#000000,\#ffffff \newline % Row Count 5 (+ 1)
4. hsl: hsl(0,100\%,50\%),(120,100\%,50\%),hsl(0,100\%,50\%), l=0 black, 100\% white \newline % Row Count 7 (+ 2)
5. rgba(r,g,b,alpha),  \newline % Row Count 8 (+ 1)
6. hsla(h,s,l,alpha) \newline % Row Count 9 (+ 1)
HSL: \newline % Row Count 10 (+ 1)
hsl(0,100\%,50\%),hsl(120,100\%,50\%),hsl(0,100\%,50\%), \newline % Row Count 12 (+ 2)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. \newline % Row Count 14 (+ 2)
Saturation is a percentage value, 0\% means a shade of gray, and 100\% is the full color. \newline % Row Count 16 (+ 2)
Lightness is also a percentage, 0\% is black, 50\% is neither light or dark, 100\% is white \newline % Row Count 18 (+ 2)
Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0\% to 100\% to get darker/lighter shades: \newline % Row Count 21 (+ 3)
alpha 0(transparent)-1( no transparent) \newline % Row Count 22 (+ 1)
element attribute:  \newline % Row Count 23 (+ 1)
\seqsplit{document.getElementByID("").style.background-color="yellow";} \newline % Row Count 25 (+ 2)
background: \seqsplit{linear-gradient(direction/angle}, color1, color2, color3, etc.); \newline % Row Count 27 (+ 2)
body \{ \newline % Row Count 28 (+ 1)
    background: \seqsplit{-webkit-linear-gradient(\#93B874}, \#C9DCB9);  \newline % Row Count 30 (+ 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}{color (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{    background: \seqsplit{-o-linear-gradient(\#93B874}, \#C9DCB9);  \newline % Row Count 2 (+ 2)
    background: \seqsplit{-moz-linear-gradient(\#93B874}, \#C9DCB9);  \newline % Row Count 4 (+ 2)
    background: linear-gradient(\#93B874, \#C9DCB9);  \newline % Row Count 6 (+ 2)
    background-color: \#93B874;  \newline % Row Count 7 (+ 1)
\} \newline % Row Count 8 (+ 1)
    -webkit-animation: colorchange 60s infinite;  \newline % Row Count 9 (+ 1)
    animation: colorchange 60s infinite;% Row Count 10 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://www.wikihow.com/Set-Background-Color-in-HTML}}  \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}{Cascading Style Sheets (CSS)}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{CSS can be added to HTML elements in 3 ways: \newline  \newline Inline - by using the style attribute in HTML elements \newline Internal - by using a \textless{}style\textgreater{} element in the \textless{}head\textgreater{} section \newline External - by using an external CSS file (recommended, the most common) \newline  \newline \textless{}h1 style="color:blue;"\textgreater{}This is a Blue Heading\textless{}/h1\textgreater{} \newline  \newline \textless{}style\textgreater{} \newline   body \{background-color: powderblue;\} \newline   h1   \{color: blue;\} \newline   p    \{color: red;\} \newline \textless{}/style\textgreater{} \newline  \newline \textless{}head\textgreater{} \newline   \textless{}link rel="stylesheet" href="styles.css"\textgreater{} \newline \textless{}/head\textgreater{} \newline  \newline style.css file: \newline body \{  background-color: powderblue;\} \newline h1 \{  color: blue;font-family: verdana;font-size: 300\%;\} \newline p \{  color: red;border: 1px solid powderblue;padding: 30px;margin: 50px;\} \newline  \newline \textless{}p id="p01"\textgreater{}I am different\textless{}/p\textgreater{} \newline \#p01 \{  color: blue;\} \newline  \newline \textless{}p class="error"\textgreater{}I am different\textless{}/p\textgreater{} \newline p.error \{  color: red;\} \newline  \newline rel link \newline \textless{}link rel="stylesheet" \seqsplit{href="https://www.w3schools.com/html/styles}.css"\textgreater{} \newline \textless{}link rel="stylesheet" href="/html/styles.css"\textgreater{} \newline \textless{}link rel="stylesheet" href="styles.css"\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{style attribute- inline \newline style element \textless{}style\textgreater{} -{}- internal css \newline \textless{}link\textgreater{} element for external css file \newline \textless{}head\textgreater{} element is container of \textless{}link\textgreater{} and \textless{}style\textgreater{} elements \newline css related attribute: color, font-family,font-size, border, padding, margin}  \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}{first scope}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}!DOCTYPE html\textgreater{} \newline \textless{}html\textgreater{} \newline \textless{}head\textgreater{} \newline   \textless{}title\textgreater{}Page Title\textless{}/title\textgreater{} \newline \textless{}/head\textgreater{} \newline \textless{}body\textgreater{} \newline  \newline   \textless{}h1\textgreater{}This is a Heading\textless{}/h1\textgreater{} \newline   \textless{}p\textgreater{}This is a paragraph.\textless{}/p\textgreater{} \newline   \textless{}a \seqsplit{href="https://www.w3schools}.com"\textgreater{}This is a link\textless{}/a\textgreater{} \newline   \textless{}img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"\textgreater{} \newline   \textless{}button\textgreater{}Click me\textless{}/button\textgreater{} \newline   \textless{}ul\textgreater{} \newline     \textless{}li\textgreater{}Coffee\textless{}/li\textgreater{} \newline     \textless{}li\textgreater{}Tea\textless{}/li\textgreater{} \newline   \textless{}/ul\textgreater{} \newline  \newline   \textless{}ol\textgreater{} \newline     \textless{}li\textgreater{}Coffee\textless{}/li\textgreater{} \newline     \textless{}li\textgreater{}Tea\textless{}/li\textgreater{} \newline   \textless{}/ol\textgreater{} \newline  \newline   \textless{}br /\textgreater{} \newline  \newline \textless{}/body\textgreater{} \newline \textless{}/html\textgreater{} \newline  \newline The \textless{}!DOCTYPE html\textgreater{} declaration defines this document to be HTML5 \newline The \textless{}html\textgreater{} element is the root element of an HTML page \newline The \textless{}head\textgreater{} element contains meta information about the document \newline The \textless{}title\textgreater{} element specifies a title for the document \newline The \textless{}body\textgreater{} element contains the visible page content \newline The \textless{}h1\textgreater{} element defines a large heading \newline The \textless{}p\textgreater{} element defines a paragraph} \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}{Notes}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{1 case insensitive,but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML. \newline % Row Count 3 (+ 3)
2 closing tag optional, but never forget it in practice, such as \textless{}br/\textgreater{} instead of \textless{}br\textgreater{} \newline % Row Count 5 (+ 2)
3) attributes quoted with "", use sigle quote when needed.% Row Count 7 (+ 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 links}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}a href="url"\textgreater{}link text\textless{}/a\textgreater{} \newline url with or without / \newline \textless{}a \seqsplit{href="https://www.w3schools}.com/html/"\textgreater{}Visit our HTML tutorial\textless{}/a\textgreater{} \newline \textless{}a href="html\_images.asp"\textgreater{}HTML Images\textless{}/a\textgreater{} \newline  \newline link color: \newline \textless{}style\textgreater{} \newline a:link \{  color: green; background-color: transparent;   text-decoration: none;\} \newline a:visited \{ color: pink; background-color: transparent;  text-decoration: none;\} \newline a:hover,a.active \{color: red;  background-color: transparent;  text-decoration: underline;\} \newline \textless{}/style\textgreater{} \newline  \newline target attribute: \newline \_blank \newline \_self (default) \newline \_parent \newline \_top: to break off from locking in a frame \newline framename \newline  \newline use img as a link \newline \textless{}a href="default.asp"\textgreater{} \newline    \textless{}img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"\textgreater{} \newline \textless{}/a\textgreater{} \newline  \newline title attribute: used for tooltip text when mouse move over the link \newline  \newline page bookmark \newline \textless{}h2 id="C4"\textgreater{}Chapter 4\textless{}/h2\textgreater{} \newline \textless{}a href="\#C4"\textgreater{}Jump to Chapter 4\textless{}/a\textgreater{}  \newline \textless{}a href="html\_demo.html\#C4"\textgreater{}Jump to Chapter 4\textless{}/a\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{link tag \textless{}a\textgreater{} \newline attributes: href (full url, rel path, current dir,"\#ID"), target \textless{}img\textgreater{},id}  \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 img}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}img src="url"\textgreater{} \newline \textless{}img src="img\_girl.jpg" alt="Girl in a jacket" style="float:right;width:42px;height:42px;border:0;"\textgreater{} \newline \textless{}img src="img\_girl.jpg" alt="Girl in a jacket" width="500" height="600"\textgreater{} \newline  \newline URL: same folder, another folder, another server \newline alt:required \newline width/height recommend, using style sheet is better than attributes \newline float \newline border \newline  \newline usemap attribute \newline  \newline \textless{}img src="workplace.jpg" alt="Workplace" usemap="\#workmap"\textgreater{} \newline  \newline \textless{}map name="workmap"\textgreater{} \newline   \textless{}area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"\textgreater{} \newline   \textless{}area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"\textgreater{} \newline \textless{}/map\textgreater{} \newline  \newline \textless{}body \seqsplit{style="background-image:url('clouds}.jpg');"\textgreater{} \newline  \newline html5: flexible media devices \newline \textless{}picture\textgreater{} \newline   \textless{}source media="(min-width: 650px)" \seqsplit{srcset="img\_pink\_flowers}.jpg"\textgreater{} \newline   \textless{}source media="(min-width: 465px)" \seqsplit{srcset="img\_white\_flower}.jpg"\textgreater{} \newline   \textless{}img \seqsplit{src="img\_orange\_flowers}.jpg" alt="Flowers" style="width:auto;"\textgreater{} \newline \textless{}/picture\textgreater{} \newline  \newline screen reader: listen to the screen} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}img\textgreater{} \newline src,alt,with,height,float, \newline usermap, \textless{}map\textgreater{} \textless{}area\textgreater{} \newline \textless{}picture\textgreater{} \textless{}source\textgreater{}media,srcset,\textless{}img\textgreater{}}  \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}{Table}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}table\textgreater{} \newline \textless{}caption\textgreater{}Monthly savings\textless{}/caption\textgreater{} \newline \textless{}tr\textgreater{} \newline \textless{}th\textgreater{} \newline \textless{}td\textgreater{} \newline  \newline attribute:  \newline  \newline style="width:100\%" \newline colspan="2" \newline rowspan="2" \newline caption: immediate followed \textless{}table\textgreater{} \newline  \newline CSS: table, th, td \{   \newline width:100\%; \newline border: 1px solid black; \newline border-collapse: collapse; \newline border-spacing: 5px; \newline padding: 15px; \newline text-align: left; \newline \} \newline  \newline table\#t01 \{ \newline   width: 100\%;  \newline   background-color: \#f1f1c1; \newline \} \newline table\#t01 tr:nth-child(even) \{ \newline   background-color: \#eee; \newline \} \newline table\#t01 tr:nth-child(odd) \{ \newline   background-color: \#fff; \newline \} \newline table\#t01 th \{ \newline   color: white; \newline   background-color: black; \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}table\textgreater{}\textless{}caption\textgreater{}\textless{}tr\textgreater{}\textless{}th\textgreater{}\textless{}td\textgreater{} \newline formating: \textless{}colgroup\textgreater{}\textless{}col\textgreater{}\textless{}thead\textgreater{}\textless{}tbody\textgreater{}\textless{}tfoot\textgreater{} \newline attributes: border, border-collapse,border-spacing,padding,text-align,colspan,rowspan,id}  \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}{List}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}ul style="list-style-type:circle;"\textgreater{} \newline   \textless{}li\textgreater{}Coffee\textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}Tea\textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}Milk\textless{}/li\textgreater{} \newline \textless{}/ul\textgreater{} \newline  \newline \textless{}ol type="1" \textgreater{} \newline   \textless{}li\textgreater{}Coffee\textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}Tea\textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}Milk\textless{}/li\textgreater{} \newline \textless{}/ol\textgreater{} \newline  \newline type: "1","A"."a"."I","i" \newline  \newline HTML Description Lists \newline \textless{}dl\textgreater{} \newline   \textless{}dt\textgreater{}Coffee\textless{}/dt\textgreater{} \newline   \textless{}dd\textgreater{}- black hot drink\textless{}/dd\textgreater{} \newline   \textless{}dt\textgreater{}Milk\textless{}/dt\textgreater{} \newline   \textless{}dd\textgreater{}- white cold drink\textless{}/dd\textgreater{} \newline \textless{}/dl\textgreater{} \newline  \newline Nested HTML Lists \newline \textless{}ul\textgreater{} \newline   \textless{}li\textgreater{}Coffee\textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}Tea \newline     \textless{}ul\textgreater{} \newline       \textless{}li\textgreater{}Black tea\textless{}/li\textgreater{} \newline       \textless{}li\textgreater{}Green tea\textless{}/li\textgreater{} \newline     \textless{}/ul\textgreater{} \newline   \textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}Milk\textless{}/li\textgreater{} \newline \textless{}/ul\textgreater{} \newline  \newline \textless{}ol start="50"\textgreater{} \newline   \textless{}li\textgreater{}Coffee\textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}Tea\textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}Milk\textless{}/li\textgreater{} \newline \textless{}/ol\textgreater{} \newline  \newline exmple style a list horizontally, to create a navigation menu using css \newline  \newline \textless{}!DOCTYPE html\textgreater{} \newline \textless{}html\textgreater{} \newline \textless{}head\textgreater{} \newline \textless{}style\textgreater{} \newline ul \{ \newline   list-style-type: none; \newline   margin: 0; \newline   padding: 0; \newline   overflow: hidden; \newline   background-color: \#333333; \newline \} \newline  \newline li \{ \newline   float: left; \newline \} \newline  \newline li a \{ \newline   display: block; \newline   color: white; \newline   text-align: center; \newline   padding: 16px; \newline   text-decoration: none; \newline \} \newline  \newline li a:hover \{ \newline   background-color: \#111111; \newline \} \newline \textless{}/style\textgreater{} \newline \textless{}/head\textgreater{} \newline \textless{}body\textgreater{} \newline  \newline \textless{}ul\textgreater{} \newline   \textless{}li\textgreater{}\textless{}a href="\#home"\textgreater{}Home\textless{}/a\textgreater{}\textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}\textless{}a href="\#news"\textgreater{}News\textless{}/a\textgreater{}\textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}\textless{}a href="\#contact"\textgreater{}Contact\textless{}/a\textgreater{}\textless{}/li\textgreater{} \newline   \textless{}li\textgreater{}\textless{}a href="\#about"\textgreater{}About\textless{}/a\textgreater{}\textless{}/li\textgreater{} \newline \textless{}/ul\textgreater{} \newline  \newline \textless{}/body\textgreater{} \newline \textless{}/html\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}