Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 02 - Teil 3 - Es lebt immer noch!
zurück: Kapitel 02 - Teil 4 - Der Konformist – XHTML weiter: Kapitel 02 - Teil 2 - Es lebt! 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:
21. Sep 2007, 13:00
Rufname:
Wohnort: Aachen

Kapitel 02 - Teil 3 - Es lebt immer noch! - Kapitel 02 - Teil 3 - Es lebt immer noch!

Nach oben
       

·Kapitel 02 - Teil 3 - Es lebt immer noch!

Hallo zusammen,

Weiter geht’s heute mit Tabellen, Bildern und Textauszeichnungen und Hyperlinks.
Legen wir also mit der Tabelle los.

Tabellen wurden ursprünglich zur Darstellung tabellarischer Daten geschaffen. Allerdings haben sie sich in der Vergangenheit alsprobates Werkzeug für die Gestaltung von Seitenlayouts im Webdesign etabliert. XHTML, als striktere Version zu HTML, lässt dies zwar auch zu, ist aber als Mittelwenig elegant und nicht besonders konform.

Bei Tabellen gibt es zwei Möglichkeiten der Darstellung: Mit Gitternetzlinien für tabellarische Daten und die ohne Linien, so genannte "blinde" Tabellen, zum layouten von grafischen Inhalten. Sie unterscheidet nur der Wert des kleinen Attributs border.



Das Grundschema einer Tabelle lässt sich folgendermaßen darstellen:



Wie schon in Tabellendarstellung aufgeführt, wird eine Tabelle mit eingeleitet.Ein (tr=table row=Tabellenzeile) leitet eine neue Tabellenzeile ein. In dieser werden die die entsprechenden Tabellenspalten für die Zeile definiert. In der ersten Zeile können sowohl Kopfzellen (th = table header = Tabellenkopf) als auch gewöhnliche Datenzellen (td = table data = Tabellendaten) definiert werden. Text in Kopfzellen wird meist fett und zentriert ausgerichtet dargestellt. Ab der zweiten Zeile sind nur noch gewöhnliche Datenzellen zulässig. Zellen werden mit , bzw. abgeschlossen.

Innerhalb der Zellen dürfen beliebige Elemente, wie Text und auch Block- und Inlineelemente,als auch weiter Tabellen eingefügt werden. Nichtsdestotrotz sollte innerhalb einer Tabelle die Anzahl der Zellen in jeder Zeile gleich sein. Die Anzahl der Zellen wird in der ersten Zeile festgelegt. Sollte eine Zelle in einer Zeile leer bleiben, so empfiehlt es sich zwischen dem Geltungsbereich ein geschütztes Leerzeichen zu notieren; manche Browser zicken ein wenig und stellen die Zelle als nicht vorhanden dar.



Eine formschöne Tabelle sieht dann in etwa so aus:



Es empfiehlt sich, und nicht nur bei Tabellen, mit Einrückungen zu arbeiten – die Übersichtlichkeit des Codes wird damit ungemein erhöht. Außerdem findet man sich bei späteren Änderungen im Code leichter zurecht.

Es gibt noch einige Möglichkeiten Tabellen zu formatieren, von denen wir hier aber nur die Außen- und Innenabstände behandeln möchten. Die anderen Formatierungen sind teils nur selten notwendig, teils nicht konform und teils viel besser mit CSS zu lösen, wie z.B. Tabellenränder, Hintergrundfarben und -bilder und die Ausrichtung von Zellen.

Um den Abstand zwischen Zeilen und Spalten innerhalb einer Tabelle einzustellen wird das Attribut cellspacing (cellspacing = Zellenabstand) verwendet. Es bestimmt, wie viel Pixel Abstand die Zellen untereinander haben sollen. Mit dem Attribut cellpadding (cellpadding = Zelleninnenabstand) wird der Abstand des Inhalts zum Zellenrand eingestellt. Bei eingestellten border lässt sich der Effekt sehr gut nachvollziehen. Die Attribute werden innerhalb des table Tags notiert:



Zum besseren Verständnis hier noch mal eine Grafik:



Nun zu einem der beliebtesten Elemente auf vielen Webseiten – den Bildern. Bevor ein Bild in ein HTML Dokument eingebunden wird, sollte es in einem entsprechenden Format vorliegen. Die gängigsten sind .gif und .jpg, zunehmend auch .png. Bezüglich der Bildkomprimierung fürs Internet hatten wir schon vor einiger Zeit ein kleines Tutorial ins HTML & CSS Forum gestellt, insofern verzichten wir an dieser Stelle näher darauf einzugehen.

