Hallo
ElitePvPers
Da ich mit der SuFu (suche HTML Grundlagen)nur ein Tut, auch sehr unausfürlich, gefunden habe, möchte ich es hier noch mal
ausführlicher erklären!
Inhalt- Doctype
- Browser
- Tags
- Attribute
- Grundgerüst
- Inhaltsabschnitt
- Umbrüche
- Die Zeichen und Bedeutungen
- Ausrichtungen
- Überschriften
- Zeichenformate
- Links
- Downloads
- Das <img> Tag
- Grafik als Hintergrund
Doctype
Der
Doctype eines HTML- Dokuments gibt seinen Typ an, denn es gibt mehrere Versionen von HTML und auch XHTML (
Nicht in diesem TuT). In der Regel interpretieren alle Browser auch Dokumente ohne Doctype, allerdings schalten einigedavon aus Sicherheitsgründen in einen funktional etwas "dürren"
Kompatibilitätsmodus zurück. Deswegen solltest du den Doctype immer verwenden :
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Browser
Zunächst wird ein normaler Webbrowser Benötigt!
Hier habe ich noch ein paar aufgelistet :
- Internet Explorer (
) - Seamonkey ()
- Firefox ()
- Netscape ()
- Opera ()
Naja, fangen wir mal mit dem richtigen TuT an
:
Tags
Ein
Tag (englisch ausgesprochen, also mit
ä) wird in HTML durch spitze Klammern erstellt. Ein Beispiel ist <html> . Die Groß- und Kleinschreibung, sowie Leerzeichen sind unwichtig, also wirken folgende Formen :
- <html>
- <hTmL>
- <HtMl>
- < html >
- <html >
- < html>
Beispielsweise beginnt eine HTML Seite -wenn man den Doctype weglässt- mit dem
<html>-Tag. Darauf folgt der eigentliche Inhalt der Seite und am Ende kommt das End Tag,
</html>. Das End-Tag heißt genauso viel wie das Start-Tag, nur wird es (nach der öffnenden Klammer) durch ein Schrägstrich (
//) eingeleitet! Das ist ziemlich wichtig! Aber auch hier ist die Groß und klein Schribung egal!
Welche Auswirkungen die Tags auf die Inhalte dazwischen haben, ist von HTML-Tag zu HTML-Tag unterschiedlich!
Hier drei Beispiele :
- <b>Hallo</b> = Hallo
- <i>Hallo</i> = Hallo
- <title>Hallo</title> = Hallo steht oben in der Zeile
Attribute
Ein Tag steht nicht unbedingt allein da, es kann auch durch Angaben weiterer Parameter näher bestimmt werden. Diesen Parameter nennt man
Attrinute. Diese werden in folgendem Muster eingefügt :
HTML Code:
<tagname attribut1="Wert1" attribute2="Wert2" ...>Hier steht irgendwas xD</tagname>
Für Attribute gilt :
- Groß- und Kleinschreibung wird ignoriert
- Leerzeichen und Zeilen wechsel wird ignoriert
- Die Reihenfolge der Attribute ist egal
- Die Werte der einzelnen Attribute sollten in Anführungszeichen stehen. Zwar akzeptieren es fast alle Browser, wenn die Anführungszeichen fehlen, aber eben nur fast alle. Denke daran : Sauberes Programmieren sorgt für weniger Überraschungen!
- Du musst Attribute nur beim Start-Tag angeben, nicht mehr im End-Tag
Nun da du die Regeln kennst, werden wir nun noch ein Beispiel machen
In diesem werden wir das Attribute
width benutzen. Das ist das Attribute für die Länge von Links nach rechts. Programmiert das in den Editor :
HTML Code:
<hr width="100" >
<hr width="200" >
<hr width="300" >
Es gibt auch Das Attribute
size! Das wird für den Flächen Raum genutzt!
Also Programmiert das in euren Editor :
HTML Code:
<hr size="1" >
<hr size="5" >
<hr size="10" >
Grundgerüst
Das Grundgerüst.
Das wichtigste des HTML Codens, da die Webseite sonst schief wird
Also daraus schliessen wir, das eine Webseite immer folgenden Aufbau hat :
HTML Code:
<!-- DOKUMENTENTYP -->
<html>
<head>
<!-- Kopfabschnitt -->
</head>
<body>
<!-- Inhaltsabschnitt -->
</body>
</htmL>
Inhaltsabschnitt
Der Inhalts abschnitt wird durch <body> und </body> eingegrenzt. Alles, was wir dort angeben, wird im Browserfenster Angegeben. Die uns bereits bekannten Tags <b>, <i> und <hr> werden also alle im Inhaltsabschnitt verwendet,im Kopfabschnitt haben sie keinen Sinn!
Hier auch ein Beispiel Code :
HTML Code:
<html>
<head>
<title>Das iast mein TuT xD</title>
</head>
<body>
Hallo
</hr>
<b>Hallo!</b>
<hr noshade="noshade" />
<i>Hallo!</i>
<hr width="50%" size="5" />
<b><i>Hallo!</i></b>
</body>
</html>
Umbrüche
Es gibt 2 Arten von Umbrüchen :
- Großer Umbruch <p>
- Kleiner Umbruch <br>
Der Große Umbruch Ist das ein neuer Absatz kommt :
HTML Code:
LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL<p>
LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL
Das sieht dann ungefähr so aus:
Code:
LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL
LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL
Der Kleine Umbruch besteht eigentlich nur aus einer neuen Zeile :
HTML Code:
LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL<br>LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL
Das sieht ungefähr so aus :
Code:
LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL
LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL
Die Umbrüche sind eigentlich Zur verschönerung da, Da die Macher der Webseite vielleicht nicht wollen, das ein Satz neben einem anderen, in einer Zeile steht!
Die Zeichen und Bedeutungen
Es gibt viele Zeichen in UTF8 oder Unicode, die es in Html nicht gibt, deswegen hab ich hier einen Link zu den Zeichen
Und nochmal ein Bild :
Ausrichtungen
Es gibt 3 verschiedene Ausrichtungen :
- Links
- Rechts
- Mitte
Wenn man Links schreiben möchte, braucht man eigentlich gar kein Tag, da unser Editor schon für uns macht! Dennoch gibt es einen Code :
HTML Code:
<p align="left">Ich schreibe links :D
</p>
<p align="Center"> Ich schreibe in der Mitte :D
</p>
<p align="right">Ich schreibe rechts :D
</p>
Das sieht dann so aus :
![[HTML] Grundlagen 1/3](https://www.elitepvpers.com/forum/iconimages/coding-tutorials/html-grundlagen-1-3-a_ltr.gif){kind=small}
