HTML/CSS – Tags

Wichtige HTML bzw. CSS-Tags

Um die Lesbarkeit eines Textes zu verbessern und um wichtige Stellen hervorzuheben, kann man diese Textstellen fett, kursiv oder unterstrichen ausgeben lassen. Wobei das Unterstreichen von Text den Link vorbehalten werden sollte, da es sonst schnell zu Verwirrung führt.

Dickschrift: <b>-Tag (b für bold;dick) oder <strong>-Tag
Kursivschrift: <i>-Tag (i für italic)
Unterstrichen: <u>-Tag (u für underline)

Allerdings wird das heutzutage hauptsächlich mit CSS geregelt.

{font-weight:bolder;}
{text-decoration:underline:}
{font-style:italic;}

Erklärung:
01 Fettschrift
02 Unterstrichen
03 Kursivschrift

Textabsätze

Absätze werden in HTML mit dem p-Tag deklariert (p für Paragraph).
Vor und nach einem Absatz entsteht automatisch eine freie Zeile.

<p>Das ist der erste Absatz</p><p>Das ist der zweite Absatz</p> 

Ergebnis:
absaetze

Listen und Aufzählungen

Es gibt die unsortierten Listen (ul / unordered list) und die sortierten Listen (ol / ordered list):

<ul>
	<li>Listenpunkt #1</li>
        <li>Listenpunkt #2</li>
	<li>Listenpunkt #3</li>
</ul>


<ol>
	<li>Listenpunkt #4</li>
	<li>Listenpunkt #5</li>
	<li>Listenpunkt #6</li>
 </ol>
  • Listenpunkt #1
  • Listenpunkt #2
  • Listenpunkt #3
  1. Listenpunkt #4
  2. Listenpunkt #5
  3. Listenpunkt #6

Wie Sie sehen wird bei der ul-Liste für jeden Listenpunkt ein • vorangesetzt wohingegen bei der ol-Liste jeder Listenpunkt fortlaufend numeriert wird.

Auch hier kommt wieder CSS ins Spiel, die Listen können beliebig verändert werden, hier ein Beispiel:

ul {list-style-type:none;}
ul {list-style-type:disc;}

Erklärung:
01 Bei der ul-Liste wird kein • mehr vorangestellt
02 Bei der ul-Liste wird statt • ein nicht ausgefüllter Kreis vorangestellt

Listen werden meist für Stichpunkte und Aufzählungen genutzt.

Horizontale Liste

Listen können auch horizontal dargestellt werden, das geht z.B. indem man die Listenpunkte sich gegenseitig umfließen lassen. Margin-und Paddingangaben müssen individuell angepasst werden.

ul li {float:left;}
  • Listenpunkt #1
  • Listenpunkt #2
  • Listenpunkt #3

 

Horizontale Trennlinie

Mit Hilfe des <hr />-Tags kann eine horizontale Linie erstellt werden.


Eine solche Linie kann mit CSS genauer definiert werden. Hier ein Beispiel:

hr {width: 300px; color:#ff0000; height:1px;}

Anmerkung: Hier auf der Seite befinden sich unter den Überschriften scheinbar auch <hr />-Tags, dabei handelt es sich jedoch um einen Rahmen um die Überschrift der nur unten sichtbar ist. Hier der CSS-Code dazu:

* h1 {
		border-top:0px solid #809044;
		border-left:0px solid #809044;
		border-right:0px solid #809044;
		border-bottom:1px solid #809044	
}

Div-Container

Der div-Tag wird im Allgemeinen zum Einsetzen von CSS benutzt. Bestimmter Inhalt wird mit einem Div-Tag umgeben und per CSS definiert. Hier zwei Beispiele:

Definition mittels style-Tag (dicker, roter Text):

<div style="color:#ff0000; font-weight:bolder;">
Der zu definierende Inhalt befindet sich untergeordnet im Div-Tag <br />
So ist es möglich Inhalt mit CSS zu definieren ohne andere Tags dazu missbrauchen zu müssen.
</div>

Definition mittels Klassenangabe (kursiver, blauer Text):

<div class="dick_blau">
Der zu definierende Inhalt befindet sich untergeordnet im Div-Tag <br />
So ist es möglich Inhalt mit CSS zu definieren ohne andere Tags dazu missbrauchen zu müssen.
</div>

In der eingebundenen CSS-Datei könnte stehen:

.dick_blau{
      color:#ff00ff; 
      font-style:italic;
}

Span-Tag

Der Span-Tag fungiert wie der Div-Tag. Er wird meistens im Text eingesetzt, weil der Div-Tag dazu ungeeignet ist weil er vor-und hinter sich einen Zeilenumbruch hat.

Das ist Text indem <div style="color:#00ff00;">grüne</div> Textstellen sind.

Das ist Text indem

grüne

Textstellen sind.

Das ist Text indem <span style="color:#ff0000;">rote</span> Textstellen sind.

Das ist Text indem rote Textstellen sind.

Anmerkung: Diese Seite dient dazu ein Verständnis für HTML, CSS und Co. zu vermitteln. Die Zielgruppe ist in erster Linie der blutige Anfänger. Ihm soll die Grammatik von HTML und CSS veranschaulicht werden und ein Gefühl für die technischen Aspekte vermitteln. Auf Grund der Vielzahl von einzelnen Befehlen und Attributen verliert man als Anfänger schnell den Überblick. Deshalb greifen selbst viele erfahrene auf Nachschlagewerke wie selfhtml.org oder css4you.de zurück.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.