SCHRITT 2: Editor anpassen. Klicke auf das Symbol welches im Bild angegeben ist !
SCHRITT 3: Den gesamten Text in Fenster 1. und Fenster 2 löschen !
Falls alles geklappt hat sieht dein Editor jetzt so aus:
(Bei Problemen hier
klicken)
In dem Fenster 1. (links oben) wird der HTML - Code eingegeben. HTML ist die Abkürzung für HyperText
Markup Language.
In dem Fenster 2. wird der CSS - Code eingegeben. CSS ist die Abkürzung für Cascading Style Sheets.
CSS ist die Spielwiese der kreativen Köpfe.
Wir werden nun in einem nächsten Schritt zu unserer ersten Seite einen Titel hinzufügen.
In HTML gibt es sechs Überschriftsgrößen. Diese werden durch folgende Tags gekennzeichnet, wobei h1
die größte Überschrift ist:
Füge nun zwischen die Zeilen 5 und 6 folgende Codezeile hinzu: (benutze deinen Namen)
Resultat:
[ Klicke hier um das Resultat zu sehen ! ]
Die Grundstruktur unserer Webseite ist nun soweit fertig. Wir werden dieser Struktur in diesem
Arbeitsschritt weitere Inhalte hinzufügen.
Schreibe deshalb schrittweise (Zeile für Zeile) die nötigen Codezeilen und beobachte, wie die Seite
sich im Browser verändert.
Die Codezeilen, die hinzuzufügen sind, wurden rot hervorgehoben:
In einem letzen Schritt werden wir eine Liste von Hobbys zu unserer Seite hinzufügen.
Vervollständige hierzu deinen Code wie in dem folgenden Listing:
Resultat:
[ Klicke hier um das Resultat zu sehen ! ]
Damit hast du nun einen kleinen Einblick in die Welt von HTML erhalten.
Diese Webseite kann man natürlich nun noch verbessern und erweitern.
Wir können dir hierzu eine weiterführende Unterrichtseinheit von Digital Sciences empfehlen.
Ab hier gibt es optionalen Kontent um deine Webseite zu designen (bring Farben ins
Spiel) !
Bis jetzt sieht unsere Webseite relativ eintönig aus. Schwarzer Text auf weißem Hintergrund. Um
etwas Farbe ins Spiel zu bringen,
werden wir eine weitere wichtige “Progammier”sprache des Internets nutzen und zwar CSS.
Diese unterscheidet sich in der Syntax stark von HTML - ist jedoch auch logisch aufgebaut und
dadurch leicht zu verstehen.
CSS basiert darauf, dass man sich gewisse HTML-Elemente auswählt und diesen Elementen dadurch
Befehle geben kann,
um festzulegen, wie sie sich zu verhalten haben.Gib hierzu folgende Codezeile in das Fenster 2
(links unten) ein:
Wir wählen mit h1 die erste größte Überschrift aus. Alles was zwischen den geschweiften Klammern
steht {...}, ist eine Anweisung zum Verhalten von h1.
Die Anweisung selbst lautet color: yellow; was soviel heißt wie “setze die Farbe auf gelb”.
Beachte das ; - Zeichen am Ende der Anweisung. Wenn alles geklappt hat, müsste deine erste
Überschrift nun in Gelb erscheinen.
Schreibe nun folgenden Code in das CSS Fenster und beobachte:
Resultat:
[ Klicke hier um das Resultat zu sehen ! ]
Experimentiere indem du nach weiteren CSS befehlen auf Google suchst.