Dies ist eine alte Version des Dokuments!
HTML - Lektion 1
Einführung
Aufgabe
Lies dir die Einführung in die aktuellen Webtechniken unter der Adresse http://fwpf-webdesign.de/einfuehrung durch (alle Abschnitte). Du solltest danach in der Lage sein, die folgenden Fragen mündlich in eigenen Worten zu beantworten:
- Wer war der „Erfinder“ des „WWW“? Was bedeutet „Hypertext“? Wofür steht die Abkürzung „HTML“?
- Wofür steht die Abkürzung „DNS“, welche Aufgabe hat dieser Dienst im Internet?
- Welches sind die zwei Ebenen des Webdesigns?
- Erkläre die Begriffe Website, Webseite und Homepage.
Textauszeichnung mit HTML
- Mit HTML wird die inhaltliche Struktur festgelegt – nicht das Aussehen/Layout.
- Die Auszeichnung des Inhalts erfolgt in HTML durch Anfangs- und Endmarkierungen (Tags):
<mstart>auszuzeichnender Text</mende> - Start-Tag, Inhalt und Ende-Tag bilden ein HTML-Element
- Elemente können verschachtelt werden, dürfen sich dabei aber nicht überschneiden.
Beispieldokument
- geruest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de" > <head> <title>Titel der Seite</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> Hallo Welt! </body> </html>
Übungen
- Erstelle auf deinem Arbeitsrechner in einem Texteditor eine html-Datei mit Dokumenttyp-Deklaration, Head und Body. Speichere sie unter einem passenden Namen ab und öffne sie dann in einem Browser ( → Betrachte die Datei lokal).
- Verändere den Inhalt deiner Datei (füge z.B. ein Wort hinzu) und betrachte deine Änderungen. Notiere detailliert die notwendigen Arbeitsschritte, um die Ausgabe einer HTML-Datei zu verändern.
Die wichtigsten Strukturelemente für Texte sind:
- Überschriften (in verschiedener Ebene)
- Absätze
- Auflistungen („Spiegelstriche“)
- Aufzählungen („Nummern“)
Übung
Übungen
Finde für jedes Strukturelement heraus, wie die zugehörige HTML Auszeichnung aussieht. Schreibe ein gültiges HTML-Beispieldokument, das alle Auszeichnungen enthält.