Janott.com » Medien - Kommunikation

Seitenüberblick

Hauptmenü
 

Suchen

Sie sind hier:

» Janott.com » Schulung » HTML-Tutorium

HTML Mini-Tutorium
Das allerwichtigste in Kürze

Sie sind hier richtig, wenn Sie ganz schnell die wichtigsten Grundzüge von HTML lernen möchten. In nur einer Stunde werden Sie in der Lage sein, eigene Web-Seiten zu erstellen - lesbar in jedem Browser.

Diese Seite ist Ideal für Anfänger, die ein paar Informationen veröffentlichen wollen. Nützlich auch, wenn Sie mit einem Content-Management-System arbeiten und eigene HTML-Textauszeichnungen benutzen dürfen.

Lernen Sie, ...

Sie benötigen etwa 60 Minuten für die gesamte Einführung.

Wenn Sie tiefer in die Materie einsteigen möchten, werfen Sie doch einmal einen Blick auf Self-HTML von Stefan Münz - _die_ HTML-Referenz in deutscher Sprache.

  1. Eine neue HTML-Datei - Das Grundgerüst

    Starten Sie den Text-Editor Ihres Vertrauens (zum Beispiel Notepad unter Windows oder GVim unter Linux), erstellen Sie eine neue Datei und speichern Sie diese unter dem Namen index.html .

    Kopieren Sie die folgenden Zeilen in Ihr Dokument. 

    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
</head>
<body>
</body>
</html>

    In der ersten Zeile wird festgelegt, daß die Datei ein Dokument im HTML-Format enthält. Die Zeile, die mit <meta beginnt, legt den verwendeten Zeichensatz UTF-8 für das Dokument fest. Dieser enthält unter anderem deutsche Umlaute. Die restlichen Zeilen sind das Grundgerüst des Dokuments, welches Sie in den folgenden Abschnitten mit Inhalt füllen werden.

    Bereits hier ist ein Grundprinzip von HTML erkennbar. Das Dokument wird mit Kennzeichnungen (englisch 'Tag', sprich Täg) strukturiert. Tags werden in HTML immer von spitzen Klammern eingeschlossen, damit sie von normalem Text unterscheidbar sind. Die meisten Tags werden geöffnet mit <...> und auch wieder geschlossen mit </...>. Dadurch wird festgelegt, wo ein bestimmtes Strukturmerkmal beginnt und wo es endet. Wie das funktioniert, wird in den nächsten Abschnitten klarer.

    Die Tags selbst werden bei der Präsentation der Seite übrigens nicht dargestellt. Wenn Sie innerhalb Ihres normalen Textes spitze Klammern als sichtbare Zeichen benutzen möchten, verwenden Sie daher spezielle Zeichenfolgen.

    • &lt; wird als < dargestellt. (lt steht für 'less than', englisch für 'kleiner als'.)
    • &gt; wird als > dargestellt. (gt steht für 'greater than', englisch für 'größer als'.)

    Beachten Sie, daß diese Zeichenfolgen immer mit & beginnen und mit ; enden. Für das Zeichen & selbst benötigen Sie demnach auch eine spezielle Zeichenfolge.

    • &amp; wird als & dargestellt. (amp steht für 'ampersand', englisch für das kaufmännische 'Und'-Zeichen.)

  2. Ein Titel für Bookmarks und Browser-Fenster

    Geben Sie Ihrem Dokument einen Titel. Der Titel wird bei der Präsentation der Seite in einem Browser meist in der Titelzeile des Browsers angezeigt. Auch für Bookmarks benutzen die meisten Browser den Dokumententitel.

    Fügen Sie zwischen <head> und </head> den Dokumententitel HTML-Testseite wie folgt ein: 

    <head>
<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1' />
<title>HTML-Testseite</title>
</head>

    Der Kopfbereich des Dokuments, der mit dem head Tag definiert wird, enthält Meta-Informationen über das Dokument, hier den Dokumententitel. Der eigentliche Seiteninhalt des Dokuments wird mit dem body Tag definiert.

  3. Textabsätze

    Schreiben Sie die ersten drei Absätze für Ihren Text. Kopieren Sie dazu die folgenden Zeilen in Ihr Dokument zwischen <body> und </body>. 

    <p>
