HTML

  1. Übergeordnete Tags
  2. Meta-Tags
  3. Schriftzeichen-Tags
  4. Absatz-Tags
  5. Überschriften-Tags
  6. Listen-Tags
  7. Sonderzeichen
  8. Farbenfestlegung
  9. Bilder-Tags
  10. Tabellen-Tags
  11. Frame-Tags
  12. Alphabethischer HTML-Code
  13. Quellen über HTML im Internet
  14. Literatur zu HTML

1. Übergeordnete Tags:




2. Meta-Tags

Viele Suchmaschinen durchsuchen das Web nach neuen Seiten, eine Hilfestellung damit die Seite gefunden und anschließend unter den passenden Schlüsselwörtern indiziert wird sind die Meta-Tags.

Die Meta-Tag müssen innerhalb des HTML-Dokumentes zwischen <HEAD> und </HEAD> stehen.

Grundsätzlich sind die Meta-Tags nach folgendem Schema aufgebaut:
<meta name="Eigenschaft" content="Inhalt">

Folgende Eigenschaften von Meta-Tags gibt es:

Bei author kann man unter content den Ersteller der Seite angeben
Bei description sollte als Inhalt eine Kurzbeschreibung der Seite enthalten dabei sollten 200 Bytes als Inhalt nicht überschritten werden
bei keywords sind die Schlüsselwörter anzugeben die den Inhalt der Seite am besten wiederspiegeln. Die Begriffe werden mit Kommas getrennt. Sollen mehrere Worte zusammen gefunden werden wie Bundesrepublik Deutschland werden diese nicht durch Kommas getrennt.
Bei robots kann man einer Suchmaschine untersagen diese Seite zu indizieren unter content steht dann noindex.

3. Schriftzeichen-Tags

4. Absatz-Tags

5. Überschriften-Tags

6. Listen-Tags

Man unterscheidet zwischen numerierten Listen und Bulletin-Listen
  1. Nummerierte Listen
    1. Listeneintrag A der Befehl heißt <ol type=A> und bewirkt das Hochzählen mit Großbuchstaben
    2. Listeneintrag a zählt mit Kleinbuchstaben hoch
    3. Listeneintrag I zählt mit großen römischen Ziffern hoch
    4. Listeneintrag i zählt mit kleinen römischen Ziffern hoch
  2. Bulletin-Listen
    1. type=circle erzeugt einen ausgefüllten Punkt als Symbol
    2. type=square erzeugt einen leeres Quadrat als Symbol

7. Sonderzeichen

Damit die Sonderzeichen von allen Browsern wichtig gelesen werden können sollen sie durch den folgenden Code ersetzt werden.

7.1 Die wichtigsten Sonderzeichen

7.2 Alle Sonderzeichen

