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: | ||
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 || <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> | |||
|} | |||
</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
- Erstelle Deine eigene Webseite!
- Kopiere den untenstehenden Code in einen Code-Editor wie NotePad++.
- Speichere es als
meineSeite.html
- Ö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?
<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>
- HTML als Auszeichnungssprache
- meine erste Webseite
- unsichtbar, aber nötig: Dokumentstruktur
- Jetzt kommt Farbe ins Spiel: CSS
- responsives Mehrspaltenlayout
- 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