Die ersten Schritte zur eigenen Homepage - michi -

[Paule]

Autor: michi

(wird bearbeitet)

Die ersten Schritte zur eigenen Homepage

Einleitung

Dies soll der erste kleine Schritt zu deiner eigenen Homepage sein.
Um eine Homepage handelt es sich, wenn die Internetpräsenz nur eine Seite umfaßt. Sollte es sich um mehrere Seiten handeln, so ist das eine Webseite (Engl. website). Im allgemeinen nennt man auch Webseiten eine Homepage, was im Prinzip aber nicht richtig ist.

Für den Anfang ist die Scriptsprache HTML der erste Schritt zur eigenen Homepage. Es sollen hier nicht die Feinheiten und die kompletten Möglichkeiten von Webdesign vermittelt werden, deshalb ist alles so einfach und kurz wie möglich gehalten. Es wurde bewußt auf weiterführende und moderne Methoden des barrierefreien Webdesign verzichtet. Wer sich intensiv um die Erstellung einer Webseite bemüht, wird früher oder später dran nicht vorbeikommen. Für den Einstieg ist das aber etwas zu undurchsichtig, daher wird versucht, das HTML auf die altmodische Art zu erklären. Ein Anspruch auf Richtigkeit besteht nicht!

HTML ist sehr verständlich, ist aber überwiegend nur für die optische Darstellung geeignet. Wer etwas berechnen, verschieben oder verändern möchte, muß dafür PHP oder eine andere Scriptsprache einsetzen. Das Forum ist eine Mischung aus PHP und HTML, wobei das PHP die Abläufe steuert und das HTML die optische Darstellung übernimmt.

Der Code oder auch Tag genannt, sollten immer klein oder groß geschrieben werden, nie gemischt, auch wenn dadurch die Funktion nicht beeinträchtigt wird. Die einzelnen Tags werden auch als Attribut bezeichnet.

Am einfachsten ist es, wenn das Rechtsklick Menü mit kopieren und einfügen (copy und paste) verwendet wird, das erspart eine Menge Schreibarbeit. Die Editoren haben auch alle eine Suchhilfe, damit lassen sich Abschnitte schneller finden.

Wenn ihr nun irgendwann an eurem HTML Quellencode herumbastelt, sollte immer frühzeitig eine Sicherungskopie angelegt werden, damit die bereits erzielten Ergebnisse nicht verloren sind, falls etwas nicht so geht, wie es geplant war.

Außerdem sollte beim Erstellen einer Seite auf die Bildschirmauflösung Rücksicht genommen werden. Ich würde empfehlen, die Seite mit einer Auflösung von 1024x768 Pixel anzupassen und den Browser auf mittlere Schriftgröße einzustellen.

Zur Überprüfung von Veränderungen am Quellcode braucht eine HTML Datei nicht auf den Server übertragen werden, es reicht, wenn die Datei über einen Browser von der PC Festplatte aufgerufen wird. Nach dem die Veränderung im Quellcode gespeichert wurde, kann der aktuelle Stand durch den aktualisieren Button des Browsers angezeigt werden. Das ist alles ohne das Internet möglich, geht aber nur bei HTML, weil bei anderen Scriptsprachen eine spezielle Serversoftware notwendig ist. Diese läßt sich aber auch auf dem PC simulieren, ist aber für den Anfang nicht notwendig.

Erst wenn die Seite fertig bearbeitet ist, wird sie auf dem Server übertragen, eine Endbearbeitung wird aber nicht zu vermeiden sein, das heißt, zunächst den Browser Cache über die Internetoptionen löschen und die komplette Webseite anschließend auf die Funktionsfähigkeit überprüfen.

Bilder, Grafiken etc. die sich auf euren PC befinden, könnten im Internet evtl. nicht angezeigt werden. Der Pfad zum Bild darf nicht zum Speicherplatz auf dem PC führen, sondern muß auf die Webspace (Server Speicherplatz) ausgerichtet sein. Die Bilder müssen sich selbstverständlich auch auf dem Server befinden. Dazu bitte den Teil "Relativer Pfad" beachten.

[Paule]

Vorbereitung

Einstellung im Betriebssystem

Erläuterung
Zunächst sollte das Betriebssystem so eingestellt sein, das auch die Dateiendungen angezeigt werden.
Eine Dateiendung zeigt an, um welches Dateiformat es sich handelt, das Dateiformat arbeitet mit bestimmten Programmen zusammen, sie verstehen sich also untereinander und das Programm kann mit dieser Datei etwas anfangen.

Nach dem das Betriebssystem umgestellt wurde, falls das nicht sowieso bereits der Fall war, befindet sich hinter jeder Datei drei Buchstaben, diese zeigen das Dateiformat an.
Beispiel: bild.jpg
"bild" ist der Dateiname und ".jpg" ist das Dateiformat, es kann sich in dem Fall nur um ein Bild handeln, ein Text wäre ".txt" oder ".doc" (word), eine browserfähige Datei hätte eine ".html" oder ".htm" Endung.

Einstellung Windows 98

1. Start/Einstellungen/Ordneroptionen
2. Ansicht
3. "Dateierweiterungen bei bekannten Dateitypen ausblenden"
4. Häckchen entfernen

1. ME und 2000
2. Start/Einstellungen/Systemsteuerung
3. Symbol Ordneroptionen
4. Rest wie bei Windows 98 ab 2

1. XP
2. Start (Alle)/Programme/Systemsteuerung
3. Ordneroptionen doppelklicken
4. Rest wie bei Windows 98 ab 2

Bearbeiten von Internet Seiten
Für das bearbeiten des HTML Quellencodes oder Quelltext wird ein Editor benötigt, theoretisch würde WordPad oder der Windows eigene Editor ausreichen. Aber ich empfehle den Proton, da er sehr übersichtlich ist, was besonders für den Anfang wichtig ist und er benötigt keine Installation. Wer etwas mehr Aufwand betreiben möchte, kann auch gleich den großen Bruder Phase5 installieren.

Webspace oder Speicherplatz im Internet
Um eine Webseite ins www (world wide web) zu bekommen, wird eine Webspace benötigt, das ist Speicherplatz auf einem Server der von einem Hoster zur Verfügung gestellt wird. Ein Server ist im Prinzip ein normaler PC, dessen Festplatte aufgeteilt wird und auf den man über das Internet Zugriff nehmen kann.

Ein Hoster vermietet also portionsweise den Festplatten- und Arbeitsspeicher an den Endverbraucher, das nennt sich Webhosting. Es wird aber nicht nur die Hardware zur Verfügung gestellt, auch der Traffic fällt darunter, das ist das Transfervolumen, also die Summe der ausgetauschten Daten. Für den Anfang sollten eigentlich 2 GB Traffic ausreichen, aber viele Hoster stellen bereits unbegrenzten Traffic zur Verfügung.

Bei einige Providern, die also den Internet Zugang ermöglichen, gehört bereits etwas Webspace mit zum Tarif. Damit lassen sich vermutlich aber nur HTML Seiten ermöglichen, nähere Informationen gibt es beim Provider.

Neben den kostenpflichtigen Anbietern, gibt es noch kostenlose, die sich häufig durch Werbung finanzieren oder diesen Service als Marketing Möglichkeit verwenden. Eine Liste von kostenlosen Anbietern findet sich hier.

Wer aber ernsthaft eine Webseite betreiben möchte, sollte einen kostenpflichtigen Anbieter nehmen. Für Anfänger wäre ein Hoster zu empfehlen, der den Server mit Confixx verwaltet, das Kundenmenü ist sehr benutzerfreundlich und übersichtlich.

Zu empfehlen ist für den Anfang server-drome.de.
Allerdings gab es Probleme bei der Domain Übernahme (kann sich inzwischen geändert haben), was bei einem Anfänger wohl kein Problem sein sollte, da noch keine Domain zum übernehmen vorhanden ist.
Alternativ gibt es Anbieter wie Strato.de, 1&1 oder all-inkl.com, bei diesen Anbietern ist das Kundenmenü für einen ungeübten Benutzer etwas schwer verständlich, aber durchaus zu bewältigen. Auf den Support sollte sehr großer Wert gelegt werden und da hat sich der Anbieter all-inkl.com bewährt.

