Eine Website mit HTML und CSS codieren: Eine Kurzanleitung (2023)

calendar icon

Aktualisiert: 26/01/2023

Wollten Sie schon immer mal wissen, wie man eine leere Seite in eine inhaltsreiche Website verwandeln kann? Dann ist es wichtig, dass Sie mit HTML und CSS als die zwei elementaren Bausteine für Webseiten vertraut sind. Hier dreht es sich aber um ein komplexes Thema, und es kann schwierig sein, zu wissen, wo man anfangen soll. Deshalb haben wir diesen Leitfaden erstellt, damit Sie eine kurze Einführung in das erhalten, was Sie wissen müssen. 

In diesem Artikel haben wir alle Grundlagen über HTML und CSS, die Sie benötigen, wenn Sie Ihre eigene Website programmieren, zusammengetragen. Auf diese Weise erhalten Sie die Werkzeuge, die Sie brauchen, um etwas ganz Eigenes zu schaffen. Doch bevor wir uns mit den technischen Aspekten befassen, sollten wir einen Blick darauf werfen, worum es bei HTML und CSS überhaupt geht.  

Was ist HTML? 

HTML – oder Hypertext Markup Language, wie es eigentlich heißt – ist ein Code, der definiert, wo was auf einer Seite hingehört. HTML bestimmt die Platzierung von Bildern, Text, Videos und anderen Elementen auf einer Webseite. Kurz gesagt, wir können uns HTML als das Gerüst vorstellen, aus dem sich unsere Website aufbaut.    

Wenn Sie Ihre eigene Website erstellen, ist es daher wichtig, dass Sie Kenntnisse darüber haben, wie HTML funktioniert. Ein gutes Beispiel dafür ist fetter Text. Wenn Sie dies in Word schreiben, müssen Sie es nur markieren und hervorheben, aber wenn ein Programm verstehen soll, dass dies fetter Text ist, dann wird es so aussehen <strong>fetter Text</strong>. Wenn Sie verstehen, wie diese Symbole miteinander verbunden sind, können Sie auch erkennen, wie verschiedene Webseiten aufgebaut sind. 

Was ist CSS? 

Die andere Abkürzung, die wir bereits erwähnt haben und die einen großen Einfluss auf die Erstellung Ihrer eigenen Website hat, ist CSS. Die Abkürzung steht für Cascading Style Sheets und ist dafür verantwortlich, wie eine Webseite gestaltet oder präsentiert wird. Im Grunde bedeutet das nichts anderes, als dass CSS unserem Rechner Anleitungen gibt, wie der mit HTML erstellte Inhalt präsentiert werden soll. 

HTML repräsentiert also den eigentlichen Inhalt, der auf die Seite gehen soll, während CSS angibt, wie dieser auf der Seite dargestellt wird. Die Kombination dieser beiden Sprachen ist das, was wir als fertige Webseite betrachten. Es ist daher wichtig, dass Sie beides beherrschen, wenn Sie eine Website von Grund auf mit HTML und CSS programmieren wollen.   

Bevor Sie mit der Arbeit an Ihrer Website beginnen 

Bevor Sie mit dem Aufbau Ihrer Website beginnen können, müssen Sie einige grundlegende Dinge erledigen. Das erste ist Webhosting. Sie brauchen einen Ort, an dem Sie Ihre Website hochladen können, während Sie den Code dafür schreiben. Es gibt in diesem Zusammenhang ein breites Angebot und es muss gar nicht teuer werden, einen guten Webhoster zu finden, wenn Sie sich nur gut umschauen. 

Dann brauchen Sie einen Domainnamen für Ihre Website, also die Adresse, die jemand eingeben muss, wenn er Ihre Website online besuchen will. In vielen Fällen können Sie diese von demselben Anbieter beziehen, bei dem Sie auch das Webhosting gekauft haben, aber das ist nicht unbedingt der billigste.   

