Die Lösung des Problems:
Zunächst einmal siehst du hier den Code in Visual-Studio-Code, das ist ein Quelltexteditor, den kannst du dir kostenlos downloaden und den brauchst du natürlich um HTML, oder CSS oder Java-Script ausführen zu können. HTML ist ja keine Programmiersprache sondern eine sogenannte Markup-Sprache eine Auszeichnungssprache.
Was wurde hier genau gemacht?
Der User, der das ganze angelegt hat für eine Homepage, ist hergegangen und hat zunächst einen Ordner angelegt. Diesen Ordner hat er automobil genannt. Du kannst ihn auf der linken Seite sehen. Der Ordner ist extrem wichtig, weil wenn du später die homepage z. B. veröffentlichen willst, sind dort alle Dateien drin.
Schritt 1: Er ist hergegangen und hat einen leeren Ordner auf seinem Laptop angelegt und hat den Ordner „automobil“ genannt
Schritt 2: Du klickst dann auf File und dann auf „open folder“ und markierst den Ordner auf deinem Laptop, also den Ordner „automobil“ und schon wird er dir angezeigt. (links oben).
Der User ist dann hergegangen und hat eine index.html angelegt, über das Pluszeichen oben, das dir eingeblendet wird, wenn du mit der Maus rechts oben über die Navigation fährst. Man gibt dann index.html ein klickt die Entertaste und hat dann zunächst eine komplett leere Seite.
Schritt 3
Um ein HTML Gerüst zu erzeugen, wie das wo du hier siehst, gibt man ein Ausrufezeichen ein, klickt die Entertaste und schon hast du den Gesamtaufbau wie oben auf dem Bild angezeigt.
Nun zu der Frage: Wo kann Jenny den Code jetzt einfügen? In der Klassenarbeit ist nur angegeben, dass das Bild auto_3.jpg heißt.
Hier ist es extrem wichtig, dass du weißt wie ein komplettes Bild aufgebaut ist:
img src=“auto_3.jpg“ alt=“rotes Auto“ width=“500″ height=“333″
Woher weiß Sie, wo Sie jetzt den Code einfügen muss?
Wenn du dir das Bild oben betrachtest, so siehst du, dass der gesamte HTML-Code von 1-Zeile 11 geht. Hierzu ist es extrem wichtig, dass du weißt, dass jedes HTML-Gerüst in einen sogenannten Head-Bereich mit allgemeinen Angaben eingeteilt ist und in einen sogenannten Body-Bereich.
Wie unterscheiden sich allgemein diese 2 Bereiche?
Zeile 1 : Wird das HTML eingeleitet
Zeile 2 : Hier steht, dass es auf Englisch ist
Zeile 3 : Ab hier geht der Head-Bereich los und es folgen allgemeine Angaben
Zeile 4 : Hier steht dass du Sonderzeichen nutzen darfst.
Zeile 5 : Das ist für das Responsive
Zeile 6 : Der Titel
Zeile 7 : Der allgemeine Head-Bereich ist abgeschlossen, du siehst es an dem / Zeichen
Nun beginnt der spannende Bereich, der Frage, denn du willst ja alle Punkte abräumen. Hier musst du wissen, dass du Bilder immer in den Zwischenraum des Body-Bereiches eintragen musst.
Merke: Alles was du im Zwischenraum des Body-Bereiches einträgst, das wird dir auf der Homepage anzeigt, also dein Bild. Wo geht der Zwischenraum los? Ab Zeile 9. Das heißt, Jenny könnte den oben genannten Bild-Code mit ihrem Auto hier einfügen und sie hätte die volle Punktzahl
Zeile 8 : Der sogenannte Body-Bereich geht los
Zeile 9 : Hier käme Jennys-Bildcode rein.
img src=“auto_3.jpg“ alt=“rotes Auto “ width=“500″ height=“333″
Zeile 10: Der Body-Bereich ist abgeschlossen, du siehst das an dem /
