|
| Sassy der Knusperkeks - Hilfethemen
|
|
|
|
HTML:
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 - so kann man sich die Teile besser merken :-)
- Spalte: End-Tag
In hellgrau sind die HTML-TAGs und Attribute markiert, die veraltet sind und nicht mehr genutzt werden sollten. Diese werden durch die entsprechenden CSS-Auszeichnungen gemacht.
| Allgemeines |
| HTML-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 /> |
|
|
Damit können Trennlinien eingezogen werden. Farbe, Länge und Stärke können bestimmt werden.
(e: hr = horizontal ruler = horizontale Linie) |
| <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 |
| HTML-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 unterstrichenen 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 (dicktengleich)
(e: tt=teletyper=Fernschreiber) |
|
| Schriftgröße |
| HTML-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 (jetzt in CSS umsetzen) |
| <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) |
| <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) |
|
| Absatzaufbau |
| HTML-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 |
| HTML-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ählugsliste 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 erforderlich!
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] |
| HTML-Tag |
Attribute |
End-Tag |
Bedeutung |
| <a |
href="..."> Ihre Beschreibung dazu |
</a> |
für interne & externe Linkes. "Ihre Beschreibung" wird später im Browser als so genannter 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 |
| 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 |
|
|
| Heute waren schon 4 Besucher (6 Hits) hier!
|
|
|
|