Die Internet Adresse
Die Internet Adresse wird als Domain bezeichnet.
Beispiel: paules-pc-forum.de
paules-pc-forum ist die eigentliche Adresse, das DE ist wie beim Telefon eine Art von Vorwahl.
Mehr Informationen:
WebDesign Erlangen - Programmierung Suchmaschinenoptimierung
Uniform Resource Locator ? Wikipedia
Beim Hoster läßt sich eine Domain bestellen, Änderungen oder Kündigungen erfolgen über sogenannte KK Anträge, weitere Informationen finden sich im FAQ Bereich des Hosters.
Über DENIC eG - Willkommen bei der DENIC eG! kann festgestellt werden, ob die DE Domain noch frei ist.

Datenübertragung auf dem Server
Damit etwas auf einen Server, also ins Internet, übertragen werden kann, wird ein FTP Upload Tool benötigt.
Empfehlenswert ist der ftp-uploader.
Das Tool ist zwar nur für ein Projekt freeware, dafür ist es komplett in Deutsch und sehr übersichtlich und verständlich.

Es gibt noch sehr viele andere freeware Tools.
Eine kleine Auflistung
Der Beitrag behandelt zwar ein anderes Thema, aber mit Hilfe einer Suchmaschine sollten sich die Tools schnell finden lassen.

Hintergrundinformationen mit Übungseffekt
Auf den Servern sind noch Hilfsprogramme installiert, damit lassen sich Scripte im Internet darstellen und Programmabläufe realisieren, die nur mit einer anderen Scriptsprache möglich sind. Am gebräuchlichsten ist PHP und die auf Linux basierende MySQL Datenbank.

Wer wissen möchte, über welche Möglichkeiten sein Server verfügt, kann das relativ einfach herausfinden, es ist auch gleich eine schöne Anfängerübung.

1. Öffne den Editor.
2. Füge diesen Quellcode in eine leere Seite ein:

   <?
    
   PHPINFO();
    
   ?>

3. Speichere die Datei als infophp.php oder phpinfo.php in das Arbeitsverzeichnis vom FTP Upload Tool.
4. Übertrage die Datei mit dem FTP Upload Tool auf den Server.
5. Nun kann die Datei über deine Domain aufgerufen werden, wobei der Dateiname hinter die Domain, von einem Slash (/) getrennt, geschrieben wird.
   Beispiel: http://www.Deine-Internet-Adresse.de/infophp.php

[Paule]

Unverbindliche Verhaltensregeln und die Inhalte der Webseite

1. Das sollte die Webseite enthalten

• Ein Impressum sollte vorhanden sein, mit Name und Anschrift des Verantwortlichen, sowie eine schnelle Kontaktmöglichkeit. Diese Daten können als JPG Bild eingefügt werden, so werden sie nicht von Suchmaschinen erfaßt und Spam-Maschinen können damit auch nichts anfangen. Bei einer privaten Nutzung ist ein Impressum eigentlich nicht erforderlich. Doch macht es einen seriösen Eindruck, wenn der Verfasser zu seiner Internetpräsenz steht. Sobald die Seite kommerziell genutzt wird, das heißt, wenn sich Werbung auf der Seite befindet, ist ein Impressum zwingend vorgeschrieben.
  Mehr dazu ist bei netlaw.de unter "Allgemeine Informationspflichten" zu finden.
  Auf digi-info gibt es einen Impressum Assistenten, mit weiterführender Erklärung.
• Einen Haftungsausschluss, dieser kann sich im Impressum befinden. Als Standardtext hat sich folgender Text durchgesetzt:
  Haftungsausschluss:
  Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.
  Zusätzlich kann ein Link zu dieser Seite eingefügt werden:
  disclaimer / haftungsausschluss

2. Das sollte nicht auf der Webseite sein

Eine Mißachtung dieser Ratschläge kann eine sogenannte "Abmahnung" und eine "Unterlassungserklärung" zur Folge haben, sowie die nachträglich Einforderung von Lizenzgebühren.

• Keine Programme, Texte, Logo, Bild, Grafik von Dritten veröffentlichen, solange nicht eine schriftliche Genehmigung des Urhebers vorliegt.
  Eine Erlaubnis des Webmasters, von dessen Seite die Daten stammen, reicht nicht aus. Ein Hinweis, das die Daten kostenlos von einer Webseite verwendet werden dürfen, reicht ebenfalls nicht aus. Es ist immer die schriftliche Genehmigung des jeweiligen Rechteinhabers erforderlich.
• Ein Logo oder Warenzeichen nicht verfälschen oder abändern
• Texte und Songtexte aus fremden Quellen nur mit Quellenangabe als Zitat veröffentlichen. Also nicht den vollständigen Text, sondern nur Auszüge daraus.
• Keine rechtliche Beratung (Rechtsberatung) oder Gesetzestexte ohne anwaltliche Genehmigung veröffentlichen. Der Anwalt muß namentlich angegeben werden, was der wiederum erlauben muß.
• Keine Veröffentlichung von Anleitungen, Programmen, weiterführenden Links, die zum anfertigen von Kopien kopiergeschützter Datenträgern geeignet sind.
• Inhalte, die gegen die allgemeinen guten Sitten und gegen geltendes Recht verstoßen oder die Rechte Dritter verletzen.

3. Das gehört sich nicht

• Inhalte von anderen Webseiten zu übernehmen, die keinen Copyright Schutz unterliegen, ohne einen Quellenvermerk anzugeben.
• Das einbauen von Bildern, Fotos etc. die nicht auf der eigenen Webspace liegen, um Traffic zu sparen (Stichwort: Trafficklau).

4. Das sollte vorher mit dem Hoster geklärt sein

• Das betreiben eines Chat.
• Das veröffentlichen von pornographischen Webseiten.
• Der Traffic (Transfervolumen) und dessen Kosten, er sollte mindestens 2 GB im Monat betragen und bereits im Preis enthalten sein.

Grundvoraussetzung ist die Geschäftsfähigkeit, Eltern haften für ihre Kinder!
Das Internet ist kein rechtsfreier Raum!

[Paule]

Die Index Datei

Die erste Datei einer Homepage nennt sich immer Index, egal ob sie als Endung html oder php hat, wobei html dem php vorgezogen wird. Das heißt, wenn es eine index.html und eine index.php auf der Webspace gibt, wird die html Datei angezeigt. Sie wird auch angezeigt, wenn nur die Domain ( z.B. paules-pc-forum.de) in die Adresse Zeile vom Browser (z.B. Internet Explorer) eingetragen wird. Ein Browser erkennt die Index automatisch als Startseite und zeigt sie an. Wer es testen möchte, kann einmal auf paules-pc-forum.de und dann auf paules-pc-forum.de/index.htm klicken, in beiden Fällen wird die gleiche Seite aufgerufen. Im Bedarfsfall wird die index.html gelöscht, damit die index.php als Startseite vom Browser erkannt wird. Viele Hoster haben bereits eine index.html auf die Webspace gelegt, damit im Browser eine Seite aufgerufen wird. Diese wird entweder überschrieben oder falls eine index.php als Startseite dienen soll, wie gesagt, gelöscht.

Die HTML Seiten von paules-pc-forum haben nun statt html eine htm Dateiendung, was im Prinzip keinen Unterschied macht. Suchmaschinen hatten in der Vergangenheit etwas Probleme mit dieser Endung, inzwischen dürften die Probleme aber gelöst sein.

Nur die Index Seite wird automatisch vom Browser als Startseite angezeigt, die anderen Dateien müssen hinter der Domain Adresse, getrennt von einem Slash (/), geschrieben werden, nur so werden sie vom Browser angezeigt.

Sollte es nur die Index Datei geben, nennt es sich Homepage, sobald es weitere Seite gibt, nennt es sich Webseite. Von der Startseite führt der Weg weiter auf andere Seiten.

Mehr Informationen zum Thema Dateiendung

[Paule]

Doctype

Erklärung
In Doctype wird geregelt, welche Elemente ein Dokument vom Typ HTML enthält, welche Attribute zu einem Element gehören und ob die Angaben dieser Attribute Pflicht oder freiwillig sind.
Dem Browser und den Suchmaschinen wird durch den Meta Eintrag "iso-8859-1” unter anderem mitgeteilt, das die Seite europäischen Zeichensätze enthält, "text/html" deutet auf die verwendete Scriptsprache hin.