Aus HTML Sicht sind Grafiken Inline-Elemente, die in der strikten Variante nur in Blockelementen, wie Textabsätzen, allgemeinen Bereichen, Tabellen oder einem eingefügt werden sollten. Es ist ein Leerelement, das in HTML keinen Abschlusstag benötigt.



Um XHTML Konformität zu erhalten muss das Element als inhaltsleer gekennzeichnet sein, d.h. folgendermaßen geschlossen werden (kennen wir ja schon vom Zeilenumbruch), Leerzeichen, Slash und Endtag:



Die Attribute src und alt sind Pflichtangaben im Tag (img = image = Bild, src = source = Quelle, alt = alternative = Alternativtext). Mit dem Attribut src wird die Quelle/Referenz des Bildes aufgeführt. Die richtet sich danach, wo das Bild abgelegt ist. Ist es im selben Verzeichnis, wie das HTML Dokument, so reicht der Dateiname des Bildes aus.



Ist das Bild in einem eigenen Ordner (z.B. "bilder") auf derselben Ebene wie das HTML Dokument abgelegt, sieht die Referenzierung so aus:



Hat der Ordner "bilder" einen Unterordner "wahnsinn", in dem das Bild abgelegt ist:




Naja, und so weiter...

Anders sieht es aus, wenn das Bild in einem übergeordneten Verzeichnis abgelegt ist. Dann muss mit dieser Zeichenfolge "../" nach "oben" referenziert werden:





Das letzte Beispiel heißt: gehe eine Ebene höher in den Ordner "bilder" und hole Bild bilderwahn.jpg. Dies kann je nach Verzeichnisstruktur fortgeführt werden.
Es kann auch ein absoluter Pfad angegeben werden:



In dem alt Attribut wird ein Alternativtext notiert, der im Browser erscheint, falls das Bild (noch) nicht geladen ist. Sollte es sich bei dem Bild um eine Schmuckgrafik handeln so kann das alt Attribut auch als leer ausgezeichnet werden: alt="". Wenn die Grafik mit einem erklärenden Tooltip versehen werden soll, kann zusätzlich das Universalattribut title notiert werden.



Zusätzlich zu den Pflichtattributen ist sehr sinnvoll die Höhe und Breite des Bildes anzugeben. Der Browser kann diese bereits auslesen und entsprechend Platz beim Aufbau der Seite lassen, bevor er die Header-Information der Grafik zur Verfügung hat.



Werden die Maße der Höhe (height) und Breite (width) ohne Einheiten notiert, so werden sie in Pixel gesetzt. Andere Varianten solltet ihr, außer als Gag, nicht setzten. Mit relativen Einheiten werden die Grafiken meistens grauenhaft verzerrt.

Rahmen um Grafiken zu erstellen wird mittlerweile missbilligt. Man kann dieses aber noch "straflos" in CSS machen.

So, haben wir noch was vergessen?
Eine Kleinigkeit vielleicht noch: in Verbindung mit JavaScript kann an eine Grafik auch das Attribut name vergeben werden. Damit erhält die Grafik eine eindeutige Identität, die sich mit dem JavaScript Objekt images ansprechen lässt.



Grafiken können auch sinnvoll als Verweis eingesetzt werden. Die richtige Grafik kann gelegentlich aussagekräftiger sein als mancher Text. Zunächst brauchen wir ein a (a = anchor = Anker) Element. Damit alleine ist es aber nicht getan: Um ein Ziel angeben zu können, brauchen wir das Attribut href (href=hyper reference=Hypertext-Referenz). Der Verweis kann sowohl auf Inhalte der eigenen Seite verweisen, als auch auf Dokumente im Netz. Zwischen und wird das Bildelement mit seinen Attributen eingefügt.





In den obigen Beispielen wird das img-Element mit dem Attribut border="0" angegeben. Dies ist nach dem aktuellen HTML-Standard missbilligt. Ich führe es nur deshalb auf, weil eine, mit einem Verweis belegte Grafik, ohne diese Angabe einen Rahmen erhält. Umgehen kann man diese Angabe, wie schon oben erwähnt, mit einer zentralen CSS-Angabe.

Grafiken als Verweise zu nutzen ist natürlich schon die erweiterte Variante. Die einfachste und ursprünglichste ist die, Text mit einen Verweis zu belegen.



Bei Textverweisen sollte man darauf achten, dass sie inhaltlich aussagekräftig sind. Die beliebten "Mehr Infos hier" (ja, wo denn?) oder "weiter" (weiter – wohin?) reizen vielleicht Neugierige. Aus Sicht der Barrierefreiheit ist das völlig indiskutabel.

