Zurück
  1. Einleitung
  2. Voraussetzungen
  3. Einrichtung HTML
  4. HTML-Grundgerüst
  5. HTML-Inhalte
  6. CSS Styling
  7. Website kostenlos hosten

HTML & CSS Tutorial -
Für absolute Anfänger

04. Januar 2023 · Angepasst an Themenvorgaben KCGO Informatik · Erstellt mit Unterstützung von Chat GPT

In diesem Tutorial bauen wir eine HTML- und CSS-Website. Du brauchst keinerlei Vorkenntnisse. Zum Schluss laden wir die Website gemeinsam und kostenlos auf einem Webserver hoch. Hier eine Live-Demo des Endprodukts.

Folgende HTML-Konzepte werden eingeführt:

Außerdem lernen wir folgende CSS-Konzepte kennen:

Voraussetzungen

Einrichtung des Projektordners und der HTML-Datei

Erstelle einen Ordner mit dem Namen „webproject“ auf deinem Desktop. Öffne den Ordner und erstelle darin eine Textdatei - benenne sie index.html.

Öffne index.html mit deinem Texteditor (Visual Studio Code). Hier schreiben wir unseren HTML-Code für unsere Website.

HTML-Grundgerüst

Zunächst fügen wir in index.html das HTML-Grundgerüst ein. Das HTML-Grundgerüst besteht aus den wichtigsten Elementen, die es braucht, damit ein Browser unsere Seite interpretieren kann.

Füge das HTML-Grundgerüst in index.html ein:

<!DOCTYPE html>
<html>
<head>
    <title>Meine erste Website</title>
</head>
<body>

</body>
</html>

Der <head>-Bereich ist optional und enthält Informationen über die Website, die für den Browser wichtig sind, aber nicht auf der Website selbst angezeigt werden. Der <title>-Tag gibt den Titel der Website an, der im Browser-Tab angezeigt wird.

Der <body>-Bereich enthält den tatsächlichen Inhalt der Website, der für den Besucher sichtbar ist.

Da nun alle wichtigen Elemente vorhanden sind, kannst du index.html speichern und mit dem Browser öffnen. Die Seite erscheint noch leer, da der <body> noch leer ist, aber zumindest im Browser-Tab sollte schon der <title> „Meine erste Website“ zu lesen sein.

HTML-Inhalte

Im nächsten Abschnitt füllen wir die Seite mit tatsächlichem Inhalt:

Wir stellen uns mit einem Bild <img>, einer Überschrift <h1> und einem Absatz <p> vor und fügen einen Hyperlink <a> zur Seite unseres Sportvereins hinzu. Außerdem erstellen wir ein Kontaktformular <form>:

<!DOCTYPE html>
<html>
<head>
	<title>Meine erste Website</title>
</head>
<body>
	<img src="https://img.icons8.com/emoji/48/null/soccer-ball-emoji.png"/>
	<h1>Hi, mein Name ist Sam</h1>
    <p>
        Ich bin ein begeisterter Fußballer und habe schon vor vielen Jahren damit
        angefangen. Es ist seitdem zu meiner großen Leidenschaft geworden.
    </p>
	<a href="http://www.beispiel-fc.de">Link zu meinem Fußballverein</a>
	<form action="skript.php" method="post">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"><br>
        <label for="nachname">Nachricht:</label><br>
        <input type="text" id="nachname" name="nachricht"><br><br>
        <input type="submit" value="Submit">
    </form>

</body>
</html>

Öffnende und schließende Tags - Beispiel Überschriften

Öffnende und schließende Tags sind wichtig, um anzugeben, wo ein HTML-Element beginnt und endet. Jedes Element besteht aus einem öffnenden Tag und einem schließenden Tag. Zum Beispiel:

<h1>Hi, mein Name ist Sam</h1>

Attribute und Attributwerte - Beispiel Hyperlinks & Bilder

Attribute und Attributwerte können verwendet werden, um bestimmte Eigenschaften eines HTML-Elements festzulegen. Zum Beispiel bestimmt man die Ziel-URL eines Hyperlinks im href-Attribut:

<a href="http://www.beispiel-fc.de">Link zu meinem Fußballverein</a>

