Grundlagen und Einstieg in CSS

Grundlagen und Einstieg in HTML, CSS und JavaScript

Diese Beitragsreihe soll Ihnen zum einem einen ersten Einblick in die Technologien HTML, CSS und JavaScript (JS) verhelfen und darüber hinaus deren technischen Hintergrund erläutern, dem handwerklichen Umgang damit näher bringen und Risiken und Nebenwirkungen aufzeigen.

Dabei möchte ich gleich an dieser Stelle darauf hinweisen, dass man beim Umgang mit HTML, CSS und JavaScript natürlich, wie auch oft bei jeder anderen Technologie, sich auskennen sollte oder zumindest abschätzen können muss, was Anpassungen bzw. Erweiterungen von einzelnen Teilen verursachen bzw. bewirken könnte. HTML dient dem grundlegenden Aufbau von Webseiten, CSS dem Design derselben und JavaScript der Manipulation von Inhalten (HTML) und Design (CSS). CSS verändert keinesfalls nur das Design einer Seite oder von HTML-Inhalten, sondern hat sehr oft auch starke Auswirkungen auf Funktionalität und Sicherheit, gerade wenn JavaScript eingesetzt wird und man sich dabei an CSS orientiert. Mehr dazu im Detail erläutere ich später.

In diesem ersten Beitrag möchte ich auf die grundlegende Struktur einer Webseite eingehen und in einem zweiten Beitrag anhand eines kleinen Beispiels den Aufbau visualisieren und greifbar machen. Dieses Beispiel entwickeln wir dann gemeinsam von Beitrag zu Beitrag weiter. Im dritten Beitrag wird es dann schon um das Gestalten mit CSS gehen. Im vierten Beitrag nutzen wir dann JavaScript zum Manipulieren von Inhalten. Weitere Beiträge sind heute noch nicht abschätzbar, aber die wird es geben…

HTML… Was ist das eigentlich?

Sobald Sie in einem normalen Browser eine Webseite aufrufen, sehen Sie in der Regel HTML-Inhalte, die einen bestimmten Aufbau und eine bestimmte Darstellung aufweisen. HTML spielt genau bei diesen Themen als so genannte Auszeichnungssprache die wichtige Rolle, dem Browser ein Konstrukt zu liefern, mit dessen Hilfe dieser die Seite strukturiert und darstellt.

Dabei kommen mehrere Bausteine und so genannte Tags zusammen, die eine entsprechend benötigte Struktur erst ermöglichen bzw. die Grundstruktur der Seite (Dokument genannt) organisieren:

  • die Dokumentenstruktur strukturiert Bausteine wie Seiteninformationen, Kommunikationsinformationen Browser vs. Server und Organisation des Inhalts (Tags: html, header, body)
  • die Kopfdatenstruktur organisiert wichtige Bausteine, die zum grundlegenden technischen Betrieb des Dokuments benötigt bzw. genutzt werden (Tags: title, meta, link, style, base, script, noscript)

Darüber hinaus gibt es dann noch jede Menge Bausteine, die den tatsächlich sichtbaren Inhalt organisieren:

  • die Seitenstruktur organisiert allgemein gültige Bausteine und Bereiche bzw. inhaltliche Teile des Dokuments (Tags: body, header, nav, aside, main, section, article, footer, address, h1, h2, h3, h4, h5 und h6)
  • die Textstrukturierung, mit der man Textbausteine allgemein organisieren kann (Tags: h1, h2, h3, h4, h5, h6, p, pre, blockquote, figure, figcaption, ol, ul, dl, li, dt, dd, hr, div)
  • die Textauszeichnung, mit der man Textbausteine formatieren kann (Tags: a, b, em, i, kbd, mark, s, small, strong, sub, sup, u, cite, q, dfn, abbr, code, var, samp, time, ruby, rt, rp, bdi, bdo, br, wbr, del, ins, span)
  • die Tabellenstrukturierung, mit der man sehr gezielt jedes einzelne Element einer Tabelle genau strukturieren und formatieren kann (Tags: table, caption, col, colgroup, thead, tbody, tfoot, tr, th, td)
  • die Formularstrukturierung, mit der man HTML-Formulare aufbauen und steuern kann (Tags: form, fieldset, legend, label, datalist, input, button, select, optgroup, option, textarea, keygen, output, progress, meter)
  • weitere Strukturen für Links (Tags: a, map, area) und Multimedia/Grafiken, interaktive Elemente und so genannte WebComponents, die jeweils in sich noch weitere Strukturen anbieten

Wer sich tiefer einlesen möchte, kann gerne den Eintrag Grundlagen bei Wikipedia, den Eintrag Struktur bei self-HTML oder die detaillierte Beschreibung bei W3Schools durcharbeiten. Speziell für tiefergehende Erläuterung der Tags kann man den Eintrag Struktur bei self-HTML gezielt empfehlen.

