cybton.com
Über uns | Jobs | Werbung | Sitemap | AGB | Impressum | Hilfe ?
 Kostenlos anmelden)
eBooks
Hochgeladene Bilder
Letzte Änderungen

Lexikon

Bücher
Themengebiete

Tutorials


Statistik
Mitglieder gesamt: 68138
Mitglieder online: 7
Gäste online: 0
mehr...

Anzeige
eBooks » eBook: XHTML » eBook Kapitel: Body - im Körper der Webseite

eBook Kapitel: Body - im Körper der Webseite

Inhaltsverzeichnis

Zur 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:
1
<h1>cybton.com - Community für Webmaster</h1>
Ü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:
1
<h2>eBook Kapitel: Body - im Körper der Webseite</h2>
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ätze

Ein 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:
1
2
3
4
5
6
7
8
9
10
11
<p>Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer
Netzhaut erfasst. Die Zellen werden dadurch in einen Erregungszustand versetzt, 
der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort 
aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche 
Ihres Grosshirns. Ihr Stirnlappen wird stimuliert.</p>
 
<p>Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in 
konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, 
nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, 
was mit Ihnen hätte passieren können, wenn dieser Blindtext durch einen echten Text 
ersetzt worden wäre.</p>
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

Listen

In xHTML wird zwischen drei verschiedenen Listen unterschieden:

  • Die ungeordnete Liste
  • Die geordnete Liste
  • Die Definitionsliste


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:
1
2
3
4
5
<ul>
    <li>Erster Listenpunkt</li>
    <li>Zweiter Listenpunkt</li>
    <li>Dritter Listenpunkt</li>
</ul>
Dieser Listenpunkt eignet sich auch hervorragend zur Strukturierung von Navigationen und Menüs. Die Formatierung ist dabei auch in CSS umzusetzen.

Die geordnete Liste


Wird eine Liste nicht mit <ul> sondern mit <ol> (en.: orderd list) begonnen und beendet, werden die Listenpunkte automatisch durchnummeriert:
html:
1
2
3
4
5
<ol>
    <li>Erster Listenpunkt</li>
    <li>Zweiter Listenpunkt</li>
    <li>Dritter Listenpunkt</li>
</ol>

Die Definitionsliste


Definitionslisten 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:
1
2
3
4
5
6
<dl>
    <dt>Listen</dt>
    <dd>Listen stellen Sachverhalte meist stichpunktartig und zur schnellen Übersicht einfach darf.</dd>
    <dt>Definitionsliste</dt>
    <dd>Definitionslisten finden vorallem in Glossaren Verwendung, können aber auch z.B. zur sinnvollen Strukturierung eines Eingabeformulars genutzt werden.</dd>
</dl>

Gemischte Listen


Listen können beliebig miteinander verschachtelt werden. Dabei ist darauf zu achten, dass immer die korrekten End-Tags gesetzt werden.
+ html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
   <li>Erster unnummierte Punkt</li>
   <li>
        <ol>
           <li>Erster nummerierte Punkt im zweiten unnummerierten</li>
           <li>Zweiter nummerierte Punkt im zweiten unnummerierten</li>
        </ol>
    </li>
    <li>
        <dl>
            <dt>Listen</dt>
            <dd>Listen stellen Sachverhalte meist stichpunktartig und zur schnellen Übersicht einfach darf.</dd>
            <dt>Definitionsliste</dt>
            <dd>Definitionslisten finden vorallem in Glossaren Verwendung, können aber auch z.B. zur sinnvollen Strukturierung eines Eingabeformulars genutzt werden.</dd>
         </dl>
   </li>
</ul>
Letzte Änderung: 28.08.2008 00:27 Uhr

Tabellen

Eine 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:
1
2
3
4
5
<table>
<tr><th>Spalte 1</th><th>Spalte 2</th></tr>
<tr><td>Zeile 1</td><td>1. Zeile</td></tr>
<tr><td>Zeile 2</td><td>2. Zeile</td></tr>
</table>
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:
1
2
3
4
5
6
7
8
Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen 
habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt 
hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. 
Aber bin ich deshalb ein schlechter Text? <strong>Ich weiss, dass ich nie die 
Chance haben werde, im Stern zu erscheinen.</strong> Aber bin ich darum weniger 
wichtig? Ich bin blind! Aber ich bin gerne Text. Und sollten Sie mich jetzt 
tatsächlich zu Ende lesen, dann habe ich etwas geschafft, was den meisten
 "normalen" Texten nicht gelingt.

<em> - betonter Text


Mit 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:
1
2
3
4
5
6
7
8
Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen 
habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt 
hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. 
Aber bin ich deshalb ein schlechter Text? <strong>Ich weiss, dass ich nie die 
Chance haben werde, <em>im Stern zu erscheinen</em>.</strong> Aber bin ich 
darum weniger wichtig? Ich bin blind! Aber ich bin gerne Text. Und sollten Sie mich 
jetzt tatsächlich zu Ende lesen, dann habe ich etwas geschafft, was den meisten 
"normalen" Texten nicht gelingt.
Letzte Änderung: 20.05.2008 09:15 Uhr
Da 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:
1
<a href="http://example.org/">Linktext</a>
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 Links

Bei 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 Links

Bei den internen Links hat man mehrere Möglichkeiten der Verlinkung.
Art der Verlinkungaktuelle SeiteInhalt des LinksZiel
relative Verlinkung vom aktuellen Punkthttp://www.example.com/beispiel/./ordner/seite.htmlhttp://www.example.com/beispiel/ordner/seite.html
relative(?) Verlinkung von der Domain ausgehendhttp://www.example.com/beispiel//ordner/seite.htmlhttp://www.example.com/ordner/seite.html
absolute Verlinkunghttp://www.example.com/beispiel/http://www.example.com/ordner/seite.htmlhttp://www.example.com/ordner/seite.html


E-Mail-Links

html:
1
<a href="mailto:exampleemail@cybton.com">E-Mail</a>

Weitere Links (FTP, ...)

Letzte Änderung: 09.08.2008 16:06 Uhr

Diskussion

nach obennach oben

Copyright © 2008 cybton-network

Google
Partner: #Musik - Dein Internetradio - nexem. - .wir machen news - Your-Book.net - Dein kostenloses Gästebuch
ANEXIA - PHP Entwicklung - Dockers - s.Oliver Schuhe - Think Schuhe - der eigene Weg - Dorfen - Paul Green Schuhe - Bequeme Geox - Web-Entwicklung