Dies ist der erste Absatz auf dieser Seite.<br />
Was nun folgt ist Blindtext. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit.
</p>
<p>
Dies ist der zweite Absatz auf dieser Seite.<br />
Was nun folgt ist Blindtext. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit.
</p>
<p>
Dies ist der dritte Absatz auf dieser Seite.<br />
Was nun folgt ist Blindtext. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit.
</p>

    Textabsätze werden mit <p> eröffnet und mit </p> beendet. Das p Tag steht für das englische Wort 'Paragraph' ('Absatz'). Wie Sie bemerken werden, erzwingt das <br /> Tag einen Zeilenumbruch innerhalb eines Absatzes. Da ein Zeilenumbruch, anders als ein Absatz, keinen Inhalt haben kann, wird er durch die Kurzform <... /> sofort in sich geschlossen.

  4. Überschriften

    Geben Sie den Absätzen Überschriften. Fügen Sie eine Überschrift ersten Grades zwischen <body> und dem ersten <p> ein. 

    <h1>Überschrift ersten Grades</h1>

    Kopieren Sie entsprechend die beiden folgenden Überschriften vor den zweiten und den dritten Absatz in Ihrem Dokument. 

    <h2>Erste Überschrift zweiten Grades</h2>
<h2>Zweite Überschrift zweiten Grades</h2>

    Sie können Überschriften in sechs Graden einsetzen. Die Tags heißen entsprechend h1, h2, h3, h4, h5 und h6. Das h steht dabei für 'Heading' (englisch 'Überschrift')

  5. Hyperlinks

    Das Interessanteste an HTML-Dokumenten ist, neben den spannenden Inhalten, sie mit Verweisen auf andere Dokumente mit spannenden Inhalten anzureichern.

    Hyperlinks definieren Sie mit dem a Tag. Das a steht dabei für 'Anchor' (englisch für 'Anker'). Übernehmen Sie den folgenden Absatz in Ihr Dokument. 

    <p>
Diese Test-Seite ist das Ergebnis eines
<a
 href='http://www.janott.test/com/index.php/htmltutorial'
 title='Zum HTML Mini-Tutorium von Janott.com...'
>
HTML Mini-Tutoriums
</a>.
</p>

    Sie sehen, daß die Definition des Hyperlinks aus den folgenden Teilen besteht:

    1. <a
    2. ein Leerzeichen
    3. href=, ein Hochkomma ', die URL des Hyperlink-Zieles, noch ein Hochkomma '
    4. ein Leerzeichen
    5. title=, ein Hochkomma ', eine kurze Beschreibung des Hyperlink-Zieles, noch ein Hochkomma '
    6. >
    7. der Text für den Hyperlink, der auf der Seite erscheinen soll.
    8. </a>

    Ingesamt also: <a href='...' title='...'>...</a>

    Geben Sie die URL des Hyperlink-Zieles komplett an, also inklusive http://, und achten Sie auf die zeichengenaue Schreibweise. Groß-/Kleinschreibung wird bei URLs unterschieden.

    Wenn Sie auf ein anderes Dokument verweisen möchten, das im selben Verzeichnis/Ordner liegt wie Ihr Dokument, brauchen Sie lediglich den Dateinamen des Ziel-Dokuments anzugeben, ohne Verzeichnispfad.

    Die Kurzbeschreibung, die Sie als title Attribut festlegen, sollte dem Leser in knappen Worten erklären, was er von der verlinkten Seite zu erwarten hat. Viele Browser zeigen die Kurzbeschreibung als sogenannten Tooltip an, wenn der Betrachter seinen Mauszeiger über dem Link ruhen läßt.

    Hyperlinks können beliebige Textstellen innerhalb von Absätzen oder Überschriften sein. Wählen Sie für Ihre Hyperlinks aussagestarke Textstellen. HTML Mini-Tutorium sagt dem Leser auf den ersten Blick, was er von dem Link zu erwarten hat. Vermeiden Sie hier klicken! Erstens muß der Leser den Text rundherum lesen, bevor er weiß, worum es geht. Viele Leser suchen die Seite nur nach auffälligen Stellen ab (wie Überschriften, Aufzählungslisten und Hyperlinks). Zweitens gibt es auch Browser, die nicht mit der Maus bedient werden, sondern zum Beispiel mit einer Spracheingabe. Die Benutzer solcher Browser 'klicken' nicht.

    Für fremde Web-Seiten, auf die Sie von Ihrer Seite aus verlinken, tragen Sie übrigens rechtlich eine Mitverantwortung. Sie sollten also prüfen, daß Sie nicht auf rechtlich bedenkliche Seiten verweisen. Ihrer Mitverantwortung können Sie sich auch nicht dadurch entziehen, daß Sie Ihre Verantwortung explizit von sich weisen.

  6. Aufzählungslisten

    Mit Aufzählungslisten können Sie unter anderem...

    • Aufzählungen übersichtlich strukturieren.
    • Glossare schreiben.

    Dafür stehen Ihnen die folgenden Listentypen zur Verfügung:

    1. Nicht-nummerierte Listen
    2. Nummerierte Listen
    3. Definitionslisten

    Die Listen definieren Sie folgendermaßen:

    Nicht-nummerierte Listen

    Eine Gruppe von li Elementen wird in ein ul Element eingeschlossen. (ul steht dabei für 'unordered list', li steht für 'list item', also 'Listenelement'.) 

    <ul>
