Jede Webseite, die man im Internet besucht und im Browser sehen kann, ist mit HTML erstellt. HTML steht für Hypertext Markup Language. Dabei handelt es sich um eine Methode zur Formatierung von Text mithilfe von Tags. Diese Tags werden oft Inline-Stile genannt, weil sie im Text selbst stehen.
HTML ist die Sprache der Webseiten. Sie sagt den Browsern, wie sie Informationen wie Bilder, Links und andere Elemente anzeigen sollen. Der HTML-Code enthält auch Anweisungen, wie die Seite formatiert werden soll.
Ein gutes Verständnis von HTML ist für alle, die ihre Arbeit online veröffentlichen wollen, unerlässlich. Es ist wichtig zu wissen, dass nicht alle Websites HTML verwenden. Einige Websites verwenden stattdessen proprietäre Formate.
Um eine einfache statische Website mit HTML zu erstellen, muss man zunächst die Grundstruktur eine Webseite verstehen, mit folgendem HTML-Code kann anfangen, eine neue Seite für die Website zu erstellen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dokument-Titel</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Hier binden wir CSS Regeln ein, um die Seite zu gestalten -->
<link rel="stylesheet" href="/main.css">
</head>
<body>
<header>
<h1>Titel</h1>
</header>
<main>
<p>Das ist der Text der Seite.</p>
</main>
<footer>
<ul>
<li><a href="/index.html">Startseite</a></li>
<li><a href="/kontakt.html">Kontakt</a></li>
<li><a href="/impressum.html">Impressum</a></li>
<ul>
</footer>
<!-- Hier binden wir JavaScript code ein, um die Seitenelemente zu manipulieren -->
<script src="/main.js"></script>
</body>
</html>Wenn wir uns den Quellcode von oben ansehen, können wir mehrere Abschnitte erkennen, die sehr wichtig sind und in einem eigenen "HTML-Tag" eingeschlossen sind:
- <html> enthält alle Elemente der Webseite. Dies ist die Stammebene des Dokuments.
- <head> ist die Kopfzeile des Dokuments und enthält wichtige Informationen über das Dokument, z. B. den Titel, Dateien, die in das Dokument aufgenommen werden müssen, usw.
- <body> ist der Hauptteil des Dokuments. Hier befindet sich der Hauptinhalt der Webseite.
- <header> ist die Kopfzeile des Inhalts und enthält die Überschrift und kann zusätzlich einige Informationen über den Inhalt selbst enthalten.
- <main> enthält den Text der Seite. Alles in diesem Bereich gehört zu den wichtigen Inhalten der HTML-Seite.
- <footer> ist der Fußbereich der Seite und enthält normalerweise Verweise auf Unterseiten, zum Beispiel die Kontaktseite, das Impressum usw.
Um eine einfache Website zu erstellen, die komplett statisch ist, müssen wir drei Dateien erstellen:
- index.html – das ist die Startseite der Website.
- kontakt.html – das ist die Kontaktseite der Website.
- impressum.html – das ist die Impressumsseite der Website.
Die Struktur jeder dieser Seiten ist identisch. Die Seiten unterscheiden sich nur durch den Titel, den Dateinamen und den Inhalt. Für statische Seiten erstellt man in der Regel zunächst eine Vorlage, die ähnlich aussieht wie die obige und verwendet sie für jede Unterseite, die man für die Website benötigt.
Sobald du die Dateien erstellt und im selben Ordner abgelegt hast, kannst du die Datei index.html öffnen und das Ergebnis ansehen. Danach kannst du durch die Seiten navigieren, indem du auf die Links im Fußbereich der Seite klickst.
Danach musst du das gesamte Design der Website konzipieren und es mit Hilfe von CSS-Regeln umsetzen. Diese Regeln werden in der Datei main.css gespeichert, die sich im gleichen Verzeichnis wie alle anderen Dateien befindet. Dann bekommt die Website eine Struktur und vor allem Farben und sieht viel schöner aus.
