Hallo,
In diesem Tutorial zeige ich euch wie ihr mit HTML eine ganze einfache Homepage erstellen könnt!
Zu beachten ist das dieses Tutorial für absolute Anfänger ist!
In diesem Tutorial werdet ihr folgende Sachen kennenlernen:
Textformatierung -> Fett, Kursiv, Unterstrichen
Tabellen
Hyperlinks
Iframes
und ein paar andere "Grundlagen"..
Beginnen wir mal!
Erstmal brauchen wir einen Editor wo das ganze "gecodet" wird!
Als Editor kann ich "Notepad ++" empfehlen..
Der Editor in "Start - Programme - Zubehör - Editor" tut's aber auch ;)
Wenn wir den Editor offen haben können wir beginnen!
Jedes HTML-Dokument hat ein Grundgerüst!
Das sieht so aus:
<html>
<head>
<title></title>
<head>
<body>
</body>
</html>
Der Aufbau ist im prinzip genau wie bei einem Menschen, nur das halt beim HTML-Dokument
die "Beine" fehlen!
Im Head steht der Titel eurer Homepage..
Denn könnt ihr euch selbst aussuchen! Ich nenne sie jetzt einfach mal "TestHomepage"..
Das schaut dann so aus:
<html>
<head>
<title>TestHomepage</title>
<head>
<body>
</body>
</html>
Jetzt kommen wir zum Body!
In den Body kommt alles rein was auf der Homepage zu sehen ist..
Also der ganze Inhalt! Das könnten sein:
Texte
Bilder
etc.
Also schreiben wir mal irgendwas in den Body:
<html>
<head>
<title>TestHomepage</title>
<head>
<body>
HTML ist nicht schwierig!
</body>
</html>
Ihr werdet euch jetzt Fragen wo und wann ich diesen Text im Browser sehen kann!
Dazu kommen wir jetzt!
Ganz einfach:
Ihr geht in eurem Editor auf "Datei -> Speichern unter"..
Jetzt speichert ihr Dokument in einen Ordner der am Desktop liegt!
Wichtig: Die Datei muss als ".html" und nicht als ".txt, .mp3, .avi" gespeichert werden!
Jetzt geht ihr in den Ordner auf den Desktop wo die Datei gespeichert ist und macht
einen Doppelklick auf die Datei!
Wenn ihr bis jetzt alles richtig gemacht habt, sollte sich euer Browser öffnen und den
Text anzeigen den ihr vorher in den "body" geschrieben habt!
Bei mir sieht das so aus:
Klicke auf das Bild um es zu vergroeßern!
Weiter gehts!
Formatieren wir unseren Text ein bisschen..
Mit dem Tab <b> Kann man Säzte oder nur einzelne Worte fett schreiben!
Wenn man den <b> Tag beginnt muss man ihn aber auch irgendwo beenden!
Das macht mit </b>..
Beispiel für einen fett geschriebenen Text:
<b>HTML ist nicht schwierig!</b>
Das müsstet ihr jetzt nur noch in den Body schreiben und dieser Text wird
im Browser "fett" angezeigt!
Man kann natürlich auch Kursiv und Unterstrichen schreiben:
Kursiv: <i>HTML ist nicht schwierig!</i>
Unterstrichen: <u>HTML ist nicht schwierig!</u>
Und hier noch mal fett: <b>HTML ist nicht schwierig!</b>
Kleine Erklärung:
<b> - b = bolt = fett
<i> - i = italic = kursiv
<u> - u = underline = unterstrichen
Es gibt noch viel mehr Tags zur Textformatierung, aber die erkläre ich hier nicht ;)
Kommen wir wieder zu unserem HTML-Dokument!
Bis jetzt sieht es so aus:
<html>
<head>
<title>TestHomepage</title>
<head>
<body>
HTML ist nicht schwierig!
</body>
</html>
Probiert jetzt mal den Text mit <i><u> und <b> zu formatieren überspeichert es und schaut im Browser ob des geklappt hatt!
Normal sollte alles funktioniere!..
Machen wir weiter:
Jetzt kommen die Tabllen!
So schaut ein Code für eine einfache Tabelle aus:
<table border="1">
<tr>
<td>Hello World</td>
<td>Bey World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Bey World</td>
</tr>
</table>
Fügt diese Table jetzt einfach mal in den Body eures Dokuments ein:
<html>
<head>
<title>TestHomepage</title>
<head>
<body>
<table border="1">
<tr>
<td>Hello World</td>
<td>Bey World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Bey World</td>
</tr>
</table>
</body>
</html>
Speichert drüber und öffnet das HTML Dokument in eurem Browser!
So sollte es ausschauen:
Klicke auf das Bild um es zu vergroeßern!
Erklärung:
[b]<table border="1">[/b] = Tableanfang und der Rahmen (Border) hat 1 Pixel
[b]<tr>[/b] = Neue Reihe wird angefangen
[b]<td>Hello World</td>[/b] = Neue Spalte in der Reihe mit dem Text "Hello World"
[b]<td>Bey World</td>[/b] = Neue Spalte in der Reihe mit dem Text "Bey World"
[b]</tr>[/b] = Spalte wird sozusagen "geschlossen"
[b]<tr>[/b] = Wieder eine neue Reihe
[b]<td>Hello World</td>[/b] = Neue Spalte in der Reihe mit dem Text "Hello World"
[b]<td>Bey World</td>[/b] = Neue Spalte in der Reihe mit dem Text "Bey World"
[b]</tr>[/b] = Spalte wird "geschlossen"
[b]</table>[/b] = Table wir beendet..
Machen wir mal eine einfache Tabelle für ein Layout einer Homepage:
<table border=1>
<tr>
<td>Hier kommt der Banner der Homepage</td>
</tr>
<tr>
<td>Hier kommen die Menüpunkte</td>
</tr>
<tr>
<td>Inhalt der Homepage</td>
</tr>
</table>
Fügen wir das mal in unseren Body ein und schauen was dabei rauskommt!
Klicke auf das Bild um es zu vergroeßern!
Sieht ja noch nicht sehr nach einer Homepage aus!
Mit width="" und height="" können wir bestimmen wie hoch und lange die
einzelnen Reihe/Spalten sein sollen!
Schauen wir mal:
<table border=1>
<tr>
<td width="500" height="120">Hier kommt der Banner der Homepage</td>
</tr>
<tr>
<td width="500" height="30">Hier kommen die Menüpunkte</td>
</tr>
<tr>
<td width="500" height="430">Inhalt der Homepage</td>
</tr>
</table>
Mit width und height haben wir jetzt die Höhe und die Länge der verschiedenen Spalten so verändert das es ein "Grundgerüst" für ein
einfaches Layout ist!
So sieht es aus:
Klicke auf das Bild um es zu vergroeßern!
Und der Code sieht bei mir bis jetzt so aus:
<html>
<head>
<title>TestHomepage</title>
</head>
<body>
<table border=1>
<tr>
<td width="500" height="120">Hier kommt der Banner der Homepage</td>
</tr>
<tr>
<td width="500" height="30">Hier kommen die Menüpunkte</td>
</tr>
<tr>
<td width="500" height="430">Inhalt der Homepage</td>
</tr>
</table>
</body>
</html>
Aber irgendwie ist das nicht schön wenn das ganze auf der linken Seite der Homepage ist!
Mit dem Tag <center></center> können wir das ändern:
<html>
<head>
<title>TestHomepage</title>
</head>
<body>
<center>
<table border=1>
<tr>
<td width="500" height="120">Hier kommt der Banner der Homepage</td>
</tr>
<tr>
<td width="500" height="30">Hier kommen die Menüpunkte</td>
</tr>
<tr>
<td width="500" height="430">Inhalt der Homepage</td>
</tr>
</table>
</center>
</body>
</html>
Jetzt sieht das ganze so aus:
Klicke auf das Bild um es zu vergroeßern!
Kommen wir mal zum "Bilder" einfügen!
Mit diesem Tag könnt ihr Bilder einfügen:
<img src="banner.jpg">
Mit diesem Code wird ein Bild Namens "banner.jpg" angezeigt!
Das Problem ist wir haben noch keinen Bild!
Also macht jetzt einfach mal in Paint einen kleilen Banner mit
einer Göße von 500 x 120 Pixel..
Diesen speichert ihr dann in den Ordner wo auch die HTML-Datei
gespeichert ist unter dem Namen: "banner.jpg" ...
Fügen wir den Banner mal auf die Homepage ein!
Mein Code sieht so aus:
<html>
<head>
<title>TestHomepage</title>
</head>
<body>
<center>
<table border=1>
<tr>
<td width="500" height="120"><img src="banner.jpg"></td>
</tr>
<tr>
<td width="500" height="30">Hier kommen die Menüpunkte</td>
</tr>
<tr>
<td width="500" height="430">Inhalt der Homepage</td>
</tr>
</table>
</center>
</body>
</html>
Wenn ihr euch den Code angeschaut habt könnt ihr sehen das ich in
die erste Zeile der Tabelle das Bild eingefügt habe..
Schauen wir es uns einmal im Browser an!
So sieht es bei mir aus:
Klicke auf das Bild um es zu vergroeßern!
Kommen wir jetzt zu den Iframes!
Ein Iframe ist ein beliebig großes Bereich auf einer HTML-Seite wo eine andere HTML-Seite angezeigt wird!
Wir werden jetzt ein iFrame in das Textbereich einfügen!
Der Code für ein Iframe geht so:
<iframe src="home.html" width="500" height="430" frameborder="0" name="frame></iframe>
Erklärung:
[b]src [/b]= Dateipfad von der Datei die im Frame angezeigt werde soll..
[b]width[/b] & height = solltet ihr schon kennen!
[b]name[/b] = der name des iframes
[b]frameborder[/b] = Ob das Frame einen Rahmen haben soll!
Width & Height des Frame hab ich so angepasst das es genau in das Textbereich passt!
Das sieht bei mir so aus:
Klicke auf das Bild um es zu vergroeßern!
Und der Code:
<html>
<head>
<title>TestHomepage</title>
</head>
<body>
<center>
<table border=1>
<tr>
<td width="500" height="120"><img src="banner.jpg"></td>
</tr>
<tr>
<td width="500" height="30">Hier kommen die Menüpunkte</td>
</tr>
<tr>
<td width="500" height="430"><iframe src="home.html" width="500" height="430" frameborder="0" name="frame></iframe></td>
</tr>
</table>
</center>
</body>
</html>
So:
Ihr werdet euch jetzt Fragen warum wir den Text der Homepage nicht direkt in die Tabelle schreiben sonder in einem Iframe anzeigen lassen!
Das hat einen ganz einfachen Grund:
Die ganze Homepage Bilder etc. wird nur einmal geladen!
Danach klickt man auf die Hyperlink und der Text wird im Iframe angezeigt!
Wenn wir es ohne Iframes machen würden muss für jeden Menüpunkt die ganze Homepage neu geladen werden..
Und für die Leute die eine Langsame Leitung haben ist das nicht so Gut!
Diese Homepage ist noch nicht besonders "groß" deswegen wären Frames noch nicht nötig.. Bei größeren Homepages sind sie jedoch ziemlich praktisch!
Gehen wir wieder zum Code zurück!
So sieht er bis jetzt aus:
<html>
<head>
<title>TestHomepage</title>
</head>
<body>
<center>
<table border=1>
<tr>
<td width="500" height="120"><img src="banner.jpg"></td>
</tr>
<tr>
<td width="500" height="30">Hier kommen die Menüpunkte</td>
</tr>
<tr>
<td width="500" height="430"><iframe src="home.html" width="500" height="430" frameborder="0" name="frame"></iframe></td>
</tr>
</table>
</center>
</body>
</html>
Zu den Iframes kommen wir später nochmal!
Jetzt kommen wir zu den "Hyperlinks"..
Mit den Hyperlinks machen wir das Menü!
Mit den Hyperlinks bringen wir das Frame dazu beliebige HTML-Dateien anzuzeigen!
Hier ein einfacher Code für einen Hyperlink:
<a href="home.html">Home</a>
Wird die HTML-Datei "home" geladen!
Wir wollen das sie im Iframe geladen wird!
Mit target="" ist das möglich!
Wir haben unserem iFrame vorher den Namen "frame" gegeben!
Also sieht unser Code für den Hyperlink so aus:
<a href="home.html" target="frame">Home</a>
Erklärung:
[b]href="home.html"[/b] : Datei die angezeigt werden soll
[b]Target="frame"[/b] : die Seite home.html soll im iframe "frame" angezeigt werden!
Wenn man will das die Datei "home.html" in einem neuem Fenster geöffnet wird schaut das so aus: target="_blank"
Und wenn man will das die Datei im selben Fenster geöffnet wird dann lasst man das target="" einfach weg!
So:
Machen wir mal unsere Menüpunk!
Mein Code sieht so aus:
<html>
<head>
<title>TestHomepage</title>
</head>
<body>
<center>
<table border=1>
<tr>
<td width="500" height="120"><img src="banner.jpg"></td>
</tr>
<tr>
<td width="500" height="30"><center><a href="home.html" target="frame">Home</a> # <a href="news.html" target="frame">News</a> # <a href="impressum.html" target="frame">Impressum</a></center></td>
</tr>
<tr>
<td width="500" height="430"><iframe src="datei.html" width="500" height="430" frameborder="0" name="frame></iframe></td>
</tr>
</table>
</center>
</body>
</html>
Das sieht bei mir so aus:
Klicke auf das Bild um es zu vergroeßern!
Wenn ihr jetzt auf den Menü Punkten herum klickt sehr ihr das sich bei jedem Klick auf einen
Menü Punkt der Text im iFrame ändert!
Wenn ihr auf Home klickt steht im Text das die Datei "home.html" nicht gefunden wurde!
Wenn ihr auf News klickt steht im Text das die Datei "news.html" nicht gefunden wurde!
Wenn ihr auf Impressum klickt steht im Text das die Datei "impressum.html" nicht gefunden wurde!
Das ist Gut!
Jetzt müssen wir nur mehr für jeden Menüpunkt eine HTML-Datei erstellen die im iFrame angezeigt werden kann!
Der Hyperlink "home" sagt dem Frame das es home.html laden soll!
Speichert euer jetztiges Dokument und schließt es!
Jetzt macht ihr eine HTML-Datei Namen's "home.html"
Da fügt ihr das Grundgerüst einer HTML-Seite und schreibt den geschwünschten Text
in den Body der dann erscheinen soll wenn auf den Menüpunkt "home" geklickt wird!
Das selbe müsst ihr Klarerweise noch mit "news.html" und "impressum.html" machen!
Danach sollten die Hyperlink's euch die gewünschten HTML-Seiten im iFrame anzeigen!
Ich hoffe ich habe es nicht zu umständlich erklärt!
Wenn ihr Fragen habt könnt ihr gerne Fragen!
'Michael