\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{Glumy}
\pdfinfo{
  /Title (html.pdf)
  /Creator (Cheatography)
  /Author (Glumy)
  /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}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\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}{Glumy} via \textcolor{DarkBackground}{\uline{cheatography.com/110393/cs/21616/}}}
\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}Glumy \\
  \uline{cheatography.com/glumy} \\
  \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 20th January, 2020.\\
   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{2.32 cm} x{5.68 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{HTML5-Grundgerüst}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}DOCTYPE html\textgreater{} & ...übermittelt dem Browser in welcher HTML-Version die Seite vorliegt \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\textless{}html\textgreater{} \textless{}/html\textgreater{} & \seqsplit{...Dokumenttyp-Deklaration} \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}head\textgreater{} \textless{}/head\textgreater{} & ...beinhaltet alle Daten die für den Browser wichtig sind, kann auch Scripts, Styles, Metainformationen, Zeichenkodierungen, etc. enthalten \tn 
% Row Count 10 (+ 5)
% Row 3
\SetRowColor{white}
\textless{}title\textgreater{} \textless{}/title\textgreater{} & ...definiert den Titel des Dokuments und zeigt diesen in der Toolbar des Browsers an \tn 
% Row Count 13 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\textless{}body\textgreater{} \textless{}/body\textgreater{} & ...beinhaltet des Content der Website \tn 
% Row Count 15 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Überschriften}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit \textless{}h\textgreater{} kann man den Text als Überschrift definieren, die Zahl gibt die Gr{\"o}{\ss}e vom Text an.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}h1\textgreater{} \textless{}/h1\textgreater{}} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}h2\textgreater{} \textless{}/h2\textgreater{}} \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}h3\textgreater{} \textless{}/h3\textgreater{}} \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}h4\textgreater{} \textless{}/h4\textgreater{}} \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}h5\textgreater{} \textless{}/h5\textgreater{}} \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}h6\textgreater{} \textless{}/h6\textgreater{}} \tn 
% Row Count 8 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Google Maps}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Um eine Map einzufügen muss man zuerst auf den Ort auf Google Maps klicken, dann auf "Teilen" und dort auf "Karten einbetten". Dort ist ein Link, den man dann in die HTML-Datei einfügen kann.} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}iframe \seqsplit{src="https://www.google.com/maps/embed?pb=}!1m18!1m12!1m3!1d5131526.917854283!2d5.9692252276088835!3d51.096865486635586!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479a721ec2b1be6b\%3A0x75e85d6b8e91e55b!2sDeutschland!5e0!3m2!1sde!2sat!4v1579384438700!5m2!1sde!2sat" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""\textgreater{}\textless{}/iframe\textgreater{}} \tn 
% Row Count 12 (+ 8)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Grafiken}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem \textless{}img/\textgreater{}-Tag fügst du eine Grafikdatei in ein HTML Dokument ein.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Das \textless{}img/\textgreater{}-Tag ben{\"o}tigt zwei Attribute.} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem Attribut src = gibst du die Quelle des Bildes an.} \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Mit dem Attribut alt = legst du einen Alternativtext fest.} \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}img src = "hamster.jpg" alt = Hamster/\textgreater{}} \tn 
% Row Count 8 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}img src = "hamster.jpg" alt = Hamster height= "42" width = "42"/\textgreater{}} \tn 
% Row Count 10 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}img src = "(DIE URL DER SEITE)" alt = Hamster/\textgreater{}} \tn 
% Row Count 11 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.56 cm} x{5.44 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Tabellen}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}table\textgreater{} & ...mit dem \textless{}table\textgreater{}-Tag definierst du den Text als HTML-Tabelle. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\textless{}tr\textgreater{} (table-row) & ...definiert eine Zeile in der Tabelle. \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\textless{}th\textgreater{} \seqsplit{(table-header)} & ...definiert eine Tabellenüberschrift. \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\textless{}td\textgreater{} \seqsplit{(table-data)} & ...definiert einzelne Zeilen. \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}table\textgreater{}} \tn 
% Row Count 10 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}tr\textgreater{}} \tn 
% Row Count 11 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}th\textgreater{}} \tn 
% Row Count 12 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}th\textgreater{}} \tn 
% Row Count 13 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}/tr\textgreater{}} \tn 
% Row Count 14 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}tr\textgreater{}} \tn 
% Row Count 15 (+ 1)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}th\textgreater{}} \tn 
% Row Count 16 (+ 1)
% Row 11
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}th\textgreater{}} \tn 
% Row Count 17 (+ 1)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}/tr\textgreater{}} \tn 
% Row Count 18 (+ 1)
% Row 13
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{\textless{}/table\textgreater{}} \tn 
% Row Count 19 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Hochgestellt und Tiefgestellt}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem \textless{}sup\textgreater{}-Tag kannst du Zeichen Hochgestellt anzeigen.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}/sup\textgreater{} \textless{}/sup\textgreater{}} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem \textless{}sub\textgreater{}-Tag kannst du Zeichen Hochgestellt anzeigen.} \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}/sub\textgreater{} \textless{}/sub\textgreater{}} \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Hyperlinks}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem \textless{}a\textgreater{}-Tag kannst du einen Hyperlink definieren.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Mit dem Attribut href = "URL" gibt man die URL an, und dann kommt der Text des Links.} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem Attribut target="\_blank" erzwingt man einen neuen Tab.} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{} a \seqsplit{href="https://www.google.at"} target="\_blank"\textgreater{}google.at\textless{}/a\textgreater{}} \tn 
% Row Count 8 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.08 cm} x{5.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Youtube-Video}}  \tn
% Row 0
\SetRowColor{LightBackground}
width \& height & ... Breite und H{\"o}he des Fensters \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
src & ... Link der Quelle (Source) \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
?/\&start & ... Startzeitpunkt \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
\&end & ... Endzeitpunkt \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
autoplay & ... automatisches Abspielen des Videos \tn 
% Row Count 7 (+ 2)
% Row 5
\SetRowColor{white}
controls & ... 0 oder 1 zum Anzeigen der Steuerung \tn 
% Row Count 9 (+ 2)
% Row 6
\SetRowColor{LightBackground}
playlist & ... VideoIDs durch Komma getrennt \tn 
% Row Count 11 (+ 2)
% Row 7
\SetRowColor{white}
loop & ... 0 oder 1 für eine Schleife \tn 
% Row Count 13 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}iframe width="666" height="1337" src="(LINK)" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen\textgreater{}\textless{}/iframe\textgreater{}} \tn 
% Row Count 17 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Aufz{\"a}hlungen und Nummerierungen}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem \textless{}ul\textgreater{}-Tag kann man Texte als Aufz{\"a}hlung formatieren.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Der \textless{}li\textgreater{}-Tag gibt die Position des Aufz{\"a}hlungssymbols im Text an} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}ul\textgreater{}} \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}li\textgreater{}} \tn 
% Row Count 6 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam} \tn 
% Row Count 8 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}/li\textgreater{}} \tn 
% Row Count 9 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}li\textgreater{}} \tn 
% Row Count 10 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam} \tn 
% Row Count 12 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}/li\textgreater{}} \tn 
% Row Count 13 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}/ul\textgreater{}} \tn 
% Row Count 14 (+ 1)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem \textless{}ol\textgreater{}-Tag kann man Texte als Nummerierung formatieren.} \tn 
% Row Count 16 (+ 2)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Der \textless{}li\textgreater{}-Tag gibt die Position des Nummerierungssymbols im Text an} \tn 
% Row Count 18 (+ 2)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}ol\textgreater{}} \tn 
% Row Count 19 (+ 1)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}li\textgreater{}} \tn 
% Row Count 20 (+ 1)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam} \tn 
% Row Count 22 (+ 2)
% Row 15
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}/li\textgreater{}} \tn 
% Row Count 23 (+ 1)
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}li\textgreater{}} \tn 
% Row Count 24 (+ 1)
% Row 17
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam} \tn 
% Row Count 26 (+ 2)
% Row 18
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}/li\textgreater{}} \tn 
% Row Count 27 (+ 1)
% Row 19
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}/ol\textgreater{}} \tn 
% Row Count 28 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Fett und Kursiv}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem \textless{}em\textgreater{}-Tag kann man Texte in kursiv ausgeben.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}em\textgreater{} Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam \textless{}/em\textgreater{}} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem \textless{}strong\textgreater{}-Tag kann man Texte in kursiv ausgeben.} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}strong\textgreater{} Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam \textless{}/strong\textgreater{}} \tn 
% Row Count 8 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Abs{\"a}tze und neue Zeilen}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem \textless{}p\textgreater{}-Tag kann man Texte in Abs{\"a}tze unterteilen.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}p\textgreater{} Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam \textless{}/p\textgreater{}} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit dem \textless{}br\textgreater{}-Tag kann man man einen Zeilenumbruch erzwingen.} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\textless{}br\textgreater{} Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam \textless{}/br\textgreater{}} \tn 
% Row Count 8 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.88 cm} x{7.12 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Attribute}}  \tn
% Row 0
\SetRowColor{LightBackground}
style & ...wird genutzt um den Stil eines Elements festzusetzen. \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
lang & ... wird genutzt um die Sprache festzusetzen. \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}