Sample Page

====== 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.




  
  
    
    
    Sample Page
    
    
    
    
    
  

  

  
    
    Dies ist ein Titel-Element
     
        Und das hier ein Textparagraph

        mit Zielenumbruch.
    
    Es gibt auch noch weitere Überschriften
    Mit denen können wir eine Texthierarchie
    aufbauen

Ohne eine CSS Datei um das Aussehen zu ändern, sieht das ganze dann so aus: {{:html_basic_2026-02-02_141753.png?400|}} ===== 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: {{:css_2026-02-02_143633.png?400|}} ===== 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: * [[https://www.w3schools.com/html/default.asp|W3Schools HTML & CSS Tutorials]] * [[https://wiki.selfhtml.org/wiki/SELFHTML|SELFHTTML Wiki mit deutschen Erklärungen]] Falls ihr noch Inspiration sucht, was man noch alles kreatives mit HTML und CSS machen kann, schaut mal hier: * [[https://sadgrl.online/resources/webdev-links/|Sadgrl]] * [[https://moxiemoshpit.com/|Moxie Moshpit]] * [[https://csszengarden.com/|CSS Zen-Garden]]