Eigene Webseite basteln 101

Mit seiner eigenen Website hat man die volle kreative Freiheit, um seine eigene Nische im Internet zu gestalten. Da der Anfang aber auch etwas einschüchternd sein kann, haben wir uns ein ganz grundlegendes Gerüst an Code zusammen gestellt, um schonmal einen Startpunkt zu haben. Da wir vor allem simple und ressourcenschonende Websites haben wollten, beschränken wir uns auch auf HTML und CSS und verzichten größtenteils auf JavaScript.

HTML Basics

Mit HTML können wir die Semantik und den Inhalt unserer Seite festlegen. Wir beschäftigen uns also noch nicht mit dem Aussehen, sondern damit welche Hierarchie und Struktur auf unserer Seite existiert.

<!DOCTYPE html>
<html lang="en">
  <!-- Sprache des Dokuments -->
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sample Page</title>
    <!-- Tab-Name -->
    <link rel="icon" type="image/x-icon" href="../assets/logo-duck.svg" />
    <!-- Favicon (Website Icon, was im Tab angezeigt wird) -->
    <link rel="stylesheet" href="styles.css">
    <!-- So verlinkt man eine externe CSS-Datei -->
  </head>

  <style>
    /* Hier kann der CSS-Code für innerhalb der HTML-Datei geschrieben werden */
    
  </style>

  <body>
    <!-- Inhalt der HTML Datei, also Text, Bilder, usw. -->
    <h1>Dies ist ein Titel-Element</h1>
    <p> 
        Und das hier ein Textparagraph<br/>
        mit Zielenumbruch.
    </p>
    <h2>Es gibt auch noch weitere Überschriften</h2>
    <h3>Mit denen können wir eine Texthierarchie</h3>
    <h4>aufbauen</h4>
  </body>
  
</html>

Ohne eine CSS Datei um das Aussehen zu ändern, sieht das ganze dann so aus:

CSS Basics

Die CSS Datei legt das Aussehen unseres HTML-Dokumentes fest. Das funktioniert über das Festlegen von Attributen für unsere einzelnen Elemente.

body {
    background-color: papayawhip;;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

p {
    font-weight: lighter;
    font-family: 'Times New Roman', Times, serif;
}

h1 {
    font-weight: bold;
    text-transform: capitalize;
    font-size: 5rem;
    letter-spacing: -2px;
}

h2 {
    text-transform: capitalize;
    font-style: italic;
}

h3 {
    text-transform: capitalize;
    color: brown;
}

h4 {
    text-transform: capitalize;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

Durch diese CSS Datei sieht unsere Seite dann z.B. so aus:

Ressourcen

Das hier war nur ein schneller Einblick. Für mehr Tutorials und wissen was man alles mit HTML und CSS machen kann empfehlen sich diese Seiten:

Falls ihr noch Inspiration sucht, was man noch alles kreatives mit HTML und CSS machen kann, schaut mal hier:

Table of Contents

Eigene Webseite basteln 101

HTML Basics

CSS Basics

Ressourcen