HTML/CSS Lektion 1

<!DOCTYPE html PUBLIC „-W3CDTD XHTML 1.0 StrictEN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> <html xmlns=„http://www.w3.org/1999/xhtml“ lang=„de“ xml:lang=„de“ > <head> hallo <meta http-equiv=„content-type“ content=„text/html; charset=ISO-8859-1“ /> </head> ===== Einführung ===== Lies dir die Einführung in die aktuellen Webtechniken unter der Adresse
http://fwpf-webdesign.de/einfuehrung durch (alle Abschnitte) und beantworte die folgenden Fragen in eigenen Worten¹⁾: - 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 ===== <!DOCTYPE html PUBLIC „-W3CDTD XHTML 1.0 StrictEN“ „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>

Übung

Erstelle auf deinem Arbeitsrechner eine html-Datei mit Dokumenttyp-Deklaration, Head und Body und öffne diese in einem Browser.
Lade die Datei auf deinen Übungswebspace und öffne die URL deines Webspaces.

Übung

Wichtige Strukturelemente für Texte sind:

Überschriften (in verschiedener Ebene)
Absätze
Auflistungen („Spiegelstriche“)
Aufzählungen („Nummern“)

Finde für jedes Strukturelement heraus, wie die zugehörige HTML Auszeichnung aussieht. Schreibe ein gültiges HTML-Beispieldokument, das alle Auszeichnungen enthält.

HTML/CSS Lektion 2

¹⁾

Cut'n'Paste ist verboten!