ZUM-Unterrichten - Logo.png
Viele Inhalte sind umgezogen ins neue ZUM-Unterrichten.

Unterrichtsideen

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche

Der Weg zur ersten Webseite ist denkbar einfach und bringt schnelle Ergebnisse:

Inhaltsverzeichnis

Eigene Webseite

Du kannst Deine eigene Webseite erstellen:

<!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://wiki.zum.de/wiki/">Zum-Wiki</a></li>
  </ul>
</body>
</html>
  1. Kopiere den Code in einen Code-Editor
  2. Speichere es als meineSeite.html
  3. Öffne es in einem Browser.
  4. Jetzt kannst Du den Inhalt der Seite nach Belieben ändern!

sortierte Listen

  1. Kannst Du Deine Hobbys nach Priorität sortieren? Finde das richtige HTML-Element dafür!

Ein Bild sagt mehr als 1000 Worte

  1. Füge Bilder in Deine Webseite ein!

CSS und Gestaltung

Du kannst das Aussehen Deiner Webseite verändern!

<style>
h1 { 
  color: red;
  padding-left: 20%;
}
h2 {
  background-color: skyblue;
  border: 1px solid blue;
  border-radius: 10px;
}
p {
  width: 10em;
}
</html>
  1. Analysiere die verwendeten Eigenschaften.
  2. Informiere Dich über erlaubte Werte!
  3. Verschönere Deine Webseite

responsives Webdesign

Schon längst werden Webseiten nicht nur am Schreibtisch, sondern auch auf mobilen Geräten mit kleinen Viewports angeschaut.

  1. Informiere Dich über responsives Webdesign
  2. Setze die Breiten so, dass die Inhalte auf allen Bildschirmen gut zu lesen sind.
  3. Mit media queries kannst Du verschiedene CSS-Regelsätze für verschiedene Breiten festlegen.

Webprojekt

Aus Deiner ersten Seite wird ein richtiges Webprojekt.

Anlegen von Unterseiten

  1. Verteile Deine Inhalte auf mehrere Unterseiten.
  2. Füge eine Navigation ein und ...
  3. Verlinke jede Seite miteinander.

zentrale Formate

  1. Lager Dein CSS in ein eigenes Stylesheet aus.
  2. Binde es auf allen Deinen Seiten ein.

Weblinks