Benutzer:Antonius und HTML und CSS/Meine erste Webseite: Unterschied zwischen den Seiten

Aus ZUM-Unterrichten
(Unterschied zwischen Seiten)
Keine Bearbeitungszusammenfassung
 
(typo)
Markierung: 2017-Quelltext-Bearbeitung
 
Zeile 1: Zeile 1:
{{webmo staff
Der Weg zur ersten Webseite ist denkbar einfach und bringt schnelle Ergebnisse!
|username=Antonius
|vorname=Karl
|nachname=Vörckel
|ueber_mich=36 Jahre lang habe ich in Gießen und Laubach als katholischer Religionslehrer im Auftrag des Bistums Mainz gearbeitet. Seit meiner Pensionierung arbeite ich für das Medienhaus der katholischen Kirche Deutschlands in Bonn an einem Online Unterrichtswerk. In ZUM Unterrichten würde ich gerne die Materialien des ZBK (ZUM-Wiki-Buch Katholische Religion) überabeitet neu aufbauen. Es geht mir dabei um interaktive Angebote, mit denen Schülerinnen und Schüler unmittelbar arbeiten können.


[[Datei:Wahrhaftigkeit]]
{{Aufgabe|#Erstelle Deine eigene Webseite!
[[Datei:Lernpfad Islam]]
## Kopiere den untenstehenden Code in einen [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Webprojekte/entwickeln#Code-Editor Code-Editor] wie NotePad++.
|wiki db id=106
## 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>

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>


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