Hier lernst du, wie man HTML und CSS verwendet.
Zunächst legst du ein HTML-Dokument mit dem Namen index.html an.
Anschließend erstellst du ein CSS-Dokument mit dem Namen style.css.
In deinem HTML-Dokument bindest du das CSS-Dokument im <head> mit folgendem Code ein:
<link rel="stylesheet" href="style.css">
<h1>Guten Tag!</h1> <p>Das ist ein Satz.</p>CSS:
h1 {
color: blue;
background-color: lightgray;
text-align: center;
}
p {
color: green;
text-align: center;
}
Verstanden? Dann ab zum nächsten Block ↓
<table>
<tr>
<th>Instrument</th>
<th>Lehrer</th>
</tr>
<tr>
<td>Gitarre</td>
<td>Eric Lämmle</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
width: 60%;
margin: auto;
}
th, td { border: 1px solid black; padding: 8px; }
Erklärung: border-collapse: collapse verschmilzt die Zellränder zu einer Linie.
Manchmal müssen Zellen über mehrere Reihen oder Spalten gehen:
HTML:
<td rowspan="2">Constantin Huber</td>
<td colspan="3">Download PDF</td>
CSS:
/* Keine speziellen CSS-Regeln für rowspan/colspan nötig,
da dies eine reine HTML-Struktur-Anweisung ist! */
td { border: 1px solid black; }
Merke: rowspan (vertikal) und colspan (horizontal) ändern nur die Struktur, das Design wird normal über td gesteuert.
tr:hover {
background-color: red;
color: white;
}
Erklärung: Das :hover ist eine Pseudo-Klasse. Sie gilt nur, solange die Maus über dem Element ist.
Verstanden? Dann ab zum nächsten Block ↓
<a href="unterricht.html">Unterrichtsangebot</a>
HTML-absoluter Pfad:
<a href="https://musikschulen-bw.de" target="_blank">Landesverband</a>
Erklärung: Mit href gibst du die Ziel-URL an. Ein relativer Pfad (z.B. "unterricht.html") verweist auf eine Datei im selben Projekt, während ein absoluter Pfad (z.B. "https://musikschulen-bw.de") auf eine externe Webseite zeigt.
CSS:
a {
color: blue;
text-decoration: none;
}
a:hover { text-decoration: underline; }
Erklärung: Mit text-decoration: none entfernst du den Standard-Unterstrich von Links.
Durch target="_blank" öffnet sich der Link in einem neuen Tab. Und durch das <p>-Element wird der Link in einer neuen Zeile angezeigt.
Verstanden? Dann ab zum nächsten Block ↓
<img src="material/bilder/logo.jpg" alt="Vereinslogo">
<img src="https://www.beispiel.de/logo.jpg" alt="Beispiellogo">
Erklärung: Ein relativer Pfad (z.B. "material/bilder/logo.jpg") verweist auf ein Bild im selben Projekt, während ein absoluter Pfad ("https://www.beispiel.de/logo.jpg") auf eine externes Bild zeigt. Das alt-Attribut beschreibt das Bild für Suchmaschinen und Screenreader. Wenn das Bild nicht geladen werden kann, wird der Text im alt-Attribut angezeigt.
CSS:
img {
width: 30%;
height: auto;
border-radius: 8px;
}
Erklärung: width: 30% macht das Bild relativ zur Breite des Eltern-Containers. Das ist wichtig für responsives Design.
Verstanden? Dann ab zum nächsten Block ↓
<audio controls>
<source src="material/mp3/gitarre.mp3" type="audio/mpeg">
</audio>
CSS:
audio {
width: 100%;
margin-top: 10px;
}
Erklärung: Das Audio-Element verhält sich wie ein Block-Element und kann mit width oder margin in das Layout eingepasst werden.
Verstanden? Dann ab zum nächsten Block ↓
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>
<ol>
<li>Schritt 1</li>
<li>Schritt 2</li>
</ol>
CSS:
ul { list-style-type: circle; }
ol { list-style-type: lower-alpha; }
Erklärung: <ul> steht für unordered list (Aufzählungspunkte). <ol> steht für ordered list (nummerierte Liste). Mit list-style-type kannst du das Symbol oder die Nummerierung (wie a, b, c) per CSS-Design festlegen.
Verstanden? Zum nächsten Block ↓Das Box-Modell beschreibt, wie HTML-Elemente Platz auf der Seite einnehmen. Im HTML ist jedes Element ein "Container".
HTML:
<div class="box">
<p>Das ist der Inhalt.</p>
</div>
CSS-Design:
.box {
width: 200px;
padding: 20px; /* Innenabstand */
border: 5px solid; /* Der Rahmen */
margin: 10px; /* Außenabstand */
}
Erklärung: Das HTML erzeugt das Element (den Kasten). Das CSS legt dann fest, wie dick der Rahmen (border) ist, wie viel Platz zwischen Inhalt und Rahmen ist (padding) und welchen Abstand der Kasten zu seinen Nachbarn hält (margin).
Verstanden? Zum nächsten Block ↓