Was ist ein HTML-Dokument? - Ein WWW-Dokument, das mit anderen Dokumenten verknüpft ist. - Es kann beinhalten: Text, Bilder, Geräusche, Videos, Animationen, dynamische Inhalte (passen sich an den Benutzer an) - Inhalt wird mit “HTML-Tags” (dt. Etiketten) formatiert. - HTML bestimmt also das Aussehen des Inhalts.
Übung 1: Einfacher Text - Ordner erstellen, Textdatei “index.txt” erstellen, Endung in “.html” ändern - Datei in Texteditor öffnen (z.B. Notepad) - Text/Refrain eines Liedes reinschreiben. - Dokument speichern (nicht schließen). - Dokument in einem Browser öffnen.
Übung 2: Zeilenumbruch - Der Refrain hat mehrere Zeilen, die Darstellung berücksichtigt aber nicht die ENTER Taste. - - Dieses Tag wird verwendet, um den folgenden Text in eine neue Zeile zu versetzen. - Ändert den Refrain so, dass jede Zeile auch wirklich eine neue Zeile hat.
Übung 3: Überschriften - Möchte man angeben, dass eine Zeile eine Überschrift darstellt, muss man sie mit einem entsprechenden Tag “umschließen”. - Meine Überschrift - “1” bedeutet “sehr groß”, “6” ist das kleinste. - Fast alle Tags werden geschlossen, um Anfang und Ende zu markieren. Geschlossen wird mit:
Übung 4: Absätze - Wenn ein Textblock einen Absatz darstellt, umschließt man in mit folgendem Tag:... - “p” steht für Paragraph. - Formatiert alle Absätze in eurem Lied dementsprechend.
Übung 5: Dokumenteinteilung - Möchte man ein größeres Dokument erstellen, sollte man folgende Struktur verwenden: Hier kommen generelle Dokumentinfos rein. <body Hier kommen die Inhalte rein.
Übung 6: Seitentitel - In welchem Bereich der Seitenstruktur wird man den Seitentitel festlegen? - Der benötigte Tag ist:... - Fügt eurem HTML-Dokument eine Rahmen- struktur und einen Titel hinzu.
Übung 7: Listen (1/2) - Möchte man eine Liste erstellen, die mehrere Elemente aufzählt, verwendet man diese Tags:... - Erstellt eine neue HTML Seite mit Head, Title, Body, einer Überschrift und einem kurzen Einkaufszettel.
Übung 7: Listen (2/2) - Eine Variation dieser einfachen Listen sind die numerierten Listen. Der entsprechende Tag ist:... - Das ol-Attribut type gibt die Art der Nummerierung an und kann folgende Werte haben: i, I (großes i), a, A, 1
Übung 8: Textstil - Wenn man einen Textblock formatieren möchte, kann man in mit folgendem Tag umschließen:... - Mögliche Attribute sind: size (Größe), face (Schriftart) - Vergrößert den ersten Buchstaben jedes Para- graphen und verändert seine Schriftart.
Übung 9: Links (1/2) - Am wichtigsten für Hypertext Dokumente sind die Links, Verweise auf andere Hypertext Seiten. - Wir kennen zwei Arten von Links: ~ relative Links ~ absolute Links - Ein Link wird immer einem Teil des Dokument- inhaltes hinzugefügt, z.B. einem Textbereich, einem Bild, usw.
Übung 9: Links (2/2) - Links zu anderen Seiten werden folgendermaßen gestaltet: Suche oder Hauptseite - Was ist der Unterschied? - Fügt eurer zweiten Seite einen relativen Link auf die erste hinzu. - Und die erste Seite verlinkt ihr mit der zweiten.
Hausaufgabe Formatiert die Inhalts- und Quellenangabe des Vortrages, die am nächsten Montag abzugeben ist, mit HTML. Verwendet mehrere Tags, die wir euch heute vorgestellt haben. ~ Klasse und Fach ~ (Absoluter) Link auf unsere Homepage ~ Titel Vortrag ~ Euer Name ~ Inhaltsangabe (als normale Liste) ~ Quellenangabe (als nummerierte Liste)