HTML Tutorial by Cpt.Cock

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...]

Textformatierung :

Nun wird es langsam ernst. Wir wollen unsere Seite in dieser Episode mit Texten aller Art f�llen. Daf�r gibt uns HTML etliche verschiedene M�glichkeiten an die Hand. Die wichtigsten m�chte ich euch nun vorstellen.

Einen ganz normalen Text k�nnt ihr einfach in den BODY Bereich schreiben, also einfach zwischen die beiden BODY-Tags euren Text, ungef�hr so:

PHP Code:


			
<body>



Hallo ich bin ein normaler Text



</body>

Das reicht uns aber nat�rlich nicht. Als erstes wollen wir eine �berschrift machen, dass funktioniert mit dem Tag "<h1>", "<h2>", "<h3>", "<h4>"..., die Zahl hinter dem "h" steht f�r die Gr��e der �berschrift, dabei ist 1 die gr��te und 6 die kleinste M�glichkeit. Ein Beispiel?

PHP Code:


			
<h1>Ich bin die gr��te �berschrift</h1>

Jetzt stellen wir aber fest, dass die �berschrift noch in die Mitte ger�ckt werden muss, was mit dem Tag "<center>" funktioniert. Au�erdem soll die �berschrift fett sein, was wir mit dem Tag "<b>" erledigen. Unsere �berschrift sieht jetzt so aus :

PHP Code:


			
<h1><center><b>Ich bin die gr��te �berschrift, in der Mitte und Fett</b></center></h1>

Uns gef�llt die �berschrift aber immer noch nicht so ganz, sie soll eine andere Farbe haben, dass funktioniert �ber den Tag "<font>" der auch noch ein paar andere Funktionen besitzt. Wir wollen, dass unsere �berschrift rot ist, also sieht der Code so aus :

PHP Code:


			
<h1><center><b><font color = "red">Ich bin die gr��te �berschrift, in der Mitte, fett und rot</font><b></center></h1>

Wie ihr sehen k�nnt m�ssen wir bei dem "<font>" Tag noch ein paar Angaben machen. N�hmlich dass wir die Farbe ver�ndern m�chten, und das in rot.

Wir wollen aber auch noch eine andere Schriftart verwenden, daf�r machen wir noch einen weiteren "<font>" Tag auf, der jetzt aber die Schriftart ver�ndert :

PHP Code:


			
<h1><center><b><font color = "red"><font face = "Comic Sans MS">Ich bin die gr��te �berschrift, in der Mitte, fett, rot und im Schriftstil Comic Sans MS</font></font><b></center></h1>

Wenn wir uns nun die Seite anschauen stellen wir fest, dass alle ��s, ��s, usw. als ziehmlich kr�ppelige Zeichen dargestellt werden. Dies beheben wir so :

Alle ��s duch � erstzen

Alle ��s duch � erstzen

Alle �s duch � erstzen

Alle ߴs duch ß erstzen

Wenn ihr einen Buchstaben gro� schreiben wollt mach ihr einfach anstatt � , Ö.

Jetzt noch kurz ein Beispiel wie das alles im Editor aussehen k�nnte :

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

Bilder :

Klar muss eine Seite m�glichst informativ sein, aber wenn man einfach nur einen ewig langen Text vorgesetzt bekommt, mag man den dann doch nicht wirklich lesen. Also brauchen wir Bilder in unserer Seite um diese ein wenig auf zu lockern. Daf�r gibt es in HTML einen eigenen Tag, er hei�t "<img>" und ist ein Ausnahme Tag, da er nicht mit einem </img>" wieder geschlossen werden muss. Der Code an sich sieht so aus (zur Erkl�rung dann sp�ter) :

PHP Code:


			
<img src = "pic/lol.png" alt = "LOL" height = "500" width = "500">

