Kapitel 02 - Teil 2 - Es lebt!

womaninweb

·

Hallo zusammen...

Ja, Doktor Frankenstein war begeistert, als sich der Körper seines Wesens erhob. Erwecken wir also mal den „Körper“ in einem HTML Dokument – den body zum Leben. Dort wird das notiert, was schließlich für den Benutzer zu sehen ist. Grundsätzlich kann man sich das wie ein Buch mit Überschriften, Kapiteln, Bildern und Tabellen vorstellen. All diese Teile sind Elemente mit speziellen Namen, von denen wir hier die gebräuchlichsten vorstellen möchten.

Überschriften

Beginnen wir, wie in einem anständigen Buch, mit den Überschriften. In HTML gibt es sechs Überschriftenebenen. Diese reichen von <h1> bis <h6> (h = heading = Überschrift);
<h1> ist die erste Ebene und wird am größten dargestellt. Davon ausgehend werden die folgenden Überschriftenebenen stetig kleiner wiedergegeben. Der Geltungsbereich einer Überschrift beginnt mit <h1> und wird mit </h1> abgeschlossen.

<h1>Ich bin eine Überschrift erster Ebene</h1>

Eine Überschrift ist ein eigener Absatz, d.h. es muss vor und nach einer Überschrift kein Absatz ausgezeichnet werden.

Absätze

Wo wir gerade bei den Absätzen sind. Die braucht man schon gelegentlich zur optischen Gliederung eines Textes, ohne gleich wieder eine Überschrift erstellen zu müssen. Dieser beginnt mit <p> (p = paragraph = Absatz) und wird mit </p> geschlossen.

<p>Hier wurde ein Absatz erstellt und wieder geschlossen</p>

In einem Absatz dürfen keine weiteren blockerzeugenden Elemente wie Überschriften, Textabsätze, Tabellen oder Listen enthalten sein. Dies kann im Browser zu unerwünschten Ergebnissen führen.

Zeilenumbruch

Normalerweise wird Text in Absätzen und anderen blockerzeugenden Elementen automatisch, je nach Bildschirmdarstellung, umgebrochen. Ein Umbruch kann jedoch auch erzwungen werden. Mit

(br = break = Umbruch) wird an der gewünschten Stelle ein Umbruch erzeugt. Das

ist ein inhaltsleeres Element und muss in HTML nicht geschlossen werden. Da wir aber nachher feines XHTML anwenden werden, sei hier der Hinweis erlaubt, dass in konformen XHTML inhaltsleere Elemente im selben Tag mit Leerzeichen und Slash wieder geschlossen werden.
Das sieht dann so aus:

.

Leerzeichen ohne Umbruch

Eine weitere Möglichkeit unerwünschte Umbrüche zu vermeiden ist das geschützte Leerzeichen. Statt eines normalen Textleerzeichens wird   (nbsp = nonbreaking space = Leerzeichen ohne Umbruch) gesetzt. Dies verhindert, dass bei einem normalen Leerzeichen ein Umbruch erfolgt.

Listen

Es gibt zwei verschiedene Arten von Listen, die für uns vorerst von Belang sind: die Aufzählungs- bzw. unsortierte Liste und die nummerierte Liste. Die Aufzählungsliste wird mit <ul> (ul = unor-
dered list = unsortierte Liste) eingeleitet und wird mit </ul> geschlossen. Innerhalb dieses Geltungsbereich sind die Listenelemente <li>…</li> (li = list item = Listeneintrag) untereinander aufgeführt. Die Listeneinträge werden mit einem Aufzählungszeichen (Bullet) versehen, deren Darstellung aber, je nach Browser, variieren.

Code:

<ul>
   <li>erster Eintrag</li>
   <li>zweiter Eintrag</li>
   <li>und so weiter</li>
</ul>

Aufzählungslisten können auch ineinander verschachtelt werden:

Code:

<ul>
   <li>erster Eintrag
      <ul><li>erster Eintrag zum ersten Eintrag</li>
         <li>zweiter Eintrag zum ersten Eintrag</li>
         <li>und noch ein Eintrag</li>
      </ul>
   </li>
   <li>zweiter Eintrag</li>
   <li>und so weiter</li>
</ul>

Wie ihr seht, kann zwischen <li> und </li> eine weitere Liste eingefügt werden. Dabei können auch andere Listentypen verwendet werden

Z.B. die nummerierte Liste. Sie wird mit <ol> eingeleitet und mit </ol> beendet (ol = ordered
list = nummerierte Liste). Die Listeneinträge werden durchgehend nummeriert.

Code:

<ol>
   <li>Vor mir steht 1.</li>
   <li>Vor mir steht 2.</li>
   <li>Vor mir steht 3., usw.</li>
</ol>

Auch nummerierte Listen können verschachtelt werden, allerdings beginnt in der eingefügten Liste die Nummerierung wieder bei Eins.

Wunderbarerweise hält HTML für Listen auch Eigenschaften bereit. Damit kann die Art der Nummerierung oder das Aussehen des Bullet festgelegt werden.