• Für eine normale Webseite
  
  Diesen Abschnitt vor <html> in jede Datei eintragen, es steht also außerhalb des eigentlichen HTML Codes.
  

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  Diesen META Eintrag in den HEAD Bereich einfügen.
  

  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

• Für eine frameset Webseite
  
  Diesen Abschnitt vor <html> in jede Datei eintragen, es steht also außerhalb des eigentlichen HTML Codes.
  

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

  Diesen META Eintrag in den HEAD Bereich einfügen.
  

  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

  Den frameset Doctyp nur für die Seite verwenden, in dem der frameset definiert wird, in der Regel ist das die index.html. Den frameset Doctyp in die Seite eintragen in dem kein body Tag vorhanden ist. Bei den anderen Seiten des frameset ist der Doctyp für normale Webseiten einzutragen.

Wer seine HTML Seiten mit einem HTML Validator überprüfen lassen möchte, muß Doctype und den META Abschnitt in den Quellcode einbauen.

[Paule]

Relativer Pfad

Verweise auf eine andere Seite oder Datei werden Hyperlink genannt. Im allgemeinen Sprachgebrauch werden sie aber nur als Link bezeichnet. Es kann nun passieren, das einige Links nicht richtig funktionieren oder das Button nicht richtig angezeigt werden. Entweder befindet sich die Seite oder Datei nicht im richtigen Serververzeichnis oder der Pfad im Link ist nicht richtig.
Ein Link setzt sich aus Domain und Zieldatei zusammen, bei einem relativen Pfad läßt man die Domain einfach weg, sie wird automatisch ergänzt. Das ist eine bequeme Einrichtung, da die Verzeichnisstruktur auf der PC Festplatte und auf dem Server gleich ist, ändert sich beim Übertrag auf den Server nur die Domain. Somit läßt sich die komplette Webseite offline am heimischen PC bearbeiten und testen und sobald sie fertig ist, wird sie einfach auf den Server übertragen.

Der komplette vordere Teil eines Pfades wird einfach weggelassen. Im Normalfall sieht ein Pfad in etwas so aus: http://www.domain.de/bilder/bild1.jpg

Bei einem relativen Pfad wird einfach nur vom Zielverzeichnis, -ordner oder -datei ausgegangen. Ersetzt wird der fehlende Teil entweder durch das weglassen des vorderen Teils oder durch das hinzufügen von Punkten, mehr wie zwei Punkte werden aber nicht gemacht.

Beispiele

• bilder/bild1.jpg
• /bilder/bild1.jpg
• ./bilder/bild1.jpg
• ../bilder/bild1.jpg

bild1.jpg befindet sich im Ordner bilder, falls es keinen Ordner gibt, wird das Verfahren nur mit der Datei angewendet, also ../bild1.jpg.

Leider läßt sich nicht genau sagen, welche Abkürzung nun die richtige ist, eine pauschale Antwort läßt sich bei einem relativen Pfad nicht geben, sie ist abhängig von der Verzeichnisstruktur, das muß von Fall zu Fall ausgetestet werden.

[Paule]

Deutsche Umlaute und Sonderzeichen

Das Internet ist International, einige Eigenheiten der deutschen Rechtschreibung verursachen Probleme mit Browsern, die nicht auf das deutsche Sprachschema eingestellt sind. So können Umlaute und Sonderzeichen nicht umgesetzt werden. Damit aber dennoch alles richtig dargestellt wird, werden diese Zeichen durch spezielle HTML Zeichenfolgen ersetzt, die auch International verstanden werden.

Beispiel
Das Wort "Veränderung" enthält den Umlaut ä, dieser wird durch &auml; ersetzt, im Text würde das Wort also so aussehen: Ver&auml;nderung
Im Browser wird das Wort wieder richtig angezeigt, nur im Quellcode wird die HTML Zeichenfolge eingesetzt.

In HTML ist immer nur ein Leerschritt möglich, wer mehr Leerschritte haben möchte, muß dafür ebenfalls eine HTML Zeichenfolge einsetzen (siehe Tabelle).


Die wichtigsten HTML Zeichenfolgen

ä ~ ä
Ä ~ Ä
ö ~ ö
Ö ~ Ö
ü ~ ü
Ü ~ Ü
ß ~ ß
& ~ &
Leerschritt ~  

Es gibt noch sehr viel mehr, eine kleine Zusammenstellung findet sich auf selfhtml.org

[Paule]

Der Grundaufbau einer HTML Seite

Zum korrekten HTML gehört auch der Aufbau des Quellcodes, er folgt bestimmten Regeln und Vorgaben. Das HTML würde auch ohne diesen Grundaufbau von den meisten Browsern dargestellt, entspricht dann aber nicht den Vorschriften, was wiederum zu schwerwiegenden Problemen führen kann. Viele globale Anweisungen werden über den Grundaufbau bereits voreingestellt. Das heißt, diese Anweisungen gelten für die gesamte HTML Seite und müssen nicht jedesmal neu definiert werden. Einige Editoren, die speziell für die HTML Erstellung gemacht sind, geben diesen Grundaufbau bereits vor.

HTML Anweisungen werden, bis auf wenige Ausnahmen, mit einem Attribut eingeleitet und mit einem anderen wieder beendet. In der Regel ist das Schluß Attribut mit einem Slash (/) gekennzeichnet.

Beispiel
<p> ist im BODY Bereich die Einleitung für einen Textabschnitt, mit </p> wird das Textende eingeleitet. Alles was zwischen diesen beiden Attributen steht, gehört zu einem Textabschnitt. Es wird nach dem Schluß Attribut automatisch ein Zeilenumbruch durchgeführt. Nach diesem Prinzip sind die meisten HTML Anweisungen aufgebaut, auch der Grundaufbau der gesamten HTML Seite richtet sich danach.

Der Grundaufbau

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html> 
 
<head> 
 
<title>Deine Webseite</title> 
 
<meta name="author" content="Dein Name"> 
<meta name="publisher" content="Dein Name"> 
<meta name="copyright" content="Dein Name"> 
<meta name="keywords" content="dein, Suchbegriffe, mit, Komma, getrennt"> 
<meta name="page-topic" content="deine Seite"> 
<meta name="audience" content="alle"> 
<meta name="language" content="deutsch, de"> 
<meta name="distribution" content="global"> 
<meta name="page-type" content="Private Homepage"> 
<meta name="robots" content="index,follow"> 
 
</head> 
 
<body> 
 
<br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div><br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div></body> 
 
</html>

Erläuterung

Doctyp steht außerhalb der HTML Anweisungen und dient als Hilfe für die internationale Browser Darstellung und Erkennung.

• <html> ... </html>
  Damit wird die gesamte HTML Seite gekennzeichnet, es wird der gesamte Quellcode eingebunden, was Anfang und Ende der gesamten HTML Seite entspricht.
  
  
• <head> ... </head>
  Alles was zwischen diesen Attributen steht, wird nicht im Browser angezeigt. In diesem Bereich werden globale Anweisungen eingetragen, außerdem befinden sich dort Identifikationshilfen für Suchmaschinen und Browser. Dieses wird hauptsächlich über Meta Anweisungen durchgeführt, im HEAD Bereich befindet sich außerdem der Titel der HTML Seite.
  
  Neben diesen externen Anweisungen, werden in diesem Bereich auch globale Anweisungen für die Darstellung der HTML Seite eingetragen. In der Regel sind das Stylesheets und Javascript Anweisungen, wobei letzteres eine eigene Scriptsprache ist, damit werden komplexere Aufgabenstellungen durchgeführt, die mit HTML alleine nicht zu machen sind.
  
  
• <meta>
  Ist wie eine Visitenkarte, es werden Informationen über den Inhalt und den Verfasser eingetragen. Auch Suchbegriffe, sogenannte Keywords werden in diesen Bereich eingetragen. Es dürfen keine Begriffe verwendet werden, die mißverständlich sind und zu Inhalten führen sollen, die es auf der Seite gar nicht gibt, nur um Besucher anzulocken. Bei geschützten Inhalten muß der Urheber seine Zustimmung erteilen. Auch wird das Suchmaschinen Verhalten über diesen Bereich gesteuert, wann und wie oft die Seite auf Aktualisierung überprüft werden soll etc.. Für Suchmaschinen ist der Titel (Überschrift) und der Inhalt einer HTML Seite aber wesentlich wichtiger.
  
  
