So ich werde euch den Grundbeustein jeder HomePage erklären und Zeigen wie man damit Arbeiten kann um Pages zu erstellen.
Also erstes solltet ihr euch einen Vernünftigen Editor besorgen.
Dazu empfehle ich Proton, aus dem Grund da er Syntaxschmene hat und
Zeilenangaben.
Hier ist der Download für Proton
Proton 3.2 Deutsch - Download - CHIP Online
Also fangen wir dann mal an.
Schritt 1 - Der Grundbaustein:
Jede Homepahe fängt mir diesen Beusteinen an:
Code:
<html>
<head>
<title>Hallo!</title>
</head>
<body>
Seiteninhalt
</body>
</html>
Wenn ihr das in Proton habt speichert die Datei.
Da Proton ein Editor zum schreiben vo Programmen/Pages ist weiß er nicht welche Datenendung er geben soll.
Ihr könnt euch entscheiden Entweder .html oder .htm es kommt afs gleiche herraus. Also Speichern unter -> Dateiname: ersteseite.htm
Ich empfehle euch die Seite immer neu aufzurufen im Browser um zu schauen ob alles bei euch klappt.
Diese Befehle dürften den Meisten Nutzern hier nicht unbekannt sein.
Es geht wie in einem Forum ein Bereich zu öffnen und zu schließen.
Jede Seite fängt mit <html> an. Das zeigt dem Browser das eine HTML Seite gespartet wird. Danach kommt der Head (Kopf bereich) Eigendlich nur geeignet um CSS Datein einzubinden aber dazu später mehr. Im Headbereich kommt auch der Titel der Seite der oben am Fensterrand des Browsers Angezeigt wird.Nun den Head schließen da wir ihn nichtmehr brauchen.
Nun der eigendliche Bereich - Der Body. Im Body kommt alles was so für die Seite wichtig ist rein. Es spielt sich alles hier ab (Sogut wie).
Man kann hier seine Bilder einbauen, Tabellen erstellen oder nur einfache Texte schreiben.
Schritt 2 - Bilder und Links einfügen:
Bilder und Links sind sehr einfach einzufügen.
Bilder haben diesen HTML Code
Code:
<img src="http://www.google.de/intl/de_de/images/logo.gif">
Ein Bildbereich muss nicht geschlossen werden!
Dieser Befehl zeigt nun Das Googlelogo.
wenn du grafiken verwenden möchtest die im gleichen verzeichnis liegen wie deine HTML Seite brauchst du lediglich den Namen und die Endung des Bildes
Bsp: logo.jpg oder Foto.gif
Dann lautet der Befehl so
Code:
<img src="Logo.jpg">
Einfache Sache.
Kommen wir zu den Links ohne denen eh nichts geht.
Im Grunde genommen sind Links nichts weiter schweres aber sehr sehr wichtig!
Ein Link geht so:
Code:
<a href="http://www.google.de">Google besuchen</a>
Nehmen wir den Befehl auseinander.
Also Das Href steht für Hyperreferend (keine ahnung was da nochmal heißt ^^) danach wie bei der IMG SRC die Seitenangabe machen. Hier wird Google verlinkt. Nach der Spitzklammer kommt der Name den der Link ahben soll der dann im Browser angezeigt wird. Hier wird dann im Browser Google besuchen stehen. nach dem Linktext wird der Link geschlossen mit </a>
Wenn ihr den den Link in einem neuen Fenster öffnen wollt sieht ein Befehl so aus
Code:
<a href="http://www.google.de" target="_blank">Google besuchen</a>
Nun sollte bei einem Klick google in eigenständigen Fenster erscheinen.
Das hat den Vorteil das der Besucher weiterhin auf eurer Seite bleibt.
Verlinkung ohne target sollten ausschließlich genutzt werden um eine eurer 2.ten Seiten auszurufen. Sprich Ihr ahbt die Startseite von euch und Wollt beispielsweiße auf eure Fotos. Dann lasst target weg.
Man kann auch Bilder verlinken das sehe dann so aus
Code:
<a href="http://google.de" target="_blank"><img src="Bilderlink"></a>
Schritt 3 -Schriftgröße und Dekorationen:
Fangen wir an mit der Deko!
Immoment sollte der Hintergrund der seite noch weiß sein aber das können wir schnell ändern.
Zurück zum Body
Code:
<body bgcolor="red">
Das sollte euren Hintergrund Rot machen.
man kann genau so gut Farbcodes verwenden.
Code:
<body bgcolor="#FF0033">
Das amcht den Hintergrund auch rot aber in einem anderen Ton.
Hier findet ihr viele HTML Farcodes
HTML Farbcode Tabelle
Kommen wir zu den Balken.
Ein Balken geht sehr einfach.
das wars schon. Man kann einen Balken nehmen um die Überschrift vom Restlichen Seitenteil zu "trennen"
Nun die Schriftfarbe.
Code:
<font color="red">Test</font>
Das wird eure Schrift Rot machen
Nun Die Schrift größe.
Dazu einfach <hX> nehmen (X Steht füreine Zahl zwischen 1 und 10)
und </hX> zum Schließen.
Schritt 4 - Tabellen
So nun kommen wir zu dem Teil wo es langsam Intressanter wird!
Tabellen sind für alles mögliche Geeignet wie eine Reihe von Links oder einfach mal euren Stundenplan in HTML zu schreiben.
Tabellen sehen so aus
Code:
<table border="X"> (X Ist für 0 oder 1. Bei 0 ist kein Rand da bei 1 ja)
<tr> Zeilenangabe
<td> Spaltenangabe
</td>
</tr>
</table>
Ein einfaches Beispiel.
Ihr möchtet euren Stundenplan erstellen.
So würde es dann aussehen
Code:
<table border="1">
<tr> <- Für die 1 Zeile
<td>
Montag
</td>
<td>
Dienstag
</td>
<td>
Mittwoch
</td>
<td>
Donnerstag
</td>
<td>
Freitag
</td>
</tr> <- Erste Zeile Schließen und neue Öffnen
<tr>
<td>
Deutsch
</td> <- Die Tabelle würde nun unter Montag Deutsch schreiben. Ein neues
TD legt sich nun unter Dienstag!
<td>
Mathe
</td>
<td>
Englisch
</td>
<td>
Englisch
</td>
<td>
Französisch
</td>
<td>
Sport
</td>
Das ist jetzt der Code für die Tagzeile und die ersten Stunden.
So damit würde ich erstmal sagen ist Tutorial 1 fertig.
Werden bald noch mehr kommen!
Hoffe ihr hattet Spaß hierbei und wenn es Fragen gibt hier Posten
HTML Einsteiger Tutorial
das wird mir sicherlich helfen ^^
YiGG.de
