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

Eine Internetseite selbst herstellen (Teil 3)

PNG - 67 kB

20. August 2006

Im dritten Teil des News4Kids HTML-Kurses lernst du, wie du deine E-Mail-Adresse und ein Bild auf die Webseite stellen kannst.

Jetzt wird’s kompliziert. Aber keine Angst, wir fangen ganz leicht an. Wichtig ist auf jeden Fall, dass du Teil 1 und Teil 2 unseres HTML-Kurses schon gemacht hast. Nur dann kennst du dich nämlich schon genug aus.

Jetzt geht’s los: Wir wollen E-Mails!

Jetzt hat man schon eine eigene Internetseite und erfährt gar nicht, wie sie anderen gefällt. Aber da kann man was machen. Wir bauen einfach deine E-Mail-Adresse ein.

Doch vorher noch ein kleiner Hinweis: Wenn du deine E-Mail-Adresse ins Internet stellst, kann sie natürlich auch jeder sehen. Dann bekommst du vielleicht auch Mails von Leuten, die du gar nicht kennst. Du solltest auf jeden Fall deine Eltern fragen, ob du das darfst. Sie können dir dann auch gleich erklären, was für doofe Mails man manchmal von fremden Menschen bekommen kann.

Zuerst musst du 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.

Zuletzt hatten wir ja mit dem Anker-Befehl (a) unsere Links erzeugt. Damit sie in der Mitte der Seite stehen, haben wir den Center-Befehl (center) davor und dahinter geschrieben. So sieht das etwa aus:

Als nächstes forderst du die Seitenbesucher jetzt auf, dir zu schreiben. Du könntest zum Beispiel eingeben: „Wenn du mir eine E-Mail schreiben willst, kannst du auf diesen Link klicken.“ Aus dem Wort „Link“ machen wir einen Link zu deiner E-Mail-Adresse. Dafür gibst du vor dem Wort das hier ein:

Nach dem Link kommt natürlich wieder der a-Befehl mit dem / davor.

Neu ist an dieser Form eines Links, dass du anstatt einer Internetadresse deine E-Mail-Adresse zwischen die Anführungszeichen schreibst. Vor die E-Mail-Adresse kommt noch der Befehl: „mailto:“. Damit sagen wir dem Internetbrowser, dass er das E-Mail-Programm starten soll, sobald jemand auf den Link klickt. Mit dem Center-Befehl können wir alles wieder an der Mitte ausrichten. So sieht es fertig aus:

Der HTML-Code:

Und die Webseite:

Endlich ein Bild auf der Seite

Jetzt wollen wir unserer Webseite endlich mal ein Bild verpassen. Doch dafür musst du mal wieder ein paar Sachen wissen. Wenn du bereits ein Bild hast, das auch nicht zu groß ist, kannst du einfach da weiterlesen, wo der Text wieder größer wird.

Grafiken und Fotos sind oftmals ziemlich groß. Nicht selten haben sie eine Dateigröße von mehreren Megabyte. Zum Vergleich: Unsere HTML-Datei ist im Moment nur wenige Kilobyte groß. Für das Internet ist so eine große Grafikdatei gar nicht gut geeignet, denn es dauert sehr lange, bis sie übertragen wurde. Du musst Grafiken für das Internet daher oftmals verkleinern.

Dafür gibt es mehrere Möglichkeiten. Zuerst solltest du die Grafik mit einem Malprogramm öffnen. Bei Windows ist ja schon „Paint“ dabei. Das ist aber nicht wirklich gut. Probiere doch stattdessen mal „Tuxpaint“. Das ist extra für Kinder gemacht, ist kostenlos, sieht lustig aus und kann eine Menge coole Sachen. Hier kannst du es dir runterladen.

Wenn du dein Bild mit dem Malprogramm geladen hast, solltest du dir überlegen, wie breit es auf dem Bildschirm sein soll. Beim Computer misst man das in Pixeln.

Ein Pixel ist ein winziges Pünktchen auf dem Bildschirm. Ein komplettes Bild besteht aus tausenden dieser kleinen Pünktchen. Ein ganzer Bildschirm hat häufig eine Breite von 1024 Pixeln. Wenn dein Bild also nur ein Zehntel so groß sein soll, wie der ganze Bildschirm, so musst du 1024 durch 10 teilen. Es muss dann also eine Breite von 102 Pixeln haben.

