Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Grundlagen der Webprogrammierung: Meine erste Website

Positionen festlegen

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Jedes Element bekommt seinen Platz zugewiesen. Wie's geht, demonstriert die Trainerin in diesem Video.
07:40

Transkript

Ich habe jetzt zwar die Möglichkeit, dass durch mein Auszeichnen mit HTML die Seite von den Browsern dargestellt wird. Ich bin nur im Moment noch völlig der Darstellungsweise der einzelnen Browser ausgeliefert. Und wenn ich das ändern möchte, brauche ich eine neue Auszeichnungssprache, nämlich "Cascading Style Sheets (CSS)". "Cascading" deswegen, weil wasserfallartig die Regeln dann zur Anwendung kommen, die ich den einzelnen Elementen zuweise. Und Sie haben es vielleicht schon bemerkt, dass ich hier ein bisschen wie mit Matroschka Puppen arbeite. Dieses große umgebende Container-Element "wrapper", zum Beispiel, umfasst ja meinen gesamten Text, während dieser "Header"-Bereich eigentlich nur den Seitentitel und ein Zitat enthält. Wenn ich jetzt dieses CSS innerhalb meines Dokuments zum Einsatz bringen möchte, was möglich, aber nicht die beste Lösung ist, dann brauche ich ein eigenes Tag im "Head"-Bereich und dieses Tag heißt "style". Und mithilfe von "style", das ebenfalls aus einem öffnenden und sich schließenden Tag besteht, kann ich jetzt CSS-Regeln zur Anwendung bringen. Meine erste Regel wird diesen umfassenden Container betreffen. Das heißt, ich sage zuerst, welcher Bereich von meiner Regel überhaupt betroffen sein soll. "Div", dann die Klasse wird durch einen Punkt präsentiert und dann der Name meines "Divs". Und alle Regeln stehen jetzt innerhalb von geschwungenen Klammern. So, was möchte ich alles erreichen? Ich möchte zuallererst erreichen, dass die Breite des Bildschirms nicht immer zu 100 Prozent ausgefüllt wird, weil das bei sehr großen Bildschirmen zu einer ganz schlechten Lesbarkeit führt und der Einfachheit halber werde ich jetzt diese Weite, also "width" mit einem Prozentwert angeben. Ich möchte, dass die Weite meines Inhalts 80 Prozent des Bildschirms einnehmen soll. Ich mache deswegen eine Prozentangabe, damit ich je nach Bildschirmgröße oder nach Darstellungsgröße auf jeden Fall 80 Prozent dieser gerade gültigen Darstellungsgröße verwende. Ich schließe meine Regel mit einem Strichpunkt ab. Und damit kann ich in die nächste Zeile gehen und eine neue Regel erstellen. Ich möchte zum Beispiel, einen Rahmen um meinen Inhalt haben, zumindest jetzt am Anfang. Der Rahmen heißt "border" und meine "border" soll 1 Pixel breit sein. Pixel haben wir auch im Zusammenhang mit Bildern, ist eine Punktgröße sozusagen auf unserem Bildschirm. Und die Machart meines Rahmens soll solide sein. Also sage ich "solid" und dann kriegt mein Rahmen auch noch eine Farbe, nämlich "darkgreen". Es gibt mehrere Möglichkeiten, um Farben mit CSS dazustellen. Dieses ist die, behaupte ich mal, billigste, weil es ein paar Farben gibt, die auch mit Namen angesprochen werden können und von allen Browsern verstanden werden. Gut, wenn ich jetzt noch möchte, dass mein Inhalt nicht so am linken Rand klebt, sondern vielleicht zentriert, und zwar dieser ganze Container zentriert dargestellt wird, dann muss ich einen Wert beschreiben, der nennt sich "margin". "Margin" ist ein Wert, der sich um den Bereich außerhalb des Elements bis hin zum Rand kümmert, oder bis hin zum nächsten Element. Und für das Zentrieren eines Containers gibt es eine nette Möglichkeit. Nämlich, ich sage "margin", für den unteren und oberen Bereich verwende ich den Wert 0, weil ich da jetzt noch keine besonderen Vorstellungen habe. Aber dann sage ich "Auto" und "Auto" ist ein Begriff, der dazu verwendet wird, dass automatisch der Bereich horizontal zentriert dargestellt wird. Und so habe ich mit einem einzelnen Befehl dafür gesorgt, dass meine Inhalte immer zentriert dargestellt werden. Wenn ich jetzt zum Beispiel die Darstellung auf meine volle Bildschirmgröße ausdehne, dann bleibt trotzdem der Bereich zentriert und ich habe jetzt halt meine verbleibenden Prozente links und rechts schön aufgeteilt. So, jetzt mache ich es wieder kleiner, weil das war noch nicht alles. Ich möchte zum Beispiel meinem Header-Bereich und meinem Footer-Bereich ebenfalls noch ein paar spezielle Styles mitgeben. Das heißt, ich kann auch diese beiden gemeinsam ansprechen, wenn ich gemeinsam was für sie tun möchte. Das heißt, zuerst sage ich, ich möchte den Header verändern und, zwei Striche Abstand, den Footer verändern. Wieder eine geschwungene Klammer und innerhalb dieser geschwungenen Klammern kommen jetzt meine Einheiten. Zuerst möchte ich, dass der Text in beiden Bereichen zentriert dargestellt wird. Das erreiche ich, indem ich die Regel "text-align" mit dem Wert "center" ausstatte. Strichpunkt sorgt wieder für eine Beendigung dieser Regel. Und es wurde hier bereits umgesetzt. Und dann möchte ich noch eine Hintergrundfarbe. Ich sage also "background-color" und werde wieder so dieses "darkgreen" verwenden. Indem ich jetzt diesen Hintergrund so dunkel gemacht habe, ist natürlich meine Schrift sehr schlecht lesbar. Und auch für die Schriftfarbe gibt es eine eigene Regel und die Schriftfarbe wird mit "color" angegeben. Da werde ich jetzt gleich dieses "aliceblue" nehmen, das ist ein ganz, ganz helles Blau und schließe auch dieses mit einem Strichpunkt ab. Und so merken Sie, dass mit wenigen Regelangaben sofort Effekte erzielt werden können. So, einen Effekt brauche ich noch. Nämlich, ich habe hier oben einen Abstand, den ich so nicht haben will. Und während "margin" dafür zuständig ist, Elemente außerhalb anzusprechen bis hin zum nächsten Element, gibt es noch einen Wert der sich um das innere Ausdehnen von Elementen kümmert. Und das werde ich jetzt in meinem Header und Footer zum Einsatz bringen. Und diese Regel heißt "padding". Ich möchte rundherum etwas Padding haben und zwar nur ganz minimal. Es reicht ein völlig minimales Padding von 0,1 em. "EM" ist wieder eine sehr flexible Größenangabe. "EMs" orientieren sich nämlich an der Schriftgröße und sind dokumentweit einsatzbar, im Unterschied zu dem früher verwendeten "REM", das immer mit kaskadiert ist, ist "EM" eine eher allgemein gehaltene Größe. Und damit ist auch gewährleistet, dass mein Element sich bis zum oberen Rand ausdehnt. Das waren jetzt erste, ganz schnelle Stylingmethoden, mit deren Hilfe wir eben das optische Erscheinungsbild verändern können. CSS ist ein sehr umfangreiches Gebiet, wir kratzen da nur so ein bisschen am Eisberg. Mir ist wichtig, dass Sie kennenlernen, wie prinzipiell das Zuweisen von Regeln funktioniert. Und welche Regeln Sie dann genau zum Einsatz bringen wollen, da brauchen Sie sowieso am Anfang noch Nachschlagewerke.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!