HTML - Einführung Teil 1

  • Für all die Leser, die sich erstmals mit dem Quelltext auseinandersetzen und natürlich wissen wollen, was denn die ganzen Befehle in den spitzen Klammern (den tags) bedeuten sollen. Basisstruktur einer Seite, die im Editor erstellt wird und dann als .html oder .htm gespeichert wird (beim Speichern darauf achten, dass Sie es NICHT als Textdatei (.txt) speichern, sondern alle Dateien auswählen und dann eingeben: index.htm oder index.html): <html><head><title>Seitentitel, wie er im Browser sichtbar ist </title></head><body> Hier kommt dann der gesamte sichtbare Inhalt der Webseite hin </body></html> - Anmerkungen dazu: Die gesamten Begriffe kommen aus der (na klar) englischen Sprache, auch die Abkürzungen leiten sich aus der englischen Sprache ab. Die oben gezeigte Struktur ist immer identisch, der individuelle Seiteninhalt ergibt sich aus dem, was Sie zwischen <body> und </body> hineinzaubern. Der / schließt immer einen Befehl ab, so wird der <body>-Bereich eben durch </body> beendet. Diese Spielregeln können Sie sich generell so einprägen. Auf das, was den <meta>- Bereich ausmacht, werde ich in einer späteren Ausgabe mal gesondert eingehen. Da dies für die Gestaltung einer Seite aber sekundär ist, soll es uns heute - zum Beginn unseres Einstiegs - mal nicht belasten. Zwischen <title> und </title> schreiben Sie bitte einen aussagekräftigen Seitentitel hinein. Diesen sehen Sie dann in der Browser-Titelleiste. Benutzen Sie ein frameset, dann ist der Titel eben in dieser frameset-Datei unterzubringen, da in dieser Datei die Seitenaufteilung definiert wird. Die Seitentitel der Einzelseiten, die das frameset ausmachen, treten dann nicht in Erscheinung. So, und nun mal die ersten Basisbefehle im Bereich zwischen <body> und </body>: Vorabbemerkung: Alles einfach dann mal ausprobieren, damit es klar wird und sich verinnerlicht. Dann wird schnell klar, dass das ganze echt nicht so kompliziert ist, wie es auf den ersten Blick ausschaut. Nun denn, also los: Um der Seite eine Hintergrundfarbe oder ein Hintergrundbild zu geben, wird der <body>-Tag (Tag heißen die Befehle, gesprochen "täg") erweitert: <body bgcolor="red"> die Seite hat also einen roten Hintergrund <body bgcolor="#00FF00"> die Seite ist grün, es handelt sich um den RGB-Wert nach dem #-Zeichen. Es können also entweder englische Farbnamen gewählt werden oder der RGB-Wert nach dem # - bitte im Englischen dabei unbedingt auf die richtige Schreibweise achten. Soll ein Hintergrundbild erscheinen, dann den <body>-Tag so erweitern: <body background="bildname.jpg"> oder <body background="bildname.gif"> wobei es sich bei .jpg oder .gif um die zwei wesentlichen Bild-Dateiformate im Internet handelt. .gif ist bei wenigfarbigen Grafiken vorzuziehen, .jpg bei Fotos/Bildern mit vielen Farbnuancen. Hierzu ist ein gutes Bildbearbeitungsprogramm sinnvoll (Photoshop, Paint Shop Pro, oder ähnliche). Die Dateien sollten (zumindest in der Startphase sollten wir dies beachten) alle im gleichen Ordner gespeichert werden. Am besten, Sie legen einen Ordner an "webprojekt" und speichern dort hinein: index.html = das ist die Startseite und dann alle benötigten Grafiken und Bilder (.gif und .jpg). Bitte alles kleinschreiben, dann sollte es keine Probleme geben. Um jetzt das erste Ergebnis, nämlich die farbige Seite oder die Seite mit dem Hintergrund zu sehen, speichern Sie sie im Editor (siehe oben) ab, öffnen den Browser und schauen sich das Ergebnis an, indem Sie die Seite in der Adresszeile aufrufen. Es sollte dann z. B. die leere rote Seite mit der eigenen Überschrift in der Titelzeile des Browsers erscheinen. Oder die Seite mit dem Hintergrundbild. Wobei dieses so oft gekachelt wird, bis der sichtbare Bereich des Bildschirms gefüllt ist. Kachelung bedeutet (wie im heimischen Bad), das Bild wird so oft nebeneinander und untereinander gesetzt, bis der sichtbare Bildschirm gefüllt ist. Um dann z. B. den ersten Text auf der Seite zu sehen, wird der <body>-Tag nochmals erweitert: <body bgcolor="red" text="white"> also: roter Hintergrund, weiße Schrift. Um allerdings Schrift zu sehen, muss natürlich erstmal etwas geschrieben werden. Und zwar in den Bereich zwischen <body> und </body>:<html><head><title> Die erste Webseite von Vorname Nachname </title></head><body bgcolor="red" text="white"> Dieses ist der erste Gehversuch von mir, eine html-Seite zu erstellen. </body></html> Wenn Sie dies ausprobieren, dann sollten Sie jetzt eine rote Seite sehen, die Überschrift in der Browser-Titelzeile und auf dem roten Hintergrund den oben geschrieben Satz "Dieses ist ....". Wenn Sie sich jetzt diesen Aufbau einprägen und somit verinnerlichen, dann ist der erste Basisschritt getan. Denn die Struktur ist dann immer identisch. Und jetzt gilt es: Das Ganze mal mit unterschiedlichen Dateinamen abspeichern, verschiedene Farben oder Hintergrundbilder wählen und unterschiedliche Texte und auch Titelzeilen schreiben. Wenn das geklappt hat, dann ist die erste Hürde genommen. Die weiteren Hürden werden dann in den kommenden Teilen zu nehmen sein. Also viel Spaß beim ersten Umsetzen.