Thema: Meine erste WebsiteDatum: 12.01.2013

HTML-Tutorial
Wie erstelle ich meine erste eigene Internetseite?

Vorwort:
Täglich stößt man auf sie und selbst gerade im moment befindest du dich auf einer. Was wäre das Internet nur ohne sie? Wenn du dich jetzt immernoch fragst wovon die Sprache ist kannst du dich glücklich schätzen, dieses Tutorial gefunden zu haben. Die Rede ist von einer Internetseite. Doch wie werden sie erstellt, worauf kommt es an und was benötige ich für eine gut gestaltene Internetseite die sich von den sogenannten Baukasten Seiten abhebt. All das werdet ihr in den folgenden Zeilen erfahren.

Einleitung:
Internetseiten gibt es wie Sand am Meer und Anbieter wie piczo machen es dem anständigen Website Gestalter nicht leichter. Sie ermöglichen es einem binnen wenigen Minuten eine Seite zu erhaltenen mit viel *blink blink* aber wenig Verständnis der Materie. Solchen Seiten soll hiermit der Kampf angesagt werden. Doch halt, zunächst müssen wir wissen aus was eigentlich solch eine Internetseite besteht |Beschränkt auf die zwei wichtigsten "Sprachen"|:
- HTML
-- HTML bedeutet Hypertext Markup Language. Es beinhaltet zwar das wort Language allerdings ist HTML keine Sprache wie Delphi oder Visual Basic sondern nur mehr oder minder eine Visualisierung von Komponenten im Internet. Markup Language bedeutet soviel wie Auszeichnungsprache. Es wird also nur etwas "Ausgezeichnet" allerdings erfolgt keine Kommunikation.
- PHP
-- PHP bedeutet PHP Hypertext Preprocessor. Im Gegensatz zu HTML handelt es sich hierbei um eine Skriptsprache welche Serverseitig verläuft. Somit lassen sich also Webanwendungen realisieren. Meist tritt PHP in Verbindung mit HTML auf. Nun kennen wir also den Grundstein auf dem eigentlich alle Internetseiten aufbauen. In diesem Tutorial wollen wir uns allerdings nur mit HTML beschäftigen und darauf meist aufbauende Komponenten wie PHP außen vor lassen. Der Beste weg etwas zu lernen ist nicht die Theoretische Basis sondern das aktive Mitwirken und bauen. Man merkt auch zum ersten mal das Feuer heiß ist wenn man es berührt und nicht weil jemand davon erzählt. Also schnappt euch eure Sieben Sachen und viel Spaß.

Was benötige ich:
Für dieses Tutorial sollte folgendes vorhanden sein:
- Phase 5 HTML Editor [Empfohlen]
Bei Phase 5 handelt es sich um einen wirklich guten HTML-Editor den ich nur empfehlen kann. Dieser ist kostenlos und besticht durch seine Fülle an Funktionen. Solltet ihr nicht im Besitz von diesem sein so könnt ihr ihn hier downloaden: Phase 5 HTML Editor
- Notepad
Hierbei handelt es sich um den Standart Text Editor von Windows. Natürlich ist es auch möglich über diesen eine Internetseite zu gestalten allerdings würde ich aus Erfahrung eher davon abraten.

Aller Anfang ist schwer:
Zunächst werde ich euch nun hier die Aufteilung eines HTML-Dokumentes erläutern. Im Grunde verhält es sich mit solch einem Dokument wie mit dem Menschlichen Körper.



-
-- Die HTML Tags [so nennt man die HTML Befehle] halten den Inhalt zusammen. Es befindet sich also alles, was wir in HTML schreiben wollen, zwischen diesen Beiden Befehlen . Wobei das Ende eines Befehls immer mit einem "/" gekennzeichnet ist.
-
-- Im Head Bereich unseres HTML Dokumentes befindet sich sozusagen das Wissen rund um die Seite. Dieser Bereich wird vorallem dafür verwendet, Suchmaschinen das finden unserer Seite zu erleichtern. Allerdings ist der Head Bereich für ein HTML Dokument nicht zwingend notwendig. Für konformes HTML allerdings unumgänglich.
-
-- Der Body Bereich ist somit das Kernstück unserer Internetseite da dort alle Seiten Spezifischen Änderungen vorgenommen werden. Es dient somit also der Visualisierung.