Mit "src = " geben wir die Quelle an, in diesem Fall ein Bild in einem Unterordner. Wenn sich euer Bild ganz woanders auf eurem PC versteckt, m�sst ihr den gesamten Pfad angeben. Ihr k�nnt alternativ auch eine URL als Source benutzen. "alt = " legt fest, was an der Position des Bildes stehen soll, falls dieses nicht verf�gbar ist (alt kurz f�r alternative). Mit den Befehlen height und width gebt ihr die H�he und Breite des Bildes in Pixeln an.

So sieht das ganze im Editor aus:

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

Design :

Nun kennen wir die Text- und Bildm�glichkeiten, die es in HTML gibt. Doch was nutzt uns das alles, wenn es kaum strukturiert und designed ist? Richtig, n�hmlich fast nix. Um das zu �ndern m�ssen wir uns mit einer weiteren Programmiersprache vertraut machen : CSS. Diese wir verwendet um HTML Dokumente zu designen. Ich m�chte euch heute zeigen wie das funktioniert.

Es gibt zwar verschiedene M�glichkeiten (bei Bedarf einfach googlen), aber es empfiehlt sich doch die Methode ein externes CSS Dokument anzulegen und im HEAD Bereich des HTML Dokuments darauf zu verweisen. Das geht so :

PHP Code:


			
<link rel="stylesheet" type="text/css" href="design.css" />

Das mag jetzt kompliziert aussehen, wichtig ist allerdings nur der Tag "href = ", denn das ist der Pfad zu eurem CSS Dokument. Beim Pfad gelten die selben Regeln wie bei "<img>". In diesem Falle, liegt das CSS Dokument im selben Ordner wie das HTML Dokument und hei�t "design.css". Wie ihr in CSS programmiert zeige ich euch jetzt.

Wir haben z.B. eine �berschrift mit der Gr��e "h2". Um uns den Code im HTML Dokument zu ersparen, k�nnen wir jetzt auch einfach in CSS schreiben.

PHP Code:


			
h2 {

  color: red;

}

CSS ist ein wenig anders aufgebaut als HTML, daher hier kurz eine Erkl�rung. Alles designbare in eurem HTML Dokument hat einen Namen, bei einer �berschrift wie "h2" ist es einfach "h2". Also schreiben wir das an den Beginn. Nun �ffnen wir mit den geschweiften Klammern den Bereich in dem wir arbeiten wollen. Hinein schreiben wir in unserem Falle "color : red;". In CSS benutzt man nicht so wie in HTML das "=" sondern den ":". Au�erdem m�sst ihr jeden Befehl mit einem Apostroph wieder beenden.

So, wir wollen auch die Zentrierung, und die Schriftart in CSS festlegen. Also :

PHP Code:


			
h2 {

  color: red;

  text-align: center;

  font-family: Comic Sans MS;

}

Nun ist unsere �berschrift rot, mittig zentriert und ist im Schriftstil Comic Sans MS geschrieben. Dass ist zwar im Grunde das selbe wie im HTML Dokument, allerdings um ein wesentliches einfacher.

Ich hoffe ihr habt bis her alles verstanden, ich w�rde mich �ber ein Thanks freuen wenn es euch gefallen hat.

Bis dann

Der Captain :cool:

Ich w�rde dir empfehlen statt � etc. oben einfach folgendes einzuf�gen:

HTML Code:

<!--?xml version="1.0" encoding="UTF-8"?-->

Dann hast du sp�ter auch mit Javascript Funktionen kein Problem, denn sollte man irgendwann mal vor haben einen Umlaut auszugeben, dann w�rde er durch Javascript als Text angezeigt werden ( � / � / ...)

Quote:

Originally Posted by Croco™

Ich denke es ist kontraproduktiv mit Notepad++ an zu fangen.
Es gibt zahlreiche gute Editoren die einige Funktionen wie das einbinden von Dateien, Farbcodes, Tag schliesung und vieles mehr beinhalten.

Nein, sich die Dinge von Anfang an selber einzupr�gen ist wesentlich sinnvoller. So lernst du auch eher eigene Fehler zu erkennen o.�. Wenn du alles ein Programm machen l�sst, dann lernst du kaum dabei.

LG