HTML-Kurs ohne Vorkenntnisse
Was brauche ich, um mit HTML zu schreiben?
-Einen einfachen Text (ASCII) Editor, z.B. den von Windows (andere: Phase 5 - Html/CSS Editor oder Notepad++ - Editor für viele Programmiersprachen)
-Diese Anleitung
-Lust und Zeit
Inhalt:
1.1: Die Tags
1.1.1: Die Syntax der Tags
Die Befehle beim HTML-Schreiben nennt man Tags. Diese Tags haben normalerweise immer die gleiche Form (Syntax). Sie sehen so aus:
Mit dem Befehl (Tag) <befehl> zeigen wir dem Browser, dass der meist nachstehende Inhalt in dieser Weise, in der es in dem Befehl angegeben ist, interpretiert (angezeigt) werden soll. Dann folgt der Inhalt. Mit dem abschließenden Tag </befehl> zeigen wir dem Browser, dass der Inhalt, der nach dem Abschluss-Tag steht, nicht mehr in dieser Weise interpretiert werden soll.
Hierbei ist es egal, ob man die Befehle
oder anders schreibt. Nur großsollte man sie nicht schreiben, obwohl bei HTML von den meisten Browsern auch große Befehle angenommen werden, weil groß geschriebene Tags später beim Schreiben in XHTML nicht mehr anerkannt werden.
1.2: Das Gerüst jeder HTML-Seite
1.2.1: Öffnen und Schließen des Dokumentes
Man öffnet und schließt ein HTML Dokument immer mit den Befehlen:
Vor und nach diesen Tags darf kein Inhalt stehen.
1.2.2: Unsichtbare Angaben: Der Head-Bereich
Mit dem Head-Befehl öffnet man den ersten Bereich innerhalb des HTML-Dokuments. Die Tags und Inhalte in diesem Bereich sind für die Besucher unsichtbar. Einzige ausnahme: der <title> Tag. Doch dazu kommen wir später. Nun, mit dem ersten Bereich, sieht unser Dokument wie folgt aus:
Achtet immer darauf, besonders im Gerüst, alle Tags sauber zu schließen.
1.2.2.1: Die Kopfleiste
Der einzige Befehl im Head-Bereich, dessen Auswirkungen für den Benutzer erkennbar sind, ist der <title>-Befehl. Er sieht wie folgt aus:
Mit dem Title-Tag wird die Kopfleiste definiert. Die Kopfleiste ist das, wo bei eurem Browser jetzt z. B. HTML für Anfänger steht. Bei Mozilla und den neueren Internet Explorern steht sie in jedem Tag, bei den alten oben drüber. Diese Angabe ist auch aus dem Grund wichtig, das die Suchmaschinen die Websiten unter anderem nach diesem Titel absuchen.
1.2.3: Der Inhalt steht im Body
Der wichtigste Teil einer Website ist allerdings der Body, denn hierdrin spielt sich eure Website ab. Hier schreibt ihr Texte, Tabellen, Designs uvm. Wie ihr euch bestimmt schon denken könnt, ist der Body-Bereich der 2. Bereich im <html>-Bereich und damit auch der letzte im Grundgerüst. Er wird logischer Weise mit <body> geöffnet und mit </body> wieder geschlossen. Das (fast) komplette Grundgerüst der HTML-Seite sieht dann so aus:
1.2.4: DOCTYPE - Was schreiben wir überhaupt?
Die DOCTYPE Definition steht immer ganz am Anfang des Dokuments. Mit der DOCTYPE Definition gibt man dem Browser an, in welcher Sprache und in welcher Art man schreibt. Als Sprache gibt es z.B. HTML, XHTML...
Die Art gibt bei HTML an, ob man in einer strengeren oder einer lockeren Art von HTML schreibt. Ausserdem wird definiert, ob man in einer neueren oder älteren Version von HTML schreibt. Für den Anfang übernehmt einfach die nachfolgende Version mit Transitional.
Als fertiges Grundgerüst haben wir also:
1.2.5: Der Dateiname
Gebe allen deinen HTML-Dokumenten wenn du sie speicherst die Endung .html. Früher gab es auch die Endung .htm, weil ältere Windows-Versionen nur Dateinen mit dreistelliger Dateiendung verarbeiten konnten. Nun gibt es allerdings keinen Grund mehr, verwende deswegen .html, da es auch die neuere Endung ist. Weitere Regeln für den Dateinamen:
2.1: Zeichen und Textformatierung
2.1.1: Der Umgang mit Leerzeichen und Tabstopps
In den Body-Abschnitt des HTML-Dokuments kann man theoretisch den reinen Text hinein schreiben und er wird eins zu eins angezeigt. Ein paar Einschränkungen gibt es dennoch: Der Browser ignoriert gehäufte Leerzeichen oder Tabstopps, d.h.
Wird genauso dargestellt wie
Genauso formatiert der Browser keine manuell im Editor gemachten Umbrüche, d.h.
im Editor ist das gleiche wie im Editor
und wird so angezeigt:
Alle wiederholten Leerzeichel, Tabstopps, manuelle Absätze usw. werden mit einem Leerzeichen dargestellt.
Doch auch hierfür gibt es natürlich einen Befehl:
Wird im Browser zu:
2.1.1.1: Sonderzeichen und Befehle für Absätze etc.
Wie im letzten Kapitel beschrieben, hat es im Browser keine Auswirkungen darauf, dass mehr Leerzeilen angezeigt werden, wenn man diese im Editor per Hand eingibt. Doch auch hierzu gibt es einige Befehle.
<br>
Erzeugt einen einfachen Absatz, so als würde man auf der Tastatur Enter drücken.
wird zu:
In HTML haben Sonderzeichen immer folgende Form:
Durch das kaufmännische und (&) wird das Sonderzeichen eingeleitet und durch das Semikolon ( geschlossen. Es gibt für jedes Zeichen des ASCII Zeichensatzes sowie für ausländische Zeichen einen Sonderzeichen-Code.
Der für das erzwungene Leerzeichen lautet:
Also werden folgende Codes wie folgt interpretiert.
wird zu:
wird zu:
2.1.2: Sonderzeichen
Wie im letzten Kapitel schon angesprochen, gibt es in HTML für jedes Zeichen des ASCII Zeichensatzes sowie vieler anderer Zeichensätze.
Ich stelle jetzt die wichtigsten vor. (Anmerkung: Seit HTML 4 kann man die Sonderzeichen auch per Unicode definieren. Diese Möglichkeit wird hier allerdings nicht vorgestellt, da sie in ihrer Funktion deckungsgleich mit diesen Codes ist.)
Zeichen: < (muss im HTML-Dokument verwendet werden, wenn du auf der Website eine spitze Klammer anzeigen lassen willst, da sie sonst als Teil eines Tags interpretiert wird)
Zeichen: > (siehe <)
Zeichen: " (muss ebenfalls im Code angegeben werden)
Zeichen: & (muss auch im Code angegeben werden)
Zeichen: Leerzeichen (muss bei Häufung ab dem 2. Leerzeichen angegeben werden)
Zeichen: ü (wird von vielen Browsern bei manueller Eingabe nicht verstanden)
Zeichen: Ü (s.o.)
Zeichen: ä (s.o.)
Zeichen: Ä (s.o.)
Zeichen: ö (s.o.)
Zeichen: Ö (s.o.)
Das waren die wichtigsten Sonderzeichen. Für weitere Sonderzeichen bitte die Seite SelfHTML benutzen.
2.1.3: Einfachste Textformatierungen
In HTML gibt es viele verschiedene Tags zur Textformatierung, von denen es manche sogar im Forum gibt. Die einfachsten werden jetzt vorgestellt.
<b>
Mit dem Tag <b> wird der nachfolgende Text fett dargestellt. Er muss sauber mit dem Code </b> wieder geschlossen werden, da der Browser sonst den ganzen nachfolgenden Text fett anzeigt.
Ergibt:
Text
<u>
Durch diesen Befehl kann man den Nachfolgenden Text unterstrichen anzeigen lassen. Auch hier ist eine Schließung des Tags zwingend erforderlich.
Ergibt:
Text
<i>
Mit diesem Tag kann man eine kursierung des Textes erreichen. Das Format ist dabei dasselbe wie bei den anderen beiden Befehlen zur einfachen Textformatierung.
Ergibt:
Text
2.1.4: Weitere Zeilenumbruchs- und Absatzformatierungen
Es gibt noch einige wenige weitere Arten, um Absätze anzuzeigen, z.B. den Befehl <hr>. Er erzeugt eine Linie, die sich über den ganzen Bildschirm zieht.
wird zu: Ergebnis.
Eine weitere Möglichkeit ist der Befehl <p>. Er wird vor dem Absatz geöffnet und nach dem Absatz geschlossen. Also wird:
zu: Ergebnis.
Die letzte Möglichkeit, den Befehl <br> habe ich ja schon oben beschrieben.
2.1.5: Überschriften
In HTML gibt es sechs verschieden große Überschrifts-Arten. Alle haben den gleichen Aufbau vom Tag:
Hierbei wird das x durch eine Zahl von 1 bis 6 ersetzt. Die Standartgröße des normalen Textes ist 4. Allerdings werden Überschriften von allen aktuellen Browsern mindestens dick dargestellt.
Was brauche ich, um mit HTML zu schreiben?
-Einen einfachen Text (ASCII) Editor, z.B. den von Windows (andere: Phase 5 - Html/CSS Editor oder Notepad++ - Editor für viele Programmiersprachen)
-Diese Anleitung
-Lust und Zeit
Inhalt:
- 1.1: Die Tags
- 1.1.1: Die Syntax der Tags
- 1.1.1: Die Syntax der Tags
- 1.2: Das Gerüst jeder HTML-Seite
- 1.2.1: Öffnen und Schließen des Dokumentes
- 1.2.2: Unsichtbare Angaben: Der Head-Bereich
- 1.2.2.1: Die Kopfleiste
- 1.2.2.1: Die Kopfleiste
- 1.2.3: Der Inhalt steht im Body
- 1.2.4: DOCTYPE - Was schreiben wir überhaupt?
- 1.2.5: Der Dateiname
- 1.2.1: Öffnen und Schließen des Dokumentes
- 2.1: Zeichen und Textformatierung
- 2.1.1: Der Umgang mit Leerzeichen und Tabstopps
- 2.1.1.1: Sonderzeichen und Befehle für Absätze etc.
- 2.1.1.1: Sonderzeichen und Befehle für Absätze etc.
- 2.1.2: Sonderzeichen
- 2.1.3: Einfachste Textformatierungen
- 2.1.4: Weitere Zeilenumbruchs- und Absatzsformatierungen
- 2.1.5: Überschriften
- 2.1.1: Der Umgang mit Leerzeichen und Tabstopps
1.1: Die Tags
1.1.1: Die Syntax der Tags
Die Befehle beim HTML-Schreiben nennt man Tags. Diese Tags haben normalerweise immer die gleiche Form (Syntax). Sie sehen so aus:
Code:
<befehl>Inhalt</befehl>Mit dem Befehl (Tag) <befehl> zeigen wir dem Browser, dass der meist nachstehende Inhalt in dieser Weise, in der es in dem Befehl angegeben ist, interpretiert (angezeigt) werden soll. Dann folgt der Inhalt. Mit dem abschließenden Tag </befehl> zeigen wir dem Browser, dass der Inhalt, der nach dem Abschluss-Tag steht, nicht mehr in dieser Weise interpretiert werden soll.
Hierbei ist es egal, ob man die Befehle
Code:
<befehl>Inhalt</befehl>
<befehl>
Inhalt
</befehl>oder anders schreibt. Nur großsollte man sie nicht schreiben, obwohl bei HTML von den meisten Browsern auch große Befehle angenommen werden, weil groß geschriebene Tags später beim Schreiben in XHTML nicht mehr anerkannt werden.
Code:
<BEFEHL>Inhalt</BEFEHL>1.2: Das Gerüst jeder HTML-Seite
1.2.1: Öffnen und Schließen des Dokumentes
Man öffnet und schließt ein HTML Dokument immer mit den Befehlen:
Code:
<html>
...Inhalt...
</html>Vor und nach diesen Tags darf kein Inhalt stehen.
1.2.2: Unsichtbare Angaben: Der Head-Bereich
Mit dem Head-Befehl öffnet man den ersten Bereich innerhalb des HTML-Dokuments. Die Tags und Inhalte in diesem Bereich sind für die Besucher unsichtbar. Einzige ausnahme: der <title> Tag. Doch dazu kommen wir später. Nun, mit dem ersten Bereich, sieht unser Dokument wie folgt aus:
Code:
<html>
<head>
...Angaben...
</head>
...Inhalt...
</html>Achtet immer darauf, besonders im Gerüst, alle Tags sauber zu schließen.
1.2.2.1: Die Kopfleiste
Der einzige Befehl im Head-Bereich, dessen Auswirkungen für den Benutzer erkennbar sind, ist der <title>-Befehl. Er sieht wie folgt aus:
Code:
<html>
<head>
<title>
Kopfleistentitel
</title>
</head>
...Inhalt...
</html>Mit dem Title-Tag wird die Kopfleiste definiert. Die Kopfleiste ist das, wo bei eurem Browser jetzt z. B. HTML für Anfänger steht. Bei Mozilla und den neueren Internet Explorern steht sie in jedem Tag, bei den alten oben drüber. Diese Angabe ist auch aus dem Grund wichtig, das die Suchmaschinen die Websiten unter anderem nach diesem Titel absuchen.
1.2.3: Der Inhalt steht im Body
Der wichtigste Teil einer Website ist allerdings der Body, denn hierdrin spielt sich eure Website ab. Hier schreibt ihr Texte, Tabellen, Designs uvm. Wie ihr euch bestimmt schon denken könnt, ist der Body-Bereich der 2. Bereich im <html>-Bereich und damit auch der letzte im Grundgerüst. Er wird logischer Weise mit <body> geöffnet und mit </body> wieder geschlossen. Das (fast) komplette Grundgerüst der HTML-Seite sieht dann so aus:
Code:
<html>
<head>
<title>Kopfleiste</title>
</head>
<body>
...Inhalt...
</body>
</html>1.2.4: DOCTYPE - Was schreiben wir überhaupt?
Die DOCTYPE Definition steht immer ganz am Anfang des Dokuments. Mit der DOCTYPE Definition gibt man dem Browser an, in welcher Sprache und in welcher Art man schreibt. Als Sprache gibt es z.B. HTML, XHTML...
Die Art gibt bei HTML an, ob man in einer strengeren oder einer lockeren Art von HTML schreibt. Ausserdem wird definiert, ob man in einer neueren oder älteren Version von HTML schreibt. Für den Anfang übernehmt einfach die nachfolgende Version mit Transitional.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Als fertiges Grundgerüst haben wir also:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Kopfleiste</title>
</head>
<body>
Text und andere Inhalte
</body>
</html>1.2.5: Der Dateiname
Gebe allen deinen HTML-Dokumenten wenn du sie speicherst die Endung .html. Früher gab es auch die Endung .htm, weil ältere Windows-Versionen nur Dateinen mit dreistelliger Dateiendung verarbeiten konnten. Nun gibt es allerdings keinen Grund mehr, verwende deswegen .html, da es auch die neuere Endung ist. Weitere Regeln für den Dateinamen:
- Keine Zahl am Anfang
- Keine Sonderzeichen
- Keine Leerzeichen sondern - oder _
- Jeder Name darf im gleichen Verzeichnis nur einmal vorkommen
2.1: Zeichen und Textformatierung
2.1.1: Der Umgang mit Leerzeichen und Tabstopps
In den Body-Abschnitt des HTML-Dokuments kann man theoretisch den reinen Text hinein schreiben und er wird eins zu eins angezeigt. Ein paar Einschränkungen gibt es dennoch: Der Browser ignoriert gehäufte Leerzeichen oder Tabstopps, d.h.
Code:
Text, Text, TextWird genauso dargestellt wie
Code:
Text, Text, TextGenauso formatiert der Browser keine manuell im Editor gemachten Umbrüche, d.h.
Code:
Text Textim Editor ist das gleiche wie im Editor
Code:
Text
Textund wird so angezeigt:
Code:
Text TextAlle wiederholten Leerzeichel, Tabstopps, manuelle Absätze usw. werden mit einem Leerzeichen dargestellt.
Doch auch hierfür gibt es natürlich einen Befehl:
Code:
<code>Text Text</code>Wird im Browser zu:
Code:
Text Text2.1.1.1: Sonderzeichen und Befehle für Absätze etc.
Wie im letzten Kapitel beschrieben, hat es im Browser keine Auswirkungen darauf, dass mehr Leerzeilen angezeigt werden, wenn man diese im Editor per Hand eingibt. Doch auch hierzu gibt es einige Befehle.
<br>
Erzeugt einen einfachen Absatz, so als würde man auf der Tastatur Enter drücken.
Code:
Text Hallo Text
<br>
Text Hallo Textwird zu:
Code:
Text Hallo Text
Text Hallo Text
In HTML haben Sonderzeichen immer folgende Form:
Code:
&zeichenbeschreibung;Durch das kaufmännische und (&) wird das Sonderzeichen eingeleitet und durch das Semikolon (
geschlossen. Es gibt für jedes Zeichen des ASCII Zeichensatzes sowie für ausländische Zeichen einen Sonderzeichen-Code.Der für das erzwungene Leerzeichen lautet:
Code:
Also werden folgende Codes wie folgt interpretiert.
Code:
Hallo HalloCode:
Hallo HalloCode:
Hallo HalloCode:
Hallo Hallo2.1.2: Sonderzeichen
Wie im letzten Kapitel schon angesprochen, gibt es in HTML für jedes Zeichen des ASCII Zeichensatzes sowie vieler anderer Zeichensätze.
Ich stelle jetzt die wichtigsten vor. (Anmerkung: Seit HTML 4 kann man die Sonderzeichen auch per Unicode definieren. Diese Möglichkeit wird hier allerdings nicht vorgestellt, da sie in ihrer Funktion deckungsgleich mit diesen Codes ist.)
Code:
<Code:
>Code:
&qoutCode:
&Code:
Code:
üCode:
ÜCode:
äCode:
ÄCode:
öCode:
ÖDas waren die wichtigsten Sonderzeichen. Für weitere Sonderzeichen bitte die Seite SelfHTML benutzen.
2.1.3: Einfachste Textformatierungen
In HTML gibt es viele verschiedene Tags zur Textformatierung, von denen es manche sogar im Forum gibt. Die einfachsten werden jetzt vorgestellt.
<b>
Mit dem Tag <b> wird der nachfolgende Text fett dargestellt. Er muss sauber mit dem Code </b> wieder geschlossen werden, da der Browser sonst den ganzen nachfolgenden Text fett anzeigt.
Code:
<b>Text</b>Ergibt:
Text
<u>
Durch diesen Befehl kann man den Nachfolgenden Text unterstrichen anzeigen lassen. Auch hier ist eine Schließung des Tags zwingend erforderlich.
Code:
<u>Text</u>Ergibt:
Text
<i>
Mit diesem Tag kann man eine kursierung des Textes erreichen. Das Format ist dabei dasselbe wie bei den anderen beiden Befehlen zur einfachen Textformatierung.
Code:
<i>Text</i>Ergibt:
Text
2.1.4: Weitere Zeilenumbruchs- und Absatzformatierungen
Es gibt noch einige wenige weitere Arten, um Absätze anzuzeigen, z.B. den Befehl <hr>. Er erzeugt eine Linie, die sich über den ganzen Bildschirm zieht.
Code:
Text, Inhalt
<hr>
Text, Inhaltwird zu: Ergebnis.
Eine weitere Möglichkeit ist der Befehl <p>. Er wird vor dem Absatz geöffnet und nach dem Absatz geschlossen. Also wird:
Code:
<p>
1. Absatz: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
<p>
2. Absatz: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>zu: Ergebnis.
Die letzte Möglichkeit, den Befehl <br> habe ich ja schon oben beschrieben.
2.1.5: Überschriften
In HTML gibt es sechs verschieden große Überschrifts-Arten. Alle haben den gleichen Aufbau vom Tag:
Code:
<hx>Überschrift</hx>Hierbei wird das x durch eine Zahl von 1 bis 6 ersetzt. Die Standartgröße des normalen Textes ist 4. Allerdings werden Überschriften von allen aktuellen Browsern mindestens dick dargestellt.
