HTML Tutorial 1 - Anfänge und Einleitung

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 in sein HTML-Dokument schreibt.

Code:: Das ist die erste Zeile 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 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:: Hier der fett formatierte Text.

~Und jetzt DU!~
Jetzt fügt ihr in eurem HTML-Dokument den -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: Hier das kursiv formatierte.

~Und jetzt DU!~
Fügt in eurem HTML-Dokument den -Tag ein. Nun sollte die Textstelle, die ihr mit dem Code markiert habt kursiv sein.
3
~Einleitung~
Zu guter letzt gibt es noch den -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:: Hier das Unterstrichene.

~Und jetzt DU!~
Fügt in eurem HTML-Dokument den -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:: Dieser Text ist fett und unterstrichen.

1.R.2 Zusammenfassung

Einen Zeilenumbruch erstellen
=>

Code:: Das ist die erste Zeile 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:: Hier der Text.

Einen Text kursiv formatieren
=>

Code:: Hier der Text.

Einen Text unterstreichen
=>

Code:: Hier der Text

kann ich da noch was hinzu fügen?

MasterLugia hat geschrieben:kann ich da noch was hinzu fügen?

unerwünscht, da ich das Tutorial schreiben möchte. Zudem ist das ja nur Teil 1

ich versteh da echt nur bahnhof. außerdem gibts da schon den thread und den find ich um einiges besser.

Mimi123 hat geschrieben:ich versteh da echt nur bahnhof. außerdem gibts da schon den thread und den find ich um einiges besser.

Sorry, ich habe ganz vergessen das ausführliche Guide schlecht sind

Mimi123 hat geschrieben:ich versteh endlich mal alles. außerdem gibts da schon den thread und den find ich um einiges schlechter.

Ich habs mal verbessert. :>

Aber mal ehrlich, das hier ist ein sehr guter Guide.
Er erklärt die Dinge genau und vor allem macht er einem die Hintergründe begrifflich.
Was den von dir verlinkten Guide betrifft ... den findest du gut?
Du verstehst das? O_O
Wenn ja, herzlichen Glückwunsch.

HTML Tutorial 1 - Anfänge und Einleitung

HTML Tutorial 1 - Anfänge und Einleitung

Re: HTML Tutorial 1 - Anfänge und Einleitung

Re: HTML Tutorial 1 - Anfänge und Einleitung

Re: HTML Tutorial 1 - Anfänge und Einleitung

Re: HTML Tutorial 1 - Anfänge und Einleitung

Re: HTML Tutorial 1 - Anfänge und Einleitung