HTML und CSS/Meine erste Webseite
Aus ZUM-Unterrichten
Der Weg zur ersten Webseite ist denkbar einfach und bringt schnelle Ergebnisse!
Aufgabe
- Erstelle Deine eigene Webseite!
- Kopiere den untenstehenden Code in einen Code-Editor wie NotePad++.
- Speichere es als
meineSeite.html - Öffne es in einem Browser.
- Jetzt kannst Du den Inhalt der Seite nach Belieben ändern!
- Neue Elemente
- Kannst Du Deine Hobbys in einer Liste nach Priorität sortieren? Finde das richtige HTML-Element dafür!
- Kannst Du einen Verweis/Link zu Deinem Sportverein, Deiner Schule oder Deinem Hobby einbauen?
- Füge Bilder in Deine Webseite ein!
- Unten findest Du interaktive Übungen. Weißt Du schon alles?
<pre>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>meine Seite</title>
</head>
<body>
<h1>Überschrift</h1>
<p>Ich bin ...</p>
<h2> Meine Hobbies</h2>
<ul>
<li><a href="https://unterrichten.zum.de/wiki/">Unterrichten-ZUM-Wiki</a></li>
</ul>
</body>
</html></pre>
- HTML als Auszeichnungssprache
- meine erste Webseite
- unsichtbar, aber nötig: Dokumentstruktur
- Jetzt kommt Farbe ins Spiel: CSS
- responsives Mehrspaltenlayout
- von der Webseite zum Web-Projekt
Interaktive Übungen
semantische Auszeichnung einer Webseite
Ordne die HTML-Elemente den Beschreibungen zu.
| Überschrift erster Ordnung | <h1> |
| Sidebar für zusätzliche Informationen | <aside> |
| Textabsatz | <p> |
| Verweis auf eine andere Seite | <a href=""> |
| Einbindung eines Bilds | <img src="" alt=""> |
| Kopfbereich | <header> |
Quiz
HTML-Syntax - Zuordnung
