 |
| HTML |
| Der Anfang |
| Tabellen |
| Block |
| Inline |
| Formate |
| Noch mehr? |
| Beispiele |
 |
Herzlich willkommen auf meiner Homepage! Heute ist der |
... ja, aber auch die längste Reise fängt mit einem ersten Schritt an. Und dieser erste Schritt ist in HTML eigentlich recht einfach zu machen.
Zunächst mal wollen wir festlegen, was wir brauchen, um eine Webseite mit HTML zu erstellen?
Aber bevor es richtig los geht, müssen wir noch eine Formalität erledigen. Jedes HTML- Dokument hat eine vorgegebene Grundstruktur, die wir immer als Erstes erstellen, bevor wir uns um Inhalte kümmern.
Diese Grundstruktur oder auch Grundgerüst sieht so aus:
<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><title>Name deiner Seite</title></head><body></body></html>Das Dokument beginnt immer mit der 'DOCTYPE'- Deklaration!
Hiermit teilen wir dem Browser mit, welche HTML- Variante wir benutzen. Folgende Varianten sind derzeit zulässig.
<!DOCTYPE html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Wir werden jedoch im Folgenden ausschließlich den HTML 5 <!DOCTYPE html> verwenden!
Als nächstes in unserem Grundgerüst folgt die Deklaration des HTML- Bereiches. Dazu notieren wir ganz zu Anfang, direkt nach der DOCTYPE- Deklaration, den Ausdruck <html lang="de"> und beenden diesen Bereich ganz am Ende des Dokumentes durch den Ausdruck </html>!
Die Ergänzung lang="de" in dem ersten Ausdruck ist optional. Sie sollte aber sinnvoller Weise angegeben werden, da wir damit erklären, dass wir ein Dokument in deutscher Sprache erstellen.
Innerhalb der HTML- Bereiches definieren wir dann mit <head> </head> den Kopfbereich unseres Dokumentes und anschließend mit <body> </body> den eigentlichen Inhaltsbereich. In diesem <body> </body> werden dann alle Inhalte, also auch alles das, was wir im weiteren Verlauf machen, eingefügt!
Der <head> </head> Bereich beinhaltet Angaben und Informationen zu deiner Webseite sowie weitere Anweisungen für den Webbrowser. Zum Beispiel die oben schon eingefügten Angaben zum verwendeten Zeichensatz <meta charset="utf-8"> und der Titel deiner Webseite <title>Name deiner Seite</title>.
Wenn du zu diesen Kopfangaben mehr wissen willst, schau mal HIER!
Aber jetzt geht es los! Und bitte nicht vergessen, was wir im Folgenden an Code produzieren schreiben wir in den <body> </body> Bereich!
Worauf wartest du - Editor starten und einfach den HTML- Code eintippen. Die so erstellte Textdatei wird dann mit 'speichern unter' auf die Festplatte gespeichert. Wir geben der Datei dann den Namen 'index.html'.
Die Endung '.html' ist wichtig, weil daran erkennt der Rechner, dass es sich um eine HTML Datei handelt und öffnet diese Datei entsprechend mit dem als Standard eingestellten Webbrowser. Und warum sollte unsere Datei index.html heißen? Der Name index kennzeichnet diese Datei als 'Startseite' deines Webauftrittes! Diese Seite wird immer als erstes geladen, wenn später jemand deine Seite im Netz aufruft.
Wir fangen mal mit Text in HTML an. Oberhalb dieser Zeile hier siehst du schon mal drei verschiedene Arten einen Text darzustellen:
Fangen wir mal mit der Überschrift an:
Grundsätzlich werden in HTML alle Anweisungen mittels eines sogenannten 'Tag' (aus dem englischen für 'Etikett', 'Anhänger', 'Label') an den Browser übergeben.
Ein 'Tag' sieht immer so aus - eine öffnende eckige Klammer '<' die Bezeichnung der jeweiligen Anweisung und eine schließende eckige Klammer '>'!
Um das Ende des Gültigkeitsbereiches der Anweisung für den Browser festzulegen, folgt bei den meisten HTML Anweisungen nach dem öffnenden 'Tag' ein schließender 'Tag'.
Dieser schließende 'Tag' sieht immer so aus - die öffnende eckige Klammer '<' ein Schrägstrich / gefolgt von die Bezeichnung der geöffneten Anweisung und die schließende eckige Klammer '>'!
<h1>Eine Überschrift</h1>
In diesem Beispiel wurde ein Überschrift als Anweisung übergeben. Das 'h' steht für 'heading', dem englischen Wort für Überschrift.
Da es von diesen Überschriften 6 verschiedene gibt, werden die in HTML durchnummeriert (h1 bis h6).
<h1>Überschrift 1</h1><h2>Überschrift 2</h2><h3>Überschrift 3</h3><h4>Überschrift 4</h4><h5>Überschrift 5</h5><h6>Überschrift 6</h6>
Genau so funktioniert es für einen Textabsatz 'p' - 'p' von dem englischen 'paragraph'
<p>Hier mal ein bisschen Text...</p>Hier mal ein bisschen Text, um zu zeigen, wie diese 'normale' Textdarstellung funktioniert. Um Zeilenumbrüche brauchen wir uns nicht zu kümmern, diese werden automatisch erzeugt, wenn der Platz für den Text nicht ausreicht!
In HTML brauchen wir uns um Zeilenumbrüchen in Texten nicht zu kümmern, die setzt der Browser immer automatisch dort, wo der Platz für den Text eben zu Ende ist!
Aber manchmal wollen wir ja einen Zeilenumbruch auch innerhalb eines Textbereiches! Dafür gibt es natürlich auch einen Tag und zwar den <br> Tag (br vom englischen break= Bruch). Dieser Tag hat keinen Ende- Tag und steht immer ganz alleine da, an der Stelle, wo wir einen Zeilenumbruch haben wollen. Manchmal findet man den <br> auch in der Schreibweise <br />. Dieses ist einer älteren HTML- Variante (dem XHTML) geschuldet, in der allen Tags, die keinen Ende- Tag haben, dieses Beendigungszeichen (/) mit in den Start- Tag geschrieben wird. Das ist quasi sowas wie ein Start- Ende- Tag in einem. Ein Muss, wenn man XHTML benutzt - bei allen anderen Varianten braucht man das nicht zu machen.. es stört aber auch nicht weiter, da ein Browser trotzdem das Richtige macht und einen Zeilenumbruch einfügt.
So sieht das Textbeispiel mit <br> aus:
<br><p>Hier mal<br>ein bisschen Text,<br>um zu zeigen, wie diese 'normale' Textdarstellung<br>funktioniert.<br>Um Zeilenumbrüche brauchen wir uns nicht zu kümmern, diese <br>werden <br>automatisch <br>erzeugt, wenn der Platz für den Text nicht ausreicht!</p>Hier mal
ein bisschen Text,
um zu zeigen, wie diese 'normale' Textdarstellung
funktioniert.
Um Zeilenumbrüche brauchen wir uns nicht zu kümmern, diese
werden
automatisch
erzeugt, wenn der Platz für den Text nicht ausreicht!
Wo wir gerade schon bei Zeilenumbrüchen sind - in HTML wird der Zeilenumbruch automatischen bei einem Wortende (also an einem Leerzeichen) erfolgen. Manchmal möchte man aber zusammenhängende Begriffe nicht durch einen Zeilenumbruch auseinander reißen. Da hilft eines von den HTML eigenen Sonderzeichen... das untrennbare Leerzeichen (engl. non breaking space) ' '. Dieser Code, statt eines Leerzeichens eingefügt, sieht im Text aus wie ein Leerzeichen, verhindert aber einen automatischen Zeilenumbruch an dieser Stelle.
Ebenso kann es aber auch vorkommen, dass besonders lange Wörter zu früh für einen Zeilenumbruch sorgen und das Erscheinungsbild meines Textabsatzes dadurch einfach... na ja... irgendwie blöde aussieht! Da hilft dann der Code für soft hyphen '­', den ich an einer oder mehreren eventuellen Wunschumbruchstellen in langen Wörtern einfügen kann. Ein Zeilenumbruch in diesem Wort wird dann im Bedarfsfall vom Browser an diesem 'weichen Trennstrich' erfolgen. Dabei wird ein Trennstrich (-) eingefügt. Bricht das Wort nicht um, sind diese 'soft hyphens' nicht sichtbar!
Aber wieder zurück zu den HTML Tags - einfügen von Listen.
Funktioniert wie bei allen anderen Tags, mit nur einer kleinen Komplikation. Nämlich dass hierfür 2 Tags benötigt werden:
Und zwar für die 'unsortierte Liste' wird Anfang und Ende mit <ul> </ul> gekennzeichnet.
Für die 'geordnete Liste' lauten Anfangs- und Endtag <ol> und </ol>.
Zwischen den öffnenden und schließenden 'Tags' werden die einzelnen Listeneinträge mit <li> und </li> gekennzeichnet:
<ul><li>Listeneintrag 1</li><li>Listeneintrag 2</li><li>Listeneintrag 3</li><li>... usw</li></ul>
Und das Gleiche nochmal mit <ol> </ol> für geordnete Liste.
<ol><li>Listeneintrag 1</li><li>Listeneintrag 2</li><li>Listeneintrag 3</li><li>... usw</li></ol>
Und wo wir gerade schon bei Listen sind - es gibt noch eine dritte Variante: die Definitionsliste.
Diese Listenart wird mit dem 'Tag' <dl> geöffnet und mit dem 'Endtag' </dl> beendet. Zwischen diesen Tags werden dann die Listenelemente <dt> </dt> für den Definitions- Term/ Namen und <dd> </dd> für den Definitions- Description/ Beschreibung jeweils paarweise eingefügt.
<dl><dt>BMW</dt><dd>Ein deutscher Autohersteller</dd><dt>HTML</dt><dd>Eine Auszeichnungssprache für Webseiten</dd></dl>
Ist doch nicht so schwierig - oder?
Jetzt können wir schon das Grundgerüst, Überschriften, Textabsätze und sogar Listen selbst erstellen. Probiere es einfach mal aus mit deinem Editor - den Code eintippen, mit der Endung .html speichern und dann die Datei mit deinem Webbrowser öffnen!
Ach ja - bevor ich es vergesse! Wenn du die hier beschriebene Methode verwendest, um dir deinen Code im Browser anzuschauen, kann es sein, dass du feststellst, dass das Internet kein Deutsch versteht! Die deutschen Umlaute (ä, ü, ö) und auch das 'ß' werden unter Umständen nur als seltsame Zeichen dargestellt. Das liegt dann in der Regel daran, dass es zu einer Vermischung der Zeichensätze gekommen ist... also zum Beispiel der Browser erwartet 'UTF-8', der Text vom Editor ist aber in 'ISO-8859-1' codiert. Das kann man vermieden, wenn bei der Erstellung einer Webseite gleich darauf geachtet wird, dass durchgängig nur ein Zeichensatz (derzeit gängig UTF-8) verwendet wird.
Es würde zu weit führen, diese Problematik hier ausführlich zu erläutern, für unsere Zwecke gibt ein paar Methoden, wie man hier Abhilfe schaffen kann.
Wenn du 'nur' mit einen einfachen Texteditor arbeitest und ohne viel Aufwand die Umlaute richtig darstellen willst, kannst du sogenannte HTML - Entities benutzen.
Diese HTML - Entities sind kleine Codeschnippsel, die das gewünschte Zeichen maskieren und für den Browser erkennbar angeben, welches Zeichen er anzeigen soll. Das Format dieser Entities ist immer folgendes '&....; , also ein Ampersand gefolgt von der Bezeichnug des gewünschten Zeichens und abschließend ein Semikolon.
Eine vollständige Liste dieser HTML - Entities findest du 'HIER'.
Wenn du einen der gängigen HTML- Editoren benutzt, kannst du wahrscheinlich einstellen, welchen Zeichensatz du nutzen willst oder der Editor wird dieses Ersetzung der HTML - Entities teilweise, je nach dessen Einstellungen, automatisch vornehmen - wenn dein HTML- Editor das nicht macht, oder du, wie schon erwähnt, einen normalen Texteditor benutzt, dann musst du manuell eingreifen und zwar indem du diese Zeichen eben von Hand einträgst. Für die häufig verwendeten Umlaute hier mal eine kleine Übersicht:
| ä | ä |
| Ä | Ä |
| ö | ö |
| Ö | Ö |
| ü | ü |
| Ü | Ü |
| ß | ß |
Und neben diesen deutschen 'Sonderzeichen' gibt es noch eine ganze Menge von weiteren Zeichen, die man auf diese Weise in HTML- Dokumente einfügen kann, auch wenn man sie auf keiner Tastatur findet. Schau mal HIER!
Ein kleiner Vorgeschmack... Þ ℜ φ ℘ ™ ∃ ∀ ϑ © ... und und und!
Wie oben schon erwähnt kann man das Problem mt den Umlauten auch etwas eleganter und ohne händische Eingabe von HTML - Entities dadurch lösen, indem du von Anfang an auf die korrekte Verwendung der Zeichenkodierung in deinem HTML Code achtest. Hier bietet sich 'UTF-8' als Standard an...
Leider werden die Erläuterungen hierzu jetzt etwas komplizierter, aber wenn du Probleme mit der Darstellung deiner Umlaute hast, sollst du zumindest wissen, woran es liegt und was man dagegen tun kann.
Diese Seite verwendet Cookies.
Wenn Du weiter auf dieser Seite
bleibst, eklärst Du Dich damit
einverstanden.
Für mehr Informationen bitte die
DATENSCHUTZBESTIMMUNGEN
zur Kenntnis nehmen.