Homepageerstellung mit HTML - Kapitel 3 - Lernstunde

Guten Tag!
Nun beginne ich mal mit dem dritten Kapitel der Lernstunde in HTML für die Website/Homepagegestaltung, die ihr dann am besten lernt und hoffentlich schon bald selbst beherrscht! Ich nutze das Konzept aus den ersten beiden Kapiteln mit den einzelnen Schritten auch hier weiter, und hoffe, dass ihr gut zurecht kommt!

Schritt 1:
Wie schon in Kapitel zwei geschrieben gibt es eine Möglichkeit einen Hintergrund der Website mit HTML einzustellen! Dort hatte ich bereits eine Möglichkeit zum Einstellen eines einfarbigen Hintergrundes und eine Möglichkeit zum einfügen eines Hintergrundbildes gezeigt! Dort hatte ich auch bereits angekündigt, dass es für das Hintergrundbild noch eine weitere mir bekannte Methode gibt, die ich der aus dem 2. Kapitel vorziehe!

Hintergrundbild mit HTML (Methode zwei; einfach)
Diese Möglichkeit besteht natürlich wie alles im HTML Code aus Tags (Befehlen)!

HTML Code
<body background="URL">
Der Body Background Tag zeigt, dass etwas an dem Hintergrund geändert werden soll! Background kommt ja auch aus dem Englischen und heißt übersetzt "Hintergrund", woher sich das alles herleiten lässt!
Anschließend kommt nach dem "=" der Link zu dem Hochgeladenen Bild
(siehe Beschreibung zum Hochladen in Kapitel 2) in die Anführungszeichen! Wichtig ist, dass alles so übernommen wird, nur statt der URL wird der Link in die Anführungszeichen gesetzt/eingefügt!

Im Beispiel mit dem Simpsons Hintergrund würde das so aussehen:

<body background="http://members.tripod.com/~bramdb/wolken.gif">

An den Eigenschaften ändert sich nichts, und ihr müsst alles wie schon in Kapitel 2 geschrieben beachten! So kann man mit dieser Methode auch nicht das kacheln des Bildes verhindern!

Probiert es am besten einfach selbst mit dem Editor aus! Wichtig sind natürlich auch die Befehle HTML und Body, die in der Websitegestaltung nicht fehlen dürfen, da es sonst nicht funktioniert (siehe Kapitel 1).

Schritt 2:
Nachdem wir uns dem Hintergrund der Website zugewendet haben, möchte ich nun das Einfügen von Bildern ansprechen!
Dafür habe ich selbstverständlich auch wieder neue Tags, die ich nun erst einmal erkläre, damit ihr das ganze auch versteht! Denn ohne die Bedeutung zu wissen, wird der Rest sehr schwer! Es sind alles Tags, die sich nur mit dem Einfügen der Bilder beschäftigen und auch zum Formatieren der Bilder notwendig sind, falls gewünscht!

Bilder Tags (Befehle, die zum Einfügen von Bildern sehr wichtig sind)

img - Bild
src - Bildquelle
height - Höhe des Bildes
width - Breite des Bildes
border - Rahmen des Bildes
align - Ausrichtung des Bildes
alt - Alternativ, falls das Bild aus irgendeinem Grund nicht im Browser erscheint, erscheint eine Nachricht, die man mit dem Befehl "alt" eingibt!

Wie man auch schon in den vorherigen Kapiteln der Homepagegestaltung per HTML gemerkt hat, hat das ganze wirklich sehr viel mit der englischen Sprache zu tun! Denn daher leiten sich die ganzen Begriffe (Tags) aus abkürzungen der Englischen wörter ab (Bsp. img=image=Bild)! Somit kann Englisch bei der Gestaltung einer Website auf keinen Fall schaden!

So nun beginne ich mit dem HTML Befehl zum Einfügen eines Bildes ohne weitere Formatierung (Rahmen, Ausrichtung, Größe, Alternatvi)!

HTML Code Bild einfügen o. Formatierung

<img src="URL.jpg">

Die Tags sind ja oben schon übersetzt und die Bedeutung erklärt sich denk ich mal von selbst! Wenn nicht und wenn ihr noch Fragen habt, könnt ihr sie immer jederzeit im Thread stellen!