Sobald Sie beides haben, können Sie Ihr Projekt in Angriff nehmen, wobei wir mit HTML als den ersten Baustein beginnen, den Sie beherrschen sollten.   

Lernen Sie die Grundlagen von HTML 

Wenn Sie noch nie Code mit HTML geschrieben haben, müssen Sie sich wahrscheinlich erst daran gewöhnen. Zum Glück ist es viel einfacher, als viele denken. Der HTML-Tag ist das grundlegende Element, das Sie zur Erstellung verschiedener Elemente auf Ihrer Website brauchen. Bevor wir weitermachen, werden wir daher einige Beispiele dafür anführen. 

Wenn wir von HTML-Tags sprechen, meinen wir <> und </>. Nachstehend finden Sie einige Beispiele dafür, wie deren Anwendung in der Praxis funktioniert.   

  • <b> …. </b> (Hier wird der Text zwischen den beiden HTML-Tags in Fett dargestellt.) 
  • <h1> …. </h1> (Hier wird der Text zwischen den Tags als H1-Titel betrachtet.) 
  • <p> …. </p> (Hier wird der Inhalt als Paragraph behandelt.) 

Das sind die grundlegendsten HTML-Codes, aber es gibt auch einige eher komplizierte. Wenn Sie eine Aufzählung wie oben erstellen möchten: 

  • Punkt  
  • Punkt 
  • Punkt 

wird das so in HTML aussehen. 

<ul> 

<li> Punkt </li> 

<li> Punkt </li> 

<li> Punkt </li> 

Wenn Sie aber zum Beispiel einen Link zu einer anderen Stelle auf Ihrer Website hinzufügen möchten, erfordert dies einen etwas längeren HTML-Code. Dann müssen Sie dem Code mitteilen, wohin Sie verlinken wollen und wie der Text für den Link lauten soll.   

Ein Link zu unserer Homepage 

Ein solcher einfacher Link mit HTML-Tags sieht im Hintergrund wie folgt aus: 

<a href=”https://websitebaukasten.de/”>Ein Link zu unserer Homepage</a> 

HTML-Strukturen verstehen 

Obwohl HTML an sich ziemlich einfach zu verstehen ist, stehen die Tags selten allein. Ein einzelnes Tag wird keine ganze Webseite formen, was bedeutet, dass es in der Regel in langen String-Codes – oder Zeichenketten, wie es oft genannt wird – kommt. Wir werden uns daher einige String-Codes genauer ansehen, damit Sie sich ein besseres Bild davon machen können, wie das aussehen wird. Eine einfache Struktur für eine sehr einfache Webseite würde wie folgt aussehen: 

<!doctype html> 

<html lang=”en”< 

<head> 

<meta charset=”utf-8”> 

<title>Hello, World!</title> 

</head> 

<body> 

<h1>Hello, World!</h1> 

<p>Meine erste Website</p> 

</body> 

</html> 

Die verschiedenen Elemente, die Sie gelesen haben, unterteilen sich wie folgt: 

  • <!doctype html> – Das ist der Anfang der Kette. 
  • <html lang=”eng”> – Dieser Teil des HTML-Dokuments ist in Englisch geschrieben. 
  • <head> – markiert, wo der Anfang der Kopfzeile beginnt. Hier ist es üblich, Codes für Analyseprogramme und Ähnliches einzufügen.  
  • <meta charset=”utf-8”> – legt fest, welche Kodierung beim Schreiben des Dokuments verwendet wird.  
  • <title>Hello, World! </title> – Der Titel der Seite (den Sie in Ihrem Webbrowser sehen) 
  • <body> – Hier beginnt der Inhalt Ihrer Seite (der sichtbare Teil.) 
  • <h1>Hello, World!</h1> – H1-Kopfzeile Ihrer Seite 
  • <p>Meine erste Website</p> – eine kurze Passage mit dem Text: Meine erste Website.  
  • </html> – der Schluss Ihres Dokuments.