Webseiten mit HTML und CSS

Kurze Einführung

Im Internet gibt es viele gute Einführungen zu HTML und CSS (Webseiten, Videos, interaktive Seiten). Diese Seiten sollen also nur einen einfachen Überblick und einige Aufgaben bieten.

Zum Entwickeln von Webseiten benötigt man nur einen einfachen Texteditor.

HTML

Was ist HTML?

HTML (HyperText Mark-up Language) bzw. XHTML (Extensible HyperText Mark-up Language) sind einfache Textdateien, welche vom Browser interpretiert werden um Webseiten darzustellen. Hier ein Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <title>Meine erste Webseite</title>
  </head>

  <body>
    <h1>Dies ist die Überschrift (english: header)</h1>
    <p>Das ist ein erster Absatz</p>
    <p>Das ist ein zweiter Absatz mit <b>fetten (english: bold)</b> und
<i>kursiven (english: italic)</i> Wörtern.</p>
  </body>
</html>

Aufgabe H1:

Kopiere den Text in einen Editor (Wordpad, Libreoffice Writer, Kate oä.). Speichere ihn als reinen Text (.txt), aber gib ihm den Namen index.html (also Endung .html statt .txt). Rufe die Datei nun mit deinem Webbrowser auf.

Eine minimalistische Webseite

Die wichtigsten Tags

Das HTML Dokument

In der ersten Zeile sollte angegeben werden in welchem Dialekt die Datei geschrieben wurde. Alle HTML Dokumente beginnen so mit der Typendeklaration:

