Im ersten Teil unseres HTML-Kurses habt ihr ja schon gelernt, wie man eine ganz einfache Internetseite selbst machen kann. Ihr habt erfahren, dass sie genau wie Menschen einen Kopf (Head) und einen Körper (Body) hat. Außerdem wisst ihr auch, was HTML eigentlich bedeutet und wie man die Befehle in den Computer eingeben kann.
Das ist alles sehr wichtig für das, was wir nun machen wollen. Wer von euch den ersten Teil also noch nicht kennt, sollte lieber erstmal dort anfangen. Hier geht’s zum ersten Teil des HTML-Kurses.
Auch Internetseiten brauchen einen Namen
Zuerst müsst ihr natürlich unsere HTML-Seite wieder mit dem „Editor“ von Windows öffnen. Damit können wir sie dann bearbeiten. Klickt also auf „Start“, geht auf „Programme“, dann auf „Zubehör“ und klickt hier auf „Editor“. Dann müsst ihr nur noch im Menü „Datei“ - „Öffnen“ auswählen und die HTML-Seite doppelt anklicken.
Genau wie ihr einen Namen habt, sollte auch jede Internetseite einen besitzen, damit man sie erkennen kann. Den Namen trägt man aber nicht am Körper - man weiß ihn einfach nur. Deshalb tragen wir den Namen unserer Internetseite auch nicht im Körper (Body) ein, sondern im Kopf (Head).
Im Moment steht dort ja noch nichts. Deshalb klickt ihr am besten einfach mit der Maus hinter das
und drückt „Enter“. In die leere Zeile gebt ihr nun einfach das hier ein:
Ok, das sieht aus, als konnte jemand das Wort „Titel“ nicht richtig schreiben. Auf Englisch wird es aber wirklich so geschrieben.
Direkt hinter das "größer als" Zeichen schreibt ihr nun einfach den Namen eurer Seite - also zum Beispiel „Tims Internetseite“. Danach müssen wir dem Computer wieder sagen, dass hier der Titel zuende ist. Das machen wir, indem wir den gleichen Befehl wie am Anfang wieder hinschreiben, nur diesmal mit dem / Zeichen. Das sieht dann insgesamt so aus:
Wenn ihr nun die Seite abspeichert - ihr wisst schon, mit dem .html am Ende des Namens - dann könnt ihr sie mit einem Doppelklick im Internetbrowser anzeigen lassen. Der Name erscheint nun ganz oben in dem blauen Rahmen. Genau so könnt ihr euch übrigens das Ergebnis eurer Arbeit nach jedem Abschnitt unseres Kurses anzeigen lassen.
Farbe muss her!
Damit eure Internetseite nicht mehr so einen langweiligen weißen Hintergrund hat, wollen wir ihn jetzt schön bunt machen. Das geht ganz einfach.
Mit dem Body-Befehl habt ihr dem Computer ja gesagt, dass dort der „Körper“ eurer Internetseite beginnt. Nur wie soll der aussehen? Sagt man dazu nichts, ist er eben einfach nur weiß. Eine andere Farbe bekommt die Seite, wenn wir vor dem "größer als" Zeichen des Body-Befehls ein Leerzeichen einfügen und dann den Befehl: bgcolor="red". Also:
„Bgcolor“ steht für BackGroundColor. Das ist natürlich Englisch und bedeutet Hintergrundfarbe. Nach dem Istgleich tragt ihr dann zwischen den Anführungsstrichen einfach eure Wunschfarbe ein. Wichtig ist nur, dass ihr das auch wieder auf Englisch macht.
Wer sich damit noch nicht so auskennt, hier ein paar Vorschläge: braun=maroon, grün=green, lila=purple, rot=red, gelb=yellow, blau=blue.
Jetzt haben wir einen schönen bunten Hintergrund für die Internetseite. Die Schrift sieht aber immer noch recht langweilig aus, kann man da nichts machen? Na klar und so geht’s:
Ihr müsst den Cursor vor euren Text setzen und dann direkt davor diesen Befehl eingeben:
„Font“ bedeutet Schriftart. Das heißt, dass ihr hiermit sagt, wie die Schriftart eures Textes aussehen soll. Mit color="white" sagt ihr zum Beispiel, dass der Text weiss sein soll. Natürlich könnt ihr hier aber auch ganz viele andere Farben nehmen. Einige Vorschläge habt ihr ja bereits oben bekommen.
Am Ende eures Textes oder an der Stelle, wo er mit einer anderen Farbe weitergehen soll, müsst ihr natürlich wieder den Befehl mit dem / Zeichen hinschreiben. Insgesamt könnte das bei euch dann so aussehen:
Den Text verschönern
Wenn wir gerade dabei sind den Text schöner zu machen, kann ich euch ja auch noch ein paar andere Tricks verraten. Mit HTML kann man das Aussehen der Texte auf dem Bildschirm ganz leicht verändern. Man muss nur ein paar ganz kurze Befehle kennen. Diese werden dann vor und hinter den jeweiligen Text geschrieben:
Für Überschriften besonders praktisch ist der Befehl h1-6 (h für headline, auf deutsch: Überschrift). Je nachdem, was ihr nach dem h für eine Zahl wählt, wird dann die Überschrift entweder groß (1), mittelgroß (3) oder klein (6) dargestellt. Natürlich funktionieren die 2, 4 und 5 auch. Probiert die Möglichkeiten einfach mal aus. In unserem Beispiel sieht das dann so aus:
Wenn es euch stört, dass der Text immer nur ganz am linken Rand steht, könnt ihr das mit dem „center“ (Mitte) Befehl ändern. Vor und hinter euren Text geschrieben, sorgt er dafür, dass er immer genau in der Mitte des Bildschirms erscheint.
Wie wäre es, wenn ihr mit dem, was ihr jetzt bereits wisst, einfach mal all das aufschreibt, was auf eurer Internetseite stehen soll? Also die Überschrift und einen kleinen Text über euch oder eure Internetseite. Ihr könnt dann all die Befehle, um den Text zu gestalten, gleich mal ausprobieren.
Aus dem ersten Teil des HTML-Kruses wisst ihr ja bereits, dass ihr mit dem Break-Befehl an jeder Stelle im Text in die nächste Zeile wechseln kann und man mit zwei Break-Befehlen eine leere Zeile erzeugt. Hier seht ihr nochmal wie der Break-Befehl aussieht:
Ein einfacher Text könnte in HTML dann so aussehen:
Durch den Center-Befehl erscheint er in der Mitte des Bildschirms und die Break-Befehle sorgen dafür, dass er manchmal in der nächsten Zeile weiter geht. Das ist wichtig, weil sich Texte am Bildschirm leichter lesen lassen, wenn sie nicht sehr breit sind.
Links setzen
Zuletzt wird es etwas komplizierter, doch wenn ihr bis hierhin alles verstanden habt, werdet ihr auch das schaffen.
Wir wollen nun einen Link setzen. Das bedeutet, wir möchten eure Seite mit einer anderen verbinden. Wenn dann jemand auf ein bestimmtes Wort auf eurer Internetseite klickt, wird er automatisch zu der zweiten Seite geleitet.
Das ist eigentlich der wichtigste Befehl, den es im ganzen Internet gibt. „net“ steht ja für Netz und das entsteht erst dadurch, dass Menschen ihre Seite mit vielen anderen verbinden. So kommt man ganz leicht von einer Seite, zu vielen anderen, die ähnliche Informationen bieten.
Los geht’s! Der Befehl für Links heißt einfach „a“. Das a steht für Anchor und das heißt übersetzt (Schiffs-)Anker. Um dem Computer mitzuteilen, wo er so zusagen den Anker auswerfen soll, müssen wir ihm noch sagen, zu welcher Seite er springen soll. Das machen wir mit href=" http://www.luises-internetseite.de/ "
Dabei steht das href für hyper reference, doch eigentlich ist das nicht so wichtig. Anstatt luises-internetseite schreibt ihr natürlich einfach die Seite rein, die ihr wollt. Nach dem "größer als" Zeichen kommt dann der Text hin, der als Link erscheinen soll und dann natürlich auch wieder der Befehl mit dem /. Fertig sieht das dann so ähnlich wie hier aus:
Wir haben unseren Text, der in der Mitte steht. Dann kommt eine Freizeile, die wir mit den zwei br Befehlen machen. Danach kommt unser Link zu der Seite www.news4kids.de , anschließend wieder eine Leerzeile und ein weiterer Link. Probiert es einfach mal aus. Anfangs ist es vielleicht noch etwas kompliziert, aber später geht es dann ganz leicht.
Jetzt könnt ihr eure Seite wieder abspeichern. Ganz wichtig: denkt an das .html am Ende des Dateinamens. Wenn ihr sie nun doppelt anklickt, wird sie automatisch mit dem Internetbrowser geöffnet. Wenn ihr alles richtig gemacht habt, sieht eure Seite nun so ähnlich aus wie diese hier. Das ist doch wirklich schon ein großer Fortschritt im Vergleich zu unserer Seite nach dem ersten HTML-Kurs.
Im dritten Teil unseres HTML-Kurses könnt ihr eure Internetseite noch schöner machen.
von
RSS 2.0