1. Warum brauchen wir eine Website in HTML?
Willkommen in der faszinierenden Welt der Webentwicklung! Heute erstellen wir eine einfache statische HTML-Website und hosten sie auf einem Webserver, den du in den vorherigen Vorlesungen eingerichtet hast. Selbst wenn du noch nie zuvor HTML-Code geschrieben hast – keine Sorge, alles wird super verständlich sein. Unser Ziel ist nicht nur, die Grundlagen von HTML zu verstehen, sondern auch zu lernen, wie du deine Website der Welt mit einem Webserver zugänglich machst.
Jetzt machen wir den nächsten Schritt – wir erstellen unsere eigene Website in HTML und konfigurieren die Anzeige über deinen Webserver. Bereit, den Webspace zu erobern? Dann los geht's!
HTML (HyperText Markup Language) ist die Grundlage aller Webseiten. Es ist verantwortlich für die Struktur und den Inhalt der Seite. Mit Standard-HTML kannst du Überschriften, Texte, Bilder, Links und sogar Tabellen beschreiben. Es ist leicht zu lernen, aber mächtig genug, um die Basis für jede Website zu sein.
In der realen Welt sind Kenntnisse über statische HTML-Seiten in vielen Situationen nützlich:
- Schnelles Erstellen von Prototypen für Webanwendungen.
- Schreiben und Testen von statischen Seiten für Dokumentationen.
- Vorbereitung einer grundlegenden Benutzeroberfläche für serverseitige Anwendungen.
Und HTML ist auch ein hervorragender Weg, um einen Lebenslauf in Form einer Webseite zu erstellen (ja, Recruiter mögen das manchmal). Und für uns als Programmierer sind Grundkenntnisse in HTML einfach ein Muss.
2. Schritt 1. Grundlagen von HTML: Erstellen deiner ersten Seite
Programmieren ist wie LEGO: ein Lieblingshobby für alle Altersgruppen. Fangen wir mit einem kleinen "Baustein" an – unserer ersten Webseite.
Minimales Beispiel eines HTML-Dokuments
Erstelle eine Datei mit dem Namen index.html in einem beliebigen Texteditor (z. B. nano, vim oder sogar gedit, wenn du etwas Grafik möchtest) und schreibe den folgenden Code:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Website</title>
</head>
<body>
<h1>Hallo, Welt!</h1>
<p>Das ist meine erste HTML-Webseite.</p>
</body>
</html>Code-Erklärung
<!DOCTYPE html>– teilt dem Browser mit, dass wir HTML5 verwenden.<html>– öffnet das gesamte Dokument. Der gesamte Inhalt der Seite befindet sich innerhalb dieses Tags.<head>– ein Bereich für Metainformationen über die Website (z. B. Titel der Seite, Einbindung von Styles oder Skripten).<title>– der Titel der Seite, welcher auf der Browser-Registerkarte angezeigt wird.<body>– der Hauptbereich, in dem der gesamte sichtbare Inhalt platziert wird.<h1>– die Hauptüberschrift der Seite (je kleiner die Zahl, desto größer die Überschrift).<p>– ein Textabsatz.
Ja, das sind nur sieben Zeilen, aber sie bilden die Grundlage für deine Website!
3. Schritt 2. HTML-Website auf einem Server hosten
Jetzt, wo unsere Seite fertig ist, ist es an der Zeit, sie der Welt zu zeigen. Dafür nutzen wir unseren Webserver.
Vorbereitung des Website-Ordners
Erstelle ein Verzeichnis für die Dateien deiner Website. Wenn du z. B. eine Website auf einem virtuellen Host mit der Domain example.com hosten möchtest, führe folgendes aus:
sudo mkdir -p /var/www/example.com
Bewege dann deine index.html-Datei in diesen Ordner:
sudo cp index.html /var/www/example.com/
Jetzt beginnt die echte Magie – die Datei ist bereit, online zu gehen.
4. Schritt 3. Einrichten des Webservers zur Bereitstellung der Website
Konfiguration für Nginx
Öffne die Konfigurationsdatei des virtuellen Hosts:
sudo nano /etc/nginx/sites-available/example.comFüge die folgende Konfiguration ein:
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }Aktiviere den virtuellen Host und starte den Server neu:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Konfiguration für Apache
Öffne die Konfigurationsdatei des virtuellen Hosts:
sudo nano /etc/apache2/sites-available/example.com.confFüge die folgende Konfiguration ein:
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>Aktiviere den virtuellen Host und starte den Server neu:
sudo a2ensite example.com.conf sudo systemctl restart apache2
Überprüfen der Website
Öffne jetzt deinen Browser, gib http://example.com (oder die IP-Adresse deines Servers) ein und genieße das Resultat. Wenn du dein wunderschönes "Hallo, Welt!" siehst – Glückwunsch, alles funktioniert!
5. Schritt 4. Wir verschönern unsere Website
Statische Inhalte sind zwar gut, aber ein bisschen CSS schadet nie. Lass uns ein wenig Stil hinzufügen.
Füge eine neue Datei style.css in denselben Ordner /var/www/example.com/ hinzu:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}Jetzt aktualisiere deine index.html, indem du einen Link zum CSS hinzufügst:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Seite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hallo, Welt!</h1>
<p>Das ist meine erste HTML-Webseite.</p>
</body>
</html>Nach dem Neuladen der Seite wirst du kleine Änderungen im Stil bemerken. Deine Website sieht jetzt ein bisschen hübscher aus!
6. Typische Probleme und deren Lösung
Beim Arbeiten mit Websites kannst du auf einige Probleme stoßen, aber keine Sorge, wir haben vorgesorgt:
Fehler "403 Forbidden". Überprüfe die Rechte des Ordners deiner Website. Verwende:
sudo chmod -R 755 /var/www/example.comFehler "404 Not Found". Stelle sicher, dass die Dateien deiner Website sich im richtigen Ordner befinden und korrekt benannt sind.
Website wird nicht angezeigt. Überprüfe, ob der Dienst deines Webservers läuft:
sudo systemctl status nginx sudo systemctl status apache2
Jetzt ist deine Website für alle zugänglich, die ihre Adresse kennen. Ist das nicht motivierend? In den nächsten Vorlesungen wirst du noch mehr lernen: z. B. HTTPS für mehr Sicherheit hinzuzufügen und Servereinstellungen zu verwalten.
GO TO FULL VERSION