%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}


%Kopfzeile
\ihead{HTML}
\chead{}
\ohead{http://kohnlehome.de/html/html-controls.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
HTML-Controls
\end{center}

{\linespread{0.4}
\begin{verbatim}
Typ              |                 HTML                            |  Event  |  Eigenschaft
                 |                                                 |         |
===========================================================================================
                 |                                                 |         |
Button           | <button type="button">Beschriftung</button>     |  click  |  innerHTML
                 |                                                 |         |
-----------------+-------------------------------------------------+---------+------------
                 |                                                 |         |
Texteingabefeld  | <label for="input1">Beschreibung</label>        |         |  
                 | <input type="text" id="input1">                 |  input  |  value
                 |                                                 |         |
-----------------+-------------------------------------------------+---------+------------
                 |                                                 |         |
Checkbox         | <label for="check1">Beschreibung</label>        |         |
                 | <input type="checkbox" id="check1">             |  click  |  checked
                 |                                                 |         |
-----------------+-------------------------------------------------+---------+------------
                 |                                                 |         |
                 | <label for="radio1">Beschreibung 1</label>      |         |
                 | <input type="radio" name="gruppe" id="radio1">  |  click  |  checked
Radiobuttons     |                                                 |         | 
                 | <label for="radio2">Beschreibung 2</label>      |         | 
                 | <input type="radio" name="gruppe" id="radio2">  |         | 
                 |                                                 |         |
-----------------+-------------------------------------------------+---------+------------
                 |                                                 |         |
Dropdown         | <select>                                        |  change |  value
                 |     <option value="a">Anna</option>             |         |
                 |     <option value="b">Berta</option>            |         |
                 | </select>                                       |         |
                 |                                                 |         |
-----------------+-------------------------------------------------+---------+------------
                 |                                                 |         |
Slider           | <input type="range" min="3" max="7">            |  input  |  value
                 |                                                 |         |
\end{verbatim}}



\end{document}
