Grundlagen und Einstieg in HTML, CSS und JavaScript

Diese Beitragsreihe soll Ihnen zu einem ersten Einblick in die Technologien HTML, CSS und JavaScript (JS) verhelfen. Darüber hinaus werde ich deren technischen Hintergrund erläutern und den handwerklichen Umgang damit näher bringen. Risiken und Nebenwirkungen werde ich ebenfalls gezielt 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. Zumindest sollte man abschätzen können, was Anpassungen bzw. Erweiterungen von einzelnen Teilen verursachen bzw. bewirken könnte.

HTML dient dem grundlegenden Aufbau von Webseiten.
Durch CSS wird das Design definiert.
JavaScript ermöglicht die interaktive Manipulation von Inhalten (HTML) und Design (CSS).

CSS verändert keinesfalls nur das Design einer Webseite, 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 Details dazu 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…

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

HTML liefert sozusagen einen “Bauplan” für Webseiten.

Dabei kommen mehrere Bausteine und sogenannte Tags zusammen. Dadurch wird eine entsprechend benötigte Struktur überhaupt erst ermöglicht bzw. die Grundstruktur der Seite (Dokument genannt) organisiert.

Seitenbausteine wären z.B.:

• die Dokumentenstruktur strukturiert Bausteine wie Seiteninformationen, Kommunikationsinformationen (die Browser mit Servern austauschen) und die 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 Seiten-Struktur 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 Text-Strukturierung, 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 Tabellen-Struktur, 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 Formular-Struktur, 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.

Sehr empfehlenswert ist auch das Tutorial vom Developer-Programm von Mozilla. Dieses findet man allerdings aktuell nur englisch-Sprachig unter HTML: HyperText Markup Language.

Das Wort “Tag” stammt aus dem Englischen und lässt sich platt und einfach mit “Etikett” ü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 genutzt, 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 oder im Developer-Programm von Mozilla unter HTML elements reference.

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

In der Regel werden dazu 2 (3) technische Varianten eingesetzt:

1. Zum einen definiert man 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, da 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.
3. Es gibt auch noch eine dritte Möglichkeit: Die Kombination von Möglichkeit 1 und 2. Man verwendet CSS-Dateien bzw. CSS-Klassen um ein “generelles” Design zu definieren.
   Einzelne Elemente kann man dann gezielt über deren “IDs” ansprechen und das “generelle” Design so manipulieren. Alternativ dazu kann durch Verwendung des Style-Attributes einem jeden Element die gewünschte Individualität eingehaucht werden.

In einem der nächsten Beiträge 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.

Sehr empfehlenswert ist auch wieder ein entsprechendes Tutorial beim Developer-Programm von Mozilla. Das Tutorial erreicht man aktuell nur englisch-Sprachig unter CSS: Cascading Style Sheets.

JavaScript (in der Regel kurz und bündig als “JS” bezeichnet), ist eine so genannte Skriptsprache, die im Browser des Benutzers ausgeführt wird. Dadurch spart man oft Massen an Daten, die nicht mehr zwischen Browser und Servern ü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 in Form von HTML, CSS und/oder JS. Anschließend liefert der Server diese Informationen 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 (der verwendete Browser und der Server) weisen ein unnötig hohes Datenaufkommen und ein unvorteilhaftes Rechenaufkommen auf. 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 ggf. auf alle Anfragen aufteilen. Das hat dann wiederum 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. Der Server erhält für dieses Beispiel idR. nur eine einzige Anfrage, was natürlich einen enormen Leistungsvorteil mit sich bringt.

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. Aus meiner Sicht ist JavaScript mittlerweile unabkömmlich. Man kann zum einen Ressourcen jedweder Natur zu sparen und darüber hinaus das Benutzererlebnis deutlich zu verbessern. Aber Sie sehen, dass die Anwendung auch einige Risiken birgt (jede Programmiersprache birgt Risiken). Diese können jedoch mit ordentlicher Planung und sauberer Programmierung verhindert werden. Denn es gilt: “Wer im Internet schlampig arbeitet, öffnet Einbrechern die Türen!”.

Auch hier hilft ein Wikipedia-Eintrag jetzt schon bei der Vertiefung. Analog dazu kann ich wieder ein Tutorial im Developer-Programm von Mozilla empfehlen, welches unter JavaScript aufgerufen werden kann.

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 Auftrageber oder Benutzer erwartet.

Codeschnipsel sind schnell gefunden und eingefügt… Aber ist das wirklich die Lösung für ein Problem?

Grund dafür ist oft die Tatsache, dass sehr häufig (aber keinesfalls immer) von eher unerfahrenen Entwicklern oder Laien einfach Codeschnipsel über Google 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 dann 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 “räumt dann auf” und “biegt alles wieder gerade”. 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. Schließlich stellt man ja einen gewissen Anspruch an Aussehen, Interaktion und Benutzererlebnis. Zum anderen sollte man sicher stellen, sich zumindest in den wichtigsten Grundlagen auszukennen, um nicht versehentlich ein offenes Tor für Hacker & Co. zu bieten. Aber auf all das gehe ich in den nächsten Beiträgen detailliert ein.