Nun kann, neben dem href, auch ein Zielfenster bestimmt werden. Standardmäßig öffnet der Browser den Verweis im bestehenden Fenster. Mit dem Attribut target (target = Ziel) kann gezielt bestimmt werden, ob ein neues Fenster geöffnet oder das Ziel im aktuellen Fenster angezeigt wird. Die Werte für target lauten _blank, für ein neues Fenster und _self für das eigene Fenster. Beide Werte werden am Anfang mit einem Unterstrich eingeleitet.



Die Verwendung des Attributs target ist nur im Dokumententyp Transitional zulässig, da es dabei eigentlich um ein Attribut aus Framesets handelt, die eine andere Dokumentendeklaration haben.

In Framesets, die übrigens zum alten Eisen gehören und hier nicht weiter behandelt werden, kann über dieses Attribut der Inhalt eines Frames ausgetauscht werden. Dabei kann nur auf eine einzige Datei verwiesen werden; möchte man den Inhalt mehrerer Frames ändern, so muss auf JavaScript zurückgegriffen werden. Jeder Frame sollte im Frameset einen eindeutigen Namen erhalten. Über diesen eindeutigen Namen kann der Frame angesprochen werden:



Speziell für Framesets gibt es auch zwei fest definierte Werte für das Attribut target: _top und _parent. target="_parent" bewirkt, dass das Ziel des Verweises in dem Zustand des Fensters angezeigt wird, wie es vor dem Aufruf des Frameset war. Das target="_top" zeigt das Verweisziel im gesamten Anzeigefenster an. Soviel zu Verweisen in Frames.

Aufmerksame Leser werden festgestellt haben, dass in den letzten Beispielen der Text etwas merkwürdig aussieht. Meist sind eure Browser, also die mit lateinischer Schrift, auf den Zeichencode nach iso 8859-1 oder UTF-8 eingestellt. In einem HTML-Dokument kann und sollte auch ein Zeichensatz angegeben werden, damit der Browser Bescheid weiß, welchen Zeichensatz er anwenden soll. Fehlt diese Angabe greift er auf die voreingestellte Kodierung zurück. Diese Angabe wird im head der Datei notiert, als meta-Angabe:



Es gibt aber unter den Sprachen in lateinischer Schrift eine Reihe von Sonderzeichen. Die deutschen sind natürlich die Umlaute und das scharfe "s", im französischen die Accents, usw.. Damit es mit diesen Zeichen, den benannten Zeichen, nicht zu Darstellungsfehlern kommt, werden diese maskiert. Die häufigsten sind folgende:

ZeichenErsetzung
ä&auml;
Ä&Auml;
ö&ouml;
Ö&Ouml;
ü&uuml;
Ü&Uuml;
ß&szlig;

Sinnvoll ist es auch HTML - eigene Zeichen, so sie nicht zum Code gehören, zu maskieren. Da wäre das kaufmännische „Und“, der Ampersand (&), der mit diesem Zeichen dargestellt wird: &amp;. Die „kleiner als“ und „größer als“ sind der Anfangs- und Endtag in HTML. Möchte man sie in einem anderen Zusammenhang im Text verwenden, dann in dieser Art:



Die nahezu komplette Liste der benannten Zeichen findet sich bei SelfHTML, für diejenigen, die ein wenig griechische, technische und mathematische Zeichen brauchen.

So, kommen wir nun zum letzten Teil dieses Kapitels. In den Diskussionthreads ist bereits danach gefragt worden – die Textauszeichnung und Textformatierung in HTML. Das erstere ist ok, das zweite ist - ohne CSS, bäh!

Zuerst zu dem Guten, den Textauszeichnungen. Bei diesen unterscheidet man zwischen den logischen und physischen Elementen der Auszeichnung. Beide Arten dieser Elemente sind Inline-Elemente, die nur innerhalb von Block-Elementen, wie z.B. <p>, eingesetzt werden sollten. Logische Auszeichnungen haben die Bedeutung von "betont" oder "emphatisch" und der Browser entscheidet, wie diese hervorgehoben werden. Die gebräuchlichsten sind folgende Elemente:







Für die Elemente acronym und abbr wird die Definition der Abkürzungen in dem Attribut title notiert. Beim Überfahren mit der Maus über dieses Element wird im Tooltipp die Definition angezeigt.

Physische Textauszeichnungen stellen direkte Angaben der Textformatierung dar, sie bedeuten soviel wie fett oder kursiv. Physische Auszeichnungselemente können auch mit einander verschachtelt werden, so dass z.B. eine kursive und fette Darstellung möglich ist. Es gibt folgende Elemente für die physische Textauszeichnung:



Folgende drei Auszeichnungen funktionieren zwar in den Browsern und werden auch häufig in Foren- und Weblogprogrammen angewendet, sind aber mittlerweile missbilligt:





Nato ist in diesem Beispiel fett und kursiv. Beachtet die Reihenfolge beim Öffnen und Schließen der Tags: Das zuletzt geöffnete Tag wird als erstes wieder geschlossen.

Die Bäh-Tags
Zu guter Letzt, die Bäh – Dinge: Textformatierung in HTML. Diese sind missbilligt und werden wohl auch bald aus dem HTML Standard entfernt. Im Grunde entsprechen sie auch gar nicht der HTML Struktur, sondern sind eine Art Notlösung aus Zeiten, in denen es noch keine Formatierungs- möglichkeiten mit CSS gab. Ich führe sie eigentlich eher deshalb auf, weil Viele mit diesen Formatierung inflationär umgehen und auch Frontpage sie regelmäßig einsetzt.

Das Element ist das Grundelement, das eine Schriftformatierung umschließt. Dieses verfügt über einige Attribute, mit denen die Schrift weitergehend formatiert werden kann.



Dieses Attribut bestimmt die Schriftart, die zur Anwendung kommen soll. Es können mehrere Schriftarten angegeben werden, diese werden durch ein Komma getrennt. Der Browser sucht sich die Schriftart aus, die auf dem System des Users installiert ist, indem er die Angaben von links nach rechts durchgeht. Ist keine der notierten Schriftarten auf dem System vorhanden, wird die vom User eingestellte Schriftart des Browsers verwendet. Insofern sind Schmuckschriftarten, die von irgendeiner CD oder aus dem Internet stammen und auf dem eigenen System installiert sind nicht unbedingt die erste Wahl, sie in einem HTML Dokument zu notieren.





Das Attribut size bestimmt die Schriftgröße. Es können Werte zwischen 1 und 7 notiert werden. Die Normalschriftgröße ist 3. Diese Angaben sind jedoch relativ und richten sich nach der Schriftgröße, die der Benutzer in seinem Browser einstellt hat. Ausgehend von der Normalschriftgröße kann auch –Zahl oder +Zahl notiert werden.





Die Schriftfarbe wird mit dem Attribut color eingestellt. Er setzt sich aus der Raute # und einer hexadezimalen Angabe des Farbwertes zusammen. Weiß entspricht der Angabe #FFFFFF und Schwarz #000000.



Die VGA-Farbpalette (http://de.selfhtml.org/diverses/anzeige/farbnamen_16.htm) von 16 Farben ist auch mit Schlüsselwörtern ausgestattet. Diese können alternativ statt der Hexadezimalwerte notiert werden.



Dies mehr informativ zu den Textformatierungen. Am besten ihr vergesst es gleich wieder, denn demnächst erklären wir euch, wie das ganze wesentlich eleganter mit CSS zu machen ist.

Gruß

Übungen

Als krönenden Abschluss zu den HTML-Elementen haben wir eine ganz besondere Übung für euch. Da ihr ja schon fleißig die Grundstruktur und einige body Elemente geübt habt und schon ein bisschen geschmeidig seid, heute mal ein Bild. Wir haben eine HTML-Seite erstellt und ein Screenshot davon gemacht. Versucht an Hand des Bildes den entsprechenden Code zu erstellen. Textdateien, Listen und Tabellen liefern euch natürlich mit. Ach ja, vergesst nicht Umlaute und das scharfe "s" zu maskieren.

Viel Spaß beim knobeln.

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 Datei mit der Grafik und den Blindtexten zum Einbauen in die HTML-Datei, (~70 Kb)


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 3 - Es lebt immer noch! - AW: Kapitel 02 - Teil 3 - Es lebt immer noch!

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 2 - Es lebt! 1 womaninweb 6526 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 2 - Es lebt!
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 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 3 - Feingeschliffen 1 womaninweb 4240 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 3 - Feingeschliffen
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 19 maninweb 6757 13. Sep 2008, 20:55
womaninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Keine neuen Beiträge Workshop: Excel Projekte: Pivot-Tabelle - Teil 1 - Erstellung von Pivot-Tabellen 0 Lukas Mosimann 30275 26. Apr 2008, 08:59
Lukas Mosimann Pivot-Tabelle - Teil 1 - Erstellung von Pivot-Tabellen
 

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