• <title> ... </title>
  Zwischen diesen beiden Attributen wird die Überschrift der HTML Seite eingetragen, dieser ist sehr wichtig für die Suchmaschinen und sollte einen direkten Bezug zum Inhalt der Seite haben.
  
  
• <body> ... </body>
  Diese Attribute schließen den Hauptteil einer HTML Seite ein. Alles was sich in diesem Bereich befindet, wird im Browser angezeigt.
  In <body> lassen sich noch weitere Informationen über den Hintergrund, sowie Link Farbe usw. hinterlegen.
  
  Beispiel
  <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#0000FF" alink="#33cc00">
  
  bgcolor gibt die Hintergrundfarbe wieder, durch den Farben Hexadezimal-Code ("#FFFFFF) wurde hier die Farbe Weiß eingetragen, Farbtabellen gibt es im Internet. Mit background könnte auch ein Bild als Hintergrund eingesetzt werden. Der Text ist in dem Beispiel Schwarz und der Link wechselt die Farbe, wenn er benutzt wurde.
  
  Diese Variante wird heute aber nur noch selten verwendet. Die Link- und Hintergrundfarbe wird inzwischen überwiegend mit Stylesheets festgelegt, für den Anfang geht es aber auch ohne Stylesheets. Wer sich intensiv mit der Erstellung einer Webseite beschäftigt, wird früher oder später den Weg zu Stylesheets finden.

Ein weiterer Erklärungsversuch über den Aufbau einer HTML Seite: selfhtml.org

Kleiner Tip
Diesen Abschnitt in den HEAD Bereich eintragen.

<STYLE TYPE="text/css"> 
H1 { font-family:Verdana; font-size:10pt; color:black } 
</STYLE>

Zitat
Einige Suchmaschinen legen einen enorm großen Wert auf die Wörter im H1-Tag. Der H1-Tag wird genutzt, um genauere Angaben zum Thema und Inhalt der Seite zu machen. Das Problem dieser Tags besteht darin, dass sie meistens zu groß sind und hässlich aussehen. In den meisten Browsern wird er in Übergröße dargestellt und verzerrt die Seite.
(nach </title> vor </head> eintragen)
Quelle widiker.de

[Paule]

HTML Tabelle

Häufig kommen HTML Tabellen zum Einsatz, dabei wird das Browser Fenster unterteilt, zu vergleichen mit einer Excel Tabelle, mit Zellen und Spalten, nur das es hierbei auch Tabellen in einer Tabelle geben kann. Weil etwas auf dem Browser unmittelbar dargestellt werden soll, kommen Tabellen immer nur im BODY Bereich zum Einsatz. Um es vorweg zu nehmen, der eigentliche Inhalt, welcher also auf dem Browser zu sehen ist, steht zwischen <td> ... </td> oder für eine zentrierte Überschrift werden diese ersetzt durch <th> ... </th>.

Eine leere HTML Tabelle

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr> 
<td>
</td> 
</tr> 
 
</table>

Das Start Attribut einer Tabelle

1. <table>
   Im Prinzip würde das ausreichen, aber in der Regel werden in diesen Tag auch noch Anweisungen für die spätere Darstellung und Ausrichtung der Tabelle mit eingetragen. Diese Anweisungen müssen also nicht im Tag stehen, sie werden entweder mit einer 0 abgeschaltet oder einfach weggelassen.
   
   
2. <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
   Das wäre ein ausführliches Start Attribut für eine HTML Tabelle, einige Anweisungen finden sich immer wieder, sie gelten also nicht nur in diesen einen Attribut. Es lassen sich noch weitere Anweisungen eintragen, aber das sind die wichtigsten.

• width="100%"
  Gibt die Zellenbreite an, sie kann dynamisch in Prozent oder mit einer festen Pixelgröße angegeben werden. Um eine Zelle in der Breite zu verändern, wird zum Beispiel der Prozentwert herabgesetzt oder die Pixelgröße verändert.
  
  
• height="100%"
  Ist für die Höhe zuständig, bei einer Tabelle läßt sich die Höhe aber nicht mit Prozent anpassen, dafür muß ein fester Wert eingetragen werden.
  
  
• cellpadding="0" und cellspacing="0"
  Damit läßt sich der Abstand von Zellen, Spalten und Rahmen einstellen, somit verändert sich auch der Abstand des Tabelleninhalts. Zum verändern wird die Null durch eine andere Ziffer ersetzt.
  
  
• border="0"
  Diese Anweisung macht einen Rahmen um die Tabelle, so allerdings nicht, weil sie mit Null abgeschaltet ist, je höher die Ziffer, desto stärker wird der Rahmen.
  
  
• align="center"
  Mit align="" verändert sich die Position einer Tabelle im Browser, das heißt, sie wird in dem Fall zentriert auf dem Bildschirm dargestellt. Statt "center", läßt sie sich mit "left" oder "right", entweder auf die linke oder rechte Seite ausrichten. Diese Anweisung wird nicht nur in diesen Start Attribut verwendet, auch bei anderen Tags wird align="" für die Ausrichtung der Position von Text und Bild verwendet.

• Beispiel 1
  Die Farben sind nicht im Quellcode enthalten.
  
  
  Wie bei HTML üblich, gibt es einen Anfang und einen Ende Tag. Mit <tr> ... </tr> wird eine Spalte erzeugt und <td> ... </td> erzeugt die Zelle. Falls mehrere Zellen erwünscht sind, werden sie innerhalb der Spalten Tags geschrieben. Nur was zwischen <td> ... </td> steht, wird im Browser dargestellt. In den Start Attribut <tr> und <td> lassen sich noch weitere Anweisungen einfügen, damit wird aber nicht die gesamte Tabelle beeinflußt, sondern nur der Spalten oder Zellen Inhalt.

  <table width="100%" cellpadding="0" cellspacing="0" border="1"> 
   
  <tr> 
  <td align="center">
  1 
  </td> 
  <td align="center"> 
  2
  </td> 
  </tr> 
   
  <tr> 
  <td align="center">
  3 
  </td> 
  <td align="center"> 
  4
  </td> 
  </tr> 
   
  </table>

• Beispiel 2
  Die Farben sind nicht im Quellcode enthalten.
  
  
  colspan="1" und rowspan="1"
  Wer Zellen innerhalb einer Tabelle zusammenfügen möchte, macht das horizontal mit colspan und vertikal mit rowspan, die Ziffer gibt die Menge der Zellen an, die sich zusammenfügen sollen. Wenn Zellen zusammengefügt wurden, muß die entsprechende Anzahl von Zellen im Quellcode natürlich weggelassen werden, ansonsten würden sich weitere Zellen dranhängen, im Beispiel wurde die Nummer 4 weggelassen.

  <table width="100%" cellpadding="0" cellspacing="0" border="1"> 
   
  <tr> 
  <td align="center">
  1 
  </td> 
  <td align="center"> 
  2
  </td> 
  </tr> 
   
  <tr> 
  <td align="center" colspan="2">
  3 
  </td> 
  </tr> 
   
  </table>

Tabellen Muster

Beispiel 1
Ein Grundgerüst für eine einfache Homepage
Demo

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
 
<head> 
 
<title>Meine Homepage</title> 
 
<meta name="author" content="Dein Name"> 
<meta name="publisher" content="Dein Name"> 
<meta name="copyright" content="Dein Name"> 
<meta name="keywords" content="dein, Suchbegriffe, mit, Komma, getrennt"> 
<meta name="page-topic" content="deine Seite"> 
<meta name="audience" content="alle"> 
<meta name="language" content="deutsch, de"> 
<meta name="distribution" content="global"> 
<meta name="page-type" content="Private Homepage"> 
<meta name="robots" content="index,follow"> 
 
</head> 
 
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> 
 
     <center><img src="assets/images/autogen/Home_Nbanner.gif" height="45" width="560" border="0" alt="Home"></center> 
     <br> 
       <table width="130" cellpadding="2" cellspacing="0" border="1" align="left">
<tr> 
<td>Link1</td> 
</tr> 
<tr> 
<td>Link2</td> 
</tr> 
<tr> 
<td>Link3</td> 
</tr> 
<tr> 
<td>Link4</td> 
</tr> 
<tr> 
<td>Link5</td> 
</tr> 
<tr> 
<td>Link6</td> 
</tr> 
</table> 
 
<div align="center"><font size="+2">Hallo das ist eine Testseite <br> 
Ganz einfach aufgebaut und ohne Ebenen <br></font> 
<table border="1"> 
<tr> 
 
<td>So solltest du das weiterhin handhaben.<br> 
Und bitte wenn es geht verwende keine bewegten Hintergründe.<br> 
Deine Besucher werden es dir danken ;-)<br> 
Musik die man nicht abstellen kann, auch wenn deine recht beruhigend klingt<br> 
empfinde sicher nicht nur ich auf die Dauer als störend<br> 
Die Rahmen habe ich jetzt mal auf 1 gestellt da mit du siehst was alles eine Tabelle ist<br> 
gemacht wurde diese seite mit Phase5, den du dir rein interssehalber auch mal anschauen solltes<br> 
Kinder spielen WYSIWYG, Männer bauen selbst LOOOL<br><br> 
Grüße <br> 
Tutti</td> 
</tr> 
</table> 
</div> 
 
