Little Boxes – der HTML-Crashkurs

Der Quelltext besteht aus drei Sprachen

Testen Sie unsere 1865 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Webseiten bestehen aus Schichten: HTML für den Inhalt, CSS zur Gestaltung und JavaScript für das Verhalten. In diesem Film sehen Sie, wie diese drei Sprachen bei der Darstellung von Webseiten zusammenarbeiten.

Transkript

Webseiten bestehen aus Quelltext und Quelltext besteht aus drei verschiedenen Sprachen. Diese drei Sprachen ergänzen einander mehr oder weniger perfekt und sind quasi in Schichten übereinander angeordnet. Der Kern des Quelltextes, das ist HTML, die Basis für alles, die innerste Schicht einer Webseite. HTML ist der Inhalt, die Struktur, der Text. Dieser Kern ist flexibel und passt sich den Umständen an. HTML ordnet den Inhalt einer Webseite, wie Sie glecih noch sehen werden. Darum legt sich die Design-Schicht, die Styling-Schicht, das ist das CSS, cascading style sheets, die den Webseiten das gewünschte Aussehen geben. Auf Wunsch werden die Seiten für große Bildschirme, für kleine Bidschirme, für Drucker und für andere Geräte jeweils anders dargestellt. CSS ist sehr flexibel und gestaltet die HTML-Elemente. Die dritte Schicht, das ist Javascript, eine Programmiersprache. Die ist optional, obwohl sie auf den meisten Webseiten vorhanden ist. Damit wird das Verhalten der Webseite gesteuert und so kann man zum Beispiel die Bedienung erleichtern oder angenehmer gestalten und Dinge nachträglich auf einer Webseite verändern. Diese Schichten um den HTML-Kern, die machen die Seite hübscher und besser bedienbar, aber nicht immer werden alle Schichten genutzt. Das heißt also, manchmal ist auch das Javascript ausgeschaltet, manchmal kommt das CSS nicht zum Zuge und dann bleibt nur der Kern. Ich zeige Ihnen hier mal eine real existierende Webseite. Ich bin hier im Firefox und das Menü ist in der neueren Version nicht mehr so einfach zu sehen, aber wenn Sie unter Windows die Alt Taste drücken, dann kommt das zum Vorschein. Und im Menü Ansicht gibt es einen sehr schönen Befehl, der heißt Webseiten-Stil. Hier ist eingestellt Standard-Stil und hier kann man umstellen auf Kein Stil. Stil ist die etwas missglückte Übersetzung von style, kein Style hier, also das bedeutet style sheets CSS ausstellen. Sie sehen, die Seite hat sich leicht verändert, hier ist nach wie vor der Titel, das ist die Navigation und jetzt werden hier alle Unterpunkte sichtbar. Die werden Sie gleich wiedererkennen. Dann ist hier das Suchfeld und hier ist die Slideshow und darunter der Block. Sie sehen, es ist alles einspaltig. Wenn ich weiter nach unten rolle, hier ist die Sidebar. Die steht jetzt unten drunter. Der Unterschied zwischen dem, was Sie jetzt sehen, und zwischen dem, was Sie, wenn Sie die Alt Taste, Menü Ansicht Standard Stil sehen, das ist CSS. Das bedeutet also, wenn Sie hier HTML sehen, gehe noch mal zurück in den Browser, Ansicht Kein Stil, HTML sagt nur "Du bist ein Link, du bist eine Überschrift, du bist ein Bild, du bist eine Liste hier, eine verschachtete Liste", das alles macht man in HTML. Aber wie das aussehen soll, das bestimmt das CSS. Also HTML strukturiert den Text, den Inhalt. Das [unhörbar] ist wahnsinnig flexibel, wenn ich das Browserfenster hier verkleinere. Und sehen Sie? Das zieht einfach hier sich ganz zusammen und der Text passt sich an. Da ist HTML also wirklich absolut flexibel und erst das CSS, was dann dazugeschaltet wird, da muss man aufpassen, dass diese Flexibilität erhalten bleibt. Soweit zu den beiden Schichten. Noch mal hier im Schema HTML und CSS Style diese Elemente. Javascript drum herum, das sorgt dafür, dass hier zum Beispiel gesleidet werden kann, so in dieser Art. Um Javascript auszustellen, mache ich eben ein neues Tab auf und gebe dort oben ein about:config, gehe in die Konfigurationsabteilung dieses Firefoxes und Sie sehen hier, endet möglicherweise die Gewährleistung. Ich verspreche, dass ich vorsichtig bin. Ist versprochen, ich klicke hierauf und gebe oben ein javascript. und da sehen Sie, gleich die erste Option heißt javascript.enabled eingeschaltet. Die kann man mit einem Doppelklick auf false setzen. Das bedeutet auf gut Deutsch ausgeschaltet. Wenn ich jetzt hier diese Seite neu lade, dann sehen Sie, dass die Bilder nicht mehr nebeneinander stehen, sie sind noch gestaltet, der Rahmen vom CSS ist noch drum rum, aber ich kann nicht mehr sleiden. Das heißt also, dass Javascript ist hier dafür verantwortlich, dass das gesleidet werden kann in starker Zusammenarbeit mit dem CSS. So, Javascript ist hier wieder auf true, enabled, also eingestellt. Dann kann ich diesen Tab wieder schließen. Und Sie sehen hier, die Seite erstrahlt in vollem Glanz, denn alle drei Sprachen HTML, CSS und Javascript arbeiten wunderbar zusammen.

Little Boxes – der HTML-Crashkurs

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 5 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016
Laufzeit:3 Std. 5 min (41 Videos)

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!