Für Aufzählungslisten stehen folgende Symbole zur Verfügung:

Nummerierte Listen bieten folgende Arten der Nummerierungen:

Zum Ende dieses Kapitels möchten wir noch aufführen, wie Kommentare in einem HTML Dokument erstellt werden. Sie werden von den Browsern ignoriert und sind sinnvoll, wenn es darum geht bestimmte Textstellen zu kommentieren (was sonst?) oder Anmerkungen zur Erstellung, Strukturierung u.ä. einzufügen. Es ist auch ganz hilfreich, wenn man mit Varianten experimentiert, diese nicht zu überschreiben, sondern auszukommentieren. Der Kommentar wird mit

eingeleitet, es folgt ein beliebig langer Text und wird mit

wieder beendet. Innerhalb dieser Zeichenkette ist allerdings das Minuszeichen, wenn’s geht, zu vermeiden; nicht dass der Browser denkt, der Kommentar wäre beendet.

Übung

Nun gibt es bis zur nächsten Woche noch etwas zum Basteln. Im vorherigen Kapitel habt ihr ja das HTML Grundgerüst kennen gelernt und (hoffentlich) geübt. Jetzt geht es darum den body ein wenig aufzufüllen. Ihr könnt euch hier eine Textdatei runterladen, die einige Blindtexte enthält. Diese Texte mit ihren Überschriften dürft ihr nun formatieren. Probiert ein wenig mit den Überschriften unterschiedlichster Ordnung rum, setzt Textausschnitte in Absätze, versucht dieses auch mal direkt hinter einer Überschrift zu setzen. Schaut euch an, wie die Ergebnisse ausfallen. In der Datei ist auch eine Auflistung enthalten, mit der ihr sowohl eine unsortierte, als auch eine nummerierte Liste erstellen könnt. Die HTML Datei letzter Woche kann natürlich wiederverwendet werden.

Also, frisch ans Werk und bis nächste Woche.

Downloads

Folgende Dateien könnt ihr für die Übung bei uns herunterladen. Die Dateien sind gepackt, so dass diese sich nicht sofort im Browser öffen.

1. Eine inhaltsleere HTML-Datei, (~1 Kb)
2. Eine Textdatei mit Blindtexten zum Einbauen in die HTML-Datei, (~1 Kb)

Programmempfehlung

Hier ein eine Programmempfehlung, die ihr zum Erstellen der HTML nutzen könnt. Natürlich kann auch jeder einfache Texteditor verwendet werden. Von der Verwendung "echter" HTML Pro- gramme, wie z.B. Dreamweaver, Frontpage oder Expression Web raten wir in diesem Stadium des Workshops ab.

Bitte tragt die HTML Anweisungen, wenn Ihr die Übungen macht, von Hand ein. Das übt und vermittelt mehr Sicherheit im Umgang mit dem Code. Immer wenn's Übungen gibt, erhaltet ihr hier eine Datei, die auf der vorherigen Übung aufbaut, so dass ihr nicht nochmal alles von vorne eintragen müsst.

Florian Balmer's Notepad2 ist ein ausgefeilter Texteditor, der sowohl sehr schlank ist und eine Menge Features mehr bietet als der in Windows integrierte Texteditor. Es ist ganz einfach zu installieren, in Deutsch verfügbar (auch wenn die Website in Englisch ist) und meine persönliche Präferenz.

Gruß

·

maninweb

Dieser Beitrag dient nur zur Sortierung

Office Forum -> Workshops -> Workshop: Webdesign für Einsteiger
zurück: Kapitel 02 - Teil 3 - Es lebt immer noch! weiter: Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet		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 02 - Teil 3 - Es lebt immer noch!	1	womaninweb	3196	21. Dez 2007, 17:05 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML	1	womaninweb	2920	21. Dez 2007, 17:04 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle	1	womaninweb	3039	21. Dez 2007, 17:03 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 3 - Stein auf Stein ...	1	womaninweb	2687	21. Dez 2007, 17:03 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell	1	womaninweb	2609	21. Dez 2007, 17:01 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!	2	womaninweb	2289	21. Dez 2007, 17:00 maninweb
	Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 2 - Butter bei die Fische	1	womaninweb	2492	21. Dez 2007, 17:00 maninweb
	Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!	5	maninweb	1814	03. Apr 2008, 12:05 voler
	Workshop: Webdesign für Einsteiger: Ziehender's Welt lebt	3	maninweb	1307	08. Jan 2008, 10:14 maninweb
	Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML!	9	maninweb	1982	27. Dez 2007, 19:08 Lisa
	Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?	7	maninweb	1485	09. Dez 2007, 20:58 Lisa
	Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 2 - Butter bei die Fische	0	maninweb	1273	09. Dez 2007, 13:28 maninweb

- Kapitel 02 - Teil 2 - Es lebt!

- AW: Kapitel 02 - Teil 2 - Es lebt!


----> Diese Seite Freunden empfehlen <------	Impressum - Besuchen Sie auch: Massage Wörrstadt