<br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div><br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div></body> 
</html>

Beispiel 2
Eine Tabelle, in der sich Tabellen befinden.
Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
    <head>
        <title>Dein Titel eintragen</title>
<meta name="author" content="Dein Name">
<meta name="publisher" content="Dein Name">
<meta name="copyright" content="Dein Name">
<meta name="keywords" content="dein, Suchbegriffe, mit, Komma, getrennt">
<meta name="description" content="Kurzbeschreibung der Seite">
<meta name="page-topic" content="Name der Webseite">
<meta name="audience" content="alle">
<meta name="language" content="deutsch, de">
<meta name="distribution" content="global">
<meta name="page-type" content="Private Homepage">
<meta name="robots" content="index,follow">
 
</head>
 
<body>
 
<table border="1" bgcolor="#E0E0E0" bordercolor="#000066" cellpadding="8" cellspacing="0" align="center" width="80%">
    <tr>
        <td>
 
<table border="0" bgcolor="#ffffff" bordercolor="#000000" cellpadding="4" cellspacing="4" align="center" width="80%">
    <tr>
        <td align="center">
            <img src="muster.gif" alt="Bildbeschreibung">
        </td>
    </tr>
</table>
 
<table border="0" bgcolor="#ffffff" bordercolor="#000000" cellpadding="4" cellspacing="0" align="center" width="80%">
    <tr>
        <td align="center">
            Dein Text
        </td>
    </tr>
</table>
 
<br />
 
<table border="0" bgcolor="#ffffff" bordercolor="#000000" cellpadding="4" cellspacing="0" align="center" width="80%">
    <tr>
        <td align="center">
            <img src="muster.gif" alt="Bildbeschreibung">
        </td>
    </tr>
</table>
 
<table border="0" bgcolor="#ffffff" bordercolor="#000000" cellpadding="4" cellspacing="0" align="center" width="80%">
    <tr>
        <td align="center">
            Dein Text
        </td>
    </tr>
</table>            
 
        </td>
    </tr>
</table>
 
</body>
</html>

Um weitere Felder einzufügen, wird dieser Abschnitt des Quellcodes kopiert und eingefügt. Die Pfade der Bild Datei sind natürlich anzupassen.

<br />
 
<table border="0" bgcolor="#ffffff" bordercolor="#000000" cellpadding="4" cellspacing="0" align="center" width="80%">
    <tr>
        <td align="center">
            <img src="muster.gif" alt="Bildbeschreibung">
        </td>
    </tr>
</table>

• #fffff ist der Hexadezimalcode für Farben
  Für jede Farbe gibt es einen Code, Farbtabellen sind im Internet erhältlich. Für die Standardfarben könnte man auch die englische Bezeichnung verwenden. (red, black usw.)
• bgcolor ist die Hintergrundfarbe.
• bordercolor ist die Rahmenfarbe.
• border="0" ist für die Rahmenstärke.
• cellpadding="0" und cellspacing="0" damit wird die Tabelle ausgerichtet.
• width="80%" ist für die Breite der Tabelle verantwortlich.
• align="center" richtet einen Text oder eine Datei in der Darstellung aus.

[Paule]

Link erstellen und Bild Datei darstellen

Ohne Verweise auf andere Seiten oder auf Bild Dateien macht eine Webseite nicht viel Sinn. Es ist dabei egal, um was für ein Verweisziel es sich handelt, das kann eine HTML oder Bild Datei sein, entscheidend ist, das die Daten im Internet verfügbar sind und das der Pfad stimmt.

Ein nomaler Link

<a href="../pfad/zur/datei.html" target="_blank" title="Link zum Testen">Das ist ein Test</a>

• Gestartet wird mit <a href="">, damit der Link ein Ziel hat, braucht es einen Link, der wird zwischen die Anführungsstrichen im Start Tag eingetragen.
  
  
• Mit target="_..." wird das Browser Verhalten festgelegt, wenn der Link benutzt wird, die beiden wichtigsten sind:
  target="_parent" das Ziel des Links öffnet sich im gleichen Browser Fenster.
  target="_blank" die Ursprungsseite bleibt geöffnet und es öffnet sich durch den Link ein neues Browser Fenster.
  
  Mehr Informationen über target gibt es bei web-toolbox.net.
  
  
• Der Titel ist vorgeschrieben, er erzeugt eine Hinweisfahne, in dem wird einen kurze Beschreibung eingetragen, wer keine haben möchte, schreibt nichts zwischen den Anführungsstrichen.
  
  
• Was zwischen den Anfang und Ende Tag steht, wird im Browser angezeigt, in dem Beispiel wäre das "Das ist ein Test".
  
  
• Mit </a> wird die HTML Anweisung für einen Link geschlossen.

Eine Bild Datei im Browser darstellen

<img src="../pfad/zur/grafik.gif" border="0" alt="gelbes Hinweisfähnchen">

Diese Anweisung gehört zu den wenigen HTML Attributen die keinen Ende Tag besitzen, weil diese Anweisung auch in andere eingebunden wird, würde ein Ende Tag keinen Sinn machen. Das Dateiformat spielt bei der Darstellung einer Bild Datei keine Rolle, die Datei muß nur im Internet verfügbar sein und der Pfad muß stimmen. Für ein fehlerfreies HTML muß das Attribut mit allen Anweisungen verwendet werden, auch wenn sie mit der Ziffer 0 abgeschaltet sind oder keine Ausgabe in der Anweisung eingetragen wird.

• Eingeleitet wird mit <img src="">, damit eine Bild Datei angezeigt werden kann, braucht es den richtigen Pfad, der wird zwischen die Anführungsstrichen eingetragen.
  
  
• Über border="0" kann ein Rahmen um die Bild Datei erzeugt werden, dazu wird die Ziffer verändert, um so größer die Ziffer, um so stärker der Rahmen.
  
  
• Mit alt="" wird ein gelbes Hinweisfähnchen erzeugt, in dem wird eine kurze Beschreibung eingetragen, wer keine haben möchte, schreibt nichts zwischen den Anführungsstrichen.

Eine Bild Datei mit einem Link verknüpfen

<a href="../pfad/zur/datei.html" target="_blank" title="blabla">
<img src="../pfad/zur/grafik.gif" border="0" alt="gelbes Hinweisfähnchen">
</a>

Statt einem Text wird der Link nun mit einer Bild Datei verknüpft. Es ändert sich eigentlich nichts, nur das statt dem Link Text, das Attribut für die Bild Darstellung eingetragen wird.

Button erstellen

<form action="eineseite.html">
<input type="submit" value="Buttontext">
</form>

Ein Button läßt sich am besten mit einem Bildbearbeitungsprogramm erstellen und dann einfach die Bild Datei mit einem Link verknüpfen. Es gibt aber auch eine Möglichkeit einen Button direkt mit HTML zu erstellen.

• Zwischen den Anführungsstrichen bei action="eineseite.html" wird das Verweisziel eingetragen.
  
  
• Bei value="Buttontext" wird der Text eingetragen.

[Paule]

Stylesheets

Die Darstellung im Browser kann nicht nur über die HTML Datei erfolgen. Die Anweisungen über Farbe, Schrift und Ausrichtung lassen sich auch in eine Stylesheets Datei auslagern. Das hat zwei große Vorteile, zum einen wird nicht alles, für jede kleine Veränderung, in den HTML Quellcode eingetragen, was sehr viel Schreibarbeit erspart. Zum anderen wird die Seite schneller geladen, weil die Stylesheets nur einmal in den Browser Cache geladen wird und aus diesem holt sich der Browser dann die notwendigen Informationen.

Für dieses Verfahren ist ein Link Verweis auf die Stylesheets im HEAD Bereich der HTML erforderlich, Mit einem class Attribut kann die Anweisung immer wieder in der HTML verwendet werden, eine id Anweisung läßt sich nur einmal verwenden, wird aber höher gewichtet. Eine genauere und vielleicht verständlichere Beschreibung findet sich bei drweb.de. In dem Beispiel hat die Stylesheets Datei den Namen templates.css, sie kann aber jede andere Benennung haben. Für die eine HTML Datei, wird also eine weitere Datei mit der Dateiendung .css angelegt, sie enthält Informationen über Darstellung und Ausrichtung des HTML Inhalts.

Wer eine Stylesheets verwendet, braucht im BODY Tag der HTML nichts eintragen, das übernimmt die Stylesheets, natürlich müssen in der Stylesheets die Body Anweisungen eingetragen sein. Nur wenn über die Stylesheets andere Bereiche der HTML beeinflußt werden sollen, werden diese mit der Anweisung class oder id zugewiesen.

Die Schreibweise einer Stylesheets ist vorgeschrieben und ist aus den Beispielen zu ersehen. Was die einzelnen Einträge bedeuten, läßt sich am besten mit Hilfe einer Suchmaschine herausfinden, vieles erklärt sich aber von alleine. Die Beispiele müssen nicht 1zu1 übernommen werden, im Prinzip kann man alles weg lassen, neues hinzufügen oder einen Teil über die HTML Datei und einen über die Stylesheets steuern.

Eintrag in die HTML Datei

<link rel="stylesheet" href="/css/templates.css" type="text/css">

Damit der Browser die Stylesheets Datei auch finden kann, muß eine Link Anweisung im HEAD Bereich der HTML eingetragen werden. Der Pfad zur Stylesheets wird bei href="" eingetragen.

Die Stylesheets können in fast jeden HTML Attribut eingesetzt werden, der die voreingestellten Stylesheets Anweisungen übernehmen soll.

• Beispiel 1
  Anweisungen für das Attribut class
  

  <table border="0" cellpadding="0" cellspacing="0">
  <tr>
  <td align="center" class="smalltext">
  Bla Bla Bla
  </td>
  </table>

• Beispiel 2:
  Anweisungen für das Attribut id
  

  <table border="0" cellpadding="0" cellspacing="0" id="menu">
  <tr>
  <td align="center">
  Bla Bla Bla
  </td>
  </table>

Die Stylesheets
Öffne den Editor, füge die Anweisungen in eine leere Seite ein und speichere sie im css Dateiformat.

• Beispiel 1
  BODY in der Stylesheets
  

  Body {
  SCROLLBAR-ARROW-COLOR: #6584b8;
  SCROLLBAR-BASE-COLOR: #ffffff;
  scrollbar-highlight-color: #6584b8;
  scrollbar-shadow-color: #f0f3f9;
  scrollbar-track-color: #f0f3f9;
  font-family: Verdana;
  font-size:10pt;
  color: #e6e6e6;
  background-color: #000000;
  color: black;
  margin-top: 0px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px
  }

• Beispiel 2
  Anweisungen für das Attribut class
  Color gibt die Farbe an, font-family ist die Schriftart, font-size die Schriftgröße und font-weight den Abstand der Buchstaben zueinander.
  

  .smalltext {
    color: #888888;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
  }

• Beispiel 3
  Anweisungen für das Attribut id
  Das erzeugt eine Art von Button, der sich bei Mauskontakt verändert, Größe, Farbe, Ausrichtung ist alles festgelegt, mit background-image wird eine Bild Datei als Hintergrund verwendet. Wer dieses nicht möchte, läßt background-image einfach weg. Auf diese Art lassen sich alle Einstellungen nach den persönlichen Wünschen anpassen.
  

  #menu A:link {
  display: block;
  width: 120px;
  color: black;
  text-decoration: none;
  font-family: verdana, sans-serif;
  font-size: 8pt;
  padding-left: 1px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin: 0px auto;
  background-color: #97B8CA;
  border-top: groove 2px #EAF0F2;
  border-left: groove 2px #CFD7DA;
  border-bottom: groove 2px #3C6B7B;
  border-right:groove 2px #829DA8;
  background-image: url(/images/label.gif);
  }
  
  #menu A:visited {
  display: block;
  width: 120px;
  color: black;
  text-decoration: none;
  font-family: verdana, sans-serif;
  font-size: 8pt;
  padding-left: 1px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin: 0px auto;
  background-color :#97B8CA;
  border-top: groove 2px #EAF0F2;
  border-left: groove 2px #CFD7DA;
  border-bottom: groove 2px #3C6B7B;
  border-right: groove 2px #829DA8;
  background-image: url(/images/label.gif);
  }
  
  #menu A:active {
  display: block;
  width: 120px;
  color: black;
  text-decoration: none;
  font-family: verdana, sans-serif;
  font-size: 8pt;
  padding-left: 1px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin: 0px auto;
  background-color :#97B8CA;
  border-top: groove 2px #EAF0F2;
  border-left: groove 2px #CFD7DA;
  border-bottom: groove 2px #3C6B7B;
  border-right: groove 2px #829DA8;
  background-image: url(/images/label.gif);
  }

• Beispiel 4
  So würde die Stylesheets komplett aussehen
  

  Body {
  SCROLLBAR-ARROW-COLOR: #6584b8;
  SCROLLBAR-BASE-COLOR: #ffffff;
  scrollbar-highlight-color: #6584b8;
  scrollbar-shadow-color: #f0f3f9;
  scrollbar-track-color: #f0f3f9;
  font-family: Verdana;
  font-size:10pt;
  color: #e6e6e6;
  background-color: #000000;
  color: black;
  margin-top: 0px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px
  }
  
  .smalltext {
    color: #888888;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
  }
  
  #menu A:link {
  display: block;
  width: 120px;
  color: black;
  text-decoration: none;
  font-family: verdana, sans-serif;
  font-size: 8pt;
  padding-left: 1px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin: 0px auto;
  background-color: #97B8CA;
  border-top: groove 2px #EAF0F2;
  border-left: groove 2px #CFD7DA;
  border-bottom: groove 2px #3C6B7B;
  border-right:groove 2px #829DA8;
  background-image: url(/images/label.gif);
  }
  
  #menu A:visited {
  display: block;
  width: 120px;
  color: black;
  text-decoration: none;
  font-family: verdana, sans-serif;
  font-size: 8pt;
  padding-left: 1px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin: 0px auto;
  background-color :#97B8CA;
  border-top: groove 2px #EAF0F2;
  border-left: groove 2px #CFD7DA;
  border-bottom: groove 2px #3C6B7B;
  border-right: groove 2px #829DA8;
  background-image: url(/images/label.gif);
  }
  
  #menu A:active {
  display: block;
  width: 120px;
  color: black;
  text-decoration: none;
  font-family: verdana, sans-serif;
  font-size: 8pt;
  padding-left: 1px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin: 0px auto;
  background-color :#97B8CA;
  border-top: groove 2px #EAF0F2;
  border-left: groove 2px #CFD7DA;
  border-bottom: groove 2px #3C6B7B;
  border-right: groove 2px #829DA8;
  background-image: url(/images/label.gif);
  }

[Paule]

Einige der wichtigsten HTML Tags

• <b> ... </b> Fettschrift
• <i> ... </i> Kursiv
• <u> ... </u> Unterstreichen
• <center> ... </center> zentrieren
• <h1> ... </h1> sehr große Schrift
• <h2> ... </h2> große Schrift
• <br> Zeilenumbruch
• <p>&nbsp;</p> Absatz (wird wie der Zeilenumbruch verwendet)
• <p> ... </p> Textabschnitt
• <font size="2" color="#000000"> ... </font> Schrift Größe und Farbe
• <div> ... </div> (Erklärung: mediaevent.de :: HTML-Tag:<div>)

