HPW FILMSTUDIOS

Auszeichnungssprache HTML

Die Hypertext Markup Language HTMList eine textbasierte Auszeichnungssprache zur Strukturierung elektronischer Dokumente wie Texte mit Bildern, Hyperlinks und anderen Inhalten. HTML-Dokumente sind die Basis des World Wide Web und werden von den Webbrowsern interpretiert um Inhalte darzustellen.

 Es werden folgende Themen behandelt:
  -Metatags
  -Farbnamen
  -Sonderzeichen
  -Allgemeine Tags
  -Text
  -Listen
  -Formulare
  -Sonstige Tags
  -Lauftext
  -Einbindung
  -Hyperlinks
  -Tabellen
  -Framesets

Metatags für Suchmaschinen

Bestimmte Suchmaschinen (wie z.B. AltaVista, Fireball oder Infoseek) werten die Meta-Tags aus und bestimmen danach den Rand der Darstellung. Das heißt es lohnt sich hier sorgfältig vorzugehen, wenn man weit oben erscheinen möchte. Leider hat jede Suchmaschine ihre eigenen Regeln, so dass es nicht für alle Suchmaschinen die Lösung gibt.

Tag Attribut

Wert

 Erklärung

Beispiel
<meta> http-equiv="content-type" text/html; charset=iso-8859-1 Angabe vom Zeichensatz, es können Umlaute verwendet werden <meta http-equive= "content-type" content="text/html; charset=iso-8859-1" >
  name="generator" Name Bestimmte Editoren schreiben sich hier ein. Kann auch ohne Problem gelöscht werden <meta name= "generator" content="Editor 5.0" >
  name="author" Herr xyz Geben Sie hier wenn sie möchten Ihren Namen ein <meta name= "author" content="Else Welse" >
  name="keywords" Schlüsselwort Für Suchmaschinen besonders wichtig: Schlüsselwörter die den Inhalt beschreiben. Länge: bis 256 Zeichen. Die wichtigen zuerst! <meta name= "keywords" content="HTML, Homepage, Programmierung" >
  name="description" Beschreibung Beschreibt in kurzer Weise den Inhalt. Länge: bis 256 Zeichen <meta name= "description" content="Diese Seite zeigt wie man Suchmaschinen beeinflussen kann" >
  name="rating" Einschätzung Einschätzung bzw. Kategorie. Nur ein kurzes Wort zur Einordnung <meta name= "rating" content="HTML" >
  name="revisit-after" x days Zeitraum nach dem die Suchmaschine die Seite erneut aufsuchen soll. Wenn die Seite sich öfters ändert, ist 30 sinnvoll. Sonst kann dieser Wert auch höher gesetzt werden. Kleinere Werte sind kaum sinnvoll, weil die Suchmaschinen derzeit so viele Seiten verwalten, dass dieser kleine Wert dann nicht eingehalten werden kann <meta name= "revisit-after" content="30 days" >

 

erlaubte Farbennamen
englischdeutschHexadezimaler Wert
blackschwarz#000000
silverhellgrau#C0C0C0
graygrau#808080
whiteweiß#FFFFFF
maroomkastanienbraun#800000
redrot#FF0000
purplelila#800080
fuchsiahellila#FF00FF
greendunkelgrün#008000
limehellgrün#008000
oliveolivgrün#808000
yellowgelb#FFFF00
navydunkelblau#000080
blueblau#0000FF
tealblaugrün#008080
aquahimmelblau#00FFFF
Sonderzeichen
SonderzeichenKodierung
ä&auml;
Ä&ouml;
ö&Ouml;
Ö&Auml;
ü&uuml;
Ü&Uuml;
ß&szlig;
<&lt;
>&gt;
&&amp;
"&qout;
'&apos;

Allgemeine Tags

Tag Attribut

Wert

 Erklärung

Beispiel
<html></html>     Anfang und Ende einer HTML-Datei  
<head></head>     Definiert den Kopf  
<title></title>     Erzeugt den Titel, der in der Titelzeile des Browsers erscheint <title>Meine Seite</title>
<body></body>     Definiert Hauptbereich  
  text hex. Code, Farbname Definiert Textfarbe <body text="#007770">
  bgcolor hex. Code, Farbname Definiert Hintergrundfarbe <body bgcolor="white">
  background   Fügt Himtergrundbild ein <body background="bild.gif">
  link hex. Code, Farbname Farbe des Links <body link="green">
  vlink hex. Code, Farbname Farbe des besuchten Links <body vlink="green">
  alink hex. Code, Farbname Farbe des aktiven Links <body alink="green">
<meta />     Erzeugt Bereich für Zusatzinformationen  
<bgsound />     Spielt Klangdatei ab  
  src Name der Klangdatei Nur für Internet Explorer <bgsound src="namexy.mid"/>

Text

Tag Attribut

Wert

 Erklärung

