Sie sind Hier:
Startseite
Sonstiges
HTML & CSS
HTML-Tags
Die Kurzreferenz listet die wichtigsten Tags
auf. Dabei wurden die Befehle thematisch sortiert.
Die Auflistung ist das Grundhandwerkszeug und
erhebt keinen Anspruch auf Vollständigkeit.
So sind bewusst auch alle browserspezifischen
und nicht allgemein unterstützten HTML-Befehle
nicht mit aufgenommen.
Die Auflistung ist wie folgt aufgebaut.
- Spalte: HTML-Tag
- Spalte: zusätzliche Angaben (Attribute),
die wichtig sind, werden aufgeführt - das
Standardattribut ist fett dargestellt und
muss nicht angegeben werden.
- Spalte: Bedeutung
mit (e) wird erklärt,
welche englische Abkürzung dahinter steckt
- Spalte: End-Tag
|
Allgemeines
|
| Tag |
Attribute |
End-Tag |
Bedeutung |
|
<!-- |
|
--> |
Damit können ganze Passagen
ausgeklammert werden und werden
vom Browser nicht mehr angezeigt.
Sehr schöne Möglichkeit, um
Dinge auszuprobieren!!!
So
werden Kommentare im HTML-Code
vermerkt, die auf der im Browser
angezeigten Seite nicht sichtbar,
aber beim Erstellen und Erweitern
hilfreich sind. |
|
<hr> |
|
</hr> |
Damit können Trennlinien eingezogen
werden. Farbe, Länge und Stärke
können bestimmt werden.
(e:
hr=horizontal rule=Querlinie) |
|
<html> |
|
</html> |
Anfang und Ende des HTML-Codes.
Ihre neue Spielwiese :-)
(e: html=hypertext markup language) |
|
<head> |
|
</head> |
Der Kopfbereich, in dem allgemeine
Angaben gemacht werden, die
nicht im Browserfenster angezeigt
werden.
(e: head=kopf) |
|
<body> |
|
</body> |
ab hier kommt unser eigentlicher
Inhalt, der im Gegensatz zum
head-Bereich im Browserfenster
angezeigt wird.
(e: body=Körper) |
|
<title> |
|
</title> |
Wichtig! Titel hat mehrere wichtige
Funktionen:
- Titelzeile
des Anzeigefensters
- Namen
von gesetzten Lesenzeichen/Bookmarks
- Liste der bereits besuchten
Seiten
- und für die Eintragung
bei Suchmaschinen
(e: title=Titel) |
|
|
Schriftattribute
|
| Tag |
Attribute |
End-Tag |
Bedeutung |
|
<b> |
|
</b> |
Schrift wird fett angezeigt
(e: b=bold=fett) |
|
<i> |
|
</i> |
kursive Schrift
(e: i=italic) |
|
<u> |
|
</u> |
unterstrichene Schrift - sehr
mit Vorsicht zu genießen,
da der Surfer bei unterstrichnen
Passagen von Links ausgeht!
(e: u=underlined=unterstrichen) |
|
<sup> |
|
</sup> |
hochgestellte Schrift, z.B.
0C
(e: sup=superscript,
zu deutsch etwa Hochstellung) |
|
<sub> |
|
</sub> |
tiefgestellte Schrift, z.B.
H2O
(e: sub=subscript,
zu deutsch ungefaehr Tiefstellung) |
|
<tt> |
|
</tt> |
bewirkt Schrift mit gleichen
Abständen
(e: tt=teletyper=Fernschreiber) |
|
|
Schriftgröße
|
| Tag |
Attribute |
End-Tag |
Bedeutung |
|
<h1> .. <h6> |
|
</h1> .. </h6>
|
Leitet eine Überschrift ein
(reagiert wie Absatz!) x kann
einen Wert von 1 bis 6 annehmen.
Die größte Überschrift ist 1,
die kleinste 6.
(e: h=heading=Überschrift) |
<h1
..
<h2 |
align=left
align=center
align=right
align=justify
|
</h1>
..
</h6>
|
Überschriften können wie Absätzen
ausgerichtet werden
|
|
<font size=...> |
|
< /font > |
Bestimmen Sie hier die Schriftgröße
von 1 - 7. Die Angaben sind
relativ. Die Normalschriftgröße
ist 3. Größere Schrift bekommt
man mit 4,5,6 oder 7. Kleinere
Schrift mit 1 oder 2.
(e:
font size = Schriftgröße) |
|
<small> |
|
</small> |
Macht die Schrift um einen Schritt
kleiner
(e: small=kleiner) |
|
<big> |
|
</big> |
Macht die Schrift um einen Schritt
größer
(e: big=größer) |
|
|
Absatzaufbau
|
| Tag |
Attribute |
End-Tag |
Bedeutung |
|
<p> |
align="left"
align="center"
align="right"
align="justify"
|
</p> |
Absatzbeginn - vor und nach
dem Absatz wird automatisch
Platz gehalten
(e: p=paragraph)
(e: align=Ausrichtung) |
|
<center> |
|
</center> |
zentrierte Ausrichtung (oft
bei Gedichten)
(e: center=zentriert) |
|
<br> |
|
|
erzwungener Zeilenumbruch (Zeilenende)
(e: br=break=Umbruch) |
|
<nobr> |
|
</nobr> |
erzwungener Zusammenhalt, was
z.B. für Wortgebilde wie
"V 4.1" geschickt
ist.
(e: nobr=nobreak=kein
Umbruch) |
|
<blockquote> |
|
</blockquote> |
Hiermit können Zitate aufgenommen
werden. Tag verhält sich wie
Absatztag, wobei das aussehen
vom Browser definiert wird!
Meistens eingerückt, auf jeden
Fall anders formatiert wie Rest.
(e: blockquote=geblocktes Zitat) |
|
|
Aufzählungen
|
| Tag |
Attribute |
End-Tag |
Bedeutung |
|
<li> |
|
</li> |
Bei allen Aufzählungen (nächste
2 Punkte) müssen die Einzelpunkte
durch diesen Tag gekennzeichnet
sein.
(e: li = list item
= Listeneintrag ) |
|
<ul> |
|
</ul> |
Leitet eine Aufzählungsliste
ein. Wie der Spiegelstrich dargestellt
wird, bestimmt der WWW-Browser.
(weiteres siehe TAG <li> !)
(e: ul=unordered list=unsortierte
Liste) |
|
<ol |
start="1" type="1">
start="1" type="I">
start="1" type="i">
start="1"
type="A">
start="1" type="a">
|
</ol> |
Leitet eine nummerierte Liste
ein - Attribut ist erfoerderlich!
start="1" - aber welcher Einheit
gestartet werden soll
type="1"
- für numerische Liste
type="I"
- Liste mit römischen Ziffern
type="i" - Liste mit kleinen
römischen Ziffern
type="A"
- Liste mit Buchstaben
type="a"
- Liste mit kleinen Buchstaben
(e: ol=ordered list=numerierte
Liste) |
|
|
Verweise
[Links]
|
| Tag |
Attribute |
End-Tag |
Bedeutung |
|
<a |
href="..."> Link Beschreibung |
</a> |
für interne & externe Linkes.
"Ihre Beschreibung" wird später
im Browser als sogenannter Link
angezeigt und kann angeklickt
werden.
(e: a=anchor=Anker)
(e: href=hyper reference=Hypertext-Referenz
|
|
<a |
href="start.htm"> |
</a> |
interner Link |
|
<a |
href="http://www.uxl.de/"> |
</a> |
externe Link |
|
<a |
href="http://www.uxl.de/" target="_blank"> |
</a> |
für externen Link wird neue
Browserinstanz aufgemacht. |
|
<a |
href="#xy">Sprung nach xy |
</a> |
Sprungmarke (wird durch # gekennzeichnet)
zu einem bestimmten Punkt, hier
"xy". Der Punkt muss definiert
werden - dazu nächsten Tag anschauen.
|
|
<a |
name="xy">irgendwas |
</a> |
dieser Punkt, hier "xy", soll
direkt anspringbar sein. "irgendwas"
darf nicht leer bleiben,.
|
|
<a |
href="mailto:axl@uxl.de"> axl@uxl.de |
</a> |
So kann eine E-Mail-Adresse
eingegeben werden. Durch anklicken
öffnet sich das E-Mail-Prg.
(sofern installiert) und die
E-Mail-Adresse ist bereits eingegeben.
(e: mailto= schicke nach |
|
|
Farben
in HTML
|
| Tag |
Attribute |
End-Tag |
Bedeutung |
|
<body |
bgcolor="..."> |
|
Hintergrundfarbe der ganzen
Seite |
|
<font |
color="...">farbiges |
</font> |
Farbe der Schrift |
|
<table |
bgcolor="..."> |
</table> |
Hintergrundfarbe Tabellen |
|
<td |
bgcolor="..."> |
</td> |
Hintergrundfarbe Tabellenzelle
(geht auch für Tabellenzeile
bei <tr>) |
| Farben
werden in HTML als sechsstellige
Hex-Zahl notiert, es gibt jedoch
auch eine Reihe festgelegter
Namen, die man stattdessen benutzen
kann |
|
Farbnamen |
Hex + Farbe |
|
black |
#000000 |
|
maroon |
#800000 |
|
green |
#008000 |
|
olive |
#808000 |
|
navy |
#000080 |
|
purple |
#800080 |
|
teal |
#008080 |
|
gray |
#808080 |
|
silver |
#c0c0c0 |
|
red |
#FF0000 |
|
lime |
#00FF00 |
|
yellow |
#FFFF00 |
|
blue |
#0000FF |
|
fuchsia |
#FF00FF |
|
aqua |
#00FFFF |
|
white |
#FFFFFF |
|
|
