HTML & CSS - Was ist das überhaupt?
Die Abkürzung „HTML“ steht für den englischen Begriff der „Hypertext Markup Language“ (dt. „Hypertext-Auszeichnungssprache“). HTML ist textbasiert und dient zur Strukturierung digitaler Dokumente wie Texte mit Links, Bildern und anderen Inhalten. HTML bildet die Grundlage des Internets und wird von Webbrowsern dargestellt. Neben den offensichtlich abgebildeten Daten, können HTML-Dokumente außerdem sogenannte Meta-Daten enthalten. Solche Meta-Daten sind unter anderem Informationen zum Autor, der verwendeten Sprache oder zum Inhalt des HTML-Dokuments. HTML dient nicht zur Formatierung des Inhalts, d.h. wie das Design auf einer HTML basierten Website aussieht, entscheidet nicht das HTML-Dokument selbst. Viel mehr spielen hierbei zwei andere Faktoren eine Rolle: Der genutzte Webbrowser und die eingebundenen CSS-Dateien.
Die Abkürzung „CSS“ steht hier für den englischen Begriff der „Cascading Style Sheets“(dt. „gestufte Gestaltungsbögen“). Auf verschiedene CSS-Dateien wird im nicht abgebildeten Teil einer HTML-Datei verwiesen, wodurch der Webbrowser des Users Informationen zur korrekten Darstellung der Inhalte erhält und diese somit wie beabsichtigt darstellen kann.
Doch warum sollten Sie als User ein Grundverständnis von HTML und CSS haben? Wie bereits erwähnt, basieren sämtliche Seiten des Internets auf diesen beiden Standard-Systemen. Entwickeln Sie Ihre neue Website mit einem Baukasten, nutzen Sie ein CMS oder beauftragen Sie eine Webdesign-Agentur; im Endeffekt besteht das fertige Produkt „Homepage“ immer aus HTML- und CSS-Dateien. Entdecken Sie nun einen Fehler oder ein Problem auf Ihrer Website oder haben eine Idee, von der Sie nicht sicher sind, wovon deren Umsetzung abhängig ist, so kommen Sie mit einem Grundwissen in HTML und CSS einer Lösung schon einen Schritt näher. Aus diesem Grunde stellen wir Ihnen im Folgenden eine vereinfachte Einführung in beide Systeme zur Verfügung. Das Schöne hieran ist, dass Sie zum Nachvollziehen nichts weiter als Ihren PC oder Laptop und die darauf schon installierte Software benötigen.
Kleine Einführung: HTML
Um diese Einführung praktisch nachzuvollziehen, benötigen Sie Ihren PC oder Ihren Laptop. Welches Betriebssystem Sie hierbei nutzen, ist völlig egal. Außerdem benötigen Sie ein einfaches Text-Bearbeitungsprogramm (Achtung: Keine Office-Lösungen!) wie Editor (Windows), Kwrite (Linux) oder Keynote (Apple).
Wir beginnen unsere Einführung, indem wir das Text-Bearbeitungsprogramm unserer Wahl öffnen. In der nachfolgenden Darstellung sind alle grundlegenden Bestandteile einer HTML-Datei aufgeführt und erklärt. Übernehmen Sie diese Schritt für Schritt in das geöffnete Programm und vollziehen Sie nach, wie sich eine standardmäßige HTML-Datei aufbaut.
| Im Text-Bearbeitungsprogramm | Erklärung |
|---|---|
| <!DOCTYPE html> | Erklärung für den Browser, dass das vorliegende Dokument ein HTML-Dokument ist |
| <html> | Hier beginnt die eigentliche HTML |
| <head> | Im head befinden sich Meta-Informationen, also solche Information, welche nicht als Text dargestellt werden |
| <title>Der Titel unserer Seite</title> | Angabe des Titels der Seite (erscheint im Browser oben) |
| <style>body {background-color:powderblue;}</style> | Möglichkeit zur Angabe von Design-Angaben; in diesem Fall soll der Hintergrund des body die Farbe „powderblue" erhalten |
| <link rel="stylesheet" href="beispiel.css"> | Hier verlinken wir zur CSS-Datei, die das komplette Design unserer Seite enthält; wie man diese erstellt, sehen wir in der CSS-Einführung im Anschluss |
| <meta charset="UTF-8"> | Angabe für den Browser, welche Zeichentypen er laden muss bzw. zu erwarten hat (nur lateinische, auch asiatische, etc.); UTF-8 deckt alle bekannten Sprachen ab |
| <meta name="description" content="Hier ensteht die Beispielseite zur Kleinen HTML-Einführung des dbl"> | Beschreibung der Seite |
| <meta name="keywords" content="HTML, CSS, dbl, Logopädie, Pizza"> | Stichpunkte zur Seite, welche von Suchmaschinen genutzt werden |
| <meta name="author" content="Max Mustermann"> | Name des Autors |
| </head> | Hier endet der head |
| <body> | Im body befinden sich alle Elemente, die anschließend auch im Browser angezeigt werden sollen |
| <h1> </h1> | Überschrift der Größe 1 |
| <h2> </h2> | Überschrift der Größe 2 |
| <h3> </h3> | Überschrift der Größe 3 |
| <h4> </h4> | Überschrift der Größe 4 |
| <p>Absatz 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus lacus mauris, et eleifend ante malesuada nec. Maecenas porttitor euismod scelerisque. Phasellus consectetur ligula turpis, a varius ipsum sodales non. Sed lobortis nulla nec diam sollicitudin aliquam. Phasellus vel massa sit amet lectus lacinia cursus. </p> | Ein Absatz mit Beispieltext |
| <p>Absatz 2: Cras ultrices sapien quis enim dignissim, non bibendum erat facilisis. Pellentesque mi purus, ornare ut aliquet in, egestas sollicitudin risus. Phasellus sed interdum velit, lobortis fermentum nunc.</p> | Ein weiterer Absatz mit Beispieltext |
| </br> | Hiermit verursachen wir einen Zeilenumbruch – Absatz 2 und 3 haben einen größeren Abstand zueinander als Absatz 1 und 2 |
| <p>Nam aliquet cursus hendrerit. Nunc lobortis luctus auctor. Suspendisse neque libero, rhoncus vel libero eu, auctor venenatis ex. Vivamus sed velit eget orci lacinia malesuada. Ut pulvinar risus id vulputate rhoncus. Quisque laoreet tellus at neque ullamcorper, eu commodo felis ultrices.</p> | Ein weiterer Absatz mit Beispieltext |
| <img src=“http://www.dbl-ev.de/fileadmin/templates/img/logo2.jpg“ alt=“dbl Logo“/> | So fügt man ein einfaches Bild ein; in diesem Fall das Logo des dbl. Welches Bild angezeigt wird, liegt an der Angabe hinter src. Fügen Sie hier einen Link zu einem anderen Bild ein, wird stattdessen dieses angezeigt |
| </br> | Ein weiterer Zeilenumbruch |
| <a href=“http://www.dbl-ev.de/“>Klickbarer Link</a> | Einfügen eines Links, wie man ihn von fast allen Seiten kennt. Wohin der Link führt, liegt hierbei an der Angabe nach href. Fügen Sie hier einen anderen Link als den zur dbl-Homepage ein, führt der Link zu dieser Seite. |
| </body> | Hier endet der body |
| </html> | Hier endet die HTML |
Wie Sie wahrscheinlich festgestellt haben, sind alle Elemente der HTML regelmäßig aufgebaut. In der Regel bestehen sie aus einem Teil in spitzen Klammern und einem weiteren Teil in spitzen Klammern, wobei hier ein Schrägstrich ergänzt wird. Diese Art der Bestandteile nennt man „tags“. Neben der hier exemplarisch dargestellten Tags gibt es noch viele weitere, etwa zur Erstellung von Tabellen – tatsächlich beruht diese Anleitung auf einer HTML-Tabelle.
Haben Sie alle Bestandteile unserer Beispiel-HTML in Ihr Text-Bearbeitungsprogramm übernommen, können Sie Datei abspeichern. Achten Sie hierbei darauf, dass Sie die Datei auch wirklich als HTML abspeichern. Am einfachsten stellen Sie dies sicher, indem Sie die Datei z.B. „beispiel.html“ nennen.
Nachdem Ihre erste selbsterstellte HTML-Datei nun gespeichert ist, können Sie diese mit einem Doppelklick öffnen. Da Ihr Browser im Regelfall für das Öffnen von HTML-Dateien zuständig ist – immerhin macht er ja im Internet auch nichts anderes – sollte dieser Ihre HTML nun öffnen. Vor sich sehen Sie nun das soeben erstellte HTML-Dokument.
Kleine Einführung: CSS
Wie Sie nun sicherlich sehen, sind bloße HTML-Dateien nichts anderes als schwarzer Text auf weißem Hintergrund – optisch also nicht wirklich ansprechend. Um unsere erstellte Seite etwas farbenfroher zu gestalten, nutzen wir eine CSS-Datei, die wir im Folgenden gemeinsam erstellen.
Hierzu benötigen Sie erneut keine besondere Software, sondern nur das zuvor bereits genutzte Text-Bearbeitungsprogramm.
Bevor wir mit der Arbeit an der eigentlichen CSS-Datei beginnen, müssen wir an unserer HTML-Datei einige kleine Änderungen vornehmen.
| Im Text-Bearbeitungsprogramm | Erklärung |
|---|---|
| <p class="absatz1">Absatz 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus lacus mauris, et eleifend ante malesuada nec. Maecenas porttitor euismod scelerisque. Phasellus consectetur ligula turpis, a varius ipsum sodales non. Sed lobortis nulla nec diam sollicitudin aliquam. Phasellus vel massa sit amet lectus lacinia cursus. </p> | Indem wir den Paragraphen eine class zuweisen, machen wir sie für die CSS-Datei aufrufbar. Hiermit können wir in der CSS-Datei genau bestimmen, wie welcher Paragraph aussehen soll. |
| <p class="absatz2">Absatz 2: Cras ultrices sapien quis enim dignissim, non bibendum erat facilisis. Pellentesque mi purus, ornare ut aliquet in, egestas sollicitudin risus. Phasellus sed interdum velit, lobortis fermentum nunc.</p> | Würden wir die einzelnen Paragraphen nicht benennen, könnten wir nur über das Aussehen aller Paragraphen gemeinsam bestimmen. |
| <p class="absatz3">Nam aliquet cursus hendrerit. Nunc lobortis luctus auctor. Suspendisse neque libero, rhoncus vel libero eu, auctor venenatis ex. Vivamus sed velit eget orci lacinia malesuada. Ut pulvinar risus id vulputate rhoncus. Quisque laoreet tellus at neque ullamcorper, eu commodo felis ultrices.</p> |
Nachdem die HTML-Datei so angepasst und gespeichert ist, können wir eine neue Datei mit dem Text-Bearbeitungsprogramm beginnen. Diese neue Datei wird unsere CSS-Datei, welche wir wie folgt füllen.
| Im Text-Bearbeitungsprogramm | Erklärung |
|---|---|
| h1 { text-decoration: underline; } | Hier bestimmen wir, dass die Überschrift h1 unterstrichen sein soll. |
| h2 { color: blue; } | h2 hingegen wird blaue Schrift enthalten. |
| h3 { font-style: italic; } | Für h3 bestimmen wir kursive Schrift. |
| h4 { text-decoration: underline; font-style: italic; color: blue; } | Und h4 sieht aus wie die Kombination von h1, h2 und h3. |
| p { background-color: cyan; } | Außerdem möchten wir, dass unsere Paragraphen alle einen Cyan-farbenen Hintergrund haben. |
| .absatz1 { font-size: 120%; margin: 10px; } | Der erste Paragraph, dem wir eben den Namen „absatz1“ zugewiesen haben, soll eine vergrößerte Schrift enthalten und um zehn Pixel weiter von links, rechts, oben und unten entfernt sein. |
| .absatz2 { font-weight: bold; padding: 10px; } | Der zweite Paragraph soll in fetter Schrift abgebildet werden. Zudem bestimmen wir, dass der Inhalt, d. h. die Schrift, zehn Pixel von den äußeren Begrenzungen des Absatzes entfernt sein soll. Den Unterschied zwischen margin und padding sieht man im Vergleich von Paragraph 1 und 2. |
| .absatz3 { border: 1px solid black; } | Der dritte Paragraph soll in einem Kasten mit einer Linienstärke von einem Pixel in schwarz sein. |
| img { margin: 10%; } | Das Bild möchten wir als 10 % größer als das Original haben. |
| a { color: red; } | Unser Link soll in rot erscheinen |
| a:hover { background-color: yellow; } | und, wenn man mit der Maus darüber geht, einen gelben Hintergrund haben. |
Schließlich speichern wir die Datei unter dem Namen „beispiel.css“ am gleichen Ort wie unsere HTML-Datei ab. Öffnen Sie die HTML-Datei nun erneut mit Ihrem Browser, so können Sie die Veränderungen sehen, welche wir durch unsere CSS-Datei bewirkt haben
Fazit
Natürlich ist unsere Beispiel-Seite kein Meisterstück des Web-Designs, jedoch war dies auch nie das Ziel dieser Einführung. Vielmehr verstehen Sie nun, wie die Grundlagen aller Internetseiten funktionieren. Und – so kompliziert ist das gar nicht. Wenn Sie sich in Zukunft mit dem Thema Webauftritt und vielleicht auch mit Ihrer eigenen Homepage beschäftigen, wissen Sie jetzt, was Baukasten und Co. für Sie leisten.