HTML und CSS/Meine erste Webseite: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
(N)
 
(Zwischenstand)
Markierung: 2017-Quelltext-Bearbeitung
Zeile 34: Zeile 34:


== Interaktive Übungen ==
== Interaktive Übungen ==
=== semantische Auszeichnung einer Webseite ===
<div class="zuordnungs-quiz">
Ordne die HTML-Elemente den Beschreibungen zu.
{|
| Überschrift erster Ordnung || &lt;h1>
|-
| Sidebar für zusätzliche Informationen || &lt;aside>
|-
| Textabsatz || &lt;p>
|-
| Verweis auf eine andere Seite || &lt;a href="">
|-
| Einbindung eines Bilds || &lt;img src="" alt="">
|-
| Kopfbereich || &lt;header>
|}
</div>
=== Quiz ===
<iframe src="//LearningApps.org/watch?app=540054" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
=== HTML-Syntax - Zuordnung ===
<iframe src="//LearningApps.org/watch?app=235834" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

Version vom 12. August 2019, 09:23 Uhr

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 nach Priorität sortieren? Finde das richtige HTML-Element dafür!
    2. Kannst Du einen Verweis 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=97442“