Was sind Tags?

Das Wort “Tag” stammt aus dem Englischen und lässt sich platt und einfach mit “Etiketten” übersetzen.

Eingesetzt werden Tags einerseits zum “Etikettieren” von Inhalten (z.B. Texten). Im Deutschen passt bei diesem Anwendungsfall daher eher der Begriff “Schlagwörter”. Passende Tags für den Beitrag, den Sie gerade lesen, wären z.B. “CSS”, “HTML”, “JavaScript”, “Web” oder “Tutorial”. Dadurch werden Inhalte übersichtlich organisiert und werden für Leser leichter zugänglich. Tags in Inhalten können auch “automatisiert” verwendet werden. z.B. werden in Blogs definierte Tags automatisch gesucht und im Erfolgsfall wird der betroffene Beitrag automatisch bestimmten Kategorien zugeordnet (der Beitrag erhält quasi Etiketten).

Zum anderen werden Tags als so genannte HTML-Tags (besser übersetzt: HTML-Elemente) eingesetzt. Wikipedia erklärt den Begriff sehr gut mit folgenden Worten:

“Ein HTML-Element ist eine Art HTML (Hypertext Markup Language)-Dokumentkomponente, eine von mehreren Arten von HTML-Knoten (es gibt auch Text-Knoten, Kommentar-Knoten und andere). Ein HTML-Dokument besteht aus einem Baum von einfachen HTML-Knoten, wie z.B. Text-Knoten, und HTML-Elementen, die Teile des Dokuments mit Semantik und Formatierung versehen (z.B. Text fett machen, in Absätzen, Listen und Tabellen organisieren oder Hyperlinks und Bilder einbetten). Für jedes Element können HTML-Attribute angegeben werden. Elemente können auch Inhalt haben, einschließlich anderer Elemente und Text.” – Zitat von Wikipedia

Also werden HTML-Tags zur “Etikettierung” von bestimmten Bereichen, wie z.B. Textblöcken oder Textabschnitten, Listen, Tabellen, Links etc. etc. etc.

Dabei gibt es Tags die einleitend geöffnet werden und nach dem Ende des gewünschten Blocks wieder geschlossen werden müssen, z.B. <b>DIESER TEXT WIRD FETT GEDRUCKT DARGESTELLT</b>.
Andere Tags wiederum werden nicht geschlossen, da diese keinen echten Inhalt beinhalten, wie z.B. der Zeilenumbruch <br />. Zu beachten ist bei nicht-einschließenden Tags jedoch das / vor der schließenden Klammer >.

Der Vollständigkeit halber sei hier schon einmal erwähnt, dass man mit “Attributen” bestimmte “Parameter” an Tags übergeben kann, die der Browser dann entsprechend berücksichtigen kann. z.B. kann man in fast jedem HTML-Element ein Attribut “style” mit verschiedenen Inhalten übergeben, die das betroffene Element per CSS im Design manipulieren.

Eine ziemlich aktuelle Liste finden Sie bei MediaEvent.

Für was benötigt man CSS?

Auch wenn wir mit einfachen HTML-Tags die Struktur und die Darstellung zum Teil anpassen (wir sprechen von “Manipulieren”) können, wie z.B. den Fettdruck mit <b></b>, müssen die meisten Inhalte aktiv gestyled werden. Das können wir problemlos mit CSS.

In der Regel werden dazu 2 technische Varianten eingesetzt:

  1. Zum einen definiert bei jedem HTML-Element einzeln und direkt im Element über das “style”-Attribut verschiedene Parameter, die das Aussehen des betroffenen Elements steuern.
    Das hat z.B. den Vorteil, dass die Manipulation direkt am Element erfolgt und ziemlich sicher auch nur das gewünschte Element betrifft.
    Nachteilig ist aber z.B. der große Aufwand, weil man bei wiederkehrenden Elementen trotz allem bei jedem einzelnen Element quasi das selbe im Style-Attribut angeben muss. Viel Code und sehr viel Wartungsaufwand (Erweiterungen und Anpassungen). Und darüber hinaus nicht reproduzierbar (damit ist die Wiederverwendbarkeit von Bausteinen gemeint).
  2. Die grundsätzlich bessere Variante ist die Benutzung von so genannten Klassen. Jedem HTML-Element kann eine oder mehrere CSS-Klassen zugewiesen werden. Diese CSS-Klassen definieren dann bestimmte Stil-Parameter, die dann bei Verwendung dem nutzenden Element übergeben werden. Diese Klassen werden dabei entweder direkt im HTML-Dokument in einem bestimmten Bereich (darauf gehe ich in einem späteren Beitrag detaillierter ein) definiert, oder (was auch die bessere Variante darstellt) in so genannten CSS-Dateien organisiert, die dann nur 1x in das benutzende Dokument geladen werden müssen.
    Die vielen Vorteile liegen dadurch auf der Hand: Hohe Übersichtlichkeit, da die Design-Klassen klar und nachvollziehbar organisiert werden. Für wiederkehrende Elemente wird viel weniger Code benötigt, wofür sich Entwickler aber auch Besucher der betroffenen Webseite bedanken werden, da “weniger Code” = “weniger Ladezeit” bedeutet. Wartungsarbeiten lassen sich deutlich einfacher umsetzen, da Erweiterungen und Veränderungen meistens nur an der einen Stelle vorgenommen werden müssen, an der die Klasse definiert worden ist.

