Grundkenntnisse des HTML Wollen Sie Ihre eigene Homepage im World Wide Web erstellen, Produktinformationen oder Text, Abbildungen, Sound und Video im Internet zur Verfügung stellen? Lernen Sie – ganz einfach -, fesselnde, attraktive und gut gestaltete Web- Seiten mit Hyper Text Markup Language (HTML) zu erzeugen. Nach kurzer Zeit werden Sie die Grundlagen von HTML beherrschen und den besten Weg finden, Informationen in diesem aufregenden Medium zu präsentieren.
Grundlagen 1. Was benötigen Sie um ein HTML Dokument zu erstellen? Zunächst einmal benötigen Sie einen einfachen Texteditor. Allerdings müssen Sie Ihre Texte im sogenannten ASCII-Format (z. B. „dateiname.html“) abspeichern. Außerdem benötigen Sie eine Software, einen Browser, der in der Lage ist, HTML-Dokumente Anzuzeigen, damit Sie sich das Ergebnis Ihrer Arbeit auch ansehen können (z. B. „MS Internet Explorer“). Zudem ist es nützlich, wenn Sie ein Grafikprogramm installiert haben. Mit ihm können Sie Bilder, die Sie in Ihr HTML einbauen wollen, in die entsprechenden Formate konvertieren, ihnen die gewünschte Größe geben und sie bearbeiten.
Die einzelnen Befehle von HTML werden Tags genannt. 2. Die Syntax von HTML Die einzelnen Befehle von HTML werden Tags genannt. Tags werden von kleinen spitzen Klammern eingeschlossen, also von < und >. Tags können einzeln stehen – z. B. <p> - oder als ein Paar, mit einem Anfangs- Tag wie z. B. <b> und einen entsprechenden Ende- Tag </b>. Ein Ende- Tag wird also mit einem einfachen Schrägstrich gekennzeichnet. Die Tags müssen im Quellcode alle klein geschrieben werden, sonst kann es zu fehlern in der Ansicht des Dokuments kommen. Eine Kombination mehrerer Tags ist möglich, oftmals sogar notwendig, um das gewünschte Aussehen eines Textes zu erreichen.
Tags können außerdem ineinander verschachtelt sein. Beispiel: Dies ist ein <i><b>verschachtelter</b></i> Tag. Unzulässig ist das Überlappen von Tags, da dies zu unerwünschten Ergebnissen führen kann. Beispiel: Dieses Beispiel zeigt einen <b> nicht <i> erlaubten </b> Tag </i> Wenn Sie mit einer Programmiersprache wie Turbo Pascal einen Fehler in der Syntax begehen, wird Ihr Programm wahrscheinlich gar nicht erst laufen. HTML verzeiht Fehler sehr viel leichter. Im Falle eines Fehlers sieht schlimmstenfalls ein Text nicht ganz so aus, wie Sie es erwartet haben.
3. Allgemeiner Aufbau eines HTML Dokumentes Als erstes ist das Tag-Paar <html> und </html> Zwingend vorgesehen. Damit legen Sie den Anfang und das Ende ihres Dokumentes fest. Ohne ihn wird Ihr Text nicht als HTML Dokument anerkannt. Im unmittelbaren Anschluss an das <html> muss ein letzter Tag zwingend hinzugefügt werden. Es handelt sich um das Paar <body> und </body>. Zwischen diese beiden Tags wird der eigentliche Text eingefügt, mit allen Abbildungen und Verweisen.
Hier folgt Ihr Dokumenten Text Der schematische Aufbau eines HTML Dokumentes sieht also folgendermaßen aus: <html> <body> Hier folgt Ihr Dokumenten Text </body> </html>
4. Der Kopf eines HTML Dokuments Dem Autor ist es freigestellt, vor dem eigentlichen Text einen Dokumentenkopf zu erstellen, der einige zusätzliche Informationen zum Dokument bereithält. Der dafür notwendige Tag lautet: <head> und </head>. Sofern man ihn verwendet, muss ein weiterer Tag <title> und </title> verwendet werden. Dieser Tag bestimmt den Titel, wie er im Fensterrahmen des verwendeten Browsers angezeigt wird.
<title>Willkommen</title> <html> <head> <title>Willkommen</title> </head> <body> Hier steht Ihr Text! </body> </html>
Basis- Formatierungen 1. Zeilenumbrüche Eine neue Zeile beginnen Sie mit <br>. Dieser Tag steht einzeln, erfordert also keinen weiteren Tag, der das Ende signalisiert. Beispiel: Ene meine muh <br> raus bist du <br> noch lange nicht
2. Absätze Der Absatz- Tag steht für sich allein, obwohl es sich eigentlich um eine Element- Paar handelt, nämlich um <p> und </p>. Auf den abschließenden Tag kann aber in der Regel aus einem einfachen Grund verzichtet werden. Der Browser setzt dann von sich aus den abschließenden Tag. Kommt es mit Ihrer Software zu Problemen, so fügen sie den Tag einfach selbst ein. Beispiel: Ene meine muh <p> raus bist du <p> raus bist du noch lange nicht
3. Ausrichtung der Absätze Normalerweise werden Absätze linksbündig ausgerichtet. Es ist auch möglich einen Absatz rechtsbündig oder zentriert zu gestallten. Dazu fügen Sie das ATTRIBUT ALIGN=Wert hinzu. Dieses Attribut kann folgende Werte annehmen:
LEFT für linksbündige Ausrichtung CENTER für zentrierte Ausrichtung RIGHT für rechtsbündige Ausrichtung Beispiel: <p align=center> wenn Sie diesen Tag benutzen, muss ein abschließender End- Tag gesetzt werden </p>
4. Überschriften HTML kennt 6 verschiedene Arten von Überschriften, deren Aussehen allerdings von dem zur Ansicht verwendeten Browser abhängig ist. Der Tag für eine Überschrift tritt als Paar auf. <h1> und </h1> formatiert eine Überschrift des Levels 1. <h1></h1> Großer Font, fett, zentrierte Darstellung <h2></h2> Großer Font, fett, linksbündige Darstellung <h3></h3> Großer Font, kursiv, kleiner Einzug von links <h4></h4> Normale Schriftgröße, fett, größerer Einzug von links <h5></h5> Normale Schriftgröße, größerer Einzug von links <h6></h6> Fett, größerer Einzug von links
5. Fetter Text Um einen Text FETT hervorzuheben, wird dieser von <b> und </b> eingerahmt. Beispiel: Für beides sieht <b> HTML </b> eine Lösung vor. In diesem Fall würde HTML fett hervorgehoben.
6. kursive Schrift Um einen Text oder ein Wert kursiv hervorzuheben, wird dieser von <i> und </i> Eingeschlossen. Beispiel: Das i steht dabei für <i> ITALIC </i> In diesem Fall würde ITALIC kursiv dargestellt werden.
Hypertexte Ein Hypertext verweißt auf weitere Informationen, die sich innerhalb des gleichen oder eines anderen Dokuments befinden können. HTML erlaubt Verweise: Innerhalb eines Dokumentes. Auf ein anderes Dokument, das sich auf dem gleichen Rechner befindet. Auf einen Internet- Dienst.
1. Links auf andere Dokumente Mit diesem Tag können Sie einen Text verlinken, der Sie z. B. auf eine andere Homepage im Internet bringt. Beispiel: <a href=„internetadresse“>Text der verlinkt werden soll </a> Mit diesem Tag können Sie eine Grafik verlinken: Beispiel: <a href=„internetadresse“><img src=„bilddatei“ border=„0“></a> Um eine Verlinkung zu einer E-Mail-Adresse zu machen, fügen Sie folgendes ein: Beispiel: <a href=„mailto:emailadresse“>Text zur Verknüpfung</a>
Verfeinerung des Schriftbildes HTML bietet eine Vielzahl weiterer Formatierungen, mit deren Hilfe das Schriftbild der eigenen Dokumente verfeinert werden kann. Um diese Möglichkeiten von HTML soll es in diesem Abschnitt gehen.
1. Linien Das <hr> Element weist den Browser an, an dieser Stelle in der Regel eine schattierte, wie gravierte erscheinende, durchgängige Linie einzufügen. Mit <hr size=zahl> legt man die Stärke der Linien fest. Mit <hr width=zahl%> lässt sie Einfluss auf die breite der Linien nehmen. Beispiel: Mit <hr align=left> für den Beginn am linken Rand Mit <hr align=center> für zentrierte Darstellung Mit <hr align=right> für den Beginn am rechten Rand
<hr color=#rrggbb> Jede Linie wird schattiert eingefügt, wollen Sie das nicht, lässt es sich mit dem Befehl: Beispiel: <hr noshade> Sie können auch noch bestimmen, in welcher Farbe Sie die Linien wollen. Beispiel: <hr color=#rrggbb>
2. Durchstreichen Um einen Text durchzustreichen, verwenden Sie das Paar <strike> und </strike> Beispiel: Mal sehen, ob es am <strike>Mittwoch</strike> Wochenende auch geht. In diesem Fall wird Mittwoch durchgestrichen.
<big>und</big> - Element 3. Größere Schriftarten Um einen größeren Font als für den übrigen Fließtext zu verwenden, wird das <big>und</big> - Element verwendet. Beispiel: Hier handelt es sich um einen ganz normalen Text, ganz im Gegenteil zu diesem <big>vergrößertem Text</big>. Ab hier wird wieder der normale Font verwendet.
<small> und </small> 4. Kleinere Schriften Wo ich einen Text vergrößern kann, gibt es sicher auch einen Weg, die Schriftart zu verkleinern. RICHTIG! Das Gegenstück zu BIG bildet das Element <small> und </small> Alles was zum Element BIG gesagt wurde, gilt auch hier. Das Erscheinungsbild beim Leser ist von den Einstellungen des Browsers abhängig.
Grafik und Hintergründe Die heute am Markt befindlichen Browser für Windows können eingebundene Grafiken mit dem HTML- Dokument zusammen anzeigen, sofern der Browser das verwendete Format unterstützt. Die meisten Browser unterstützen die Formate GIF und JPEG mit der Dateiendung JPG. Am besten verwenden Sie also nur Grafiken in diesen Formaten. Zu den wohl beliebtesten Erweiterungen, die Netscape HTML hinzugefügt hat, gehören grafische Seitenhintergründe. Das triste Einerlei einfarbiger Hintergründe des Browserfensters gehört damit der Vergangenheit an. Das Hintergrundbild wird über das ganze Anzeigefenster hinweg wiederholt.
1. Einfügen einer Grafik Um eine Grafik in ein HTML- Dokument einzufügen benutzen sie den Tag <img src=„dateiname“> Im folgenden Beispiel soll die Grafik mit dem Namen logo.gif eingefügt werden. <img src=„logo.gif“>
<img src=„logo.gif“ border=„5“> 2. Grafik mit Rahmen Wenn Sie einen Rahmen um Ihre Datei wünschen, können Sie den Browser anweisen, um eine Grafik einen Rahmen zu zeichnen. Dazu fügen Sie der Grafikreferenz das Attribut Border= hinzu. Diesem Attribut weisen Sie einen Wert in Pixel zu, der die Rahmenbreite bestimmt. Beispiel: <img src=„logo.gif“ border=„5“>
<a href=„sonstwas.html“> <img src=„logo.gif“ border=„0“> 3. Grafik als Hyperlink Grafiken können als Sprungmarken für Links dienen, wie Sie sie schon kennengelernt haben. Dazu werden der ANCHOR-TAG und die Grafikreferenz miteinander verbunden. Beispiel: <a href=„sonstwas.html“> <img src=„logo.gif“ border=„0“> Der Browser wird in der Regel eine Grafik, die als Hypertext-Link dienen soll, mit einem Rahmen versehen. Wollen Sie dies nicht, so setzen Sie innerhalb der Grafikreferenz den Wert für das Attribut border= auf Null.
4. Hintergrundgrafiken Eine Hintergrundgrafik bestimmen Sie innerhalb des Tags <body>. Um etwa die Grafik hintergrund.gif als Hintergrundbild zu bestimmen, geben Sie ein: Beispiel: <body background=„hintergrund.gif“>
Absatz- und Zeichenformatierungen Bis jetzt haben Sie die Tags kennengelernt, mit denen sich Zeichen physisch und logisch hervorheben lassen. Sie haben gesehen wie sich Absätze erstellen lassen. Doch bietet HTML noch eine Reihe weitere Formatierungen an, die Ihre Dokumenten erst den richtigen letzten Schliff geben.
1. Schriftarten Um eine Schriftart für einen Abschnitt festzulegen, benutzen Sie das ELEMENT <font face=„schriftart“> Der Abschnitt wird dann mit dem ELEMENT </font> abgeschlossen. Die Angaben zur Schriftart lassen sich beliebig mit Angaben zur Schriftfarbe kombinieren: Beispiel: <font face=„schriftart“ color=„red“ oder „#00ffff“>
2. Schriftgröße Um die Schriftgröße eines Abschnittes zu verändern, haben Sie zwei Möglichkeiten. Sie beziehen sich auf die von Ihnen definierte Basisschriftgröße. Sie verwenden eine gültige Größe zwischen 1 und 7. Die Schriftgröße eines Abschnitts wird durch das Attribut size= zum <font> bestimmt. Beispiel: <font size=„4“>Text</font> Die Angabe zur Schriftgröße sind mit Angaben zur Schriftfarbe innerhalb des einleitenden Tags kombinierbar: <font size=„6“ color=„#ffccc>Test</font>
Farben in HTML In HTML können Sie jedoch auch die Farben des Textes verändern. Allen Farbänderungen ist jedoch gemeint, da Sie grundsätzlich zwei Optionen haben: eine bestimmte Farbe oder eine Farbkombination zu erstellen: Sie verwenden HEXADEZIMALE FARBCODES. Sie geben einen Farbnamen an.
#3300CC 1. Hexadezimale Farbcodes Jede Farbe, die Sie am Monitor sehen, setzt sich aus unterschiedlichen Anteilen der drei Farben Rot, Grün und Blau zusammen. Man spricht hier auch von den RGB-WERT der Farbe. Jede Farbdefinition innerhalb eines HTML- Dokuments in der hexadezimalen Schreibweise hat folgendes Schema: #3300CC Rot-Anteil Grün-Anteil Blau-Anteil