×
HTML
HTML
Der Anfang
Tabellen
Block
Inline
Formate
Noch mehr?
Beispiele
 
HTML
HTML
Der Anfang
Tabellen
Block
Inline
Formate
Noch mehr?
Beispiele
 
CSS ist valide!
Herzlich willkommen auf meiner Homepage!
Heute ist der

Aller Anfang ist schwer....!

... ja, aber auch die läng­ste Reise fängt mit einem ersten Schritt an. Und dieser erste Schritt ist in HTML eigent­lich recht ein­fach zu machen.
Zunächst mal wollen wir festlegen, was wir brauchen, um eine Web­seite mit HTML zu er­stell­en?

Aber bevor es richtig los geht, müssen wir noch eine Form­alität erledigen. Jedes HTML- Doku­ment hat eine vor­gegebe­ne Grund­struk­tur, die wir immer als Erstes er­stell­en, bevor wir uns um Inhalte kümmern.
Diese Grund­struktur oder auch Grund­gerü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.

HTML 5
  • <!DOCTYPE html>
HTML 4.01 Strict, Transitional, Frameset
  • <!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">
XHTML 1.0 Strict, Transitional, Frameset
  • <!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">
XHTML 1.1 DTD
  • <!DOCTYPE html PUBLIC "-//­W3C//­DTD XHTML 1.1//­EN" "http://www.w3.org/­TR/­xhtml11/­DTD/­xhtml11.dtd">

Wir werden jedoch im Folgenden aus­schließlich den HTML 5 <!DOCTYPE html> verwenden!

Als nächstes in unserem Grund­gerüst folgt die Deklaration des HTML- Bereiches. Dazu notieren wir ganz zu Anfang, direkt nach der DOCTYPE- Deklaration, den Ausdruck <html lang="de"> und be­enden diesen Bereich ganz am Ende des Doku­mentes durch den Aus­druck </html>!
Die Ergänzung lang="de" in dem ersten Aus­druck ist optional. Sie sollte aber sinn­voller Weise ange­geben werden, da wir damit erklären, dass wir ein Doku­ment in deutscher Sprache erstellen.

Innerhalb der HTML- Bereiches definieren wir dann mit <head> </head> den Kopf­bereich unseres Doku­mentes und an­schließ­end mit <body> </body> den ei­gentl­ichen Inhalts­bereich. In diesem <body> </body> werden dann alle Inhalte, also auch alles das, was wir im weit­eren Ver­lauf machen, einge­fügt!

Der <head> </head> Bereich be­inhalt­et Angaben und Infor­matio­nen zu deiner Web­seite sowie weitere An­weis­ungen für den Web­browser. Zum Bei­spiel die oben schon ein­gefüg­ten Angaben zum verwen­deten Zeichen­satz <meta charset="utf-8"> und der Titel deiner Web­seite <title>Name deiner Seite</title>.
Wenn du zu diesen Kopf­angaben mehr wissen willst, schau mal HIER!

Aber jetzt geht es los! Und bitte nicht ver­gessen, was wir im Fol­gen­den an Code pro­duzie­ren schrei­ben wir in den <body> </body> Bereich!
Worauf wartest du - Editor starten und einfach den HTML- Code ein­tippen. Die so er­stell­te Text­datei wird dann mit 'speichern unter' auf die Fest­platte 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 ent­sprech­end mit dem als Standard ein­ge­stell­ten Web­browser. Und warum sollte unsere Datei index.html heißen? Der Name index kenn­zeich­net diese Datei als 'Start­seite' deines Web­auf­trittes! 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 ver­schie­dene Arten einen Text dar­zus­tellen:

  1. Als Überschrift
  2. Als 'normalen' Text
  3. Als ungeordnete Liste
  4. ... und jetzt hier gleich die Nummer 4 - die geordnete Liste

Fangen wir mal mit der Überschrift an:
Grundsätzlich werden in HTML alle An­weis­ungen mittels eines so­genann­ten 'Tag' (aus dem englischen für 'Etikett', 'Anhänger', 'Label') an den Browser über­geben.
Ein 'Tag' sieht immer so aus - eine öff­nende eckige Klammer '<' die Bez­eich­nung der jeweil­igen Anweisung und eine schließende eckige Klammer '>'!
Um das Ende des Gültig­keits­bereich­es der An­weisung für den Browser fest­zu­legen, folgt bei den meisten HTML An­wei­sungen nach dem öff­nenden 'Tag' ein schließ­ender 'Tag'.
Dieser schließende 'Tag' sieht immer so aus - die öffnende eckige Klammer '<' ein Schräg­strich / gefolgt von die Bezeich­nung der geöff­neten Anweisung und die schließ­ende eckige Klammer '>'!

der code
<h1>Eine Überschrift</h1>
so sieht es aus

Eine Überschrift


In diesem Beispiel wurde ein Über­schrift als An­weisung über­geben. Das 'h' steht für 'heading', dem eng­lischen Wort für Über­schrift.
Da es von diesen Über­schriften 6 ver­schie­dene gibt, werden die in HTML durch­nummer­iert (h1 bis h6).

der code
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>
so sieht es aus

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 6

Genau so funktioniert es für einen Text­absatz 'p' - 'p' von dem eng­lischen 'paragraph'

der code
<p>Hier mal ein bisschen Text...</p>
so sieht es aus

Hier mal ein bisschen Text, um zu zeigen, wie diese 'normale' Text­darstell­ung funktioniert. Um Zeilen­um­brüche brau­chen wir uns nicht zu kümmern, diese werden auto­matisch erzeugt, wenn der Platz für den Text nicht ausreicht!


In HTML brauchen wir uns um Zeilen­umbrüchen in Texten nicht zu kümmern, die setzt der Browser immer auto­matisch dort, wo der Platz für den Text eben zu Ende ist!
Aber manchmal wollen wir ja einen Zeilen­umbruch auch inner­halb eines Text­bereiches! Dafür gibt es natürlich auch einen Tag und zwar den <br> Tag (br vom eng­lischen break= Bruch). Dieser Tag hat keinen Ende- Tag und steht immer ganz alleine da, an der Stelle, wo wir einen Zeilen­umbruch haben wollen. Manchmal findet man den <br> auch in der Schreib­weise <br />. Dieses ist einer älteren HTML- Variante (dem XHTML) geschuldet, in der allen Tags, die keinen Ende- Tag haben, dieses Be­endi­gungs­zeichen (/) mit in den Start- Tag ge­schrie­ben wird. Das ist quasi sowas wie ein Start- Ende- Tag in einem. Ein Muss, wenn man XHTML benutzt - bei allen anderen Vari­anten braucht man das nicht zu machen.. es stört aber auch nicht weiter, da ein Browser trotz­dem das Richtige macht und einen Zeilen­umbruch einfügt.

So sieht das Text­beispiel mit <br> aus:

der code Text mit <br>
<p>Hier mal<br>ein bisschen Text,<br>um zu zeigen, wie diese 'normale' Text­darstell­ung<br>funktioniert.<br>Um Zeilen­umbrüche brauchen wir uns nicht zu kümmern, diese <br>werden <br>auto­matisch <br>erzeugt, wenn der Platz für den Text nicht ausreicht!</p>
so sieht es aus

Hier mal
ein bisschen Text,
um zu zeigen, wie diese 'normale' Text­darstellung
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 Zeilen­umbrüch­en sind - in HTML wird der Zeilen­umbruch auto­matischen bei einem Wort­ende (also an einem Leer­zeichen) erfolgen. Manchmal möchte man aber zu­sammen­hängen­de Begriffe nicht durch einen Zeilen­umbruch aus­einan­der reißen. Da hilft eines von den HTML eigenen Sonder­zeichen... das un­trenn­bare Leer­zeichen (engl. non breaking space) '&nbsp;'. Dieser Code, statt eines Leer­zeichens einge­fügt, sieht im Text aus wie ein Leer­zeichen, ver­hindert aber einen auto­matischen Zeilen­umbruch an dieser Stelle.
Ebenso kann es aber auch vorkommen, dass besonders lange Wörter zu früh für einen Zeilen­umbruch sorgen und das Er­scheinungs­bild meines Text­absatzes dadurch einfach... na ja... irgend­wie blöde aus­sieht! Da hilft dann der Code für soft hyphen '&shy;', den ich an einer oder mehreren eventu­ellen Wunsch­umbruch­stellen in langen Wörtern einfügen kann. Ein Zeilen­umbruch in diesem Wort wird dann im Bedarfs­fall vom Browser an diesem 'weichen Trenn­strich' erfolgen. Dabei wird ein Trenn­strich (-) einge­fü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 Kom­plika­tion. Nämlich dass hierfür 2 Tags benötigt werden:
Und zwar für die 'un­sor­tierte Liste' wird Anfang und Ende mit <ul> </ul> gekenn­zeichnet.
Für die 'geordnete Liste' lauten Anfangs- und Endtag <ol> und </ol>.
Zwischen den öffnenden und schließenden 'Tags' werden die einzelnen Listen­einträge mit <li> und </li> gekenn­zeichnet:

der code ungeordnete Liste
<ul>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li>Listeneintrag 3</li>
<li>... usw</li>
</ul>
so sieht es aus

Und das Gleiche nochmal mit <ol> </ol> für geordnete Liste.

der code geordnete Liste
<ol>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li>Listeneintrag 3</li>
<li>... usw</li>
</ol>
so sieht es aus
  1. Listeneintrag 1
  2. Listeneintrag 2
  3. Listeneintrag 3
  4. ... usw

Und wo wir gerade schon bei Listen sind - es gibt noch eine dritte Variante: die Defini­tions­liste.
Diese Listenart wird mit dem 'Tag' <dl> geöffnet und mit dem 'Endtag' </dl> beendet. Zwischen diesen Tags werden dann die Listen­elemente <dt> </dt> für den Definitions- Term/ Namen und <dd> </dd> für den Definitions- Description/ Beschrei­bung jeweils paar­weise eingefügt.

der code Definitionsliste
<dl>
<dt>BMW</dt>
<dd>Ein deutscher Autohersteller</dd>
<dt>HTML</dt>
<dd>Eine Auszeichnungssprache für Webseiten</dd>
</dl>
so sieht es aus
BMW
Ein deutscher Autohersteller
HTML
Eine Auszeichnungssprache für Webseiten

Ist doch nicht so schwierig - oder?
Jetzt können wir schon das Grund­gerüst, Über­schrif­ten, Text­absä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 Web­browser öffnen!

Ach ja - bevor ich es vergesse! Wenn du die hier be­schrie­bene Methode ver­wendest, um dir deinen Code im Browser anzu­schauen, kann es sein, dass du fest­stellst, 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 Text­editor benutzt, dann musst du manuell ein­greifen und zwar indem du diese Zeichen eben von Hand einträgst. Für die häufig verwendeten Umlaute hier mal eine kleine Übersicht:

ä &auml;
Ä &Auml;
ö &ouml;
Ö &Ouml;
ü &uuml;
Ü &Uuml;
ß &szlig;

Und neben diesen deutschen 'Sonder­zeichen' 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.


 

Achtung!

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.