Weitere ...
HTML-Tags im Überblick - HTML lernen - HTML Kurs / Seminar

[Paule]

(wird bearbeitet)
Frame Seiten erstellen und Beispiele

Da die drei HTML Dateien zusammen gehören, müssen oder vielmehr sollten sie sich im gleichen Projektordner befinden.

Den Frame startest du mit der index.html


Mit den Attributen cols und rows könnte ihr im frameset entscheiden, ob die Trennung der Seite horizontal oder vertikal dargestellt werden soll. Es ist auch beides möglich, also einen Kopf und an der Seite eine Navigationsleiste, dazu dieser Link
http://www.opsosite.de/web_site/sonstiges_seite1.html


Mit diesen drei html Dateien kann der frame erzeugt werden.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

<html>
<head>

<title>ihr Eintrag</title>
<meta name="author" content="ihrName">
<meta name="programmer" content="ihrName">
<meta name="publisher" content="ihrName">
<meta name="copyright" content="ihrName">
<meta name="keywords" content="Stichwörte mit Komma getrennt">
<meta name="description" content="Kurzbeschreibung">
<meta name="page-topic" content="Überschrift">
<meta name="audience" content="alle">
<meta name="language" content="deutsch, de">
<meta name="page-type" content="private homepage">
<meta name="robots" content="index,follow">
<meta name="distribution" content="global">

</head>

<frameset rows="100,*" >
<frame src="index_kopf.html" name="inhalt">
<frame src="index_navi.html" name="navigation_index">

  <noframes>
  <p>Diese Seite verwendet Frames. Frames werden von Ihrem Browser aber nicht unterstützt.</p>
  </noframes>
</frameset>
</html>

index_kopf.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<meta name="author" content="ihrName">
<meta name="programmer" content="ihrName">
<meta name="publisher" content="ihrName">
<meta name="copyright" content="ihrName">
<meta name="keywords" content="Stichwörte mit Komma getrennt">
<meta name="description" content="Kurzbeschreibung">
<meta name="page-topic" content="Überschrift">
<meta name="audience" content="alle">
<meta name="language" content="deutsch, de">
<meta name="page-type" content="private homepage">
<meta name="robots" content="index,follow">
<meta name="distribution" content="global">

</head>

<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#33cc00">

<center>Dein Kopf</center>

</body>
</html>

index_navi.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Startseite_navi</title>

<meta name="robots" content="index,follow">

</head>

<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#33cc00">

<center>Dein Inhalt</center>

</body>
</html>

Frames haben den Nachteil, das die Suchmaschinen auch die einzelnen Seiten Durchsuchen und den kompletten Pfad zu den Seiten anzeigen.
Das bedeutet, das nur diese eine Seite, also z.B. die index_kopf.html angezeigt wird und nicht die gesamte Webeseite. Man kann diesen Nachteil mit Javasripte umgehen, die dann automatisch auf die komplette Webseite umleiten.
In den head Bereich eintragen:

<script language="JavaScript" type="text/javascript">
<!--
if (parent.frames.length == 0)
{top.location='index.html'}
// -->
</script>

Also so,

index_kopf.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<meta name="author" content="ihrName">
<meta name="programmer" content="ihrName">
<meta name="publisher" content="ihrName">
<meta name="copyright" content="ihrName">
<meta name="keywords" content="Stichwörte mit Komma getrennt">
<meta name="description" content="Kurzbeschreibung">
<meta name="page-topic" content="Überschrift">
<meta name="audience" content="alle">
<meta name="language" content="deutsch, de">
<meta name="page-type" content="private homepage">
<meta name="robots" content="index,follow">
<meta name="distribution" content="global">

<script language="JavaScript" type="text/javascript">
<!--
if (parent.frames.length == 0)
{top.location='index.html'}
// -->
</script>

</head>

<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#33cc00">

<center>Dein Kopf</center>

</body>
</html>

Der Javascript leitet nun auf die index.html um, natürlich kannst du jeden anderen Pfad dort eintragen.


Mit den meta Tag

<meta name="robots" content="index,follow">

kannst du einstellen, ob die Suchmaschine die Seite durchsuchen und somit ggf. verwenden soll. Soll die Seite übergangen werden, den meta so verändern

<meta name="robots" content="noindex,follow">

Die meta Tags müssen in meinen Beispiel selbstverständlich noch angepasst werden.


Eigentlich gehört in den framset noch frameborder, aber da du ihn ja noch anpassen musst, hab ich ihn weg gelassen. Falls du gar keinen frameborder haben möchtest, veränder den frame so:

<frameset cols="100,*" frameborder="no">

Es ist egal, wie die html Seiten benannt werden, nur der Pfad muss stimmen.

Frame automatisch nachladen

Frame Webseiten haben den Nachteil, das Suchmaschinen jede HTML Seite als eigenständige Webseite betrachten und sie in ihrem Cache so auch aufnehmen. Benutzer gelangen so über die Suchsuchmaschine direkt in die einzelnen Frame Seiten, die Homepage wird somit nicht in seiner Gesamtheit dargestellt. Es gibt nun zwei Möglichkeiten den Frame automatisch nachzuladen.

Möglichkeit A

1. In der HTML, in der frameset steht, folgende Zeile im <head> eingefügen.

<script language="JavaScript" src="framecheck.js" type="text/javascript" type="text/javascript"></script>

framecheck.js ist eine Variable, die Bezeichnung framecheck ist beliebig wählbar, .js ist die Dateierweiterung des Javascriptes und muss angegeben werden. Die Bezeichnung richtet sich nach der Benennung der JS Datei unter Nummer 4.

2. In der selben HTML wird in frameset eingefügt.

onload="LoadFrame();">

Muster

<frameset rows="102,*" frameborder="no" onload="LoadFrame();">

Das LoadFrame wird in jeden frameset Tag eingetragen.

3. In jede HTML die automatisch nachgeladen werden soll, diesen Javascript in den <head> einfügen.

<script language="JavaScript" src="framecheck.js" type="text/javascript"></script>
 <script language="JavaScript" type="text/javascript"><!--
 FrameCheck(); //--></script>

Den Script genauso übernehmen, mit allen Zeilenumbrüchen, allerdings ist framecheck.js wieder eine Variable, wie oben beschrieben.

4. Eine neue JS Datei erstellen, Beispiel framecheck.js. Die Datei in das Server Verzeichnis kopieren, in dem sich die frame Seiten befinden.
Inhalt

//------------------------------------------------------------------------------
//
//  FRAME-CHECK
//   Version: 1.0 - Datum: 05.04.2000
//   Copyright (c) 2000 by Dominik Leonhardt. Alle Rechte vorbehalten.
//
//  EINSTELLUNG
//
//   framename : Hier müssen Sie den Namen des Frames eintragen, in den die
//               Seiten geladen werden soll.
//
     framename="inhalt";
//
//   frameset  : Hier müssen Sie den Dateinamen des Frameset eintragen. Am
//               besten relativ zum server (/index.htm), damit FRAME-CHECK
//               auch aus Unterverzeichnissen läuft.
//
     frameset="../beispiel.html";
//
//------------------------------------------------------------------------------

//------------------------------------------------------------------------------
// FrameCheck();
//  Diese Funktion überprüft, ob die Datei im Frame geladen wurde.
//------------------------------------------------------------------------------
function FrameCheck() {
 if(!eval("parent."+framename)) { location.replace(frameset+"?"+location.href); }
}

//------------------------------------------------------------------------------
// LoadFrame();
//  Diese Funktion läd die richtige Datei in den Frame.
//------------------------------------------------------------------------------
function LoadFrame() {
 var URL=location.search;
 if(URL) {
  frame=eval("frames."+framename);
		frame.location.replace(URL.substring(1,URL.length));
	}
}

framename ist die Hauptseite/Startseite, dort ist der Inhalt zu finden.
Bei frameset den richtigen Pfad zur Datei eintragen, in dem frameset steht, ggf. mit Unterverzeichnis.

Da für jede Frameseite eine eigene JS Datei benötigt wird, kann für jede eine eigene JS Datei angelegt werden, sie müssen nur entsprechend anders benannt werden.