Nun müsst ihr ganz einfach den Befehl "URL.jpg" gegen den Link zu eurem Bild, welches ihr einfügen wollt, ersetzen! Diesen Link fügt ihr dann in die Anführungszeichen ein! Weitere Infos, wie ihr euer Bild hochladet, erhaltet ihr im Kapitel 2!

Dann würde das ganze noch einmal mit dem Simpsonshintergrund mit den Wolken so im HTML Code aussehen:

Beispiel HTML Code Bild Simpsons o. Formatierung

<img src="http://members.tripod.com/~bramdb/wolken.gif">

Probiert es wieder am besten mit dem Editor und den bereits vorhanden HTML Kenntnissen aus! Bei Fragen und Problemen stehe ich jederzeit gerne zur Verfügung!

Nun könnt ihr das ganze natürlich auch noch mit den o.g. Tags (Befehlen) Formatieren, sprich einen Rahmen hinzufügen, eine Alternativmöglichkeit auswählen, eine Größe bestimmen etc.!

Dieses macht ich auch ganz einfach:

Ihr beginnt wie bei dem normalen einfügen eines Bildes:

<img src="URL.jpg

Nun kommt kein Anführungszeichen, sondern der/die gewünschten Formatierungstag!

So sieht das ganze dann im HTML Code aus:

<img src="URL.jpg height="40" width="80" alt "Alternativ">

Im Beispiel für das Simpsonsbild könnte das ganze dann so aussehen:

Beispiel HTML Code Bild Simpsons mit Formatierung

<img src="http://members.tripod.com/~bramdb/wolken.gif height="80" width="160" alt "Hier sollte das Bild des Simpsons Hintergrund erscheinen">

Probiert das ganze wie immer am besten noch einmal im Editor aus und wendet euch bei Problemen gerne an mich! WIchtig ist wie immer, dass ihr alle wichtigen Bestandteile einer Homepage aus Kapitel eins benutzt, da es sonst nicht funktionieren kann!

Der Tag "alt" erscheint übrigens nur, wenn das Bild nicht angezeigt werden kann! Also sonst nicht wundern!

Morgen werde ich dann vielleicht wenn ich Zeit und Lust habe das dritte Kapitel zum Lernen von HTML schreiben! Jedoch überlege ich es mir noch!

Bei Fragen und Problemen jederzeit hier im Thread stellen! Ich werde euch hoffentlich weiterhelfen können! Und immer am besten alles gleich ausprobieren, damit sich keine Fehler einschleichen und man alle Befehle lernt!

MFG
Euer Extremefall

extremefall hat geschrieben:Ihr beginnt wie bei dem normalen einfügen eines Bildes:

<img src="URL.jpg

Nun kommt kein Anführungszeichen, sondern der/die gewünschten Formatierungstag!

So sieht das ganze dann im HTML Code aus:

<img src="URL.jpg height="40" width="80" alt "Alternativ">

Im Beispiel für das Simpsonsbild könnte das ganze dann so aussehen:

Beispiel HTML Code Bild Simpsons mit Formatierung

<img src="http://members.tripod.com/~bramdb/wolken.gif height="80" width="160" alt "Hier sollte das Bild des Simpsons Hintergrund erscheinen">

Schwachsinn! Selbstverständlich muss das Anführungszeichen am Ende auch gesetzt werden, sonst wird das Bild nicht erscheinen! Man kann die Anführungszeichen entweder ganz weglassen, oder an beiden Seiten setzen, aber niemals nur ein einzelnes. Der Code wird so vom Browser nicht interepretiert weil er die URL-Angabe für nicht abgeschlossen hält!

Schwachsinn! Selbstverständlich muss das Anführungszeichen am Ende auch gesetzt werden, sonst wird das Bild nicht erscheinen! Man kann die Anführungszeichen entweder ganz weglassen, oder an beiden Seiten setzen, aber niemals nur ein einzelnes. Der Code wird so vom Browser nicht interepretiert weil er die URL-Angabe für nicht abgeschlossen hält!

