Paul Gévaudan

 

SchnellHTML – HTML-Grundlagen auf die Schnelle

 

1. Einleitung
2. Grundlagen
3. Einfache Layout-Befehle
4. Listen
5. Anker (anchor) und Hyperlinks
6. Einbinden von Bilddateien
7. Tabellen

Dieser Kurs ist für Leute gedacht, die schon mit einem Computer gearbeitet haben, aber ansonsten keine Ahnung von html haben. Er soll dazu dienen, sich die relevanten Grundkenntnisse in einem Nachmittag anzueignen. Wer mehr über html wissen will, sei auf das hervorragende online-Handbuch SELFHTML von Stefan Münz verwiesen.

1. Einleitung

HTML steht für Hypertext Mark-up Language. Es handelt sich um die Auszeichnungssprache von Internetdokumenten.

1.1. Was ist eine HTML-Datei

  • Format für Internet-Dokumente
  • HTML-Dateien sind Text-Dateien (unter Windows meistens Dateien mit *.txt-Endung) mit der Endung ".html" oder ".htm"

1.2. Wie man eine html-Datei erstellt und betrachtet

  • Texteditor zum erstellen (Achtung: Word ist kein Texteditor! Es geht um das Text-Format)
  • Browser zum anschauen (aus Sicherheitsgründen muss von Microsoft Internet Explorer abgeraten werden, besser Netscape 7 oder Mozilla 1.3)

1.3. Wo man sich informieren kann

  • Stefan Münz, SELFHTML, hervorragendes online-Handbuch.

 

2. Grundlagen

2.1. Grundstruktur des html-Befehls

  • html ist eine sogenannte Auszeichnungssprache (mark-up language),
    bei der ein bestimmter Textbereich durch einen Anfang- und einen Endbefehl
    markiert wird und damit seine Eigenschaften definiert werden.

    <[Anfangsbefehl]> Inhalt </[Endbefehl]>

2.2. Grundstruktur einer html-Datei

  • Auszeichnung (Tagging) des gesamten Dokuments:

    <html>
    [Dokument]
    </html>

  • Struktur des Dokuments:

    <html>

    <head>
    [Metainformationen]
    </head>

    <body>
    [Dokumentinhalt]
    </body>

    </html>

 

3. Einfache Layout-Befehle

3.1. Textformate

  • Absatz (paragraph)

    <p>Dies ist ein Absatz</p>

  • Überschriftformate (header, spezielle Art von Absatz)

    <h[1...7]>Dies ist eine h4-Überschrift</h[1...7]>

  • kursiv (italic)

    <i>Dieser Text ist kursiv</i>

  • fett (bold)

    <b>Dieser Text ist fett</b>

  • unterstrichen (underlined)

    <u>Dieser Text ist unterstrichen</u>

 

3.2. Textelemente ohne Endbefehl

  • Zeilenumbruch (break)

    Dies ist ein <br>
    Zeilenumbruch

  • waagrechte Linie (spezielle Art von Absatz)

    <hr> ergibt

  • waagrechte Linie mit Attributen ("size" steht für Dicke, "width" für Länge)

    <hr size=1 width=200> (Dicke u. Länge in Pixel) ergibt

    <hr size=1 width=50%> (Länge in %) ergibt

    • "Default-Werte" (= Standardeinstellungen, wenn man keine Attribute angibt) von <hr> sind size=2 und width=100%, außerdem ist <hr> immer zentriert.
    • Bei neueren Browsern verhindert das Attribut noshade, dass die waagrechte Linie graviert erscheint.

 

4. Listen

4.1. Ungeordnete Liste

  • Attribut: type
  • Mögliche Werte: [circle], [square], [disc]
  • Default-Wert: disc

    Quelltext-Ansicht Browser-Ansicht

    <ul>
    <li>Befehl</li>
    <li>Attribut</li>
    <li>Wert</li>
    </ul>
    • Befehl
    • Attribut
    • Wert

    <ul type="disc">
    <li>Befehl</li>
    <li>Attribut</li>
    <li>Wert</li>
    </ul>
    • Befehl
    • Attribut
    • Wert

    <ul type="circle">
    <li>Befehl</li>
    <li>Attribut</li>
    <li>Wert</li>
    </ul>
    • Befehl
    • Attribut
    • Wert

    <ul type="square">
    <li>Befehl</li>
    <li>Attribut</li>
    <li>Wert</li>
    </ul>
    • Befehl
    • Attribut
    • Wert

 