Im dritten Beitrag gehe ich viel tiefer auf CSS ein. Wer sich aber jetzt schon einmal tiefer einarbeiten möchte, kann das z.B. mit dem Wikipedia-Beitrag tun. Weitere gute Quellen gibt es unzählige, die sich leicht über Google finden lassen.

Und was hat es jetzt nochmal mit JavaScript (JS) auf sich?

JavaScript (in der Regel als “JS” bezeichnet), ist eine so genannte Skriptsprache (auch hier hilft ein Wikipedia-Eintrag jetzt schon bei der Vertiefung), die im Browser des Benutzers ausgeführt wird. Dadurch spart man oft Massen an Daten, die nicht mehr an einen Server übermittelt werden muss.

Ein kleines Beispiel, warum der Einsatz von JS viel Sinn ergibt:
Stellen Sie sich vor, wir hätten einen kleinen Taschenrechner in einer serverbasierten Programmiersprache wie z.B. PHP entwickelt. Der Server erstellt die grafische Benutzeroberfläche und liefert diese an den Browser aus. Jede Eingabe des Taschenrechners muss an den Server übermittelt werden, damit dieser die letzte Aktion in den Rechenweg aufnimmt, die Rechnung also solches vornimmt und die grafische Benutzeroberfläche anpasst und wieder aktualisiert an den Browser ausliefert. Sehr viel Aufwand für eine vergleichsweise sehr geringe Anforderung. Der Server wird zusätzlich belastet und beide Seiten (Ihr Browser und der Server) haben unnötig hohe Datenaufkommen. Hinzu kommt dann noch die Wartezeit, die alle Benutzer in Kauf nehmen müssten, denn hat der Server gerade viele Aufgaben zu erledigen, muss er seine Ressourcen auf alle Anfragen aufteilen, was dann zur Folge hat, dass alle Anfragen mehr Zeit zur Abarbeitung benötigen.

Jetzt kommt JavaScript zum Einsatz. Der Server liefert einmalig an den Browser die grafische Benutzeroberfläche aus und im Vergleich zur Variante von oben zusätzlich und ebenfalls einmalig JavaScript-Dateien, die unsere gewünschten “Manipulationen” enthalten. Die Logik der JavaScript-Dateien wird direkt im Browser ausgeführt. Sprich wir sparen uns komplett den Austausch mit und die Arbeit vom Server. Sämtliche Manipulationen im so genannten DOM (HTML-Struktur des gesamten Dokuments) erfolgen direkt im Browser, die Berechnung wird ebenfalls komplett durch JavaScript im Browser erledigt.
Dadurch spart der Benutzer massiv Zeit (keine Server-Anfragen, kein Neuladen der Seite notwendig) und Datenaufkommen. Darüber hinaus kann durch JavaScript das Aktionsverhalten des Taschenrechners interaktiv gestaltet werden, was ohne JavaScript nur schwer möglich ist.

Tatsächlich kann man also unter anderem mit JavaScript HTML-Elemente manipulieren, und das nicht nur im Design, sondern auch in Inhalt, Funktion und Aufbau. Nachfolgend kurz die Anwendungsgebiete für den Anwendungsfall einer Webseite, sowie mögliche Risiken, die man bei JavaScript einfach nicht ohne Weiteres wegdiskutieren kann.

Typische Anwendungsgebiete von JavaScript im Webbrowser sind (Zitat Wikipedia):

  • dynamische Manipulation von Webseiten über das Document Object Model
  • Plausibilitätsprüfung (Datenvalidierung) von Formulareingaben noch vor der Übertragung zum Server
  • Anzeige von Dialogfenstern
  • Senden und Empfangen von Daten, ohne dass der Browser die Seite neu laden muss (Ajax)
  • Vorschlagen von Suchbegriffen während der Eingabe
  • Werbebanner oder Laufschriften
  • Verschleierung von E-Mail-Adressen zur Bekämpfung von Spam
  • mehrere Frames auf einmal wechseln oder die Seite aus dem Frameset lösen
  • Schreib- und Lesezugriff auf Cookies und den Web Storage innerhalb des Browsers

