![[HTML] Grundlagen 1/3](https://www.elitepvpers.com/forum/iconimages/coding-tutorials/html-grundlagen-1-3-a_ltr.gif){kind=small}
Code:
[LEFT]Ich schreibe links :D[/LEFT] [CENTER]Ich schreibe in der Mitte :DHallo 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[RIGHT]Ich schreibe rechts :D[/RIGHT]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 :
- Doctype
- Browser
- Tags
- Attribute
- Grundgerüst
- Inhaltsabschnitt
- Umbrüche
- Die Zeichen und Bedeutungen
- Ausrichtungen
- Überschriften
- Zeichenformate
- Links
- Downloads
- Das <img> Tag
- Grafik als Hintergrund
Browser Zunächst wird ein normaler Webbrowser Benötigt! Hier habe ich noch ein paar aufgelistet :HTML Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Naja, fangen wir mal mit dem richtigen TuT an
- Internet Explorer (
)
- Seamonkey (
- Firefox (
- Netscape (
- Opera (
: 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 :
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 :
- <html>
- <hTmL>
- <HtMl>
- < html >
- <html >
- < html>
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 :
- <b>Hallo</b> = Hallo
- <i>Hallo</i> = Hallo
- <title>Hallo</title> = Hallo steht oben in der Zeile
Für Attribute gilt :HTML Code:<tagname attribut1="Wert1" attribute2="Wert2" ...>Hier steht irgendwas xD</tagname>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 :
- 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
Es gibt auch Das Attribute size! Das wird für den Flächen Raum genutzt! Also Programmiert das in euren Editor :HTML Code:<hr width="100" > <hr width="200" > <hr width="300" >Grundgerüst Das Grundgerüst. Das wichtigste des HTML Codens, da die Webseite sonst schief wirdHTML Code:<hr size="1" > <hr size="5" > <hr size="10" >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:<!-- DOKUMENTENTYP --> <html> <head> <!-- Kopfabschnitt --> </head> <body> <!-- Inhaltsabschnitt --> </body> </htmL>Umbrüche Es gibt 2 Arten von Umbrüchen :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>Der Große Umbruch Ist das ein neuer Absatz kommt :
- Großer Umbruch <p>
- Kleiner Umbruch <br>
Das sieht dann ungefähr so aus:HTML Code:LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL<p> LOLLOLLOLLOLLOLLOLLOLLOLLOLLOLDer Kleine Umbruch besteht eigentlich nur aus einer neuen Zeile :Code:LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL LOLLOLLOLLOLLOLLOLLOLLOLLOLLOLDas sieht ungefähr so aus :HTML Code:LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL<br>LOLLOLLOLLOLLOLLOLLOLLOLLOLLOLDie 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 ZeichenCode:LOLLOLLOLLOLLOLLOLLOLLOLLOLLOL LOLLOLLOLLOLLOLLOLLOLLOLLOLLOLAusrichtungen Es gibt 3 verschiedene Ausrichtungen :
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 :
- Links
- Rechts
- Mitte
Das sieht dann so aus :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>
Überschriften
Es gibt genau 6 verschiedene Überschriften :
Das wären :
HTML 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>
:Code:
[SIZE="7"]Überschrift 1[/SIZE] [SIZE="6"]Überschrift 2[/SIZE] [SIZE="5"]Überschrift 3[/SIZE] [SIZE="4"]Überschrift 4[/SIZE] [SIZE="3"]Überschrift 5[/SIZE] [SIZE="2"]Überschrift 6[/SIZE]
Auf zum nächsten Kapitel
Zeichenformate
Dieses Kapitel ist sehr Kurz, da ich hier nur eine Liste mit Zeichenformaten angebe, die ihr bei Texten verwenden könnt :
- <b> - Fett
- <big> - Groß
- <blink> - Text Blinkt (nur bei Netscape!!!)
- <i> - Kursiv
- <small> - Kleiner text
- <strike> - Durchgestrichen
- <sub> - Höher
- <sup> - Tiefer
- <tt> - DIcktengleich
- <u> - Unterstrichen
Links
Ein Link hat folgenden Aufbau :
HTML Code:
<a href="http://www.elitepvpers.com/forum/epvp-coders-tutorials/epvp-coders-tutorials/...">Linktext</a>
- Das <a>-Tag umfasst wie gesagt den Link
- Das href- Attribute gibt das Linkziel an. Wenn # steht wird die Seite aktualisiert
- Linktext gibt den Text an, der als Link fungieren soll
BSP. :
HTML Code:
<a href="http://www.google.de/">Google.de</a>
Code:
[URL="http://google.de"]Google.de[/URL]
HTML Code:
<a href="info.html">Klcken um zur Info zu gelangen </a>
Wenn wir jetzt eine Datei auf dem PC haben, und andere sollen diese laden können, müssen wir in unseren Link text nun statt einer Seite die Datei eingeben!
Ist die Datei im gleichen Ordner brauchen wir <a href="Datei.zip">Downloaden</a>
Ist sie aber in einem Unterordner, brauchen wir <a href="/Unterordner/Datei.zip">Downloaden</a>
Das IMG-Tag
Das IMG Tag ist für die Bilder zuständig!
Für das IMG- Tag wird das Attribute src benötigt, das den Link oder Pfad auf Das Bild zuweist!
Ist das Bild im Ordner dann :
HTML Code:
<img src="Bild.jpg" />
HTML Code:
<img src="http://www.earpaper.de/fileadmin/scripts_administration/uploads/earpaper_referenzen/img/bild_podcast_1179282257.jpg" />
Wie sie schon vorhin im Tutorial gelesen haben, können sie mit width und hight das Bild Strecken!
Bild als Hintergrund
Um ein Bild als Background zu platzieren, braucht man wieder das gute alte <body> Tag!
Der Code hierbei ist :
HTML Code:
<body background="http://www.earpaper.de/fileadmin/scripts_administration/uploads/earpaper_referenzen/img/bild_podcast_1179282257.jpg">
Das war mein erstes TuT von 3 von den HTML Grundkenntnissen! Was wir nächstes mal lernen :
- Liste erstellen
- Symbole ändern
- Die Fehlersuche
- Tabellenaufbau
- Textfeld
- Passwortfeld
- Button
- Uploads
- Pulldown Menüs
- Radiobuttons
- Checkboxen
- Mehrzeilige Textfelder
- Unsichtbare Felder
- Versenden- Button
Das wars von mir
Credits Jusikid 100%
UPDATE!!!
Die 2/3 ist draussen klick mich ->
[/CENTER]
