Direct access to content Direct access to navigation
News4Kids - Nachrichten und Wissen für Kinder und Jugendliche
Suchen

Eine Internetseite selbst herstellen (Teil 2)

PNG - 64.8 kB

4. Juni 2005

Unsere erste Internetseite sah ja noch nicht so toll aus. Darum sollt ihr hier erfahren, wie sie etwas schöner und bunter wird. Außerdem werdet ihr lernen, wie man die für das Internet so wichtigen ‚Links‘ erzeugt.

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.

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.


Eure Meinung dazu:

von Damian 5. September 2016

Echt blöd sehr blöd

von Lea 3. Februar 2015

ich finde diese seite unlustig

von mauskatz 24. Oktober 2014

cooooooooool, auch wenn ich nicht so ganz verstehe wie es geht.

von DAs 29. April 2014

des bringt nichts

von Smeily 28. April 2014

Die seite hat mich voll weiter gebracht:)

von Gummibaer 24. Mai 2013

Dof -,- xd lol

von robert pattinson 26. April 2013

lol find es einfach nur lol

von TSB 31. Juli 2012

alter das is sso coooooooooooooooooooooooool!!!!!!!!!!!!!!!!!!!!!!!!!!

von 321456 7. Juni 2012

hi ich finde diese seite cool

von JOSHY 23. Mai 2012

meine seite ist besser als "facebook"

von ich 16. Mai 2012

hallo und und guten tag diese internet seite fördert die schlauheit

von secretAT 17. März 2012

ich finds cool!!!! UND ES FUNKTIONIERT

von ????? ??? 17. März 2012

War ein bischen schwer...
...ABER GEIL!!!!!!!!!

von Mel ;) 6. Juli 2011

ich krieg dass mit der hintergrund farbe nicht hin !!

von Flo 20. Juni 2011

Ich finde den editor irgendwie nicht... muss man den irgendwie hochladen???

von Meli :) :) 14. April 2011

das ist blöd!! Das geht gar nicht :(

von fafa 16. Januar 2011

probiere es grat aus.

von kakanane 4. August 2010

HI ich habe irgent wie ein problem farbe ist eingetragen nur im browser ist es noch weiß was soll ich machen?????????????????????????????????????

von Benny07 13. Juli 2010

Ist ja cool!!!!!!!!!!!

9. Januar 2010

hmm irgendwi weis ich nich weiter ich habs mit einem anderen Text bearbeitungs programm gearbeitet liegt es daran also beim ersten mal kam ich noch mirt der 2 war dann komplizierter wo kommt der "a" befehl denn hin gut die farbe kann ich ändern aber irgendwi zeigt er die Internet seite nich im Internet browser kann mir jeman helfen

Grüße Melusa

von ceddyced 9. Januar 2010

achso jetzt habe ich es richtig gemacht ich habe nur ein kleinen rechtschreib fehler gemacht oder so was.

von ceddyced 8. Januar 2010

ich komme nicht weiter wieso nicht?das ist mir irgendwie zu schwer.

von Polo 10. Juli 2009

ich finde das echt geilo

von tina( MEIN ECHTER NAME) 19. Juni 2009

WAR VOLL LEICHT!EIMFACH COOOLLL!!!!!

von tina 19. Juni 2009

macht richtig spaß!COOOOOOL!

von Kaddieh 25. Mai 2009

Bei mir klappt garnichts.
Kann mir jemand helfen

von Jack 24. Februar 2009

klappt alles Prima, wenn man so und so schon erfahrung mit Programmierssprachen hat. Naja, wäre toll, wenn ihr die anleitung demnächst weiter führen könntet....

von molch 1. Februar 2009

bei mir klappt der titel nie

von PspFreak 29. Dezember 2008

Ich komme bei dem Text eingeben nicht weiter!Wo soll man das hinschreiben?

29. Dezember 2008

wauuuw echt toll, mavht richtig spaß

von sexy-hexi! 28. Dezember 2008

Hey, könnt ihr mir helfen:
ich habe den ersten teil geschafft, aber es wird nicht abbgebildet, dort wo ich es öffnen sollte!
Bitte helft mir!

von julchen 30. November 2008

ich bin bei den links steckengeblieben weil ichs nich checke wies funktioniert.könnt ihr mir bitte helfen?

von Dennis Gehl (echter Name) 12. November 2008

Es gibt jetzt Teil 3!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

von zet 28. Oktober 2008

wie kann man ’links` nach rechts oder nach links verschieben?

von XXX 12. Oktober 2008

Egal welche farbe ich eingebe es funktioniert nicht.Z.b ich gebe black ein und es kommt gelb raus.
Kann mir einer sagen wieso???

von Lali 9. April 2008

cool es ist ja super ( nicht wirklich aber schon !)

von David 5. April 2008

Alls ich das das aller erste mal saha
hab ich gesagt entlich ist die sucher-rei zuende.
echt so cool

von thi 7. Februar 2008

Du hattest sollten noch ein bild von deinem notepad machen, denn das wurde viel leichter dann sein

von Yannik 4. Januar 2008

Ich habe das alles von Morgends bis Abends
ausgeführt und hoffe es kommt bald der 4Teil kommt.

Bis bald

Yannik

von MaYes 23. Juli 2007

Bei mir klappts toll..
ich hatte sowieso HTML Kenntnisse vorher... aber mit designs und so... naya... danke das ihr diesen HTML Kurs macht ist wirklich super!!! Und ihr erklärts auch mit den Beispielen supiii
bis bald eure MaYes

von Speedy 18. Juni 2007

wie macht man dort spiele rein?

von joshi 11. Februar 2007

bei mir geht das ganich das mit denn farben bei meiner internet seite ich ganichtz auser Meine eigene webseit mehr nich ich gebs bald auf

von Hallo 14. Januar 2007

Toll, habe es aber noch nicht ausprobiert

von melli 12. Dezember 2006

Sehr sehr sehr tolle Seite zum Selberbasteln. Hat mich weitergebracht.

von Turkishboy 25. Mai 2006

Ich finde sowas toll ich bin sehr aufgeregt auf den 3.teil wann kommt der 3.teil raus?

von Jule 23. April 2006

Geht der Kurs bald weiter?

von Barenburgertieger 12. April 2006

Hallo

Ich hab jetz auch eine HP oda naja fast aba das ist so coooool danke.Wann kommt den der dritte teil raus ????

Eine Nachricht, ein Kommentar?


Moderiertes Forum

Sobald wir deinen Kommentar gelesen haben, werden wir ihn zu dem Artikel hinzufügen.

  • (Um einen Absatz einzufügen, einfach eine Zeile frei lassen.)

    Bitte nur sinnvolle Kommentare zum Thema des Artikels. Du darfst deine Meinung frei äußern. Was wir nicht erlauben sind Beschimpfungen anderer Seitenbesucher. Auch Adressdaten Telefonnummern und E-Mail-Adressen werden wir nicht veröffentlichen. Außerdem erlauben wir nur Links zu anderen Kinderseiten.