HTML Tutorial by Cpt.Cock

07/15/2013 16:16 Cpt.Cock#1
Hey und herzlich wilkommen zu diesem reinem HTML Tutorial,

ich habe festgestellt, dass es in diesem Forum noch kein richtiges HTML Tutorial zu geben scheint (klärt mich bitte auf wenn ich mich irre). Also beschloss ich, selber eines zu schreiben. Das Tutorial wird in mehrere Abschnitte eingeteilt sein, damit man sich besser zurecht findet. Außerdem werde ich so viele Bilder und Erklärungen zur Verfügung stellen wie nur geht. Aber jetzt soll es erstmal mit dem 1. Part losgehen:

Grundlagen :

Zuerst benötigen wir einen guten Editor, der euch mit Farbmarkierungen hilft, den Durchblick zu behalten, ich empfehle euch hier [Only registered and activated users can see links. Click Here To Register...], ihr könnt allerdings auch andere benutzen. Wenn ihr dann euren Editor gestartet habt (in meinem Fall Notepad++), sollte es ungefähr so aussehen :

[Only registered and activated users can see links. Click Here To Register...]

Jetzt wollen wir als erstes mit unserem Editor ein HTML Dokument erstellen, dies tuen wir in dem wir auf "Speichern unter" klicken, und das Dokument, unter einem beliebigen Namen speichern (es empfiehlt sich index). Wichtig ist nur, dass ihr als Dateiendung .html drin habt. Ungefähr so:

[Only registered and activated users can see links. Click Here To Register...]

Nun kommen wir zum eigentlichen HTML-Code...

Ein HTML-Code ist immer in ein bestimmtes Grundgerüst eingeteilt. Das sieht so aus:
PHP Code:
<html>
<head>

</head>
<body>

</body>
</html> 
Ihr könnt sehen, dass alles in sogenannte "Tags" eingeteilt ist. Das ist fast ausnahmslos bei jedem HTML Befehl so.

Tags werden IMMER so geöffnet :
PHP Code:
<beispiel> 
und so geschlossen :
PHP Code:
</beispiel> 
Der Unterschied besteht in dem "/" vor dem Tag. Der Tag ohne "/" öffnet einen Tag und der mit "/" schließt ihn wieder. Alles was zwischen der Öffnung und der Schließung des Tags steht, wird in ihn mit einbezogen.

Nun zur Erklärung des Grundgerüsts:
  • Der HTML Tag gibt einfach nur an, dass es sich um ein HTML Dokument handelt.
  • Im HEAD Bereich findet man hauptsächlich Dinge, dir für die Funktionalität der Seite zuständig sind. Der HEAD macht also wie beim Menschen die "Denk-Arbeit".
  • Der BODY Bereich ist der Körperbereich, in ihm finden sich Dinge wie Bilder, Links oder Texte zur Seite.
So sieht das ganze dann im Editor aus :

[Only registered and activated users can see links. Click Here To Register...]


Nun wollen wir unseren ersten Tag angeben, und zwar im HEAD Bereich, den [Only registered and activated users can see links. Click Here To Register...] Tag.
Dieser gibt den Titel der Seite an, dass ist der Text der nachher bei euch oben im Tab steht. Das ganze sieht dann so aus:
PHP Code:
<title>Meine erste Website</title> 
Auch hier könnt ihr wieder das System mit den Tags erkennen, alles was zwischen den beiden Tags steht, ist der tatsächliche Titel.

Insgesamt sollte euer Dokument bisher so aussehen:

[Only registered and activated users can see links. Click Here To Register...]


Ich hoffe ihr habt bis her alles verstanden, ich würde mich über ein Thnaks freuen wenn es euch gefallen hat, im nächsten Part geht es um die ersten Texte :)

Bis dann

Der Captain :cool:

sry falsches forum, pls close
07/15/2013 17:18 MrPuschel#2
Ich unterstelle dir mal das du es ehrlich meinst mit dem Tutorial und keine Thanks abgreifen möchtest ;)

Selbst für "Grundlagen" ist das Tutorial sehr dürftig und sogar in diesem Zustand enthält es Fehler. Ich denke es wäre gut, den Post wieder heraus zu nehmen und daran zu arbeiten bis du selbst damit zufrieden bist. Wenn du in diesem Zustand damit zufrieden bist würde ich es ganz lassen.

Und nein, das "später mehr dazu kommt" ist keine gute Argumentation ;)
07/16/2013 00:45 マルコ#3
Nja, das gehört in die Tutorial Sektion (ja, sowas gibts tatsächlich).
Abgesehen von den endlos vielen Seiten, die wirklich professionelle Tutorials (an denen seit _Jahren_ gearbeitet wurde) einstellen, gibt es auch hier im Forum zick Tutorials.
Mein Tipp: Wenn du dich also wirklich vom Rest absetzen willst, dann erklär lieber eine Problemstellung oder neue Möglichkeiten von neuen Technologien, wie HTML5, als nochmal den ganzen Käse hier aufzurollen. Zum Beispiel ein Tutorial zum Clearfix, oder was das Boilerplate so alles macht, oder... Und bearbeite den Thread dann auch lieber erstmal selbst in nem Editor und schlaf dann nochmal drüber. Damit vermeidest du viele Fehler und Lücken.
07/17/2013 14:34 NEXON | Technologies#4
Das ist kein Tutorial das ist für ein Richtiges Tutorial SEHR wenig!
07/17/2013 21:04 phlinther1#5
Naja viel erklärst du ja nicht... mit dem kann man eigentlich absolut nichts anfange. Wenn, dann muss da noch VIEEEEELLL mehr kommen.
07/18/2013 09:13 SwarN#6
hahahaha,
das Tutorial soll doch nur'n Joke sein, ich Wette er hat auch ein YouTube Video gemacht:

Als Fortsetzung zeigt er uns dann Überschriften mit "<H1>" !!! XDDDD

Selten so früh am morgen sooooo gelacht, dass erinnert mich echt an alte Zeiten ;P
07/18/2013 15:01 Jonas_93#7
als komplettes Tutorial würde ich es auch nicht bezeichnen, aber das was gezeigt wird, wird gut und verständlich erklärt.
Für den ein oder anderen Einsteiger vielleicht als "Einstiegsschubser" gar nicht mal so schlecht.
Bau das ganze doch aus! Für den anfang fnde ich es wirklich nicht schlecht.
07/18/2013 22:09 Cpt.Cock#8
Leute, das war ein falscher Post von mir, ich bitte hiermit darum den Thread zu closen. Das Tutorial hier beinhaltet nochnichtmal ein 8tel des gesamten. Tut mir leid wenn ich für Unruhe gesorgt habe...

Aber ich muss schon sagen, so wie das TUT hier aussieht, könnte es echt ne Verarsche sein xD
07/19/2013 19:26 xxfabbelxx#9
closed