In deinem Malprogramm findest du irgendwo die Möglichkeit, die Bildgröße zu ändern. Da gibst du dann bei „Breite“ deine Wunschbreite ein - zum Beispiel: 102 Pixel. Jetzt musst du das verkleinerte Bild noch abspeichern. Dafür wählst du im Menü „Speichern unter“ oder „Speichern als“ aus. Dann wählst du als Grafikformat entweder jpg, gif oder png. Nur diese Grafikformate sind für das Internet geeignet!

Deine Grafikdatei muss sich jetzt an der gleichen Stelle auf deinem Computer befinden wie unsere HTML-Datei. Ist das nicht der Fall, wird sie nämlich nicht gefunden. Jetzt musst du dir überlegen, wo du das Bild auf deiner Seite haben möchtest. Ich schlage vor, es erst mal neben unseren Text zu stellen.

Den Befehl zum Anzeigen des Bildes schreibst du einfach direkt vor deinen Text, er lautet IMG. IMG ist die Abkürzung von Image (englisch für „Bild“). Aber natürlich gehört noch viel mehr dazu, wie du an dem fertigen Code sehen kannst:

Mit grün ist der IMG-Befehl gekennzeichnet. Danach sagen wir dem Browser, wo er das Bild findet und wie es heißt. Das geht mit dem Befehl SRC. SRC heißt Source (englisch für Quelle). In die Anführungszeichen kommt der Dateiname der Grafik. In der Abbildung ist dieser Teil mit rot gekennzeichnet.

Nun müssen wir dem Internetbrowser sagen, wie groß das Bild ist (blauer Bereich). „Width“ bedeutet dabei „Breite“ und „Height“ bedeutet „Höhe“. Wenn du hier die falschen Werte angibst, wird die Grafik auch in einer falschen Größe angezeigt. Manchmal ist das ganz nützlich, weil du Grafiken so zum Beispiel ganz einfach kleiner darstellen lassen kannst.

Wie groß deine Grafik ist, findest du übrigens heraus, indem du mit dem Mauszeiger auf das Dateisymbol der Grafik zeigst und eine Sekunde wartest. Es erscheint ein kleiner Hinweis und ganz oben die Größe der Grafik in Pixeln.

Gelb markiert ist der Befehl „align“. Damit richten wir unser Bild aus. Wir sagen also dem Browser, wo er es anzeigen soll. Möglich ist dabei „left“ (links), „right“ (rechts) und „center“ (in der Mitte). Der Text wird dann stets auf der jeweils anderen Seite angezeigt.

Wenn es zwischen dem Bild und dem Text keinen Abstand gäbe, würde es ziemlich doof aussehen. Daher wird dieser Zwischenraum mit „hspace“ (Abstand links und rechts) und „vspace“ (Abstand oben und unten) festgelegt (brauner Bereich). Mit dem „alt“-Befehl wird schließlich noch angegeben, welcher Text angezeigt werden soll, wenn man mit dem Mauszeiger auf das Bild zeigt (lila Bereich).

Ich habe einfach mal die Startseite von news4kids als Grafik genommen und diese links (align=„left“) angeordnet. Sieht doch schon ganz nett aus, oder? Bei dir könnte das zum Beispiel ein Foto sein oder ein selbstgemaltes Bild.

Hier ist der komplette Code, wie er bei mir aussieht. Bei dir kann es natürlich etwas anders aussehen. Du kannst dir die komplette Datei auch über den Link am Artikelende herunterladen.

Im vierten Teil unseres HTML-Kurses lernst du, was man tolles mit Tabellen machen kann. Das klingt vielleicht nicht sehr aufregend, ist aber sehr wichtig und macht richtig professionelle Seiten erst möglich.

beigefügte Dokumente


Eure Meinung dazu:

von PETER 7. Mai 2015

HALLO DEI SEITE IST SEHR GUT %%%%%%%

von klaem 9. März 2015

ich finde es nicht ansprechend es ist sehr lw aber ihr könnt mir einen Gefallen tun und euch hobbys uchen

von Kekse! 19. Juli 2014

Einerseits finde ich diese Seite ganz informativ, andererseits erklärt sie nur Dinge die kein Mensch mehr benutzt. Heute benutzt niemand mehr Tabellen, jeder benutzt div-Container. Tabellen kann man überhaupt nicht mehr benutzen, wenn man an "responsive webdesign" denkt, da diese nur statisch sind. Ich empfehle Seiten wie selfhtml. Mit dem hier brauch man überhaupt nicht an Media Queries zu denken. Also bringt euch besseres als das hier bei und lernt HTML5 und CSS3 Media Queries vernünftig, nicht hier!

von Jack Baumann 14. März 2014

tolle seite und tolle idee von Jack baumann (6Jahre)

von Benny07 13. Juli 2010

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

von Sinem 3. September 2009

hi!! tolles thema. wann kommt der 4.Teil???

von Pascal 30. August 2009

Hallo Carsten echt tolle Seite und coole Anleitungen aber wann kommt der 4te Teil?
Ich würde am Liebsten Lernen wie CSS geht
und wie man Ein Register und ein Login Formular erstellt ich weiß aber auch das es schwieriger wird da es mit PHP gemacht wird.
Achja ich möchte dich noch etwas fragen aber das mache ich per Email!
LG Pascal

von time_wap 28. August 2009

http://de.selfhtml.org/ hier findet ihr auch noch mehr informationen, is aber alles ziemliches fachchinesisch ;-)

von finstervogel 15. Juni 2009

Geht es noch irgendwann weiter?

von stella hudgson 15. Juni 2009

die seite ist gut uch finde aber das internet 1 mal in der woche benut6z werden.

von Sprotte 7. Juni 2009

Alles geschaft bis auf die bilder
kann mir denn niemand erklären wie das geht
Riiiiiiiiisen Lob an die die das erklärt haben.
Und Wann kommt Teil 4 endlich?

von Sprotte 16. April 2009

kriege keine bilder in das Programm habe es extra runter geladen!
kann mir jemand "helfen"?
Dann habe ich noch eine Frage:
Wann kommt Teil 4?
Möchte die Seite gerne ins Internet stellen.Der Text war bisher sehr gut erklärt.

von Hexe2104 19. Februar 2009

wann kommt den endlich teil 4???
ich hoffe es kommt bald... ich freu mich schon drauf die seite endlich ins internet zu stellen :) ;) :D

und zum schluss noch ein lob an alle die, die teil eins bis drei erstellt ausgedacht und eingestellt haben!!!!!
RIESEN LOB!!!

von Dilara38 10. Februar 2009

bei mir geht es nicht alles ist im deskop geschpeichert aber im internet ist nichts geschpeichert ich finde es doof

von Freak 16. Januar 2009

hab jetzt ein Viedeo eingebettet auf meiner Website!!!!!voll cool

von king bob 7. Januar 2009

echt toll aber bei mir kommen immer so par//<>> par >>// dies ist die selbst....

von Mariella 15. Dezember 2008

Boah ich warte schon seit zwei Jahren auf den vierten teil dieses kurses,wann kommt er endich raus???!!!
Und ach übrigens der Tipp von Jojo 13 war echt hilfreich...Danke!

von Das Phantom:-) 28. November 2008

Wann kommt Teil 4? Wäre schade wenn nichts mehr käme, weil ihr erklärt das echt toll!

von icnimand 12. November 2008

wie bekomme ich die seite ins internet

von ich 12. November 2008

wie findet man teil 4 ?

von niemand 11. November 2008

hört mal zu: die site steht noch net im internet.dazu muss man nen server hocladen

von Sisa 23. Oktober 2008

Ich finde es echt cool macht weiter so
Gruß Sisa

von Kevinkleingingallein... 4. Oktober 2008

Wie stell ich das ins Internet? Meine freunde können denn nicht sehen und wann kommt der 4. teil?

von Nattelmann 30. September 2008

Ich möchte wissen ob es noch einen vierten Teil gibt?
LG.Nattm

von Mingi 27. September 2008

Ich habe jetzt auch eine Webseite ich habe viel gelernt.

von shorty 7. September 2008

könnt ihr mir helfen wie bekomm ich des hin das ich den link von meiner homepage an andere schicken kann????weil bei mir steht immer nur des hier da

C:\Dokumente und Einstellungen\Besitzer\Desktop\homepage.html

und des geht dann ned wenn ich des an andere schicken möchte.

bitte um hilfe

von sa. si 31. Juli 2008

schön und gut aber das mit den fotos geht ja nicht wir sietzen seit tagen daran und es klapt nicht

von Isi 6. Juli 2008

Cool, freu mich schon auf nächsten Teil.

von kai97 16. Juni 2008

ist das kostenlos? Ich würd das gern machen... wenn es kostenlos ist!!!

von Dominik 20. April 2008

Wie kann man sie veröffentlichen?

von Smartie 17. April 2008

ich würde gerne Videos auf meine Seite stellen...^^

von sarah lenz-grang 17. März 2008

cool ich brauche nix mehr echt super
1+ :)

von KEVIN 15. März 2008