Die Quelle eines Bildes bestimmt man mit dem src-Attribut. In diesem Fall bedienen wir uns einer Bilddatei, die bereits im Internet veröffentlicht wurde:

<img src="https://img.icons8.com/emoji/48/null/soccer-ball-emoji.png"/>

Formulare

Formulare können z.B. verwendet werden, um Nachrichten aufzunehmen und im weiteren Verlauf zu verarbeiten. Wir verwenden dazu das <form>-Tag.

Die Verarbeitung des „POST-Request“, d.h. der Anfrage, die durch das Versenden des Formulars ausgelöst wird, wird an dieser Stelle nicht behandelt.

Speichere index.html, öffne es mit einem Browser und freue dich über das, was wir bis hierhin geschaffen haben 🎉

CSS Styling

Bisher besteht die Seite aus bloßen HTML-Elementen, ohne jegliches Styling. Das soll sich im nächsten Abschnitt ändern. Wir ändern die Schriftart, bringen etwas Farbe ins Spiel und machen das Layout durch geeignete Abstände ansprechend.

Einrichtung der CSS-Datei

Da wir den Inhalt (HTML) und das Styling (CSS) strikt voneinander trennen wollen, legen wir eine separate CSS-Datei in unserem Ordner „webproject“ an. Öffne hierzu wieder den Ordner und erstelle darin eine Textdatei namens style.css.

Um das Styling, das wir gleich in style.css definieren, auf die HTML-Datei wirksam zu machen, öffne index.html und füge im <head> den folgenden <link>-Tag hinzu:

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title> Meine erste Website </title>
</head>

Schrift stylen

Öffnen das CSS-Dokument und definiere einen Selektor, um bestimmte HTML-Elemente auszuwählen.

Zum Beispiel p, um allen Absätzen die Schriftart Arial und die Farbe dimgray zu verleihen:

p {
    font-family: Arial;
    color: dimgray;
}

Und a, um allen Hyperlinks die Schriftgröße 15px zu geben:

a {
  font-size: 15px;
}

Verwende andere grundlegende CSS-Attribute, um das Aussehen von HTML-Elementen zu ändern. Einige Beispiele sind:

background-color: um den Hintergrund zu färben (z.B. red)
font-weight: um die Dicke der Schrift festzulegen (z.B. 600)
text-decoration: um den Innenabstand eines Elements festzulegen (z.B. underline)

Layout stylen

Standardmäßig haben HTML-Elemente nach außen sehr wenig Abstand zum Fensterrand. Um das zu ändern, kann man für ein HTML-Element einen Abstand bestimmen.

Hierzu gibt es drei Möglichkeiten:

Dieses Konzept der drei Schichten nennt sich auch Boxmodell.

Da wir den äußeren Abstand aller Elemente zum linken und rechten Bildrand definieren möchten, selektieren wir img, h1, p, a und form gleichzeitig:

img, h1, p, a, form {
  margin-left: 100px;
  margin-right: 100px;
}

Den oberen Abstand von img und form wollen wir außerdem auf 30px festlegen:

img, form {
  margin-top: 30px;
}

Wow, die Seite steht und sieht schon sehr gut aus! Natürlich ist das Design noch ausbaufähig und auch der Inhalt kann erweitert werden, aber mit den Kenntnissen, die du bis hierhin erworben hast, stehen dir viele Möglichkeiten offen. Du könntest die Website im nächsten Schritt um weitere Informationen über dich oder dein Thema erweitern und z.B. folgende wichtige Konzepte dazulernen:

Website kostenlos hosten

Bist du mit deinem Endprodukt zufrieden, ist der nächste Schritt deine Website auf einem Webserver zu hosten. So kannst du sie mit Familie und Freunden teilen.

Es gibt viele verschiedene Hosting-Anbieter. Die meisten kosten zwischen 2 bis 5 Euro im Monat und bieten viele Extras wie Wunschdomain, zusätzliche Emailadressen, Datenbanken usw.

Bei 000webhost , einem Ableger des Hosting-Riesen Hostinger, hast du zwar "nur" 300 GB Speicher und eine Bandbreite von 3 GB, kannst deine Website aber dafür völlig kostenlos hosten. Und für kleine Webprojekte, wie unseres, reicht das Angebot von 000webhost ohnehin locker!

So gehst du vor um den Webserver einzurichten: