HTML

Hier gibt es ein paar HTML Basics.

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

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.

Unterschied zwischen id und class
<div id="main">
    <div class="link"></div>
    <div class="link"></div>
</div>

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.

Trennlinien
<hr class="linie">

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

Bild verlinken
<a href="http://www.seite.html">
    <img src="http://www.bild.jpg" alt="Bild">
</a>

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.

Das Grundgerüst
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Titel</title>
    </head>
    <body>
        <p>
    	    Lorem Ipsum <strong>Fett</strong><br>
    	    <em>Italic</em><br>
    	    <a href="meine_url.de">Link</a>
    	</p>

    </body>
</html>

Das Beispiel zeigt ein HTML5 konformes Grundgerüst. Das Grundgerüst besteht immer aus diesen Tags html, head, title und body.

Das Tag html umgibt das gesamte Dokument.

Im head werden alle Informationen angegeben, die für den Anzeige des Inhalts notwendig sind. Dies können unter anderem Kodierung oder styles der Webseite sein.

Der title wird zum Anzeigen an vielen Stellen verwendet. Das sind zum Beispiel der Tab oder als Treffer bei Suchmaschinen.

Im body wird der eigentliche Inhalt eingetragen der später auch im Browser zu sehen ist. In dem Beispiel habe ich einen einfachen Text eingetragen, diesen habe ich einmal Fett und einmal Italic Formatiert. Dahinter folgt ein einfacher Link.