|
|
|
|
| InfoHome | Themen | Projekte | Links | Software |
|
BausteineNeue ElementeDie wichtigsten HTML-Elemente haben wir bereits: <p>, <h1>, <h2> und <img> haben wir unseren bisherigen Seiten schon eine ordentliche Struktur verpasst. Nun werden wir unseren Horizont etwas erweitern und einige neue Elemente einbauen. Wir wir einen Blick auf Tobis Tagebuch und schauen wir, wo wir die Seite noch etwas aufpolieren können... <q>Am Ende seines Eintrags vom 2. Juni 2005 hat Tobi ein kurzes Zitat untergebracht: "Eine Reise übertausend Kilometer beginnt mit einem Segway". Genau für solche Fälle gibt es in HTML das <q>-Element (q von "quotation" - Zitat). <blockquote>Tobi hat mit dem Gedicht über belgische Autobahnen auch ein ziemlich langes Zitat eingebaut. Für solche Zitate gibt es das <blockquote>-Element. Im Gegensatz zum <q>-Element, das für kurze Zitate innerhalb eines Absatzes gedacht ist, dient dieses Element für längere Zitate, die gesondert dargestellt werden sollen. Block-Element vs. Inline-ElementDas <blockquote>-Element und das <q>-Element sind unterschiedliche Elementtypen. Das <blockquote>-Element ist ein Block-Element, während das <q>-Element ein Inline-Element ist. Worin liegt der Unterschied? Block-Elemente werden immer mit einem Zeilenumbruch vor und nach dem Block dargestellt, während sich Inline-Elemente in den Textfluss der Seite einfügen. Merke: Block-Elemente stehen für sich, Inline-Elemente passen sich dem Textfluss an!
Leere ElementeWir haben bereits mit <br> und <img> bereits zwei HTML-Elemente kennen gelernt, die grundsätzlich keinen Inhalt haben. Solche Elemente werden leere Elemente genannt. Man schreibt bei leeren Elementen nur das Start-Tag, um sich unnötige Schreibarbeit zu sparen. ListenMit Hilfe von Listen können wir Tobis Tagebuch noch ein wenig aufpolieren, ihm noch mehr Struktur geben: Im Eintrag vom 20. August führt Tobi eine Liste von Städten auf, die er bisher besucht hat. Die Aufzählung der Städtenamen lässt sich übersichtlich als Aufzählungsliste darstellen:
Um eine solche Liste zu erstellen sind zwei Schritte nötig: Zunächst wird jeder Listeneintrag in ein <li> Element eingeschlossen: <li>Walla Walla, WA</li> Im zweiten Schritt werden alle Listeneinträge entweder in ein <ol> oder in ein <ul>-Element eingeschlossen. Wenn Sie ein <ol>-Element verwenden, werden die einzelnen Punkte in einer geordneten (durchnummerierten) Liste dargestellt. Verwenden Sie dagegen <ul>, wird die Liste ungeordnet gezeigt. Um Tobis Städtenamen also als geordnete Liste anzuzeigen schreibt man: <ol> Nicht vergessen:
In Tobis Tagebuch findet sich im Eintrag vom 14. Juli eine weitere Liste der Dinge, die er unterwegs mitnimmt. Diese Aufzählung lässt sich sinnvoller Weise als ungeordnete Liste strukturieren. SonderzeichenDa Browser < und > verwenden, um Tags zu beginnen und abzuschließen, kann es Schwierigkeiten bereiten, diese Zeichen in Ihrem HTML-Code zu verwenden. Aber in HTML haben Sie eine einfache Möglichkeit, diese und andere Sonderzeichen mit Hilfe einfacher Abkürzungen einzufügen, die man Zeichen-Entitäten (character entities) nennt. Das funktioniert so: Für jedes Sonderzeichen oder Zeichen, das Sie in Ihren Webseiten verwenden möchten, schlagen Sie einfach die entsprechende Abkürzung nach und fügen diese in Ihr HTML ein. Die Abkürzung für das Zeichen > ist z.B. > für das Zeichen < lautet die Abkürzung <. Wenn Sie also auf Ihrer Seite sagen möchte: "Das <html>-Element rockt", würde das mit den richtigen Zeichen-Entitäten so aussehen:
Weitere wichtige Sonderzeichen stellen vor allem die deutschen Umlaute, das &-Zeichen, das €-Zeichen sowie das ß dar.
Weiter Symbole und Zeichen können hier nachgeschlagen werden.
|
| © 2004-2023 M. Blanke · Ursulaschule · Kleine Domsfreiheit 11-18 · 49074 Osnabrück |
JavaHamster
XHTML
Die Websprache