Du hast vollkommen recht! Hab es heut noch ausprobiert und den Fehler auch bemerkt! Hatte ich wohl falsch in Erinnerung! Sorry!

Also müssen die Anführungszeichen da sein, unzwar beide!

extremefall hat geschrieben:(...)
Beispiel HTML Code Bild Simpsons mit Formatierung

<img src="http://members.tripod.com/~bramdb/wolken.gif height="80" width="160" alt "Hier sollte das Bild des Simpsons Hintergrund erscheinen">

Kann das sein, dass da du zusätzlich zu der Fehlinformation des Anführungszeichens noch ein Gleichheitszeichen ( = ) hinter dem "alt" vergessen hast? Jedenfalls ist das mein Wissensstand und auch SELFHTML unterstützt

dieses soweit. Beispiel aus dem obrigen Link:

Code: Alles auswählen: <img src="karte.png" width="345" height="312" border="0" alt="Karte" usemap="#Landkarte">

Ich weiß es leider mit dem Alternativtag nicht so gut! Da ich diesen eigentlich nie verwende! Ich hatte es nur früher bei meiner Lehrerin so gelernt, wahrscheinlich hat sie sich da vertan und ich habe den Fehler übernommen! In diesem Fall bin ich mir nicht sicher, doch es müsste eigentlich ja wie bei den anderen Formatierungstags mit "=" Zeichen sein!

Der "alt" Tag sollte aus Gründen der Kompatibilität und barrierefreiem Web-Design immer gesetzt werden. Der Internet Explorer zeigt diesen übrigens an. MS Extrawurst halt. Auch die Anführungszeichen gehören zu sauberem HTML.

P.S.: Kannst du vielleicht ab und zu auch mal einen Punkt statt immer Ausrufezeichen verwenden? Danke!

Ja klar! Hatte halt soviel, da is mir das gar nicht aufgefallen! Das mit den Anführungszeichen ist wirklich wichtig! Die müssen nämlich da sein! Ich hatte sonst schon einmal deswegen das Problem mit dem Editor, dass das Bild nicht angezeigt wurde! Mit den Anführungszeichen funktionierte dann alles reibungslos!

Hallo zusammen,

ich kann dazu nur den Tipp geben, bevor man hier irgendwelche falschen Tipps einstellt, einfach mal vorher testen. Das ganze in den Editor eingeben und als html Dabei speichern, du wirst dann schon sehen obs klappt oder nicht. Falsche Tipps bringen hier wohl keinen weiter

Liebe Grüße von der
Laufmasche

Ich habe mir deine 3 Lernstunden mal durchgelesen und frage mich, ob du dieses Gebiet wirklich lehren solltest. Hier mal eine Kritikpunkte:

Didaktisch ist das ziemlich bescheiden angefangen. Man sollte sich für die Bottom-Up oder Top-Down Vorgehensweise entscheiden. Du fängst in der Mitte an.(oder wo auch immer) Zuerst erfolgt natürlich immer eine kurze Einleitung in die Problematik.

Hier mal ein Szenarie für Bottum-Up:
1)Erklären was HTML ist. Dazu gehört eine klare Definition und Möglichkeiten und Beschränkungen dieser Auszeichnungssprache. Eventuell der sollte der Unterschied zu Programmiersprachen geklärt werden. Auf jeden Fall muss eine klare Vorstellung im Kopf des Lernenden vorhanden sein. Dabei wird das Wissensbasis immer detailierter ausgebaut, bis der Lernende HTML voll beherrscht ohne auch eine Codezeile CSS gesehen zu haben.

2)Erklären was CSS ist. Hier kann man bereits auf seine Erfahrungen mit HTML zurückgreifen, die mittlerweile ja sehr detailiert sein sollten. Zudem ist CSS ohne HTML auch nicht wirklich sinnvoll. Jedoch wird nicht weiter besonders tief auf HTML eingegangen. Einfache Beispiele mit CSS und möglichst wenig HTML sind sinnvoll.