Beispiel
<h1...6></h1...6>     Überschrift nach Größe <h2>Überschrift xy</h2>
<b></b>     Bold, fett  
<i></i>     Italics,kursiv  
<u></u>     Unterstrichen  
<spart></spart>     Definiert einen <span>Container, (Zeichenformatierunf via Style Sheets)  
<strike></strike>     Durchgestrichen <strike>inkorrekt</strike>
<big></big>     Große Schrift  
<small></small>     Kleine Schrift  
<sub></sub>     Tiefstellung  
<sup></sup>     Hochstellung  
<em></em>     Hervorgehoben  
<strong></strong>     Stark betont (oft fett)  
<code></code>     Für Quellcode  
<kbd></kbd>     Text der über die Tastatur einzugeben ist  
<cite></cite>     Literaturangaben (meist kursiv)  
<dfn></dfn>     Definitionstext  
<samp></samp>     Text wird ausgegeben wie eingegeben  
<q></q>     Für kurze Zitate (meist kursiv)  
<tt></tt>     Teletype, nicht proportionale Schrift  
<font></font>     Legt Schrifteigenschaften fest  
  face Schriftart Definiert Schriftart <font face="Times">xyz</font>
  size 1 bis 7 oder relativ z.B.: (-1,-2,+1+2) Definiert Schriftgröße  
  color hex. Wert, Farbname Definiert Schriftfarbe  
<p></p>     Definiert einen Absatz  
  align left, center Ausrichtung  
  class, id freier Name Definiert eine Klasse <p class="xy" id="xy">Das ist ein Text</p>
<br/>     Zeilenumbruch  
<div></div>     "Container" auf Absatzebene  
  class, id freier Name Definiert Klasse <div class="pos1">Eine Stelle </div>

Listen

Tag Attribut

Wert

 Erklärung

Beispiel
<ul></ul>     Erzeugt Aufzählungszeichen  
  type disc Runde Aufzählungszeichen, Voreinstellung  
    square quadratische Aufz.  
    circle kreisförmige Aufz. <ul type="circle">
<ol></ol>     Erzeugt eine Nummerierung  
  type 1 arabische Zahlen  
    A Großbuchstaben <ol type="A">
    a Kleinbuchstaben  
    I Große römische Ziffern  
    i Kleine römische Ziffern  
  start Ziffer Startwert, Voreinstellung = 1 <ol type="1" start="2">
    Wert   <ol type="1" start="D">
<li></li>     Listeneintrag <li>xy</li>

Formulare

Tag Attribut

Wert

 Erklärung

Beispiel
<form></form>     Definiert ein Formular  
  action Pfad zu CGI-Skript   action="http://www.xy.de/cgi-bin/x.pl"
    E-Mail-Adresse   action="mailto:x@z.de"
  method post , get Art der Übermittlung methode="post"
<input/> type   Definiert ein Formularelement  
    text Texteingabe <input type="text"/>
    password Feld zur Passworteingabe  
    radio Radioknopf <input type="radio" name="a" value="1"/>
    checkbox Kontrollkästchen  
    reset Reset-Button <input type="reset" value="Reset"/>
    submit Submit-Button (Abschicken)  
    button Schaltfläche  
<textarea> </textarea>     Mehrzeiliges Texteingabefeld  
  rows, cols Wert Anzahl der Zeilen, Länge <textarea name="a" rows="3" cols="50"> </textarea>
  wraps soft Zeilenumbruch  
<select>     Definiert Auswahlfeld  
  size Wert Definiert Anzahl der Felder <select name="auswahl" size="1">
<option>     Auswahlfeld im <select>-Tag. <option>Seite 1</option>

Sonstige Tags

Tag Attribut

Wert

 Erklärung

Beispiel
<hr/>     Erzeugt eine Linie <hr/>
  size Pixel Dicke der Linie, Voreinstellung 1 <hr size="4"/>
  width Pixel, % Breite in Pixel oder Prozent, Voreinstellung 100% <hr width="300"/>
  align center Zentriert, Voreinstellung  
    left Linksbündig <hr width="70%"align="left"/>
    right Rechtsbündig <hr width="250"align="right"/>
  color hex. Code, Farbname Farbname, Farbe nur Internet Explorer <hr width="270" size="5" color="red"/>
  nshade noshade Linie soll keinen Schatten werfen <hr noshade="noshade"/>

Lauftext (marquee)   --> wird nicht von Netscape interpretiert <--

Tag Attribut

Wert

 Erklärung

Beispiel
<marquee> </marquee>     Lauftext <marquee>Es rollt</marquee>
  loop Ziffer Anzahl der Wiederholungen; Voreinstellung: unendlich <marquee loop="4">Es rollt 4 mal</marquee>
  behavior   Bewegungsverhalten  
    scroll Einfachen Durchlaufen, Voreinstellung behavior="scroll"
    alternate Text läuft hin und her behavior="alternate"
    slide Reinrollen und stehen bleiben behavior="slide"
  direction   Richtung  
    left Von links, Voreinstellung direction="left"
    right Von rechts direction="right"
    down Nach unten direction="down"
    up Nach oben direction="up"
  bgcolor hex. Wert, Farbname Hintergrundfarbe des Laufbandes bgcolor="yellow"
  height Pixel, % Höhe des Laufbandes height="150"
  width Pixel, % Breite des Laufbandes width="25%"
  scrollamount Ziffer Gibt an, um wie viele Pixel sich das Objekt bei jedem Schritt bewegt scrollamount="20"
  scrolldelay in ms Dauer der Pause zwischen zwei Schritten in Millisekunden scrolldelay="1000"