<!DOCTYPE html>`

(weitere Infos: http://de.html.net/tutorials/html/lesson14.php).

Dann folgen die Tags für das HTML-Dokument selbst <html> und </html>. Der sichtbare Teil des Dokuments befindet sich zwischen <body> und </body>.

Überschriften (headings) und Abschnitte (paragraphs)

Überschriften dienen der Strukturierung. Es existieren die Tags <h1> bis <h6>. Jeder Text muss sich zwischen Tags befinden. Im Normalfall wird der Text in Absätzen gegliedert. Dazu dient das <p>-Tag.

Formatieren mit Tags

Das Bold-Tag <b> ermöglicht es den Text Fett darzustellen. Mit dem Italic- Tag <i> wird der Text kursiv (schief) dargestellt. Das Small-Tag (<small>) gibt kleineren Text aus. Wichtiger Text kann mit <strong> dargestellt werden, Hervorzuhebender Text mit dem Emphasis-Tag <em>. Programmcode mit dem Code-Attribut <code>. Zitate mit dem Quote-Tag <q>. All diese Tags können natürlich auch kombiniert werden: Beispiel:

<b><i><code> import math </code></i></b>

HTML Links

Eine wichtige Eigenschaft von HTML ist das Verlinken von Informationen. HTML- Links werden mit dem <a> Tag definiert. Beispiel:

<a href="http://www.weigu.lu/c/python.lu">Link zur Python Seite</a>

Im Start-Tag wird die Link-Adresse hinter dem href-Attribut mit href="http://www.weigu.lu/c/python" angegeben. Attribute liefern zusätzliche Informationen in HTML! Der ganze Text zwischen dem Start- und End- Tag (hier der Text: "Link zur Python Seite") wird extra formatiert und kann angeklickt werden.

HTML Bilder

HTML Bilder werden mit dem Image-Tag <img> definiert. Beispiel:

<img src="ltam_logo_cmyk.png" alt="LTAM-Logo" width="104" height="142">

Hier stehen mehrere Attribute zur Verfügung: Die Quelldatei wird mit Source- Attribut src="w3schools.jpg" angegeben Der Text hinter dem alternative Text-Attribut alt, erscheint wenn der Browser die Datei nicht anzeigen kann. Er ist auch wichtig für blinde Webbenutzer, oder Suchmaschinen. Die width- und height-Attribute ermöglichen das Anpassen des Bildes in Pixel an die Seitengröße. Allerdings ist es sinnvoller diese Attribute in der CSS-Datei zu definieren (siehe später).

Spezielle Elemente mit nur einem Tag

Es gibt auch leere Elemente, die im gleichen Tag geöffnet und geschlossen werden. Das <br>-Tag (break), ruft einen erzwungenen Zeilenumbruch hervor. Das <hr>-Tag zeichnet eine horizontale Linie (horizontal rule).

HTML-Kommentare

Genau wie in jeder Programmiersprache soll der HTML-Code wenn nötig mit sinnvollen Kommentaren versehen werden. Kommentare werden zwischen  eingefasst. Beispiel:

<!-- Seiten Menü (dies ist ein HTML-Kommentar) -->

Aufgabe H3:

Erstelle eine Seite in der alle oben genannten Tags enthalten sind, und teste sie. Lade dazu ein beliebiges Bild aus dem Internet.

Aufgabe H4:

Informiere dich über die Tags zum Erstellen einer geordneten sowie eine ungeordneten Liste. Erweitere deine Seite um zwei Listen.

Aufgabe H5: (für Fleißige)

Informiere dich über die Tags zum Erstellen einer Tabelle. Erweitere deine Seite um eine Tabelle.

CSS (Cascading Style Sheets)

Mit HTML werden Inhalte strukturiert. Mit CSS wird der strukturierte Inhalt formatiert. CSS ist eine Sprache, die das Aussehen, den Stil (style) von HTML-Dokumenten definiert. CSS kann man zum Festlegen von Schriftarten, Farben, Rändern, Linien, Breiten, Höhen, Hintergrundbildern usw. Nutzen. Daneben ermöglicht es die eine präzise Kontrolle über das Layout vieler Webseiten aus einer einzigen Style- Sheet-Datei heraus, und verschiedene Layouts für verschiedene Medien (PC- Bildschirm, Handy, Druck). Der folgende Link vermittelt einen Eindruck wie unterschiedlich eine HTML-Seite mit unterschiedlichen Style-Sheet-Dateien dargestellt werden kann: http://www.mezzoblue.com/zengarden/alldesigns/ (bzw: http://www.csszengarden.com/)

HTML kümmert sich um die grobe Struktur eines Textes. Mit dem style-Attribut kann zwar das Layout mit Hilfe von CSS-Angaben innerhalb des HTML-Dokuments verändert werden (es existiert sogar auch ein style-Tag mit dem dies möglich ist). Möchte man aber für eine ganze Seite oder mehrere Seiten ein schönes Layout gestalten, so ist das style-Attribut und das style-Tag wenig geeignet. Der HTML- Code wird unübersichtlich. Inhalte sind nicht mehr gut erkennbar und nachträgliche Änderungen sind schwierig. Hier kommt nun CSS in einer externen Datei ins Spiel. Die Trennung von Aussehen und Inhalt einer Seite vereinfacht die Pflege derselbigen wesentlich. Ein externes Style-Sheet ist eine Textdatei mit der Endung .css. Der Einfachheit halber speichern wir die Datei im gleichen Ordner wie unsere HTML- Datei. Um dem HTML-Dokument anzugeben wo sich die CSS-Datei befindet muss man die folgende Zeile HTML-Code in den Kopfteil des HTML-Dokumentes, zwischen das <head> und </head>-Tag, einfügen:

<link rel="stylesheet" type="text/css" href="style.css" />

Das folgende HTML-Dokument soll nun genutzt werden um mit einem Style-Sheet verschönert zu werden:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8"/>  <!-- utf-8 (HTML5) alt: ISO-8859-1 (HTML4) -->
  <title>Meine gestylte Seite</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>

<!-- Seitlicher Menüstreifen (dies ist ein HTML-Kommentar) -->
<ul class="navibar">
  <li><a href="index.html">Home page</a></li>
  <li><a href="INFAP.html">Informatik</a></li>
  <li><a href="MICRO.html">Mikrocontroller</a></li>
  <li><a href="PROFE.html">Projektarbeit</a></li>
</ul>

<!-- Hauptseite -->
<h1>Meine Streber-Seite</h1>

<p>Diese Seite wurde vom perfekten Schüler erstellt :)</p>
<p>Der "Duden" definiert Streber als jemanden, der ehrgeizig und egoistisch um
sein <br> Fortkommen bemüht ist (<a
href="http://www.duden.de/rechtschreibung/Streber">Link zur Duden-
Seite</a>).</p>
<p>Hier noch mein Lieblingsbild:</p>
<p><img src="http://maennerrevolte.de/wp-content/uploads/2010/03/streber-
berg1.jpg" alt="Streber-Bild"></p>

<!-- Meine Adresse -->
<address>Erstellt am 5 April 2015<br>
  by Streber</address>

</body>
</html>

So sieht die Seite aus, wenn kein Style-Sheet vorhanden ist:

Webseite mit leerem Style-Sheet

Aufgabe C1:

Speichere den HTML-Code als reinen Text mit dem Namen index.html ab. Erstelle im gleichen Verzeichnis eine leere Textdatei mit dem Namen style.css. Öffne die HTML-Datei mit einem Browser.

Farben und die Syntax von CSS

Unsere Seite soll farbiger werden. Der folgende CSS-Code wird in die Datei style.css kopiert.

/*Dies ist die CSS-Datei für unsere gestylte Webseite*/
body {
  color: blue;
  background-color: #CEF4FC; }

In CSS werden Kommentare wie in der Programmiersprache C zwischen /* und */ eingebettet. Die erste Code-Zeile beginnt mit dem selector (hier body). Er gibt an welchem HTML-Tag die Eigenschaften zwischen den geschweiften Klammern zuzuordnen sind. Die einzelnen Eigenschaften bestehen dann aus der Eigenschaft selbst property und ihrem Wert value. Beide sind durch einen Doppelpunkt getrennt und schließen mit einem Strichpunkt (Semikolon) ab.

selector { proprety:value; }

In unserem Beispiel gibt es die Eigenschaften color und background- color. Sie werden dem <body>-Tag zugeordnet. Die Schrift wird blau; der Hintergrund Hellblau. Es existieren viele HTML-Farben: http://www.w3schools.com/tags/ref_colornames.asp. Man hätte hier zum Beispiel PaleTurquoise (#AFEEEE) verwenden können. Individueller geht es aber wenn man sich die Farbe selbst zusammenstellt und die Farbnummer angibt: http://html-color-codes.info/ oder http://www.w3schools.com/tags/ref_colorpicker.asp. Die Farbnummer besteht aus den Farbanteilen Rot, Grün und Blau (RGB) mit einem Wert zwischen 0-255 in Hexadezimal-Schreibweise.

Eine farbige Webseite

Mit CSS kann man als Hintergrund auch ein Bild nutzen: http://www.w3schools.com/css/css3_backgrounds.asp.

Schrift

Als nächstes sollen eigene Schriften verwendet werden. Eigenschaften sind die Schriftfamilie, Der Textstil, sowie die Größe und der Schrift.

/*Dies ist die CSS-Datei für unsere gestylte Webseite*/
body {
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  color: blue;
  background-color: #CEF4FC; }
h1 {
  font-family: Arial, Verdana, sans-serif;
  font-size: 1.5em;
  font-style: italic;
  font-weight: bolder; }
p {
  font-size: 110%; }

Bei der Schriftfamilie unterscheiden wir hauptsächlich zwischen einer proportionalen Schrift mit Serifen und ohne Serifen (so wie diese Schrift). Eine bekannte Schrift mit Serifen ist "Times New Roman", eine bekannte Schrift ohne Serifen ist "Arial". Daneben gibt es "monospace" Schriften, bei denen die breite aller Buchstaben gleich ist (so wie dieser Satz). Bei der Schriftfamilie gibt man immer eine Liste mehrerer Schriften an, so dass der Computer eine ähnliche Schrift findet wenn die angegebene Schrift nicht vorhanden ist (fallback). In unserem folgenden Beispiel wird zuerst nach "Times New Roman" gesucht. Ist diese Schrift nicht vorhanden wird nach einer Times ähnlichen Schrift gesucht, ansonsten wird irgend eine Serifen-Schrift verwendet.

Die Schriftgröße kann man absolut in Pixel (px) angeben. Besser ist es aber dies relativ in Prozent oder in "em" zu tun. "em" ist eine relative Maßeinheit und gibt einen Skalierungsfaktor an. In unserem Beispiel beträgt die Schriftgröße der Überschrift (<h1>) das 2-fache der "body"-Schriftgröße, also 36px. Mit relativen Schriftgrößen bleibt das Layout der Seite erhalten wenn man die Seitengröße mit "Ctrl++" bzw. "Ctrl+-" Browser (Firefox) verändert. Andere Eigenschaften zum Gestalten der Schrift sind zum Beispiel font-style und font-weight.

Weitere Informationen: http://www.w3schools.com/css/css_font.asp

Aufgabe C2:

Teste die neue CSS-Datei. Verändere danach das Layout indem du die Seite mit Ctrl++ und Ctrl+- im Firefox-Browser skalierst (mit Ctrl+0 wird die Originalgröße wieder hergestellt).

Das Box-Modell

Um Blöcke oder Elemente (die zwischen Tags eingefasst sind) mit entsprechenden Abständen zueinander positionieren zu können existiert das BOX-Model:

BOX-Modell

Der Browser nimmt Standard-Werte für Margin und Padding an. Der Rahmen (Border) ist standardmäßig (default) nicht sichtbar. All diese Werte lassen sich einzeln (top, right, bottom und left) mit CSS verändern.

(weitere Infos: http://www.w3schools.com/css/css_boxmodel.asp)

Einfügen einer Navigationsleiste

Die meisten Seiten besitzen entweder oben oder seitlich eine Navigationsleiste. Im HTML-Code haben wir diese Leiste schon vorbereitet. Es handelt sich um eine ungeordnete Liste mit Hyperlinks. Die Dateien zu den Links müssen natürlich später vorhanden sein.

/*Dies ist die CSS-Datei für unsere gestylte Webseite*/
body {
  padding-left: 11em;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  color: blue;
  background-color: #CEF4FC; }
h1 {
  font-family: Arial, Verdana, sans-serif;
  font-size: 1.5em;
  font-style: italic;
  font-weight: bolder; }
p {
  font-size: 110%; }
ul.navibar {
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em; }

Um sie seitlich anzuordnen rücken wir den Haupttext (body) nach links mit der Eigenschaft padding-left. Im HTML-Code wurde der ungeordneten Liste, um sie von anderen ungeordneten Listen unterscheiden zu können, ein class-Attribut mit dem Inhalt "navibar" zugeordnet. Mit ul.navibar kann jetzt auf diese spezifische Liste zugegriffen werden. Mit den Eigenschaften position, top, left wird die Leiste absolut, auf der Seite positioniert. Es wird hier auch Einheit "em" verwendet. Wie oben erwähnt entspricht 1em der Schriftgröße der verwendeten Schrift. Da wir im body-Selector diese mit 18px festgelegt haben entsprechen zum Beispiel 11em 191px. Der große Vorteil von dieser Einheit ist, dass die Abstände mit der Schriftgröße skaliert werden.

Webseite mit Navigationsleiste

Aufgabe C3:

Erweitere deine CSS-Datei mit den neuen Inhalten (Farbe, Schrift, Navigationsleiste). Teste die Seite im Browser. Setze jetzt die Schriftgröße im body-Selektor auf 10px und danach auf 32px. Schau dir an wie die Abstände mit- skaliert werden. Teste die Seite dann indem du sie mit Ctrl++ und Ctrl+- im Firefox-Browser skalierst (mit Ctrl+0 wird die Originalgröße wieder hergestellt).

Eine Seite mit Stil :)

Die Navigationsleiste ist in dieser Form nicht sehr ansehnlich, und ähnelt noch immer einer Liste. Zuerst entfernen wir die Punkte und und die Abstände, welche automatisch vorhanden sind (weitere Infos: http://www.w3schools.com/css/css_boxmodel.asp).

ul.navibar {
  list-style-type: none;
  padding: 0;
  margin: 0; }

Dann erhält jedes Element der Liste eine eigene Hintergrundfarbe, und seitlich zwei Randstreifen. Mit margin und padding erhält der Text etwas Abstand zum Rahmen (siehe Box-Model):

ul.navibar li {
  background: #F4FFFF;
  margin: 0.5em 0;
  padding: 0.5em;
  border-right: 0.5em solid blue;
  border-left: 0.5em solid blue; }

Hyperlinks (<a>-Tags) werden standardmäßig unterstrichen. Dies entfernen wir für die Navigationsleiste mit:

ul.navibar a {
  text-decoration: none; }

Der Link zum Duden-Lexikon bleibt unterstrichen. Jetzt wollen wir noch die Farben der Hyperlinks ändern. In CSS existieren die beiden Pseudoklassen :link und :visited für Hyperlinks. Mit ihnen können wir jetzt unterschiedliche Farben für Links und bereits besuchte Links festlegen:

a:link {
  color: purple; }
a:visited {
  color: red; }

Das Bild erhält noch einen Rahmen:

p img {
  border: 0.1em solid blue;
  width: 30em;
  height: 15em;
  }

und unsere Adresse erhält Abstand und wird mit einer Linie vom Rest getrennt:

address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted; }

Die gesamte CSS-Datei sieht jetzt so aus:

/*Dies ist die CSS-Datei für unsere gestylte Webseite*/
body {
  padding-left: 11em;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  color: blue;
  background-color: #CEF4FC; }
ul.navibar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 1em;
  left: 1em;
  width: 9em; }
h1 {
  font-family: Arial, Verdana, sans-serif;
  font-size: 2em;
  font-style: italic;
  font-weight: bolder; }
p {
  font-size: 110%; }
ul.navibar li {
  background: #F4FFFF;
  margin: 0.5em 0;
  padding: 0.5em;
  border-right: 0.5em solid blue;
  border-left: 0.5em solid blue; }
ul.navibar a {
  text-decoration: none; }
a:link {
  color: purple; }
a:visited {
  color: red; }
p img {
  border: 0.1em solid blue;
  width: 30em;
  height: 15em;}
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted; }

Und die entsprechende Webseite:

Eine Webseite mit Style :)

Aufgabe C4:

Teste die gestylte Seite und verändere sie nach Belieben.

Aufgabe C5:

Wir wollen die Seite noch um ein Bild, das links vom Seitennamen im Browser angezeigt wird erweitern. Ein solches Bild kann man sich auf http://www.favicon.cc selbst erstellen, oder ein bestehendes Icon herunterladen und im gleichen Verzeichnis wie die Webseite abspeichern. Der HTML-Code muss jetzt noch um die folgende Zeile im <head>-Block erweitert werden:

<link rel="icon" href="favicon.png">

Quelle für das obige Beispiel: http://www.w3.org/Style/Examples/011/firstcss

HTML und CSS validieren

Um Fehler in der Darstellung der Webseite zu vermeiden ist es sinnvoll den HTML- und den CSS-Code mit einem Validator überprüfen zu lassen: http://validator.w3.org/check https://jigsaw.w3.org/css-validator/

Hier noch einige Links mit weiterführenden Tutorials:

http://de.html.net/tutorials/ http://de.selfhtml.org/ http://www.w3schools.com/ http://www.w3devcampus.com/courses/ http://www.codecademy.com/courses/web-beginner-en-LceTK/0/1