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 (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>
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.
Man erkennt in unserem Dokument den eigentlichen Inhalt. Er ist eingeschlossen
zwischen sogenannten Tags. Dieses Wort könnte man hier mit "Kennzeichnungen"
übersetzen, allerdings wird auch im Deutschen das englische Wort "Tag"
benutzt.
Die Blöcke oder Elemente, welche das Dokument strukturieren und formatieren, und
somit dem Browser mitteilen wie die Seite darzustellen ist, sind alle zwischen
so einem Start-Tag und einem End-Tag eingeschlossen.
Alle Tags beginnen mit einem Kleiner-als-Zeichen "<
" und enden mit einem
Größer-als-Zeichen ">
". Das End-Tag enthält zusätzlich einen Schrägstrich
"/
" (Slash).
Tags können mit einem oder mehreren Attributen versehen werden um weitere
Informationen zu liefern (siehe weiter unten).
Kennt man viele Tags und ihre Bedeutung, so kennt man HTML. Alle Tags findet man unter: http://www.w3schools.com/tags/default.asp
Geh mit dem Firefox-Browser auf eine beliebige Homepage und drücke die Tastenkombination "Crtl+u". Sie stellt den HTML-Quelltext der Seite dar. Wiederhole dies für mehrere Seiten und schau dir den Quelltext an (Internet Explorer: View - Source).
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 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.
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>
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 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).
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).
Genau wie in jeder Programmiersprache soll der HTML-Code wenn nötig mit
sinnvollen Kommentaren versehen werden.
Kommentare werden zwischen <!--
und -->
eingefasst. Beispiel:
<!-- Seiten Menü (dies ist ein HTML-Kommentar) -->
Erstelle eine Seite in der alle oben genannten Tags enthalten sind, und teste sie. Lade dazu ein beliebiges Bild aus dem Internet.
Informiere dich über die Tags zum Erstellen einer geordneten sowie eine ungeordneten Liste. Erweitere deine Seite um zwei Listen.
Informiere dich über die Tags zum Erstellen einer Tabelle. Erweitere deine Seite um eine Tabelle.
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:
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.
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.
Mit CSS kann man als Hintergrund auch ein Bild nutzen: http://www.w3schools.com/css/css3_backgrounds.asp.
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
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).
Um Blöcke oder Elemente (die zwischen Tags eingefasst sind) mit entsprechenden Abständen zueinander positionieren zu können existiert das BOX-Model:
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)
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.
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).
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:
Teste die gestylte Seite und verändere sie nach Belieben.
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
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