<li>
Erstes Element einer nicht-nummerierten Liste
</li>
<li>
Zweites Element einer nicht-nummerierten Liste
</li>
</ul>
    Nummerierte Listen

    Eine Gruppe von li Elementen wird in ein ol Element eingeschlossen. (ol steht dabei für 'ordered list'.) 

    <ol>
<li>
Erstes Element einer nummerierten Liste
</li>
<li>
Zweites Element einer nummerierten Liste
</li>
</ol>
    Definitionslisten

    In ein dl Element werden Paare von dt und dd Elementen eingeschlossen. (dl steht für 'definition list', dt für 'definition list term' und dd für 'definition list defintion', also etwa 'Definitionsliste', 'Begriff' und 'Erklärung'.) 

    <dl>
<dt>Erster Begriff in einer Definitionsliste</dt>
<dd>
Erklärung des ersten Begriffs der Definitionsliste.
</dd>
<dt>Zweiter Begriff in einer Definitionsliste</dt>
<dd>
Erklärung des zweiten Begriffs der Definitionsliste.
</dd>
</dl>

    Innerhalb der li und dd Tags können Sie wiederum beliebige der Strukturen benutzen, die zuvor erklärt wurden. Also etwa mehrere Absätze bei einer Begriffserklärung in einer Definitionsliste oder Überschriften und Absätze in einer nummerierten Liste, um nummerierte Überschriften zu erhalten.

  7. Trennbalken

    Wenn Sie eine klare optische Trennung zwischen verschiedenen Teilen Ihrer Seite benötigen, können Sie dies mit dem hr Tag erreichen.

    Fügen Sie folgenden Code zum Beispiel vor einer der Überschriften ein. 

    <hr />

    An der entsprechenden Stelle sollte der Browser einen Querbalken in das Dokument einfügen.

  8. Bilder

    ++Hier sehen Sie ein Testbild++

    HTML bietet die Möglichkeit, spezielle Verweise auf Bilddateien in das Dokument einzufügen. Grafische Browser interpretieren solche speziellen Verweise nicht als Hyperlinks, sondern betten die Bilder direkt in die Präsentation der Seite ein.

    Bilder fügen Sie mit dem img Tag in das Dokument ein. Das img steht dabei für 'Image' (englisch für 'Abbildung'). Übernehmen Sie den folgenden Absatz in Ihr Dokument. 

    <p>
In diesem Absatz erscheint ein Bild:
<img
 src='http://www.janott.test/com/image.php/htmltutorial_testimage.png'
 alt='Testbild'
 />
