TWLan Forum
HTML für Anfänger - Printable Version

+- TWLan Forum (https://twlan.org)
+-- Forum: Legacy (https://twlan.org/forumdisplay.php?fid=61)
+--- Forum: TWLan 1.x (DSLan) (https://twlan.org/forumdisplay.php?fid=62)
+---- Forum: Deutsche Community (https://twlan.org/forumdisplay.php?fid=65)
+----- Forum: Spielerprojekte (https://twlan.org/forumdisplay.php?fid=9)
+------ Forum: Tutorials (https://twlan.org/forumdisplay.php?fid=11)
+------ Thread: HTML für Anfänger (/showthread.php?tid=2241)

Pages: 1 2

HTML für Anfänger - murathison - 22.11.2009

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 Wink
-Lust und Zeit


Inhalt:
  • 1.1: Die 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.3: Der Inhalt steht im Body
    • 1.2.4: DOCTYPE - Was schreiben wir überhaupt?
    • 1.2.5: Der Dateiname
  • 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.2: Sonderzeichen
    • 2.1.3: Einfachste Textformatierungen
    • 2.1.4: Weitere Zeilenumbruchs- und Absatzsformatierungen
    • 2.1.5: Überschriften


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, Text

Wird genauso dargestellt wie
Code:
Text,                           Text,                       Text

Genauso formatiert der Browser keine manuell im Editor gemachten Umbrüche, d.h.

Code:
Text Text

im Editor ist das gleiche wie im Editor

Code:
Text
Text

und wird so angezeigt:

Code:
Text Text

Alle 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   Text


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.

Code:
Text Hallo Text
<br>
Text Hallo Text

wird zu:

Code:
Text Hallo Text
Text Hallo Text


&nbsp;


In HTML haben Sonderzeichen immer folgende Form:

Code:
&zeichenbeschreibung;

Durch das kaufmännische und (&) wird das Sonderzeichen eingeleitet und durch das Semikolon (Wink 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:
&nbsp;

Also werden folgende Codes wie folgt interpretiert.

Code:
Hallo &nbsp;&nbsp;&nbsp; Hallo
wird zu:
Code:
Hallo    Hallo

Code:
Hallo      Hallo
wird zu:
Code:
Hallo Hallo


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

Code:
&lt;
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)
Code:
&gt;
Zeichen: > (siehe &lt;)
Code:
&qout
Zeichen: " (muss ebenfalls im Code angegeben werden)
Code:
&amp;
Zeichen: & (muss auch im Code angegeben werden)
Code:
&nbsp;
Zeichen: Leerzeichen (muss bei Häufung ab dem 2. Leerzeichen angegeben werden)
Code:
&uuml;
Zeichen: ü (wird von vielen Browsern bei manueller Eingabe nicht verstanden)
Code:
&Uuml;
Zeichen: Ü (s.o.)
Code:
&auml;
Zeichen: ä (s.o.)
Code:
&Auml;
Zeichen: Ä (s.o.)
Code:
&ouml;
Zeichen: ö (s.o.)
Code:
&Ouml;
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.

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, Inhalt

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:

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.

RE: HTML für Anfänger - knollenmax - 22.11.2009

zwar schön erklärt, aber bitte die SUfu nutzen, da es schon so ein Tut gibt:

http://dslan.gfx-dose.de/thread-1742.html
Ach so, ja, in deinem wird die Struktur erklärt und im andren Links etc...

RE: HTML für Anfänger - murathison - 22.11.2009

Ich werd noch anderes bringen

RE: HTML für Anfänger - Yannici - 22.11.2009

Ganz Gut, aber sowas kann man auch in einem HTML Forum lernen und nicht unbedingt hier.
Dazu, wie auch knollenmax gesagt hat, gibts schon ein TuT ;-)

Aber ganz gut Tongue

RE: HTML für Anfänger - murathison - 22.11.2009

Das Tut ist aber unübersichtlich find ich

RE: HTML für Anfänger - Bettdecke1 - 22.11.2009

Ganz gut Wink
Aber eigentlich relativ unnötig.
Da es
  1. Seiten zum lernen gibt ( http://selfhtml.net ..)
  2. Es Foren gibt, wo man es lernen kann, und dort auch fragen stellen kann
  3. Es schon ein Tutorial dazu gibt


RE: HTML für Anfänger - murathison - 22.11.2009

ist doch egal ich habe es so einfach wie es geht erklärt um anfängern den einstieg in das proggen von tools usw. zu vereinfachen

RE: HTML für Anfänger - mannvomfenster - 22.11.2009

Ich finds übersichtlich!
Ich finds auch gut!
aber tools kann man noch nicht mit dem wissen proggen!

RE: HTML für Anfänger - murathison - 22.11.2009

nein aber es ist schon einmal ein anfang und da ich selbst keine tools proggen kann und nur HTML drauf hab, kann ich das wohl kaum erklären Smile

RE: HTML für Anfänger - SlimShady95 - 22.11.2009

Um Tools zu proggen brauchst du meistens PHP oder ähnliches.

Das Tut sieht von irgendeiner Seite kopiert aus.
Und du solltest eher die Tags erklären Wink

MfG Manuel

RE: HTML für Anfänger - mannvomfenster - 22.11.2009

wie wärs mit einer tabelle!

befehl|Bedeutung
befehl|Bedeutung
...

RE: HTML für Anfänger - Bettdecke1 - 22.11.2009

Ich finde es auch, und du könntest vielleicht noch ein paar befehle dazu schreiben,was sie bedeuten, wie z.B. <a href="Link">Name</a>, oder <a href="linkwohinesführensollwennmanaufdasbildklickt"><img border="0" src="bildlink"></a>

RE: HTML für Anfänger - SlimShady95 - 22.11.2009

Wenn jemand wirklich HTML lernen will, empfehle ich [selfHTML] und bei PHP [selfPHP]

MfG Manuel

RE: HTML für Anfänger - murathison - 22.11.2009

kommt noch die tabelle
erstmal mach ich alle erklärungen und am ende eine tabelle

RE: HTML für Anfänger - knollenmax - 22.11.2009

ach ja, wenn du das mit den Leerzeichen schon so erklärst, musst du noch dazuschreiben, dass &nbsp; ein erzwungenes Leerzeichen ist. Oder dass man mit <br> eine neue Zeile beginnt...

RE: HTML für Anfänger - Bettdecke1 - 22.11.2009

Ach ja, und anstatt den Standart editor würde ich den Phase 5 - Html/CSS Editor oder den Notepad++ - Editor für viele Programmiersprachen verwenden

RE: HTML für Anfänger - murathison - 22.11.2009

(22.11.2009, 14:18)SlimShady95 Wrote: Um Tools zu proggen brauchst du meistens PHP oder ähnliches.

Das Tut sieht von irgendeiner Seite kopiert aus.
Und du solltest eher die Tags erklären Wink

MfG Manuel

ich hab es garantiert selbst geschrieben google doch den text

(22.11.2009, 14:19)mannvomfenster Wrote: wie wärs mit einer tabelle!

befehl|Bedeutung
befehl|Bedeutung
...

mach ich am ende

(22.11.2009, 14:24)Bettdecke1 Wrote: Ich finde es auch, und du könntest vielleicht noch ein paar befehle dazu schreiben,was sie bedeuten, wie z.B. <a href="Link">Name</a>, oder <a href="linkwohinesführensollwennmanaufdasbildklickt"><img border="0" src="bildlink"></a>

kommt auch noch

(22.11.2009, 16:47)knollenmax Wrote: ach ja, wenn du das mit den Leerzeichen schon so erklärst, musst du noch dazuschreiben, dass &nbsp; ein erzwungenes Leerzeichen ist. Oder dass man mit <br> eine neue Zeile beginnt...

ich wollte nur die grundsätzlcihe handhabung mit zeichen erklären das kommt im nächsten kapitel textformatierung

(22.11.2009, 17:11)Bettdecke1 Wrote: Ach ja, und anstatt den Standart editor würde ich den Phase 5 - Html/CSS Editor oder den Notepad++ - Editor für viele Programmiersprachen verwenden

ok danke

RE: HTML für Anfänger - Bettdecke1 - 22.11.2009

dann fällt mir grad noch ein das du schreiben müsstest, wie man z.b. ä ö ü usw schreibt..

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

RE: HTML für Anfänger - murathison - 22.11.2009

ja ich wollte im nächsten abschnitt sonderzeichen behandeln also aucch &lt; für > usw. auch kaufmännische zeichen usw. ihr müsst mir das nicht sagen ich weiß es auch so. ich schriebe jetzt weiter

RE: HTML für Anfänger - Bettdecke1 - 22.11.2009

Falls du etwas nicht weißt, kannste mich fragen Wink Ich helf dir weiter