Quelltext der Seite HTML und CSS/Meine erste Webseite

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

{{Aufgabe|#Erstelle Deine eigene Webseite!
## Kopiere den untenstehenden Code in einen [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Webprojekte/entwickeln#Code-Editor Code-Editor] wie NotePad++.
## Speichere es als <code>meineSeite.html</code>
## Ö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?}}

<source lang="html5"><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></source>

{{HTML und CSS}}

== 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>