Differences

This shows you the differences between two versions of the page.

--- website-basteln-101 [2026/01/27 14:09] – created horst
+++ website-basteln-101 [2026/02/02 13:42] (current) – [CSS Basics] horst
@@ Line 1: / Line 1: @@
-====== Eigene Website basteln 101 ======
+====== 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.
+<code>
+<!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>
+</code>
+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.
+<code>
+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;
+}
+</code>
+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]]