Ich habe gesehen, dass es hier in diesem Forum ein HTML-Tutorial gibt, allerdings ist dieses nicht sehr informativ und geht auch leider nicht näher auf die Codes ein. Mein Hobby ist nun schon etwas länger Webdesign und ich glaube, dass ich HTML-Tutorials erstellen kann (@ehemalig. Pokéform-User: I am WindowsNTX
)
1. Kapitel: Erkundung durch das Internet
1.0 Woraus besteht das Internet?
Eine Frage, die vllt. schon einige beschäftigt hat, ist jene, die fragt, woraus das Internet besteht. Diese Frage zu beantworten, sollte recht einfach sein. Das Internet besteht aus vielen Programmier und Auszeichnungssprachen wie php und HTML. Mit
HTML werden wir uns in meinen Tutorials beschäftigen. Erstmal ist es überhaupt wichtig zu wissen, wo
du überhaupt HTML anwenden zu können. Ich benutze dafür den
Editor. Ihr findet den Editor unter Windows XP/Vista unter Zubehör. Sollte er dort nicht sein, dann öffnet einfach die Suche (in Windows XP Startmenü -> Suche) (in Windows Vista Startmenü -> Suchbegriff in der unteren Leiste eingeben) und sucht nach
Editor. Super! Wenn ihr den Editor geöffnet habt, dann kann es los gehen.
1.1 Grundregeln des Formatierens
~Einführung~Bevor man überhaupt an eine eigene Homepage denken kann, sollte man einige HTML-Codes beherrschen. Ich werde in nächster Zeit in regelmäßigen Abständen solche Codes euch beibringen.
1~Einleitung~Fangen wir erstmal mit dem wohl einfachsten HTML-Code ist der Code für einen Zeilenumbruch. Man setzt ihn indem man ein <br> in sein HTML-Dokument schreibt.
Code:
Das ist die erste Zeile <br> und das die Zweite.
Achtung! Zeilenumbrüche lassen sich in HTML so, aber auch nur so erzeugen. Das Drücken der Enter Taste bewirkt nichts. ~Und jetzt DU!~Jetzt gebt im
Editor mal irgendeinen Text ein, der einen Zeilenumbruch enthält. Danach geht ihr auf "Datei" -> "Speichern unter" und wählt einen Speicherort aus. Dann gebt ihr dem Projekt noch einen schönen Dateinamen und fertig. Am Ende des Dateinamens muss .htm oder .html stehen! Nun öffnen wir doch mal unser kleines Projekt und schauen, ob es geklappt hat.
1.2 Grundgerüst eines HTML-Dokuments
1~Einleitung~Nachdem wir nun schon wissen, wie wir Zeilenumbrüche erstellen, sehen wir uns nun das
Grundgerüst eines HTML-Dokumentes an. Ein HTML-Dokument besteht aus einem
Head- (englisch für Kopf) und
Body(englisch für Körper)-Bereich. Ein HTML-Dokument wird mit dem <html>-Tag eröffnet. Danach kommt der <head>-Tag und zuletzt der <body>-Tag. So sollte also ein Dokument in HTML aussehen.
Code:
<html>
<head>
</head>
<body>
Hier der Text des Dokuments <br> Hier ist ein Zeilenumbruch.
</body>
</html>
Auf den Head-Tag kommen wir später nochmals zurück. Was dir sicherlich schon aufgefallen ist, dass man HTML-Tags anders schließt, als beim öffnen eines Tags. Am Ende muss immer ein / vor dem Namen des Tags sein.
Code:
...
<body>Der Bereich bis hier gehört zum Body-Bereich
</body>
~Und jetzt DU!~Jetzt fügt in eurem HTML-Dokument (dazu klickt ihr das Dokument mit einem Rechtsklick an. Und dann auf "Öffnen mit" und dann "Editor" auswählen), das ihr mit dem Editor erstellt habt (wo auch schon ein Zeilenumbruch drinne ist
), das Grundgerüst eines HTML-Dokumentes ein. Der Text darf
nicht im <head>-Tag stehen.
1.3 Fett, kursiv und unterstrichen
~Einführung~Nun besteht das Internet aber nicht nur aus Zeilenumbrüchen. Es gibt auch noch viele andere tolle Sachen, wie das schöne formatieren eines Textes.
Dazu werden euch nun die drei Grundtags des HTMLs beigebracht.
1~Einleitung~Jeder kennt sicherlich den BBCode zum
fett formatieren. Er heißt
Code:
[b]Hier der fett formatierte Text.[/b]
In HTML ist der Code fast gleich, da BBCode eine vereinfachte Version von HTML ist. Der Code sieht in HTML wie folgt aus:
Code:
<b>Hier der fett formatierte Text.</b>
~Und jetzt DU!~Jetzt fügt ihr in eurem HTML-Dokument den <b>-Tag ein. Nun sollte euer
Text fett formatiert sein .
2~Einleitung~Der nächste HTML-Tag wäre der zum
kursiv formatieren. Auch hier lässt sich der Code wieder aus dem BBCode erschließen.
Code:
kursiv formatieren mit BBCode:
[i]Hier das kursiv formatierte.[/i]
kursiv formatieren in HTML:
<i>Hier das kursiv formatierte.</i>
~Und jetzt DU!~Fügt in eurem HTML-Dokument den <i>-Tag ein. Nun sollte die Textstelle, die ihr mit dem Code markiert habt
kursiv sein.
3~Einleitung~Zu guter letzt gibt es noch den <u>-Tag. Im BBCode kennen wir bereits die abgewandelte Version (
Code:
[u]Hier der Text[/u]
). In HTML ist es genauso, nur dass die Klammern "spitz" und nicht eckig sind.
Code:
<u>Hier das Unterstrichene.</u>
~Und jetzt DU!~Fügt in eurem HTML-Dokument den <u>-Tag ein. Nun sollten die markierten Textstellen
unterstrichen sein.
1.R.1 Alles klar?
Nun habt ihr bereits die ersten HTML-Tags erlernt. Ihr könnt die Tags auch kombinieren
.
Code:
<u><b>Dieser Text ist fett und unterstrichen.</u></b>
1.R.2 Zusammenfassung
Einen Zeilenumbruch erstellen=>
Code:
Das ist die erste Zeile <br> und das die Zweite.
Das Grundgerüst eines HTML-Dokumentes=>
Code:
<html>
<head>
</head>
<body>
Hier der Text des Dokumentes.
</body>
</html>
Einen Text fett formatieren=>
Code:
<b>Hier der Text.</b>
Einen Text kursiv formatieren=>
Code:
<i>Hier der Text.</i>
Einen Text unterstreichen=>
Code:
<u>Hier der Text</u>
Anmelden
FAQ
Suche
Kalender
Karte
