
Statistik Anzeige | eBook Kapitel: Body - im Körper der WebseiteInhaltsverzeichnisZur Abtrennung einzelner Bereiche: <div>[Noch kein Text vorhanden]
ÜberschriftenÜberschriften strukturieren eine HTML-Seite. Dabei wird wie in einem Fachbuch mit Hierarchie-Ebenen gearbeitet, die die einzelne Wichtigkeit der Überschrift darstellen.
Die einzelnen Überschriften haben als HTML-Tags immer den selben Aufbau: <hX> - wobei X durch eine Zahl ersetzt wird, die die Wichtigkeit der Überschrift darstellt. Dabei steht 1 für die höchste Überschrift und 6 für die niederste Hierarchieebene. Die wichtigste Überschrift einer Website ist der Titel der Seite. Meist handelt es sich dabei um einen Firmen- oder Projektnamen, das Thema der Webseite oder ähnliches. Aus diesem Grund wird eine Überschrift der ersten Hierarchie in der Regel nur einmal pro Seite verwendet. Manchmal ist auch ein kleiner Slogan Bestandteil der Überschrift. Für diese Überschrift wird der Tag <h1> genutzt. Beispiel: html: Überschriften zweiter Wichtigkeit stellen meist den Inhalt der aktuellen Page dar: "Impressum", "Kontakt", "Forum", "Über uns" usw. sind hierfür Beispiele. Die Nutzung des <h2>-Tags erfolgt ebenso wie bei der ersten Überschrift:
html: Mit den weiteren Überschriften (bis hin zu <h6>) wird ebenso verfahren.
Überschriften niederer Ordnung sollten immer unterhalb einer Überschrift der jeweiligen eins-höheren Ordnung gesetzt werden, um eine strukturierte Website zu erhalten. Standardmäßig wird in den meisten Browsern mit jeder niederen Überschriftsebene die Schrift kleiner gesetzt. Dies kann - wie jede Formatierung - mit CSS angepasst werden. Letzte Änderung: 19.05.2008 13:32 Uhr TextabsätzeEin Fließtext besteht meist aus mehreren Abschnitten - sogenannten Absätzen. In jedem Absatz wird dabei ein abgeschlossener Bereich des Inhalts beschrieben.
Um einzelne Absätze zu definieren, wird der xHTML-Tag <p> (für Paragraph) verwendet. Dabei wird automatisch ein Zeilenumbruch erstellt und die einzelnen Absätze mit einem kleinen Abstand versehen. html: Der Abstand zwischen den Absätzen bzw. zum nächsten oder vorherigen Element kann wieder per CSS formatiert werden.
Letzte Änderung: 19.05.2008 13:50 Uhr ListenIn xHTML wird zwischen drei verschiedenen Listen unterschieden:
Alle drei Listentypen sollen nun erklärt werden: Die ungeordnete ListeÜber den Tag <ul> wird eine ungeordnete Liste (en.: unorderd list) begonnen. Jedes einzelne Listenelement wird anschließend in den Tag <li> eingeschlossen. Anschließend muss die Liste mit </ul> wieder beendet werden. html: Dieser Listenpunkt eignet sich auch hervorragend zur Strukturierung von Navigationen und Menüs. Die Formatierung ist dabei auch in CSS umzusetzen.
Die geordnete ListeWird eine Liste nicht mit <ul> sondern mit <ol> (en.: orderd list) begonnen und beendet, werden die Listenpunkte automatisch durchnummeriert: html:
Die DefinitionslisteDefinitionslisten finden vorallem in Glossaren Verwendung, können aber auch z.B. zur sinnvollen Strukturierung eines Eingabeformulars genutzt werden. Die Liste beginnt und endet mit dem Tag <dl> (en.: definition list). Der zu definierende Begriff wird anschließend in den Tag <dt> (en. definition term) eingepackt und darauf folgend mit dem Tag <dd> (en. definition description) definiert: html:
Gemischte ListenListen können beliebig miteinander verschachtelt werden. Dabei ist darauf zu achten, dass immer die korrekten End-Tags gesetzt werden. html:
Letzte Änderung: 28.08.2008 00:27 Uhr TabellenEine Tabelle wird durch den Tag <table></table> gekennzeichnet.
Zwischen die beiden Tags kommt nun der Inhalt der Tabelle. Mit <tr> wird eine neue Zeile erzeugt. In diese Zeile kommen mit <td> Spalten. Mit <th> erreicht man besonders hervorgehobene Spalten. HTML:
Letzte Änderung: 09.08.2008 16:01 Uhr Textauszeichnungen: Was ist wichtig?Bei einem Fließtext fasst man oft am Anfang oder am Ende des Textes die wichtigsten Inhalte noch einmal kurz und knapp zusammen. Diese Abschnitte sind wichtiger, als der restliche Text, da darin alle wichtigen Informationen zu finden sind.
Und auch im fortlaufenden Text finden sich immer wieder Stellen, die wichtiger als andere Sätze, Phrasen oder Wörter sind. Um diese Sätze zu kennzeichnen, gibt es in xHTML zwei spezielle Tags: <strong> - starker TextÜber den <strong>-Tag wird Text als stark und wichtig hervorgehoben. Diese Information wird u.a. von Suchmaschinen erkannt und entsprechend ausgewertet. Außerdem stellen Browser den Inhalt des Tags fett dar, um auch hier die starke Betonung visuell zu verdeutlichen. Die Darstellung kann aber per CSS geändert werden. html:
<em> - betonter TextMit Tag <em> (en. emphatic) wird ein Text als betont markiert. Auch hier wird Suchmaschinen und Besucher einer Webseite deutlich gemacht, dass es sich um Text handelt, der besondere Aufmerksamkeit benötigt. In den meisten Browsern wird der <em>-Tag dazu kursiv hervorgehoben, was per CSS aber angepasst werden kann. <strong> und <em> können auch miteinander gemischt werden. Ein starker und betonter Text wird dadurch noch wichtiger, als nur ein starker oder betonter Text. html:
Letzte Änderung: 20.05.2008 09:15 Uhr HyperlinksDa man mit der Hypertext Markup Language Hypertexte - also ein Gebilde von Texten, die aufeinander verweisen - erstellt, sind Verweise ganz wichtig. Man kennt sie im Internet unter dem Begriff "Hyperlink" oder kurz "Link".
Hyperlinks sehen unter html so aus: html: Dies hat in diesem Beispiel folgende Bedeutung: Klickt der Nutzer das Word "Linktext" an, landet er auf der Seite mit der Adresse "http://example.org/". Statt "Linktext" können auch Bilder verwendet werden. Dies ist Beispielsweise bei Navigations-Elementen und Werbebannern häufig der Fall.
Externe LinksBei der externen Verlinkung sollte immer beachtet werden, dass "http://" vor der aufzurufenden Domain steht. Ansonsten interpretiert der Browser den Hyperlink als relativen Verweis und man landet unter einer solchen URL: http://cybton.com/gidf.de Meistens existiert diese Seite nicht und der Benutzer bekommt eine 404-Fehlerseite zu sehen.Interne LinksBei den internen Links hat man mehrere Möglichkeiten der Verlinkung.
E-Mail-Links html:
Weitere Links (FTP, ...)Letzte Änderung: 09.08.2008 16:06 Uhr DiskussionZum Diskussions Thread [1 Beitrag] |