Differences

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

--- website-basteln-101 [2026/02/02 12:54] – horst
+++ website-basteln-101 [2026/02/02 13:42] (current) – [CSS Basics] horst
@@ Line 3: / Line 3: @@
 ===== HTML Basics =====
-Mit HTML können wir die Semantik und den Inhalt unserer Seite festlegen.
+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]]