• Slider-Bild
  • Slider-Bild
Anleitung Homepage erstellen @ homepages-tipps.de

Anleitung Homepage Erstellung


Informationen und Tipps vom Hobby-Webdesigner für die Erstellung einer eigenen Website


Homepageerstellung in HTML und CSS

Was ist HTML?

Häufig ist auf Internetseiten, die HTML erklären wollen, zu lesen, dass es sich dabei um eine Programmiersprache handelt, was schlichtweg falsch ist. Programmiersprache ist eine formale Maschinensprache, ein von Menschen relativ schwer zu lesender Binärcode, der z.B. für die maschinenlesbare Formulierung von Computerprogrammen benutzt wird. PHP, JavaScript, Perl usw. sind Programmiersprachen.

Werbung:



Unter HTML (Hypertext Markup Language) ist hingegen eine textbasierte Auszeichnungssprache zu verstehen, die der Darstellung von Dokumentinhalten im Internet dient. Es ist die Standardsprache zur Erstellung von Webseiten. Mit HTML lassen sich Texte, Bilder und Links innerhalb einer HTML-Seite darstellen. Diese sind im Browserfenster beim Aufrufen einer Webseite sichtbar. Weitere in einer HTML-Datei enthaltene Informationen, wie beispielsweise die Meta-Tag-Angaben oder die Doctyp Declaration sind nur im Quelltext der HTML-Seite zu sehen.

Was ist CSS?

Eine HTML-Seite ist von ihrem Aufbau her immer gleich. Man spricht dabei vom HTML-Grundgerüst:

Grafik
Der Befehl "html" in spitzen Klammern bedeutet, dass die Seite beginnt. Am unteren Ende sehen Sie den Befehl "/html" wiederum in spitzen Klammern, der aussagt, dass die Seite zu Ende ist. Jeder Befehl beginnt in spitzen Klemmern gesetzt und endet mit einem Schrägstrich vor dem Befehl innerhalb der Klammer. Der Befehl "head" kennzeichnet den Beginn einiger Informationen, die hauptsächlich für die Browser bestimmt sind, damit diese den Inhalt der Seite entsprechend darstellen können.
Hier wird der Titel (Name der Seite) eingetragen, der aussagefähig in einigen Worten den Inhalt Ihrer Seite beschreiben sollte. Dieser Titel wird von Suchmaschinen innerhalb der Suchmaschinenergebnisse mit angezeigt, ebenso in der Menüleiste des Browsers beim Aufruf Ihrer Seite. Daher sollten Sie Ihren Seiten-Titel mit Bedacht wählen. Seite 1, index.html, Homepage, Willkommen oder ähnliches als Titel sagt nämlich nicht allzu viel aus. Auch wenn die Startseite Ihrer Homepage als Datei den Datei-Namen "index" haben muss, so ist dies jedoch nicht mit dem Seiten-Titel zu verwechseln.

Beispiel für eine ganz einfache HTML-Seite

Wie Sie HTML schreiben und den Quelltext für eine Webseite erzeugen können, dazu finden Sie entsprechende Informationen auf meiner Seite HTML-Editoren. Mit ein paar wenigen Befehlen in HTML-Schreibweise lässt sich bereits eine sehr einfache Internetseite erstellen, wie ich am nachfolgenden Beispiel kurz darstellen möchte:

Grafik Unter "body" beginnt der Seiteninhalt, also alles das, was Sie auf Ihrer Webseite veröffentlichen wollen, wird unter "body" eingefügt und endet mit "/body" in spitzen Klammern gesetzt.

Schritt für Schritt wird diese dann durch weitere Befehle erweitert, z.B. mit Überschriften. Die erste, also die Hauptüberschrift sollte immer h1 und auch nur einmal auf der Seite enthalten sein. Sie können weitere Überschriften in den Quelltext hineinschreiben von h2, h3, h4, h5 bis h6, immer jeweils in spitzen Klammern und endend mit dem Schrägstrich innerhalb der spitzen Klammer. h1 ist von der Schriftgröße her die größte und h6 die kleinste Überschrift.

Damit Texte und weitere Inhalte nicht alle nur in einer Reihe angezeigt werden, müssen Textumbrüche eingefügt und somit Abstände definiert werden. Dies geschieht mit dem Befehl br, der ebenfalls, wie alle Befehle in spitzen Klammern steht. Absätze im Text werden mit einem p definiert.

Bilder und Grafiken lassen sich mit dem Befehl "img src" einfügen. Im Beispiel wurde ein Foto mit dem Dateinamen "bild.jpg" eingefügt.

Handelt es sich um ein Bild im gif-Format, muss die Dateiendung dementsprechend "xxx.gif" lauten oder "xxx.png", sofern es sich um eine Portable Network Graphic handelt. Ebenso lassen sich PDF-Dateien einfügen als "xxx.pdf" sowie auch Word-, Doc, Excel oder andere Dateien.

Schauen Sie sich nun das Ergebnis dieser simplen Beispiel-HTML-Seite an: Link zur HTML-Beipiel-Seite

Mit nur wenigen Befehlen im HTML-Quelltext ist somit eine einfache Internetseite entstanden, die natürlich noch nicht all zu viel hermacht, aber dann durch weitere Inhalte nach und nach komplettiert werden kann. In dem obigen Beispiel ist unter "head" bisher nur lediglich der Seiten-Titel eingetragen worden, aber es ist sehr wichtig, hier auch die entpsrechenden META-TAG-Angaben vorzunehmen.


META-TAGs

Auf meiner Seite "META-TAG-Angaben" finden Sie einige Informationen dazu...


Mehr lesen


Werbung: