Einführung in HTML

1 | 0 Kommentare | 3766 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!

Inhaltsverzeichnis

Einleitung
Beispielseite
Grundlegender Aufbau
Strukturierung mit Block-Level-Elementen
Auszeichnung mit Inline-Elementen
- Das wohl wichtigste Element: Der Link
Der DIV-Tag

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:

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:

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.

Dieses Beispiel ausprobieren

HTML

<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

Dieses Beispiel ausprobieren

HTML

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

Dieses Beispiel ausprobieren

HTML

<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 wohl wichtigste Element: Der Link

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.

Dieses Beispiel ausprobieren

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