Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 02 - Teil 2 - Es lebt!
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
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten.     Status: Diskussion Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
14. Sep 2007, 14:07
Rufname:
Wohnort: Aachen

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

Nach oben
       

·Kapitel 02 - Teil 2 - Es lebt!

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; (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ß

V 1.00 - (C) by Maninweb.de - All rights reserved··

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
maninweb
Microsoft Excel MVP 2014


Verfasst am:
21. Dez 2007, 17:05
Rufname: maninweb
Wohnort: Aachen


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

Nach oben
       

Dieser Beitrag dient nur zur Sortierung
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
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

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 01 - Zielgruppendefinition 1 womaninweb 7448 21. Dez 2007, 17:06
maninweb Kapitel 01 - Zielgruppendefinition
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch! 1 womaninweb 5456 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 3 - Es lebt immer noch!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML 1 womaninweb 5132 21. Dez 2007, 17:04
maninweb Kapitel 02 - Teil 4 - Der Konformist – XHTML
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 1 - Farbenrausch 2 womaninweb 6250 21. Dez 2007, 17:04
maninweb Kapitel 03 - Teil 1 - Farbenrausch
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 1 womaninweb 5416 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 3 - Stein auf Stein ... 1 womaninweb 5233 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 3 - Stein auf Stein ...
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt 1 womaninweb 4737 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine? 1 womaninweb 4361 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell 1 womaninweb 4910 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 2 womaninweb 4348 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 2 - Butter bei die Fische 1 womaninweb 4459 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 2 - Butter bei die Fische
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 3 - Feingeschliffen 1 womaninweb 4240 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 3 - Feingeschliffen
 

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