</p>

    Sie sehen, daß die Einbettung des Bildes aus den folgenden Teilen besteht:

    1. <img
    2. ein Leerzeichen
    3. src=, ein Hochkomma ', die URL der Bilddatei, noch ein Hochkomma '
    4. ein Leerzeichen
    5. alt=, ein Hochkomma ', eine kurze Beschreibung des Bildes, noch ein Hochkomma '
    6. ein Leerzeichen
    7. />

    Ingesamt also: <img src='...' alt='...' />

    Geben Sie die URL des Bildes im src Attribut komplett an, also inklusive http://, und achten Sie auf die zeichengenaue Schreibweise. Groß-/Kleinschreibung wird bei URLs unterschieden. Das src steht dabei für 'Source' (englisch für 'Quelle'). Die am weitesten verbreiteten Bilddatei-Formate sind JPEG/JPG, PNG und GIF.

    Wenn Sie auf eine Bilddatei verweisen möchten, die im selben Verzeichnis/Ordner liegt wie Ihr Dokument, brauchen Sie lediglich den Dateinamen des Bildes anzugeben, ohne Verzeichnispfad.

    Bilder können Sie überall dort benutzen, wo Sie auch Text schreiben können. Also beispielsweise in Absätzen, oder Aufzählungslisten.

    Die Kurzbeschreibung, die Sie als alt Attribut festlegen, wird dem Leser anstelle des Bildes angezeigt, falls der Browser keine Bilder anzeigen kann oder der Leser die Anzeige von Bildern ausgeschaltet hat. Sie wird auch von Browsern mit Sprachausgabe vorgelesen. Das alt Attribut ist also nicht als Ergänzung zu einem eingebetteten Bild zu verstehen. Es handelt sich um eine alternative Textform der Bildinformation. Sie sollten dem Leser deshalb in knappen Worten erklären, was auf dem Bild zu sehen ist.

    Beachten Sie, daß Sie nur Bilder benutzen, für die Sie die Nutzungsrechte haben. Das sind in erster Linie Ihre selbstgemachten Bilder. Falls Sie nicht wissen, ob Sie Nutzungsrechte an einem Bild haben, so ist das wahrscheinlich nicht der Fall. Sie dürfen auch keine Bilder einbetten, die Sie auf fremden Web-Seiten finden.

    'Ein Bild sagt mehr als tausend Worte.' So sagte angeblich Konfuzius. Gemeint ist, daß eine Grafik (zum Beispiel ein Balkendiagramm) Informationen kompakt vermitteln kann. Ein Foto kann eine Landschaft beschreiben, ohne daß Sie nach Worten ringen müssen.

    Mit Blick auf die notwendige Übertragungszeit für eine Bilddatei, sollten Sie allerdings darauf achten, ob Ihr Bild tatsächlich mehr als tausend Worte sagt. Bei einer durchschnittlichen Wortlänge von sechs Buchstaben plus jeweils einem Leerzeichen wären das 7.000 Zeichen - oder etwa sieben Kilobyte. Wenn Ihre Bilddatei also beispielsweise 20 Kilobyte umfaßt, so sollte das Bild bereits mehr als 2800 Worte sagen.

    Verzichten Sie daher auf Bilder, die nur Text darstellen, um beispielsweise hübsche Überschriften zu zeigen. 20 Byte für eine Überschrift in Textform sind gegen mindestens 1.000 Byte für dieselbe Überschrift als Bilddatei abzuwägen. Eine 50 mal längere Übertragungszeit. Hinzu kommt, daß Suchmaschinen beim Indexieren von Web-Seiten Stichworte in h Tags höher bewerten als solche in alt Attributen von img Tags. Falls Sie Ihr Dokument hübsch gestalten möchten, sollten Sie sich mit Cascading Style Sheets (CSS) auseinandersetzen.

    Sie können ein eingebettetes Bild auch zum Hyperlink machen, indem Sie das img Tag mit einem a Tag umschließen. Auf diese Weise können Sie eine kleine Version des eigentlichen Bildes als Hyperlink auf die große Version benutzen. Das kleine Bild nennt man bei solchem Gebrauch 'Thumbnail' (englisch für 'Daumennagel', wegen der Bildgröße). Kopieren Sie den folgenden Absatz in Ihr Dokument. 

    <p>
