Ultrashort Quickreference -
==================================================================================

Dies soll lediglich eine kurze Übersicht sein, über die grundlegenden HTML-Tags (Bausteine), wer sich darin vertiefen will, kann dies gerne in der umfangreichen SElfhtml-Kompendium unter http://selfhtml.schlund.de tun, dort kann man auch einiges über Javascript etc. erfahren.

Grundsätzlicher Aufbau eines HTML
<HTML>
<TITLE> Titelzeile </TITLE>
<HEAD> Klammert den Kopf des HTML </HEAD>
<BODY> Hier kommt das eigentliche Dokument rein </BODY>
</HTML>

Textformatierung
<br> - Erzwungener Zeilenumbruch (z.B. zw. <p>...<br>...</p>)
<p>...</p> - Neuer Absatz
<pre>...</pre> - Vorformatierten Text benutzen
<ul>...</ul> - Ungeordnete Liste (kann auch geschachtelt werden)
<li>...</li> - Markiert ein Listenelement
<ol>...</ol>Geordnete Liste (Elemente werden nummeriert)
<hr width="200" noshade size="3" algin="left"> - Zieht eine Trennlinie. Minimal: <hr> . width & size entweder in Pixel "10" oder in Prozent "10%" , algin gibt an ob left, center oder right sein soll.
<center>...</center> - Zentriert Text und Bilder

Texthervorhebungen
Überschriften:
<h?>...</h?> - Definiert eine Überschrift (?: 1=groß...6=klein)
Logische Hervorhebungen:
<em>...</em> - Einfache Hervorhebung
<strong>...</strong> - Starke Hervorhebung
<code>...</code> - Klammert ein Programmlisting (ähnliche Wirkung wie `pre`)
Physikalische Hervorhebungen: (funktionieren nicht bei jedem Browser)
<b>...</b> - Fett
<i>...</i>: Kursiv
<u>...</u>: Unterstreichen
<tt>...</tt>: Typewriter Font

Umlaute & Sonderzeichnen
Umlaute (bei neuen Browsern ist es egal, es geht im Quelltext auch direkt ä,ü,ö,ß):
&auml; - ä   -   &Auml; - Ä
&ouml; - ö   -   &Ouml; - Ö
&uuml; - ü   -   &Uuml; - Ü
&szlig; - ß
Sonderzeichen:
&lt;     - <
&gt;    - >
&amp; - &
&quot; - "
&#149; - •

Einfügen eines Bildes:(GIF/JPG)
<img align="..." alt="..." width="..." heigh="..." src="Pfad oder Url zum Bild "> - align gibt an, wie das Bild in einen Text eingefügt wird (top, center ;default=bottom). alt ist ein Ersatztext (bei Lynx) bzw. das Fähnchen, dass angezeigt wird wenn man länger mit der Maus auf dem Bild bleibt. Die Minimalangebae ist <img src="Pfad oder Url zum Bild ">

Links zu anderen Seiten / Bildern
<a href="URL/Pfad">Text/Bild</a> - Der eingeschlossene Text wird blau hervorgehoben; Bilder werden blau umrandet.

