HTML Tutorials


Tabellen

Wir erstellen eine Tabelle mit <table> und legen die Formatierung fest. <tr> erstellt uns eine Tabellenzeile. Das <th> Element steht für die Kopfzeile in einer Tabelle, die wird Standartmäßig Fett geschrieben wird. Jedes weitere Element welches wir in <tr> schreiben, erzeugt eine neue Spalte. Um eine neue Zeile zu erhalten müssen wir die Aktuelle Tabellenzeile mit einem </tr> schließen und ein neue Zeile mit <tr> erzeugen, worin wir eine normale Datenzelle mit einem <td> einfügen.
        <table width="200" border="1">
        <tr>
            <th>Zeile1.1</th>
            <th>Zeile1.2</th>
        </tr>
        <tr>
            <td>Zeile2.1</td>
            <td>Zeile2.2</td>
        </tr>
        </table>
        

Unterschied zwischen id und class

Der Unterschied ist eigentlich schnell erklärt. Das id Attribut darf man pro Dokument (auf index.html nur einmal) nur einmal verwenden, wo hingegen class so oft benutzt werden kann, wie man will. Da die Browser sehr tolerant bei Fehlern sind, ist es auch nicht schlimm wenn man sich nicht daran hält. Aber besser ist es von Anfang an richtig zu machen.
        <div id="Main">
        <div class="link"> </div>
        </div>
        

Absatz

Mit dem p Tag hat man die Möglichkeit Absätze zu setzen. Durch das Hinzufügen von CSS kann man diese auch noch formatieren.
        <p class="p_tag"> Text </p>
        

Trennlinien

Mit <hr> erstellen wir eine Trennlinie. Mit dem Class Attribut können wir die Linie in CSS beliebig gestalten.
        <hr class="linie">
        

Bilder Verlinken

Um ein Bild zu verlinken müsst ihr anstelle des Seiten Namen's ein Bild einfügen. <img src="http://www.bild.jpg" /> Wenn das Bild keinen lästigen Rahmen haben soll setzt ihr einfach border="0" ein und nun fehlt nur noch der alt Text der beim Fehler der Grafik bzw. beim überfahren des Links mit der Maus erscheinen soll.
        <a href="http://www.seite.html" 
        target="_blank" >
        <img src="http://www.bild.jpg" 
        border="0" alt="Bild" /> </a>
        

Hyperlinks

Das ist ein einfacher Link, beim Klicken auf diesen öffnet sich die Seite http://www.seite.html will man diese Seite in einem extra Fenster oder Tap öffnen muss man den Code mit dem Befehl target="_blank" versehen.
        <a href="http://www.seite.html" 
        target="_blank" >Seiten Name</a>
        

Das Grundgerüst

Das ist das HTML Grundgerüst,ihr könnt den Code einfach Kopieren und in eurem Text Editor als index.html abspeichern. Mit den Attributen für <b> Fett </b> und <i> Kursiv </i> könnt ihr den Text zwischen <body> </body> verändern.
        <html>
        <head>
        <title>Seiten Name</title>
        <head>

        <body>
        Der Main Bereich
        </body>
        </html>