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.
von
RSS 2.0