Dieses Tutorial ist auschließlich für finalbrawl.com geschrieben und darf nicht ohne meine Genehmigung oder entsprechendes Hinweisen darauf, dass es mein Tutorial ist, auf anderen Webseiten verbreitet werden. Finde ich es unerlaubt kopiert in einem anderen Forum oder sonstwo, werde ich den entsprechenden Administrator kontaktieren.So falls es jemanden interessiert, dann schreib ich mal ein HTML Tut für Anfänger, die wenig bis gar keinen Plan haben, aber gerne was können würden. Mit HTML und anderen Programmiersprachen zu arbeiten kann Spaß wenn mans kann, weil man einfach die geilsten random Sachen machen kann.
So was ihr wissen müsst:
- Was ist HTML
- Aufbau eines HTML Dokuments
- Kleiner Test eures Dokuments
- Textformatierungen
- Grafiken
- Links
- Ausrichtung von Objekten
- Farben
- Hintergrund
- Tabellen
1. Was ist HTML:Bei HTML handelt es sich um die Hypertext Markup Language. Sie ist sehr einfach zu lernen und zusammen mit CSS für das Design einer Webseite zuständig. Für die Funktionalität einer Webseite sorgen andere Sprachen. Wer eine Webseite selbst erstellen will muss mindestens HTML, CSS und PHP beherrschen. Im Idealfall noch (My)SQL und Javascript, zusätzlich manchmal auch noch Ajax und was es noch so gibt
2. Aufbau eines HTML Dokuments:Jedes HTML Dokument wird von dem
html-Tag eingeleitet und wird auch damit geschlossen. Dazwischen stehen verschiedenste Tags für alles mögliche. So steht z.B zwischen dem
body-Tag ein Text der dann auf der Webseite so angezeigt wird.
Ein kleines HTML Dokument für Anfänger wäre:
- Code:
-
<html>
<body>
Hier ein kleiner Testsatz.
</body>
</html>
Das
html-Tag zeigt dem Browser, dass es sich um ein HTML-Dokument handelt.
body leitet einen sichtbaren Bereich ein.
Jedes Tag das ihr beginnt, muss auch geschlossen werden. Es gibt zwar so genannte
Standalone-Tags, aber die kommen selten vor. Das Tag schließt ihr indem ihr nochmal das Angangstag schreibt, aber zwischen dem Kleiner-als-Zeichen und dem Befehl einen Schrägstrich macht.
Auf jeder Webseite ist nur das Sichtbar, was zwischen den Tags steht.
3. Test eures Dokuments:Um ohne großartiges Hochladen auf einen Webserver eure Seite zu testen, nehmt den Editor der Standardmäßig auf jedem PC ist. Ihr findet ihn unter Start > Alle Programme > Zubehör. Da fügt ihr am besten ein, was ich oben hingeschrieben habe. Abspeichern müsst ihr das ganze als Dateiname.htm oder Dateiname.html, damit euer PC erkennt, dass es sich hierbei um ein HTML-Dokument handelt. Speichert eure Datei auf dem Desktop ab, damit ihr sie einfach wiederfindet.
Sucht auf dem Desktop das Dokument und öffnet es mit dem Internet-Explorer (nicht empfohlen), Opera, FireFox oder anderen Browsern. Es sollte eine komplett weiße Seite angezeigt werden, wo oben links der Satz: "Hier ein kleiner Testsatz" steht.
4. Textformatierungen:Einen Text fett schreiben: - Code:
-
<b>Text</b>
Das b steht für "Bold", also quasi "fett".
Einen Text kursiv schreiben: - Code:
-
<i>Text</i>
Das i steht für "italic" was nicht "italienisch", sondern "kursiv" bedeutet.
Einen Text unterstreichen: - Code:
-
<u>Text</u>
Das u steht für "underlined", auf Deutsch also "unterstrichen".
Einen Zeilenumbruch erzeugen: - Code:
-
<br>
Hier seht ihr eines der wenigen Standalone-Tags.
br könnte man als sowas wie "Break" deuten, was "Bruch" bedeutet. In dem Falle würde es zu seiner Wirkung passen.
Die b-, i-, und u-Tags können in jeder Kombination auftreten.
- Code:
-
<b><i>Text</i></b>
Das bewirkt also einen fetten, kursiven Text.
5. GrafikenEine Webseite ohne Grafiken ist wie Schokolade ohne Kakao: Einfach nur weiß.
Ein normales Bild bindet man über folgenden Befehl ein:
- Code:
-
<img src="Grafikadresse">
Das ist die Standard Variante.
img steht für das englische Wort "image" und bedeutet "Bild".
src bedeutet "source" was englisch für "Quelle" ist. Die Grafikadresse, ist der Link, der zum Bild führt.
Auch der Befehl
img ist ein Standalone-Tag.
Nun könnt ihr euer eingebundenes Bild aber noch weiter spezifizieren, indem ihr dem
img Angaben wie z.B Bildbreite oder Bildhöhe beifügt. Ein richtiger Befehl sieht also so aus:
- Code:
-
<img src="Grafikadresse" width="200" height="200" border="1" alt="">
width ist englisch und bedeutet "Breite",
height bedeutet "Höhe".
border ist englisch für "Rand" und
alt steht für "alternative" was so viel wie "alternativ" bedeutet. Zwischen den Anführungszeichen hinter dem
alt steht im Grunde nur ein Text der beim Neuladen der Seite angezeigt wird, während das Bild noch am Laden ist.
6. LinksAuch ohne Links ist eine Webseite nichts. Sie muss ja intern zu ihren verschiedenen Templates linken.
- Code:
-
<a href="http://www.finalbrawl.com">http://www.finalbrawl.com</a>
Würdet ihr da drauf klicken, würdet ihr zu diesem Forum hier geleitet werden. Ihr könnt aber auch ein Wort mit einem Link unterlegen z.B so:
- Code:
-
<a href="http://www.finalbrawl.com">Test</a>
Würdet ihr also auf "Test" klicken, würdet ihr ebenfalls zum Final Brawl Forum geleitet, denn im Tag ist ja festgelegt, dass egal was zwischen dem Tag steht, ihr immer zu finalbrawl.com gelangt wenn ihr da drauf klickt.
Doch nun was die Bestandteile bedeuten:
a steht für "anchor", dem englischen Wort für "Anker".
href steht für "Hypertext Reference".
7. Ausrichtung von ObjektenAlle Texte und Grafiken, müssen ja irgendwo stehen und deren Ort kann man unter anderem durch die Ausrichtung bestimmen.
Rechtsbund: - Code:
-
<div align="right">Text oder Bild</div>
Linksbund: - Code:
-
<div align="left">Text oder Bild</div>
Zentrieren: - Code:
-
<div align="center">Text oder Bild</div>
Blocksatz: - Code:
-
<div align="justify">Text oder Bild</div>
div ist ein vielseitiges Tag und kann so gut wie überall vorkommen. Es hat keine feste Bedeutung.
align bedeutet "Ausrichtung".
right,
left,
center und
justify stehen jeweils für "rechts", "links", "zentriert" und "Blocksatz".
8. FarbenFarben bestehen aus Hex Codes. Jeder Hex Code besteht aus 6 Stellen. Schwarz ist 000000, Weiß ffffff. Der Hex Code ist so geteilt:
ff ff ff.
Die ersten beiden Stellen geben den also roten Anteil der Farbe an, die zweiten 2 Stellen den grünen, die letzten beiden den blauen. Es gibt von 00 über 11, 22 usw. bis 99, danach gehts mit aa weiter, bis ff. Und so müsst ihr eben eure Farben mischen. Z.B 99aaff. Vor dem Hex Code der Farbe muss stets ein # stehen.
Hier eine Farbentabelle.
Doch wie fäbrt ihr damit eure Texte?
- Code:
-
<span style="color:#00ff00;">Text</span>
span leitet hier also die Formatierung ein.
style ist sehr vielseitig und dahinter stehen alle Formatierungsbefehle.
color sagt eben aus, dass die Farbe geändert wird, dahinter eben der Hex Code der Farbe.
- Code:
-
<div style="color:#00ff00;">Text</div>
Das ist ebenfalls möglich.
div enthält allerdings einen automatischen Zeilenumbruch, was
span eben nicht tut. Wer also keinen Zeilenumbruch will benutzt hierfür
span.
9. Hintergrund der WebseiteEine Webseite mit weißem Hintergrund geht natürlich gar nicht. Das muss geändert werden.
- Code:
-
<body style="background-color:#0000ff>
Auch das hier ist ein Standalone-Tag. Zu erklären gibts denk ich nicht mehr viel.
background-color gibt eben an, dass ihr die Hintergrundfarbe verändern wollt.
- Code:
-
<body style="background-image:url(Grafikadresse);">
Dieser Befehl ändert das Hintergrundbild, zu erkennen an
background-image. Danach kommt
url was eben angibt, dass ihr eine url angeben wollt, in Klammern dahinter steht die Grafikadresse.
10. TabellenEine normale Tabelle: - Code:
-
<table border="0">
<tr>
<td>1.</td>
<td>2.</td>
</tr>
</table>
table leitet die Tabelle ein,
border gibt die Randbreite an. Mit
tr definiert ihr eine Zeile, mit
td die jeweiligen Spalten.
So das ist das HTML Basics Tutorial. Wie ihr seht ist HTML wirklich einfach, und es zu lernen kann eig. nicht verkehrt. Für weiterführende Elemente empfehle ich Tuorials wie das von selfthtml oder von Michael Jendryschik, da das hier den Rahmen sprengen würde.
Thema: HTML Tut für Anfänger 
2010-07-05, 09:44
Naja bei Gelegenheit kann ich vielleicht mal JS machen. 