3)Die Kombination von HTML und CSS. Der Wissenshungrige weiss nun, was Beides ist und wie sich unterscheiden. Jetzt ist es deine Aufgabe ihnen zu zeigen, wie man die beiden Mittel sinnvoll zusammen nutzen kann. Besonders wichtig ist es hier Paradigmen zu lehren. (Die du glaube ich selbst nicht vollkommen beherrscht). Der Lernende muss wissen, wie er komplexere Problemstellungen zu behandeln hat usw. Ein wichtiges Paradigma ist beispielsweise die Trennung von Inhalt und Darstellung.

Dieses einfache Herangehensweise für das Bottom-Up Prinzip ist nicht unbedingt die ideale für völlig unerfahrene Nutzer. So ein Bottom-Up-Prinzip wird häufig an Universitäten und Schulen genutzt, wo die Lernenden schon in ähnlichen Sachverhalten vorwissen haben und auch am Stoff interessiert sind. (Es kann durchaus sehr frustrierend sein zig Stunden etwas zu lernen bis man sich den wirklich interessanten Problemen widmet). Dafür ist man nach diesem Prinzip sehr detailiert darüber informiert wie man HTML und CSS nutzen kann. Das ist beim Top-Down-Problem oft nicht so.

Jetzt mal eine Abfolge zum Top-Down-Prinzip:
Nach der allgemeinen Einleitung fängt man eigentlich schon mit dem Punkt (3) aus dem Bottom-Up-Prinzip an. Es wird erläutert, wie man sich vorher Skizzen der Webseite anfertigt, die Inhalte konzipiert und aufteilt oder die Interaktionsmöglichkeiten abklärt.

Erst danach werden die Mittel gezeigt (HTML+CSS) mit denen man seine Ideen umsetzen kann (siehe Punkt 1 und 2 aus Bottom-Up), wobei es in der Regel nicht so detailiert geschieht wie beim Bottom-Up-Prinzip. Da HTML und CSS meistens mehr an Beispielen gezeigt und erläutert wird. Und genau hier ist das Problem. Oft hat der Lernende einen Gesamtüberblick über das Problem an sich, beherrscht die Lösung zwar im Allgemeinen, aber nicht im Detail. Dabei kommt es dann zum Frickeln. Hier kommt es zu einem Workaround und dort und letztendlich entsteht unsauberer Quellcode. Es kann natürlich auch anders sein, aber meine Erfahrungen bestätigen diese Aussage zumindestens ;-)

Nun gut jetzt habe ich viel zum Bottom-Up und Top-Down-Prinzip erzählt. Deine Vorgehensweise passt irgendwie in keines der beiden richtig hinein (wobei es wohl eher das Bottom-Up-Prinzip sein wird was du angepeilt hast).Du solltest dir also mehr Gedanken darüber machen, in welcher Reihenfolge und Art und Weise du jemanden etwas beibringst, wenn du dich schon dazu erhebst so etwas zu versuchen, als einfach drauf loszuschreiben (was ich dir hier leider vorwerfen muss - und ich darf das - ich lehre ja nichts :-P ).

Ich glaube eine direkte Folgerung aus deiner unstruktierten Einleitung ist die Überforderung eines Anfängers durch Begriffe, die er gar nicht kennen kann (Was ist eigentlich HTML?) und gleichzeitig die Oberflächlichkeit mit der du nur einige aber nicht alle Möglichkeiten nennst die sie haben. Und als beispielhafte Einleitung lasse ich es auch nicht gelten, denn dafür sind deine Beispiele zu kompliziert und nicht abstrakt genug.

Ich sehe das ähnlich wie lundner. Du solltest im ersten Kapitel zuerst erklären, was HTML überhaupt ist. Du könntest vielleicht noch den Erfinder (World Wide Web Consortium) und die Zukunft von HTML (XHTML) nennen.

Vielleicht ist es besser, wenn dem Leser direkt die Syntax von XHTML erklärt wird, z.B. <br /> statt <br>, Formatierungen in eine .css-Datei schreiben und von der .html-Datei trennen.

Homepageerstellung mit HTML - Kapitel 3 - Lernstunde

Ähnliche Themen

Weitere interessante Themen

Neue aber noch unbeantwortete Themen

Aktuell 6 beste Themenschreiber der Woche