Gestalten einer Webseite mit HTML
Kursthemen
-
Informatik
Einführung in HTML
5. Schulstufe
-
Aufgabe 1
Erstelle deine erste HTML Seite!
- Schau dir zunächst die beiden Videos an - sie zeigen dir die Grundlagen zum Thema HTML.
- Starte einen Texteditor (z.B. Notepad oder Notepad++) - Word ist nicht wirklich geeignet dafür. Steht dir kein HTML-Editor zur Verfügung, dann arbeite auf dieser Seite.
- Speichere die Datei unter index.html ab. Achte darauf, dass am Ende nicht noch .txt steht.
- Kopiere folgendes HTML-Grundgerüst in den Editor:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title>Wichtige Infos über den Wolf</title> <meta name="Familienname" content ="Wichtige erste Infos"> </head> <body> Steckbrief über den Wolf </body> </html>
- Entscheide dich für ein bestimmtes Thema und ändere den Inhalt dann entsprechend ab!
- Speichere die Datei erneut im Editor ab und betrachte dein Ergebnis in einem Browser.
-
Aufgabe 2
Wir peppen nun die Seite ein wenig auf!
Das Grundgerüst der Seite ist bereits fertig, nun werden wir noch einige Elemente einbauen:
- Eine Hintergrundfarbe: Ändere dazu <body> auf <body style="background-color:green">. Du kannst natürlich auch andere unterstützte Farben (oder auch einen HTML-Farbcode) eintragen.
- Eine Überschrift: Schreibe dazu den Eintrag Steckbrief über den Wolf in <h1>Steckbrief über den Wolf</h1> um. Soll die Überschrift kleiner sein, dann kannst du auch h2 anstelle von h1 verwenden.
- Einen Zeilenumbruch: Diesen erhält man ganz einfach mit <br>
- Eine unsortierte Liste: Ergänze unter der Überschrift folgende Einträge:
<br>
<ul>
<li>Lat. Name: Canis lupus</li>
<li>Ordnung: Raubtiere</li>
<li>Ernährung: Fleischfresser</li>
</ul>
<br>
Möchtest du eine sortierte Liste, dann verwende <ol> anstelle von <ul> - Einen Link zu einer anderen Website: Möchtest du beispielsweise einen Link zu Google einfügen, dann ergänze <a href="https://www.google.at" target="_blank" title="Google">www.google.at</a> unter deiner Liste.
target="_blank" bewirkt, dass die Seite in einem neuen Tab geöffnet wird. Fährt man mit der Maus über das verlinkte Wort, dann wird der title angezeigt. - Ein Bild: Speichere das gewünschte Bild (entweder im jpg oder gif-Format) im selben Ordner ab, wo auch deine index.html Datei gespeichert ist.
Mit <img src="deinbildname.gif" alt="alternative_Bildname" height="42" width="42"> bettest du die Bilddatei deinbildname.gif mit der Größe 42 x 42 Pixel ein. - Ein Youtube-Video: Ergänze folgenden Code:
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>
Alternativ kannst du dir auch folgendes Video anschauen. Es zeigt ebenso, wie die Einbettung funktioniert.; - Eine Google-Maps-Karte: Auch das ist schnell erledigt: Schau dir diese Anleitung an oder das Video: ;
Die Karte rund um den Stephansdom erhältst du, wenn du folgendes einfügst:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2658.906784357544!2d16.371282015990936!3d48.208411379229254!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476d079f223feccf%3A0x179757f3fadc3159!2sDomkirche+St.+Stephan!5e0!3m2!1sde!2sat!4v1543323551174" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
-
Aufgabe 3
Und weil ihr jetzt schon so viel über HTML wisst, könnt ihr euer Wissen gleich ausprobieren.
Ergänzt noch einige Elemente, sodass ihr eine informative Seite gestaltet habt. Solltet ihr weitere Elemente hinzufügen wollen, so schaut doch einfach einmal auf folgenden Seiten vorbei:
-
-
Informationen für Lehrkräfte
Fachbezug Informatik Bezug zum
FachlehrplanSchulstufe 5.-8. Schulstufe Zeitaufwand 1- 2 Unterrichtseinheiten Handlungsdimension - Wissen und Verstehen
- Anwenden und Gestalten
- Reflektieren und Bewerten
Digitale Grundbildung 2. Informations-, Daten- und Medienkompetenz
2.1 Suchen und finden8. Computational Thinking2.1.1 Schülerinnen und Schüler formulieren ihre Bedürfnisse für die Informationssuche,2.1.2 Schülerinnen und Schüler planen zielgerichtet und selbstständig die Suche nach Informationen, Daten und digitalen Inhalten mit Hilfe geeigneter Strategien und Methoden (z.B. Suchbegriffe), passender Werkzeuge bzw. nützlicher Quellen.
8.1 Mit Algorithmen arbeiten8.1.2 Schülerinnen und Schüler verwenden, erstellen und reflektieren Codierungen (z.B. Geheimschrift, QR- Code),
8.1.3 Schülerinnen und Schüler vollziehen eindeutige Handlungsanleitungen (Algorithmen) nach und führen diese aus.Anmerkung Tags HTML, Notepad++, Google Maps, Bilder, Youtube -
Diese(s) Werk von Christian Wurzer für www.digikomp.at steht unter einer Creative Commons Namensnennung 3.0 Unported Lizenz.