HTML-Code

Aus Bloghandbuch

Wechseln zu: Navigation, Suche

Bei HTML (Hypertext Markup Language) handelt es sich um eine sogenannte Auszeichnungssprache. Mit ihr werden Webseiten gestaltet und sie bildet somit die Grundlage für das World Wide Web.

Die erste Version von HTML erschien 1992 und wird seitdem ständig weiterentwickelt und den aktuellen Bedürfnissen im Web angepasst. Zuständig dafür ist das World Wide Web Consortium (Icon Wikipedia De.gifW3C).

Da es sich bei HTML um eine Auszeichnungssprache handelt, spricht man in dem Zusammenhang auch nicht von programmieren, sondern von HTML-Code schreiben.

Kennzeichnend für HTML-Code ist, dass die einzelnen Elemente mit einem Starttag <> und einem Endtag </> markiert sind.


Beispiele

Damit Du etwas vertrauter mit HTML und der Schreibweise wirst, hier ein paar einfache HTML-Beispiele:

einen Link erzeugen

Ein Link in HTML sieht folgendermaßen aus

<a href="http://bloghandbuch.gpa-djp.at/">Link zum Bloghandbuch</a>

Du siehst hier drei wesentliche Elemente:

  • den Starttag für einen Link <a href=""> (in den Anführungszeichen steht die URL);
  • die Linkbeschreibung zwischen den spitzen Klammern >Link zum Bloghandbuch< die Du selber wählen kannst, und
  • den Endtag </a>.

Start- und Endtag lassen sich sehr leicht an dem (nicht) vorhandenen Schrägstrich / in den spitzen Klammern erkennen.

Nach diesem einfachen Schema, werden alle Webseiten im WWW verlinkt.


eine Bilddatei anzeigen

um eine Bilddatei auf einer Webseite anzuzeigen, brauchst du einen anderen HTML-Tag als bei den Links. Der Tag für Bilddateien heißt:

<img src="">

Zwischen die beiden Anführungszeichen kommt die Adresse zum Bild. Das sieht dann beispielsweise so aus:

<img src="http://bloghandbuch.gpa-djp.at/index.php/Bild:Cc_logo.png">

Hier gibt es keinen Endtag, da nur die auf die Bildquelle verwiesen wird, die Dein Browser lädt.

Aber man kann jetzt den HTML-Code von unserem erzeugten Link und unserer Bildquelle kombinieren. Dann erhalten wir eine Bilddatei, die bei anklicken auf eine Webseite verweist. Das sieht dann folgendermaßen aus:

<a href="http://bloghandbuch.gpa-djp.at/"><img src="http://bloghandbuch.gpa-djp.at/index.php/Bild:Cc_logo.png"></a>

HTML-Tags lassen sich also beliebig ineinander verschachteln. Wobei nicht jede Verschachtelung sinnvoll ist und ein brauchbares Ergebnis liefert. Aber grundsätzlich möglich ist es.


einen Absatz erzeugen

Neben Links und Bildern, lässt sich natürlich auch Text in HTML ausrichten. Um einen Absatz zu erzeugen gibt es
<p></p>

Zwischen die spitzen Klammern kommt dann einfach der Text des Absatzes.

Dies nur als kurzer Einstieg, um mit HTML etwas vertrauter zu werden. Es gibt natürlich noch unzählige und komplexere Möglichkeiten mit HTML Webseiten zu erstellen. Für weitere Informationen sei der Icon Wikipedia De.gifWikipedia Artikel zu HTML empfohlen. Wenn du daran Interesse hast, schau dir bei der Gelegenheit auch die Weblinks am Ende des Wikipedia Artikels an. Dort gibt es ein paar Links zu weiteren Seiten die HTML ausführlichst erklären.


grundsätzlicher Aufbau einer Webseite

Das Grundgerüst jeder Webseite besteht aus HTML-Code und ist vom Schema her überall gleich

<html>
  <head>
    <title>Titel der Webseite</title>
    <!-- weitere Kopfinformationen -->
    <!-- Kommentare werden im Browser nicht angezeigt. -->
  </head>
  <body>
    <p>Inhalt der Webseite</p>
  </body>
</html>

Der HTML-Tag sagt dem Browser, dass es sich um ein HTML Dokument handelt, damit dieser weiß, wie er sich verhalten soll.

Im <head></head> Bereich wird mit <title></title> der Titel Webseite bekannt gegeben. Es können weitere Sachen wie Kommentare und Metainformationen eingetragen werden. Das ist aber vor Allem für Webentwickler interessant.

Im <body></body> Bereich befindet sich alles was Du dann auch letztendlich in Deinem Browser siehst. Hier werden alle Texte, Bilder, Formatierungen, Links etc. gespeichert. Dies ist also quasi das Kernstück einer Webseite.


Wenn das jetzt alles etwas verwirrend für Dich war, keine Sorge: in der Regel sollte es komplett reichen, wenn du weißt wie ein Link in HTML ausschaut und wie Du diesen bearbeiten kannst.

Wenn Du dich weiter über HTML informieren willst, sei dir das SELFHTML Projekt empfohlen. Hier werden alle möglichen Sachen, die mit HTML zu tun haben erklärt.