Mini-HTML-Einführung
1 Es geht gleich los
Keine Panik
HTML ist nicht schwer. An einem Tag kann man soviel HTML lernen, um seine erste Homepage zu erstellen. Eine Homepage, oder auch Website, sind mehrere HTML-Dateien, die auf einem Webserver abgespeichert sind, und die über das Internet aufgerufen werden können, wie zum Beispiel http://www.google.de oder auch http://www.datenteiler.de
Meine erste Homepage
HTML bedeutet Hypertext Markup Language, was Seitenbeschreibungssprache bedeutet. Verschiedene Formatierungsanweisungen sagen dem Browser, wie er die Seite anzeigen soll.
Dazu ein kleines Beispiel:
<!DOCTYPE html> <html lang="de"> <head> <title>HTML-Seminar</title> </head> <body> <h1>Meine erste Homepage</h1> <p>Hallo Welt!</p> </body> </html> |
Speicher die Seite unter index.html ab, und ruf sie mit einem Browser auf und du siehst:
Neben der Deklaration für den Dokumententyp <!DOCTYPE html>, die dem Browser mitteilt, welche HTML-Version verwendet werden soll, und Formatierungsanweisungen wie <h1> für die Überschrift (engl. head) oder <p> für einen Absatz (engl. paragraph) besteht eine HTML-Seite im wesentlichen aus diesem Grundgerüst:
<html> |
Beginn der HTML-Datei, hier mit dem Attribut lang="de" für deutsch. |
<head> |
Beginn des Kopfteils, in dem bspw. der <titel> der Seite steht. |
</head> |
Ende des Kopfteils. |
<body> |
Hier steht der Inhalt der Seite, der vom Browser angezeigt wird. |
</body> |
Der End-Tag von <body>. |
</html> |
Ende der HTML-Seite. |
Ob der Text fett oder kursiv im Browser angezeigt wird, hängt von dem Attribut ab, das wir ihm geben. In HTML heißen solche Elemte von Textattributen „Tags“. Damit Tags von anderem Text auf der HTML-Seite unterschieden werden kann, wird er in spitze Klammern gesetzt, so wie bei <html>. Damit der Browser, indem wir die Seite betrachten, weiß, wann das Textattribut zu Ende ist, gibt es einen End-Tag: </html> zeigt zum Beispiel das Ende der Seite an. Oder <b>Homepage</b> zeigt an, dass nur das Wort Homepage fett (engl. bold), oder mit <i>kursiv</i> auch kursiv für (engl. italic) sein soll.
Mehr als dieses Grundgerüst braucht man von HTML gar nicht wissen. Alles andere sind Detailfragen: Wie setze ich einen Link zu einer anderen Website? Wie zeige ich Grafiken an? Wie verschönere ich das Layout meiner Homepage?
Um ein paar dieser Detailfragen zu klären, stellen wir gleich unsere erste Homepage ins Internet. Vorher sollte man allerdings seine Werkzeuge beisammen haben, die man dafür braucht.
Webspace zum Üben mieten wir uns bei einem entsprechenden Provider. Zum Testen am besten gratis. Eine Übersicht über Anbieter von freiem Webspace findet man bei raw.to.
Ein Editor ist zum Beispiel Notepad. Für den Anfang würde er sogar reichen, aber mit der Zeit freut man sich über mehr Komfort beim Schreiben von HTML-Code, wie über die Hervorhebung von Syntax. Spätestens dann sollte man den wirklich tollen und für so ziemlich alle Skript- und Programmiersprachen geeigneten freien Editor Notepad++ oder einen reinen HTML-Editor wie den ebenfalls freien Bluefish ausprobieren
Mit einem FTP-Client werden die HTML-Dateien vom heimischen Rechner auf den Webserver im Internet hochgeladen. Am liebsten benutze ich dazu den freien FTP-Client Filezilla.
Ein Webbrowser ist bei jedem Betriebssystem dabei. Standardmäßig hat Windows den Internet Explorer und MacOS den Safari. Interessante Alternativen sind aber auch Chrome, Firefox oder Opera, die es für fast jedes Betriebssystem gibt, also für Gnu/Linux, Windows und MacOS.
Wysiwyg
Eine Homepage in HTML zu schreiben ist eine total langweilige Sache. Deswegen gibt es wohl eine Menge an Editoren, die das Schreiben einer HTML-Datei erleichtern sollen. Zum einen gibt es spezielle HTML-Editoren, mit Syntax-Highlighting (die Tags werden farbig dargestellt) und Fehlersuche, zum anderen gibt es „What you see is what you get“-Editoren (Wysiwyg-Editoren). Wie in Word kann man mit solchen Editoren seine Homepage gestalten, ohne dass man sich mit den HTML-Tags herumärgern muss. Den Text bequem markiern und fetten, anstatt mühselig <b>fetter Text</b> einzugeben. Es liegt sehr nahe, so einen Editor zu verwenden, anstatt lange zu tippen. Die Bequemlichkeit hat aber leider auch entscheidende Nachteile: HTML ist keine Textverarbeitung, sondern eine Seitenbeschreibungssprache für Browser. So wie der Wysiwyg-Editor die Seite anzeigt, werden viele andere Browser die Seite höchstwahrscheinlich nicht interpretieren. Eine Seite, die im Internet Explorer schön aussieht, kann im Firefox Katastrophal aussehen, und eine veraltete Version des Internet Explorers kann sie vielleicht gar nicht anzeigen. Wobei wir auch beim schwierigsten Teil des HTML-Codierens sind: Jeder Browser interpretiert eine Internetseite anders. Das kann zu einigem Ärger und Frust führen, wenn nichteinmal die verschiedenen Internet Explorer eine Seite einheitlich anzeigen.
Ein weiterer Nachteil ist, dass man früher oder später sowieso in den Quellcode einer Seite muss, um die eine oder andere Änderung vorzunehmen, die ein Wysiwyg-Editor nicht vornehmen kann, z.B ein Webformular einbinden. In dem chaotischem HTML-Quellcode, den Wysiwyg-Editoren produzieren, kann sich dann keiner mehr zurechtfinden.
HTML-Quellcode zu kennen hat auch einen unschlagbaren Vorteil: Immer wenn ihr eine Seite im Internet seht, die euch gefällt, und ihr euch fragt, wie hat der oder die das gemacht, dann könnt ihr euch den Quellcode der Seite anschauen, ihn verstehen und es nach- und besser machen.
2 Jetzt geht’s los
HTML
HTML codieren lernt man nur, wenn man viel übt. Deswegen wollen wir jetzt eine kleine Seite erstellen. Oben links auf der Seite sollen ein paar Bilder sein, daneben rechts der Titel der Seite. Links auf der Seite ein Menü und ein einführender Text in die Homepage soll in die Mitte. Angeboten werden soll dieser Text als HTML und als PDF zum download. Fangen wir an, ein Grundgerüst haben wir ja bereits. Hinzu kommt jetzt eine Überschrift mit dem <h1>-Tag
<!DOCTYPE html> <html lang="de"> <head> <title>Mini-HTML-Einführung</title> <meta charset="utf-8"> </head> <body> <h1>Mini-HTML-Einführung</h1> Meine Mini-HTML-Einführung ist eine kleine Einführung in HTML, um an einem Tag eine Homepage online zu bringen, die dazu noch nett aussieht. Es gibt sie zur Zeit als HTML-Datei. </body> </html> |
Wie ihr seht, ist mit <meta> eine neue Anweisung dazu gekommen. Die Meta-Angaben im Kopfbereich (engl. head) einer HTML-Seite enthalten verschiedene nützliche Anweisungen für den Web-Server oder Browser. In unserem Fall, dass der Browser den Zeichensatz UTF-8 nutzen soll, um die Umlaute wie ä, ö oder ü richtig darzustellen. Speichert man die HTML-Datei als index.html ab, hat man schon ein erstes schönes Ergebnis. Eine Überschrift und einen kleinen Text. Selbstverständlich kann man mit diesem HTML-Code-Schnippsel schon herumspielen und ein paar Sachen ausprobieren. Was passiert, z.B., wenn man <h1> durch <h2> ersetzt? In HTML gibt es sechs verschiedene Überschriften vordefiniert, von <h1>-<h6>.
Links
Als nächstes wenden wir uns den Links zu. Ich möchte, dass von der Startseite ein Link auf eine weitere Datei seite2.html verweist, und ein anderer auf eine Linkliste führen:
<!DOCTYPE html> <html lang="de"> <head> <title>Mini-HTML-Einführung</title> <meta charset="utf-8"> </head> <body> <h1>Mini-HTML-Einführung</h1> <a href="seite2.html">2. Seite</a><br> <a href="links.html">Links</a> <!-- Hier können noch weitere Links eingefügt werden --> <hr> Meine Mini-HTML-Einführung ist eine kleine Einführung in HTML, um an einem Tag eine Homepage online zu bringen, die dazu noch nett aussieht. Es gibt sie zur Zeit als <a href="http://www.datenteiler.de/texte-und-artikel/mini-html-einfuhrung/" target="_blank">HTML-Datei</a>. <br><br><br><br> </body> </html> |
Nach der Überschrift kommen die drei Links, eingebettet in die Anker-Tags (engl. anchor). Das wichtige Attribut ist hierbei href, das für Hypertext Reference steht, also eine Referenz, die auf ein Ziel im Hypertext verweist. In unserem Fall ist das seite2.html etc. Nach der geschlossenen Klammer des ersten Anker-Tags kommt der Text, der auch auf der Homepage als Link erscheint, also 2. Seite. Dann wird der Anker-Tag geschlossen.
Unter den Links habe ich einen Kommentar geschrieben, diese werden eingeleitet mit <!-- und abgeschlossen mit -->, dazwischen steht dann der Kommentar. Im Browser erscheint unter den Links jetzt übrigens eine Linie, die das Element <hr> liefert, was soviel wie horizontal ruler, also horizontale Linie bedeutet. Zum <hr>-Tag gibt es keinen abschließenden Tag, genauso wenig wie für <br>, das einen Zeilenumbruch (engl. line break) erzeugt. Egal, wieviele Zeilenumbrüche man mit der Returntaste in einem HTML-Dokument macht, kein Browser wird sie erkennen. Sie erkennen nur <br> als einen Zeilenumbruch. Nach Tags wie <h1> oder <p> werden Zeilenumbrüche übrigens automatisch angefügt.
Wenn ihr wollt, dass die verlinkte Seite in einem neuen Browserfenster geöffnet wird, dann benutzt für den Anker-Tag target="_blank" als Attribut vor href. Das habe ich zum Beispiel mit dem Link zu dieser Mini HTML-Einführung auf der Beispielseite gemacht. Mit noch einem weiteren Attribut davor, z.B. title="Dies ist ein Link.", kann man dem Link auch einen Titel geben.
Grafiken
Jetzt binden wir Grafiken in unser HTML-Dokument ein. Dafür verwenden wir das <img>-Tag:
<!DOCTYPE html> <html lang="de"> <head> <title>Mini-HTML-Einführung</title> <meta charset="utf-8"> </head> <body> <img src="images/HTML5.png" alt="HTML 5-Icon"> <h1>Mini-HTML-Einführung</h1> <a href="seite2.html">2. Seite</a><br> <a href="links.html">Links</a> <!-- Hier können noch weitere Links eingefügt werden --> <hr> Meine Mini-HTML-Einführung ist eine kleine Einführung in HTML, um an einem Tag eine Homepage online zu bringen, die dazu noch nett aussieht. Es gibt sie zur Zeit als <a href="http://www.datenteiler.de/texte-und-artikel/mini-html-einfuhrung/" target="_blank">HTML-Datei</a>. <br><br><br><br> </body> </html> |
Das Bild HTML5.png, das ich in meinem Dokument einbinden möchte, liegt im Unterordner „images“ auf meinem Webspace, um ein bisschen Ordnung zu halten. Eingebunden werden sie mit dem <img>-Tag, auch ein allein stehender Tag, für den es kein End-Tag gibt. Das Attribut src muss beim <img>-Tag unbedingt mit angegeben werden, da es auf die Quelle des Bildes verweist (nämlich im Ordner „images“). Das zweite Attribut, das immer angegeben werden muss, ist alt, dem man einen alternativen Text mitgibt, für den Fall, dass die Grafik nicht angezeigt werden kann.
Wenn ihr eine Grafik als Link zu einer anderen Seite einsetzen wollt, dann könnt ihr übrigens durch das Attribut border="0" im <img>-Tag den unschönen Rand vermeiden, der anzeigt, dass die Grafik ein Link ist.
Cascading Stylesheets
Soweit ist meine Startseite fast fertig. Fehlt nur noch das Layout. Früher wurden Websites durch vordefinierte Tags gestaltet. Seitdem es Cascading Stylesheets (CSS) gibt, haben sich die Möglichkeiten, seiner Homepage ein schönes Layout zu verpassen, vervielfacht. Jetzt ist es auch möglich, Formatvorlagen für Schriften einzusetzen, wie man es von Office-Programmen her gewöhnt ist. Eine Überschrift kann jetzt in 16 Punkt Schriftgröße gesetzt werden und nicht nur mit <h6> und dem Tag <big>. Mit CSS werden der Inhalt und das Aussehen eines HTML-Projekts getrennt, was eine große Arbeitserleichterung ist. Das gesamte Layout mehrerer Seiten kann vollständig durch eine Datei gesteuert werden.
Um CSS in die Homepage einzubinden, müssen wir die HTML-Datei um den Befehl <link> erweitern:
<head> <title>Mini-HTML-Einführung</title> <link rel="stylesheet" href="styles.css" type="text/css"> <meta charset="utf-8"> </head> |
Über den <link>-Tag wird die Datei styles.css in die HTML-Datei eingebunden, das heißt, die beiden Dateien werden miteinander verlinkt. Der <link>-Tag hat drei Attribute: rel, was für Relation steht, und den Wert stylesheet bekommen muss und das Attribut type, mit dem Wert text/css. Die Referenz href gibt die Quelle der Stylesheetdatei styles.css an. Das funktioniert in etwa wie das Einbinden von Grafiken. Für styles.css brauchen wir nun eine neue Datei, in der wir folgendes schreiben:
body {
margin:0px 0px 20px 0px;
font-family:sans-serif;
background:#FFF;
background-image:url(images/bgr.png)
} |
Hier wird <body> definiert, wieviel Abstand <body> vom oberen (hier 0 Pixel), rechten (0 Pixel), unteren (20 Pixel) oder linken Rand (0 Pixel) haben soll. Die Seite speichern wir dann in den selben Ordner wie index.html.
Die Schriftsätze, die verwendet werden, sind Verdana, Helvetica oder Arial, je nachdem, was der Browser unterstützt. Hat er keine dieser Schriftsätze, dann soll er eine serifenlose Standardschrift verwenden. Die Hintergrundfarbe unserer HTML-Seiten, ist weiß, was wir Hexadezimal ausdrücken müssen in #FFF. Jedes bessere Malprogramm hat eine Farbtabelle, in der man Farben in ihre Hexadezimalwerte umrechnen kann.
Als nächstes möchte ich, dass die Linie nur für Browser sichtbar ist, die kein CSS interpretieren können. Dazu füge ich in styles.css folgendes ein:
hr{
display : none;
} |
Schaue ich mir jetzt das Dokument mit einem CSS-fähigen Browser an, was eigentlich alle neueren Browser sind, ist die Linie auf wundersame Weise verschwunden. Anschließend setze ich die Grafik noch um ein paar Pixel nach unten:
img {
margin-top:10px;
} |
Die Überschrift soll weiter in die Mitte gerückt werden? Kein Problem:
h1 {
margin-top:0px;
margin-left:260px;
font-size:34pt;
} |
Jetzt ist aber jede Überschrift der ersten Ordnung in dieser Position. Wenn ich weitere <h1>-Tags in meinem HTML-Dokument verwenden will, aber nur diese bestimmte Überschrift an der bestimmten Stelle des Dokuments stehen soll, muss ich einen eigenen Bereich für diese Überschrift definieren. Z.B. Ueberschrift:
#Ueberschrift {
margin-top:0px;
margin-left:260px;
font-size:34pt;
} |
Die HTML-Tags <body>, <h1> und <hr> können mittels CSS von einem Browser sofort anders interpretiert werden. Aber was für ein Tag soll #Ueberschrift sein? Überschrift ist ein selbstdefinierter Bereich, den wir gleich in der HTML-Datei mit einem <div>-Tag eingrenzen werden. Daher muss er in der CSS-Datei mit einer Raute (#) beginnen.
#Ueberschrift {
margin-top:0px;
margin-left:260px;
font-size:34pt;
} |
Alles was im <div>-Bereich ist, wird jetzt um 260 Pixel nach rechts verschoben und hat 5 Pixel Innenabstand zum nächsten Bereich. Außerdem habe ich einen Abstand von 0 Pixeln zum oberen, nächsten Element gewählt. Um die beiden Elemente nebeneinander zu rücken, kann man den Seitenabstand in CSS auch negativ formulieren. Wenn ich meine Überschrift weiter nach oben rücken möchte, gebe ich statt 0 Pixel einfach -40 Pixel ein. Nicht schön, aber es erfüllt seinen Zweck.
h1 {
padding:5px;
margin-top:-40px;
margin-left:260px;
font-size:34pt;
} |
Genauso wie die Überschrift, möchte ich als nächstes den Haupttext möglichst mittig auf die Seite platzieren und die Links links daneben setzen. Das mache ich, indem ich die CSS-IDs #inhalt und #links definiere, und den entsprechenden Bereich in meiner HTML-Datei eingrenze. Die einzelnen Links möchte ich in einer kleineren Schrift haben und weiter auseinander. Dazu trage ich in die styles.css folgendes ein:
#inhalt {
margin-right:20px;
margin-left:260px;
margin-bottom:20px;
margin-top:70px;
width:600px;
}
#links {
position:absolute;
margin-top:40px;
margin-left:10px;
width:150px;
font-size:12pt;
font-weight:bold;
}
.link{
font-size:small;
font-weight:bold;
padding:5px;
} |
Der Unterschied zwischen der ID #links und der Klasse .link besteht darin, dass man in einer HTML-Datei Klassen häufiger benutzen darf. IDs dürfen nur einmal angegeben werden. Da ich mehrere Links habe, die ich alle einzeln definieren will, benutze ich hier eine Klasse, da ich nicht für jeden Link eine andere ID definieren will. Im Gegensatz zur Klasse werden IDs aber mit Priorität bearbeitet. Das heißt, wenn mal ein Format mit einer Klasse nicht funktioniert, sollte man es am besten nochmal mit einer ID versuchen.
Die Positionierung von #links ist absolut zu #inhalt gesetzt, damit die beiden Blöcke im HTML-Dokument direkt nebeneinander stehen. Die Links in der Klasse .link möchte ich klein und fett haben, und sie sollen 5 Pixel auseinander stehen.
In das Hauptdokument kommt ein div-Tag um die Links mit dem Attribut id="links" und eines um den Hauptteil der Seite mit id="inhalt". Die Klasse .link umschließt mit einem DIV-Tag einzelne Links. Die vollständige HTML-Datei sieht jetzt so aus:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Mini-HTML-Einführung</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<meta charset="utf-8">
</head>
<body>
<img src="images/HTML5.png" alt="HTML 5-Icon">
<h1>Mini-HTML-Einführung</h1>
<!-- Links -->
<div id="links">
<div class="link">
<a href="seite2.html">2. Seite</a><br>
</div>
<div class="link">
<a href="links.html">Links</a>
<!-- Hier können noch weitere Links eingefügt werden -->
</div>
<br><br><br><br><br>
</div>
<hr>
<!-- Inhalt -->
<div id="inhalt">
Meine Mini-HTML-Einführung ist eine
kleine Einführung in HTML, um an einem Tag
eine Homepage online zu bringen, die dazu
noch nett aussieht. Es gibt sie zur Zeit als
<a href="http://www.datenteiler.de/texte-und-artikel/mini-html-einfuhrung/" target="_blank">HTML-Datei</a>.
<!-- Oder man schreibt hier ganz was anderes -->
</div>
<br><br><br><br>
</body>
</html> |
Wie ihr seht, benutze ich die Klasse .link dreimal. Als ID hätte ich sie nur einmal gebrauchen dürfen. Fehlt zum Schluss eigentlich nur noch, dass die Links ein bisschen schöner gestaltet werden. Dazu nehmen wir in styles.css noch folgendes auf:
A {color: #9F9F9F; text-decoration: none;}
A:link {color: #8C8C8C; text-decoration: none;}
A:visited {color: #8C8C8C; text-decoration: none;}
A:active {color: #999999;}
A:hover {color: #BBBBBB;} |
Ich weiß, dass ist alles ein bisschen grau, doch es gibt ja noch andere Farben, die ihr verwenden könnt.
3 Das war’s
Meta
Bleiben zum Schluss noch ein paar Feinheiten, die im Header der HTML-Datei vorgenommen werden können, damit eure Homepage besser von Suchmaschinen gefunden und richtig indiziert wird. Zu den Elementen des Headers, wie <title> oder <link>, die wir bereits kennengelernt haben, kommt noch der meta-Tag, den wir schon mit <meta charset="utf-8"> benutzt haben, um Umlaute auf unserer Homepage anzuzeigen. Der hat drei Attribute. Zum einen name und http-equiv, mit denen bestimmte Schlüsselwörter definiert werden, denen dann mit content ein Inhalt zugewiesen wird.
Zum Beispiel sagt der folgende Befehl, wer der Autor des HTML-Dokuments ist:
<meta name="author" content="Christian Imhorst"> |
Die kompletten meta-Angaben für die Homepage sehen so aus:
<meta name="description" content="Mini-HTML-Einführung"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="Christian Imhorst"> <meta charset="UTF-8"> |
Der erste meta-Tag enthält eine Beschreibung, die Suchmaschinen in einer kurzen Zusammenfassung der Seite anzeigen. Im nächsten Tag stehen die Keywords, mit denen die Seite über eine Suchmaschine gefunden werden kann.
Favicon
Die Favicons wurden von Microsoft mit dem Internet Explorer 5.0 eingeführt, damit jede Website durch ein Symbol markiert werden kann. Favicons, eine Kombination aus Favorit und Icon, werden bei vielen Browsern im Lesezeichen-Menü angezeigt. Favicons sollten ganz kleine Bildchen sein, 16 x 16 Pixel sind dabei optimal, es funktionieren aber auch größere, und brauchen nur 256 Farben. Der Eintrag im Header für ein Favicon ist:
<link rel="shortcut icon" href="images/favicon.ico"> |
Doctype
Wie der Doctype schon zeigt, haben wir die Seite nach dem neuen HTML5-Standard erstellt. Da es viele verschiedene Definitionen von HTML gibt, jede Version hat ihre eigene, sollte man am Anfang des Dokuments dem Browser mitteilen, welche Version von HTML man nun genau verwendet. Für HTML5-Datei reicht die folgende Zeile völlig aus:
<!DOCTYPE html> |
Schluss
Das Ergebnis unserer Bemühungen habe ich hier bereitgestellt, damit man es auch mal sehen kann. Wer möchte, kann sich die Dateien auch herunterladen. Und wie geht es nun weiter? Wer gut englisch kann, sollte unbedingt Dive Into HTML5 von Mark Pilgrim lesen. Pilgrim hat einen erfrischenden Schreibstil mit schönen Vergleichen, die aber nicht die wesentlichen Informationen verwässern. Bei ihm wird die trockene Materie zu einem lesenswerten Werk für HTML-Entwickler und welche, die es werden wollen. Nicht ganz so unterhaltsam wie das Buch von Mark ist die HTML 5-Einführung vom HTML-Seminar, die einen ersten Überblick gibt. Dann gibt es noch einen Podcast bei Technikwürze zum Thema HTML5. Das Grundgerüst, um weiter in die Welt von HTML 5 abzutauchen, solltest du jetzt auf jeden Fall haben.
