04_SimpleTAGs

Code-Dateien

Dateiname	Aktion
CODECode_SimpleTAGs.zip	Download

PDF-Dokumente

Dateiname	Aktion
PDFUebung_001.pdf	Öffnen

Videos

Dateiname	Aktion
VIDEOVideo_SimpleTAGs	Abspielen

Lernmaterialien

HTML & CSS

Grundstruktur

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Meine erste Webseite</title>
</head>
<body>
  <!-- Hier kommt der Inhalt -->
</body>
</html>

Alles, was sichtbar ist, kommt in den <body>-Bereich.

HTML Tags

Tag	Bedeutung	Beispiel
`<h1>` – `<h6>`	Überschrift (groß bis klein)	`<h1>Überschrift</h1>`
`<p>`	Absatz	`<p>Ein Textabsatz.</p>`
`<strong>`	Fett	`Das ist <strong>wichtig</strong>.`
`<em>`	Kursiv	`Das ist <em>betont</em>.`
`<ul>` + `<li>`	Aufzählungsliste	`<ul><li>HTML</li><li>CSS</li></ul>`
`<ol>` + `<li>`	Nummerierte Liste	`<ol><li>Erster</li><li>Zweiter</li></ol>`
`<a>`	Link	`<a href="https://www.wikipedia.org">Wikipedia</a>`
`<img>`	Bild	`<img src="bild.jpg" alt="Beschreibung">`

CSS

CSS beschreibt das Aussehen.
Im <head>-Bereich einfügen:

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
  }

  h1 {
    color: darkblue;
    text-align: center;
  }

  a {
    color: green;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
</style>

Eigenschaft (Property)	Beispielwert	Beschreibung
`color`	`red`, `#333333`, `rgb(0, 0, 255)`	Textfarbe
`background-color`	`#f5f5f5`, `lightblue`	Hintergrundfarbe
`font-family`	`Arial`, `Verdana`, `sans-serif`	Schriftart
`font-size`	`16px`, `1.2em`, `large`	Schriftgröße
`font-weight`	`bold`, `normal`	Schriftstärke
`text-align`	`left`, `center`, `right`	Textausrichtung
`text-decoration`	`none`, `underline`	Textverzierung (z. B. für Links)
`border`	`1px solid black`	Rahmen um ein Element
`padding`	`10px`	Innenabstand zwischen Inhalt und Rahmen
`margin`	`20px`	Außenabstand zum nächsten Element
`width` / `height`	`100px`, `50%`	Breite und Höhe
`display`	`block`, `inline`, `flex`	Anzeigeart eines Elements
`border-radius`	`10px`	Runde Ecken
`cursor`	`pointer`, `default`	Mauszeiger-Stil
`hover` (Pseudoklasse)	`a:hover { color: red; }`	Effekt beim Überfahren mit der Maus

HTML Validator

Ein HTML Validator ist ein Prüfwerkzeug, mit dem du überprüfst, ob dein HTML-Code korrekt, vollständig und standardkonform ist.

Er überprüft:

ob alle Tags richtig geöffnet und geschlossen sind

👉 z. B. <p> ohne </p> → Fehler
ob Tags an der richtigen Stelle stehen
👉 z. B. <h1> darf nicht im <title> stehen
ob Attribute gültig sind

👉 z. B. <img src="bild.jpg" alt="Beschreibung"> - alt ist Pflicht
ob dein HTML-Dokument dem Standard (z. B. HTML5) entspricht

https://validator.w3.org/

Fehlerhafter Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF8">
  <title>Meine erste Webseite<title>
</head>
<body>
  <h1>Willkommen auf meiner Seite
  <p>Ich lerne gerade HTML.
  <p>Hier ist ein Bild:
  <img src="bild.jpg">

  <h2>Meine Hobbys</h3>
  <ul>
    <li>Lesen
    <li>Musik
    <li>Programmieren</li>
  </ol>

  <a href="www.wikipedia.org">Zu Wikipedia</a>
</body>
</html>

Zeile	Fehlerbeschreibung	Richtige Lösung
`<meta charset="UTF8">`	„UTF8“ ist kein gültiger Zeichensatzname	`UTF-8`
`<title>Meine erste Webseite<title>`	Der schließende Tag fehlt	`</title>`
`<h1>Willkommen auf meiner Seite`	Der schließende `</h1>` fehlt	`</h1>`
`<p>Ich lerne gerade HTML.`	Tag nicht geschlossen	`</p>`
`<img src="bild.jpg">`	Das `alt`-Attribut fehlt	`<img src="bild.jpg" alt="Beispielbild">`
`<h2>Meine Hobbys</h3>`	Falscher Schlusstag (`</h3>` statt `</h2>`)	`</h2>`
`<ul>` … `</ol>`	Unterschiedliche Listentypen geöffnet/geschlossen	`</ul>`
`<a href="www.wikipedia.org">`	Fehlendes `https://`	`<a href="https://www.wikipedia.org">`

Korrigierte Version:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Meine erste Webseite</title>
</head>
<body>
  <h1>Willkommen auf meiner Seite</h1>
  <p>Ich lerne gerade HTML.</p>
  <p>Hier ist ein Bild:</p>
  <img src="bild.jpg" alt="Beispielbild">

  <h2>Meine Hobbys</h2>
  <ul>
    <li>Lesen</li>
    <li>Musik</li>
    <li>Programmieren</li>
  </ul>

  <a href="https://www.wikipedia.org">Zu Wikipedia</a>
</body>
</html>

Semester_1