Textsprungmarken
<a href="#sprungmarke1">Text</a> - Text bei dem man per Klick drauf zur gewünschten Textstelle im Dokument springt (Wichtig ! es muss wenn der Name der Sprungmarke z.B. otto ist hier beim Link #otto stehen ...)
<a name="sprungmarke2">Text</a> - Textstelle zu der gesprungen werden soll

Tabellen
<table border="0" cellpadding="1" cellspacing="1" width="100" heigh="100" bgcolor="#FFFFFF" bordercolor="00ff00" background"../test.jpg" bordercolorlight="#ffffff" bordercolordark="a0a0a0">
Dies ist die erste Zeile einer Tabelle, der "kopf" hier steht wie gross(width & heigh) die Tabelle sein soll, welche Hintergrundfarbe (bgcolor), Zellenabstand (cellspacing), Textabstand (cellpadding), Hintergrundbild (background) und Rahmenfarbe. bordercolor ist allgemeine gültig (Netscape, Opera, IE), wenn bordercolorlight und bordercolordark gesetzt sind "vergisst" der IE die Angabe bordercolor und setzt zeigt dafür bordercolorlight und bordercolordark an. Man kann natürlich wie immer alles weglassen dann wird der Standard angezeigt. abgeschlossen wird die Tabelle mit </table>
Zeilen werden mit <tr>...</tr> angelegt, es muss jedoch mind. eine Zeile in einer Tabelle vorhanden sein - Spalten erreicht man, in dem man die einzelnen Zeilen mit<td>...</td> trennt . Es kann wie im Tabellenkopf für jede einzelne Zelle die Farbe etc. erneut festgelegt werden.

Farben
Prinzipiell wirder der Farbwert in RGB angegeben, der Wert sieht so aus #000000 , wobei die ersten zwei 00 den Rot-Wert angeben, die nächten beiden den Grün-Wert und die letzten beiden den Blau-Wert. die Farben werden im Hexadezimalformat angegeben von 00 -ff.
<p><font color="#000000">Farbiger Text</font></p> - hier im Bsp. wäre der Text schw.
<body bgcolor="#0000ff"> Hier kommt das eigentliche Dokument rein </body> verpasst dem Dokument einen blauen Hintergrund.
<hr width="200" noshade size="3" color="#00ff00" algin="left"> eine Trennlinie in grün

Frames
Plazierung nach dem Header Abschlusstag ( </head>) und dem Body Anfangtag (<body>) kommt folgendes:
<frameset framespacing="0" border="0" frameborder="0" bordercolor="#ff0000" color="#ff0000" cols="100,*" marginwidth="0" marginheigh="0" target="name1">
Dies ist der Framekopf, hier wird die Abstand zw. den Frames festgelegt, und ob es in Spalten (cols) oder Reihen (rows) aufgeteilt werden soll. Bei der Angabe nach rows/cols kann man das Fenster in beliebig viele Frames aufteilen, etwa so rows="100,20,40,...,*" wobei der abschliesende Stern der Rest des noch möglichen Bildschirms angibt, dieser kann auch am anfang stehen -> rechtsbündig. Zu den Rändern - der Tag bordercolor wird nur von Netscape bis v4.7x angezeigt, color ist für IE und Netscape 6. marginwidth & marginheigh geben den Abstand des Textes im einzelnen Frame zum Rand hin an. target ist der Name des ganzen Framesets (wichtig für das setzen von Links). Hiernach kommt entspr. der Anzahl der angelegen Reihen Spalten die Frames hin, im obigen Bsp. sind es zwei also:
<frameset rows="50%,*" marginwidth="0" marginheigh="0" target="name2">
<frame name="Index1" scrolling="no" scr="Menue.htm" marginwidth="0" marginheigh="0" target="Menue1">
<frame name="Index2" scrolling="no" scr="Menue.htm" marginwidth="0" marginheigh="0" target="Menue2">
</frameset>

<frameset rows="50%,*" marginwidth="0" marginheigh="0" target="name2">
<frame name="Index3" scrolling="no" scr="Menue.htm" marginwidth="0" marginheigh="0" target="Menue3">
<frame name="Index4" scrolling="no" scr="Menue.htm" marginwidth="0" marginheigh="0" target="Menue4">
</frameset>

<noframes>
<body>Hier kommt ein Hinweis, für Browser die keine Frames unterstützen </body>
</frameset>
</noframes> ...
Das obige Bsp sieht etwa so aus
____________________________
|       |                     |
|       |                     |
|       |                     |
|-------|--------------------|
|       |                     |
|       |                     |
|_______|____________________|

Allgemeines
Die Pfadnamen sollten realtativ sein, nicht !!! http://www.homepage.de/bilder/neu/galerie.htm sondern /bilder/neu/galerie.htm . Wenn die Dateien ein Verzeichnis weiter unten liegen als die HTML-Seite so schreibt man ../Ordner oder wenn es zwei Stufen weiter unten liegt ../../Ordner

HTML-Editor
Es gibt etliche Editoren, die einem die Erstellung der Seiten erleichtern, es geht zur Not auch mit Notepad, oder dem Netscape-Composer - letzteres ist wahrscheinlich ein wenig Komfortabler.

FTP-Programm
Was ist das eignetlich ? - dies ist ein Programm, mit dem man seine erstellten HTml-Seiten etc. auf den jeweiligen WEbspace übertragen kann, eine bekanntes ist WS-FTP ist für rein private Nutzung kostenfrei; downloaden kann man dies unter http://www.ipswitch.com/german/ es sollte eigentlich selbsterklären sein, dur trägt den Host z.B. www.webspaceanbieter.de ein, den User und das Pwd. Wichtig !!! HTML-Seiten und andere Dateien die ACSI-Code enthalten spricht Text-Dateien müssen per ACSII-Modus übertragen werden, und Programme Downloads und Bilder im Binär-Modus.

Tipps & Links zum Aufbau der ersten eigenen Homepage
Zu Webspace (sprich Speicherplatz für die Seiten im Internet):
Ein schneller Webspace ist wichtig, daher sollte man beim Auswahl drauf achten, dies kann man checken in dem man im MS-Dos-Fenster "ping www.webspaceanbieter.de" eingibt, bzw. "tracert www.domain.de" um die Spur zu Verfolgen und festzustellen wo die Engpässe sind.

Webspace
Meiner Erfahrung nach sind zeigen folgende Anbieter eine gute Performance:
• http://puretec.de/produkte_kostenlosehomepage.html   - es gibt dort eine Homepage mit Adresse
  http://name.purepace.de mit 10 MB kostenfrei, ebenso günstige Domains dazu (optional)- leider mit
  Banner.
• http://einsundeins.com - dort gibt es eine Homepage mit Adresse http://name.online.de mit 10 MB
  kostenfrei, ebenso eine E-Mail-Adresse (die hat man zuerst, und wenn noch frei, kann man sich den
  entspr. Namen auch als Url einrichten nach Erhalt des Freischaltcodes). Die E-Mail-Adresse muss man
  leider über die Webseite abrufen, kann aber auch eine Weiterleitung einrichten. Es ist auch eine
  Messaging-Rufnummer enthalten, bei der man Faxe als Tif-Datei und Sprachnachrichten als Aiff-Datei
  zugestellt bekommt.
• Wer eine Link-Seite erstellen will und ein paar Bilder drauftut dem langen eigentlich 10 MB völlig
  ansonsten empfehle ich das Angebot entspr. mehrfach zu ordern - kost' ja nichts. Wer dennoch viel
  Webspace braucht, unter http://www.fortunecity.de gibt's 100 MB - allerdings nicht so flot - es gibt dort
  auch eine E-Mail-Adresse (aber die gibt's ja wie Sand am Meer ...).
• Weitere Anbieter findet ihr unter folgenden Link ( bei der Suchmaschine http://alltheweb.com +free
  +webspace eingeben):
  http://alltheweb.com/cgi-bin/search?exec=FAST+Search&type=all&query=%2Bfree+%2Bwebspace

Redirectoren
Die Url is' viel zu lang ... dann brauchst du einen Redirector-Anbieter:
• http://nic.de.vu - dort gibts eine Subdomain im Stil von http://name.de.vu kostenfrei ohne Banner wenn
  man dies so einstellt
• http://freedoms.de - hier gibt's eine richtige .de-Domain kostenfrei (mit Redirect). Es kostet 58,-DM
  wenn du die .de-Domain zu einem anderen Anbieter umziehen willst.

Eigner Server
wenn du eine Standleitung bzw. Flaterate hast, kannst du auch deinen eignen Server machen, mit Hilfe eines Dynmaic IP Service Anbieters http://www.dom2ip.de bzw. http://dips.de

Webseitenregistrierung
Wenn du möchtest, das deine Seiten auch Besucher bekommt, dann must du deine Seiten anmelden, dies kann man z.B. unter http://webxxx.schlund.de für 40 Suchmaschninen oder auf bei den einzelnen Suchmaschinen direkt - eine Übersicht hierzu gibt's unter http://bottled.de/Suchmaschinen-001.htm



==================================================================================
Seit dem 1999.12.14 mal besucht
[http://www.bottled.de - webmaster@bottled.de - Letzte komplette Aktualisierung 2004.10.15]