Das Grundgerüst einer HTML-Datei - Unsere erste Webseite

Das folgende Codeschnipsel stellt das minimale Grundgerüst einer HTML-Seite dar:

<html>
  <head>
    <title>Hier steht der Titel der Seite</title>
  </head>
  <body>
    Hier steht der Inhalt der Seite
  </body>
</html>

Alles was zwischen <html> und </html> steht wird vom Webbrowser als HTML-Quelltext interpretiert.

Zwischen <head> und </head> steht der Kopf der Seite. Hier können verschiedene Informationen stehen. In unserem Fall steht dort der Title-Tag. Alles was zwischen <title> und </title> steht wird in der Fensterleiste des Webbrowsers angezeigt. Theoretisch könnte aber auch der Title-Tag weggelassen werden.

Zwischen <body> und </body> steht der eigentliche Inhalt der Seite. Viele der dazu notwendigen Formatierungsbefehle werden in diesem Wiki erklärt.

Wen man dieses minimale Grundgerüst verwendet, wird HTML nach dem alten Standard HTML 4 interpretiert. Viele moderne Befehle sind damit nicht möglich. Außerdem gibt es häufig Probleme bei der Zeichenkodierung und z.B. die deutschen Umlaute werden nicht korrekt dargestellt. Deshalb werden wir das folgende Grundgerüst für den Standard HTML 5 verwenden.

<!DOCTYPE html>
 
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Hier steht der Titel der Seite</title>
  </head>
  <body>
    Hier steht der Inhalt der Seite
  </body>
</html>

Die erste wichtige Änderung ist die Zeile <!DOCTYPE html>. Hierdurch erkennt der Browser, dass es sich um den Standard HTML 5 handelt und er kann HTML 5 - Befehle interpretieren.

Mit der Ergänzung lang = "de" wird die Sprache der Seite eingestellt und der Browser kann die sprachlichen Besonderheiten (z.B. Zeitformat) interpretieren. Durch die Metaangabe <meta charset="utf-8"> wird die Zeichenkodierung eingestellt. Somit können auch Sonderzeichen (z.B. die Umlaute) korrekt interpretiert werden.

Unsere erste HTML-Seite

Wenn man die folgende Datei first.html im Webbrowser öffnet,

first.html

<!DOCTYPE html>
 
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Meine erste Seite</title>
  </head>
  <body>
    Das ist meine erste selbst programmierte HTML-Seite.
  </body>
</html>

erhält man die folgende Darstellung:

Im folgenden Video wird dargestellt, wie man allgemein beim Programmieren von HTML-Seiten vorgeht:

Kommentare

Natürlich wird unser Quelltext irgendwann komplizierter. Um die Übersicht nicht zu verlieren, kann man dann in den Quelltext Kommentare schreiben. Damit die Kommentare im Browser nicht angezeigt werden Schreibt man Sie zwischen . Wie man sie verwendet, zeigt der folgende Quelltext.

<!-- Hier steht die DOCTYPE -->
<!DOCTYPE html>
 
<html lang="de">
	<!-- Hier beginnt der Kopf der Seite -->
	<head>
		<!-- Hier steht die Titelzeile, die in der Fensterleiste des Browsers angezeigt wird. -->
		<meta charset="utf-8">		
		<title>Meine erste Seite</title>
	</head>
	<!-- Hier beginnt der Körper der Seite. -->
	<body>
		Das ist meine erste selbst programmierte HTML-Seite.
	</body>
</html>

Vertiefung des Themas

Grundgerüst bei wiki.selfhtml.org

Aufgaben

Aufgabe 1

Erstelle entsprechend dem Video die Datei first.html.

Aufgabe 2

Schreibe einige Kommentare in die Datei und teste die Darstellung.

Aufgabe 3

Erstelle mit einem Editor eine Datei second.html, so dass in der Fensterleiste steht: „Meine zweite Seite“. Im Browserfenster soll der Text erscheinen: „Hurra, ich habe meine zweite HTML-Seite programmiert!“.

>> Einfache Formatierungen