HTML-Grundlagen

1. Einleitung

1.1. Was ist eine HTML-Datei

  • HTML: Hypertext Mark-up Language
  • Format für Internet-Dokumente
  • HTML-Dateien sind ASCII-Dateien (d.h. z.B. *.txt) 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 ASCII-Format)
  • Browser zum anschauen (aus Sicherheitsgründen muss von Microsoft Internet Explorer abgeraten werden)

1.3. Wo man sich informieren kann

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

 

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. 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.

 

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

 

4. Anker (anchor) und Hyperlinks

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

4.1. Hyperreferenz (href)

  • Absoluter Verweis: z.B. href="http://www.teamone.de/selfhtml/selfhtml.htm" (auch ftp-Adressen)
  • Relativer Verweis: z.B. href="HTML-Kurs.htm" (Dokument wird im Verzeichnis des bisher aufgerufenen Dokuments gesucht)
  • Relativer Verweis: z.B. href="../HTML-Kurs.htm" (Dokument wird im übergeordneten Verzeichnis gesucht)
  • Verweis auf E-Mail-Adresse: z.B. href="mailto:paul.gevaudan@uni-tuebingen.de"

4.2. Pagelink, Anker und Ankername

  • Verweis: href="#[Ankername]" bzw. href="[Dokumentname]#[Ankername]"
  • Ziel:       <a name="[Ankername]"> (kein Endtag)

 

5. Einbinden von Bilddateien

 

Tabellen