Grafiken und Media-Dateien einbinden

Tag Attribut

Wert

 Erklärung

Beispiel
<img/>     Fügt Grafik-Datei ein  
  src Dateiname Quelle der Datei <img src="bild.gif" />
  align   Ausrichtung  
    left, right Links- oder rechtsbündig <img src="bild.gif" align="left"/>
  width, height Pixel Breite , Höhe der Grafik  
  alt Text Alternativtext <img src="bild.gif" alt="xyz"/>
  border Pixel Fügt Rahen ein (0=ohne)  
  vspace Pixel Zusätzlicher Raum oben und unten  
  hspace Pixel Zusätzlicher Raum links und rechtst  
<embed/>     Fügt eine Media-Datei ein  
  src Dateiname Quelle der Datei <embed src="musik.mid" />
  width, heigth Pixel Höhe bzw. Breite des Players  
  autostart true, false Gibt an, ob ein Stück automatisch gespielt wird <embed src="musik.mp3" autostart="false" />
  loop true, false Gibt an, ob ein Stück immer wiederholt wird  
  hidden true, false Gibt an, ob Player angezeigt wird  

Anker und Hyperlinks

Tag Attribut

Wert

 Erklärung

Beispiel
<a> </a> href Quelle der Datei (URL) Verweis auf eine interne oder externe Datei. <a href="bild.gif">...</a>
        <a href= "http://www.playgames.de">...</a>
    Ankername Verweis auf einen internen Anker. <a href="#zeichen">...</a>
    mailto: E-Mail-Adresse Verweis auf E-Mail-Adresse <a href= "mailto:xy@regiopage.de"> Betreffxy </a>
  name oder id Ankername Verweis auf einen internen Anker <a name="zeichen" id="zeichen">...</a>

Tabellen (Beispiel  siehe auch Quellcode hierzu)

Tag Attribut

Wert

 Erklärung

Beispiel
<table></table>     Erzeugt eine Tabelle  
  border Pixel Definiert Rahmen, Voreinstellung=0 <table border="3">
  bgcolor hex. Wert, Farbname Hintergrundfarbe <table border="3" bgcolor="red">
  align left, right Ausrichtung, Voreinstellung ist ohne <table align="left">
  width Pixel,% Breite <table width="55%">
  cellpadding Pixel Platz zwischen Zellrand und Zellinhalt <table border="1"cellpadding="4">
  cellspacing Pixel Abstand zwischen einzelnen Feldern <table border="1"cellspacing="3">
<tr></tr>     Definiert Zeile  
<td></td>     Definiert Zelle  
  width Pixel,% Breite <td witdh="100">
  align left, center, right Ausrichtung, Voreinstellung = left <td witdh="100" align="center">
  valign top, middle, bottom Vertikalausrichtung, Voreinstellung = middle  
  bgcolor hex. Wert, Farbname Hintergrundfarbe  
  colspan Wert Definiert, über wie viele Spalten sich eine Zelle erstreckt <td colspan="4">
  rowspan Wert Definiert, über wie viele Spalten sich eine Zelle erstreckt <td rowspan="4">
<th></th> siehe <tr>   Definiert Zelle im Tabellenkopf <th>Anzahl</th>

Frameset

Tag Attribut

Wert

 Erklärung

Beispiel
<frameset></table>     Leitet einen Frameset ein  
  cols Pixel,%,* Teilt das Fenster in Spalten ein <frameset cols="*,40">
  rows Pixel,%,* Teilt das Fenster in Zeilen ein <frameset rows="10%,*">
  border Pixel Gibt Rahmenbreite an <frameset rows="10%,*" border="0">
  frameborder 0,1 (yes,no) Legt fest, ob Rahmen dargestellt werden  
  bordercolor hex, Code, Farbname Weist dem Rahmen eine Farbe zu  
<frame/>     Zeigt Seite im Frameset an  
  src Dateiname Gibt Quelle für den Frame an <frame src="navi.htm"/>
  scrolling auto, yes, no Rollbalken anzeigen: ja, nein, bedingt <frame src="navi.htm" scrolling="no"/>
  noresize noresize Unterdrückt Verstellbarkeit der Rahmengröße  
  marginwidth Pixel Randbreite  
  marginheight Pixel Randhöhe  
</frameset>     Beendet das Frameset  
<noframe></noframe>     Beschreibung für nicht-framefähige Browser ein <noframe>Ihr Browser versteht keine Frames</noframe>