Einführung in HTML

Exzellenter Artikel
1 | 9886 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Einführung in HTML" mit Ihrem Wissen!

Anzeige Hier werben

Einleitung

HTML (Hypertext Markup Language) zählt zu den Auszeichnungs- oder Markupsprachen. Das bedeutet, mit ihr können so genannte Webseiten "gesetzt" werden.

Die Sprache HTML dient nicht zur Gestaltung von Webseiten. HTML dient nur dazu, Inhalte aufzubereiten und zu strukturieren. Der Rest geschieht anschließend mit CSS. Hier ein Auszug aus dem Buch "Little Boxes" von Peter Müller:

HTML ist der Maurer, der das Haus und die Zimmeraufteilung anlegt. Mit HTML werden die rechteckigen Kästchen erstellt und mit Inhalt gefüllt.

CSS ist der Dekorateur, der Haus und Zimmer gestaltet. Mit CSS werden Kästchen und Inhalt gestaltet und positioniert.

Mit HTML wird also auch nicht das Layout erstellt (Layouttabellen).

HTML basiert vom Anfang bis zum Ende auf so genannten Tags. Tags sind recht einfach zu verstehen. Ein Tag hat die folgende Struktur:

Bild zu Einführung in HTML

Jedes Mal, wenn ein Tag geöffnet wird (<tag>), wird im Browser ein Rechteck erstellt. Dieses Rechteck endet, sobald man des Tag wieder schließt (</tag>). Eine Webseite besteht also - aus der Sicht des Browsers - vollkommen aus rechteckigen Kästchen, die dann per CSS positioniert und eingefärbt werden.

Tags, die auch Eigenschaften enthalten, sehen in HTML so aus:

Bild zu Einführung in HTML

Als Beispiel nehmen wir ein Bild. Der Tag für ein Bild heißt <img>. Dieser Tag verlangt Attribute: In diesem Fall, wo das Bild liegt.

 
HTML
1
<img src="images/bild.jpg">

Dieser Tag ist wie sie sehen leer: Solche Tags werden auch "Selbstschließende Tags" genannt.

Von der Theorie in die Praxis...

Beispielseite

Um den Sinn von HTML besser zu verstehen, werfen wir Sie einfach einmal ins kalte Wasser und fangen mit einer kleinen Beispiel-Webseite an. Damit soll ein kleiner Überblick dieser Einführung geboten werden. In dieser Beispielseite führen wir die wichtigsten Elemente einer Seite ein: ihren Titel, Überschriften und Absätze. Gehen Sie einfach einmal auf "Dieses Beispiel ausprobieren" und vergleichen Sie den Quelltext mit der Ausgabe: HTML ist gar nicht so schwer.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
  <head>
    <title>
      Titel, wird im Fenstertitel des Browsers angezeigt
    </title>
  </head>

  <body>
    <h1>
      Überschrift erster Ebene
    </h1>

    <p>
      Absatz. Dieser wird verwendet um generell Text zu beinhalten
    </p>

    <h2>
      Überschrift, Ebene 2
    </h2>

    <p>
      Wieder ein Absatz
    </p>

    <h3>
      Überschrift, Ebene 3
    </h3>

    <p>
      Absatz mit <strong>fettem Text</strong> und <strike>durchgestrichem Text</strike>
    </p>

    <p>
      Hier sieht man einen <a href="http://www.webmasterpro.de">Link zu Webmasterpro.de</a>
    </p>

    <h1>
      Eine Liste
    </h1>

    <ul>
      <li>
        erster Listenpunkt
      </li>

      <li>
        zweiter Listenpunkt
      </li>
    </ul>
  </body>
</html>

Grundlegender Aufbau

Eine HTML-Seite wird zu allererst einmal in <html>-Tags eingeschlossen. Dort finden sich dann zwei Kindelemente:

  • <head> für im Browserfenster nicht direkt sichtbare Zusatzinformationen
  • <body> für den direkt sichtbaren Seiteninhalt
 
HTML
1
2
3
4
5
6
7
8
9
<html>
  <head>
    Alle Information die im Browser nicht angezeigt werden.
  </head>

  <body>
    Sichtbarer Inhalt, der Im Browserfenster erscheint.
  </body>
</html>

Strukturierung mit Block-Level-Elementen

Dann wird der Inhalt einer Seite gegliedert. Dazu stehen verschiedene Element zur Verfügung. In Diesen findet sich dann der eigentliche Textinhalt.

Die wichtigsten Elemente:

  • Überschriften verschiedener Ebenen (<h1>,<h2>,<h3>, ...)
  • Absätze (<p>)
  • Listen (ungeordnet <ul>, durchnummeriert <ol>)
  • Tabellen (<table>)
  • ...

Diese Elemente nennt man Block-Level Elemente. Das bedeutet, dass sie am Anfang und am Ende einen Zeilenumbruch erzeugen - also einen Block bilden.

Bild dazu, Klärung der Schreibweise

Auszeichnung mit Inline-Elementen

Im Gegensatz dazu gibt es noch Inline-Elemente. Diese können nur innerhalb von Block-Level Elementen benutzt werden. Sie dienen der Auszeichnung von Textteilen und Wörtern (TODO: hier kann man auch was Schlaueres oder Korrekteres schreiben).

Wichtige Elemente hierbei sind:

  • Links (<a>)
  • Fett (<strong>)
  • Kursiv (<em>)
  • Zeilenumbrüche (<br>)
  • und viele andere wie Zitat, Abkürzung, Entfernung...

Ein Beispiel zur Benutzung von Inline-Elementen:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<html>
  <body>
    <p>
      In diesem Absatz demonstrieren wir einige Inline-Tags.<br/>
      <strong>Das hier ist fetter Text</strong><br/>
      <strong>Das hier ist hervorgehobener Text</strong><br/>
      Zie Zeilen werden durch Zeilenumbrüche getrennt<br/>
    </p>
  </body>
</html>

Das allerwichtigste HTML-Element ist wohl der Link (<a>). Er ist die grundlegende Idee des WWW. Damit kann eine Textstelle auf eine andere Webseite verankert (verlinkt) werden.

 
HTML
1
<a href="www.google.de">Hier klicken</a>

Der Link-Tag verlangt ebenfalls nach einem Attribut. Hier href.

Der DIV-Tag

Der div-Tag ist ein Container-Tag und wird benutzt, um Elemente wie z. B. Text in einem bestimmten Feld zu sammeln, um so geschlossen handeln zu können. Man kann div zwar mit HTML formatieren, jedoch der Weg über CSS einfacher und semantisch korrekt.

Hier ein Beispiel:

 
HTML
1
2
3
<div id="container">
    Hallo!
</div>

HTML für CSS bereit machen: SPAN, ID, class


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 10 Personen an der Seite "Einführung in HTML" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Einführung in HTML" hier bearbeiten.