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

Aus ZUM-Unterrichten
(N)
 
(typo)
Markierung: 2017-Quelltext-Bearbeitung
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 7: Zeile 7:
## Jetzt kannst Du den Inhalt der Seite nach Belieben ändern!
## Jetzt kannst Du den Inhalt der Seite nach Belieben ändern!
# Neue Elemente
# Neue Elemente
## Kannst Du Deine Hobbys nach Priorität sortieren? Finde das richtige HTML-Element dafür!
## Kannst Du Deine Hobbys in einer Liste nach Priorität sortieren? Finde das richtige HTML-Element dafür!
## Kannst Du einen Verweis zu Deinem Sportverein, Deiner schule oder Deinem Hobby einbauen?
## Kannst Du einen Verweis/Link zu Deinem Sportverein, Deiner Schule oder Deinem Hobby einbauen?
## Füge Bilder in Deine Webseite ein!
## Füge Bilder in Deine Webseite ein!
# Unten findest Du interaktive Übungen. Weißt Du schon alles?}}
# Unten findest Du interaktive Übungen. Weißt Du schon alles?}}
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>

Aktuelle Version vom 14. Januar 2020, 12:08 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 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“