\documentclass[a4paper,12pt]{article}
\usepackage[T1]{fontenc}
\usepackage[latin1]{inputenc}
\usepackage[german]{babel}
\usepackage{schulung,url,xspace,moreverb}
\ifpdfoutput
\usepackage[backref,colorlinks,bookmarks]{hyperref}
\usepackage{thumbpdf,ae}
\pdfinfo{
/Title (HTML-Schulung)
/Author (Lutz Donnerhacke)
/Subject (HTML)
/Keywords (HTML, WWW, HOMEPAGE)
}
\fi
\newcommand{\HTML}{\textsc{html}}
\newcommand{\URL}{\textsc{url}}
\newcommand{\tag}[2][\relax]{\texttt{<\uppercase{#2#1}>}}
\newcommand{\ctag}[1]{\tag{/#1}}
\newcommand{\intag}[3][]{\tag[#1]{#2} \texttt{#3} \ctag{#2}}
\begin{filecontents*}{demo.html}
Meine 1. Homepage
Willkommen auf meiner Homepage!
Hier findest du viele interessante Dinge, zB. ...
Hier kannst du mir eine
Mail schicken.
\end{filecontents*}
\begin{document}
\title{Meine erste Webseite}
\author{\ttfamily Lutz.Donnerhacke@Jena.Thur.De\\\ttfamily Rene.Scholz@Jena.Thur.De}
\date{15. Februar 2000}
\maketitle
\begin{abstract}
\noindent
Schulungsunterlage für Einsteigerkurse im Internetraum des
Jugendzentrums Trend in Jena durchgeführt vom \TEV mit
freundlicher Unterstützung des Jugendzentrums Trend, der Stadt
\mbox{Jena} und vieler fleißiger Helfer.
\noindent
Dieser Kurs dient dazu, die Beschreibungssprache \HTML\ soweit
kennenzulernen, dass man selbständig eine einfache \HTML"=Seite
erstellen und verstehen kann.
\end{abstract}
\section{Worum geht's?}
Im \fachwort{Internet}{Weltweiter Verbund von Rechentechnik} kann man auf
viele Weisen Informationen austauschen. Eine besonders typische Art der
Informationsverbreitung besteht darin, dass die Information an einer Stelle
bereitgestellt und von vielen anderen Stellen aus abgerufen werden kann.
Dieses sogenannte
\fachwort{Client}{Datensenke}-\fachwort{Server}{Datenquelle}-Prinzip ist
mit dem \fachwort{WWW}{World-Wide-Web -- Weltweites Geflecht.} nur
teilweise umgesetzt. Statt einem zentralen Server, der alle Informationen
über alles bereithält, kann \emph{jeder} teilnehmende Rechner als Server
fungieren.
\aufgabe{Warum spricht man immer noch von einem Server, wenn doch die
verschiedenen Informationen an vielen verschiedenen Stellen abgelegt
sein können?}{Für eine \emph{konkrete} Information existiert nur eine
kleine Menge von Datenquellen. Oft ist es nur genau eine solche
Datenquelle -- ein Server eben.}
Die Vielzahl der Datenquellen verkompliziert die Informationssuche. So wie
die Literatur zu einem bestimmten Thema oft unüberschaubar ist, so
verweist doch jedes ernstzunehmende Werk auf Andere. Diesen Hinweisen kann
man folgen und so Schritt für Schritt die Informationen aus vielen Büchern
destillieren.
\aufgabe{Wie kann man vorab erkennen, welche Buchtipps sinnvoll sind und
welche nicht weiterhelfen?}{Die Verweise in der Literatur sind nicht
platt, sondern beziehen sich auf einen bestimmten Kontext. Anhand dieser
Zusatzinformation erkennt man, ob der Verweis für einen selbst brauchbar
ist.}
Während es mit Papier einfach ist, immer ein ansprechendes Erscheinungsbild
zu erzeugen, setzt der Einsatz von Rechentechnik dem ungeahnte
Schwierigkeiten gegenüber. Man kann bei der Informationsaufbereitung also
nicht davon ausgehen, dass die Darstellung am eigenen Schirm irgend etwas
mit den Darstellungsmöglichkeiten am Zielsystem zu tun hat.
So muß \fachwort{\HTML}{HyperText Markup Language -- Verweis"=
und Auszeichnungssprache} mehrere Aufgaben lösen:
\begin{itemize}
\item Informationen inhaltlich strukturieren,
\item Verweise auf andere Informationsquellen leicht nutzbar machen,
\item Maschinell in verschiedene Darstellungen umwandelbar sein.
\end{itemize}
\section{Strukturierung}
Dokumente in \HTML\ sind in erster Linie reine Textdokumente, in denen die
besonderen inhaltlichen Strukturelemente durch besondere Markierungen
(deswegen auch \rede{Markup}) eingebettet sind.
Ein \fachwort{Tag}{Strukturelement} \rede{name} beginnt mit
\verb|| und endet mit \verb||. Dort, wo die
Auslassungspunkte stehen, kann nähere Zusatzinformation zu dieser Struktur
stehen. Zwischen Anfangs"= und Endtag befindet sich die Information, die
zu dieser Struktur gehört.
\begin{raggedright}
\aufgabe{Welche Struktur ist das: \texttt{Welche Struktur ist das: Satz Welche {\ldots}
}}{Ein Satz, der eine Frage darstellt, enthält etwas
Text gefolgt von einem Code"=Stück. Dieser Code besteht aus einem
Tag, das das Wort \rede{Satz} enthält und wieder Text. Abschließend
beenden sich alle offenen Strukturen.}
\end{raggedright}
Ein \HTML"=Dokument besteht aus folgender Grundstruktur:\newline
\texttt{ {\ldots} {\ldots} }
Die Einträge im \tag{body} werden auf dem Zielsystem dargestellt,
wogegen die Einträge im \tag{head} diese Darstellung genauer steuern. So
findet sich im \tag{head} die Information über Kopfzeilen und Verfasser,
während im \tag{body} die gesamten eigentlichen Informationen Platz finden.
Eingerahmt wird das Ganze von \tag{html}.
\HTML\ ignoriert die Anzahl der Leerzeichen und Leerzeilen, da dies von
System zu System unterschiedlich interpretiert werden kann. Statt dessen
wird auch die Absatzstruktur durch Tags dargestellt. Jeder neue Absatz
beginnt mit \tag p.
\aufgabe{\label{auf:minidoc}Wie sieht ein \HTML"=Dokument aus, das aus
zwei Absätzen besteht?} {\tag{html} \tag{head} \ctag{head} \tag{body}
\tag p Erster Absatz \tag p Zweiter Absatz \ctag{body} \ctag{head}}
\section{Erste Schritte}
Zum Bearbeiten und Ansehen von \HTML"=Dokumenten benötigen Sie einen
Editor, mit dem sie umgehen können und einen
\fachwort{Webbrowser}{Clientprogramm zur Anzeige der Daten}.
Eine mögliche Kombination besteht aus dem Netscape Navigator (oder dem
Internet Explorer von Microsoft) und dem Windows"=Editor
\rede{notepad}. Das entsprechende Dokument kann auf dem
\fachwort{Desktop}{Virtueller Arbeitsplatz} angelegt werden. Die Datei
sollte die Endung \texttt{html} haben. Nach dem Speichern jeder Änderung
muß man im Navigator \texttt{Reload} anwählen.
Eine andere Alternative ist der Einsatz von Lynx und einem beliebigen
Unix"=Texteditor. Aus Lynx kann man mit \T E direkt in den Editor für die
aktuelle Seite springen. Beim Verlassen des Editors lädt Lynx automatisch
die aktualisierte Seite neu. \kommando{vi}{datei.html} und
\kommando{lynx}{datei.html}.
\aufgabe{Erstellen Sie die kleine \HTML"=Datei aus
Aufgabe~\ref{auf:minidoc} und zeigen Sie diese an.}{Man kann die Datei
noch etwas besser formatieren. So sollten \zb zueinander passende Tags
untereinander stehen.}
\aufgabe{Tragen Sie im \tag{head} zusätzlich \intag{title}{Meine erste
Web\-seite} ein. Fügen Sie anschließend vor dem ersten Absatz
\intag{h1}{Überschrift} ein. Interpretieren Sie das Ergebnis.}{
Der Text in \tag{title} erscheint in der Kopfzeile des Browsers,
die \tag{h1}"=Überschrift dagegen hervorgehoben im Text.}
\section{Gestaltung}
Die Gliederung des Textes erfolgt durch Überschriften. Dafür stehen die
Tags \tag{h1}, \tag{h2}, {\ldots} zur Verfügung.
\aufgabe{Welches ist die niedrigste Überschrift, die noch als solche
erkannt wird?}{\tag{h6}}
Andere Strukturelemente, die den Text aufgliedern, sind Aufzählungen,
Auflistungen und Beschreibungslisten:
\begin{description}
\item[Auflistung:\footnotemark] \footnotetext{\underline unordered
\underline list}\intag{UL}{\tag{LI}Anstrich \tag{LI}Anstrich}
\item[Aufzählung:\footnotemark] \footnotetext{\underline ordered
\underline list} \intag{OL}{\tag{LI}Anstrich 1 \tag{LI}Anstrich 2}
\item[Beschreibung:\footnotemark] \footnotetext{\underline description
\underline list} \intag{DL}{\tag{DD}Begriff \tag{DT}Erklärung}
\end{description}
\aufgabe{Erstellen Sie eine Liste Ihrer Hobbies unter der passenden
Überschrift.}{Es tut mir leid, aber ich habe die Kristallkugel verlegt.
Grundsätzlich sollte man nach einem passenden \tag{H\textsf{?}} auf die
Auflistung \tag{UL} zurückgreifen können.}
Will man Text im laufenden Text auszeichnen, so bieten sich die logischen
Formen an. So schreibt man \intag{em}{hervorgehoben} --
\emph{hervorgehoben} und \intag{STRONG}{auffallend} -- \textbf{auf"|fallend}.
\aufgabe{Wie wirkt \tag{em} und \tag{STRONG} aus der Ferne betrachtet?}
{\tag{em} paßt sich in den laufenden Text ein und fällt so erst beim
Durchlesen auf. \tag{STRONG} dagegen zieht das Auge an und unterbricht
so den Lesefluß. \tag{STRONG} kennzeichnet somit Dinge, die man schnell
wiederfinden soll.}
\section{Ablage und Aufruf von Webseiten}
Liegt das Dokument \argument{datei.html} im \fachwort{Pfad}{Abfolge von
Verzeichnisordnern \mbox{--}~Directories~--, die zu der Datei führen. Die
Trennstriche werden grundsätzlich durch \T/ beschrieben, auch wenn im
aktuellen Betriebssystem ein anderer Trenner eingestellt wurde. Windows
verwendet hier oft \T\textbackslash.} \argument{/dir/zur/dat/ei/} auf dem
Rechner mit dem \fachwort{Hostname}{Es handelt sich hier um einen
Internetnamen, der die generelle Form \argument{host.dom.ain} hat.}
\argument{host.dom.ain}, so kann diese \HTML"=Datei unter der
\fachwort{\URL}{Unified Resource Locator -- Eindeutige Angabe der
Informationsquelle}
\urlformat{http://host.dom.ain/dir/zur/dat/ei/datei.html}
abgerufen werden. Das setzt voraus, dass auf diesem Rechner auch ein
Webserver läuft, der Zugriff auf den angegebenen Pfad und die Datei hat.
Um auf eine fremde Webseite zu verlinken, kann man im laufenden Text
\intag[ HREF="{}\argument{url}"{}]{A}{sichtbarer Hinweistext} einfügen.
\aufgabe{Fügen Sie in ihrer Datei den Hinweis auf die \URL\ dieses Scripts
ein: \urlformat{http://www.iks-jena.de/mitarb/lutz/vortrag/}}
{\texttt{%
Vorträ\-ge von %
%
Lutz}}
\vspace{\baselineskip}
\centerline{\large Viel Erfolg für die nächsten Projekte\rlap.}
\par\medskip
\loesungen{Lösungen zu den Aufgaben}
\section{Beispiel-Webseite}
Dies ist eine kleine Beispiel-Seite (\argument{demo.html}):
{\small\verbatimtabinput{demo.html}}
\section{Weiterführende Litaratur}
\begin{itemize}
\item \textsf{\textbf{HTML-Einführungen von H.~Partl:}}~\\
\urlformat{http://www.boku.ac.at/htmleinf/}
\item \textsf{\textbf{HTML-Einführung von Dierk Lucyga:}}~\\
\urlformat{http://www.uni-konstanz.de/org/provider/html.html}
\item \textsf{\textbf{Deutsche HTML-FAQ:}}~\\
\urlformat{http://www.franken.de/users/tychen/faq/htmlfaq.html}
\item \textsf{\textbf{Englischsprachige Original-Spezifikationen (W3-Consortium):}}~\\
\urlformat{http://www.w3.org/}
\item \textsf{\textbf{HTML und das World Wide Web (Buch):}}~\\
\urlformat{http://www.oreilly.de/german/freebooks/Html_buch/inhalt.html}
\item \textsf{\textbf{\rede{Self-HTML} von Stefan Münz:}}~\\
\urlformat{http://www.teamone.de/selfhtml/}
\item \textsf{\textbf{Die Goldenen Regeln fuer schlechtes HTML:}}~\\
\urlformat{http://www.karzauninkat.com/Goldhtml/}
\end{itemize}
\end{document}