From e29cccfb1f5f511f54913f67950566eda13b198f Mon Sep 17 00:00:00 2001 From: Andre Meyering Date: Mon, 24 Jul 2017 15:24:17 +0200 Subject: [PATCH] =?UTF-8?q?[Kapitel]=20Kapitel=20hinzuf=C3=BCgen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Kapitel hinzugefügt. --- Kapitel/00_Vorwort.tex | 9 + Kapitel/01_Einstieg.tex | 22 ++ Kapitel/02_Motivation_Historie.tex | 134 +++++++ Kapitel/03_HTTP.tex | 191 ++++++++++ Kapitel/04_IP.tex | 38 ++ Kapitel/05_HTML.tex | 559 +++++++++++++++++++++++++++++ Kapitel/06_URL.tex | 116 ++++++ Kapitel/07_CSS.tex | 462 ++++++++++++++++++++++++ Kapitel/08_Projekt.tex | 76 ++++ Kapitel/09_XML.tex | 441 +++++++++++++++++++++++ Kapitel/10_Aufgaben.tex | 105 ++++++ Kapitel/11_SVG.tex | 419 +++++++++++++++++++++ Kapitel/12_Uebungsklausur.tex | 364 +++++++++++++++++++ 13 files changed, 2936 insertions(+) create mode 100644 Kapitel/00_Vorwort.tex create mode 100644 Kapitel/01_Einstieg.tex create mode 100644 Kapitel/02_Motivation_Historie.tex create mode 100644 Kapitel/03_HTTP.tex create mode 100644 Kapitel/04_IP.tex create mode 100644 Kapitel/05_HTML.tex create mode 100644 Kapitel/06_URL.tex create mode 100644 Kapitel/07_CSS.tex create mode 100644 Kapitel/08_Projekt.tex create mode 100644 Kapitel/09_XML.tex create mode 100644 Kapitel/10_Aufgaben.tex create mode 100644 Kapitel/11_SVG.tex create mode 100644 Kapitel/12_Uebungsklausur.tex diff --git a/Kapitel/00_Vorwort.tex b/Kapitel/00_Vorwort.tex new file mode 100644 index 0000000..afc64eb --- /dev/null +++ b/Kapitel/00_Vorwort.tex @@ -0,0 +1,9 @@ +\chapter{Vorwort} + +Herr Röthig schreibt alles, was für seine Klausuren von Bedeutung ist, an die Tafel. Es ist daher nur zu empfehlen, alles mitzuschreiben, da er kein Skript besitzt und auch keinen Foliensatz. Der Unterricht ist im Vergleich zu anderen Dozenten unterscheidet sich darin, dass während der Klausur keine Hilfsmittel verwendet werden dürfen. Dafür besteht die Klausur zu 90\% nur aus Abfrageaufgaben. + +Dieses Skript enthält \textit{alles}, was Herr Röthig 2017 an Wissen voraussetzt. Auf den letzten Seiten dieses Skripts findet sich zusätzlich noch eine Übungsklausur. Die Klausuren unterscheiden sich jedes Jahr nur um einige wenige Aufgaben. Ist man zwei, drei Übungsklausuren durchgegangen, so ist die Klausur einfach zu bestehen. + +Zusammen mit meinem Kurs TINF16B2 haben wir dieses Skript ausgedruckt und korrigiert. Inhaltliche Fehler sollten daher (fast) keine mehr enthalten sein. + +Ich wünsche dir viel Erfolg bei Herrn Röthig im Fach Webengineering. Solltest du dieses Skript erweitern wollen, so kannst du dich an \href{mailto:dhbw@andremeyering.de}{dhbw@andremeyering.de} wenden. diff --git a/Kapitel/01_Einstieg.tex b/Kapitel/01_Einstieg.tex new file mode 100644 index 0000000..5cda916 --- /dev/null +++ b/Kapitel/01_Einstieg.tex @@ -0,0 +1,22 @@ +\chapter{Einstieg} + +Dozent: \href{https://www.dhbw-karlsruhe.de/prof-dr-roethig}{Prof. Dr. Jürgen Röthig} \newline +Raum: C560 \newline +Tel.: 0721 9735-883 \newline +E-Mail: roethig@dhbw-karlsruhe.de + +Umfang: 48h (1. und 2. Semester). \newline +Prüfungsleistung: Klausur (90min; ohne Hilfsmittel); 80\% Klausur | 20\% Projekt + + +\section{Inhaltsübersicht der Vorlesungen} + +\begin{enumerate}[noitemsep] + \item Motivation/Historie + \item Anwendungsprotokoll \acs{HTTP} + \item Dokumentenbeschreibungssprache (\acs{HTML}) + \item \acs{CSS} für \enquote{Designvorgaben} + \item \acs{XML} als \enquote{abstrakte Datenbeschreibungssprache} + \item \acs{XSLT} als Transformationssprache für \acs{XML}-Dateien + \item \acs{SVG} als Grafikformat +\end{enumerate} diff --git a/Kapitel/02_Motivation_Historie.tex b/Kapitel/02_Motivation_Historie.tex new file mode 100644 index 0000000..f7cf953 --- /dev/null +++ b/Kapitel/02_Motivation_Historie.tex @@ -0,0 +1,134 @@ +\chapter{Motivation/Historie} +Das Wort \enquote{Engineering} zeigt den Bezug auf praktische Anwendbarkeit. + + +\section{Historie des Internets} +\begin{itemize}[noitemsep] + \item 1965/67/69: Arpanet-Projekt-Initierung/-Idee/-Prototyp + \item Motivator/erste Anwendung: entfernte Bedienung/Benutzung von Rechnerresourcen, \code{telnet}, \code{ssh} +\end{itemize} + +\section{Das Web / WWW}\index{WWW} + +Mit \enquote{Web} ist das \acf{WWW} gemeint. + +\subsection{Was ist das WWW?} + +\begin{itemize}[noitemsep] + \item Eine Anwendung, welche das Internet als Kommunikationsplattform nutzt + \item Eine Anwendung, welche Informationen \enquote{verteilt} auf verschiedenen Rechnern zur Verfügung + stellt; diese Informationen sind untereinander \enquote{verknüpfbar} (über spezielle Verweise) + + Beispiel für Verweise (aus dem täglichen Leben): + \begin{itemize}[noitemsep] + \item Seitenverweise im Text (\enquote{siehe Seite 102, Zeile 23}, \enquote{siehe oben}) + \item Verweise auf Abbildungen, Tabellen + \item Hinweis-Straßenschilder (\enquote{Frankfurt 130km $\uparrow$}) + \item Weiterleiten/Verbinden zum geeigneten Ansprechpartner + \item Fahrplan + \item Literaturquellen/-verweise, weitere Informationsquellen + \item Schulverweis (\enquote{auf andere Schule!}) + \item Adressbücher/Telefonbücher + \end{itemize} + + \item Spezialität der Verweise im \enquote{\acs{WWW}}: automatische Verweisauflösung durch Standardaktion (\zB der Mausklick). + +\end{itemize} + +\subsubsection{Der Hyperlink}\index{Hyperlink} + +Der \enquote{Hyperlink} ist ein Verweis mit automatischer Verweisauflösung. Er besteht im \enquote{\acs{WWW}} aus zwei Teilen: sichtbare Beschreibung und (meist) unsichtbares Verweisziel. + +\begin{itemize}[noitemsep] + \item \enquote{Erfinder} des Hyperlinks: Vannevar Bush, 1945 + \item siehe \enquote{As we may think}, Atlantic Monthly, 1945 + \item siehe Maschine \enquote{memex} (Memory extension) + $\Rightarrow$ Information auf Mikrofilm mit Verweismöglichkeit inkl. Automatischer Verweisauflösung +\end{itemize} + +\subsection{Zwei Eigenschaften des \acs{WWW} (\enquote{Erfolgsfaktoren})\label{sec:lokations_medienunabhaengigkeit}\index{WWW}} + +\begin{enumerate}[noitemsep] + \item \textbf{Lokationsunabhängigkeit} + + $\Rightarrow$ unabhängig von der Lokation der Information und der Suchenden; + die Information kann immer \enquote{auf die gleiche Weise} beschafft werden. + + Beim Design des \acs{WWW} von \href{https://de.wikipedia.org/wiki/Tim_Berners-Lee}{Tim Berners-Lee} geplant + + \item \textbf{Medienunabhängigkeit} + $\Rightarrow$ Die Information kann grundsätzlich in verschiedenen Medienformen + (Text, Bild, Video, Audio, \ldots ) vorliegen. + + Ursprünglich nicht geplant und nicht im Web enthalten. Belege: + \begin{itemize}[noitemsep] + \item HTML: Hyper \textbf{Text} Markup Language + \item HTTP: Hyper \textbf{Text} Transfer Protocol + \item $\Rightarrow$ in ersten Versionen \textbf{nur} Unterstützung von Text vorhanden! (\textbf{Klausurrelevant!}) + \end{itemize} + +\end{enumerate} + +\bigskip +\bigskip +\bigskip +\bigskip +\bigskip +\bigskip +\bigskip + +\begin{table}[h] + \begin{tabular}{c|p{34mm}|p{30mm}|p{75mm}} + Nr. & Deutsch & Englisch & Beschreibung \\ + \midrule + + 7 & Anwendungsschicht & Application Layer & Realisierung des Kommunikationsmodells für die jeweilige Anwendung (Client/Server; Peer-to-Peer) \\ + \midrule + + 6 & Darstellungsschicht & Presentation Layer & Zeichen-/Anwendungskodierung \\ + \midrule + + 5 & Kommunikations-\newline steuerungsschicht (besser nicht: Sitzungsschicht) & Session Layer & Sychronisierung der Anwendung; Transaktionssteuerung; (\zB RPC Protokoll) \\ + \midrule + + 4 & Transportschicht & Transport Layer & Verbindungen; Vollständigkeit/Fehlerfreiheit/Reihenfolge; Port-/Anwendungsadressierung; (\acs{TCP}/\acs{UDP}) \\ + \midrule + + 3 & Vermittlungsschicht & Network Layer & Wegewahl/Routing; Adressierung (mit IP-Adresse) \\ + \midrule + + 2 & Sicherungsschicht & Data Link Layer & \href{https://de.wikipedia.org/wiki/Logical_Link_Control}{LLC}: Logical Link Control (Integritätsüberprüfung) \\ + \midrule + + & & & \href{https://de.wikipedia.org/wiki/Media_Access_Control}{MAC}: Medium Access Control (Adressierung mit \href{https://de.wikipedia.org/wiki/MAC-Adresse}{MAC-Adresse}); Regelung des Zugangs auf das \enquote{shared-medium} \\ + \midrule + + 1 & Bitübertragungs-\newline schicht & Physical Layer & Signalkodierung ; Stecker/Kabelform + \end{tabular} + \caption{OSI-7-Schichten-Modell} + \label{tbl:osi_7_schichten} +\end{table} + +\newpage +\section{ISO-OSI-7-Schichten-Architektur} + +Die 7 Schichten des ISO-OSI-7-Schichten-Architektur\index{OSI-7-Schichten-Architektur} werden in \autoref{tbl:osi_7_schichten} auf Seite \pageref{tbl:osi_7_schichten} dargestellt. + +\textbf{Hinweis}: Schicht 2 kann unterteilt werden. + +\begin{itemize}[noitemsep] + \item Ab der Transportschicht werden nur noch Ende zu Ende Verbindungen betrachtet. + \item \textit{siehe} Wikipedia\footnote{\url{https://de.wikipedia.org/wiki/OSI-Modell}} +\end{itemize} + + +\section{Internet-4-Schichten-Modell}\index{Internet-4-Schichten-Modell} +\hspace*{-3mm} +\begin{tabular}{rcl} + Schicht &5-7 &$\Rightarrow$ Application Layer \\ + Schicht &4 &$\Rightarrow$ Transport Layer\\ + Schicht &3 &$\Rightarrow$ Internet Layer\\ + Schicht &1-2 &$\Rightarrow$ Network Access-Layer\\ +\end{tabular} + +\acs{HTTP} als Anwendungsprotokoll des 4-Schichten-Internet-Modells benötigt als unterliegendes Protokoll der Transportschicht \acs{TCP} (\acs{UDP} geht nicht!). diff --git a/Kapitel/03_HTTP.tex b/Kapitel/03_HTTP.tex new file mode 100644 index 0000000..334e056 --- /dev/null +++ b/Kapitel/03_HTTP.tex @@ -0,0 +1,191 @@ +\chapter{\acf{HTTP}}\index{HTTP}\label{sec:http} + +\textit{Was ist ein Protokoll\index{Protokoll}?} \newline +Ein Protokoll ist verbindliche Vereinbarung (Regeln), wie zwei (oder mehr) Teilnehmer miteinander kommunizieren. + +\section{HTTP 0.9 (1991) - Erste Version}\label{http09} +Request: \code{GET /pdf/zur/ressource} \newline +Response: \code{} \newline +Problem: Nur Plain-Text und \acs{HTML} (erkennbar am Anfang \html{}) sind erlaubt und möglich. \newline +Problem: Fehler sind nicht sicher erkennbar. + +\section{HTTP 1.0 (1992)}\label{sec:http10} +Request: \code{GET /pdf/zur/ressource HTTP/1.0} \newline +Response: beginnt mit einer Statuszeile: \code{HTTP/1.0 } + +\subsection{Status Codes}\label{sec:statuscodes}\index{HTTP!Statuscode} + +\begin{Hinweis}[frametitle=Hinweis zur Klausur] + Die Codes müssen nicht für die Klausur auswendig gerlernt werden. Es reichen die Gruppen. + + Für alle Codes siehe auch: \url{https://de.wikipedia.org/wiki/HTTP-Statuscode}. +\end{Hinweis} + +\begin{itemize}[noitemsep] + \item \textbf{\code{1xx}}: Informational Codes \newline + \hspace*{6mm} $\Rightarrow$ Zur Anzeige, dass weitere Daten folgen (Verhinderung von Time-Outs). + + \item \textbf{2xx}: Successful Client Requests + \begin{itemize}[noitemsep] + \item \code{200} $\Rightarrow$ Ok + \item \code{204} $\Rightarrow$ Ressource leer + \item \code{206} $\Rightarrow$ Partial Content + \end{itemize} + + \item \textbf{\code{3xx}}: Client Requests Redirected + \begin{itemize}[noitemsep] + \item \code{301} $\Rightarrow$ Moved Permanently \newline + \phantom{\code{301}} $\Rightarrow$ \zB bei Domainnamensänderung, Neuordnung der Website + \item \code{302} $\Rightarrow$ Moved Temporarily \newline + \phantom{\code{302}} $\Rightarrow$ \zB bei Überlastung der Website, Wartungsmodus, temporärer Ausfall + \end{itemize} + + \item \textbf{\code{4xx}}: Client Request Errors + \begin{itemize}[noitemsep] + \item \code{400} $\Rightarrow$ Bad Request $\Rightarrow$ Der Request war nicht korrekt. + \item \code{401} $\Rightarrow$ Authorization Required $\Rightarrow$ Eine Autorisierung ist erforderlich. + \item \code{403} $\Rightarrow$ Forbidden $\Rightarrow$ Der Webserver hat \zB keinen Zugriff (auf ein Verzeichnis). Oder man greift auf ein Verzeichnis zu, ohne eine Datei anzugeben (und es gibt keine \pfad{index.html} und das Verzeichnislisting ist deaktiviert). \enquote{Wenn ich eine solche Meldung erhalte, erhält sie jeder!} + \item \code{404} $\Rightarrow$ Not Found; Der Pfad wurde nicht gefunden + \end{itemize} + + \item \textbf{\code{5xx}}: Server Error + \begin{itemize}[noitemsep] + \item \code{500} $\Rightarrow$ Internal Server Error + \item \code{505} $\Rightarrow$ HTTP Version Not Supported $\Rightarrow$ Der Server wird mit einer Version angesprochen, die er nicht unterstützt. Heute eher selten. + \end{itemize} +\end{itemize} + + +\subsection{HTTP Header} +Die Statuszeile wird gefolgt von einer oder mehreren \acs{HTTP}-Header-Zeilen im Format: \newline +\code{: }, \zB + +\begin{description}[noitemsep] + \item[\code{Content-Type: text/html}] Der Wert ist ein \acf{MIME-Type} + \begin{itemize}[noitemsep] + \item besteht immer aus zwei Teilen: tlmt/slmt + \medskip + \begin{description}[noitemsep] + \item[\acf{tlmt}] \index{Media-Type!Top Level} $\Rightarrow$ grundsätzliche Medienform (text, image, video, audio, application, [ multipart]) + \item[\acf{slmt}] \index{Media-Type!Sub Level} $\Rightarrow$ Angabe der konkreten Codierung (Anwendungscodierung), \zB \code{text/html }, \code{text/plain}, \code{image/jpeg}, \code{video/mp4}, \ldots + \end{description} + \medskip + + \item \textbf{Achtung}: Alle \acsp{MIME-Type} sind standardisierte Werte! Dies ist standardisiert von \enquote{IANA} (Teil der \enquote{IETF} ) \newline + \textbf{Ausnahme}: \acs{slmt} beginnt mit \enquote{\code{x-}}, \zB \code{application/x-meinespezielleirgendwas} + + \item Wird immer mitgegeben, außer man hat \textit{keinen} Content + (\zB bei \code{204} [siehe S.~\pageref{sec:http}])! + \end{itemize} + + \item[\code{Content-Length:}] Größe der Antwort in Bytes + \begin{itemize}[noitemsep] + \item Wichtig für Anzeige von Download-Fortschrittsbalken + \item Wichtig für Caches in Browsern und Proxies + \end{itemize} + + \item[\code{Last-Modified: }] \zB \code{Jan 23rd, 2017 \ldots EST} + \item[\code{Expires: }] ebenfalls wichtig für Caches und Proxies + \item[\code{Content-Language:}] Menschliche Sprache des Inhalts. Kann auch bei Bildern angegeben werden, wenn dort \zB Text drauf steht. + \begin{itemize}[noitemsep] + \item 2-Letter-ISO-Language-Code ggf. mit Sprachvariante, \zB \code{de/DE-AT}, \code{fr} + \end{itemize} +\end{description} + +Eine Leerzeile beendet die \acs{HTTP}-Header-Zeilen, danach folgt das Dokument. Die Leerzeile enthält \textbf{keine} Zeichen, auch keine Leerzeichen! + + +\subsection{Weitere Request-Typen}\index{HTTP!Requests} +Mit HTTP 1.0 wurden weitere Request Typen eingeführt. + +\subsubsection{HEAD-Request} +\code{HEAD /pfad/zur/ressource HTTP/1.0} $\Rightarrow$ liefert nur die Statuszeile und \acs{HTTP}-Headerzeile. + +\subsubsection{POST-Request} +\code{POST /pfad/zur/ressource HTTP/1.0} $\Rightarrow$ gefolgt von Parametern (signalisiert wie bei einer Response über \acs{HTTP}-Headerzeilen). + + +\subsection{Was funktioniert nicht?} + +\acs{HTTP} 1.0 funktioniert gut, aber was funktioniert nicht bzw. was geht besser? + +Ist es möglich, mehrere \acs{FQDN} auf eine IP-Adrese zu leiten? \newline +\hspace*{4mm} $\Rightarrow$ FQDN1 und FQDN2 zeigen beide auf \code{1.2.3.4}; per \acs{DNS} möglich und erlaubt! \newline + +\code{GET /pfad/zur/ressource HTTP/1.0} $\Rightarrow$ Problem: Der \acs{FQDN} steht nicht im Request bei \acs{HTTP} 1.0 und wird nicht einmal für den \acs{TCP}-Verbindungsaufbau verwendet $\Rightarrow$ Der Webserver weiss nicht, welche Präsenz angefragt ist! + +\begin{Achtung} + \acs{HTTP} 1.0 kann nicht erkennen, von welchem \acs{FQDN} der Request kommt! Siehe \autoref{sec:multi_präsenzen} für Möglichkeiten, dennoch verschiedene Webpräsenzen zu unterscheiden. +\end{Achtung} + +\section{HTTP 1.1 (seit 1997)} +Pflicht-Header im Request: + +\qquad \code{Host: $\underbrace{\text{www.dhbw-karlsruhe.de}}_{\text{angefragter FQDN}}$} + +Jetzt gibt es persistene Verbindungen, \dash eine \acs{TCP}-Verbindung wird nacheinander für meherere Request/Response-Paare zwischen Client und Server genutzt. \newline +$\Rightarrow$ Es muss nicht jeweils eine neue Verbindung aufgebaut werden. Bereits vorher bei \acs{HTTP} 1.0 gab es ähnliches, nämlich den \enquote{Connection: Keepalive}-Header. Dieser ist nicht standard-konform und nur teilweise implementiert! + +\begin{figure}[h] + \begin{center} + \begin{tikzpicture} + \node at (0,5.5){Client}; + \node at (5,5.5){Server}; + \draw [ultra thick, ->] (1,5.3) -- (5,4.1) node[midway,above,sloped]{Request}; + \draw [ultra thick, <-] (1,2.6) -- (5,4) node[midway,above,sloped]{Response}; + \draw [ultra thick, ->] (1,2.5) -- (5,1.1) node[midway,above,sloped]{Request}; + \draw [ultra thick, <-] (1,0) -- (5,1) node[midway,above,sloped]{Response}; + \end{tikzpicture} + \caption{Sequentielle Abarbeitung von Requests und Responses} + \end{center} +\end{figure} + +Dieses Abarbeiten von Requests und Responses benötigt Zeit und verzögert das Laden eines Dokuments. Mit HTTP2 gibt es andere Möglichkeiten. + + +\section{HTTP 2 (seit ca. 2015)} +Siehe Wikipedia: \url{https://de.wikipedia.org/wiki/Hypertext_Transfer_Protocol#HTTP.2F2} + +\begin{itemize}[noitemsep] + \item Multiplexen mehrerer \acs{HTTP}-Requests über eine \acs{TCP}-Verbindung per \enquote{Stream-ID} ist möglich + \item Komprimierung (auch) der \acs{HTTP}-Header möglich. + \item \enquote{Server-Push}\footnote{\url{https://en.wikipedia.org/wiki/HTTP/2_Server_Push}}, \dash ein Webserver kann nach dem Request auf eine Ressource weitere damit in Zusammenhang stehende Ressourcen mitschicken, ohne dass diese explizit vom Client angefordert wurden. +\end{itemize} + +\newpage + +\section[Mehrere Web-Präsenzen auf einem Server]{Bereitstellung/Unterscheidung von mehreren Web-Präsenzen auf einem (großen) Webserver}\label{sec:multi_präsenzen} + +\begin{enumerate}[noitemsep] + \item über den Pfad/das Verzeichnis + \begin{itemize}[noitemsep] + \item \code{http://www.uni.de/$\sim$/}\index{Sonderzeichen!Tilde in URL} $\Rightarrow$ Mit Tilde: Unterverzeichnis im Home-Verzeichnis. Nicht für professionelle Web-Angebote geeignet. + \end{itemize} + + \item über verschiedene Portnummern $\Rightarrow$ auch nicht professionell + \begin{itemize}[noitemsep] + \item \code{http://www.uni.de:4711/} + \item \code{http://www.uni.de:0815/} + \end{itemize} + + \item per \acf{FQDN}\index{FQDN} \enquote{Rechner} oder \enquote{Domain}-Name, welche per DNS auf eine IP-Adresse umgesetzt werden (A-Record oder Alias-Eintrag), \newline + \zB \code{http://dhbw-karlsruhe.de}, \code{http://www.uni-karlsruhe.de} $\Rightarrow$ Dies gilt als professionell + \begin{enumerate}[noitemsep] + \item mehrere IP-Adressen (je eine eigene IP Adresse pro \acs{FQDN}) + \begin{enumerate}[noitemsep] + \item mehrere Netzwerkkarten + \begin{itemize}[noitemsep] + \item \- teuer (Hardware) + \item \- Anzahl Steckplätze für Netzwerkkarten + \end{itemize} + + \item mehrere IP Adressen für eine Netzwerkkarte ($\Rightarrow$ bei allen halbwegs modernen Betriebssystemen möglich, bei unixoiden Betriebssystemen \enquote{schon immer}, bei Windows seit WindowsNT [nicht bei Windows 3.1]) + \begin{itemize}[noitemsep] + \item Reichen die IP-Adressen aus? + \item Wie viele IP-Adressen gibt es? + \item Siehe \autoref{sec:ipv4_adressen} auf Seite~\pageref{sec:ipv4_adressen} + + \end{itemize} + \end{enumerate} + \end{enumerate} +\end{enumerate} diff --git a/Kapitel/04_IP.tex b/Kapitel/04_IP.tex new file mode 100644 index 0000000..8d789ac --- /dev/null +++ b/Kapitel/04_IP.tex @@ -0,0 +1,38 @@ +\chapter{IP Adresse}\label{sec:ip_adressen} + +\section{IPv4}\label{sec:ipv4_adressen} + +Bei einer IPv4\index{IPv4} \code{a.b.c.d} mit $a,b,c,d \in {0,...,255}$ (oder anders gesagt: IPv4 Adresse = 4-Byte-Wert bzw. 32 Bit) gibt es theoretisch $2^{32} = 2^2 \cdot 2^{30} = 2^2\cdot (2^{10})^3 \approx 2^2 \cdot 1000^3 \approx 4Mrd.$ verschiedene IPv4-Adressen. + +\begin{itemize}[] + \item Tatsächlich gibt es jedoch weniger als 4 Mrd. IP-Adressen, welche für Webserver potentiell nutzbar wären. Nicht benutzt werden können: + \medskip + + \begin{tabular}{cll} + -- & \code{127.0.0.0/8} & $\Rightarrow$ Loopback (der eigene Rechner) \\ + -- & \code{192.168.0.0/16} & $\Rightarrow$ Private Netzwerkbereiche \\ + -- & \code{172.16.0.0/12} & $\Rightarrow$ Private Netzwerkbereiche \\ + -- & \code{10.0.0.0/8} & $\Rightarrow$ Private Netzwerkbereiche \\ + -- & \code{224.0.0.0/4} & $\Rightarrow$ Multicast \\ + -- & \code{240.0.0.0/4} & $\Rightarrow$ Future/Experimental Use \\ + \end{tabular} + + \item Außerdem sind in jedem Teilnetz die erste und die letzte Adresse als Netzwerkadresse bzw. Broadcast-Adresse reserviert. \newline + $\Rightarrow$ ingesamt stehen deshalb weniger als 4 Mrd. Adressen zur Verfügung. + + \item Außerdem: IP-Adressen sind äußerst ungerecht auf der Welt verteilt: + \begin{itemize}[noitemsep] + \item Nordamerika: sehr viele + \item Europa, Australien: ordentliche Menge + \item Rest (Afrika, Asien, Südamerika): sehr wenig + \end{itemize} + + \item Außerdem: immer mehr Geräte der Haushalts- und Unterhaltungselektronik sind \enquote{internetfähig} (haben einen Webserver). +\end{itemize} + +\begin{Tipp} + \textbf{Grobe Berechnung von 2er Potenzen} + + Man \enquote{splittet} die Potenz auf, sodass man $(2^{10})^x$ erhält. $2^{10}$ entspricht \circa 1000 \newline + $2^{32} = 2^2 \cdot 2^{30} = 2^2\cdot (2^{10})^3 \approx 2^2 \cdot 1000^3 \approx 4Mrd.$ +\end{Tipp} diff --git a/Kapitel/05_HTML.tex b/Kapitel/05_HTML.tex new file mode 100644 index 0000000..de3b34c --- /dev/null +++ b/Kapitel/05_HTML.tex @@ -0,0 +1,559 @@ +\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{}}_{\text{nicht angezeigt}} \text{Text}\underbrace{\text{}}_{\text{nicht angezeigt}}$} + \item alle \enquote{Metadaten} im \html{} (\zB \html{}, \html{ + + +

rote Überschrift

+ + +\end{lstlisting} + +\newpage +\begin{lstlisting}[language=HTML5,caption=HTML \texttt{}-Tag,label=code:html5_link_tag] + + + + Blabla + + + + ... + + +\end{lstlisting} + + +\section{\code{@import}-Statement}\index{CSS!import} +\code{@import}-Statement zu Beginn eines \acs{CSS}-Regelblocks (externe \acs{CSS}-Datei oder innerhalb des Style-Tags). Hiermit wird eine andere \acs{CSS}-Datei eingebunden. + +\bigskip +\begin{lstlisting}[language=CSS,caption={@import-Anweisung in CSS}] + @import "URL/zur/datei.css" [mediatype]; // oder: + @import url("URL/zur/datei.css") [mediatype]; +\end{lstlisting} + +\begin{description} + \item[\code{mediatype}] optional, \zB \code{all}, \code{sceen}, \code{speech} +\end{description} + + +\section{CSS Struktur}\index{CSS!Struktur} + +\acs{CSS} besteht aus beliebig vielen \enquote{Regeln}. Jede Regel besteht aus (mindestens) einer Zeile. Jede Regel besteht aus \enquote{Selektor} und \enquote{Deklaration} im Format: + +\qquad \css{selector \{ declaration; \}} + +Jede Regel kann mehrere Selektoren enthalten, welche durch Kommata voneinander getrennt werden. +Jede Regel kann mehrere Deklarationen enthalten, welche in derselben geschweiften Klammer jeweils mit \enquote{;} abgeschlossen werden. +Der Selektor wählt die Elemente (\enquote{Tags}) aus, für welche die Regel gilt. Die Deklaration gibt das \enquote{Aussehen} für die selektierten Elemente vor, \zB: + +\qquad \css{h1, h2 \{ color: red; font-size: 16pt; \}} + +Ein Selektor ist im einfachsten Fall ein Tagname, \zB \code{h1} (oder die Wildcard \enquote{\code{*}} für alle Tagnamen). + + +Eine Deklaration besteht aus einer Eigenschaft (property) und einem Wert (value) im Format: + +\qquad \code{property: value;} + +\subsection{Positionierung: \enquote{Box-Model}} + +In \acs{CSS} gibt es das sogenannte \enquote{Box-Model}. Was es genau bedeutet, wird in \autoref{fig:css_modell}\footnote{Quelle: \url{https://wiki.selfhtml.org/wiki/CSS/Box-Modell}} gezeigt. + +\begin{figure}[ht] + \centering + \includegraphics[width=0.8\textwidth]{Bilder/CSS_Box_Modell.png} + \caption{CSS Box Modell} + \label{fig:css_modell} +\end{figure} + +\css{div \{ width: 40mm; padding: 3mm; border-width: 2mm; margin: 5mm; \}} + +$\Rightarrow$ Gesamtbreite: 60mm, da padding, border-width und margin doppelt gezählt werden. + +Falls es keine explizite Angabe durch den Autor der Seite gibt, so wird folgendes verwendet: + +\begin{itemize}[noitemsep] + \item default-Vorgabe (\code{user-agent}) + \item dynamische Anpassung (hier an den Inhalt) +\end{itemize} + +\subsection{Eigenschaften/\enquote{properties}} + +\subsubsection{Eigenschaft \enquote{\code{display}}} + +Die Eigenschaft \code{display} gibt an, wie die Elemente im Fluss dargestellt werden: + +\begin{tabular}{ll} + \code{display: inline;} & Innerhalb einer Zeile (sofern genug Platz)\\ + \code{display: block;} & Beginnt und endet auf jeden Fall in einer eigenen Zeile\\ + \code{display: none;} & Element wird nicht dargestellt und nimmt auch keinen Platz ein +\end{tabular} +\bigskip + +Es gibt noch weitere \code{values} als Spezialfälle für Tabellen, Listen, \ldots + +\bigskip +\begin{Tipp} + Eine Alternative zu \code{display: none;} ist \code{visibility: hidden;} (anstatt \code{visibility: visible;}). Damit wird das Element nicht dargestellt, nimmt aber seinen Platz in Anspruch. +\end{Tipp} + + +\subsubsection{Eigenschaft \enquote{\code{position}}} + +\begin{tabular}{ll} + \code{position: static;} & \enquote{normale} Position, Default-Wert \\ + \code{position: relative;} & relative Verschiebung zur \enquote{normalen} Position\\ + & Der Platzbedarf bleibt an der ursprünglichen Position erhalten \\ + \code{position: absolute;} & Positionierung relativ zum nächsten Vorfahren, welches eine \\ + & von \code{static} verschiedene Position aufweist (bzw. \html{body}) \\ + \code{position: fixed;} & Positionierung relativ zum Browserfenster (\enquote{viewport}) \\ +\end{tabular} +\bigskip + +Unterschied \code{fixed} zu \code{static}/\code{absolute}/\code{relative}: scrollt nicht mit bzw. scrollt mit. + +Unterschied \code{absolute}/\code{fixed} zu \code{static}/\code{relative}: Element hat keinen Platzbedarf bzw. hat Platzbedarf. + +Die tatsächliche \enquote{Position} wird angegeben mittels \code{top}, \code{bottom}, \code{left} und \code{right}. + +\code{width}, \code{right}, \code{margin}, \code{top}, \ldots erwarten Längenangaben als Werte. Diese können sein: + +\begin{itemize}[noitemsep] + \item absolute Werte, \zB $50mm$, $3in$, $2pt$ (\enquote{Punkt der Schriftsetzer}) $\Rightarrow$ werden selten verwendet + \item relative Werte, \zB \medskip + + \begin{tabular}{ll} + 300px & Pixel, \dash relativ zur Bildschirmauflösung. Meist ungünstige Wahl \\ + & für allgemeine Größenangaben, verwendet \zB für \code{border} Angaben \\ + 50\% & Prozentangabe, \dash relativ zur entsprechenden Bezugsgröße des Elternelements \\ + & meist oder oft eine gute Wahl (\code{width} $\Rightarrow$ \code{width}, \code{top} $\Rightarrow$ \code{height}) \\ + 2em & Breite des Kleinbuchstabens \enquote{m} in der aktuellen Schrift. Ebenfalls eine gute Wahl. \\ + 4rem & Breite des Kleinbuchstabens \enquote{m} in der Schrift des \code{root} Elements \\ + & (für die Unterstützung siehe \url{http://caniuse.com/\#feat=rem}) \\ + 3ex & Höhe des Kleinbuchstabens \enquote{x} in der aktuellen Schrift \\ + & + \end{tabular} +\end{itemize} + +\subsubsection{Eigenschaften \enquote{margin}, \enquote{padding}, \enquote{border-width}, \ldots} + +Diese Eigenschaften sind Sammeleigenschaften für die Dimensionen an allen vier Seiten. + +\begin{tabular}{llll} + margin-top & padding-top & border-top-width & \ldots \\ + margin-right & padding-right & border-right-width & \ldots \\ + margin-bottom & padding-bottom & border-bottom-width & \ldots \\ + margin-left & padding-left & border-left-width & \ldots +\end{tabular} +\bigskip + +Gesammelt ergibt dies zum Beispiel: + +\qquad \code{margin: 1mm 2mm 3mm 4mm;} + +Die Eigenschaften werden in der Reihenfolge \code{top}, \code{right}, \code{bottom} und \code{left} mit Leerzeichen getrennt angegeben. +Es können aber auch weniger Werte angegeben werden. Fehlende Werte werden ersetzt: + +\begin{itemize}[noitemsep] + \item left = right (3 oder 2 Werte) + \item bottom = top (2 Werte) + \item left = bottom = right = top (1 Wert) +\end{itemize} + +\code{border} ist auch eine Sammeleigenschaft für: +\begin{enumerate}[noitemsep] + \item \code{border-width} $\Rightarrow$ + \item \code{border-style} $\Rightarrow$ jeweils ebenfalls eine Sammeleigenschaft für vier Seiten + \item \code{border-color} $\Rightarrow$ +\end{enumerate} + +\begin{description} + \item[\code{border-style}] \texttt{solid | dotted | dashed | double | \ldots | none} + \item[\code{border-color}] \hfill + \begin{itemize}[noitemsep] + \item \texttt{red | green | blue|...} + \item \texttt{\#abc1f5} (RGB-Angabe, je zwei Zeichen) + \item \texttt{\#a5f} $\hat{=}$ \texttt{\#aa55ff} (RGB-Angabe, je ein Zeichen) + \item \texttt{rgb(122,231,85)} (RGB-Angabe) + \item \texttt{rgba(122,231,85,0.5)} (RGB-Angabe + Alpha-Kanal für Deckkraft von 0 bis 1) + \item weitere Farbmodelle sind \uA \code{hsl(\ldots), hsla(\ldots), \ldots} + \item weiteres Schlüsselwort, manchmal anwendbar (\zB für Hintergrundfarbe): \code{transparent} (bei \code{rgba()} nicht mehr notwendig + \end{itemize} +\end{description} + +Weitere Eigenschaften mit Farbangaben sind \uA: +\begin{itemize}[noitemsep] + \item \code{color} (Schriftfarbe) + \item \code{background-color} (Hintergrundfarbe) +\end{itemize} + + +\subsubsection{Eigenschaften für den Hintergrund} + +\begin{itemize}[noitemsep] + \item \code{background-image: url("{}url/zum/bild.jpg"{});} + \item \code{background-repeat: no-repeat | repeat | repeat-x | repeat-y;} + \item \code{background-position: left|right|center top|bottom|center;}\newline oder Längenangabe (mit Positionierung der Bildmitte) + \item \code{background-attachment: fixed | scroll;} +\end{itemize} + +\subsubsection{Eigenschaften für Schriften} + +\begin{itemize}[noitemsep] + \item \code{font-style: normal|italic|oblique} schräggestellte Schrift + \item \code{font-variant: normal|small-caps} \enquote{Kapitälchen} + \item \code{font-weight: normal|bold|bolder|lighter|X\%|Zahl} Schriftdicke: Die meisten Schriften unterstützen nur zwei verschiedene Schriftdicken + \item \code{font-size:} Schriftgröße -- Angabe der Längenangabe (vorzugsweise Prozentwerte) + \item \code{font-family: \textquotedbl{}Name der Schriftfamilie\textquotedbl | serif | sans-serif | cursive | monospace | fantasy } \newline + Alternativangaben werden durch Kommata getrennt angegeben +\end{itemize} + +Die Sammeleigenschaft dafür ist \code{font}. + + +\section{Ergänzungen -- CSS} + +Positionierung: +\enquote{dritte} Dimension: \code{z-index: ;} + +$\Rightarrow$ Element mit größeren \code{z-index} überlagern Elemente mit kleinerem \code{z-index} + +\begin{figure}[h] + \centering + \begin{tikzpicture}[ + scale=0.80, + knoten/.style={ + rectangle, + fill=green!15, + draw=green!70!black, + minimum width=14mm, + inner sep=5pt + }, + thick + ] + + \node[knoten] at (0,0) (BODY) {}; + \node[knoten] at (-3,-2) (DIV1) {
~~~~}; \node[red] at ($(DIV1) + (0.8,0)$) {2}; + \node[knoten] at (3,-2) (DIV2) {
~~~~}; \node[red] at ($(DIV2) + (0.8,0)$) {4}; + \node[knoten] at (-6,-4) (P1) {

~~~~}; \node[red] at ($(P1) + (0.7,0)$) {1}; + \node[knoten] at (-3.5,-4) (UL) {