HTML (HyperText Markup Language)
Werbung
HTML – Eine Kurzübersicht erarbeitet von Dipl.-Ing. Th. Amhaus HTML (HyperText Markup Language) Das Interessante an einer WWW-Seite ist, daß es eine ganz gewöhnliche Textdatei ist. Die Zeichen in dieser Textdatei beschränken sich auf die 127 Zeichen des ASCII-Zeichensatz, also auch keine Umlaute! Wie trotzdem Umlaute in WWW-Seiten gelangen, wird später erklärt. Neben dem eigentlichen Text sind die sogenannten «Tags» (HTML Befehle) das wichtigste einer WWW-Seite. Sie definieren, ob es sich bei einem Absatz um einen Titel, einen Link, ein Aufzählung oder um eine Tabelle handelt. Ein Tag beginnt immer mit einem «kleiner als»-Zeichen (<) und endet mit einem «größer als»-Zeichen (>). Was zwischen den beiden Zeichen steht, hängt vom Tag ab den Sie benützen wollen. So steht <H1> für eine Überschrift (H1 für Header 1), <STRONG> um etwas wichtiges zu markieren und <P> um einen neuen Absatz (P für Paragraph) zu beginnen. Sie können in Ihrem Textdokument also so viele neue Absätze erstellen (sprich, die Return-Taste drücken) wie Sie wollen, einzig bei einem <P>-Tag wird ein neuer Absatz auf Ihrer WWW-Seite sichtbar sein! Struktur eines HTML-Dokumentes Eine WWW-Seite besitzt immer mit folgender Struktur: <HTML> <HEAD> <TITLE>Titel des Dokumentes</TITLE> </HEAD> <BODY> Die eigentliche WWW-Seite </BODY> </HTML> Im Head-Tag kommen nur bestimmte Definitionen wie zum Beispiel der Titel des Dokumentes vor. Dieser Titel erscheint dann nicht im Text sondern in der Titelzeile des Browsers, mit dem die WWW-Seite angeschaut wird. Der eigentliche Inhalt der WWW-Seite steht erst unterhalb - und zwar umrahmt vom Body-Tag. HTML-Tags Struktur von HTML Befehlen (Tags) Ein Befehl wird immer durch das Einschließen in die Sonderzeichen < > markiert. Jeder Befehl hat einen Gültigkeitsbereich. Dazu gibt es einen BeginTag und einen EndTag BeginTag: <....> EndTag: </...> (der EndTag wird durch das Sonderzeichen / gekennzeichnet) z.B. der HTML-Tag: Seite 2 <HTML> Beginn des HTML Dokumentes ... HTML Dokument </HTML> Ende des HTML Dokumentes Die HTML-Befehle können ineinander verschachtelt sein. z.B. Struktur eines HTML-Dokumentes: <HTML> Beginn des HTML Dokumentes <HEAD> Beginn des Dokumentkopfes </HEAD> Ende des Dokumentkopfes <BODY> Beginn des Textkörpers .... Inhalt des HTML Dokument </BODY> Ende des Textkörpers </HTML> Ende des HTML Dokumentes Übersicht wichtiger HTML-Tags <!-<!DOCTYPE> <A> <AREA> <B> <BASE> <BIG> <BLINK> <BODY> <BR> <CITE> <CODE> <DD> <DIR> <DL> <DT> <EM> <FONT> <FORM> <H#> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <KBD> <LI> <MAP> Kommentar HTML Version Hyperlink, Referenz, Link Bereichsdefinition für Bilder mit Links Textformat Fett Standort eines Dokumentes Textformat größer Textformat blinken Textkörper Zeilenumbruch Textformat Zitat Textformat Programmcode Absatzformat Eintrag in Definitionsliste Absatzformat Verzeichnisliste Absatzformat Definitionsliste Absatzformat Eintrag in Definitionsliste Textformat hervorheben Schriftart auswählen Formulardefinition Überschrift Dateikopf eines HTML-Dokumentes Horizontale Linie ein HTML-Dokumente! Textformat Kursiv ein Bild einfügen Eingabefeld Textformat Tastatureingabe Absatzformat Listeneintrag Mausempfindliche Fläche für ein Bild Seite 3 <MENU> <OL> <OPTION> <P> <PRE> <SAMP> <SELECT> <SMALL> <STRIKE> <STRONG> <SUB> <SUP> <TABLE> <TD> <TEXTAREA> <TH> <TITLE> <TR> <TT> <U> <UL> <VAR> Menüliste Geordnete Liste Objekt in einem Auswahlfeld Absatz vorformatierter Text Textformat Beispiel Auswahlfeld Textformat kleiner Textformat durchgestrichen Textformat wichtig, streng Textformat hoch stellen Textformat tief stellen Tabelle Tabelleneintrag Texteingabefeld Tabellenüberschrift Dokumenttitel Tabellenzeile Textformat unproportional Textformat unterstrichen Ungeordnete Liste Textformat Variable Ausgewählte HTML-Parameter ACTION ALIGN ALT BORDER BORDERCOLOR CELLPADDING CELLSPACING CHECKED CLEAR COLSPAN COLOR COLS COMPACT COORDS HEIGHT HREF= HSPACE ISMAP Definiert ein CGI-Programmstart Ausrichtung Texte/Bilder Beschreibungstext für ein Bild Umrandung Farbe der Umrandung Abstand Umrandung Text (Tabellen) Abstand Tabellenspalten Eintrag ausgewählt Definition für Zeilenumbruch Anzahl zusammengefaßter Spalten Farbe Anzahl Spalten in einem Textfeld Kompaktdarstellung einer Definition Koordinaten eines Klickbereiches Höhe Hyperlinkdefinition Abstand Bild-Text Horizontal ein Bild ist Klickbereich Seite 4 LINK MAX MAXLENGTH METHOD MIN MULTIPLE NAME NOSHADE NOWRAP ROWSPAN ROWS SELECTED SHAPE SIZE START TARGET TEXT TOPMARGIN TYPE USEMAP VALIGN VALUE VSPACE WIDTH WRAP Textfarbe für Hyperlinks Maximalwert für eine Eingabe Maximalwert für Texteingabe Typ der Dateneingabe in Formularen Minimalwert einer Eingabe Mehrfachauswahl in Auswahlfeldern Sprungmarke Lesezeichen im Text Linie ohne Schatten kein Zeilenumbruch in Tabellen Anzahl zusammengef. Tabellenzeilen Anzahl der Zeilen in Textfeldern Eintrag ausgewählt (Auswahlfelder) Typ des Klickbereiches Größe festlegen Startnummerierung in geord. Listen Name des Zielfensters für Frames Standardtextfarbe Rand Oben Aufzählungstyp oder Eingabetyp ein Bild nutzt Klickbereich (MAP) Vertikale Ausrichtung in Tabellen Voreinstellung eines Eingabefeldes Vertikaler Abstand Text-Bild Breite Zeilenumbruch in Textfeldern Sonderzeichen in HTML Zeichen " & < > © ® À....àèìòù É...áéíóú .....âêîôû Ã..Õ.ã..õ. Ä..ÖÜ.äëïöüÿ Åå Ææ Beschreibung Gänsefüßchen Kaufmanns-Und Kleiner als Größer als Copyright Registered Buchstabe mit Grave Buchstabe mit Acute Buchstabe mit Circumflex Buchstabe mit Tilde Buchstabe mit Doppelpunkt A mit Ring A und E als ein Zeichen Seite 5 Ersatzzeichen &quot; &amp; &lt; &gt; &copy; &reg; &?grave; -> ? = Buchstabe . &?acute; -> ? = Buchstabe &?circ; -> ? = Buchstabe &?tilde; -> ? = Buchstabe &?uml; ? = Buchstabe &Aring; &aring; &AElig; &aelig; ß Çç Øø Scharfes s (sz) C mit Cedille Durchgestrichenes O &szlig; &Ccedil; &ccedil; &Oslash; &oslash; Umlaute in HTML Das Problem umgehen Sie, indem Sie diese "kritischen" Zeichen nicht direkt eingeben, sondern umschreiben. Dazu stellt HTML einige Codes bereit, die jeweils mit "&" eingeleitet und mit einem Semikolon abgeschlossen werden. Die Umschreibung für ein "ö" lautet zum Beispiel "&ouml;". Die einzelnen Codes finden in der Übersicht. Sie sollten unbedingt alle dort aufgelisteten Zeichen umschreiben. Eine Beispielseite sieht dann wie folgt aus: <html> <head> <title>Die Stra&szlig;enbahn Seite</title> </head> <body> Willkommen auf meiner Homepage! <br> Ich suche Leute, die sich genauso für Stra&szlig;enbahnen begeistern k&ouml;nnen wie ich. <br><br> Schreibt mir doch einfach eine Mail. Meine E-Mail-Adresse:... </body> </html> Die Zeichenumschreibung direkt einzugeben verlangt Konzentration. Am besten arbeiten Sie, wenn Sie die Sonderzeichen am Schluß einfach mit der Suchenund-Ersetzen-Funktion austauschen. Hyperlinks in HTML Links: Verbindungen zu anderen Dokumenten herstellen Tag: <a href=...> Etwas vom wichtigsten an einer WWW-Seite sind die Verbindungen zu einem anderen Dokument, die sogenannten «Links». Einen Link definieren Sie mit folgendem Tag: <A HREF="URL">Text</A> <A HREF=“Seite.htm">Text</A> <A HREF=“#Lesezeichen">Text</A> Das Wort URL ersetzen Sie durch die URL, die angesteuert werden soll, wenn jemand den Link anklickt. Beispiele: Das ist ein Hyperlink zur nächsten Seite <a href="Seite2.htm">Seite2</a>. Das ist ein Hyperlink zur SiSy Hompage <a href="http://www.sisy.de/">SiSy</a>. Absatzsteuerung in HTML Absatz (paragraph) Tag: <p> Seite 6 Im einfachsten Fall besteht eine HTML-Datei zwischen <body> und </body> nur aus laufendem Text mit den Befehlen <p> für den Beginn eines jeden Absatzes. Die meisten Web-Browser stellen Absätze durch eine Leerzeile dar, seltener durch Einrücken der ersten Zeile wie im Buchdruck. Manche Web-Browser erzeugen bei mehrfachen <p>-Befehlen mehrfache Leerzeilen, die meisten ignorieren jedoch leere Absätze und stellen alle Absätze mit einheitlichen Abständen dar. Beispiel 1: Darstellung im Browser: Das ist der Absatz 1. Das ist der Absatz 1. Das ist der neue Absatz. Das ist der neue Absatz. Beispiel 2: Darstellung im Browser: <p>Das ist der Absatz 1. <\p> Das ist der Absatz 1. <p>Das ist der neue Absatz. <\p> Das ist der neue Absatz. Mit Align-Parametern kann angegeben werden, wie der Absatz dargestellt werden soll (rechtsbündig, linksbündig, zentriert) Beispiel: <p align=center> ... </p> Ein </p>-Befehl zum Beenden von Absätzen ist nicht nötig, jeder neue Absatz und jede neue Überschrift oder Liste und dergleichen beendet automatisch den vorherigen Absatz. Zeilensteuerung in HTML Zeilenwechsel (line break) Tag: <br> Der Zeilenumbruch erfolgt im allgemeinen automatisch so, wie es der Fenstergröße des Benutzers in seinem Browserfenster am besten entspricht. Zusätzliche Zeilenwechsel innerhalb von Absätzen kann man mit dem Tag <br> erreichen. Beispiel1: Darstellung im Browser: H&auml;nschen klein Hänschen klein ging allein in das World Wide Web hinein. ging allein in das World Wide Web hinein. Beispiel2: Darstellung im Browser: H&auml;nschen klein Hänschen klein <br>ging allein ging allein <br>in das World Wide Web hinein. in das World Wide Web hinein. Manche Web-Browser erzeugen bei mehrfachen <br>-Befehlen mehrfache Leerzeilen, die meisten ignorieren jedoch leere Zeilen und stellen alle Absätze mit einheitlichen Zeilenabständen dar. Seitensteuerung in HTML Seitenwechsel (kein HTML-Befehl!) Ersatzdarstellung z.B. durch Tag: <hr> Im Gegensatz zur gedruckten Ausgabe, wo alle Informationen auf Papierblätter einer bestimmten Größe aufgeteilt werden müssen, erfolgt die Ausgabe der WWW-Informationen auf den Bildschirmen ohne solche Seitengrenzen. Der Seite 7 Benutzer kann mit den Funktionstasten oder dem Scrollbar (Rollleiste) seines Web-Browsers fortlaufend und beliebig weit nach oben und unten lesen. Es gibt deshalb in HTML keinen Befehl für einen Seitenwechsel. Neue Seiten bzw. neue Fenster im Browser erreicht man nur durch den Sprung (Tag: <a href=...>) auf eine neue HTML-Datei. Innerhalb von WWW-Seiten kann man für Trennlinien, die am Bildschirm eine ähnlich trennende Funktion wie das Umblättern auf eine neue Papier-Seite erfüllen, den Befehl <hr> bzw. die Befehlsfolge </p><hr><p> verwenden. Beispiel: Darstellung im Browser: <p>Das ist der Abschnitt 1. <\p> Das ist der Abschnitt 1. <hr> <p>Das ist der neue Abschnitt. <\p> Das ist der neue Abschnitt. Überschriften in HTML Überschriften (heading) Tag:<h#> Zwischen <hx> und </hx> kann man Überschriften der Ebene x (1 bis 6) angeben. Der dazwischen stehende Text kann auch Bilder oder Links enthalten. Es wird empfohlen, die Hierarchie der Überschriften genau einzuhalten und nicht mehr als 3 Ebenen zu verwenden: <h1> für die Haupt-Überschriften (Kapitel), <h2> für Abschnitte innerhalb der Kapitel, <h3> für Unter-Abschnitte innerhalb der Abschnitte. Neue Kapitel oder Abschnitte bedeuten automatisch neue Absätze, die Überschriften dürfen deshalb nicht innerhalb von Absätzen oder Listen und dergleichen stehen. Die meisten Web-Browser stellen die Überschriften durch fette und größere Schrift dar. Manche Web-Browser rücken den nachfolgenden Text entsprechend der Hierarchie-Ebene ein. Beispiel: <h1>Überschrift Format 1</h1> <h2>Überschrift Format 2</h2> <h3>Überschrift Format 3</h3> Standardtextformate in HTML Kursiv <i> Das <i>ist der</i> Text Fett <b> Das <b>ist der</b> Text Wichtig <strong> Das <strong>ist der</strong> Text Unterstrichen <u> Das <u>ist der</u> Text Durchgestrichen <strike> Das <strike>ist der</strike> Text Blinkend <blink> Das <blink>ist der</blink> Text Größer <big> Das <big>ist der</big> Text Kleiner <small> Das <small>ist der</small> Text Hochgestellt <sub> Das <sub>ist der</sup> Text Seite 8 Das ist der Text Das ist der Text Das ist der Text Das ist der Text Das ist der Text Das ist der Text Das ist der Text Das ist der Text Das ist der Text Tiefgestellt <sup> Das <sup>ist der</sup> Text Das ist der Text Die Darstellung ist in jedem Browser und je nach Schriftart unterschiedlich. Weitere Textformate: <code>, <em>, <cite>, <samp>, <kbd>, <tt>, <var> Ausrichtung (Bilder und Texte) in HTML ALIGN Der Parameter ALIGN= definiert, wie die zugehörigen Texte/Bilder ausgerichtet werden sollen. Es werden folgende Werte erlaubt: Ausrichtungsmöglichkeiten für Texte und Bilder ALIGN= value LEFT Text/Tabelle/Grafik wird links ausgerichtet CENTER Text/Tabelle/Grafik wird zentriert ausgerichtet RIGHT Text/Tabelle/Grafik wird rechts ausgerichtet Zusätzlich bei Bildern: MIDDLE Grundlinie des Textes wird auf die Mitte gesetzt ABSMIDDLE Mitte des Textes wird auf die Mitte gesetzt BASELINE Grundlinie des Textes wird auf die Grundlinie gesetzt BOTTOM Grundlinie des Textes wird auf die Grundlinie gesetzt ABSBOTTOM Grundlinie des Textes wird auf die Grundlinie gesetzt Schriftarten in HTML Schriftart wählen Tag: <font...> Das Kommando für diesen Zweck lautet <font ... >. Es kennt eine Reihe von Parametern, welche die genaue Schriftformatierung festlegen: »size« definiert den Schriftgrad, »color« bestimmt die Farbe und »face« die Schriftart. Ein Kommando könnte zum Beispiel lauten: Beispiel: <font size=5 color=red face=Arial,Helvetica> Willkommen auf meiner Homepage! </font> In diesem Fall wird die Überschrift der Seite in einem hohen Schriftgrad, in roter Schriftfarbe und in der angegebenen Schriftart dargestellt. Zunächst zum Parameter »size«. Dieser kennt sieben Abstufungen: von 1 (sehr klein) bis 7 (sehr groß). Außerdem kann die Angabe relativ erfolgen: <font size=+2> stellt den Text zum Beispiel zwei Stufen größer dar und <font size=-1> eine Stufe kleiner. Listen in HTML Einen Liste erzeugen Tag: <OL> Das <OL> Tag leitet den Beginn einer geordneten Liste ein. Die Geordnete Liste ist mit </OL> abzuschließen. Die Listenelemente innerhalb der Liste sind mit dem <LI> Tag zu markieren. Als Parameter können die Werte TYPE= und START= angegeben werden. Beispiel: Seite 9 <p>Eine Aufzählung </p> <ol type=1> <li>Nummer 1 <li>Nummer 2 <li>Nummer 3 </ol> Farbe in HTML Parameter COLOR, BGCOLOR Der Parameter COLOR= definiert die Farbe eines Objekts. Der Parameter BGCOLOR= definiert die Farbe des Hintergrundes. Die Angabe kann entweder mit einem Farbnamen erfolgen oder direkt mit RGB-Werten. Werden HEX-Werte angegeben, so ist folgendes Format zu verwenden: COLOR="#rrggbb". Anstelle von rr ist die Intensität der Farbe Rot anzugeben (00FF). Anstelle von gg ist Grün und bb ist Blau zu setzen. Mögliche Namen für Farben sind: red Rot yellow Gelb green Grün blue Blau black Schwarz grey Grau pink Rosa brown Braun violet Lila magenta Magenta Beispiel: Hintergrundfarbe und Textfarbe (im Dokumentenkopf definieren): <body bgcolor=yellow text=red> <body bgcolor=#c0c0c0 text=#000000> Beispiel: rote Schrift (im Text definiert): <font color=red > roter Text </font> Bilder in HTML Bilder in eine WWW-Seite einfügen Zuerst brauchen Sie das Bild im GIF- oder JPEG-Format. (werden durch alle aktuellen Scannerprogramme erzeugt). Vorsicht: Alte WWW-Browser können nur das GIF-Format lesen! Plazieren Sie folgenden Tag an der Stelle, wo das Bild dann erscheinen soll: <IMG SRC="Pfad des Bildes"> Beispiel: <img src="bild.gif"> Sie können aber auch die Größe eines Bildes festlegen Die dafür nötigen Parameter sind <<width>>=Breite und <<height>>=Höhe. Beispiel: <img src="bild.gif" width="200" height="100"> Es empfiehlt sich im weiteren, dem Bild einen beschreibenden Text zuzuordnen. Der nötige Parameter lautet <<alt="... ">>. Beispiel: Seite 10 <img src="bild.gif" width="200" height="100"alt="mein erstes Bild" > Hintergrund in HTML Den Hintergrund des Textkörpers definieren Tag <body ...> Das <BODY> Tag definiert den Beginn des Informationsinhaltes einer HTMLSeite. Hier steht der Text, der im Fenster angezeigt wird. Als Parameter können die Werte BACKGROUND=, LINK=, VLINK=, ALINK=, TEXT= und TOPMARGIN= angegeben werden Das Endetag </BODY> schließt die Körperdefinition ab. Beispiele: <body background="stone.jpeg"> Das Bild stone.jpeg wird als Hintergrundbild definiert. <body bgcolor=#c0c0c0> Die Hintergrundfarbe wird mit einem hellen Grau definiert. Bilder als Hyperlink in HTML Bilder als Hyperlink in eine WWW-Seite einfügen: Sie brauchen wiederum ein Bild im GIF- oder JPEG-Format. Plazieren Sie folgenden Tags an der Stelle, wo das Bild dann erscheinen soll: <A HREF=“ziel"> StartTag für den Hperlink <IMG SRC="Pfad des Bildes“ ISMAP> Bild mit Patrameter ISMAP <\A> EndTag Hyperlink Beispiel: <br>Das Bild kann man anklicken!<br> <a href=“Seite2.htm"> <br><img src=“Bild.jpg" width="50" height="80"alt=“drück mich!" ismap> </a> Übung: Die erste WWW-Seite Benutzen sie das Textprogramm write.exe oder wordpad.exe zum erstellen des folgenden Textes. Beachten Sie die Struktur einer WWW-Seite. Eine WWW-Seite beginnt immer mit folgender Struktur: <HTML> <HEAD> <TITLE>Meine erste WWW-Seite</TITLE> </HEAD> <BODY> Das soll meine erste Hompage werden. </BODY> </HTML> Speichern Sie diesen Text als Seite1.htm und öffnen diese mit einem Browser. Beachte: Seite 11 Datei / Speichern unter..., Dateiname Seite1.htm, Dateityp: Textdokument Seite 12