Der HTML Bereich:
Die weiteren Schritte werden nun in einer Art Puzzle erläutert bei dem jeder Schritt auf dem vorherigen Aufbaut. Wir haben also nun Phase 5 oder Notepad geöffnet und beginnen damit unser Dokument "intern" als HTML Dokument aufzubauen. Wie wir wissen wird ein HTML Dokument von dem HTML Befehl umschlossen:


                  
                

Somit haben wir also nun die Struktur festgelegt.

Der Head Bereich:
Da wir die Grundstruktur eines jeden HTML Dokumentes beibehalten wollen, fügen wir auch noch den Head Bereich in unseren Code hinzu:

                  
                    
                  
                

Nun geht es darum den Head bereich mit Informationen zu füllen. Das Spektrum der Informationen Reicht vom Autor der Seite bis hin zum Titel. Um euch eine kleine Veranschaulichung zu gewährleisten erläutere ich euch hier entsprechende Befehle welche ich auch für unsere Tutorial Seite verwenden möchte.
-
-- Ein Titel bildet die Überschrift zu eurer Seite. Wenn ihr in eurem Browser mehrere Tabs [Seiten] geöffnet habt erkennt ihr die jeweilige Seite an den Angaben im Titel Befehl.

                  
                    
                      HTML-Tutorial
                    
                  
                


Der Head Bereich [Meta Informationen]:
Die Meta Informationen sind diejenigen Informationen welche von Suchmaschinen als erstes untersucht werden und je nach Angaben eine bessere Platzierung ermöglichen. Eine zeitliche Investition in diesen Abschnitt ist somit nicht verkehrt.
-
-- Ein Meta Befehl ist immer unter anderem in die Teilabschnitte name="" und content="" gegliedert. Dabei gibt name="" den Typ der Metadatei fest und content="" den Inhalt.
-
-- Dies sollte am Besten mit dem Titel der Internetseite übereinstimmen.
-
-- Gibt den Author der Website an. Dort gebt ihr also euren eigenen Namen ein.
-
-- Dies sind die sogenannten Schlüsselwörter nach denen bei Googel o.ä. gesucht wird.
-
-- Hier erfolgt eine Kurze Beschreibung der Inhalte der einzelnen Webseiten und sollte für jedes Dokument angepasst werden.
-
-- Gibt die Sprache der Seite an.
Wenn wir nun diese Informationen alle getätigt haben sieht unser HTML Dokument wie folgt aus.


                  
                    
                      HTML-Tutorial
                      
                      
                      
                      
                      
                    
                  
                

Wer jetzt richtig aufgepasst hat, dem sollte aufgefallen sein, dsas man bei dem Meta Befehl keinen Endbefehl benötigt. Dies trifft aber nicht nur auf die Meta Befehle zu sondern auch auf einige andere. Allerdings muss man dies auch vom DOCTYPE abhängig machen, doch diesen wollen wir zunächst außer Acht lassen.

Der Body Bereich:
Da wir nun alle "Suchmaschinen" relevanten Informationen gegeben haben, kommt nun der eigentliche Teil unserer Gestaltung. Da dieser Abschnitt zu dem "größten" gehört werden hier einige Unterteilungen vorgenommen.

Der Body Bereich [Internetseiten Aufteilung]:
Zunächst müssen wir unsere Seite in verschiedene Teilbereiche unterteilen. Somit wahren wir die Übersicht und haben es später leichter einzelne Veränderungen vorzunehmen. Eine Aufteilung erreichen wir dadurch, dass wir die Seite in einzelne Tabellen unterteilen. Für unsere Bedürfnisse reichen 3 Tabellen aus. Für Überschrift, Menü und Anzeige.
-


