docInhalt: Grundgerüst, Tags, Zeichensatz, Meta
download 
Report Transcription
Inhalt: Grundgerüst, Tags, Zeichensatz, Meta
Inhalt: Grundgerüst, Tags, Zeichensatz, Meta-Tags, Farben 1 <html> 2 3 4 5 6 7 <head> <title>Titel der Datei</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"> <meta name="author" content="Claus Behl"> </head> 8 9 10 11 <body text="#000000" bgcolor="#FFFFFF" link="blue" alink="#FF0000" vlink="brown"> Hier wird der eigentliche Text, Bilder usw. eingegeben. 12 13 </body> 14 15 </html> Zeile 1, 15: Beginn und Ende der HTML-Datei wird angegeben. Die meisten HTML-Befehle bestehen aus Tags: < > öffnender Tag, </ > schließender Tag für HTML. Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen. Zeile 4: Titelzeile des Browser-Fenster. Zeile 5: Als Zeichensatz werden westeuropäische Schriften (iso-8559-1) verwendet. Zeile 6: Wie in Zeile 5 ein Meta-Tag. Zeile 9-13: Inhalt der html-Datei. Zeile 9: Im öffnenden Tag können Vereinbarungen zur Darstellung, z.B. Farben angegeben werden. Das Format dieser Vereinbarungen ist immer key="value". – Die Farben werden durch ihre RGB-Form angegeben. Für jede Grundfarbe (rot, grün, blau) stehen 256 Zahlen im Hexadezimalsystem zur Verfügung. – text="#000000" bedeutet Textfarbe ist schwarz. – bgcolor="#FFFFFF" Hintergrundfarbe ist weiß. – Die meisten Browser kennen aber auch einige Farbnamen, z.B.: link="blue" Links werden blau, alink="#FF0000" aktivierte Links werden rot, vlink="brown" bereits besuchte Links werden braun dargestellt. – Mit background="bilder/hintergrund.jpg" wird ein Hintergrundbild angegeben. Der Pfad ist so gesetzt, dass ein Bild mit Namen hintergrund.jpg“, das in einem ” Ordner Bilder“, im gleichen Verzeichnis wie unser html-Dokument ist, gefunden wird. ” 1 Inhalt: Überschriften, Textausrichtung, Zeichenformat, Zeilenumbruch, Listen 1 2 3 4 5 6 7 <h1>Überschrift 1</h1> <h5>Überschrift 5</h5> <b>Fett</b> <br> <i>Kursiv</i><br> <u>Unterstrichen</u><br> <sup>hochgestellt</sup> 8 9 <p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p> 10 11 <hr noshade size="1"> 12 13 14 <div align="left">links ausgerichtet</div> <div align="center">zentriert</div> 15 16 17 18 19 <ul type=circle> <li>Listeneintrag</li> <li>anderer Listeneintrag</li> </ul> Die Formatierung des Textes erfolgt durch Befehle, welche den Aufbau der Seite beschreiben. Meist besteht der Befehl aus einem öffnendem und einem schließenden Tag. Im Zwischenraum steht der zu formatierende Text. Ich stelle hier nur eine Auswahl der am häufigsten benötigten Befehle dar. Weitere Informationen sind im Tutorial selfhtml“. ” Zeile 1, 2: verschiedene Überschriften. Es gibt 5 verschiedene Größen. Zeile 3: Fettdruck Zeile 4: Ein Zeilenumbruch Zeile 9: Ein Absatz wird definiert Zeile 11: Eine horizontale Linie Zeile 13: Absätze, bestehend aus ganz verschiedenen Elementen wie Text, Grafiken, Tabellen usw., können in einen gemeinsamen Bereich eingeschloßen werden. Diesen Bereich können Sie dann gemeinsam ausrichten. Zeile 16-19: Eine Liste mit Knöpfen. Sie können für Aufzählungslisten bestimmen, wie das Aufzählungszeichen (Bullet) aussehen soll. Ob und wie der Bullet-Typ am Bildschirm angezeigt wird, hängt jedoch letztlich vom Zeichensatz der Schriftart ab, die der Anwender eingestellt hat. Hier wurde ein Kreis gewählt. Zeile 17: Listeneintrag 2 Inhalt: Numerierte Listen, Tabellen 1 2 3 4 5 6 <ol start="1" type="1"> <li>1.Listeneintrag</li> <li>2.Listeneintrag</li> <li value=8>8.Listeneintrag</li> <li>9.Listeneintrag</li> </ol> 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <table border=2 cellspacing=0> <tr> <th>Kopfzelle: 1. Spalte</th> <th>Kopfzelle: 2. Spalte</th> <th>Kopfzelle: 3. Spalte</th> </tr> <tr> <td>1. Zeile, 1. Spalte </td> <td>1. Zeile, 2. Spalte </td> <td>1. Zeile, 3. Spalte </td> </tr> <tr> <td>2. Zeile, 1. Spalte </td> <td>2. Zeile, 2. Spalte </td> <td>2. Zeile, 3. Spalte </td> </tr> </table> Zeile 1-6: <ol> leitet eine numerierte Liste ein (ol = ordered list). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item). </ol> beendet die Liste. Zeile 1: Mit start= innerhalb des einleitenden Tags von <ol> können Sie einen beliebigen Startwert setzen, z.B. <ol start=7>. Die Numerierung beginnt dann bei 7. Mit type="1" wird die Art der Numerierung festgelegt. Andere Arten sind type="A" für Großbuchstaben, type="I" große römische Buchstaben usw. . Zeile 4: Mit value= innerhalb des Tags von <li> in einer numerierten Liste können Sie den Startwert beliebig neu setzen. Zeile 8-24: Tabelle. Mit border wird die Breite des Außenrahmens, mit cellspacing die Breite der Gitternetzlinien definiert. Zeile 9,13: <tr> leitet eine neue Tabellenzeile ein (tr = table row). Im Anschluß daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschließendes Tag </tr> notiert. eile 10-12,15-17: Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten. Text in Kopfzellen wird hervorgehoben . <th> definiert eine Kopfzelle (th = table header). <td> definiert eine normale Datenzelle (td = table data). 3 Inhalt: Bilder 1 2 <img src="Pfad/Name.jpg" width=220 height=271> Zeile 1-3: Grafikreferenz. Die Grafikreferenz beginnt mit <img src=""> (img = image = Bild, src = source = Quelle). Die verwendete Datei Name.jpg“ muss im Verzeichnis Pfad“ liegen. ” ” Geeignete Dateiformate für WWW-gerechte Grafiken sind .gif und .jpeg oder .png. Zeile 2: Sie sollten immer die Breite und Höhe der Grafik angeben, um ein schnelleres Aufbauen der Seite zu ermöglichen. Die Zahlenangabe erfolgen in Pixel. Es ist auch möglich die Grafik zu verzerren oder zu verkleinern, indem man geeignete Pixelangaben verwendet. 1 <p><img src="datei.gif"></p> Zeile 1: Um eine Grafik alleine - ohne Text daneben - anzuzeigen, notieren Sie am besten vor und nach der Grafikreferenz eine Absatzschaltung für Textabsätze. Die Datei datei.gif“ befindet sich im ” gleichen Verzeichnis wie das html-Dokument. 1 2 3 4 <img src="bilder/polt1.gif" width=220 height=271 align=left> Text,der rechts um die Grafik fließt <br clear=all> und Text, der unterhalb der Grafik weitergeht Zeile 1: mit align=left wird die Grafik rechts vom Text umflossen. Die verwendete Datei polt1.gif“ ” befindet sich im Verzeichnis Bilder. Das Verzeichnis Bilder befindet sich im gleichen Verzeichnis wie das html-Dokument. Zeile 3: Wenn Sie mit align=left oder align=right darauffolgenden Text um eine Grafik fließen lassen, können Sie innerhalb des umfließenden Textes die Angabe <br clear=all> notieren, um den Textfluß zu unterbrechen und unterhalb der Grafik fortzufahren (br = break = Umbruch, clear = löschen, all = alles). 4 Inhalt: Links Alle Verweise in HTML haben einen einheitlichen Aufbau. <a href="[Verweisziel]">Verweistext</a> Das Setzen eines Verweises beginnt mit <a href= (a = anchor = Anker, href = hyper reference = Hyper(text)-Referenz). Hinter dem Istgleichzeichen geben Sie das Verweisziel an. Das Verweisziel muß in Anführungszeichen stehen. Dahinter endet das einleitende Tag mit >. Es folgt der Text, der dem Anwender als Verweis angeboten wird (bei den meisten WWW-Browsern andersfarbig, häufig unterstrichen). Im Beispiel ist das der Text ”Verweistext”. Dahinter wird das abschließende Tag </a> notiert. Zwischen <a href=...> und </a> können Sie anstelle eines Verweistextes auch eine Grafik als Verweis einbinden. 1 2 3 4 5 6 7 8 9 10 11 12 <a name="Ueberschrift"><h1>Überschrift</h1> </a> <a href="#Letzte"><img src="bilder/hilfe.jpg" alt="Zur letzten Zeile" align="left"></a> Das Bild ist ein Link zur letzten Zeile der Seite.<br clear=all> <a href="Seite2.html">Link zu einer HTML-Datei</a><br> <a href="../HTML-NuT7.pdf">Link zu einer Datei in einem ander Verzeichnis</a><br> <a href="bilder/berg.jpg"> Link zu einem Bild</a><br> <img src="bilder/orion.jpg"><br> <a href="bilder">Verzeichnis Bilder</a><br> <a name="Letzte">Letzte Zeile -Anker </a><br> <a href="#Ueberschrift">Zur Überschrift springen</a> Zeile 1: Anker für die Überschrift. Ein Link in Zeile 12 führt hierher. Zeile 2: Link innerhalb der Datei zum Anker Letzte“ in Zeile 10. Bei Sprüngen innerhalb der Datei ” muss vor den Namen des Ankers ein #“ gesetzt werden. Als Verweistext wird ein Bild ver” wendet. Zeile 5: Link zu einer HTML-Datei im gleichen Verzeichnis Zeile 6: Link zu einer Datei im Verzeichnis eins oberhalb des aktuellen Verzeichnis. Dort befindet sich die Datei HTML-NuT7.pdf“. Der Browser ruft automatisch den Acrobat-Reader auf, der die ” PDF-Datei darstellen kann. Das funktioniert genauso mit Word- oder Excel-Dateien. Zeile 8: Link zu einem Bild im Verzeichnis bilder“, das sich im aktuellen Verzeichnis befindet. ” Zeile 9: Hier ist ein Bild eingefügt, um das Springen von der Überschrift zur letzten Zeile zu verdeutlichen. Zeile 10: Link zu einem Verzeichnis. Der Inhalt des Verzeichnisses wird im Browserfenster dargestellt. Zeile 11: Anker für den den Text Letzte Zeile“. Der Link in der 2. Zeile verweist hierher. ” Zeile 12: Link zur Überschrift. 5
