Code-Alarm - 1 - Christine- programmierung für Anfänger

Warum läuft mein Code nicht?

Diesen Fehler solltest du nie machen, sonst, wird dir der Style deiner gesamten Webseite nicht angezeigt.

Der Fall Christine: Kannst du das Problem lösen?

informatik studieren- programmieren lernen mit schulhof-programmierung

Der Fall Christine:

Ein sehr häufiger Fehler, der so oft in vielen Programmiergruppen gemacht wird. Kannst du Christine weiterhelfen? Ein solcher Fall könnte dir auch mal in einer Code- Klassenarbeit begegnen.

Der Fall: Christine ist verzweifelt

Christine ist verzweifelt, Sie hat sich ein cooles HTML-Gerüst in Visual-Studio-Code aufgebaut und will sich eine coole Webseite coden. Sie hat die Index.html angelegt für die HTML-Struktur. Das CSS- File hat sie auch angelegt. Das Problem, warum wird ihr CSS nicht angezeigt, wenn Sie auf den Live-Server klickt und ihre homepage anschauen möchte? Schau dir den Code an und überlege genau? Wenn du es nicht weißt, dann schau dir die Lösung an.

Tipp von Henry

Wiederholung:

HTML ist eine Markup-Sprache, du siehst die Grundstruktur hier aufgebaut. Von Zeile 1 – Zeile 13. Ein HTML-Grundgerüst ist immer in 2 Teile aufgebaut. In einen sogenannten Head-Bereich und in einen Body-Bereich. Der Head-Bereich geht von Zeile 3 – Zeile 8 und dient nur allgemeinen Informationen. Wann ein Bereich abgeschlossen ist, siehst du immer an dem geöffneten und dem geschlossenen Code-Tag.

offen <body>

geschlossen

</body> Gut merken kannst du dir das ganze, wenn du einfach auf den Schrägstrich schaust, wenn du einen Schrägstrich siehst, dann weißt du, dass der Bereich abgeschlossen ist. Der Schrägstrich ist fett angestrichen von mir.

Wo schreibt man den eigentlich Code dann rein?

Immer im Zwischenraum, zwischen dem geöffneten Body und dem geschlossenen Body ! Das ist sehr wichtig!

In unserem Falle, in dem Code von Christine in Zeile 10 hat sie begonnen ein Bild einzufügen.

Wenn du das ganze nachbauen möchtest und ausprobieren möchtest, dann lade dir Visual-Studio-Code runter, das ist ein Code-Editor, den auch viele professionelle Entwickler nutzen, um Code zu schreiben.

Hier noch ein paar Video-Links

Wie lerne ich HTML? Video ( HTML ist keine Programmier-Sprache sondern eine Markup-Sprache!)

Was ist CSS?

CSS ist für das Styling einer Webseite verantwortlich. Hier kannst du bestimmen, wo sollen die Bilder der Webseite hin, wie soll der Hintergrund aussehen, etc. CSS bedeutet. Cascading-Style-Sheet. Diese Stylesheet-Sprache ist für Style und Layout da. Video

Lösung - Christine

Der CSS-Code von Christine wird nicht angezeigt, wenn sie auf den Live-Server klickt, weil sie vergessen hat die sogenannte „Verknüpfungszeile“ einzubinden in den Head-Bereich. Siehe Zeile 8

Diese müsste heißen <link rel=“stylesheet“ type=“text/css“ href=“style.css„>

Achtung:

Manchmal siehst du diese Zeile im Code auch mit „href = „styles.css“, das geht auch, allerdings musst du dann unbedingt darauf achten, dass du auf der linken Seite, dein angelegtes File dann statt style.css, auch „styles.css“ nennen musst. Beide müssen also gleich heißen!

(vergleiche die beiden gelben Pfeile)

Man nennt das ganze auch, das CSS extern auslagern, was Christine hier versucht hat. Video ( 9 Minuten- Video)

Lösungs-Bild

Zurück zu den Fällen