| |
Wie erstelle ich mir
eine Homepage?I
So ihr lieben, ich möchte
gern mein Wissen weitergeben, daher mache ich mal ne kleines Tut für
alle, die HTML lernen wollen. Aber -> Nur HTML kein (x)HTML!
Also fangen wir mal an. Nun, was ist HTML überhaupt? HTML = Hyper Text
Markupi Language. Sprich, eine Sprach für Interseiten die auf der ganzen
Welt gleich sind. Somit kommt jeder, der HTML kann, auch immer mit dem
Quelltext von anderen leuten klar. Praktische Sache!
Ok, wie fange ich an? Nun, als erstes müssen wir klar machen, was wir
wollen. Also fangen wir mit dem befehl
<html> an. Die < > (Klammern) Aktivieren den Befehl für HTML. Somit weiß
Word, Notepade & co, das wir eine HTML Seite machen wollen. Tags werden
immer mit <html> </html> angefangen und beendet. Der Befehl </> schließt
den jeweiligen Tag des Befehls. Also mekren <html> Anfang des Befehls </html>
schließen des Befehls, ok?
Weiter gehts: Aber nur <html> reicht nicht aus, wir müssen ja ein Gerüst
aus HTML bauen. Klingt jetzt wohl bisschen merkkwürdig, ist aber
einfach. Das sieht dann so aus:
<html>
<head>
<title>Neue Seite 1</title>
</head>
<body>
</body>
</html>
Cool wa? Also schreibt mal diesen Code in den Notepade oder einen
anderen Editor, euerer Wahl. Speicher aber immer mit den kürzel .htm
ab!! Sondst weiß der Ed nicht, was du willst! Speichert die Datei bitte
unter test.htm ab! Öffnet diese jetzt mit euren Internet Browser. Und
siehe da, oben links steht neue Seite 1. Aber warum, ist die Seite jetzt
leer? Ganz einfach, wir haben ja noch keine Infos in die Seite eingeben!
Das machen wir jetzt, aufpassen!
Schreibt jetzt bitte zwischen <body> </body> einen Text. Z.b. Hallo ich
werde eine Datei. Wichtig, nur zwischen <body> </body> die Daten für die
HP eingeben, denn wenn wir diesen willkürlich irgendwo hin machen, geht
nichts mehr, also bitte darauf achten!
<html>
<head>
<title>Neue Seite 1</title>
</head>
<body>
Hallo ich werde eine Datei!
</body>
</html>
Speichert wieder ab, und seht, was der Editor macht. Jetzt sehen wir
unseren Text im Browser! Aber das ist noch nicht alles. Schreiben wir
nun bisschen weiter. Also schreibt bei "Hallo ich werde eine Datei"
weiter. z.b. "HTML kann Weltweit und überall der HTML versteht, erkannt
und verarbeitet werden. Dies macht Sinn ...." Sicher ist euch jetzt
aufgefallen, das der Text recht groß ist. Speicher bitte wieder ab!
<html>
<head>
<title>Neue Seite 1</title>
</head>
<body>
Hallo ich werde eine Datei! HTML kann Weltweit und überall der HTML
versteht, erkannt und verarbeitet werden. Dies macht Sinn ....
</body>
</html>
Speichert eure Datei jetzt ab, und ladet eure SEite neu! Man sieht, das
der Text da ist. Jetzt wollen wir aber eine neue Zeile beginnen. Dazu
müssen wir jetzt einen Weiteren Befehl verwenden. <br> Ja, das war
alles, setzt dieses <br> direkt hinter eure Satz ende!
<html>
<head>
<title>Neue Seite 1</title>
</head>
<body>
Hallo ich werde eine Datei! HTML kann Weltweit und überall der HTML
versteht, erkannt und verarbeitet werden. Dies macht Sinn ....<br>
</body>
</html>
Speichert diese jetzt ab, und schreibt gleich noch was dazu, z.b. Eine
neue Zeile!
<html>
<head>
<title>Neue Seite 1</title>
</head>
<body>
Hallo ich werde eine Datei! HTML kann Weltweit und überall der HTML
versteht, erkannt und verarbeitet werden. Dies macht Sinn ....<br>
Eine neue Zeile!
</body>
</html>
Speichert ab, und ladet eure Browser neu! Aha, jetzt ist die neue Zeile
da, und wir können dort weiter schreiben. Also merken. Wenn wir eine
Neue Zeile anfangen wollen, immer den befehl <br> verwenden! Dieser Tag
braucht keine </> um beendet zu werden, da es nur diesen befehl gibt.
Daher, keep cool.
- weitres folgt in den nächsten Tagen , keine Angst -
(c) Michael Wegner / Futurezone (c) akatsuki forum
Teil2
Ok, es geht weiter. Nun wissen wir, wie wir ne HTML seite erstellen
können. Aber jetzt gehen wir ans eingemachte. Wie wäre, wenn ihr mal ne
Schrift fett machen wollen? Das geht ganz einfach. Auch hier brauchen
wir wieder unseren Ed. Im Quellcode müssen wir einfach nur vor dem Wort,
was wir Fett haben wollen -> <b> machen. Das ist der Befehl dafür, das
dieser Satz, der mit <b> beginnt und mit </b> endet, Fett werden soll!
<html>
<head>
<title>Neue Seite 1</title>
</head>
<body>
Hallo ich werde eine Datei! HTML kann Weltweit und überall der HTML
versteht, erkannt und verarbeitet werden. Dies macht Sinn ....<br>
<b>Eine neue Zeile!</b>
</body>
</html>
Schreibt dies mal vor euren Text, Speichert ab, und seht es euch dann im
Browser an! Siehe da, es ist nun Fett. Super, oder? Merken, wenn ihr
einen Text Fett haben wollt, dann macht vor und nach euren Text <b> </b>
! Dann macht ihr nichts falsch!
Ok, mal angenommen, wir wollen die Zahl 2006 mitiig haben, müssen wir
den Tag <center> </center> verwenden. Das machen wir jetzt! Achtet
darauf, das ihr auch das <br> macht, sondst hängen der Text und die Zahl
zusammen!
<html>
<head>
<title>Neue Seite 1</title>
</head>
<body>
Hallo ich werde eine Datei! HTML kann Weltweit und überall der HTML
versteht, erkannt und verarbeitet werden. Dies macht Sinn ....<br>
<b>Eine neue Zeile!</b><br>
<center>2006</center>
</body>
</html>
Speichert ab und seht es euch an! Toll was? Wenn euch der Abstand
zwischen Eine neue Zeile und 2006 zu wenig ist, macht noch 1,2 <br>
dazwischen, somit wird der Abestand größer.
So, nun Steht die Zahl da, jetzt wollen wir sie mal größer machen. Das
machen wir mit dem Befehl <h1> </h1> Dies ist der Tag, für die größe der
Schrift. <h1> ist groß. <h6> ist klein. Ok, machen wir das mal in
unseren Quellcode!
<html>
<head>
<title>Neue Seite 1</title>
</head>
<body>
Hallo ich werde eine Datei! HTML kann Weltweit und überall der HTML
versteht, erkannt und verarbeitet werden. Dies macht Sinn ....<br>
<b>Eine neue Zeile!</b><br>
<h1><center>2006</center></h1><br>
<br>
</body>
</html>
Keine Angst, ihr könnt das <h1> direkt vor Center schreiben! Speichert
mal ab, und seht es euch an! Funzt gut, ne?
Vergesst nicht, die <br> !
Ok, jetzt haben wir Fett, Zentriert und Überschriten gelernt. Jetzt
kommen wir zu den Hyperlinks! Das wird jetzt bisschen schwerer, aber
keine Angst, es geht recht einfach!
<a href="linl.htm">Klick mich</a>
So <a href=linkname.htm das ist der Weg, des Hyperlinks. Wichtig ist,
das der Link ganu mit der HTML datei übereinstimmen muss, die ihr
verlinken wollt!
>Klick mich</a> ist der Name, des Knopfes, den ihr seht Das Beispiel
Klick mich das werdet ihr dann sehen. Ok, schreibt diesen link in eure
datei!!
<html>
<head>
<title>Neue Seite 1</title>
</head>
<body>
Hallo ich werde eine Datei! HTML kann Weltweit und überall der HTML
versteht, erkannt und verarbeitet werden. Dies macht Sinn ....<br>
<b>Eine neue Zeile!</b><br>
<br>
<h1><center>2006</center></h1><br>
<br>
<a href="link.htm">Klick mich</a>
</body>
</html>
Speichert ab! Und seht es euch an. Wenn ihr auf den Link klickt, wird
nichts passieren, da diese Datei noch nicht erstellt wurde. Das machen
wir jetzt. Speicher eurer Seite jetzt neu ab, mit dem Namen link.htm.
Achtet darauf, dass die beiden Datein im gleichen Ordner liegen! Denn
wenn ihr die Beiden Datein jedes mal woanderes speichert, finden die
beiden sich nicht!
Ok, jetzt haben wir Zwei seiten. Eine Test.htm und eine link.htm.
Nachdem ihr die Datei link.htm gespeichert habt, klickt auf den link bei
der Datei test.htm. Es zuckt kurz, und wir sehen den selben hinhalt wie
eben. Das werden wir jetzt ändern!
<html>
<head>
<title>Neue Seite 2</title>
</head>
<body>
Ich bin Seite 2 ....<br>
<br>
<a href="test.htm">Zurück</a>
</body>
</html>
Speichert diese Datei unter dem Namen link.htm ab! Und siehe da, wir
sehen einmal Neue Seite1 und Neue Seite 2, ebenso hat sich der Linknamen
von Klick mich zu Zurück geändert. Jetzt haben wir zwei Seiten
miteinander verbunden. Macht Spaß, hm?
Ok, das war das Grundwissen wie man einen Link schrfitlich erstellt.
Bilder können auch zu einem link werden. Dazu später mehr!
Einge Tags (Tägs ausgesprochen)
Die Container-Tags
Am häufigsten werde ndie sogenannten Container-Tags verwendet. Diese
Tag-Paare bestehen aus einem Start- und einem Ende-Tag und schließen ein
oder mehrere Textelemente ein. Im Gegensatz zum Start-Tag beinhaltet der
Ende-Tag zusätzlich einen slash "/" (das spricht man "Släsch" aus) Zum
Beispiel:
<html> ... </html>
Diese Tags finden wir immer ganz am Anfang und am Ende eines HTML
Dokuments. Sie schließen das gesamte Dokument ein. Container-Tags können
wiederum andere Tags entahlten.
Die leeren Tags
Wie der Name bereits vermuten lässt, schließen diese HTML Befehle keine
Textelemente ein. Diese Tags treten nicht paarweise auf, sondern stehen
einzeln. Darum werden sie auch manchmal Standalon Tags genannt. Sie
werden vom Browser sofort ausgeführt, z.B.:
<hr> ... <br>
Der Tag für eine Trennlinie (HR = horizontal rule = hrizontale Linie)
bzw. einen weichen Zeilenumbruch (BR = break Umbruch). |
