Inhaltsverzeichnis Inhaltsverzeichnis... 1 Tags (Befehle)... 1 Erste Texte im Browser... 2 Das HTML Grundgerüst... 2 Ihre erste echte Webseite... 2 Texte... 3 Textabsatz und Zeilenumbruch... 3 Einen Zeilenumbruch verhindern... 3 Attribute und Werte... 3 Absatzausrichtung... 4 Bereiche definieren... 5 Überschriften... 5 Kommentare... 6 Abbildungsverzeichnis... 7 Index (Stichwortverzeichnis)... 7 Tags (Befehle) Ein HTML Dokument wird wie ein normales Textdokument im ASCII-Format geschrieben. Zur Erstellung einer HTML Datei kann ein auf dem Rechner installierter Texteditor genutzt werden. Zur Formatierung der HTML Datei werden HTML Befehle genutzt. Diese Befehle stehen in sogenannten Tags, welche durch spitze Klammern dargestellt werden. Abbildung 1 - allgemeine Syntax - HTML-Befehle Bis auf einige wenige Ausnahmen bestehen HTML Befehle aus einem öffnenden und einem schließenden Tag. Die Inhalte zwischen den Tags werden durch diesen Befehl formatiert. HTML Befehle, die nur einen öffnenden Tag besitzen, beziehen sich nicht auf einzelne Inhalte, sondern formatieren Abschnitte des Dokumentes. Seite 1
Erste Texte im Browser Als erstes erstellen wir einen Text ohne HTML Anweisungen. Starten Sie den Text-Editor Geben Sie folgenden Text in den Editor ein: Speichern Sie die Datei unter dem Namen text.html. Öffnen Sie die Datei in Ihrem Browser. Der Browser durchsucht den Quelltext nach HTML Anweisungen, die in spitzen Klammern < > stehen. Enthält die Datei keine HTML Anweisungen, stellt der Browser die Informationen als normalen Text in der Standardschriftart dar Abbildung 2 - unformatierter Text im Editor Abbildung 3 - unformatierter Text im Browser Das HTML Grundgerüst Ein HTML Dokument besteht aus vier HTML Befehlen. <html> </html> <head> </head> <title> </title> <body> </body> Umschließt das gesamte Dokument. Zeigt dem Browser mit, dass es sich um ein HTML Dokument handelt und weitere HTML Befehle folgen. Der Dateikopf enthält die Angaben zur Web-Seite, bspw. den Titel oder den verwendeten Zeichensatz Gibt dem Dokument einen Titel. Steht innerhalb des Tags <head> Der Dateikopf enthält die Informationen, die im Browser angezeigt werden. Abbildung 4 - HTML - Grundgerüst Ihre erste echte Webseite Starten Sie den Text-Editor. Geben Sie den folgenden Text ein. Speichern Sie das Dokument unter dem Namen html grundgeruest ab. Öffnen Sie die Datei im Browser. Der Browser durchsucht die Datei und findet die notwendigen HTML Befehle zur Darstellung der Inhalte. Die gefundenen Inhalte werden vom Browser interpretiert und dargestellt. Abbildung 5 - Text im HTML - Grundgerüst Abbildung 6 - Text im HTML - Grundgerüst (Browser) Seite 2
Texte Textabsatz und Zeilenumbruch Den folgenden Text, Abbildung 7 - HTML-Datei ohne Zeilenumbrüche inklusive der Zeilenumbrüche, in den Editor eingeben. Speichern Sie die Datei unter dem Namen liebesgedicht.html ab. Kontrollieren Sie das Ergebnis im Editor. Sie sehen, der Browser kann die Zeilenumbrüche nicht darstellen, Sie können deshalb Zeilenumbrüche im Quelltext so darstellen dass dieser für Sie optimal übersichtlich gestaltet ist. Um Zeilenumbrüche im Browser Abbildung 8 - HTML-Datei mit Zeilenumbrüchen darstellen zu können, müssen Sie die entsprechenden HTML Befehle anwenden. <br> bewirkt einen Zeilenumbruch mit einem sehr geringen Abstand zur vorhergehenden Zeile. Dieser Tag benötigt keinen Endtag. <p> </p> mit diesem Tag wird ein Absatz definiert. Der Absatz hat einen größeren Abstand zum vorherigen und folgenden Absatz. Einen Zeilenumbruch verhindern Es gibt Textstellen bei denen es wichtig ist, einen Zeilenumbruch zu verhindern. Z.B. Eigennamen. <nobr> >/nobr> Beispiel Erläuterung Die Textpassage, die in der Anzeige nicht getrennt werden soll, wird innerhalb des Tag <nobr> </nobr> angegeben. Nobr 0 nobreak 0 kein Umbruch <body> Bitte informieren Sie <nobr>herrn Dr. Müller-Lüdenscheid</nobr> über unsere Entscheidung. </body> Der Eigenname Dr. Müller-Lüdenscheid wird niemals durch einen Zeilenumbruch getrennt Der Tag <nobr> ist kein offizieller HTML-Standard, wird jedoch von den meisten Browsern unterstützt. Attribute und Werte Der Starttag eines HTML-Befehls kann zusätzliche Angaben zur Formatierung eines Abbildung 9 - Attribute und Werte Seite 3
Elementes beinhalten. (Attribut) In HTML-Tags existieren folgende Attribute, welche von der HTML-Syntax vorgegeben werden. Bei den Wertzuweisungen dürfen vor und nach dem Gleichheitszeichen (=) keine Leerzeichen eingefügt werden. Einzelattribute <menu> Darstellung einer Liste Zuweisung normierter Werte <p align= left > Absatzausrichtung Numerische Zuweisung <table width= 500 > Tabellenbreite (500 Pixel) Prozentuale Zuweisung <table width= 80% > Tabellenbreite (80% des Fensters) Variable Werte <a href=http://> Ein Hyperlink Absatzausrichtung Wie in der Textverarbeitung können auch in einem HTML-Dokument Absätze linksbündig, left rechtsbündig right zentriert center und im Blocksatz justify ausgerichtet werden. Beispiel: <p align="right">rechtsbündig ausgerichteter Text</p> rechtsbündig <p align="left">linksbündig ausgerichteter Text</p> linksbündig <p align="center">zentriert ausgerichteter Text</p> zentriert <p align="justify">im Blocksatz ausgerichteter Text</p> Dieser Text ist im Blocksatz ausgerichtet. Am rechten und am linken Rand wird ein Flattersatz vermieden Mit dem Attribut align können nicht nur Texte sondern auch alle anderen Elemente (Grafiken, Tabellen usw.) ausgerichtet werden. Formatieren Sie das Liebesgedicht von Hans Kruppa indem Sie jeder Strophe in einen Absatz mit dem entsprechenden Attribut bringen. Abbildung 10 - ausgerichtete Absätze Seite 4
Bereiche definieren Kennen, können, beherrschen lernen was gebraucht wird Mit dem Tag <div> </div> können Sie mehrere Absätze mit einem Befehl ausrichten. Auch in dem Bereich vorhandene Grafiken und Tabellen werden entsprechend dem angegebenen Attribut ausgerichtet. Abbildung 11 - definierte Bereiche im Dokument Überschriften Innerhalb von HTML können sechs verschiedene Überschriften definiert werden. <h?> h steht für heading = Überschrift <h1> steht für eine Überschrift erster Ordnung = größte Überschrift <h6> steht für eine Überschrift sechster Ordnung = kleinste Überschrift Abbildung 12 - Die sechs Überschriften Seite 5
Kommentare Zur besseren Orientierung im Quelltext können Sie Kommentare definieren. In der Browseransicht können die Kommentare nicht gesehen werden. Abbildung 13 - Kommentare einfügen Seite 6
Abbildungsverzeichnis Abbildung 1 - allgemeine Syntax - HTML-Befehle... 1 Abbildung 2 - unformatierter Text im Editor... 2 Abbildung 4 - HTML - Grundgerüst... 2 Abbildung 3 - unformatierter Text im Browser... 2 Abbildung 5 - Text im HTML - Grundgerüst... 2 Abbildung 6 - Text im HTML - Grundgerüst (Browser)... 2 Abbildung 7 - HTML-Datei ohne Zeilenumbrüche... 3 Abbildung 8 - HTML-Datei mit Zeilenumbrüchen... 3 Abbildung 9 - Attribute und Werte... 3 Abbildung 10 - ausgerichtete Absätze... 4 Abbildung 11 - definierte Bereiche im Dokument... 5 Abbildung 13 - Kommentare einfügen... 6 Abbildung 12 - Die sechs Überschriften... 5 Index (Stichwortverzeichnis) Absatz 3, 4 align 4 ASCII-Format 1 Attribut 4, 5 Attribute 1, 4, 7 Blocksatz 4 Browser 1, 2, 3, 7 Dateikopf 2 div 5 Editor 1, 2, 3, 7 Grafiken 4, 5 HTML Anweisung 1, 2 HTML Anweisungen 1, 2 HTML Befehl 1, 2, 3 HTML Befehle 1, 2, 3 HTML Datei 1 HTML Dokument 1, 2 HTML Grundgerüst 1, 2 HTML-Standard 3 HTML-Syntax 4 HTML-Tag 4 HTML-Tags 4 Informationen 2 Kommentare 5, 6, 7 Quelltext 2, 3, 5 Standardschriftart 2 Tag 1, 3, 5 Tags 1, 2, 4 Texteditor 1 Text-Editor 1, 2 Überschrift 5 Überschriften 1, 5, 7 Web-Seite 2 Seite 7