Code: FFFFFF
Code: FFFFDD
Code: FFFF00
Code: FFDDDD
Code: FF66FF
Code: FF0000
Code: DDFFFF
Code: 0000FF
Code: 00FF00
Code: 000000Viele 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:
| Sonderzeichen | ISO Latin -1- Kodierung |
|---|---|
| à | à |
| á | á |
| â | â |
| ã | ã |
| ä | ä |
| å | å |
| æ | æ |
| À | À |
| Á | Á |
| Â | Â |
| Ã | Ã |
| Ä | Ä |
| Å | Å |
| Æ | Æ |
| ß | ß |
| ç | ç |
| Ç | Ç |
| ð | ð |
| Ð | Ð |
| è | è |
| é | é |
| ê | ê |
| ë | ë |
| È | È |
| É | É |
| Ê | Ê |
| Ë | Ë |
| ì | ì |
| í | í |
| î | î |
| ï | ï |
| Ì | Ì |
| Í | Í |
| Î | Î |
| Ï | Ï |
| ñ | ñ |
| Ñ | Ñ |
| ò | ò |
| ó | ó |
| ô | ô |
| õ | õ |
| ö | ö |
| Ò | Ò |
| Ó | Ó |
| Ô | Ô |
| Õ | Õ |
| Ö | Ö |
| ù | ù |
| ú | ú |
| û | û |
| ü | ü |
| Ù | Ù |
| Ú | Ú |
| Û | Û |
| Ü | Ü |
| ý | ý |
| ÿ | ÿ |
| Ý | Ý |
| Ÿ | Ÿ |
| + | + |
| - | - |
| × | × |
| · | · |
| • | • |
| * | * |
| / | / |
| ÷ | ÷ |
| ˆ | ˆ |
| = | = |
| ‹ | ‹ |
| › | › |
| « | « |
| » | » |
| ( | ( |
| ) | ) |
| [ | [ |
| ] | ] |
| { | { |
| } | } |
| % | % |
| ‰ | ‰ |
| ± | ± |
| ~ | ~ |
| ø | ø |
| Ø | Ø |
| ! | ! |
| & | & |
| ¬ | ¬ |
| ¹ | ¹ |
| ² | ² |
| ³ | ³ |
| ¼ | ¼ |
| ½ | ½ |
| ¾ | ¾ |
| ª | ª |
| ° | ° |
| µ | µ |
| ¤ | ¤ |
| $ | $ |
| ¢ | ¢ |
| £ | £ |
| ¥ | ¥ |
| " | " |
| # | # |
| ' | ' |
| , | , |
| . | . |
| : | : |
| ; | ; |
| ? | ? |
| @ | @ |
| \ | \ |
| _ | _ |
| ` | ` |
| | | | |
| ƒ | ƒ |
| „ | „ |
| … | … |
| † | † |
| ‡ | ‡ |
| Š | Š |
| Π| Π|
| ’ | ’ |
| “ | “ |
| ” | ” |
| ™ | ™ |
| œ | œ |
| ¡ | ¡ |
| ¦ | ¦ |
| § | § |
| ¨ | ¨ |
| © | © |
| ® | ® |
| ¯ | ¯ |
| ´ | ´ |
| ¶ | ¶ |
| ¿ | ¿ |
| Leerzeichen |   |
Nachfolgend einige Farbbeispiele:
Code: FFFFFF
Code: FFFFDD
Code: FFFF00
Code: FFDDDD
Code: FF66FF
Code: FF0000
Code: DDFFFF
Code: 0000FF
Code: 00FF00
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
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.
|
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 |
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.
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
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.
| Anfang-Tag | End-Tag | Beschreibung |
|---|---|---|
| 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= | Pixelzahl | Abstand zur Gitternetzlinie |
| CELLSPACING= | Pixelzahl | Dicke der Gitternetzlinien |
| <!-- | --> | Kommentartext |
| COLS= | Pixelzahl,Pixelzahl | Horizontale Aufteilung von Frames |
| COLSPAN= | Zahl | horizontale 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= | Pixelzahl | Hö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= | Pixelzahl | Vertikale Abstand des Frameinhalts |
| MARGINWIDHT= | Pixelzahl | Horizontaler 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,Pixelzahl | Vertikale Aufteilung von Frames |
| ROWSPAN= | Zahl | vertikale 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= | Pixelzahl | Breite des Bildes |
| <XMP> | </XMP> | Beispiel |