4.2. Geordnete Liste

  • Attribute: type, start
  • Mögliche Werte: type = [1], [I], [i], [A], [a], start = [ganze Zahl]
  • Default-Werte: start=1, type=1

    Quelltext-Ansicht Browser-Ansicht

    <ol>
    <li>Befehl</li>
    <li>Attribut</li>
    <li>Wert</li>
    </ol>
    1. Befehl
    2. Attribut
    3. Wert

    <ol start="5" type="1">
    <li>Befehl</li>
    <li>Attribut</li>
    <li>Wert</li>
    </ol>
    1. Befehl
    2. Attribut
    3. Wert

    <ol start="13" type="I">
    <li>Befehl</li>
    <li>Attribut</li>
    <li>Wert</li>
    </ol>
    1. Befehl
    2. Attribut
    3. Wert

    <ol start="19" type="A">
    <li>Befehl</li>
    <li>Attribut</li>
    <li>Wert</li>
    </ol>
    1. Befehl
    2. Attribut
    3. Wert

 

4.3. Definitionsliste

  • Attribut: compact

    Quelltext-Ansicht Browser-Ansicht
    <dl>
    <dt>Stichwort</dt> <dd>Definition</dd>
    </dl>
    Stichwort
    Definition
    <dl compact>
    <dt>Stichwort</dt> <dd>Definition</dd>
    </dl>
    Stichwort
    Definition

 

5. Anker (anchor) und Hyperlinks
  • Grundschema:

    <a [Attribute]> . . . </a>

5.1. Hyperreferenz (href)

  • Beispiel:

    <a href="[Dokumentname.htm]">[anklickbarer Text]</a>

  • Absoluter Verweis (auch ftp-Adressen):

    Quelltext-Ansicht <a href="http://www.teamone.de/selfhtml/selfhtml.htm">selfhtml</a>
    Browser-Ansicht selfhtml

  • Relativer Verweis (Dokument wird im Verzeichnis des bisher aufgerufenen Dokuments gesucht):

    Quelltext-Ansicht <a href="HTML-Kurs.htm">HTML-Kurs.htm</a>
    Browser-Ansicht HTML-Kurs.htm

  • Relativer Verweis (Dokument wird im übergeordneten Verzeichnis gesucht):

    Quelltext-Ansicht <a href="../HTML-Kurs.htm">HTML-Kurs.htm</a>
    Browser-Ansicht HTML-Kurs.htm

  • Verweis auf E-Mail-Adresse:

    Quelltext-Ansicht <a href="mailto:paul.gevaudan@uni-tuebingen.de">Paul Gévaudan</a>
    Browser-Ansicht Paul Gévaudan

 

5.2. Pagelink, Anker und Ankername

  • Verweis:

    <a href="#[Ankername]"
    bzw.
    href="[Dokumentname]#[Ankername]"> . . . </a>

  • Ziel:

          <a name="[Ankername]"> (kein Endtag)

 

6. Einbinden von Bilddateien
  • Beispiel:  <img src="biceps.gif">
    Hier wird das Bild in Originalgröße (100 X 100 pixel) dargestellt

  • Attribunte width, height, border und alt.
    Beispiel:  <img src="biceps.gif" width="50" height="50" border="2" alt="ZWEIKOPF">

    • ZWEIKOPF

  • Verlinktes Bild
     <a href="bicepts.jpg"><img src="biceps.gif" border="0" alt="Link"></a>

    • Link

 

7. Tabellen
  • Grundschema
    Tabelle: <table> ... </table>
    Zeile: <tr> ... </tr>
    Spalte: <td> ... </td>

Quelltext-Ansicht Browser-Ansicht
<table width="100%" border="1">
<tr>
<td>Erster Quadrant</td>
<td>Zweiter Quadrant</td>
</tr>
<tr>
<td>Dritter Quadrant</td>
<td>Vierter Quadrant</td>
</tr>
</table>
Erster Quadrant Zweiter Quadrant
Dritter Quadrant Vierter Quadrant

  • Tabellen dienen nicht nur der tabellarischen Darstellung, sondern stellen auch ein einfaches Instrument zur der Positionierung von Elementen dar.

Quelltext-Ansicht Browser-Ansicht
<table width="100%" border="0">
<tr>
 <td>Erster Quadrant</td>
<td><img src="biceps.gif" width="100" height="100" border="0"></td>
</tr>
<tr>
<td><img src="biceps.gif" width="100" height="100" border="0"></td>
<td>Vierter Quadrant</td>
</tr>
</table>
Erster Quadrant
Vierter Quadrant