Fiese Fehler – CSS-Code lernen – Klassenarbeiten-Tests- developing

Praktisches Beispiel, du möchtest eine Webseite coden. Um den Code zu schreiben, nutzt du Visual-Studio-Code, das kannst du dir kostenlos downloaden. Bitte verwechsle beim Download nicht Visual-Studio-Code mit Visual-Studio. Es ist nicht dasselbe. In der Regel nutzt jemand, der eine homepage mit klassischem Code schreibt HTML für das Grundgerüst der Webseite. HTML ist keine Programmiersprache, sondern eine sogenannte Markup-Sprache eine Auszeichnungssprache. Damit baut er das Gerüst. Jetzt willst du natürlich, dass deine Webseite ein cooles Aussehen hat, du willst dass das Design cool aussieht und die Farben angenehm sind, für jemand, der auf die Webseite geht. Auch willst du dass die Bilder und die Abstände zwischen den Bildern passt. Auch die Schriftgröße willst du entsprechend deinen Vorstellungen einstellen und im Programmcode hinterlegen. Das heißt, für all das, benötigst du CSS. CSS ist eine Abkürzung für Cascading-Stylesheet, also eine sogenannte Stylesheetsprache für Farben und Layout.

Also, wir haben hier ein einfaches klassisches HTML-Gerüst vorliegen. Das solltest du im Schlaf wissen, wie so etwas aufgebaut ist .z. B. für den Bau einer Webseite. HTML ist ja keine Programmiersprache, sondern eine sogenannte „Markup-Sprache, eine Auszeichnungssprache.
Wenn dein Kumpel dich fragt: Was passiert hier genau: Hier die Erklärung
Zeile 1: In Zeile 1 wird das HTML eingeleitet
Zeile 2: Hier steht, dass es auf Englisch ist
Zeile 3: Beginnt der sogenannte Head-Bereich. Jedes HTML-Gerüst ist in Head( Kopf-Bereich und Body gegliedert.

Zeile 4: Bedeutet, dass du Sonderzeichen nutzen darfst.
Zeile 5: Ist für das Responsive
Zeile 6: Ist der Titel

Was ist das Problem in Zeile 7?
In Zeile 7 wurden 2 üble Fehler eingebaut. (rot durchgestrichen in der Aufgabe)
Wenn du in Visual-Studio-Code, Code aufbaust, gibst du einfach den ersten Buchstaben in Zeile 7 ein, nämlich ein „l“ und sofort wird dir im Kontext-Menü vorgeschlagen, Link:CSS, dort klickst du und schon wird dir diese schwierige merkbare Zeile immer sofort angezeigt.

Die gesamte Zeile müsste so heißen. link rel=“stylesheet“ href=“style.css“

Du musst sie nicht auswendig wissen, aber mit dieser sogenannten „Verknüpfungszeile“ wird das HTML mit dem CSS-Code verbunden. Das heißt, baust du diese Zeile nicht in deinen Code ein, so hat das fatale Folgen. Dein gesamter Style von deiner Webseite wird dann nicht angezeigt in Visual-Studio-Code. Ein typischer Anfängerfehler, den du unbedingt vermeiden musst.

Diese extrem wichtige Zeile wird immer über dem „Head“ Bereich, in unserem Falle in Zeile 7 eingetragen.

Um das ganze komplett zu erklären. Was passiert in Zeile 8
Zeile 8: In dieser Zeile wird der Head-Bereich abgeschlossen
Zeile 9 : Hier beginnt der wichtigste Bereich der sogenannte Body-Bereich
Zeile 10 : Merke: Alles was innerhalb vom Body-Bereich steht, wird dir auf der Website angezeigt. In unserem Falle „Hello World“ mit einer H1 – Überschrift.

Zeile 11: wurde wegen der Übersicht leergelassen
Zeile 12: Hier ist der sogenannte Body-Bereich abgeschlossen, du siehst es an diesem / (Slash)

Zeile 13: Das gesamte HTML – Gerüst ist abgeschlossen.

Ist es wichtig, dass du das weißt?
Ja, extrem wichtig, weil wenn du eine Webseite mit HTML beginnst zu entwickeln, beginnst du immer mit einer index.html und legst dieses Grundgerüst an. Du benötigst, HTML für die Grundstruktur, mit CSS-Code kannst du sie stylen und später kannst du noch mit Funktionen arbeiten und java-Script dazu nehmen. HTML, CSS, und java-Script sind die 3 Klassiker der sogenannten Frontend-Entwicklung. Frontend ist das was du siehst auf einer Webseite. Backend ist das was du nicht siehst auf einer Webseite, als User. Zum Beispiel jemand füllt ein Formular aus und im Hintergrund werden deine Daten z. B. verarbeitet, die du einträgst in das Formular. Eine Backend-Technik wäre z. B. PHP.

Hast du so ungefähr die Antwort für dich formuliert, so wirst du auch die volle Punktzahl bei der Aufgabe für dich abräumen-.)

Special Tipp: Wenn du in Visual-Studio-Code diesen Code in einer Minute aufbauen willst, so musst du nicht mühsam hergehen, und Zeile für Zeile eingeben. Du legst eine index.html an und gibst auf der Tastatur ein Ausrufezeichen ein „!“ ohne Anführungszeichen, klickst dann die Entertaste auf deiner Tastatur und schon wird dir das Gesamtgerüst automatisiert eingetragen und du musst das was du oben siehst im Code nicht mühsam abschreiben. -.)