HTML und CSS/Meine erste Webseite

Aus ZUM-Unterrichten
< HTML und CSS
Version vom 14. Januar 2020, 12:08 Uhr von Matthias Scharwies (Diskussion | Beiträge) (typo)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Die druckbare Version wird nicht mehr unterstützt und kann Darstellungsfehler aufweisen. Bitte aktualisiere deine Browser-Lesezeichen und verwende stattdessen die Standard-Druckfunktion des Browsers.

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


Aufgabe
  1. Erstelle Deine eigene Webseite!
    1. Kopiere den untenstehenden Code in einen Code-Editor wie NotePad++.
    2. Speichere es als meineSeite.html
    3. Öffne es in einem Browser.
    4. Jetzt kannst Du den Inhalt der Seite nach Belieben ändern!
  2. Neue Elemente
    1. Kannst Du Deine Hobbys in einer Liste nach Priorität sortieren? Finde das richtige HTML-Element dafür!
    2. Kannst Du einen Verweis/Link zu Deinem Sportverein, Deiner Schule oder Deinem Hobby einbauen?
    3. Füge Bilder in Deine Webseite ein!
  3. 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>
Devicon-html5-plain-wordmark.svg

HTML und CSS

  1. HTML als Auszeichnungssprache
  2. meine erste Webseite
  3. unsichtbar, aber nötig: Dokumentstruktur
  4. Jetzt kommt Farbe ins Spiel: CSS
  5. responsives Mehrspaltenlayout
  6. 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

Abgerufen von „https://unterrichten.zum.de/index.php?title=HTML_und_CSS/Meine_erste_Webseite&oldid=110893“