Das Bild in diesem Absatz ist ein Hyperlink.
<a
 href='http://www.janott.test/com/image.php/htmltutorial_testimage2.png'
 title='Dies ist ein Hyperlink zu einer großen Version (120 KB) des Testbildes...'
>
<img
 src='http://www.janott.test/com/image.php/htmltutorial_testimage.png'
 alt='Testbild Thumbnail'
 />
</a>
</p>

    Wenn Ihr Dokument auf Bilder angewiesen ist, können Sie mit solchen Thumbnails die Ladezeit des Dokumentes relativ kurz halten. Der Leser kann die kleinen Bilder betrachten und bei Interesse die großen Versionen auswählen. Am besten weisen Sie Ihre Leser darauf hin, wie groß (in Kilobyte) die große Version des Bildes ist. Die Leser können dann abschätzen, wie lang die Übertragungszeit sein wird.

  9. Tabellen

    Für die Strukturierung tabellarischer Informationen wie Adressenlisten oder Stundenpläne bietet HTML Ihnen alles, was Sie benötigen.

    Fügen Sie folgenden Code in Ihr Dokument ein (nicht innerhalb eines Absatzes). 

    <table border='1'>
<caption>Mitarbeiterliste</caption>
<tr>
<th>Name</th>
<th>Raumnummer</th>
<th>Telefonnummer</th>
</tr>
<tr>
<td>Mayer</td>
<td>E-03</td>
<td>1234</td>
</tr>
<tr>
<td>Müller</td>
<td>1-12</td>
<td>2345</td>
</tr>
<tr>
<td>Schröder</td>
<td>2-34</td>
<td>3456</td>
</tr>
<tr>
<td>Schulze</td>
<td>1-13</td>
<td>2346</td>
</tr>
</table>

    Mit <table border='1'>...</table> legen Sie fest, daß Sie eine Tabelle mit Gitternetzlinien anlegen möchten. Wenn Sie keine Gitternetzlinien wünschen, setzen Sie das Attribut border='0'.

    Das caption Tag der Tabelle definiert eine Kurzbeschreibung der Tabelle oder einen Tabellennamen wie Tabelle 3: Aktienkurse 1993-2003. Das caption Tag können Sie weglassen, wenn Sie es nicht benötigen.

    Innerhalb der Tabelle notieren Sie mit <tr>...</tr> eine Tabellenzeile nach der anderen.

    Die einzelnen Tabellenfelder in jeder Zeile definieren Sie mit <td>...</td> Spalte für Spalte. Achten Sie darauf, daß Sie immer dieselbe Anzahl von Zellen pro Zeile definieren. In der ersten Zeile können Sie statt td die Zellen auch mit <th>...</th> definieren. Diese Zellen werden dann vom Browser als Spaltenüberschriften präsentiert.

    Innerhalb von td Zellen können Sie wiederum Absätze, Überschriften und Aufzählungslisten benutzen, inklusive Hyperlinks und Bild-Einbettungen.

    Auch wenn es reizvoll erscheint, das table Tag ist nicht für Layouts gedacht, sondern für eine tabellarische Strukturierung des Inhalts. table-Layouts machen Ihr Dokument unübersichtlich für Benutzer von Sprachausgabe-Browsern. Falls Sie Ihrem Dokument ein Layout verpassen möchten, sollten Sie sich mit Cascading Style Sheets (CSS) auseinandersetzen. Beachten Sie aber, daß Layouts nur von modernen grafischen Browsern (mehr oder weniger korrekt) umgesetzt werden. Das Dokument sollte also auch ohne Layout lesbar sein.

Möchten Sie sich oder Ihre Mitarbeiter in HTML/CSS professionell schulen lassen? Sprechen Sie mich an.

Website-Infos

.
..
# # # #