Was ist HTML? Die Abkürzung HTML steht für "Hypertext Markup Language", dies heißt auf Deutsch so viel wie "Hypertext Auszeichnungssprache". Dabei handelt es sich um eine "Auszeichnungssprache" für Webdokumente, welche die Struktur und Objekte definiert (bzw. beschreibt). Es ist somit keine funktionale Programmiersprache wie beispielsweise PHP, womit Berechnungen, usw... durchgeführt werden können. HTML beschreibt das Aussehen einer Website, beispielsweise die Positionen eines Linkes (ein Verweis auf eine andere Internetseite) oder die Farbe des Textes. HTML wird auf Englisch geschrieben. Was kann ich mit HTML machen? Wie schon erwähnt ist HTML eine reine "Auszeichnungssprache", d. h. dynamische Elemente wie Variablen, bewegte Links, und Ähnliches kann mit reinem HTML nicht realisiert werden. Dazu sind dann z. B. JavaScript- oder PHP-Kentnisse erforderlich, welche jedoch wiederum HTML als Grundkentnisse vorraussetzen. Welche Anschaffungen muss ich machen um HTML programmieren zu können? Gar keine. Sie brauchen lediglich einen beliebigen Texteditor (wie z. B. Notepad), welcher bei jedem Betriebssystem schon mitgeliefert ist. Denn HTML-Dateien bestehen aus ganz normalen Buchstaben, die jeder beliebige Texteditor lesen und auch bearbeiten kann. Es sind somit keine Anschaffungen zu tätigen. 1.Die Syntax Die Grundsyntax HTML stammt ursprünglich von einer Sprache namens SGML (Standard Generalized Markup Language) ab, welche die Vorgabe für andere Sprachen festlegt. Eine HTML-Datei besteht aus sogenannten Tags (bereits vorgegebene Namen, um Objekte darzustellen, z. B. Links oder Bilder), welche wiederum Attribute (Eigenschaften) enthalten. Tags werden immer mit dem Kleiner-als-Zeichen ( < ) eingeleitet, anschließend folgt der Name des Tags und zum Schluss wird der Tag mit dem Größer-als-Zeichen ( > ) abgeschlossen. Die Tags müssen, nachdem sie geöffnet wurden, wieder geschlossen werden. Dazu kommt, wo er geschlossen werden soll, vor den Namen des Tags ein Slash ( / ). Tipp: Merken Sie sich zuerst einmal, dass alle Tags, die geöffnet werden, auch wieder geschlossen werden müssen, zu Ausnahmen kommen wir später noch. Text Zwischen der Öffnung und der Schließung des Tags kommt dann der Inhalt des Tags. Attribute kommen nach den einleitenden Anfang des Tags und werden durch ein Leerzeichen voneinander getrennt. Man weist ihnen durch den Gleichheits-Operator ( = ) einen Wert, der in Anführungszeichen ( " ) gesetzt wird, zu. Die Reihenfolge der Attribute in einem Tag kann beliebig sein. Es können im Code beliebig viele Zeilenumbrüche gemacht bzw. weggelassen werden. Text Die HTML-Grundstruktur Die HTML-Grundstruktur ist eine Vorraussetzung bei allen HTML-Dokumenten und sollte immer zuerst geschrieben werden. Sie fängt mit dem Tag an, der zuerst die HTML-Seite einleitet. Anschließend kommt zwischen den -Tag der -Tag, welcher den Kopf einleitet. In den -Tag kommt alles Unsichtbare (wie die Gedanken), z. B. Informationen für Suchmaschinen. In den -Tag kommt außerdem auch noch der -Tag, er ist sozusagen der Körper und hierein kommt alles Sichtbare, alles was der Benutzer sehen soll. Merken Sie sich die HTML-Grundstruktur sehr gut! Der Dokumenttyp Da es im Internet neben HTML noch weitere "Auszeichnungssprachen", teilweise auch in verschiedenen Versionen gibt, ist es empfehlenswert, dass Sie einen Dokumenttyp einbinden. Der Dokumenttyp wird noch vor dem ""-Einleitungstag eingebunden, sodass der Browser erkennen kann, wie er mit den folgenden Informationen in der Datei umgehen muss. Verwenden Sie vorläufig den folgenden Dokumenttyp, die genaueren Einzelheiten hierzu werden Ihnen später noch vermittelt. Sie beherrschen die HTML-Grundstruktur sehr gut und haben auch das Prinzip der HTML-Syntax verstanden? Legen Sie zunächst die Datei "projekt1.html" in Ihrem Arbeitsverzeichnis an (betrachten Sie dazu auch "Neue .html-Datei anlegen" unten) und öffnen Sie diese in einem beliebigem Texteditor. Anschließend fügen Sie darin die HTML-Grundstruktur ein. Zwischen den - Tag kommt dann der Text der angezeigt werden soll. Ein beliebiger Text ist der erste Tag, den Sie kennenlernen, der in den <head> - Bereich einer HTML-Seite kommt. Er definiert den Text in der Titelzeile des Browsers. Der gewünschte Titel kommt dabei zwischen <title> und Normalerweise sind die Informationen im -Tag für den Benutzer nicht sichtbar, der -Tag stellt jedoch eine Ausnahme dar. Das Aussehen des Titels lässt sich nicht mit HTML beeinflussen (d. h. Sie können den Titel beispielsweise nicht fett darstellen lassen). Betrachten Sie für das folgende Beispiel die Titelzeile Ihres Browsers (unter Windows ganz oben am Fensterrand). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Der Titel Ein beliebiger Text Möchten wir nun z. B. das Wort "ein" fett schreiben, so fügen wir dieses Wort in den -Tag ein, möchten wir das Wort "beliebiger" kursiv anzeigen lassen, fügen wir das Wort in den -Tag ein und wollen wir das Wort "Text" unterstrichen formatieren, so fügen wir das Wort in den -Tag ein. Wichtig Der - Tag lässt den Text fett (bold) anzeigen. Der - Tag lässt den Text unterstrichen (unterlined) anzeigen. Der - Tag lässt den Text kursiv (italic) anzeigen. Der jetzige Stand des Projektes: Der Titel Ein beliebiger Text Nun gibt es auch noch den - Tag (font = Schrift auf Deutsch), mit dessen Hilfe noch viele weitere Dinge umgesetzt werden können. So gibt das Attribut "color" die Farbe des Textes an und das Attribut "size" die Größe des Textes. Falls ein "Farbcode" (immer hexadezimal, z. B: #00FF03) als Inhalt des "color" - Attributes verwendet werden soll, muss dieser mit einer Raute ( # ) eingeleitet werden, ein "Farbwort" (z. B. red) dagegen nicht. [Sehen Sie unten: Wie erstelle ich einen hexadezimalen "Farbcode"?] Bei dem Attribut "size" können Werte von -2 (sehr klein) bis +2 (sehr groß) eingesetzt werden. Nehmen wir einmal an, wir möchten die Wörter "ein" und "beliebiger" rot färben, und das Wort "Text" so groß wie (bisher) möglich anzeigen lassen. Hinweis: Da HTML zukünftig keine "Design-Sprache" wird, sondern mehr in Richtung Logik und Struktur gehen soll, möchte ich Ihnen allgemein von der Verwendung von "designspezifischen Tags" wie beispielsweise , , und abraten. Sie werden im Laufe des Tutorials weitere Möglichkeiten kennenlernen, wie Sie Ihre designerische Vorstellungen optimal verwirklichen können. Folgendermaßen sieht es dann aus: Der Titel Ein beliebiger Text Möchten wir nun beispiesweise eine zweite Zeile unter dieser einfügen, so müssen wir zuerst einen Zeilenumbruch mit
(Break) machen und anschließend kann darunter ein neuer Text eingefügt werden. Es ist übrigens egal, ob im Texteditor ein Zeilenumbruch erfolgt oder nicht, im Browser wird immer ein Zeilenumbruch dargestellt, sobald ein
erscheint. Der letzte Schritt des Projektes: Der Titel Ein beliebiger Text
Dies ist die zweite Zeile. Zusammengefasst Mit dem - Tag kann Text fett, mit dem - Tag unterstrichen, und mit dem - Tag kursiv angezeigt werden. Mit Hilfe des Tags kann die Größe und die Farbe des Textes angegeben werden. Dabei gibt das Attribut "color" die Farbe an (Raute, falls Farbcode) und "size" die Größe (von -2 bis +2). Zeilenumbrüche können mit dem Tag
gesetzt werden. In späteren Teilen des Tutorials werden Sie modernere, umfangreichere Möglichkeiten kennenlernen, um Ihre Vorstellungen in Sachen Design umzusetzen. Neue .html-Datei anlegen Befolgen Sie die folgenden Schritte, um eine HTML-Datei unter Windows zu erstellen: 1.Gehen Sie dazu in Ihr Arbeitsverzeichnis mit dem Explorer. 2.Üben Sie einen Rechtsklick auf eine freie Stelle im Explorer aus. 3.Fahren Sie mit dem Mauszeiger auf "Neu >" und wählen Sie "Textdokument" aus. Bestätigen Sie dies mit einem Klick. 4.Geben Sie der Datei nun die Endung ".html", indem Sie die vorhandene Endung ".txt" durch ".html" ersetzen. (Wird diese Dateiendung nicht angezeigt, gehen Sie auf "Extras" (unter Windows 2000/XP) bzw. "Ansicht" (unter Windows 95/98/ME) -> "Ordneroptionen" und klicken Sie dort auf die Registerkarte "Ansicht". Entfernen Sie dort den Haken vor "Erweiterungen bei bekannten Dateitypen ausblenden" und bestätigen Sie dies mit einem Klick auf "OK".) Wie erstelle ich einen hexadezimalen "Farbcode"? Möchten Sie wissen, wie Sie unter Windows einen "Farbcode" erstellen können, mit Ihrer gewünschten Farbe? Ein Farbcode besteht immer aus einem "#"-Zeichen am Anfang, sowie aus sechs weiteren Stellen. Ein Beispiel für ein Farbcode wäre "#FF67A2". Der Farbcode gibt die Rot-, Grün- und Blau-Werte einer Farbe an, weshalb er auch RGB-Wert genannt wird. 1.Öffnen Sie über "Start" -> "(Alle) Programme" -> "Zubehör" -> "Paint" das Programm Paint. 2.Klicken Sie links unten auf der Farbpalette doppelt auf eine beliebige Farbe. 3.Im daraufhin erscheinenden Fenster klicken Sie auf "Farben definieren >>". 4.Wählen Sie dort eine Farbe aus, die Ihnen gefällt. 5.Öffnen Sie neben Paint noch über "Start" -> "(Alle) Programme" -> "Zubehör" -> "Rechner" den Taschenrechner. 6.Klicken Sie im Taschenrechner auf "Ansicht" -> "Wissenschaftlich", stellen Sie sicher, dass links "Dez" markiert ist. 7.Nehmen Sie nun wieder Paint her und geben Sie den Wert für "Rot" in den Taschenrechner ein. 8.Markieren Sie im linken Teil des Taschenrechners den Kreis links neben "Hex", dies ist der erste Wert des Farbcodes. Erscheint hier beispielsweise "D7", so haben wir bereits den noch unvollständigen Farbcode "#D7". 9.Markieren Sie im Taschenrechner wieder "Dez", nehmen Sie in Paint den "Grün"-Wert Ihrer Farbe her, geben Sie diese wieder in den Taschenrechner ein und klicken Sie auf "Hex". Kommt hier z. B. der Wert "B" (also nur ein Einstelliger) heraus, so muss davor eine 0 angefügt werden. Wir erhalten somit den bisherigen Wert "#D70B". 10.Wiederholen Sie Schritt 9 nochmals mit dem "Blau"-Wert Ihrer Farbe. Sie sollten letztendlich einen Wert in der Art, wie z. B. "#D70BAF" erhalten. 11.Abschließend können Sie Paint und den Taschenrechner schließen. Tabellen sind ein sehr wichtiges Hilfsmittel für Webdesigner. Sie ermöglichen es Seiten besser zu strukturieren, beispielsweise auch mit unsichtbaren Tabellen. Eine Tabelle wird mit dem - Tag eingeleitet und mit dem - Tag, mit dem eine neue Zeile in der Tabelle begonnen wird, fortgesetzt. Der ) ein. Der aktuelle Stand: Der Titel
- Tag leitet eine neue Zelle in einer Zeile ein. Die einleitenden Tags für die Tabelle, Zeile und Zelle müssen wieder geschlossen werden. Merken Sie sich am besten, dass mit dem Öffnen einer Tabelle auch das Öffnen einer Zeile und einer Zelle verbunden ist, da eine Tabelle ohne Zeilen und Zellen keinerlei Verwendung hat. So sieht die Grundstruktur einer Tabelle aus:
...
Damit Sie sich im folgenden Tutorial besser zurecht finden, umranden wir die derzeit unsichtbaren Tabellen mit einem 2 Pixel-dickem Rahmen. Dazu wird der Tabelle das Attribut "border" mit dem Inhalt "2" (in Pixeln angegeben!) zugewiesen. Um bereits ein kleines Ergebnis feststellen zu können, binden wir noch eine Zelle (		) in der bereits vorhandenen Zeile (
1.Zelle 2.Zelle
Möchten Sie, dass die Tabelle dieselbe Größe wie das Browserfenster hat, so legen wir dies mit dem Attribut "width" (dt. Breite) fest. Der Tag ist für den - und - Tags können die Inhalte in den Zellen positioniert werden. Der Inhalt "left" ist der Standard und gibt an, dass der Text bzw. der Inhalt nach links ausgerichtet werden soll, "center" gibt an, dass der Text bzw. Inhalt mittig sein soll und "right" definiert, dass der Text rechts angezeigt werden soll. Mit dem (inzwischen veralteten)
- Tag lassen sich Texte bzw. andere Elemente zentriert auch außerhalb von Tabellen anzeigen. Möchten wir die erste Zelle nach rechts ausrichten und die zweite Zelle mittig, so würde das wie folgt aussehen: Der Titel
- Tag einsetzbar. Das Attribut kann eine Prozentangabe (X% von Browserfenster, 100% = Größe des Browserfensters) als auch eine Pixelangabe beinhalten. Der Code dazu würde so aussehen: Der Titel
1.Zelle 2.Zelle
Mit dem Attribut "align" für 		und
1.Zelle 2.Zelle
Testtext
Das Attribut "bgcolor", welches sowohl für den - Tag, als auch für den - Tag verwendet werden kann, definiert die Hintergrundfarbe der Tabelle (beim Einsatz im
-Tag) bzw. der ganzen Seite (beim Einsatz im -Tag). Als Inhalt kann dem "bgcolor"-Attribut, genauso wie dem Attribut "color" des - Tags sowohl individuelle Farbcodes (mit Raute beginnen!), als auch Farbwörter (wie z. B. blue), zugewiesen werden. Nehmen Sie als Hintergrundfarbe für die Seite z. B. schwarz (black), für die Tabelle rot (red) und als Schriftfarbe (dies regeln Sie mit dem - Tag) beispielsweise blau (blue). Der Titel
1.Zelle 2.Zelle
Testtext
Um einen Abstand von 5 Pixeln zu allen anliegenden Seiten innerhalb einer Zelle zu bewirken, wird das Attribut "cellpadding" (Angabe nur in Pixel!) für die gesamte Tabelle verwendet. Der Titel
1.Zelle 2.Zelle
Testtext
Tabellen bestehen nicht nur aus einer Zeile, sondern normalerweise aus mehreren. Natürlich lassen sich deshalb noch mehr -Tags öffnen. Bedenken Sie jedoch, dass Sie in jeder Tabelle nur maximal einen -Tag geöffnet haben dürfen. Bedenken Sie bitte, dass die Tabellenstruktur immer dieselbe sein muss, so müssen in der zweiten Zeile beispielsweise auch wieder zwei Zellen erstellt werden, wenn dies in der ersten Zeile so ist. Der Titel
1.Zelle der ersten Zeile 2.Zelle der ersten Zeile
1.Zelle der zweiten Zeile 2.Zelle der zweiten Zeile
Testtext
Zusammengefasst Die Tabelle wird mit dem - Tag eingeleitet, die Zeile mit dem - Tag und die Zelle mit dem
- Tag. Das Attribut "border" für den - Tag gibt die Rahmendicke in Pixel an. Mit Hilfe des Attributes "width" können Sie die Breite der Tabelle und der einzelnen Zellen festlegen. Die Positionierung der Inhalte von einzelnen Zellen kann mit dem "align" - Attribut definiert werden. Verwenden Sie das Attribut "bgcolor" um die Hintergrundfarbe der ganzen Seite bzw. der ganzen Tabelle zu bestimmen. Um einen Abstand zu allen anliegenden Seiten innerhalb einer Zeile zu bewirken, wird das Attribut "cellpadding" (Angabe nur in Pixel!) verwendet. Außerhalb von Tabellen kann man mit dem
- Tag auch Text oder andere Elemente zentriert anzeigen. Mit Tabellen können Sie bereits gut umgehen. Aber wie sieht es mit Bildern aus? Bilder sind mittlerweile ein wichtiger Bestandteil des Internets geworden, so wird es durch Bilder beispielsweise möglich Informationen zu vermitteln (z. B. das Aussehen einer Person), die mit reinem Text nicht möglich wären. Fangen wir zunächst wieder mit der HTML-Grundstruktur an. Mit dem - Tag ("img" ist die Abkürzung für engl. "image", dt. Bild) lassen sich Bilder anzeigen. Dabei gibt das Attribut "src" ("src" ist die Abkürzung für engl. "source", dt. Quelle) im -Tag die Adresse bzw. Pfadangabe des Bildes an (z. B. "test.jpg", falls sich das Bild in demselben Pfad befindet wie die HTML-Datei). Der - Tag ist der erste Tag, den Sie kennen, welcher NICHT geschlossen werden muss. Der Titel Das war es vorerst eigentlich auch schon mit den Bildern. Aber nun gibt es auch noch Links (Verweise zu anderen Seiten), mit denen die verschiedenen Internetseiten miteinander verknüpft sind. Somit können Sie auf Ihrer Seite z. B. auf andere Seiten, die Ihnen gut gefallen, linken. Links werden mit dem - Tag definiert, dabei gibt das Attribut "href" die Zieladresse, wohin der Link führen soll, an. Der Linktext, der angezeigt werden soll, kommt zwischen und . Falls Sie das Ziel in einem neuen Fenster öffnen wollen, so müssen Sie noch das Attribut "target" mit dem Inhalt "_blank" hinzufügen. Der Titel Testlink Möchten Sie nun beispielsweise ein Bild verlinken, so ist dies auch kein Problem. Sie fügen einfach den Code des Bildes zwischen ... ein. Damit ist das Bild sozusagen der "Linktext". Der Internet Explorer (und manch andere Browser), der von den meisten Surfern genutzt wird, fügt dann jedoch einen Rahmen um das Bild ein. Um dies zu verhindern müssen Sie dem Attribut "border" mit dem Wert "0" den Rahmen explizit deaktivieren. Der Code würde dann folgendermaßen aussehen: Der Titel Zusammengefasst Bilder werden mit dem - Tag eingeleitet, welcher NICHT geschlossen wird. Die Pfadangabe bzw. URL des Bildes wird mit dem Attribut "src" (Abk. für "source") angegeben. Links werden mit dem - Tag definiert, der Linktext kommt zwischen und . Die Zielurl kommt in das Attribut "href", falls sich das Ziel im neuen Fenster öffnen soll, muss dem Attribut "target" den Wert "_blank" zugewiesen werden. Falls ein Bild verlinkt werden soll, kommt dies ganz normal zwischen und , der Rahmen muss im - Tag jedoch explizit deaktiviert werden, indem dem Attribut "border" der Wert "0" gegeben wird. Mittlerweile haben Sie schon Vieles über HTML gelernt und deshalb ist es nun auch Zeit für die ersten Übungen. Speichern Sie alle Übungen am Besten in dem Ordner "uebungen" in Ihrem Arbeitsverzeichnis ab. Auch empfehle ich Ihnen die Übungsdateien fortlaufend zu nummerieren, z. B. die erste Datei "uebung1.html" nennen, die zweite Datei "uebung2.html" und so weiter. 1.Legen Sie eine zweispaltige Tabelle an, wobei die erste Zeile eine Breite von 200 Pixeln hat und die zweite 300 Pixel (bedenken Sie: das Attribut "width" lässt sich auch bei einzelnen Zellen verwenden). Fügen Sie anschließend den Satz "Das ist ein Testsatz." in die rechte Zelle ein. Das Wort "das" soll rot sein, das Wort "ist" kursiv, das Wort "ein" fett und das Wort "Testsatz" unterstrichen. Der ganze Satz sollte so klein wie (bisher) möglich angezeigt werden. 2.Definieren Sie im HTML-Code eine Tabelle mit 3 Zellen, mit einer Rahmendicke von 1 Pixel. Der Abstand zu allen Seiten sollte 3 Pixel betragen. Fügen Sie in die erste Zelle das Wort "Schuh" und in die 2.Zelle das Wort "Stadt" ein. Lassen Sie in der 3.Zelle das Wort "Schuster" anzeigen. Die erste Zelle soll mittig ausgerichtet sein und die zweite nach rechts. Die dritte Zelle soll nach links ausgerichtet sein. Insgesamt sollte die Breite der Tabelle 80% der Browserbreite betragen. Die Tabelle sollte eine gelbe (yellow) Hintergrundfarbe haben. 3.Legen Sie eine HTML-Seite mit dem Titel "3.Übung" an, auf welcher sich ein beliebiges Bild befindet, das auf die Seite "http://www.htmltut.de" verweist. Der Link soll sich in einem neuen Fenster öffnen. 1.Eine zweispaltige Tabelle können wir mit Hilfe des
-Tags erstellen, in welcher wir eine Zeile mit zwei Zellen integrieren. Mit Hilfe des Attributes "width" können wir der ersten Zelle dann eine Breite von 200 Pixeln und der zweiten Zelle eine Breite von 300 Pixeln zuweisen. Den Satz fügen wir in der zweiten Zelle zwischen ein. Mit Hilfe des -Tags und dem Attribut "color" können wir das Wort "das" rot ("red") einfärben; mit dem -Tag das Wort "ist" kursiv (italic) darstellen; das Wort "ein" mit dem -Tag fett (bold) hervorheben und das Wort "Testsatz" mit Hilfe von unterstrichen. Die derzeit kleinste Darstellung dieses Satzes erreichen wir mit dem "size"-Attribut des -Tags. Dabei wird dem Attribut der Wert "-2" zugewiesen.
und
Das ist ein Testsatz
2.Eine dreispaltige Tabelle können wir mit Hilfe des -Tags erstellen, in welcher wir eine Zeile mit drei Zellen integrieren. Indem wir dem Attribut "border" den Wert "1" zuweisen, erhalten wir eine Rahmendicke von 1 Pixel. Mit cellpadding="3" wird ein Abstand von 3 Pixel zu allen Seiten von jeder Zelle aus erwirkt. Die Wörter "Schuh", "Stadt" und "Schuster" müssen zwischen das erste, zweite bzw. dritte eingefügt werden. Richten Sie die erste Zelle mittig aus, indem Sie dieser das Attribut "align" mit dem Wert "center" (dt. mittig) zuweisen. Die zweite Zelle können Sie nach rechts ausrichten, indem Sie dem Attribut "align" dort den Wert "right" (dt. rechts) zuweisen. Da links die Standard-Ausrichtung ist müssen Sie der 3.Zelle keine weiteren Einstellungen zuweisen. Die Tabellengröße können Sie auf 80% der Browserbreite festlegen, indem Sie dem Attribut "width" (dt. Breite) im
und
-Tag den Wert "80%" zuweisen. Um die Hintergrundfarbe der Tabelle gelb festzulegen, geben Sie bgcolor="yellow" im
-Tag an.
Schuh Stadt Schuster
3.Um der HTML-Seite den Titel "3.Übung" zu geben, müssen Sie diesen Text zwischen und (im -Bereich) einfügen. Binden Sie mit dem -Tag (im -Bereich) ein Bild in Ihre Seite ein, wobei Sie dem Attribut "src" (Abk. für "source") die Pfadangabe Ihres Bildes zuweisen. Denken Sie daran: Der -Tag wird nicht geschlossen! Fügen Sie um das Bild herum einen Link mit dem -Tag ein, mit dem "href"-Attribut können Sie den Verweis auf "http://www.htmltut.de" setzen und mit target="_blank" geben Sie an, dass das Ziel in einem neuen Fenster geöffnet werden soll. 3.Übung Nun haben Sie bereits die groben Grundlagen von HTML gelernt, unter anderem auch wie Sie beispielsweise Links setzen. In diesem Abschnitt wird Ihnen aufbauend darauf gezeigt, wie eine Adressierung (z. B. bei Links) aussehen muss. Adressierung - was ist das genau? Wenn Sie beispielsweise eine andere HTML-Seite auf Ihrem Webspace in Ihrem Menü verlinken möchten, dann ist der Wert des Attributes "href" im Link (-Tag) eine Adresse. Der Vorgang diese Adresse zu setzen nennt sich "Adressierung". Bei der Adressierung gibt es dabei 2 mögliche Arten von Adressen, die verlinkt werden können: - Absolute Adressierung Absolute Adressen beginnen (meistens) mit "http://". Für diese Verlinkung kann einfach die aktuelle Adresse aus der Adresszeile des Browsers kopiert werden. Beispiele dafür wären "http://www.htmltut.de/teil1.html" oder "http://www.phptut.de/teil1.php". - Relative Adressierung Relative Adressen beginnen nicht mit "http://", sondern normalerweise mit einem Punkt oder direkt mit dem Pfad des Objektes, auf welches die Adresse verweist. Ausgehend von der relativen Adressierung ist immer der jetzige Standort. Befinden Sie sich also beispielsweise gerade unter "http://www.htmltut.de/abc/", so würde bei der relativen Adresse "abc.html" die Datei, die sich unter "http://www.htmltut.de/abc/abc.html" befindet, aufgerufen werden. Würden Sie sich jetzt jedoch unter "http://www.htmltut.de/abc/def/" befinden und die relative Adresse "abc.html" heißen, so würde die Datei, die sich unter "http://www.htmltut.de/abc/def/abc.html" befindet, aufgerufen werden. Angenommen Sie befinden sich gerade unter "http://www.htmltut.de/abc/def/" und möchten die Datei "http://www.htmltut.de/abc/abc.html" aufrufen, dann müssten Sie als relative Adresse "../abc.html" eingeben. Durch die zwei Punkte am Anfang wird nämlich in das nächsthöhere Verzeichnis gewechselt. Mit "./def/abc.html" können Sie beispielsweise die Datei "abc.html" des untergeordneten Verzeichnisses "def" aufrufen. Wie Sie sehen gibt es also immer 2 Möglichkeiten der Adressierung. Ich empfehle Ihnen jedoch die relative Adressierung, da diese einerseits platzsparend ist (von der Adresslänge her gesehen) und andererseits auch bei einer Änderung der Domain beispielsweise keine Probleme entstehen. Verwenden Sie jedoch ausschließlich die absolute Adressierung und Sie ändern Ihren Domainnamen, so müssen Sie auch alle absoluten Adressen entsprechend anpassen. Veranschaulichen wir die Adressierung nochmals an einem Beispiel: Sie halten sich gerade im Verzeichnis "http://www.htmltut.de/test/" auf und möchten von dort aus die Datei "beispiel.html", die sich unter "http://www.htmltut.de/test2/" befindet, verlinken. Dazu gibt es 2 Möglichkeiten: Mit der absoluten Adressierung könnten Sie einfach auf "http://www.htmltut.de/test2/beispiel.html" verweisen. Unter Verwendung der relativen Adressierung müssten Sie "../test2/beispiel.html" verlinken (mit den 2 Punkten wird das nächsthöhere Verzeichnis ausgewählt und dann wird das Verzeichnis "test2" aufgerufen). Relative und absolute Adressierungen können überall verwendet werden, wo Adressen erwartet werden (z. B. bei "href" im -Tag oder "src" im -Tag). Die Verlinkung verschiedener Objekte und Unterseiten kennen Sie bereits. Bei längeren Unterseiten ist es oftmals jedoch zur besseren Navigation erforderlich bestimmte Stellen in derselben Seite verlinken zu können, weshalb Sie in diesem Teil noch Anker kennenlernen werden. Zuerst jedoch zu den Überschriften: Überschriften werden mit den Tags

,

,

,

,

und
definiert. Dabei steht das "h" in den Tags für "heading" (dt. Überschrift).

definiert die wichtigste Überschrift, welche am Größten hervorgehoben wird, bis

werden die Überschriften dann immer kleiner. Die Tags

bis

müssen alle wieder geschlossen werden. Die Überschriften-Tags erzeugen automatisch, falls benötigt, vor und nach der Überschrift einen eigenen Absatz (bzw. Zeilenumbruch). Deshalb zählt

bis

zu den sogenannten "Block-Elementen". Übersicht der Überschriften

1.Überschrift

2.Überschrift

3.Überschrift

4.Überschrift

5.Überschrift
6.Überschrift
Um auf dieselbe HTML-Seite an verschiedenen Stellen verlinken zu können, müssen Sie sogenannte "Anker" anlegen. Dazu müssen Sie dem "name"-Attribut im -Tag einen eigenen, einmaligen Namen zuweisen (der -Tag stellt in diesem Fall keinen Link dar!). Somit haben Sie schon einen Anker erstellt. Bedenken Sie jedoch immer, dass -Tags immer geschlossen werden müssen. Anker bestehen nämlich lediglich aus einem -Tag mit dem "name"-Attribut (ohne "href"-Attribut!). Durch Eingabe der normalen Adressierung gefolgt von "#" und dem Namen des Ankers kommen Sie dann sofort zu der Stelle, wo Sie den Anker (den -Tag in obigem Beispiel) platziert haben. Wenn sich der Anker auf derselben HTML-Seite befindet, wie der Link können Sie die Seitenadresse weglassen und nur "#test" z. B. als Adresse verwenden. Beispiel für eine Adresse mit Anker: testseite.html#test Anker (1) Link zum 1.Anker
Link zum 2.Anker












































Hier ist der 1.Anker.












































Hier ist der 2.Anker. Erklärung In den beiden ersten Zeilen des -Bereiches werden die Links gesetzt zu den Ankern gesetzt, die weiter unten gesetzt werden (Anker "Test1" z. B. mit ""). Die vielen
-Tags im Beispiel dienen lediglich zur Veranschaulichung des Beispiels, denn wenn die Anker zu weit oben an den Links wären, würde kein Effekt bei einem Klick auf die Links zu sehen sein. Nicht nur -Tags können als Anker fungieren, sondern auch die

- bis

-Tags. Hierzu wird den Tags über das Attribut "id" (dieselbe Funktionsweise wie das Attribut "name" beim -Tag) ein jeweils eindeutiger Name zugewiesen. Die Links auf Anker können hier, ebenfalls wie bei den -Tags, mit der normalen Adressierung gefolgt von "#" und dem Namen des Ankers gesetzt werden. Hinweis: Mit dem vordefinierten Anker "top" können Sie bei jeder HTML-Seite ganz an den Anfang zurückverweisen (er ist bereits vordefiniert, d. h. er funktioniert, ohne dass Sie diesen einfügen müssen). Mit "nach oben" können Sie also nach ganz oben wieder verweisen. Anker (2) Link zum 1.Anker
Link zum 2.Anker
Link zum 3.Anker












































Hier ist der 1.Anker.














































Hier ist der 2.Anker.














































Hier ist der 3.Anker.


nach oben Zusammengefasst Überschriften können mit den Tags

bis

erstellt werden, wobei

die größte Überschrift erzeugt. Sogenannte "Anker" ermöglichen es auf verschiedene Stellen einer HTML-Seite zu verweisen. Wenn -Tags als Anker verwendet werden sollen, muss diesem ein eindeutiger (d. h. einmaliger) Name per "name"-Attribut zugewiesen werden. Sollen die

- bis

-Tags als Anker fungieren, wird ihnen ein eindeutiger Name mit Hilfe des "id"-Attributes zugewiesen. Beide Tags müssen geschlossen werden. Verwenden Sie das Attribut "bgcolor" um die Hintergrundfarbe der ganzen Seite bzw. der ganzen Tabelle zu bestimmen. Verlinkt werden kann auf einen Anker mit der normalen Adressierung gefolgt von "#" und dem Ankername. Formulare haben im Internet eine große Bedeutung. Denn mit Hilfe von Formularen können Daten, die der User eingibt, verarbeitet werden. Auch Foren oder Suchen beinhalten Formulare. Wie Sie sehen, sind Formulare also wichtig im Internet. Woraus besteht ein Formular überhaupt? Formulare bestehen aus verschiedenen Elementen, zum Beispiel aus einem Textfeld, wo der Benutzer Texte eingeben kann und aus einer Radiobox, wo der Benutzer eine Sache auswählen kann. Durch Formulare wird es möglich mit dem Benutzer in Verbindung zu treten und seine Eingaben und Daten zu bekommen. Jedes Formular wird mit dem
-Tag eingeleitet, welcher das ganze Formular umschließt. Für den -Tag gibt es zwei wichtige Attribute, die wir uns näher ansehen sollten. - Action Das "action"-Attribut definiert die Zieldatei, wohin das Formular geschickt werden soll, also die Datei, die das Formular anschließend bearbeitet. - Method Das Attribut "method" definiert die Methode (also Art und Weise) wie die Daten übertragen werden. Dabei gibt es zwei Methoden zur Auswahl: POST und GET. Bei GET werden die Daten des Formulars an die Adresse angehängt, test.php?variable1=test1&variable2=testxyz ist ein Beispiel für eine solche Adresse. Dabei trennt ein Fragezeichen die eigentliche Adresse von den zu übergebenden Daten. Die einzelnen Inhalte werden den Feldernamen durch ein Istgleich (=) zugewiesen, die Felder wiederum sind durch ein kaufmännisches Und (&) getrennt. Obwohl die GET-Methode standardmäßig eingestellt ist, möchte ich Ihnen davon sehr abraten. Da die Daten nämlich in der URL mit angehängt werden, kann dies bei einer bestimmten Länge zu Problemen führen (oft ist die Gesamtlänge der URLs auf 1024 Zeichen beschränkt). Bei der POST-Methode, die ich Ihnen empfehle, können unbegrenzt viele Daten übergeben werden. Dabei erfolgt die Datenübertragung unsichtbar für den User (d. h. er sieht diese nicht in der Adressleiste seines Browsers). Im Folgenden ein Beispiel für den Grundaufbau eines Formulars: ...
Die Werte der Formularfelder werden beim Absenden des Formulars übermittelt. Meist werden sie mit dem -Tag dargestellt. Dabei ist das wichtigste Attribut am Anfang "type". Es gibt an, welches Formularfeld der -Tag ist (z. B. Textfeld oder Auswahlfeld). Der -Tag wird nicht wieder geschlossen! Wird dem Attribut "type" beispielsweise der Wert "text" zugewiesen, so erscheint am Bildschirm etwas ganz anderes, als bei dem Wert "radio". Wichtige Werte für das Attribut "type" (sehen Sie sich das unten folgende Online-Beispiel an, falls Sie sich das Aussehen eines Feldes nicht vorstellen können): text Erzeugt ein einzeiliges Textfeld, in welches der Benutzer etwas eingeben kann. password Erzeugt ein einzeiliges Textfeld mit dem Unterschied, dass das Eingegebene nicht am Bildschirm lesbar angezeigt wird (Passwortfeld). checkbox Erzeugt eine Checkbox. Eine Checkbox ist ein viereckiges Feld, wobei der Benutzer dieses Anklicken kann, sodass darin ein Haken erscheint. Es wird im Internet oftmals verwendet, um sicherzustellen, dass der Benutzer etwas gelesen hat. radio Erzeugt eine Radiobox. Dabei wird dem Benutzer die Möglichkeit gegeben eine von mehreren Radioboxen auszuwählen. submit Erzeugt einen Absende-Button. Sobald der Benutzer diesen Button betätigt, wird das Formular an die, in dem "action"-Attribut des
-Tags angegebene, Datei versendet. Bedenken Sie bitte, dass mit dem -Tag nur ein einzeiliges Textfeld erstellt werden kann. Damit die Benutzereingaben später verarbeitet werden können (z. B. mit PHP), müssen Sie jedem Formularfeld einen eindeutigen Namen (der frei erfunden sein kann) mit dem "name"-Attribut zuweisen (welches Sie noch vom -Tag kennen sollten). Bei den Radioboxen gibt es eine kleine Besonderheit: Der Benutzer kann nur zwischen den Radioboxen wählen, die denselben Namen haben. Möchten Sie dem Benutzer also beispielsweise drei Auswahlmöglichkeiten zur Verfügung stellen, so müssen alle drei Auswahlmöglichkeiten denselben Name bekommen. Formularfelder Textfeld (einzeilig):

Passwortfeld:

Checkbox:

Radiobox:

Hinweis: Bedenken Sie bitte, dass alle Formulare, die Sie hier sehen, keinen weiteren Sinn haben, da die verarbeitende Datei fehlt. Bei einem Klick auf den Absende-Button werden Sie deshalb eine "Datei nicht gefunden" - Meldung erhalten. Mit dem Attribut "value" können Sie bei einem Textfeld und Passwortfeld den Text definieren, der dort standardmäßig angezeigt wird wenn die Seite aufgerufen wird (also der vordefinierte Wert). Bei einer Checkbox, Radiobox und dem Absende-Button wird der in "value" angegebene Wert beim Absenden des Formulars je nach Benutzereingaben übermittelt. Das heißt der "value"-Wert wird bei der Checkbox übermittelt, falls der Benutzer den Haken gesetzt hat, bei der Radiobox wird der "value"-Wert der markierten Radiobox übermittelt und beim Absende-Button der "value"-Wert des Buttons, der betätigt wurde (nur wichtig, falls es mehrere Buttons gibt). Formular-Beispiel
Vorname:

Passwort:

Macht es Spaß?

Wählen Sie Ihr Geschlecht: männlich | weiblich



Zusammengefasst Formulare sind ein wichtiger Bestandteil des Internets, da Sie die Kommunikation mit dem Benutzer ermöglichen. Jedes Formular wird mit dem
-Tag eingeleitet, welcher das ganze Formular umschließt. Das "action"-Attribut eines -Tags gibt die Zieldatei an, die das Formular verarbeitet und wohin das Formular letztendlich gesendet wird. Die Methode (Art und Weise), wie das Formular versendet werden soll, gibt das "method"-Attribut des -Tags an. Mögliche Werte sind "post" (für den Benutzer unsichtbare Übertragung) und "get" (für den Benutzer sichtbare Übertragung; Daten werden an Adresszeile angehängt). Formularelemente werden durch den -Tag ausgedrückt. Das "type"-Attribut gibt an, welches Formularfeld letztlich dargestellt werden soll ("text" = Textfeld; "password" = Passwortfeld; "checkbox" = Checkbox; "radio" = Radiobox; "submit" = Absende-Button). Zur späteren Verarbeitung des Formulars muss jedes Formularfeld einen einzigartigen Namen über das "name"-Attribut erhalten. Das "value"-Attribut gibt den voreingestellten Wert des Formularfelds an bzw. welcher Wert gesendet wird, je nach Benutzereingaben. Nun kennen Sie bereits die wichtigsten Formularelemente, die sich mit einem -Tag erzeugen lassen. Jedoch gibt es noch weitere Formularelemente, die nicht mit einem -Tag erzeugt werden können, wie z. B. ein Auswahlfeld. Ein Auswahlfeld wird mit einem eigenem Tag dafür, nämlich mit einem -Tag muss geschlossen werden! Der -Tag das Attribut "name", welches dem Formularfeld einen eindeutigen Namen zuweist. In den
Möchten Sie nicht nur einzeilige Textfelder, sondern mehrzeilige Textfelder erstellen? Mit dem Weitere wichtige Attribute für den -Tag: "maxlength" definiert bei einzeiligen Text- und Passwortfeldern die maximale Länge an Zeichen, die eingegeben werden darf. "readonly" ist das erste Attribut, welches Sie lernen, welches keinen zugewiesenen Wert hat. D. h. es wird einfach nur in den -Tag hineingeschrieben, ohne Wertzuweisung (Beispiel: ).Bei einer Checkbox, Radiobox und dem Absende-Button wird der in "value" angegebene Wert beim Absenden des Formulars je nach Benutzereingaben übermittelt. Es darf nur bei einzeiligen Text- und Passwortfeldern, sowie mehrzeiligen Textfeldern eingesetzt werden. "size" gibt die dargestellte Größe (gemessen in Zeichen) eines einzeiligen Text- und Passwortfeldes an. "checked" legt bei Radio- und Checkboxen fest, ob das Element standardmäßig (beim Aufrufen) markiert ist. Wie das "readonly"-Attribut wird auch diesem Attribut kein Wert definiert. Bei Radioboxen darf nur jeweils ein Feld einer Gruppe (Radioboxen, die denselben Namen haben) dieses Attribut zugewiesen bekommen. Bei einem Absende-Button gibt das "value"-Attribut die angezeigte Aufschrift auf dem Button an. Im Folgenden ein Beispiel mit allen Formularfeldern und Attributen, die Sie kennen: Formular-Beispiel
Ausgewählt:

Vorname:

Passwort:

Macht es Spaß?

Wählen Sie Ihr Geschlecht: männlich | weiblich

Wählen Sie Zutreffendes:

Geben Sie bitte einen Kommentar ab:



Zusammengefasst Ein Auswahlfeld wird mit einem

Block-Elemente sind Elemente, die automatisch einen eigenen Absatz erzeugen. Die Absatzgröße variiert dabei je nach Art des Block-Elementes. Einfacher Text und Inline-Elemente können in Block-Elementen eingebunden sein. Viele Block-Elemente (z. B.
und
) erlauben es auch, dass darin weitere Block-Elemente platziert sind. Beispiele für Block-Elemente:
, ,

bis

, - Inline-Elemente Bei Inline-Elementen wird kein automatischer Absatz dargestellt. Inline-Elemente sind sozusagen die "untergeordneten" Elemente der Block-Elemente. In Inline-Elementen können normalerweise nur Text und weitere Inline-Elemente platziert werden, keine Block-Elemente. Beispiele für Inline-Elmente: , ,
, , , , ,