Also es ist sehr gut ich habs selbst hingekriegt es war sehr leicht und jetzt hab ich mir eine liste von meinen freunden
gemacht ich habe bis jetzt 50 freunde eingetragen

von Nazge 27. Februar 2008

der zweite Link funzt bei mir nicht

von Erencan 22. Februar 2008

Wann kommt den der nächste Teil?

von crissi 1. Februar 2008

fand die teile 1-3 klasse!!!!!!!!!!
wo, wann geht es mit der Tabelle weiter?

von Julia 19. Dezember 2007

Ich habe aber keine EmailAdresse kann ich trotzdem eine eigene Seite fertig machen.
Bitte helft mir

von mili 18. Dezember 2007

wie tut man dann eine seite veröfentlichen??

von Tim 22. November 2007

könnt ihr mir das auch erklären mit CSS ?

von Tim 15. November 2007

Heißt das man muss auf den nächsten HTML-Kurs warten ?

von Carsten (News4Kids) 14. November 2007

An LoL: Das mit den Downloads ist einfach. Du legst die Download-Datei einfach im gleichen Verzeichnis wie deine HTML-Datei ab. Dann verlinkst du die Datei auf deiner HTML-Seite so: < a href = "name_deiner_download-datei.exe" >Bezeichnung für deine Download-Datei< /a> Fertig!

An Tim: Ließ dir einfach diesen Artikel durch.

von Tim 14. November 2007

Hallo ich hätte noch eine Frage bei der Startseite da steht doch immer Startseite Und Downloads und so können sie mir das erklären ?

von Tim 14. November 2007

Hallo ich habe eine Frage wie kann ich ein
Bild auf meine Seite stellen ?

von LoL 9. November 2007

Hallo ,Ich will heute mal 2 Fragen stellen 1. Wie Kann ich Downloads auf meine Seite machen ? 2.Wie kann ich ein Registrier Formula in meine seite erstellen , ich meine es so : Das ei mir sich jemand einlogen kann und sich Registriteren kann und dan eine auto. mail mit seinem Passwort und Benutzernamen bekommt !

Danke im Voraus !

PS:Diese Seite ist echt Cool !

von Carsten (News4Kids) 5. November 2007

Hallo Pascal. Ich kenne mich mit Tuxpaint auch nicht so aus. Aber Tuxpaint speichert die Bilder immer in diesem Ordner:

C:\Dokumente und Einstellungen\Nutzernamen\ Anwendungsdaten\Tuxpaint\saved

Dort müsstest du also deine Bilder finden. Du kannst sie dann einfach in den Ordner "Eigene Bilder" kopieren oder verschieben.

von Pascal 4. November 2007

Ich brauche Hilfe Bei TuxPaint! Ich schaffe es nicht das Bild irgentwie zu "Eigene Bilder" zu tun! Aber sonst kann ich es nicht in meine Website stellen! Was soll ich machen?

von Der Suchende, nach Hilfe 6. Oktober 2007

Bei mir funktioniert das Bild nicht. Könnt ihr mir helfen?

von LiieS 4. Oktober 2007

Echt toll :)

Mit dem Server, das ist nicht so einfach. Aber vielleicht schafft ihr es ja. Ich hab es auf jeden Fall fertiggebracht. ;)

Kompliment!

von kevin 28. September 2007

ich habe mal ne frage ich hab ja alles igemacht weiß jetzt nur net weiter geht ob mann so ne leiste macht wo die ganzen links sind oder so frinde es sehr klasse habe schon so viele pagen ausprobirt es geht nix richtig ich möchte ja php habe ist aber zu teueer nen nen server

von Schnecke 24. September 2007

Wie stelle ich die Seite ins Internet?

von Der Net Freak 16. September 2007

Hi Wow echt cool ich habe jetzt eine eigene Seite das is voll cool

und alles ohne kosten !

das siht man nicht jeden Tag

vielen Dank

von Schnecke 30. August 2007

Könntet ihr nicht einen 4.teil machen???

von Bart Simpson 19. August 2007

ist alles supi aber kanst du mier sagen wie z.b meine kollegen die internettseite aufrufen können????

von julimio 18. August 2007

Ich möchte meine FERTIGE Seite jetzt gerne KOSTENLOS ins Internet stellen, wie macht man das?? Es wäre toll, wenn dies im Teil 4 vorkommen würde, weil es, wie gesagt, echt dringend ist. Ich möchte sie nämlich spätestens im Winter im Netz haben, weil ich lange dran gearbeitet habe und sie endlich fertig ist, doch ich kann sie nicht ins Netz stellen, also bitte im 4. Teil erklären, wie das geht, aber bitte, wie es KOSTENLOS geht!! Danke lg

