HTML ist zwar keine Programmiersprache, sodass man sie leicht und schnell erlernen kann, aber sie bietet eine Menge Möglichkeiten. Dieser Kurs zeigt die grundlegenden Möglichkeiten von HTML auf und erklärt anhand kurzen und einfachen Beispielen, wie HTML funktioniert und wie Sie es für sich nutzen können
Warmup - was brauche ich?
Beschäftigt man sich das erste Mal mit HTML, ist das erste Problem: "HTML schön und gut, aber wie und wo?". Wie immer gibt es viele Möglichkeiten, eine HTML-Seite zu entwerfen. Im Laufe der Jahre entstanden verschiedene Programme, die das Erstellen von Internetseiten und auch die Umsetzung mit HTML erleichtern und in Teilen sogar ersetzen sollten. Bekannte Beispiele sind Microsofts Frontpage oder das professionellere Tool Macromedia Dreamweaver. Diese Programme sind jedoch zum Einen mit Preisen zwischen 200 und 500 Euro teuer, zum Anderen kompliziert (weil erdrückend umfangreich). Aus diesen Gründen und weil das Erlernen mit einem einfachen Editor (Texteingabeprogramm) lehrreicher ist, empfehlen wir Ihnen zu Beginn ein kleines kostenloses Programm, welches bereits in Microsoft Windows mitgeliefert installiert ist. Der Windows Editor findet sich im Menü unter Start/Programme/Zubehör/Editor.
Mit diesem Editor besitzen Sie im Prinzip alles, was man für die Gestaltung einer Webseite braucht. Um die damit erstellten Werke auch betrachten zu können, sollten Sie noch einen Browser installiert haben. Browser ist das Fachwort für Internetprogramme wie den Microsofts Internet Explorer, Netscape Navigator, Mozilla oder ein Opera Browser. Möchten Sie später eine erstellte Seite betrachten, so starten Sie bitte das Programm und geben den Pfad an, der zu der Datei auf der Festplatte führt (z.B. C:\Eigene Dateien\startseite.html).
Der Aufbau von HTML
Jeder HTML-Befehl wird im Folgenden als Tag (sprich: "Täg") bezeichnet. Tags geben dem Browser Anweisungen über das Aussehen, die Strukturierung und den Verlauf Ihrer HTML-Seite. Alle Tags werden in solche Klammern gesetzt: <Tag>. Jeder Befehl hat einen Gültigkeitsbereicht - gekennzeichnet durch seinen Anfang und sein Ende. Der Anfang wird mit 2 eckigen Klammern gekennzeichnet, das Ende eines Befehls beinhaltet in den 2 Klammern noch ein Slash-Zeichen (/) (sprich: "Släsch"), z.B. </Tag>.
Alle Dateien, welche Sie erstellen, sollten die Endung ".htm" oder ".html" besitzen. Wir empfehlen Ihnen, für alle Seiten und Unterseiten die gleiche Endung zu verwenden, damit das spätere Verlinken (Verknüpfen mehrerer HTML-Seiten untereinander) einfacher wird. Darüber hinaus sollten alle Dateien mit kleingeschriebenen Namen versehen werden, etwa ErsteSeite.htm. Obwohl Zeichen wie Zahlen und Bindestriche erlaubt sind, sollten Sie damit schematisch und sprsam umgehen. Dateinamen wie z.B. 1_seite.htm stellen aber kein Problem dar. Daneben sollten Sie wissen, dass jede Startseite den Namen index tragen muss, damit sie der Browser auch als Startseite erkennt und als Erstes beim Betreten einer Adresse (Webmasterkurse.de) anzeigt. Ihre Startseite sollte also entweder index.htm oder index.html heißen.
Jede HTML Seite beginnt mit dem Tag <html> und endet mit dem Entsprechenden </html> -Tag. Der Letztere darf aber erst ganz zum Schluss der HTML-Seite stehen, weil dieser das Ende des HTML-Dokuments bezeichnet. Setzen Sie diesen Tag zu früh, wird der Rest der Internetseite nicht mehr oder falsch dargestellt. Danach folgt der Head Teil. Er beginnt mit <head> und endet mit </head>. In ihm sind alle zusätzlichen Informationen für die Website enthalten, die zum Beispiel für Suchmaschinen interessant sein können. So werden hier Daten wie Autor, Titel, Thema und einige besondere Attribute eingefügt. Als Beispiel dient uns der Titel, welcher in der Titelleiste des Browsers angezeigt wird. Man fügt ihn zwischen dem Tag <title> und </title> ein. Darauf folgt der wichtigste Teil des Dokuments - der sogenannte Body. Zwischen dessen Anfang und Ende werden sämtliche Inhalte der Internetseite eingegeben: Texte, Bilder, etc. Im <body> Tag kann zudem auch die Hintergrundfarbe, die Linkfarbe usw. angegeben werden. Wir ändern einfach mal die Hintergrundfarbe. Dies geschieht mittels Attributen. Attribute sind zugelassene Zusätze in einem bestimmten Tag und sehen folgendermaßen aus: bgcolor="#FFFFFF". "bgcolor" ist der Befehl für die Hintergrundfarbe und "#FFFFFF" ist die Farbangabe (in diesem Fall weiss; weitere Farbkürzel finden Sie in der Farbtabelle). Sie können dass Weiss natürlich durch jede beliebige Farbe ersetzen, indem Sie hierzu entweder den englischen Namen dieser Farbe, z.B. "red", eingeben oder geben Sie den Farbwert als Hexadezimalzahl an.
Der folgende Code ist übersichtlich aufgebaut und soll den Einstieg ins HTML-Programmieren erleichtern. Wenn Sie Probleme beim Verstehen einer bestimmten Zeile haben, gehen Sie diese Anleitung noch einmal Zeile für Zeile für Zeile durch. Erst dann öffnen Sie den Editor und fügen den folgenden HTML-Code ein. Speichern Sie danach die Seite wie oben beschrieben und öffnen Sie sie im Browser!
<html>
<head>
<title>Meine erste Website</title>
</head>
<body bgcolor="#FFFFFF">
</body>
</html>Textbefehle in HTML
HTML ist kinderleicht - wie wir gesehen haben, ist eine einfache Webseite mit nur sieben Zeilen Code erstellt. Hinzu gehört bei jeder Website auch Text, welcher natürlich gut überlegt strukturiert sein sollte (siehe dazu auch unsere Inhaltstipps). Der Text wird einfach zwischen die <body> und </body> Tags geschrieben. Wird der Text ohne Schriftangabe eingefügt, sieht man im Browser den Text in der Schriftart "Times New Roman" und der Schriftgröße "10" dargestellt. Um z.B. den Text in Arial auszugeben, benutzt man den Tag "font" sowie das Attribut "face": Um den anders darzustellenden Text muss <font face Arial> hinzugefügt werden. Face ist der englische Begriff für das Aussehen, also die Textart, der Schrift. Die Schriftgröße wird mit dem Zusatz size skaliert. Hierzu muss man wissen, dass jedes Tag beliebig viele Attribute besitzen kann. Jedes neue Attribut wird mit einem Leerzeichen nach dem letzten Attribut getrennt und vor das abschließen > gehängt. Da der Text standardmäßig nur in Schwarz ausgegeben wird, kann man den Inhalt auf einem schwarzen Hintergrund schlecht lesen. Durch das Einfügen des Befehls color kann die Schriftfarbe variiert werden. Um den Text kursiv zu legen, muss man den Tag <i> ... </i<> am Anfang sowie am Ende des Textes einfügen. Dasselbe gilt für einen unterstrichenen und fetten Text. Für den unterstrichenen Text gilt der Befehl <u> ... </u> und für den fetten <b> ... </b>. Folgendes Codebeispiel kombiniert die hier erwähnten Darstellungsmöglichkeiten;<font face="Arial" size="-1" color="#0000FF">
<i><u><b>
Programmieren macht Spass
</i></u></b></font>
Um den Text zentriert darzustellen muss der Tag <center> ... </center> benutzt werden. Natürlich ist es wichtig, auch Zeilenumbrüche oder neue Absätze zu erstellen. Der Zeilenumbruch wird durch ein <br> angegeben, einen neuen Absatz öffnet und schliesst man mit einem <p> und </p>.
Am Besten ist es, wenn Sie mit den nun neu erlernten Befehlen, Tags und Attributen ein wenig herumprobieren und schauen, wie Sie verschiedene Texte bearbeiten können. Beachten Sie, dass Textgrößen nicht wie in Word Werte über 10 haben, sondern stadardisierte Werte benutzt werden. Normalerweise ist die dargestellte Schrift "2" groß. In unserem Beispiel haben wir bei size -1 verwendet. Dies verkleinert die Schrift. Andererseits können Sie mit +1 die Schrift um einen Schritt vergrößern. Das Prinzip funktioniert im Grunde beliebig (es ist denkbar +5 zu zählen), sollte aber durch das Benutzen von absoluten Werten ersetzt werden (size="X"). Zur Einführung können Sie folgenden Code in Ihrem Editor einfügen und herumbasteln...<html>
<head>
<title>Meine erste Website</title>
</head>
<body bgcolor="#FFFFFF">
<font face="Arial" size="-1" color="#0000FF">
<i><u><b>
Programmieren macht<br> Spaß
</i></u></b>
<p>Euch auch?</p>
</font>
</body>
</html>
Bilder einbauen in HTML
Alle heutzutage aktuellen Browser können Bilder in den Formaten .gif, .jpg und .png darstellen. Sie müssen also ein Bilddokument in diesem Format speichern. Ist dies nicht der Fall (und sie haben zum Beispiel ein .bmp-Dokument) gibt es die Möglichkeit Bilder unter einem anderen Dateiformat zu speichern. In neueren Windowsversionen öffnen Sie hierzu bitte Start/Programme/Zubehör/Paint, öffnen nun in dem Programm Ihre Bilddatei und wählen im Speichern-Dialog unten eines der drei genannten Dateiformate. Dabei gilt: Ist es ein Bild mit vielen Farben verwendet man .jpg, ist es ein Logo mit wenigen (~64) Farben nimmt man .gif. Wenn Sie sich nicht sicher sind, wie und zu was Sie ihr Dokument speichern sollen, fragen Sie doch in unserem Forum nach. Versuchen Sie, ein anderes Bildformat zu verwenden, können Ihre Besucher die Bilder wahrscheinlich nicht betrachten - dies hängt mit den verwendeten programmen beim Betrachten zusammen. Achten Sie darauf, dass die Grafiken nicht zu groß werden (damit meinen wir nicht die Ausmaße, sondern die Dateigröße) Im Internet benötigt man für das Laden eines einzelnen kleinen Fotos (10 mal 10 cm, gute Qualität, .jpg-Format) rund 5 (bei DSL) bis 25 Sekunden (ISDN). Daher sind Grafiken zumeist der Knackpunkt an Internetseiten - zu grosse Bilder verärgern Ihre Besucher, sie brechen die Übertragung ab und verlassen die Seite.
Doch zur Einbindung: Um eine Grafik einzubauen, benutzt man das Attribut SRC und den Tag IMG: <IMG SRC="IhrBild.gif">. Beachten Sie, dass man Grafiken im Internet mit ihrer korrekten und vollständigen Adresse anzgeben muss: <IMG SRC="http://www.Ihre-Domain.de/bildname.gif"> Durch zusätzliche Attribute lässt sich noch die Positionierung und Darstellung beeinflussen. Wichtig sind die Attribute align welches die horizontale Position im Vergleich zum Text angibt, valign für die vertikale Ausrichtung und noch das Attribut border, mit dem eine Umrandung eingestellt werden kann. Auch hierzu noch ein vollständiges Beispiel zum Ausprobieren und Nachmachen:<html>
<head>
<title>Meine erste Website</title>
</head>
<body bgcolor="#FFFFFF">
<font face="Arial" size="-1" color="#0000FF">
<i><u><b>
<IMG SRC="http://www.MEINE-Domain/IhrBild.gif" align="left" valign="top" border="1">
Erster Text mit einem Bild oben links mit Umrandung....<br>
<IMG SRC="http://www.MEINE-Domain/IhrBild.gif" align="right" border="3">
Zweiter Text mit Bild rechts mit dicker Umrandung
</i></u></b>
<IMG SRC="http://www.MEINE-Domain/IhrBild.gif" align="center" valign="middle" border="0">
<p>Dritter Text mit zentriertem Bild in der Mitte ohne Rand</p>
</font>
</body>
</html>es kommt noch mehr....
Verantwortlich für den Inhalt dieser Seite ist ausschließlich der
Autor dieser Homepage, kontaktierbar über dieses Formular!