SonderzeichenISO Latin -1- Kodierung
à&#224;
á&#225;
â&#226;
ã&#227;
ä&#228;
å&#229;
æ&#230;
À&#192;
Á&#193;
Â&#194;
Ã&#195;
Ä&#196;
Å&#197;
Æ&#198;
ß&#223;
ç&#231;
Ç&#199;
ð&#240;
Ð&#208;
è&#232;
é&#233;
ê&#234;
ë&#235;
È&#200;
É&#201;
Ê&#202;
Ë&#203;
ì&#236;
í&#237;
î&#238;
ï&#239;
Ì&#204;
Í&#205;
Î&#206;
Ï&#207;
ñ&#241;
Ñ&#209;
ò&#242;
ó&#243;
ô&#244;
õ&#245;
ö&#246;
Ò&#210;
Ó&#211;
Ô&#212;
Õ&#213;
Ö&#214;
ù&#249;
ú&#250;
û&#251;
ü&#252;
Ù&#217;
Ú&#218;
Û&#219;
Ü&#220;
ý&#253;
ÿ&#255;
Ý&#221;
Ÿ&#159;
+&#43;
-&#45;
×&#215;
·&#183;
&#149;
*&#42;
/&#47;
÷&#247;
ˆ&#136;
=&#61;
&#139;
&#155;
«&#171;
»&#187;
(&#40;
)&#41;
[&#91;
]&#93;
{&#123;
}&#125;
%&#37;
&#137;
±&#177;
~&#126;
ø&#248;
Ø&#216;
!&#33;
&&#38;
¬&#172;
¹&#185;
²&#178;
³&#179;
¼&#188;
½&#189;
¾&#190;
ª&#170;
°&#176;
µ&#181;
¤&#164;
$&#36;
¢&#162;
£&#163;
¥&#165;
"&#34;
#&#35;
'&#39;
,&#44;
.&#46;
:&#58;
;&#59;
?&#63;
@&#64;
\&#92;
_&#95;
`&#96;
|&#124;
ƒ&#131;
&#132;
&#133;
&#134;
&#135;
Š&#138;
Œ&#140;
&#146;
&#147;
&#148;
&#153;
œ&#156;
¡&#161;
¦&#166;
§&#167;
¨&#168;
©&#169;
®&#174;
¯&#175;
´&#180;
&#182;
¿&#191;
Leerzeichen&#32;

8. Farbenfestlegung

Alle Farben setzen sich aus einer 6-stelligen Hexadezimalen Zahl zusammen

Nachfolgend einige Farbbeispiele:
weis Code: FFFFFF hellgelb Code: FFFFDD gelb Code: FFFF00
creme Code: FFDDDD violett Code: FF66FF rot Code: FF0000
hellblau Code: DDFFFF blau Code: 0000FF grün Code: 00FF00
schwarz Code: 000000

Bitte schauen sie sich z.B. die Bilddateien Schwarz, Blau und Violett einmal genauer an.
Schwarz ist ein 1Bit-Farbe und braucht nur 50 Bytes, Blau eine 4Bit-Farbe und braucht 96 Bytes gewaltig ist der Sprung zur 8bit-Farbe Violett sie braucht bei gleicher Größe schon 829 Bytes - bitte denken Sie daran wenn Sie Grafiken fürs Web erstellen

8.1 Farbnamen

Anstelle vom 3-ziffrigen Dezimalcode der schwer zu merken ist können auch Farbnamen verwendet werden
Beispiel:
<font color="FF0000"> ROT </font> entspricht <font color="red"> ROT </font>
Ergebnis:
ROT entspricht ROT
Wie Sie sehen sehen Sie keinen Unterschied.

Alle Farbnamen

antiquewhite
aqua
aquamarine
bisque
black
blanchedalmond
blue
blueviolett
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
crimson
darkblue
darkzyan
darkolivegreen
darkgray
darkgreen
darkkhaki
darkmagneta
darkorange
darkorchid
darkred
darksalamon
darkseagreen
darkslateblue
darkslategray
darkturquoise
darkviolett
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
fuchsia
forestgreen
gainsboro
gold
goldenrod
green
greenyellow
gray
hotpink
indianred
indigo
khaki
lavender
lawngreen
lightblue
lightcoral
lightgreen
lightgrey
lightpink
lightsalamon
lightseagreen
lightskyblue
lightslategray
lightsteelblue
lime
limegreen
magneta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquiose
mediumvioletred
midnightblue
mistyrose
moccasin
navy
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquiose
palevioletred
papayawhip
peachpuff
pery
pink
plum
powderblue
rosybrown
purple
red
royalblue
saddelbrown
salmon
sandybrown
seagreen
sienna
silver
skyblue
slateblue
slategray
springgreen
steelblue
tan
thistle
teal
tomato
turquoise
violet
wheat
yellow
yellowgreen
aliceblue
azure
beige
cornsilk
floralwhite
ghostwhite
honeydew
ivory
lavenderblush
lemonchiffon
lightcyan
lightgoldenrodyellow
lightyellow
linen
mintcream
navajowhite
oldlace
seashell
snow
whitesmoke
white
9. Bilder-Tags

Bilder sind eines der wichtigsten Gestaltungselemente einer Web-Seite. Die multimediale Gestaltung von Webseiten hat zu der hohen Popularität des WWW beigetragen.

Ein Bild-Tag besteht aus folgenden Grundbestandteilen:
<img src="Bildname" ATTRIBUTE>

Der Bildname kann dabei auch eine Adresse oder Verzeichnis besitzen, so hat z.B. der Button ganz unten auf dieser Site das Verzeichnis icons/ für den Browser heißt das gehe ein Verzeichnis höher (../) gehe dann in das darunterliegende Verzeichnis icons (icons/) dort findest du die Datei knowhow.gif.
Als Adresse kann aber auch z.B. http://www.w3.org/html/icon.gif stehen. In diesem Fall befindet sich das Bild physikalisch nicht auf dem Server der angezeigten Seite sondern auf irgendeinem anderen Server weltweit. Das hat den Vorteil daß man Platz spart und bei Änderungen an Logos werden diese automatisch mitgeändert. Der Nachteil ist, daß die Ladezeiten sich damit erhöhen und man keinen Einfluß darauf hat wenn das linkte Bild gelöscht wird.
Als Dateiformate sind zur Zeit GIF und JPG zulässig, wobei GIF seine Stärken bei Zeichnungen und JPG seine Stärken bei Fotos besitzt.

Als Attribute können folgende Eigenschaften gewählt werden:

Unter alt gibt man einen alternativen Text an für diejenigen die keine Bilder mit dem Browser laden möchten. Mit der Eigenschaft border kann man einen Rand um das Bild ziehen border=5 zieht zum Beispiel einen 5 Pixel dicken Rahmen um das Bild. Mit widht und height wird die Größe des Bildes definiert, durch diesen Befehl beschleunigt man auch das Laden des Bildes (z.B. widht=30 height=50 Angabe in Pixel) . Durch align kann man die Positionierung des Bildes festlegen align=top/middle/bottom/left/right/center (oben/mitte/unten/links/rechts/zentriert) sind dabei erlaubt. Mit hspace und vspace wird der Abstand zum Text in Pixel angegeben.

10. Tabellen-Tags

Tabellen-Tags dienen nicht nur zur Erstellung der eigentlichen Tabellen, vielmehr werden sie als sogenannte "blinde Tabellen" eingesetzt um HTML besser formatieren zu können. So können zum Bespiel Bilder besser ausgerichtet werden oder mehrspaltige Texte mit ihnen erzeugt werden.

Definition einer Tabelle in HTML:
<TABLE>
<TR>
<TH> fettgedruckte Kopfzelle </TH><TH> usw. </TH> </TR>
<TR>
<TD> 1. Zelle </TD> <TD> 2. Zelle </TD> </TR>
</TABLE>

Mit <TABLE> .... </TABLE> wird der Tabellenbereich eingegrenzt.
Mit <TR> .... </TR> werden Tabellenzeilen erzeugt.
Mit <TH> .... </TH> werden Tabellenzellen mit Fettschrift erzeugt wie die bei Tabellen in der 1. Zeile oft üblich ist.
Mit <TD> .... </TD> werden die eigentlichen Tabellenzellen erzeugt.

Formatierung von Tabellen:
 :   Hierzu ein Beispiel:
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10 HEIGHT=300 WIDHT=60% BGCOLOR="#FFFFFF" BACKGROUND="icon.gif" ALIGN=left>

Mit BORDER wird die Rahmenbreite der Tabelle festgelegt border=0 bedeutet eine rahmenlose (blinde) Tabelle.
Mit CELLPADDING wird der Abstand der Inhaltes von Zellen zur Gitternetzlinie vorgegeben.
Mit CELLSPACING wird die Dicke der Gitternetzlinien definiert.
Mit HEIGHT wird die Höhe der Tabelle in Pixel (absolut) oder Prozent (relativ) vorgegeben.
Mit WIDHT wird die Breite der Tabelle in Pixel (absolut) oder Prozent (relativ) vorgegeben.
Mit BGCOLOR kann eine Hintergrundfarbe für die Tabelle definiert werden.
Mit BACKGROUND kann eine Hintergrundgrafik für die Tabelle definiert werden. (nur bei IE ab V 3.0)
Mit ALIGN wird die Ausrichtung innerhalb der Zellen vorgeben.

Formatierung von Tabellenzeilen:
    Beispiel:
<TR ALIGN=center VALIGN=top BGCOLOR="blue">

Mit ALIGN wird der Zelleninhalt der Zeile horizontal ausgerichtet [left/center/right]
Mit VALIGN wird der Zelleninhalt der Zeile vertikal ausgerichtet [top/middle/bottom]
Mit BGCOLOR wird der Zeile eine bestimmte Hintergrundfarbe zugewiesen.

Formatierung von Tabellenzellen:
    Beispiel:
<TD HEIGHT=20 WIDHT=80 NOWRAP ALIGN=right VALIGN=middle COLSPAN=3 ROWSPAN=2 BGCOLOR="#FF00FF" BACKGROUND="bild.jpg">

HEIGHT, WIDHT, ALIGN, VALIGN, BGCOLOR, BACKGROUND siehe (Formatierung von Tabellen) der Unterschied ist lediglich daß sich hier die Eigenschaften auf eine Zelle beschränken.
NOWRAP Zeilenumbrüche werden verhindert
COLSPAN nebeneinanderliegende Zellen werden zusammengefaßt
ROWSPAN untereinanderliegende Zellen werden zusammengefaßt

11. Frame-Tags

Frames werden in HTML eingesetzt um mehrere Fenster auf einer HTML-Seite zu erzeugen, Sie sind dabei voneinander unabhängig. Links von dem einem Fenster können dann im anderen Fenster dargestellt werden.

Das Grundgerüst solcher Frames ist der Frameset:
<FRAMESET Definition der Lage und Größe der Frames>
    <FRAME Definition der einzelnen Frames>
</FRAMESET>

Definition der Lage und Größe der Frames:
    Hierzu 2 Beispiele:
<FRAMESET ROWS="60,*">
<FRAMESET COLS="50%,50%">

Mit ROWS kommt es zu einer vertikalen Aufteilung, mit COLS zu einer horizontalen Aufteilung.
Im ersten Beispiel wäre das erste Fester gerade 60 Pixel hoch und das 2. Fenster nimmt den Rest der unteren Browserfläche ein.
Im 2. Beispiel nimmt das erste Fenster die linke Hälfte des Browsers und das zweite Fenster die rechte Hälfte des Browsers ein.
Es ist besteht auch die Möglichkeit Framesets zu schacheltn das heißt innerhalb eines Fensters einen eigenen Frameset zu erzeugen.

Definition der einzelnen Frames:
    Ein Beispiel:
<FRAME SRC="werbung.htm" MARGINHEIGHT=5 MARGINWIDTH=5 Name="oben" NORESIZE SCROLLING=YES>

SRC URL der HTML-Datei, die in diesem Frame angezeigt werden soll.
MARGINHEIGHT Abstand des Frameinhalts zum oberen und unteren Begrenzung des Frames.
MARGINWIDTH Abstand des Frameinhalts zur rechten und linken Begrenzung des Frames
Name Symbolischer Name des Frames, über den er mittels des TARGET-Attributs eines ANCHOR-Tags angesprochen werden kann.
NORESIZE verhindert eine Veränderung der Größe des Fensters durch den Anwender.
SCROLLING Setzt fest ob ein Scroll-Balken im Frame erscheint. Mögliche Werte sind AUTO (default), YES oder NO.

Austausch des Inhalts eines Frames
    Ein Beispiel:
<A HREF="dlv.htm" TARGET="Inhalt">

Mit dem TARGET-Befehl wird die Datei dlv.htm im Frame mit dem Namen Inhalt angezeigt.
Daneben gibt es noch folgende TARGET-Definitionen:
TARGET="_blank" Die Datei wird in einem neuen Browser-Fenster geöffnet.
TARGET="_self" Die Datei wird im aktuellen Frame oder Fenster geöffnet. Mit diesem Wert können Sie beispielsweise das durch BASE gesetzte Default-Target überschreiben.
TARGET="_top" Die Datei wird im gesamten aktuellen Fenster angezeigt, bestehende Frames, werden also aufgelöst.
TARGET="_parent" Die Datei wird im PARENT-Fenster des aktuellen Frames geöffnet. Bei nur einer Framesetdefinition entspricht dies dem Parameter _top, andernfalls wird die Datei auf jenem Raum dargestellt, der vom übergeordneten Frameset belegt wird.

Frames sollten sinnvoll eingesetzt werden, z.B. da wo es mehrere Unterbereiche gibt wie hier in der Weblehre mit Hardware, Software und KnowHow und/oder wo viele Links vorliegen (siehe z.B. im Softwarebereich die HTML-Software). Die Farben in den einzelnen Frames sollten gut übereinstimmen evtl. kann das Design sogar so gewählt werden daß man gar nicht erkennt daß ein Frameset vorliegt.
Inzwischen unterstützen alle Browser den Frameset-Befehl so daß auf <NOFRAME> .... </NOFRAME> als Anhängsel an die Frameset-Definition verzichtet werden kann.

12. Alphabethischer HTML-Code

Anfang-TagEnd-TagBeschreibung
ACTION=""Ziel im Form-Tag
ALINK="#"Farbe des aktiven Links
<ADDRESS></ADDRESS>Freie Wahl einer Adresse
ALIGN= Platzierung Text zu Bild
ALT Text statt Bild
<A HREF="">Beschreibung</A>Hyperlinkbefehl
<B></B>Fettdruck
BGCOLOR="#">Hintergrundfarbe
BACKGROUND="">Hintergrundgraphik
BGSOUND SRC="">Hintergrundmusik
BANNER=""Permanente Logos
<BASE HREF="">Adresse des Dokuments
<BASEFONT SIZE=>Standardschriftgröße
<BLINK></BLINK>blinkender Text
<BLOCKQUOTE></BLOCKQUOTE>Markierung von Zitaten
<BODY></BODY>Inhalt des Dokuments
BORDER Rahmen
BORDER= Dicke des Rahmens
<BR> Zeilenumbruch
<CAPTION></CAPTION>Bildunterschrift
<CENTER></CENTER>zentrierter Text
CHECKBOX Kontrollkästchen
CLASS= Dokumenteinteilung
CLEAR= Zuordung von Objekten
CELLPADDING=PixelzahlAbstand zur Gitternetzlinie
CELLSPACING=PixelzahlDicke der Gitternetzlinien
<!---->Kommentartext
COLS=Pixelzahl,PixelzahlHorizontale Aufteilung von Frames
COLSPAN=Zahlhorizontale Integration von Zellen
COMPACT platzsparendes Listenattribut
CONTINUE Listennummerierung fortsetzen
<CREDIT></CREDIT>Bildquellangabe
<DD> Listenelement
DP=""Sprache|||LANG=|||Sprachdefinition
<DFN></DFN>Definitiontext
<DT></DT>Listenelement
<DL></DL>Definitionsliste
DINGBAT Standardbullet
<DIR></DIR>Verzeichnisliste
<DIV></DIV>gestufte Absätze
<EM></EM>Hervorhebung meist kursiv
<FIG>Formatierte Information zu Bildern
<FN></FN>Fußnote
<FONT SIZE=></FONT>Schriftgröße
<FORM></FORM>Formular
<FRAME > Eigenschaften eines Fensters
<FRAMESET ></FRAMESET>Definition von Fenstern
<HEAD></HEAD>Kopf des Dokuments
<H1></H1>Überschrift Schriftgröße 1
<H2></H2>Überschrift Schriftgröße 2
<H3></H3>Überschrift Schriftgröße 3
<H4></H4>Überschrift Schriftgröße 4
<H5></H5>Überschrift Schriftgröße 5
<H6></H6>Überschrift Schriftgröße 6
HEIGHT=PixelzahlHöhe des Bildes
<HR> Horizontaler Strich
HREF=""Link
<HTML></HTML>Abgrenzung HTML-Dokument
<I></I>Kursivschrift
ID= Definition Tabstop
<IMG>Bilder einfügen
IMAGEMAP= Linkbereich im Bild
INDENT= Tabeinrückbreite
<INPUT>Definition Eingabefeld
<ISINDEX>Durchsuchbares Dokument
ISMAP Bild als Link
<KBD></KBD>meist Schreibmaschinenschrift
<LINK>Verbindung zu anderen Dokumenten
LINK="#"Farbe des Links
<LH></LH>Kopflistenelement
<LI> Listenelement
LOWSRC=""unteres Bild
<MAP name="   "></MAP>Definition eines Imagemaps
MARGINHEIGHT=PixelzahlVertikale Abstand des Frameinhalts
MARGINWIDHT=PixelzahlHorizontaler Abstand des Frameinhalts
<MENUE></MENUE>formatierte Liste
<META>Deklaration von Dokumenten
METHOD=GET Übermittlungsart
MULTIPLE Mehrfachauswahl
NAME=""Name Auswahlbutton
<NEXTID>Eindeutigkeit von Adreßsen
NORESIZE Verhinderung der Größenänderung
NOSHADE Ausgefüllt
NOWRAP Zelle ohne Zeilenumbruch
<NOBR> Kein Zeilenumbruch
<OL></OL>geordnete Liste
<OPTION> Auswahlelemente
<P></P>Absatz
<PRE></PRE>Vorformatierter Text
PROMPT=""Individuelles Textfeld
RADIO Radiobutton
<RANGE>Zuordnung ID oder CLASS
REL= Linktyp
RESET Löschung der Eingabe
REV= rekursiver Linktyp
ROWS=Pixelzahl,PixelzahlVertikale Aufteilung von Frames
ROWSPAN=Zahlvertikale Integration von Zellen
SCROLLING=[yes/no]Balkenfestlegung im Frame
<SELECT></SELECT>Multiple Choice
SELECTED OPTION ist aktiv
SIZE=""Größe des Feldes
SRC=""Quelle des Bildes
<STRIKE></STRIKE>durchgestrichener Text
<STRONG></STRONG>Starke Hervorhebung meist fett
<SUB></SUB>tiefgestellter Text
<SUP></SUP>Hochgestellter Text
<TAB>Tabulator
<TABLE>Tabelle
TARGET="name"Zielframe
<TD></TD>Zellinhalt
<TEXTAREA></TEXTAREA>mehrzeiliges Eingabefeld
<TH></TH>Tabellenüberschrift
<TITLE></TITLE>Titel des Dokuments
<TR></TR>Liniendefinition
<TT></TT>Schreibmaschinenschrift
TYPE Art des Eingabefeldes
<U></U>unterstrichener Text
<UL></UL>ungeordnete Liste
VALIGN="[top,bottom,middle]"Vertikale Ausrichtung
VALUE=""Defaultwert des Eingabefeldes
<VAR></VAR>Variablenname meist kursiv
VLINK="#"Farbe des genutzten Links
WIDTH=PixelzahlBreite des Bildes
<XMP></XMP>Beispiel

13. Quellen über HTML im Internet

14. Literatur über HTML