Wurzelelemente einer HTML-Seite:
<html> <head> </head> <body> </body> </html>
Einige Codes: Grundsätzliches jeder Page: <html> , jeder code wird auch wieder mit einem </[code]> abgeschlossen. Body: <body bgcolor=#111111> Link: link="#333333" alink="#444444" vlink="#666666" <a href=”http://www….” > text </a> Schrift: <font color=”#115566” face=”Trebuchet MS” > , <h1>, <h2>, ..<h5> <b> Bilder: <img src="ordner/image.jpg" alt="Bild alternativ text" (z.B.: <img src="ordner/image.jpg" alt="Bild alternativ text" width="224" height="160" border="4" align="middle" vspace="10" hspace="160"> Umrandung: border="4" Grösse: height=”122” width=”123” Position: algin=“middle“ Abstand: vspace=“30 hspace=”50” Button: <button name="Button" type="button" value="test" onclick="self.location='test.html'"> test.html </button> Tabelle: <table border="0" cellpadding="6" cellspacing="2"> <tr> <td width="200" heigth="50" bgcolor="#3399AA">1 </td> </tr> <tr> <td width="200" heigth="50" bgcolor="#3399AA">2 </td>
</tr><tr> <td width="200" heigth="50" bgcolor="#3399AA">3 </td>
</tr> <tr> <td width="200" heigth="50" bgcolor="#3399AA">4 </td>
</tr>
XHTML-Elemente:
Struktur:
body Im Browserfenster dargestellter Inhalt des Dokuments head Der Kopf des Dokuments mit den Deklarationen html Wurzelelement des Dokuments title Der Titel des Dokuments
Text:
abbr Eine Abkürzung beim Mouseover erklären ("Tooltipp") acronym Eine gleichwertige Bezeichnung für einen Begriff einspielen ("Tooltipp") address Hervorhebung von Adressen blockquote Ausführliches Zitat br Zeilenvorschub ohne Formatwechsel cite kurzes Inline-Zitat code Darstellung von Computercode im Lauftext dfn Darstellung einer Definition im Lauftext div Generischer Behälter für Inhalte em Betonung einer Textpassage im Lauftext h Überschriften h1, h2, h3, h4, h5 und h5 kbd Darstellung einer Vorlage für die Eingabe p Absatz in einem Text pre Darstellung von längeren Passagen von Computercode q Hochkommas samp Beispiel für Computercode span Transporter für CSS-Stile für Inline-Inhalte strong Betonung einer Textpassage var Instanz einer Variablen
Hypertext
a Ankertag oder Hyperlink Listen
dl Beginn einer Definitionsliste dt Begriff einer Definitionsliste dd Erklärung des Begriffs einer Definitionsliste ol Geordnete Aufzählung ul Ungeordnete Aufzählung li Element einer Aufzählung
Darstellung b Darstellung eines Textes in einem fetten Schriftschnitt big Darstellung eines Textes in einer größeren Schrift hr Horizontale Linie i Darstellung eines Textes in einem kursiven Schriftschnitt small Darstellung eines Textes in einer kleineren Schrift sub Tiefgesetzter Text sup Hochgesetzter Text tt Darstellung einer Textpassage in einer nicht-proportionalen Schrift
Bearbeiten von Dokumenten
del Einen Text als gelöscht kennzeichnen ins Einen Text als eingefügt kennzeichnen
Bi-direktionaler Text
bdo Laufrichtung der Schrift angeben
Formulare
form Deklaration eines Formulars input Eingabefeld eines Formulars select Deklaration einer Auswahlliste option Element einer Auswahlliste textarea Textbereich für die Eingabe längerer Texte in einem Forumlar button Schaltfläche in einem Formular fieldset Gruppierung von Eingabefeldern in einem Forumlar label Bezeichnung eines Formularelements legend Bezeichnung einer Gruppe von Formularfeldern optgroup Optionsgruppe innerhalb einer Optionsliste einer Auswahl ¨ Tabellen
caption Überschrift einer Tabelle table Definition einer Tabelle td Tabellenzelle th Tabellenkopfzelle tr Tabellenzeile col Tabellenspalten colgroup Tabellenspalten gruppieren tbody Tabellenkörper thead Tabellenkopf tfoot Tabellenfuß
Bilder
img Ein Bild einfügen
Client-seitige Image Map
area map Objekte
object Multimedia-Objekt param Parameter eines Multimedia-Objekts
Frames
frameset Unterteilung des Browserfensters frame Fenster innerhalb des Browserfensters noframes iframe iframe Inline-Fenster meta meta allgemeine Metainfomationen zum Dokument script script noscript Alternativer Inhalt für Browser ohne Skriptunterstützung
link
link base
base
Links: Farben Hex-Codes: http://www.susas.de/farben/websichere_farben.htm
CSS (Cascading Style Sheets) ist eine Ergänzung zu HTML und wird zur Definition von Formateigenschaften einzelner HTML-Elemente gebraucht. So kann man HTML-Elemente - egal ob Textabsätze, Listen, Tabellenzellen oder Formulare - mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen ausstatten. CSS bietet also viele Möglichkeiten zur professionellen Gestaltung im Web-Design für Layouts und den Aufbau, bzw. aussehend des Inhalts und erspart einen Haufen Kodierarbeit, da z.B. Stylesheet Definitionen sogar in einer separaten Datei notiert werden kann und so beliebig viele Seiten mit dem gleichen Layout versehen werden können. Das Trennen von Design und Formatierung ist auch einer der Hauptvorteile an CSS.
CSS Elemente werden immer mit <style type="text/css"> und </style> angegeben. (Verlinkung im head tag: <head> <link href="css01.css" rel="stylesheet" type="text/css"> </head> Bei einer separaten CSS Datei muss die Endung *.css lauten, diese Datei wird dann in das „Normale“ HTML Dokument verlinkt.
Schriftormatierungen mit CSS: body { background-color:#FFFFCC; color: #ff0000; font-size: 20px; font-family: Trebuchet MS, verdana, arial, helvetica, "Times New Roman", courier; } h1 { color:#666666; font-size: 36px; font-weight: bold; font-style: italic; font-family: arial, verdana; text-align: center; }
td { background-color:#FFFFCC; color: #ff0000; }
td{ color: #116666; font-weight: bold; }
a { color: #AABBDD; font-size: 16px; font-family: trebuchet ms; text-decoration: none; } a:hover { color: #441277; font-size: 18px; font-family: trebuchet ms; text-decoration: none; }
.gross { color: #441277; font-size: 20px; font-family: trebuchet ms; text-decoration: none; } Layers mit CSS:
#one { position: absolute; top: 145px; left: 200px; height: 800px; width: 590px; background-color: #AABBDD; border: 0px solid #999999; padding: 10px; margin: 0px; color: #335599; font-family: verdana; font-size: 15px; text-align: center; }
#one h1 { color: #4466BB; font-family: verdana; font-size: 24px; }
#two { position: absolute; top: 145px; left: 1px; height: 400px; width: 190px; background-color: #ABCDEF; border: 5px solid #999999; font-family: tahoma; font-size: 16px; text-align: center; }
#two h1 { color: #335599; font-family: tahoma; font-size: 22px }
#two a { font-family: tahoma; color: #335599; font-size: 15px; text-decoration: none; font-weight: bold; }
#two a:hover { font-family: tahoma; color: #333333; font-size: 18px; font-weight: bold; }
Schreibfehler können oft Verursacher für Fehler sein, wie z.B.: align (fehler: algin..), border (fehler: boarder..), height (fehler: heigth) usw... !!!