von Mareike 30. Juli 2007

hallo!

erst einmal, ich finde die idee mit dem kurs echt toll.

ich hab vorhin alles gemacht, es hat auch eigentlich alles geklappt, nur beim bild einfügen kam an stelle des bildes in der echten oberen ecke ein rotes kreuz.

wo war mein fehler??

bitte hilf mir!

von Lustigo 3. Juli 2007

Ich habe die Seite von den internauten empfehlt bekommen aber ich habe 1Frage:
Woher bekommt man eine KOSTENLOSE Hompage bzw. Website?

von Speedy 25. Juni 2007

meine Internetseite funktioniert nicht.warum?da steht immer"Die seite kann nicht angezeigt werden"

von speedy 20. Juni 2007

Wie macht man spiele?

von Carsten (News4Kids) 27. Mai 2007

Hallo Lisa. Genau wie du es geschrieben hast, wirds gemacht. Du nimmst einfach deine Startseite - als Grundgerüst - änderst die Inhalt und speicherst das unter einem anderen Namen ab (z.B. seite2.html). Dann verlinkst du von der Startseite auf die neue Datei und umgekehrt natürlich auch. Schon hast du eine Startseite und eine weitere Unterseite. So kannst du das mit ganz vielen Unterseiten machen.

von Lisa 27. Mai 2007

also ich fänds gut, wenn ihr zeigt wie man noch andere Seiten macht...also bisher hat man ja sozusagen nur eine Startseite...oder macht man da einfach eine neue und verlinkt das nur? (hoffe ihr wisst, was ich damit meine..) und was über banner wär mal cool...
Naja, ansonsten kann ich nur sagen super Idee und macht weiter so!!!

von Mars 18. Mai 2007

Hallo

Ich möchte gerne lehrnen wie man ein Gästebuch erstellt,wie man schriften verändern kann!.Es were net wenn es bald kommt es ist zimlich nötig.

von Carsten (News4Kids) 9. Mai 2007

Hallo!

Viele von euch wollten ja schon wissen, wann endlich der nächste Teil erscheint. Im Moment gibts leider sehr viel anderes zu tun. Aber ich verspreche, dass es diesen Sommer sein wird. Wenn ihr wollt, könnt ihr gern schonmal darüber abstimmen, was ihr dann am liebsten lernen wollt. Schreibt es einfach hierhin.

von nini 9. Mai 2007

4. Teil?
wann kommt der raus???

von SkyWorker 7. Mai 2007

alles super aber wann kommt der 4 teil raus

von nono 3. März 2007

Super diese Seite man erfährt viel.

von Carsten (News4Kids) 22. Februar 2007

Da hast du auch Recht! Wenn ihr die Seite ins Internet stellt, solltet ihr besser keine E-Mail Adresse angeben. In unserem Kurs wollen wir aber wenigstens zeigen, wie es überhaupt geht.

von Torben 22. Februar 2007

Ich dachte, man soll seine E-Mail-Adresse als Kind nicht im Internet bekannt geben.

von michi 17. Dezember 2006

schon cool
ader meine seite ist für andere nich aufrufbar

von Nina 26. Oktober 2006

Macht viel Spass, aber wann geht’s endlich weiter?????

von Titati 23. Oktober 2006

geht! Ein bisschen aufwendig

von Vali 14. Oktober 2006

Ich finde das toll das mann auch mal HP
machen kann.

von jli 10. September 2006

Ich finde es gut, dass ihr einem hier so etwas zeigt, aber bei mir st das Bild irgendwie nie zu sehen, da ist immer nur eine Umrandung mit dem Text...

von Jojo13 7. September 2006

Hey das ist super,es funktioniert,aber eigentlich kann nur ich meine Internetseite anschauen! :-(

Uebrigens habe ich noch einen coolen Tipp:
http://www.bambusratte.com/htmlcodes.php

Das sind noch ein paar verscoenerungen fuer deine Website!!!!!!

von lieschen 31. August 2006

hey, echt cool. aber wenn ich jetzt andern leuten diese adresse geben, können sie meine seite dann sehen??? lg lieschen

von computerfreak 29. August 2006

ja voll cool wann kommt der 4 teil ich hoffe in ein paar tagen!!!

von Gorgon der Schreckliche 21. August 2006

Äh, echt geil, selbst ich Euer "Gorgon" konnte etwas lernen...

von Sämi 20. August 2006

Jeah, voll cool habe alles schon ausprobiert funktioniert supper!!!

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.