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 , ihr könnt allerdings auch andere benutzen. Wenn ihr dann euren Editor gestartet habt (in meinem Fall Notepad++), sollte es ungefähr so aussehen :
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:
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>
Tags werden IMMER so geöffnet :
PHP Code:
<beispiel>
PHP Code:
</beispiel>
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.
Nun wollen wir unseren ersten Tag angeben, und zwar im HEAD Bereich, den 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>
Insgesamt sollte euer Dokument bisher so aussehen:
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>
PHP Code:
<h1>Ich bin die größte Überschrift</h1>
PHP Code:
<h1><center><b>Ich bin die größte Überschrift, in der Mitte und Fett</b></center></h1>
PHP Code:
<h1><center><b><font color = "red">Ich bin die größte Überschrift, in der Mitte, fett und rot</font><b></center></h1>
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>
- 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 :
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">
So sieht das ganze im Editor aus:
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" />
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;
}
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;
}
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