Ein Beispiel mit der JS Datei:
http://www.dleo.de/res/files/javascript/framecheck.zip

Quellenangabe (das Einbaumuster ist fehlerhaft)
Frame-Check [dleo.de]

Forum Thread
(Ein Forum Thread in dem ein Einbauversuch dokumentiert ist, vielleicht findet der eine oder andere damit den entscheidenen Hinweis.)
Paules-PC-Forum.de :: - - automatische Umleitung von einzelnen Frame Seiten

Möglichkeit B)

Eine etwas einfachere Möglichkeit gibt es auch, die hat allerdings den Nachteil, das immer die Hauptseite nachgeladen wird und der Benutzer sich mühsam wieder die gewünschte Information suchen muss.

Javascript in den <head> der html kopieren, in der sich der Inhalt befindet.

<script language="JavaScript" type="text/javascript">
<!--
if (parent.frames.length == 0)
{top.location='../beispiel.html'}
// -->
</script>

Bei location den richtigen Pfad zur HTML Datei eintragen, in der sich die frameset Tags befinden.


Beispiel Frameset 1

Dieses Frameset besteht aus 5 Dateien... die 4 Frame Dateien und die 1 Index Datei wo man das Gesamtergebniss sieht.

Aufbau der index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<meta>
<meta>
<meta>
<title>Beispiel Frameset 1 von Paules-PC-Forum.de</title>
</head>
<frameset> <= Anzahl der Zeilen... 120 Header, 40 Footer und Rest für den Hauptteil
<frame> <= Header
<frameset> <= Anzahl der Spalten... hier Navigation 200 Breit und der Rest für den Hapteil
<frame> <= Navigation
<frame> <= Hauptteil/Main
</frameset>
<frame> <= Footer
<noframes>
<body>
Diese Seite verwendet Frames. Ihr Browser unterstützt diese jedoch nicht.
</body>
</noframes>
</frameset>
</html>

Aufbau der oben.htm

<html>
<head>
<title>Beispiel Frameset 1 von Paules-PC-Forum.de</title>
</head>
<body bgcolor="#ffffff">
Hier kann dann entweder Logo... Text oder beides erscheinen...
am besten mit einer Tabelle arbeiten... 1 Zeile 2 Spalten.
Links das Logo rein und rechts der Text
</body>
</html>

Aufbau der navi.htm

<html>
<head>
<title>Beispiel Frameset 1 von Paules-PC-Forum.de</title>
</head>
<body bgcolor="#e5e5e5" text="#00b5e5" link="#00b5e5" vlink="#00b5e5" alink="#00b5e5">
<font size="3" face="Arial"><a>Linkname 1</font><br> <= Name der Seite die angezeigt werden soll
<font size="3" face="Arial"><a>Linkname 2</font><br>
<font size="3" face="Arial"><a>Linkname 3</font><br> <= Wo die Seite angezeigt werden soll... hier im Hauptteil/Main
<font size="3" face="Arial"><a>Linkname 4></font><br>
<font size="3" face="Arial"><a>Linkname 5</font><br> <= Name der Angezigt werden soll
<font size="3" face="Arial"><a>Linkname 6</font><br>
<font size="3" face="Arial"><a>Linkname 7</font><br> <= Zeilenumbruch damit die Navigation untereinander steht
<font size="3" face="Arial"><a>Linkname 8</font><br>
</body>
</html>

Aufbau der main.htm

<html>
<head>
<title>Beispiel Frameset 1 von Paules-PC-Forum.de</title>
</head>
<body bgcolor="#e5e5e5">
<font size="3" face="Arial" color="#00b5e5"><b>
Wie beim Header kann der Inhalte auch hier aus Text und Bild bestehen...
entweder normal geschrieben in einer Tabelle

</b></font>
</body>
</html>

Aufbau der unten.htm

<html>
<head>
<title>Beispiel Frameset 1 von www.Paules-PC-Forum.de</title>
</head>
<body bgcolor="#e5e5e5">
<font face="Arial" color="#00b5e5"><b>Copyright 2006 by Autor</b></font>

Im Footer stehen meistens nur Copyright angaben... aber auch hier kann man sich
frei entfalten... ein Newsticker wäre hier auch möglich!
</body>
</html>

Beispiel Frameset 2

Dieses Frameset besteht aus 5 Dateien... die 4 Frame Dateien und die 1 Index Datei wo man das Gesamtergebniss sieht.

Aufbau der index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<meta>
<meta>
<meta>
<title>Beispiel Frameset 2 von Paules-PC-Forum.de</title>
</head>
<frameset> <= Anzahl der Zeilen... 120 Header,40 Navi, 40 Footer und Rest für den Hauptteil
<frame> <= Header
<frame> <= Navigation
<frame> <= Hauptteil/Main
<frame> <= Footer
</frameset>
<noframes>
<body>
Diese Seite verwendet Frames. Ihr Browser unterstützt diese jedoch nicht.
</body>
</noframes>
</frameset>
</html>

Aufbau der oben.htm

<html>
<head>
<title>Beispiel Frameset 2 von Paules-PC-Forum.de</title>
</head>
<body bgcolor="#ffffff">
Hier kann dann entweder Logo... Text oder beides erscheinen...
am besten mit einer Tabelle arbeiten... 1 Zeile 2 Spalten.
Links das Logo rein und rechts der Text
</body>
</html>

Aufbau der navi.htm

<html>
<head>
<title>Beispiel Frameset 2 von Paules-PC-Forum.de</title>
</head>
<body bgcolor="#3b298d" text="#ffffff" link="#ffffff" vlink="#ffffff" alink="#ffffff">
<table cellspacing="0" valign="top" align="left" width="900" border="0" cellpadding="0" bgcolor="#3b298d">
<b>[/b] <= Tabellenzeile "öffnen"
<b valign="top" align="center"><a>Über mich</font><b>[/b]<= Tabellenzelle "öffnen" und schließen
<td valign="top" align="center"><a>Grüße</font></td>
<td valign="top" align="center"><a>Fotos></font></td><= Name der Seite die angezeigt werden soll
<td valign="top" align="center"><a>Tagebuch</font></td><= Wo die Seite angezeigt werden soll... hier im Hauptteil/Main
<td valign="top" align="center"><a>Gästebuch</font></td><= Name der Angezigt werden soll
<td valign="top" align="center"><a>Impressum></font></td>
</tr><= Tabellenzeile "schließen"
</table>
</body>
</html>

Aufbau der main.htm

<html>
<head>
<title>Beispiel Frameset 2 von Paules-PC-Forum.de</title>
</head>
<body bgcolor="#e5e5e5">
<font size="3" face="Arial" color="#00b5e5"><b>
Wie beim Header kann der Inhalte auch hier aus Text und Bild bestehen...
entweder normal geschrieben in einer Tabelle

</b></font>
</body>
</html>

Aufbau der unten.htm

<html>
<head>
<title>Beispiel Frameset 1 von www.Paules-PC-Forum.de</title>
</head>
<body bgcolor="#e5e5e5">
<font face="Arial" color="#00b5e5"><b>Copyright 2006 by Autor</b></font>

Im Footer stehen meistens nur Copyright angaben... aber auch hier kann man sich
frei entfalten... ein Newsticker wäre hier auch möglich!
</body>
</html>

[Paule]

Weitere Links zum Thema

• Alles andere würde jetzt zu weit führen, ich empfehle für den Anfang dieses Heftchen, es kostet nur 4 Euro und ist sehr verständlich.
  KnowWare-Heft: Homepages für Einsteiger
  
  
• Ein kleiner HTML Überblick!
  SELFHTML: HTML/XHTML
  
  
• htmlbasis
  HTMLBASIS: Inhaltsverzeichnis
  
  
• HTML Validatoren zum überprüfen des Quelltextes.
  HTML/XHTML/XML/WML Validierungsservice
  
  
• robots.txt (Hilft den Suchmaschinen) erstellen:
  Suchmaschinen Verzeichnis und Suchmaschinenoptimierung
  
  
• Um robots.txt Dateien überprüfen zu lassen:
  New Robots.txt Syntax Checker: a validator for robots.txt files
  
  
• Eine ganz brauchbare Webseite:
  HTML-Tags im Überblick - HTML lernen - HTML Kurs / Seminar