Erste Website

Die erste Website erstellen

  1. Erstelle zum Speichern der Übungsdatei einen neuen Ordner auf deinem Computer.
  2. Starte den Texteditor und erstelle eine komplett leere Datei.
  3. Speichere die noch leere Datei im Übungsordner unter dem Namen erstewebsite.html - ohne Leerstellen und kleingeschrieben.
  4. Schreibe im Editor das folgende HTML. (Natürlich kann man es einfach kopieren, ich empfehle abschreiben für den Lerneffekt.) Die spitzen Klammern erzeugst Du mit den Tasten für »kleiner als« und »größer als« links unten auf der Tastatur:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SfG - Webtechnik - 1. Lektion</title>
</head>
<body>
<h1>Meine erste Webseite</h1>
<p>Hallo Welt</p>
</body>
</html>

5. Speichere die Datei, und betrachte sie in einem Browser.

Im Browser sieht diese Datei wie folgendes Bild aus. Nicht hübsch, aber HTML.

Screenshot erste Webseite

Mache dir über die genaue Bedeutung des Quelltextes (noch) nicht zu viele Gedanken. Alles zu seiner Zeit. Momentan sind nur folgende Beobachtungen wichtig:

  • Der Text zwischen <title> und </title> erscheint unter anderem oben im Browser-Tab.
  • Alles zwischen <body> und </body> erscheint im sichtbaren Bereich des Browserfensters. Zwischen <body> und </body> gibt es zwei HTML-Elemente. Das erste trägt den Namen h1 (ha-eins, kurz für heading1) und ist eine Überschrift, das zweite heißt p (kurz für paragraph) und ist ein einfacher Textabsatz.