Grundwissen - Webseiten mit HTML erstellen
Aus Tipps, Tricks und Anleitungen
| Wie funktioniert HTML in Webseiten? | ||||||||||||||||||
Dieser Kurs soll einen schnellen Einstieg vermitteln, wie Webseiten mit HTML funktionieren und wie man selber solche Webseiten erstellen kann.
Wie funktionieren Webseiten überhaupt?WebserverDamit andere Nutzer auf die erstellten Webseiten zugreifen können, braucht man einen Webserver. Dieser steht (meist im Internet) bereit und liefert die Webseiten auf Anfrage des Nutzers aus. Um Webseiten im Internet anzubieten, nimmt man meistens ein Angebote der zahlreichen Webhoster im Internet wahr. Diese stellen Speicherplatz für die Dokumente bereit und sorgen dafür, dass Besucher diese Dokumente abrufen können. Die Aufgabe des Kunden ist dann lediglich, diese Dokumente zu erstellen und an die vom Webhoster genannte Stelle zu kopieren. Es ist jedoch auch leicht möglich, einen eigenen Webserver einzurichten, der auf dem eigenen Computer laufen kann. Dieses macht man zumeist zu Testzwecken, um Webseiten auf dem eigenen Computer testen zu können, bevor man sie in das Internet hochlädt. Linktipps
WebseitenWahl des richtigen EditorsWebseiten sind nichts weiter als einfache Textdokumente. Dabei sind ausdrücklich nicht solche Textdokumente gemeint, wie man sie in Textverarbeitungsprogrammen wie Microsoft Word oder Open Office erstellt, sondern ganz einfache Textdokumente, wie man sie etwa mit dem Editor erstellt, der Windows beigefügt ist. Denn bei Webseiten ist es wichtig, dass diese nur den einfachen nackten Text beinhalten und nicht zusätzliche Informationen, wie ihn Textverarbeitungsprogramme automatisch zum Text hinzufügen. Wer nun verwirrt ist, was für ein Texteditor gemeint ist, kann sich aus dem Internet einen HTML-Editor, wie zum Beispiel das kostenlose "Weaverslave" herunterladen. Ein solcher HTML-Editor hat außerdem gegenüber einem einfachen Texteditor den Vorteil, dass er HTML-Befehle beim Editieren farbig markieren kann, so dass man beim Erstellen mehr Übersicht hat. Wahl des richtigen NamensEine Webseite sollte mit einem Namen in der Form "name_der_webseite.html" abgespeichert werden. Die Endung ".html" signalisiert dem Webserver, dass es sich um eine Webseite handelt, die HTML benutzt (solche Endungen kennt man auch von anderen Programmen, so haben Excel-Dateien oft die Endung ".xls" oder MP3-Dateien die Endung ".mp3"). Der Name vor dem Punkt kann beliebig gewählt werden, allerdings darf man nicht jedes Zeichen verwenden. Erlaubt sind die Zeichen A-Z und a-z, der Unterstrich ("_") und die Ziffern 0-9, wobei der Name nicht mit einer Ziffer beginnen sollte. Die Länge des Names ist weitgehend egal, zwischen einem Buchstaben ("a.html") und hundert Buchstaben tritt kein Problem auf, allerdings sollte man an die Nutzer denken, die einen Namen eventuell abtippen müssen, wenn sie die Seite in den Browser eingeben. Der Aufruf einer Seite durch den Nutzer erfolgt in der Form http://www.example.org/name_der_webseite.html. Eine besondere Bedeutung kommt der Seite mit dem Namen "index.html" zu. Diese Seite liefert der Webserver aus, wenn keine besondere Seite benannt ist (wenn der Nutzer also zum Beispiel einfach http://www.example.org im Browser eingibt). Einbau von HTMLIn den eigentlichen Text der Webseite werden die HTML-Befehle zusätzlich eingefügt. Sie sind Signale für den Internetbrowser, die im sagen, wie die Inhalte dargestellt werden. HTML-Befehle formatieren also den Text, fügen zusätzliche Elemente (wie zum Beispiel Bilder) ein und gestalten das Layout. Dazu baut man in den Text Steuerbefehle (sogenannte "HTML-Tags" oder kurz "Tags") ein. Diese Tags werden vom Browser ausgeführt und erscheinen aber nicht sichtbar im Text. Wenn also die HTML-Seite folgenden Text enthält: Dies ist ein <b>fett gedruckter</b> Text dann wird er für den Benutzer im Browser so dargestellt Dies ist ein fett gedruckter Text HTML-Tags haben immer eine offene spitze Klammer (oder auch "Kleiner als"-Zeichen) am Anfang und eine geschlossene spitze Klammer (oder auch "Größer als"-Zeichen) am Ende. Viele Tags markieren Bereiche, wie im obigen Beispiel einen Bereich mit fetter Schrift. Um das Ende des Bereichs zu markieren, benutzt man das gleiche Tag wie am Anfang des Bereiches noch einmal mit einem zusätzlichen Schrägstrich ("/") direkt nach der ersten Klammer, also "<b>" startet den Bereich für Fettdruck und "</b>" beendet den Bereich wieder. In der folgenden Befehlsübersicht sollen einige der verfügbaren HTML-Tags vorgestellt werden. Sie dürfen beinahe nach Belieben miteinander kombiniert und verschachtelt werden. BefehlsübersichtIm folgenden soll die Anwendung von HTML-Tags für verschiedene Einsatzszenarien vorgestellt werden. Oft gibt weitere Möglichkeiten oder Detaileinstellungen. Dieser Kurs beschränkt sich jedoch auf die meistbenutzten, um den Einstieg möglichst schnell und einfach zu halten. Wenn man dieses Basiswissen beherrscht und den Wunsch nach Detailwissen hat, findet man bei http://de.selfhtml.org eine sehr umfangreiche und detaillierte Übersicht über alle HTML-Befehle. Texte formatierenBei der Textformatierung wird immer ein bestimmter Bereich markiert. Das heißt, alle Tags haben ein Start-Tag und ein End-Tag:
Die letzten beiden Beispiele benutzen das <font>-Tag. Dieses alleine ändert den Text noch nicht, aber es kann weiter Angaben wie etwa Farbe und Schriftgröße haben (beides kann auch kombiniert werden:
Bei der Angabe von Farben kann der Benutzer zudem beliebige RGB-Farbwerte benutzen. Also zum Beispiel:
SonderzeichenIn HTML können Sonderzeichen verwendet werden. Diese Sonderzeichen werden zwar durch eine Buchstabenkombination dargestellt - im Text kann man die Buchstabenkombination so einfügen, als wäre sie ein einziger Buchstabe. Einige Sonderzeichen benutzt man einfach wegen ihres guten Aussehens, andere werden notwendig, wenn HTML ohne entsprechende Definition durch Sonderzeichen das Schriftlayout zu eigenmächtig interpretiert. So setzt HTML Zeilenumbrüche zuweilen nach eigenen Regeln und entfernt doppelte Leerzeichen automatisch, sofern man diese nicht durch Sonderzeichen erzwingt. Zusätzlich kann es sich anbieten, bestimmte häufig im Text verwendete Sonderzeichen wie die Umlaute ä,ö,ü,ß durch Sonderzeichen auszudrücken, damit diese auch korrekt bei (ausländischen) Besuchern angezeigt werden, die keinen deutschen Zeichensatz in ihrem Browser verwenden. Im folgenden eine Übersicht über wichtige Sonderzeichen:
Links einfügenLinks zu anderen Webseiten sind das prägende Stilmittel im Internet. In der Standardeinstellung erscheinen Links im Browser in blauer Farbe und sind Unterstrichen dargestellt. Bei Zeigen auf einen Link mit der Maus verändert sich der Mauszeiger zu einem Handsymbol und ein Klick auf den Link führt zu der angegeben Webseite. Um einen Link einzufügen braucht es zumindest die Adresse der Zielseite (href="") des Links und den Linktext, der zwischen den beiden Link-Tags eingetragen wird (hier kann man auch ein Bild (s.u.) eintragen):
Mit der Zusatzeigenschaft target="_blank" kann der Link angewiesen werden, die Zielseite in einem neuen Fenster aufzumachen, sodass die Seite mit dem Link weiter verfügbar bleibt:
Bilder einfugenFür das Einfügen von Bildern benötigt man lediglich die Adresse des Bildes. Das zu verwendende <img>-Tag benötigt kein </img>-Tag zum schließen, da ein Bild keinen Bereich definiert, der etwas enthalten kann (das Bild ist sozusagen sein eigener Bereich)
TabellenHTML ermöglicht es, Tabellen auf Webseiten einzufügen. Diese Tabellen können zum einen dazu dienen, Ergebnisse tabellarisch aufzulisten. In der Anfangszeit von HTML hat es sich jedoch rasch eingebürgert, Tabellen auch zum Seitenaufbau zu verwenden, wobei die Webdesigner eine Tabelle (die ohne Rahmen dargetellt "unsichtbar" ist) definiert haben, die sich über die ganze Webseite erstreckt. In dieser Anordnungstabelle wird dann jeder Inhalteteil (zum Beispiel Menuleiste, Titelbereich, einzelne Inhaltsbereiche...) jeweils in einer Zelle der Tabelle dargestellt. Auch wenn HTML mittlerweile um neue Designelemente ergänzt wurde, ist der Aufbau von Webseiten in einem Tabellenraster immer noch der einfachste und meistgenutzte Weg und die meisten Webdesigner kümmert es nicht, dass dieser Weg manchmal als veralteter schlechter Stil verschrien ist. Bei der Konstruktion von Tabellen gibt es einen Tag für die Tabelle, einen für die Zeilen und einen für Spalten. Außerdem ist es möglich, Zeilen und Spalten miteinander zu verbinden:
<table border="1"> <tr> <td>Zeile 1 - Spalte 1</td> <td>Zeile 1 - Spalte 2</td> <td>Zeile 1 - Spalte 3</td> </tr> <tr> <td>Zeile 2 - Spalte 1</td> <td>Zeile 2 - Spalte 2</td> <td>Zeile 2 - Spalte 3</td> </tr> <tr> <td>Zeile 3 - Spalte 1</td> <td>Zeile 3 - Spalte 2</td> <td>Zeile 3 - Spalte 3</td> </tr> </table> Ergibt:
<table border="1" width="100px" height="80px"> <tr height="10%"> <td rowspan="2" width="10%">Me nu lei ste</td> <td colspan="2" width="90%" height="10%">Webseitentitel</td> </tr> <tr height="80%"> <td width="45%" height="80%">Inhalt1</td> <td width="45%" height="80%">Inhalt2</td> </tr> <tr height="10%"> <td colspan="3" height="10%" align="center">Fußzeile</td> </tr> </table> Ergibt:
FormulareFormulare bieten dem Nutzer eine Auswahlmöglichkeit oder Eingabemöglichkeit für Daten. Diese Daten werden beim Abschicken an eine bestimmte Webseite übertragen (meist wird durch das Fomular die gleiche Webseite erneut aufgerufen). Dabei gibt es zahlreiche unterschiedliche Formularelemente wie etwa Textfelder, Checkboxen oder Dropdownelemente. Allerdings haben die Fomularelemente einen entscheidenden Nachteil: HTML selbst kann die eingegebenen Daten nur übertragen, aber nicht entgegen nehmen und verarbeiten. Um die Daten tatsächlich nutzen zu können, muss man zusätzlich eine Programmiersprache einsetzen, wie zum Beispiel das in diesem Wiki in einem eigenen Artikel beschriebene PHP. Ohne Programmiersprache lassen sich zwar Auswahlen treffen und Daten eingeben, aber nicht verarbeiten. Damit Daten übetragen werden, müssen die Formularelemente sich innerhalb eines definierten Formularbereichs befinden, in dem zum Beispiel Name des Formularelements ("name": für HTML irrelevant; wichtig zum Beispiel bei der Nutzung von Javascript) die Übertragungsart ("method": wird im PHP-Artikel erklärt) oder die Zielseite ("action") beschrieben werden. Alle Formularelemente außerhalb eines Formularbereichs übertragen prinzipiell keine Daten. Verschiedene Formularbereiche dürfen sich nicht überschneiden oder gegenseitig enthalten. Wenn man nur einen Formularbereich benötigt, ist es erlaubt, diesen über die ganze Webseite zu erstrecken.
Innerhalb des so definierten Formularbereichs können die einzelnen Formularelemente nach Bedarf eingebaut werden (leider können die Formelemente innerhalb des Wikis nicht dargestellt werden, darum habe ich sie auf dieser Extraseite dargestellt)
<select name="auswahl">
KommentareKommentare sind Zusatzhinweise auf einer HTMLseite, die bei der Darstellung ignoriert werden. Auch wenn sie auf der Webseite für den Besucher nicht erscheinen, sind sind aber dennoch im Rohtext vorhanden. Kommentare kann man dazu nutzen, bestimmte Hinweise (etwa Erklärungen der verwendeten Struktur, Hinweise an sich selbst oder andere HTML-Entwickler, was man eventuell bei dieser HTML-Seite noch erledigen oder beachten muss..) über den Seitenaufbau in den HTML-Code einzubauen.
Eigenschaften von Tags setzenDie meisten Tags können mit zusätzlichen Eigenschaften versehen werden, die man im Öffnungstag vor dem Schließen der Klammer definiert. Dieses wurde bereits benutzt bei der Verwendung des <font>-Tags im Abschnitt "Texte formatieren". Dort wurden die Eigenschaften Schriftgröße und Farbe verwendet und auch gesagt, dass man diese kombinieren kann:
Im folgenden soll eine Übersicht von häufig verwendeten Zusatzeigenschaften gegeben werden. Diese Zusatzeigenschaften lassen sich gegebenenfalls auch kombinieren. Dabei kann nicht jedes HTML-Tag jede Zusatzeigenschaft zugewiesen bekommen. So kann etwa ein <img>-Tag, welches ein Bild zeigt, nichts mit der Angabe einer Schriftgröße anfangen. Wenn man einem Tag eine Eigenschaft zuweist, die es nicht verwenden kann, dann wird diese Anweisung von dem Tag einfach ignoriert und es entsteht kein Schaden dadurch. Das Zuweisen der Zusatzeigenschaften erfolgt wie oben gezeigt und erwähnt immer vor dem Schließen der ersten Klammer. Das Schema ist immer:
wobei man beliebig viele Eigenschaften angeben kann. Wichtig ist jedoch, den Wert jeder Eigenschaft in Anführungsstriche zu setzen, weil Eigenschaften wie etwa der Titel oft Werte mit Leerzeichen haben. Ohne Anführungszeichen interpretiert HTML aber ein Leerzeichen als Ende der Eigenschaft. Beispiele für Eigenschaften
Stilfragen und DarstellungsproblemeEs gilt als guter Stil, Bereiche nicht überlappen zu lassen wie zum Beispiel in
(saubere Schreibweise wäre: Dies ist ein <b>fett und <i>kursiv gedruckter</i></b> Text - also erst den Kursiv-Bereich, den man zuletzt gestartet hat, wieder zuerst zu schließen). Solch guter Stil kann zum Beispiel für jede Webseite bei http://validator.w3.org getestet werden. Bei seinen ersten Schritten sollte man sich allerdings noch nicht zuviel Gedanken über den Stil machen. Die Internetbrowser sind meist so gutmütig eingestellt, dass sie die Webseite auch bei schlechtem Stil wie gewünscht darstellen. Allerdings haben die Webbrowser bei komplizierteren Seiten einen generellen Nachteil: bei manchen Elementen stellen verschiedene Webbrowser die fertige Webseite leicht unterschiedlich dar. Man sollte also die fertige Webseite einmal selber mit unterschiedlichen Webbrowsern aufrufen (hierbei sollte man den Internet Explorer, Firefox und auch Opera und Safari benutzen, da dies derzeit die meistbenutzten Internetbrowser sind. Wenn tatsächlich die eigene Webseite in verschiedenen Browsern unterschiedlich aussieht, ist das teilweise die "Schuld" der Browser, die die gleiche Anweisung unterschiedlich auslegen. Das Problem ist natürlich, dass einem das im Zweifelsfall auch nicht wieter hilft und man die Seite trotzdem so anpassen muss, dass sie in jedem Browser ordentlich aussieht.
Verwandte Artikel | ||||||||||||||||||
| Dieser Artikel gehört zu folgenden Kategorien: "Computer" | ||||||||||||||||||
| Neuen Artikel erstellen | Diesen Artikel bearbeiten | Rückmeldung geben |