Heute beschäftigen wir uns einmal mit dem Aufbau einer HTML Seite für die erste eigene Homepage, hierbei geht es uns um das Erstellen einer Webseite ohne einen WYSIWYG Homepage Editor der alles hübsch einfach für uns erledigt, sondern OldSchool Handarbeit, sprich selber echtes HTML schreiben und damit verstehen wie es wirklich geht.
Wenn man sich im Internet Webseiten ansieht, dann in der Regel mit einem Browser wie dem Internet Explorer (nicht zu empfehlen) oder dem Firefox (sehr zu empfehlen) oder auch Chrome, Opera etc. Was man dann sieht, ist …in der Regel … eben das was man sehen soll, eine hübsche, lesbare Oberfläche.
Werbung
Darunter steckt aber eine Menge HTML Quellcode, damit der Browser weis, welche Schrift er in welcher Schrift-Farbe, Schrift-Größe, Schrift-Art wo hin schreiben soll, wo Absätze sind, wo welche Bilder eingefügt werden und wie groß die sein sollen und vieles mehr.
Eine reine ursprüngliche Webseite wird in „HTML“ Code geschrieben, HTML ist die Abkürzung für „Hypertext Markup Language“
Schreiben kann man diesen HTML Code in einem ganz normalen Text Editor, oder auch in einem HTML Editor, Script Editor etc.
Die meisten dieser HTML-Elemente werden durch ein Tag-Paar markiert, das heißt durch einen Starttag und einen Endtag. Ein Start oder Endtag beginnt immer mit dem Zeichen „<“ und endet mit dem Zeichen „>“ .
In der aller ersten Zeile wird deklariert welche HTML Version/Dokumententyp wir verwenden, damit der Browser weis, nach welchen Regeln er den Code übersetzen soll. z.B.
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“ „http://www.w3.org/TR/html4/strict.dtd“> , dieser Tag muss nicht geschlossen werden.
Als nächstes öffnen wir den HTML Start Tag:
<html>
Dann öffnen wir den Seiten Kopf / Header:
<header>
Darin öffnen wir den Titel Tag, legen einen Seiten Titel fest und schließen den Titel Tag wieder:
<title>Titel der Seite, Möglichst mit Keyword für die Suchmaschine</title>
Wir beenden den Header:
</header>
Wir öffnen den Body der Seite, also den eigentlichen sichtbaren Inhalts Bereich, darin den Inhalt der Seite , danach schließen wir den Body und schließen den html Tag.
<body>
Hier kommt unser Seiteninhalt
</body>
</html>
Hier einmal zusammengefasst der komplette Inhalt unserer Datei:
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“ „http://www.w3.org/TR/html4/strict.dtd“>
<html>
<header>
<title>Titel der Seite, möglichst mit Keyword für die Suchmaschine</title>
</header>
<body>Hier kommt unser Seiteninhalt</body>
</html>
Diesen Code speichert man nun als index.html und läd ihn per FTP auf den Server oder öffnet die Datei mit einem Browser. Es wird eine leere Seite erscheinen mit dem Titel „Titel der Seite, möglichst mit Keyword für die Suchmaschine“ oberhalb des Browsers und auf der Seite steht „Hier kommt unser Seiteninhalt“.
Die erste Seite, die ein Browser anzeigen soll, wenn man den Domainnamen im Browser eintippt, muss immer immer den Namen index tragen. Also index.htm oder index.html oder index.php (bei php Inhalten). Dateinamen sollten generell immer komplett in Kleinbuchstaben geschrieben werden und weder Leerzeichen noch Sonderzeichen oder Umlaute im Namen enthalten. Lediglich ein Bindestrich „-“ oder ein Unterstrich „_“ sind problemlos möglich.
