Trennlinie Attribute

Diese Kapitel ist historischen Gründen noch vorhanden und soll zeigen, wie ursprünglich HTML-Seiten gestrickt worden sind. Diese Techniken sollten nicht mehr bei aktuellen Seiten angewendet werden!!

Attribute zu den Trennlinien

Spannend ist das Prinzip von Attributen. Bisher wurden bei allen HTML-TAGs keine Attribute aufgeführt, obwohl es welche gibt.

Wird kein Attribut aufgeführt, wird das Standard-Attribut angenommen, z. B. dass etwas links ausgerichtet ist.

Größe eines Elementes

Im Folgenden spreche ich bewusst von Elementen, da Attribute auf zahlreiche TAGs angewendet werden können, z. B. hat sowohl eine Trennlinie eine Größe als auch eine Schrift und beides mal ist die Benennung dieselbe. Das Attribut lautet size="X".

Bei dem TAG <hr /> sieht das dann wie folgt aus

<html> <head> </head> <body> Text eins <hr size="20" /> Text zwei </body> </html>

Anmerkung:

Die Attribute wiederholen sich bei verschiedenen TAGs - allerdings sind nicht alle Attribute bei allen TAGs erlaubt.

Text eins
Text zwei

Aufbau Attribute

Attribute setzt sich also aus 2 Teilen zusammen. Im ersten, z.B. "size", wird die Art der Beeinflussung festgelegt und im zweiten dann die Ausprägung, hier 20.

Ausrichtung - rechts, links, mittig

Elemente können ausgerichtet werden. Dazu dient das Attribut "align" (engl.: ausrichten)

Dabei sind folgende Möglichkeiten vorhanden

  • align="left"
  • align="center"
  • align="right"
<html> <head> </head> <body> Ein Wurm wanderte auf der Welt entlang ... <hr width="55" align="left" /> <hr width="55" align="center" /> <hr width="55" align="right" /> </body> </html>

Das Attribut width="55" wird im nächsten Punkt erklärt. Benutzen Sie es einfach mal.

Breite eines Elementes

Ein weiteres Attribut ist die Breite width (engl. Breite/Weite). Im folgenden Beispiel sehen Sie die Trennlinie mit einer Breite von 55.

Text eins
Text zwei

Relativität !!! - ganz wichtig für alles weitere

Spannend wird das Ganze, wenn Sie in Relationen arbeiten, d. h. nicht mehr fixe Angaben, wie im letzten Beispiel 55 Bildpunkte, sondern in Prozenten. Im nächsten Beispiel ist die Linie 55% breit abhängig vom Browserfenster. Probieren Sie das Beispiel aus und ändern Sie dann die Fenstergröße des Browsers. Die Linie wird automatisch sofort kleiner bzw. größer.

<html> <head> </head> <body> Text eins <hr width="55%" /> Text zwei </body> </html>
Text eins
Text zwei

Dies ist eine der wichtigsten Erkenntnisse, die Sie immer wieder brauchen. Das komplette Design ist i. d. R. relativ. Sehen Sie sich einfach die Seite Relativität an und meditieren Sie über die Auswirkungen auf Ihr weiteres Leben als HTML-Seiten-Designer.

Spielen Sie damit und probieren Sie.

Tipp:

Ist etwas Standard, ist es eigentlich unnötig das Attribut zu setzen, z. B. bei <hr align="center" /> oder bei Schrift eine Ausrichtung links. Denn ohne die Angabe wäre die Anzeige die gleiche. Das spart Tipparbeit, Code und Übertragungszeit!

vorheriges Kapitel: Bilder ausrichten
nächstes Kapitel: Attribute bei Tabellen
Bilder ausrichtenSeitenanfangAttribute bei Tabellen
eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2012 Axel Pratzner • www.html-seminar.de • Stand 18.3.2012
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de