-- Der Tabellen befehl
teilt sich in mehrere Kategorien auf welche als "Unterbefehle" in dem Hauptbefehl enthalten sind.
--- width="" Gibt die Breite der Tabelle an
--- height="" Gibt die Höhe der Tabelle an
--- align="" Gibt an ob die Tabelle links/rechtsbündig oder zentriert sein soll
--- border="" Gibt an ob man den Rand sehen [1] oder nichtsehen [0] soll
--- cellpadding="" Bestimmt den Innenabstand eines Textes o.ä. zum Rand
--- cellspacing="" Bestimmt den Abstand der Zellen Untereinander
Somit benötigen wir für unsere drei Tabellen folgende Werte:
- Als Überschrift:

- Als Menü:

- Als Ausgabe:
 

Damit wären als unsere Tabellen entworfen und wir können wieder einen Blick auf unseren neuen Code machen

                  
                    
                      HTML-Tutorial
                      
                      
                      
                      
                      
                    
                    
                      

Allerdings ist dieser Code noch nicht ganz komplett, da wir zwar die Tabellen erstellt haben aber noch keine Zeilen. Über fügen wir diese hinzu. Als Zelle dient uns dann der Befehl welcher sich innerhalb von befindet.

                  
                    
                      HTML-Tutorial
                      
                      
                      
                      
                      
                    
                    
                      


Der Body Bereich [Tabelle: Überschrift]:
Um das ganze nun mit Leben zu füllen beginnen wir mit der Überschrift. Da ein einfacher Text zu "normal" wäre nehmen wir eine Textgrafik um das ganze ein wenig aufzuwerten:

Folgender Befehl soll uns dies ermöglichen:
-
-- src="" Gibt den Pfad zu der Datei an
-- alt="" Bestimmt einen Alternativ Text wenn die Grafik nicht angezeigt werden kann
-- border="" Überprüft ob ein Rahmen genutzt werden soll oder nicht
-- width="" Gibt die Breite des Bildes an
-- height="" Gibt die Höhe des Bildes an
Fertig sind unser IMG-Code folgendermaßen aus:

 
HTML-Tutorial

Da wir das Bild allerdings in der Mitte zentrieren möchten fügen wir um den Bild Befehl herum den folgenden Befehl an:
 

-- align="" Bestimmt die Ausrichtung [left=links / right=rechts / center=mitte]
Hier also unsere Kombination aus Beiden Codes:
 


                  
                    
                      HTML-Tutorial
                      
                      
                      
                      
                      
                    
                    
                      
HTML-Tutorial


Der Body Bereich [Tabelle: Menü]:
Das Menü soll es anderen Nutzern ermöglichen sich auf eurer Seite zu bewegen. Auch hierfür nehmen wir anstelle von einem normalen Text Grafiken:
 
Wie man eine Grafik einfügt wissen wir aus dem oberen Beispiel ja schon bereits. Allerdings müssen wir diese Grafiken nun verlinken um auf eine andere Seite zu gelangen. Dazu verwendet man folgenden Befehl:

 


-- href="" Sorgt für die Verlinkung
 
 Klammert das zu verlinkende ein

 


-- valign="" Ermöglicht es die Bilder/Text Oben [Top] oder Unten [Bottom] auszurichten
 


-- Sorgt für den passenden Abstand
Nachher sollte unser HTML Code für die Menüpunkte wie folgt aussehen:
 
Startseite

 
Infos


                  
                    
                      HTML-Tutorial
                      
                      
                      
                      
                      
                    
                    
                      
HTML-Tutorial
Startseite

Infos



Der Body Bereich [Tabelle: Ausgabe]:
Nun fehlt lediglich noch der Bereich indem alle Relevanten Daten ausgegeben werden sollen. Hierzu bedarf es nur einem sehr kurzen Befehl nämlich

. Dieser ermöglicht es einen normalen Standart Text auszugeben. Noch eine Überschrift des Textes mit

erstellt und schon sind wir fertig.


                  
                    
                      HTML-Tutorial
                      
                      
                      
                      
                      
                    
                    
                      
HTML-Tutorial
Startseite

Infos

Willkommen auf der Website von HTML-Tutorial

Dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das und dies und das



Schlusswort:
Herzlichen Glückwunsch, somit habt ihr eure erste eigene Website gestaltet. Ihr müsst nun nur noch eure Datei unter dem Namen XY.html abspeichern damit euer Browser die Datei auch als HTML Dokument erkennt. Anbei findet ihr Unten auch den Downloadlink zu besagten Dateien.