Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet

womaninweb

·

Willkommen in der Weltgemeinschaft!

HTML wird überall verstanden, ist also international. Und es ist auch nicht so schwierig, wie es auf den ersten Blick vielleicht aussehen mag. Wenn jemand über das Internet der Welt etwas von Dauer mitteilen möchte, kommt um HTML nicht herum. HTML ist eine Auszeichnungssprache und bedeutet HyperText Markup Language. Sie ist durch SGML (Standard Generalized Markup Language) definiert und ist sogar als ISO-Norm 8879 festgeschrieben. Da kann uns schon mal nichts passieren.

Wie funktioniert denn nun HTML?

HTML zeichnet Inhalte von Dokumenten aus. Es folgt dabei einer hierarchischen Gliederung. Wie bei gedruckten Texten besteht der Inhalt eines HTML Dokuments aus Überschriften verschiedener Ordnungen, Absätzen, Texten, Tabellen, Listen und Grafiken. Diese verschiedenen Elemente haben einen spezifischen Namen und einen Geltungsraum:

<Ueberschrift>Text der Überschrift</Ueberschrift>

Der Geltungsraum der Beschreibung liegt zwischen diesen beiden Zeichen

< ... >Geltungsraum< /... >

Der Browser, als Interpret des HTML, löst die Auszeichnungsmarkierungen auf und stellt die Elemente dann optisch am Bildschirm dar. Eine der wichtigsten Eigenschaft des HTML ist einen Verweis (Hyperlink) setzen zu können. Damit werden nicht nur Dokumente innerhalb eines Projekts verknüpft, sondern kann auch auf beliebige Adressen im World Wide Web verweisen.

Wie sieht nun so ein HTML Dokument aus?

Das Grundgerüst besteht aus folgenden Teilen:

<Dokumenttyp>
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>
</body>
</html>

Der erste Teil ist die Dokumententyp-Deklaration. Darin wird angegeben, welche HTML Version zur Anwendung kommt. Möchte man z.B. HTML 4.01 verwenden, muss für den Dokumenttyp

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

angegeben werden. Je nach Angabe, weiss der Browser um welche HTML Version es sich handelt und geht dann davon aus, dass die für diesen Typ definierten Regeln eingehalten werden. Die Angabe des Dokumenttyps muss jetzt nicht auswendig gelernt werden. Später werden wir sehen, dass gute Webdesign – Programme diesen automatisch erstellen. Allerdings sollte man schon diese Angabe interpretieren können. Wenn wir zu XHTML wechseln, werden wir sehen, dass diese Angabe sich von dem Beispiel hier oben unterscheidet.

Der gesamte Inhalt einer HTML-Datei ist in <html> und </html> und eingeschlossen. Dort enthalten sind der Kopf <head>...</head>, in dem der Titel der Seite und so genannte Meta-Angaben stehen. Diese sind z.B. auch für Suchmaschinen wichtig, da diese die Inhalte im Head-Bereich auslesen. Im Bereich <body>...</body> stehen die anzuzeigenden Inhalte, wie Überschriften, Texte, Verweise usw. Da kommt dann Butter bei die Fische:-)

Übrigens, alles was innerhalb dieses Bereiches angegeben wird, wird auch vom Browser angezeigt!

Am Beginn eines jeden Projektes sollte erstmal das Grundgerüst in den Editor eingegeben werden. Als Nächstes wird dem Dokument ein Titel gegeben. Dies ist ein Muss und hat besonders wichtige Gründe: Er wird in dem Browser oben in der Titelleiste angezeigt, bzw. in den Tabs (Karteireitern). Angezeigt wird der Titel ebenfalls, wenn ein Lesezeichen auf dieses Dokument gesetzt wird, und zu guter Letzt wird er von vielen Suchmaschinen als Link auf das Dokument aufgeführt. Der Titel sollte nicht zu lang, aber bezüglich der Inhalte aussagekräftig sein.

Weitere Angaben, wie Beschreibung, Schlüsselwörter, Autor u.ä. werden in sogenannten Meta-Angaben im head notiert. Dies sähe beispielsweise so aus:

Die Meta-Angabe hat in der Regel zwei Attribute. Das erstere lautet name und das zweite content. So wird z.B. mit name die Eigenschaft "author" gegeben, dessen content den Wert Marius Ziehender hat. Es gibt viele weitere Meta-Angaben, die wir aber jetzt nicht alle durchgehen wollen.

So, für diese Woche war es erst ein kleiner Einstieg, nächste Woche kommt’s ein wenig heftiger.

Übung

1.	Öffne den Windows Notepad und speichere Deine Datei z.B. als uebung.html ab
2.	Kopiere nun die Dokumenttypdeklaration aus dem Text hier oben heraus und füge diese korrekt in Dein Notepad Dokument ein
3.	Füge nun manuell das HTML Grundgerüst in das Dokument ein, verwende hierbei nur einen Titel, die Meta-Tags sind hier nicht notwendig
4.	Speichere Dein Dokument und teste es beispielsweise im Browser, Du solltest den Titel sehen können
5.	Schreibe zum Beispiel im Inhaltsbereich Deines Dokuments den Text 'Hallo Welt' und aktualisiere die Ansicht im Browser
6.	Yeah, fertig ist Dein erstes HTML Dokument - Viel Glück

Gruß

·

maninweb

Dieser Beitrag dient nur zur Sortierung

Office Forum -> Workshops -> Workshop: Webdesign für Einsteiger
zurück: Kapitel 02 - Teil 2 - Es lebt! weiter: Kapitel 01 - Zielgruppendefinition		Unbeantwortete Beiträge anzeigen
	Status: Diskussion	Diese Seite Freunden empfehlen Zu Browser-Favoriten hinzufügen

Forum / Themen		Antworten	Autor	Aufrufe	Letzter Beitrag
Verwandte Themen
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 01 - Zielgruppendefinition	1	womaninweb	4005	21. Dez 2007, 16:06 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 2 - Es lebt!	1	womaninweb	3297	21. Dez 2007, 16:05 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch!	1	womaninweb	2706	21. Dez 2007, 16:05 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 1 - Farbenrausch	2	womaninweb	2908	21. Dez 2007, 16:04 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle	1	womaninweb	2528	21. Dez 2007, 16:03 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 4 - Pimp my Site	1	womaninweb	2675	21. Dez 2007, 16:02 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt	1	womaninweb	2108	21. Dez 2007, 16:01 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!	2	womaninweb	1875	21. Dez 2007, 16:00 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 2 - Butter bei die Fische	1	womaninweb	2071	21. Dez 2007, 16:00 maninweb
	Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell	5	maninweb	2120	16. Sep 2008, 17:19 womaninweb
	Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle	19	maninweb	2687	13. Sep 2008, 19:55 womaninweb
	Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 3 - Feingeschliffen	3	maninweb	1108	25. Dez 2007, 19:24 Lisa

- Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet

- AW: Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet

Du kannst Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum antworten. Du kannst deine Beiträge in diesem Forum nicht bearbeiten. Du kannst deine Beiträge in diesem Forum nicht löschen. Du kannst an Umfragen in diesem Forum nicht mitmachen. Du kannst Dateien in diesem Forum nicht posten Du kannst Dateien in diesem Forum herunterladen


----> Diese Seite Freunden empfehlen <------	Impressum - Besuchen Sie auch: Warum