Grundwissen - Webseiten mit HTML erstellen

Aus Tipps, Tricks und Anleitungen
Wechseln zu: Navigation, Suche
Amazon-Werbung
Hinweis: Der Autor des Artikels ist kein ausgebildeter Fachmann zum Thema. Alle hier getroffenen Aussagen sind nach bestem Wissen sowie gegebenenfalls nach persönlicher Einschätzung des Autors getroffen. Dabei ist es leider nicht auszuschließen, dass einige Angaben veraltet, irreführend oder sonstwie fehlerhaft sind. Letztendlich liegt es in der Verantwortung jedes einzelnen Lesers, die hier gemachten Angaben zu überprüfen und gegebenenfalls weitere Informationen einzuholen. Der Autor kann und will darum keine Garantie oder Haftung für Probleme oder Verluste, die trotz oder wegen der Befolgung der hier genannten Ratschläge eintreten, übernehmen. Jeder Leser hat natürlich die Möglichkeit, die folgenden Ratschläge nicht zu befolgen oder sie gar nicht erst zu lesen.


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?

Webserver

Damit 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.

siehe dazu auch:

Webseiten

Wahl des richtigen Editors

Webseiten 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 "Notepad++" 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 Namens

Eine 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 HTML

In den eigentlichen Text der Webseite werden die HTML-Befehle zusätzlich eingefügt. Sie sind Signale für den Internetbrowser, die ihm 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übersicht

Im 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 formatieren

Bei der Textformatierung wird immer ein bestimmter Bereich markiert. Das heißt, alle Tags haben ein Start-Tag und ein End-Tag:

  • fett: <b>fett</b>
  • kursiv: <i>kursiv</i>
  • unterstrichen: <u>unterstrichen</u>
  • farbig: <font color="red">farbig</font>
  • Schriftgröße: <font size="3">Schriftgröße</font>

Die letzten beiden Beispiele benutzen das <font>-Tag. Dieses alleine ändert den Text noch nicht, aber es kann weitere Angaben wie etwa Farbe und Schriftgröße haben. Beides kann auch kombiniert werden:

  • <font size="3" color="red">Schriftgröße und Farbe</font>.

Bei der Angabe von Farben kann der Benutzer zudem beliebige RGB-Farbwerte benutzen. Also zum Beispiel:

  • farbig: <font color="#AA70B6">farbig</font>

Sonderzeichen

In 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:

  • zeilen
    umbruch: zeilen<br>umbruch
  • Erzwungene      Leerzeichen: Erzwungene&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Leerzeichen
  • Ä: &Auml;
  • Ö: &Ouml;
  • Ü: &Uuml;
  • ä: &auml;
  • ö: &ouml;
  • ü: &uuml;
  • ß: &szlig;
  • <: &lt;
  • >: &gt;
  • &: &amp;
  • •: &bull;
  • →: &rarr;
  • ←: &larr;
  • £: &pound;
  • ¥: &yen;
  • ©: &copy;
  • µ: &micro;
  • α: &alpha;
  • β: &beta;
  • γ: &gamma;
  • ‰: &permil;


Links einfügen

Links zu anderen Webseiten sind das prägende Stilmittel im Internet. In der Standardeinstellung erscheinen Links im Browser in blauer Farbe und sind Unterstrichen dargestellt. Beim 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):

  • PHP auf Webseiten benutzen: <a href="http://www.web-fortbildung.de/wiki/index.php/Schnellkurs_-_PHP_in_Webseiten_benutzen">PHP auf Webseiten benutzen</a>

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 einfügen

Fü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)

  • Tic tac toe.gif: <img src="http://www.web-fortbildung.de/wiki/images/0/0b/Tic_tac_toe.gif">


Tabellen

HTML 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> </table> Tabellenanfang und Tabellenende
  • <tr> </tr> Zeilenanfang und Zeilenende
  • <td> </td> Spaltenanfang und Spaltenenende


Beispiel für eine einfache 3x3-Tabelle:

<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:

Zeile 1 - Spalte 1 Zeile 1 - Spalte 2 Zeile 1 - Spalte 3
Zeile 2 - Spalte 1 Zeile 2 - Spalte 2 Zeile 2 - Spalte 3
Zeile 3 - Spalte 1 Zeile 3 - Spalte 2 Zeile 3 - Spalte 3


Beispiel für eine 3x3-Tabelle mit verbundenen Zellen: (außerdem mit Breiten - und Höhenangaben ("width" und "height") und Zentrierung der Fußzeile ("align"))

<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:

Me nu lei ste Webseitentitel
Inhalt1

Inhalt2

Fußzeile

Formulare

Formulare 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.

  • <form name="eingabe" action="http://www.example.com" method="get"> </form>

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)

  • Textfeld: <input name="text1" type="text" value="Beispiel"/>
  • Passwort-Textfeld: <input name="text1" type="password" value="Beispiel"/>
  • Unsichtbares Datenfeld: <input name="text1" type="hidden" value="Beispiel"/>
  • Checkbox <input name="check1" type="checkbox" value="Beispiel"/>
  • Radiobox<input name="check1" type="radio" value="Beispiel"/>
  • Großes Textfeld (hier: für 16x80 Zeichen): <textarea rows="16" cols="80" name="message">Beispiel</textarea>
  • Eingabe-Button: <input name="text1" type="submit" value="Beispiel"/>
  • Dropdownmenu:

<select name="auswahl">
<option value="Option1">Beispiel1
<option value="Option2">Beispiel2
<option value="Option799">Beispiel799
</select>


Kommentare

Kommentare 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.

  • <!-- Ich bin ein Kommentar -->


Eigenschaften von Tags setzen

Die 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:

  • Schriftgröße und Farbe: <font size="3" color="red">Schriftgröße und Farbe</font>

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:

  • <name_des_tags eigenschaft1="wert1" eigenschaft2="wert2" eigenschaft3="wert3">

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

  • size: Die Schriftgröße. Erlaubt sind ganze Zahlen - Je größer die Zahl desto größer die Schrift
  • alt: Der Alternativtext, der dargestellt wird, wenn das Objekt selbst nicht erscheinen kann. (wenn der Nutzer in seinem Browser also z.B. einstellt, dass er Bilder generell nicht anzeigen will, würde der Browser diesen Text stattdessen anzeigen)
  • title: Der Titel ist eine Beschreibung, die erscheint, wenn man mit der Maus länger auf das Objekt zeigt.
  • href: Die Zielwebseite (nur sinnvoll bei Links)
  • src: Die Datenquelle (notwendig bei Bildern)
  • color: die Farbe. Erlaubte Werte sind einige Standardwerte wie "red", "blue", "black" usw. und RGB-Farbwerte
  • width: Die Breite des Objekts. Angabe in Pixeln (z.B. "100px") oder Prozent (z.B. "45%") sind erlaubt.
  • height: Die Höhe des Objekts. Angabe in Pixeln (z.B. "100px") oder Prozent (z.B. "45%") sind erlaubt.
  • border: Die Breite des Rands in Pixeln. Ein Wert von "0" unterdrückt die Darstellung des Randes.
  • align: Die Ausrichtung des Inhalts. Erlaubt sind z.B. "left" (links), "right" (rechts), "center" (zentriert), "justify" (Blocksatz)
  • valign: Die vertikale Ausrichtung des Inhalts: Erlaubt sind z.B. "top" (oben), "bottom" (unten), "center" (zentriert)


Stilfragen und Darstellungsprobleme

Es gilt als guter Stil, Bereiche nicht überlappen zu lassen wie zum Beispiel in

  • Dies ist ein <b>fett und <i>kursiv gedruckter</b></i> Text

(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