Aufbau von Internet-Seiten

Internetseiten sind in der HyperText Markup Language (HTML) geschrieben. Hypertext bedeutet, dass Texte untereinander mit Links verbunden sind, Markup bedeutet, dass die Elemente die dargestellt werden sollen in bestimmter Weise markiert sind:

<!doctype html>
<html>
<head>
 <title>Meine erste Seite</title>  
</head> <body> 
  <h1>Willkommen auf meiner Seite</h1>
<p>Das ist mein erste Versuch, eine Seite zu erstellen.</p>
<p>Ich bin Schüler am <a href="http://www.c-a-g.de">Clemens-August-Gymnasium</a> und bin in Klasse 10.</p>

</body>
</html>

Das HTML-Dokument besteht aus zwei Bereichen: dem <head>, der Informationen zum Dokument enthält, und dem <body>, in dem der sichtbare Teil der Seite steht.

Das Markup erfolgt mit sogenannten Tags (englisch für Etikett), die an den spitzen Klammern (<...>) zu erkennen sind. Ein Tag schließt den zu beschreibenden Text mit einem Anfangs- und einem End-Tag ein: <p>text</p> Das End-Tag gleicht dem Anfangs-Tag, enthält aber ein vorangestellten Schrägstrich (englisch backslash). In diesem Fall steht das <p> für paragraph (englisch für Absatz), <h1> steht für heading 1, also Überschrift in Größe 1, die größte Überschrift. Entsprechend gibt es Untergliederungen <h2><h3><h4>, die dann entsprechen kleiner sind.

Auch der Link <a href="http://www.c-a-g.de">Clemens-August-Gymnasium</a> funktioniert nach dem gleichen Schema: der zu verlinkende Text wird in ein Tag eingeschlossen. Das Tag erhält zusätzlich ein Attribut href, dem die Zieladresse zugewiesen wird.

Neben den genannten Tags gibt es noch eine Reihe von weiteren Tags zur Markierung (und damit elementaren Gestaltung) von Texten:

  • <i>kursiv</i> kursiver Text
  • <b>fett</b> fett-gedruckter Text
  • <u>unterstrichen</u> unterstrichener Text
  • Bilder auf Internet-Seiten einbinden

 Etwas komplexer sind Listen oder Aufzähnlungen:

<ul>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
<li>dritter Eintrag</li>
</ul>

Dabei wird die gesamte Auflistung vom <ul>-Tag (unordered list) umschlossen und die einzelnen Listeneinträge mit <li> (list item) gekennzeichnet. Die ungeordnete Liste lässt sich schnell durch das Ersetzen des Listen-Tags durch <ol> (ordered list) in eine geordnete Liste umwandeln. Auch hier gilt, jedes Tag hat einen Anfang und ein Ende.

Seiten lassen sich mit Stylesheets (CSS) ansprechend gestalten.