560 lines
29 KiB
TeX
560 lines
29 KiB
TeX
\chapter{HTML}\index{HTML}
|
|
|
|
\section{Dokumentenbeschreibungssprachen für Textdokumente}
|
|
|
|
\begin{lstlisting}
|
|
aussehenorientiert
|
|
---------------------------------------------------------->
|
|
| (SGML)
|
|
| PostScript LaTeX
|
|
Z | WordDOC
|
|
e | RTF HTML
|
|
i | PDF (XML)
|
|
t | ODT
|
|
| WordDOCX Markdown
|
|
|
|
|
\end{lstlisting}
|
|
|
|
\begin{table}[h]
|
|
\begin{tabular}{p{74mm}|p{74mm}}
|
|
\textbf{designorientiert} (PDF, \ldots ) & \textbf{strukturorientiert} (HTML, \ldots ) \\
|
|
\midrule
|
|
Textpassagen werden mit Aussehen attributiert & Textpassagen mit Bedeutung oder Funktion attributiert \\
|
|
\midrule
|
|
meist binärkodiert & meist textcodiert \\
|
|
\midrule
|
|
$\ominus$ Spezialprogramme notwendig & $\oplus$ mit jedem Texteditor editierbar \\
|
|
\midrule
|
|
$\oplus$ \acs{WYSIWYG} & $\ominus$ großes Abstraktionsvermögen nötig, um sich das endgültige Dokument vorstellen zu können \\
|
|
\midrule
|
|
$\oplus$ kurze Einarbeitungszeit & $\ominus$ lange Einarbeitungszeit \\
|
|
\midrule
|
|
$\ominus$ Inkonsistenzen bei vergleichbaren Textpassagen möglich & $\oplus$ konsistente Formatierung des gesamten Dokuments \\
|
|
\midrule
|
|
$\ominus$ nur für genau ein Ausgabemedium gedacht & $\oplus$ optional: Anpassung an verschiedene Ausgabemedien möglich
|
|
\end{tabular}
|
|
\caption{Dokumentenbeschreibungssprachen}
|
|
\end{table}
|
|
|
|
|
|
\section{Hyper Text Markup Language (\acs{HTML})}
|
|
|
|
\acs{HTML} ist eine strukturorientierte Dokumentenbeschreibungssprache
|
|
\begin{itemize}[noitemsep]
|
|
\item basiert auf \acs{SGML} (welches 197X entstanden ist, siehe \autoref{sec:html_history})
|
|
\item textcodiert, basierend auf \acs{ASCII} (7-bit, 128 Zeichen)
|
|
\item der meiste Text existiert \enquote{nahezu unverändert} bei der Ausgabe \newline
|
|
Ausnahmen:
|
|
\begin{itemize}[noitemsep]
|
|
\item Entitäten/Entities $\Rightarrow$ Nicht im \acs{ASCII}-Zeichensatz enthaltene Zeichen. \newline
|
|
\zB \code{\ü $\hat{=}$ ü} (\enquote{Umlaut}) , \code{\Ö $\hat{=}$ Ö}, \code{\ß $\hat{=}$ ß} (\enquote{Ligatur} $\Rightarrow$ Zusammenfassen von mehreren zu einem druckbaren Zeichen)
|
|
|
|
\newpage
|
|
|
|
\item spezielle Zeichen:
|
|
|
|
\medskip
|
|
\begin{tabular}{ll}
|
|
\code{< \<} &\enquote{less than} \\
|
|
\code{> \>} &\enquote{greater than} \\
|
|
\code{~{} \ }& \enquote{non-breaking space}\\
|
|
\code{\& \&} &\enquote{Ampersand} \\
|
|
\code{"{} \"}& \enquote{Quotation} \\
|
|
\end{tabular}
|
|
\medskip
|
|
|
|
$\Rightarrow$ müssen mit Entitäten umschrieben werden, da sie als einfaches Zeichen eine Sonderfunktion in der Sprache \acs{HTML} besitzen \newline
|
|
$\Rightarrow$ bisher alles \enquote{named entities}, \code{\&\#nnn} $\Rightarrow$ \enquote{numbered entity} für Zeichennummer~\code{nnn} aus Unicode
|
|
\item Tags \code{$\underbrace{\text{<tagname [attribut1="Wert1"]>}}_{\text{nicht angezeigt}} \text{Text}\underbrace{\text{</tagname>}}_{\text{nicht angezeigt}}$}
|
|
\item alle \enquote{Metadaten} im \html{<head>} (\zB \html{<meta>}, \html{<style>},
|
|
\html{<script>}, \html{<title>}, \ldots )
|
|
\item Kommentare \html{<!-- Ich bin ein Kommentar -->}
|
|
\item Alles andere erscheint als Text in der Ausgabe (im Browser)
|
|
\end{itemize}
|
|
\end{itemize}
|
|
|
|
|
|
\section{Historie von HTML}
|
|
\label{sec:html_history}
|
|
|
|
\begin{enumerate}[noitemsep]
|
|
\item[\circa 1970] \acs{SGML}
|
|
\item[1992] (Ur-)HTML
|
|
\begin{itemize}[noitemsep]
|
|
\item Hyperlinks waren schon möglich (ergibt sich aus HTML: \textbf{Hyper} Text\ldots )
|
|
\item Überschriften, Textabschnitte, Listen
|
|
\end{itemize}
|
|
|
|
\item[1995] HTML 2.0
|
|
\begin{itemize}[noitemsep]
|
|
\item Multimediafähigkeit (Bilder [keine Videos, dafür gab es Plugins wie Flash oder Quicktime])
|
|
\item Formulare (senden geht nun mit \code{POST})
|
|
\item \uwave{Textgestaltung} (ist eigentlich kein Teil der Struktur, sondern Gestaltung!)
|
|
\end{itemize}
|
|
|
|
\item[1996] HTML 3.2 - Zeit des Browserkrieges (Microsoft vs Mozilla/Netscape) \newline
|
|
W3C hat Version 3.0 nicht verabschieden wollen, da die Browserhersteller uneinig waren.
|
|
\begin{itemize}[noitemsep]
|
|
\item Tabellen
|
|
\item (Java-)Applets
|
|
\item \uwave{Textfluss} um Grafiken (vorher waren Grafiken \enquote{inline} und der Zeilenabstand wurde vergrößert, sodass die Grafik in die Zeile passte. Alternativ konnte man noch \mbox{Zeilenumbrüche} verwenden) % mbox gegen die komische Silbentrennung von LaTeX: Zeile-numbrüche
|
|
\end{itemize}
|
|
|
|
\item[1997] HTML 4.0
|
|
\begin{itemize}[noitemsep]
|
|
\item Stylesheets (\acs{CSS}) können eingebunden werden
|
|
\item \enquote{Unterstrichenes wurde rückgängig gemacht} (siehe oben)
|
|
\item \uwave{Frames}
|
|
\item neue Tags
|
|
\end{itemize}
|
|
|
|
\newpage
|
|
|
|
\item[2000] \acs{XHTML} 1.0 - keine neuen Inhalte im Gegensatz zu \acs{HTML} 4.0
|
|
\begin{itemize}[noitemsep]
|
|
\item \acs{XML}-basierte Sprachvariante von \acs{HTML} 4.0 (strengere Grammatik)
|
|
\end{itemize}
|
|
|
|
\item[2001] \acs{XHTML} 1.1
|
|
\begin{itemize}[noitemsep]
|
|
\item Modularisierung der Sprache \acs{XHTML} 1.0 (wichtig für kleine, nicht leistungsfähige Geräte (Handys), welche immer noch standardkonform waren, auch wenn bestimmte Module fehlten)
|
|
\end{itemize}
|
|
|
|
\item[2014] HTML5
|
|
\begin{itemize}[noitemsep]
|
|
\item keine \acs{XML}-Basierung, aber HTML5 \textit{kann} \acs{XML}-basiert notiert werden
|
|
\item Integration von weiteren Medienformen: Audio und Video (nativ, ohne Plugin im Browser)
|
|
\item Einbindung von \acs{SVG} und \href{http://caniuse.com/#feat=mathml}{MathML} im Quelltext
|
|
\item Standardisierung des \acf{DOM} und der JavaScript-API zu demselben
|
|
\item weitere Funktionalitäten als eigenständige Module
|
|
\begin{itemize}[noitemsep]
|
|
\item Canvas (Zeichenfläche, auf die per JavaScript gezeichnet werden kann
|
|
\item Geolocation-API (per JavaScript aktuellen Ort erfahren)
|
|
\item WebStorage/LocalStorage (Speicherung von Daten im Browser)
|
|
\item WebSockets (Kommunikation zwischen Website und Webserver nach Laden der Seite)
|
|
\end{itemize}
|
|
|
|
\item weitere semantische Tags:
|
|
\begin{itemize}[noitemsep]
|
|
\item Navigation (\html{<nav>}), Menü (\html{<menu>}), Kopf- und Fußzeilen (\html{<header>}, \html{<footer>}), Unterteilung einer \enquote{Seite} in mehrere Abschnitte (\html{<section>}) oder Artikel (\html{<article>})
|
|
\end{itemize}
|
|
|
|
\item viele syntaktische/grammatikalische Vereinfachungen sind nun erlaubt:
|
|
\begin{itemize}[noitemsep]
|
|
\item kein End-Tag (bei leeren Tags, falls der nachfolgende Tag den vorherigen Tag implizit schließt)
|
|
\item kein Start-Tag, falls der Tag bedeutet, dass vorher ein anderes Tag geöffnet werden muss (\zB \html{<title>}, bevor der \html{<head>} geöffnet wurde)
|
|
\item Anführungszeichen bei Attributwerten können weggelassen werden (sofern keine Trennzeichen enthalten sind, \zB \html{<p id=test>})
|
|
\item Attributwerte (bei Attributen mit Wahrheits- oder booleschen Werten) können weggelassen werden (\zB \html{<input type="text" disabled[="disabled"]>})
|
|
\end{itemize}
|
|
|
|
\item Multimedia-Tags wie \html{<video>} und \html{<audio>}
|
|
|
|
\item HTML5 ist ein \enquote{living Standard}\newline
|
|
$\Rightarrow$ Standard verändert sich ständig, bzw. wird fortlaufend erweitert!
|
|
\end{itemize}
|
|
\end{enumerate}
|
|
|
|
\begin{Hinweis}[frametitle={Hinweis zur Klausur}]
|
|
In der Klausur sollten keine Vereinfachungen verwendet werden! Zu hoher Wahrscheinlichkeit wird sowieso \acs{XHTML} gefordert!
|
|
\end{Hinweis}
|
|
|
|
\begin{Tipp}
|
|
Nicht alle neuen HTML5-Module/Tags/Funktionen werden von allen Browsern unterstützt. Was in welchen Browsern verwendet werden kann, kann auf \url{http://caniuse.com/} nachgelesen werden.
|
|
\end{Tipp}
|
|
|
|
|
|
\section{Der (X)HTML-Doctype}\index{HTML!DOCTYPE}
|
|
|
|
\begin{lstlisting}[language=HTML5,caption=Beispiel eines XHTML 1.1 Dokuments, label=HTML_Doctype]
|
|
<?xml version="1.0" [encoding="UTF-8"] ?>
|
|
<!DOCTYPE html PUBLIC "Public-ID" "System-ID">
|
|
<!-- Für HTML5 nur:
|
|
<!DOCTYPE html> | html: Name des Root-Tags
|
|
-->
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Titel des Dokuments</title>
|
|
</head>
|
|
<body>
|
|
<!-- Eigentlicher Inhalt des Dokuments -->
|
|
</body>
|
|
</html>
|
|
\end{lstlisting}
|
|
|
|
\begin{description}
|
|
\item[\code{PUBLIC}] Es handelt sich um einen öffentlichen Standard. \newline
|
|
Alternativ gibt es noch \code{SYSTEM} oder \code{PRIVATE} für selbst definierte Grammatiken mit (oder ohne) Angabe der \acs{DTD}.
|
|
|
|
\item[\enquote{Public-ID}] Textuelle, exakt festgelegte \enquote{Beschreibung des Standards}, \zB \code{-//W3C//DTD XHTML 1.1//EN} bei XHTML 1.1
|
|
|
|
\item[\enquote{System-ID}] URL (Adresse), welche auf die zugrunde liegende Grammatikdatei (in Form einer \acs{DTD}) zeigt. \newline
|
|
\zB \code{http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd} bei XHTML 1.1
|
|
|
|
\item[xmlns] Der XML-Namensraum
|
|
|
|
\end{description}
|
|
|
|
\bigskip
|
|
\bigskip
|
|
\begin{Hinweis}
|
|
Die \enquote{System-ID} muss für die Klausur nicht auswendig gelernt werden!
|
|
|
|
Für eine Liste verfügbarer DOCTYPEs siehe\newline
|
|
$\Rightarrow$ \url{https://www.w3.org/QA/2002/04/valid-dtd-list.html}
|
|
\end{Hinweis}
|
|
|
|
\newpage
|
|
|
|
\section{Wichtige (X)HTML Tags im \code{<body>}}\label{sec:wichtige_tags_xhtml}
|
|
|
|
\begin{description}
|
|
\item[\code{<h1>} bis \code{<h6>}] \enquote{heading}/Überschriften in verschiedenen Hierarchiestufen, welche aber nicht verpflichtend einzuhalten sind. Dabei ist \html{<h1>} die oberste Ebene.
|
|
|
|
\item[\code{<p>}] \enquote{Paragraph}/Textabsatz
|
|
|
|
\item[Listen] \hfill
|
|
\begin{itemize}[noitemsep]
|
|
\item \html{<ul>} \enquote{Unordered List} -- Liste mit allgemeinem Aufzählungszeichen, \zB Spiegelstrich oder Aufzählungspunkt.
|
|
\item \html{<ol>} \enquote{Ordered List} -- Liste mit Nummerierung als Aufzählungszeichen, \zB Zahlen, Buchstaben oder römische Zahlen.
|
|
\item \html{<li>} \enquote{List Item} -- Aufzählungspunkte innerhalb von \html{<ul>...</ul>}
|
|
\item[$\Rightarrow$] Listen können geschachtelt werden, indem in ein \html{<li>} ein weiteres \html{<ol>/<ul>} geschrieben wird.
|
|
\end{itemize}
|
|
|
|
\item[\code{<dl>}] \enquote{Definition List} -- Definitionsliste
|
|
\begin{itemize}[noitemsep]
|
|
\item \html{<dt>} \enquote{Definition Term} -- Begriff
|
|
\item \html{<dd>} \enquote{Definition Description}. Erklärung des Begriffs.
|
|
\item[$\Rightarrow$] zwei verschiedene Arten von Listenelementen
|
|
\item[$\Rightarrow$] Definitionslisten dürfen ebenfalls geschachtelt werden, allerdings nur im \html{<dd>}
|
|
\item[$\Rightarrow$] Die paarweise Verwendung von \html{<dt>} und \html{<dd>} ist üblich, aber nicht gefordert.
|
|
\end{itemize}
|
|
|
|
\item[Hyperlink] \hfill
|
|
\begin{itemize}[noitemsep]
|
|
\item \html{<a>} \enquote{anchor} -- Textanker (irreführende Bezeichnung für einen Verweis)
|
|
\item enthält Beschreibung und technisches Verweisziel.
|
|
\begin{itemize}[noitemsep]
|
|
\item Beschreibung: Inhalt des Tags (\html{<a>Inhalt hier</a>})
|
|
\item Verweisziel: Attribute \html{href="..."} in Form einer \acs{URI} (siehe \autoref{sec:url_uri})
|
|
\end{itemize}
|
|
\item Beispiel: \html{<a href="http://dhbw-karlsruhe.de/">Homepage der DHBW</a>}
|
|
\item Es können auch relative \acsp{URL} angegeben werden, die jedoch mithilfe der vollständigen \acs{URL} des enthaltenden Dokuments ebenfalls zu einer vollständigen (absoluten) \acs{URL} gemacht werden (siehe \autoref{sec:relative_url} auf Seite~\pageref{sec:relative_url})
|
|
\end{itemize}
|
|
|
|
\end{description}
|
|
|
|
\bigskip
|
|
\bigskip
|
|
\begin{Hinweis}[frametitle=Klausur -- Hinweis]
|
|
In der Klausur kann eine Fehlersuche in einem \acs{XHTML} Dokument vorkommen.
|
|
|
|
\textbf{Beispiel}: \newline
|
|
Es kommt eine unsortierte Liste, worauf ein \html{<ol>} kommt $\Rightarrow$ Ein semantischer, nicht aber grammatikalischer Fehler!
|
|
\end{Hinweis}
|
|
|
|
\section{Bilder \code{<img>}} \label{sec:html_img}
|
|
|
|
\html{<img src="URL" alt="alternative Beschreibung" [width="" height=""] />}\index{HTML!Bilder}
|
|
\begin{itemize}[noitemsep]
|
|
\item Attribut \code{src} (\enquote{source}/Quelle) für \acs{URL} zur Bilddatei.
|
|
\item Attribut \code{alt} (\enquote{alterntive text}) für Alternativtext zur Anzeige, falls das Bild selbst nicht angezeigt wird (technische Gründe und Barrierefreiheit)
|
|
\item für mehr siehe \autoref{sec:html_img} auf Seite~\pageref{sec:html_img}
|
|
\end{itemize}
|
|
|
|
\code{width} und \code{height} enthalten (meist) die \enquote{natürliche Größe} des Bildes, um dem Browser das entsprechende Platzfreihalten zu ermöglichen, bevor die Bilddatei selbst geladen ist. Eine Skalierung ist möglich, aber:
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item die Datenmenge muss dennoch komplett geladen werden
|
|
\item erhöhter Speicherplatzverbrauch im Web-Browser (Arbeitsspeicher! Es ist nicht der Cache gemeint!)
|
|
\item die Qualität der Skalierung im Browser ist (meist) schlechter als bei Bildbearbeitungsprogrammen
|
|
\end{itemize}
|
|
|
|
|
|
\section{Tabellen}\index{HTML!Tabellen}
|
|
Tabellen sind eine zweidimensionale Struktur mit Zeilen und Spalten. Diese müssen für \acs{HTML} notwendigerweise serialisiert werden, da \acs{HTML} ein Textformat ist!
|
|
|
|
Im \acs{HTML} werden erst die Zeilen und dann die Felder (Spaltenelemente) innerhalb der Zeilen geschrieben.
|
|
|
|
Für die Tabelle gibt es folgende wichtige \acs{HTML} 3.2 Tags:
|
|
|
|
\begin{description}
|
|
\item[\code{<tr>}] \enquote{table row} -- enthält eine Tabellenzeile
|
|
\item[\code{<td>}] \enquote{table data} -- enthält je ein Tabellenfeld
|
|
\item[\code{<th>}] \enquote{table heading}
|
|
\end{description}
|
|
|
|
\begin{lstlisting}[language=HTML5,caption=HTML 3.2 Tabellen]
|
|
<table>
|
|
<tr>
|
|
<td>a1</td> <td>a2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>b1</td> <td>b2</td> <td>b3</td>
|
|
</tr>
|
|
</table>
|
|
\end{lstlisting}
|
|
|
|
Die Anzahl der Spalten (und Zeilen) wird nicht vorab definiert. Eine unterschiedliche Anzahl an Feldern in den Zeilen ist außerdem erlaubt! Dies wird in \autoref{tbl:html_tabelle_anzahl_felder} gezeigt.
|
|
|
|
\begin{table}[h!]
|
|
\centering
|
|
\begin{tabular}{|l|l|l}
|
|
\cline{1-2}
|
|
a1 & a2 & \\
|
|
\hline
|
|
b1 & b2 & b3 |\\
|
|
\hline
|
|
\end{tabular}
|
|
\caption{Tabelle mit unterschiedlicher Anzahl an Feldern pro Zeile}
|
|
\label{tbl:html_tabelle_anzahl_felder}
|
|
\end{table}
|
|
|
|
Statt \html{<td>} kann auch überall \html{<th>} verwendet werden, um eine Art Metadaten (Beschreibung der Tabelleninhalte) anzeigen zu lassen.
|
|
|
|
Seit \acs{HTML} 4 kann \html{<table>} zusätzlich gegliedert werden in:
|
|
\begin{itemize}[noitemsep]
|
|
\item \html{<thead>} Tabellenkopf (optional, max. einmal)
|
|
\item \html{<tfoot>} Tabellenfuß (optional, max. einmal)
|
|
\item \html{<tbody>} Tabellenkörper (kann mehrfach vorkommen)
|
|
\end{itemize}
|
|
|
|
Diese Reihenfolge muss eingehalten werden! Diese drei Elemente enthalten dann nur \html{<tr>}-Tags, in denen wiederum nur \html{<td>}- und \html{<th>}-Tags vorkommen dürfen.
|
|
|
|
Optionale Attribute in \html{<td>} und \html{<th>}:
|
|
\begin{description}
|
|
\item[\code{colspan}] für nebeneinanderliegende Felder, welche das \html{<td>}/\html{<th>} überdecken soll
|
|
\item[\code{rowspan}] für Angabe der übereinanderliegenden Felder, welche das \html{<td>}/\html{<th>} überdecken soll
|
|
\end{description}
|
|
|
|
Die überdeckten \html{<td>}/\html{<th>} müssen im Quelltext gestrichen/ausgelassen werden. Ein Beispiel für die Ausgabe zeigt \autoref{fig:html_table_colspan_row} mit dem dazu gehörigen \acs{HTML}-Quelltext in \autoref{lst:table_col_row_span} auf Seite~\pageref{lst:table_col_row_span}.
|
|
|
|
\bigskip
|
|
\begin{figure}[h!]
|
|
\centering
|
|
\includegraphics[scale=0.9]{Bilder/HTML_rowspan_colspan.png}
|
|
\caption{HTML-Tabelle mit zusammengefügten Feldern}
|
|
\label{fig:html_table_colspan_row}
|
|
\end{figure}
|
|
|
|
\newpage
|
|
\begin{lstlisting}[language=HTML5,caption=Tabelle -- \code{colspan} und \code{rowspan},label=lst:table_col_row_span]
|
|
<table border="1">
|
|
<tr>
|
|
<th>Geschäftsjahr</th>
|
|
<th>Umsatz</th>
|
|
<th>Gewinn/Verlust</th>
|
|
</tr>
|
|
<tr>
|
|
<td>2013</td>
|
|
<td>5,8</td>
|
|
<td rowspan="2">62,8</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2014</td>
|
|
<td rowspan="2">60,0</td>
|
|
<!-- weggelassen -->
|
|
</tr>
|
|
<tr>
|
|
<td>2015</td>
|
|
<!-- weggelassen -->
|
|
<td>50,87</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3">Zusammengefasste Spalten</td>
|
|
<!-- weggelassen -->
|
|
<!-- weggelassen -->
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" rowspan="2">Spalten + Zeilen</td>
|
|
<!-- weggelassen -->
|
|
<td>44,87</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- weggelassen -->
|
|
<!-- weggelassen -->
|
|
<td colspan="3">70,78</td>
|
|
</tr>
|
|
</table>
|
|
\end{lstlisting}
|
|
|
|
\section{Semantische und strukturelle Tags (meist mit HTML5 eingeführt)}
|
|
|
|
\begin{tabular}{p{30mm}p{125mm}}
|
|
\multicolumn{2}{l}{\textbf{Abschnitte}}\index{HTML!Abschnitt-Tags} \\
|
|
\midrule
|
|
\html{<body>} & gesamter Inhalt \\
|
|
\html{<section>} & Unterteilung des Dokuments ins (unabhängige) Sektionen \\
|
|
\html{<nav>} & \enquote{navigation} -- Abschnitt für Navigation (Menü, Suchfeld, \ldots) \\
|
|
\html{<article>} & inhaltlich selbstständiger Teil des Dokuments \\
|
|
\html{<aside>} & Randbemerkung (Seitennotiz), ohne die das restliche Dokument verständlich bleibt \\
|
|
\html{<h1>} \ldots \html{<h6>} & Überschriften \\
|
|
\html{<header>} & für typische Kopfzeilen/-bereiche \\
|
|
\html{<footer>} & für typische Fußzeilen/-bereiche \\
|
|
\html{<address>} & für Urheberinformationen (eine Art Metainfo, welche explizit angezeigt werden soll $\Rightarrow$ bereits in Ur-\acs{HTML} enthalten!) \\
|
|
\html{<main>} & wichtigster (eigentlicher) Inhalt der Seite (nur ein \html{<main>} pro Seite erlaubt) \\
|
|
|
|
\multicolumn{2}{l}{\textbf{Gruppen}} \index{HTML!Gruppen-Tags} \\
|
|
\midrule
|
|
\html{<p>}, \html{<ul>}, \ldots & \textit{siehe \autoref{sec:wichtige_tags_xhtml} auf Seite~\pageref{sec:wichtige_tags_xhtml}} \\
|
|
\html{<figure>} & \enquote{für Abbildungen} \\
|
|
\hspace*{3mm}\html{<figcaption>} & Über-/Unterschrift für \html{<figure>} \\
|
|
\html{<blockquote>} & Zitat mit eigenem Absatz \\
|
|
\html{<pre>} & \enquote{preformatted} -- für vorformatierten Text (darf keine Tags enthalten, Whitespace bleibt erhalten). Sinnvoll für \zB Code-Stücke. \\
|
|
\html{<div>} & \enquote{division} -- Gruppe von Text, die ohne spezielle semantische Bedeutung zusammengehalten wird (seit \acs{HTML} 4 -- siehe \autoref{sec:html_history}) \\
|
|
|
|
\multicolumn{2}{l}{\textbf{Fließtext-Elemente}} \index{HTML!Fließtext-Tags} \\
|
|
\midrule
|
|
\html{<em>} & \enquote{emphasize} -- hervorgehobene Bedeutung (seit Ur-HTML) \\
|
|
\html{<strong>} & wichtiger Text \\
|
|
\html{<i>}, \html{<b>}, \html{<u>}, \html{<tt>}, \ldots & \textit{italic}, \textbf{bold}, \uline{underline}, \texttt{teletype}, \ldots -- für unterschiedliche Arten der \newline
|
|
Hervorhebung \\
|
|
\html{<cite>} & für (kurze) Zitate \\
|
|
\html{<code>} & für Code-Bruchteile \\
|
|
\html{<span>} & Textteil ohne semantische Bedeutung (seit \acs{HTML} 4)\\
|
|
\multicolumn{2}{c}{$\Rightarrow$ größtenteils aus früheren \acs{HTML}-Version revitalisiert}
|
|
\end{tabular}
|
|
|
|
\newpage
|
|
\section{Audio- und Videoeinbindung}\index{HTML!Video}\index{HTML!Audio}
|
|
|
|
Zur Einbindung von Audio- und Videodateien werden \html{<audio>} und \html{<video>} verwendet.
|
|
|
|
\begin{lstlisting}[language=HTML5,caption=Video- und Audioeinbindung]
|
|
<video [width="90px" height="160px" controls="controls" ...] >
|
|
<source src="URL1" type="MIME Type 1" />
|
|
<source src="URL2" type="MIME Type 2" />
|
|
<!-- weitere Quellen möglich -->
|
|
<!-- alternativ anzuzeigender Inhalt (Tags sind möglich) -->
|
|
Der Browser scheint die Wiedergabe nicht zu unterstützen.
|
|
</video>
|
|
|
|
<audio [controls ...]>
|
|
<source src="URL1" type="MIME Type 1">
|
|
<source src="URL2" type="MIME Type 2">
|
|
Der Browser scheint die Wiedergabe nicht zu unterstützen.
|
|
</audio>
|
|
\end{lstlisting}
|
|
|
|
|
|
\section{Aufgaben}
|
|
Aufgaben von \url{http://dh.jroethig.de/}
|
|
|
|
\subsection*{Grundstruktur einer HTML-Datei}
|
|
|
|
Erstellen Sie eine einfache \acs{HTML}-Datei, welche nur die unbedingt notwendigen Informationen (\acs{HTML}-Tags) enthält. Rufen Sie diese Datei mit den verschiedenen auf Ihrem System verfügbaren Web-Browsern auf. Was passiert, wenn Sie notwendige Teile der \acs{HTML}-Struktur weglassen? Warum?
|
|
|
|
\bigskip
|
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Grundstruktur]{Aufgaben/2017_02_27_HTML/01_Grundstruktur_einer_HTML-Datei.html}
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item Wenn \html{<head>} fehlt, gibt es folgende Fehlermeldung: \texttt{Element head is missing a required instance of child element title.}
|
|
\end{itemize}
|
|
|
|
\subsection*{Text}
|
|
Schreiben Sie nun Text in den Body Ihrer \acs{HTML}-Datei. Trennen Sie Wörter und Sätze testweise durch unterschiedliche Anzahlen von Leerzeichen und Zeilenumbrüchen. Welchen Einfluss hat dies auf die Darstellung im Web-Browser?
|
|
|
|
\bigskip
|
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Text]{Aufgaben/2017_02_27_HTML/02_Text.html}
|
|
|
|
Bei mehreren Leerzeichen, Tabs oder Zeilenumbrüchen wird nur ein Leerzeichen zwischen den getrennten Worten eingefügt! Zeilenumbrüche sorgen \textit{nicht} für Zeilenumbrüche im Browser.
|
|
|
|
\subsection*{Gliederung}
|
|
Erweitern Sie Ihre \acs{HTML}-Datei um mehrere Textabschnitte. Verwenden Sie zur Gliederung des Textes zunächst nur die Tags für Überschriften und Paragraphen. Setzen Sie demgegenüber dann auch die \html{<span>}- und \html{<div>}-Tags ein. Wie unterscheidet sich deren Einsatz vom vorangegangenen?
|
|
|
|
\bigskip
|
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Gliederung]{Aufgaben/2017_02_27_HTML/03_Gliederung.html}
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item Paragraphen und Überschriften erzeugen Abstände (Standard-Design im Browser) \ldots
|
|
\item \ldots\html{<div>} und \html{<span>} nicht
|
|
\item \html{<span>} erzeugt keine Umbrüche.
|
|
\end{itemize}
|
|
|
|
\subsection*{Verweise}
|
|
Bauen Sie sich eine komplette Website auf, indem Sie weitere \acs{HTML}-Seiten erstellen. Verlinken Sie diese mittels absoluter und relativer \acsp{URL}. Verändern Sie die Lokation des Dateibaumes (durch Verschieben der Dateien in ein Unterverzeichnis) und prüfen Sie die Funktionsfähigkeit der Links. Bauen Sie in Ihre Seite Verweise ein, mit welchen Sie an bestimmte Stellen im aktuellen Dokument springen können.
|
|
|
|
\bigskip
|
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Verweise]{Aufgaben/2017_02_27_HTML/04_Verweise_ohne_lorem_ipsum.html}
|
|
|
|
\pagebreak
|
|
|
|
\subsection*{Bilder}
|
|
Binden Sie nun außerdem graphische Darstellungen ein. Was passiert bei der Darstellung im Web-Browser, wenn die eingebundenen Bilder nicht geladen werden können (\zB weil sie nicht existieren oder umbenannt wurden) oder wenn Sie das automatische Laden von Bildern abschalten?
|
|
|
|
\bigskip
|
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Bilder]{Aufgaben/2017_02_27_HTML/05_Bilder.html}
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item Es wird der Alternativ-Text angezeigt
|
|
\item Eine Box in der Größe von \code{width} und \code{height} erscheint
|
|
\end{itemize}
|
|
|
|
\subsection*{Listen}
|
|
Erstellen Sie eine ungeordnete sowie eine nummerierte Liste. Bauen Sie nun zusätzlich eine weitere nummerierte Liste in die erste ungeordnete Liste ein. Wie unterscheidet sich diese von der zuerst erstellten nummerierten Liste? Experimentieren Sie mit weiteren vielfach geschachtelten Listen!
|
|
|
|
Ein weiteres Beispiel für Listen (neben unnummerierten und nummerierten) sind Definitionslisten. Erstellen Sie eine solche! Was passiert, wenn Sie die entsprechenden Tags für die Listenelemente nicht paarweise einsetzen?
|
|
|
|
\bigskip
|
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Listen]{Aufgaben/2017_02_27_HTML/06_Listen.html}
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item Die nummerierte Liste in der unnummerierten Liste wird eingerückt.
|
|
\item Eine nummerierte Liste in einer nummerierten Liste hat andere Aufzählungszeichen.
|
|
\item Werden mehrere \html{<dd>} hinter ein \html{<dt>} geschrieben, so sind dies alternative Definitionen. Es können mehrere Definitionen für einen Begriff existieren.
|
|
\item Ein \html{<dt>} ohne \html{<dd>} ist ein Begriff ohne Erklärung / ohne Definition
|
|
\end{itemize}
|
|
|
|
\subsection*{Tabellen}
|
|
Erstellen Sie eine Tabelle mit vier Zeilen und drei Spalten. Wie wird die Tabelle dargestellt, wenn einzelne Zellen keinen Inhalt besitzen? Fassen Sie zwei einzelne (nacheinander sowohl übereinander als auch nebeneinander liegende) Zellen zusammen. Experimentieren Sie mit weiteren zusammengefassten Tabellenzellen. Was passiert, wenn Sie die gleiche Tabellenzelle sowohl von oben als auch von links mit anderen Tabellenzellen zusammenfassen?
|
|
|
|
\bigskip
|
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Tabellen]{Aufgaben/2017_02_27_HTML/07_Tabellen.html}
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item Haben Zellen keinen Inhalt, so werden sie leer dargestellt
|
|
\item Wird die gleiche Tabellenzelle sowohl von oben als auch von links zusammengefasst, so handelt es sich um undefiniertes Verhalten!
|
|
\end{itemize}
|
|
|
|
\subsection*{Verschachtelung}
|
|
Bei Listen haben Sie bereits die Verschachtelung von \acs{HTML}-Tags verwendet. Probieren Sie dies nun auch bei den anderen bislang verwendeten Tags aus! Wo macht dies Sinn? Wo ist es nutzlos? Und wo ist es (laut Spezifikation) gar verboten?
|
|
|
|
\subsection*{Semantische Tags}
|
|
\acs{HTML}5 wurde vor allem um zahlreiche \enquote{semantische Tags} ergänzt. Bauen Sie diese in Ihren Quelltext ein und schauen Sie sich das Ergebnis im Browser an! Sehen Sie in der Darstellung im Browser, ob und mit welchen semantischen Tags Sie den Quelltext ausgezeichnet haben?
|
|
|
|
\bigskip
|
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- semantische Tags]{Aufgaben/2017_02_27_HTML/08_semantische_Tags.html}
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item Nein, man sieht bei den meisten semantischen Tags wie \html{<main>} oder \html{<article>} nicht, dass es sich um jene handelt.
|
|
\end{itemize}
|
|
|
|
\subsection*{Reaktion von Browsern auf Fehler im HTML-Quellcode}
|
|
Bauen Sie absichtliche Fehler in Ihren \acs{HTML}-Quellcode ein! Typische Fehler sind beispielsweise fehlende Dokumenttyp-Deklaration, nicht geschlossene Tags, falsch geschachtelte Tags, fehlerhaft aufgebaute Tabellen (sich widersprechende colspan- und rowspan-Attribute) oder falsch geschriebene Tags. Wie reagieren die Ihnen zur Verfügung stehenden Web-Browser auf die Fehler?
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item Die meisten (kleinen) Fehler werden ohne Fehlermeldung vom Browser gerendert.
|
|
\item Fehlende schließende Tags werden geschlossen.
|
|
\end{itemize}
|
|
|
|
\subsection*{Validation von HTML-Seiten}
|
|
|
|
Zur Validierung der Korrektheit Ihres \acs{HTML}-Quellcodes dienen \acs{HTML}-Validatoren. Online im Web gibt es beispielsweise die folgenden:
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item \href{http://validator.w3.org/}{W3C Markup Validation Service}\footnote{\url{http://validator.w3.org/}}
|
|
\item \href{http://www.htmlhelp.com/tools/validator/}{WDG HTML Validator}\footnote{\url{http://www.htmlhelp.com/tools/validator/}}
|
|
\end{itemize}
|
|
|
|
Testen Sie Ihre Seiten (auch und gerade diejenigen mit absichtlichen Fehlern) mit diesen Validatoren auf Korrektheit! Werden alle Fehler (und insbesondere auch nur die wirklichen Fehler) erkannt? In welchen Fällen haben die Validatoren Probleme?
|
|
|
|
Testen Sie, ob und wie die Validatoren auf Ihre Deklaration der \acs{HTML}-Version reagieren. Finden Sie beispielsweise Fehler, welche nur bei \enquote{\acs{XHTML} 1.0 strict} und nicht bei \enquote{\acs{XHTML} 1.0 transitional} erscheinen! Wie reagieren die Validatoren auf die Deklaration einer \enquote{falschen} (unpassenden) \acs{HTML}-Version?
|
|
|
|
Eine Sonderposition nimmt HTMLTidy ein, da es versucht, einige häufig gemachte Fehler automatisch zu beheben. Eine Online-Version gibt es hier:
|
|
|
|
\begin{itemize}[noitemsep]
|
|
\item W3C Tidy your \acs{HTML}
|
|
\end{itemize}
|
|
|
|
Was macht HTMLTidy mit Ihren Seiten, insbesondere denen mit Fehlern? Probieren Sie aus, ob und welche der Fehler behoben werden können!
|
|
|
|
Untersuchen Sie nun, welche Tags bei HTML5 weggelassen werden können, ohne dass der Validator Fehler meldet! Wie können Sie erkennen, welche Tags der Validator oder der Browser selbst ergänzt?
|