Missbrauch:
Einige Anwendungen, die mit JavaScript möglich sind, agieren teilweise gegen den Wunsch des Benutzers oder widersprechen dem Prinzip der geringsten Verwunderung. Einige Browser bieten daher Funktionen an, die derartige JavaScript-Funktionen unterdrücken.
Beispiele dafür:

 
  • Verschleiern von Internetadressen, auf die ein Link verweist
  • Deaktivieren des Kontextmenüs, um zu erschweren, dass Bilder oder die gesamte Seite abgespeichert werden können
  • Deaktivieren der Kopierfunktion, um zu erschweren, dass Texte oder Bilder kopiert werden können
  • Unaufgeforderte (Werbe-)Pop-ups oder Pop-unders oder aufeinanderfolgende Dialogfenster, die den Benutzer behindern
  • Ungewolltes Schließen des Browserfensters
  • Ungewollte Größenänderung des Browserfensters
  • Barrierearme Webseiten zeichnen sich dadurch aus, dass sie auch bei abgeschaltetem JavaScript möglichst uneingeschränkt nutzbar bleiben. Teilweise schränkt das deaktivierte JavaScript die Benutzbarkeit einer Webseite ein.
  • Maßnahmen, die an den Sicherheitseinstellungen des Browsers vorbei ein Wiedererkennen eines Benutzers bei einem späteren Besuch einer Website erlauben (siehe Anonymität im Internet)
  • Bei anfälligen Webanwendungen kann JavaScript auch von Dritten missbraucht werden, etwa per XSS (Codeeinschleusung).

Sie sehen also zum einem, dass JavaScript sehr viele Vorteile mit sich bringt und eigentlich aus meiner Sicht mittlerweile auch unabkömmlich ist, um zum einen Ressourcen jedweder Natur zu sparen und darüber hinaus das Benutzererlebnis deutlich zu verbessern. Aber Sie sehen auch, dass die Anwendung auch einige Risiken birgt (jede Programmiersprache birgt Risiken), diese jedoch mit ordentlicher Planung und Programmierung verhindert werden können. Denn es gilt: “Wer im Internet schlampig arbeitet, öffnet Einbrechern die Türen!”.

Was bringt mir dieses Wissen über HTML, CSS und JavaScript?

Es ist wichtig zu wissen, wie eine Seite technisch aufgebaut ist, bevor man daran Veränderungen vornehmen sollte. Oft kommt es vor, dass Benutzer und Unternehmen mit Dringlichkeit auf uns zukommen, weil jemand in deren Auftrag mit guter Absicht versucht hat, Inhalte von betroffenen Webseiten so anzupassen, wie gewünscht. Oft mit dem nachvollziehbaren Gedanken, einfach nur Kosten einzusparen. Leider geht der Plan oft nicht so auf, wie vom Auftageber oder Benutzer erwartet.

Grund dafür ist oft die Tatsache, dass sehr häufig (aber keinesfalls immer) von eher unerfahrenen Entwicklern oder Laien einfach Codeschnipsel über google.de gesucht und leider oft auch ohne das eigentlich nötige Hintergrundwissen einfach und banal in den vorhandenen Content eingesetzt werden. Dabei kommt es im Ergebnis dessen zu Störungen der Ansehnlichkeit der Seite als solches, zu Zerstörungen des gesamten Designs, zu Funktionsstörungen, zu Sicherheitslücken und nicht selten sogar zu Komplettausfällen. Dann hilft es nur noch, den Fachmann einzubeziehen, der dann aufräumt und alles wieder gerade biegt. Und das kostet dann oft mehr, als wenn man gleich von vornherein den Fachmann für sein Anliegen genutzt hätte.

Gerade das Beispiel von JavaScript zeigt deutlich, wie man zum einen auf bestimmte Technologien wie JavaScript nicht verzichten kann, da man ja einen gewissen Anspruch an Aussehen, Interaktion und Benutzererlebnis stellt, man zum anderen sich damit aber zumindest in den wichtigsten Grundlagen auskennen sollte, um nicht versehentlich ein offenes Tor für Hacker & Co. zu bieten. Aber auf all das gehe ich in den nächsten Beitrag detailliert ein.

Im nächsten Beitrag bauen wir gemeinsam das erste Beispiel auf.

©Time4Innovation | Oliver Schmidt

Sie benötigen Unterstützung bei Ihrer Webseite oder einem Ihrer Projekte?
Kontakt