- Registriert
- 24.01.06
- Beiträge
- 5.589
Da ich die Meinung vertrete, dass Homepages nur dann wirklich gut sind, wenn sie von Hand gecoded werden, hier die Kurzeinweisung in HTML. Ich weiß, WYSIWYG Editoren sind verlockend, produzieren aber meistens nur Codemüll, wenn man nicht per Hand drübergeht.
Wir wollen eine kleine Seite mit wenigen Fotos erstellen.
1) Editor
Als Editor sollte ein Texteditor genügen.
2) Grundsätzliches
HTML ist prinzipiell nicht viel aufwändiger als BBCode, nur dass anstatt "(B)" "<strong>" geschrieben wird. In unserem Fall verwenden wir HTML wie BBCode, der mit Tags arbeitet, die auch wieder geschlossen werden müssen. Also:
wird zu
3) Das Dokument
Damit die Seite auch sauberen Code hat, erfüllen wir den XHTML Standart. Deshalb steht am Anfang der Seite:
Interessant ist in unserem Fall nur das <title>: Schreibt dort euren Seitentitel herein.
Für die eigentliche Seite kommt jetzt
In diesen Bodytag kommt der Text unserer Seite. Gebt mal probeweise ein "Hallo Welt" ein:
.
Jetzt das Ende. Dafür müssen wir das HTML Tag wieder schließen.
Ihr könnt jetzt schon abspeichern, und euch die Seite schon mal anschauen.
4) Ein bisschen Inhalt
So weit so gut. Nun wollen wir ein bisschen Text einfügen. Grundsätzlich könnte man Text einfach so drauflos tippen. Da wir als Deutsche aber leider Sonderzeichen haben, muss man diese extra eingeben. Hier eine kleine Tabelle.
Nun beginnen wir mit der Überschrift. Diese setzt man in das Tag <h1>. Also so:
Jetzt sieht der Code unserer so aus:
.
Nun ein bisschen Formatierung:
Fett: <strong>
Kursiv: <em>
Jetzt können wir schon eine Seite mit Überschrift und formatiertem Text erstellen.
5) Bilder
Für Bilder ist das <img> Tag verantwortlich. Das <img> Tag ist jedoch ein "unregelmäßiges" Tag: Es schließt sich selbst. Hier ein erklärtes Anwendungsbeispiel mit Parametern:
<img : Der Tag
src: Die Adresse zum Bild
width: Weite
height: Höhe
alt: Alternativer Text
longdesc: Lange Beschreibung
Dieses Bild kann jetzt irgendwo eingefügt werden.
6) Umbruch
Nachdem wir nun die sich selbst schließenden Tags kennengelernt haben, kommt der Umbruch: Auch er schließt sich selbst.
--------
Je nach Resonanz gibt es eine Vortsetzung
Wir wollen eine kleine Seite mit wenigen Fotos erstellen.
1) Editor
Als Editor sollte ein Texteditor genügen.
2) Grundsätzliches
HTML ist prinzipiell nicht viel aufwändiger als BBCode, nur dass anstatt "(B)" "<strong>" geschrieben wird. In unserem Fall verwenden wir HTML wie BBCode, der mit Tags arbeitet, die auch wieder geschlossen werden müssen. Also:
Code:
[B]Fetter Text[/B]
Code:
<strong>Fetter Text</strong>3) Das Dokument
Damit die Seite auch sauberen Code hat, erfüllen wir den XHTML Standart. Deshalb steht am Anfang der Seite:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Riesenzwerg</title>
</head>Für die eigentliche Seite kommt jetzt
Code:
<body>
</body>
Code:
<body>
Hallo Welt!
</body>Jetzt das Ende. Dafür müssen wir das HTML Tag wieder schließen.
Code:
</html>Ihr könnt jetzt schon abspeichern, und euch die Seite schon mal anschauen.
4) Ein bisschen Inhalt
So weit so gut. Nun wollen wir ein bisschen Text einfügen. Grundsätzlich könnte man Text einfach so drauflos tippen. Da wir als Deutsche aber leider Sonderzeichen haben, muss man diese extra eingeben. Hier eine kleine Tabelle.
Nun beginnen wir mit der Überschrift. Diese setzt man in das Tag <h1>. Also so:
Code:
<h1>Hallo Welt!</h1>Jetzt sieht der Code unserer so aus:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Riesenzwerg</title>
</head>
<body>
<h1>Hallo Welt!
</h1>
</body>
</html>Nun ein bisschen Formatierung:
Fett: <strong>
Kursiv: <em>
Jetzt können wir schon eine Seite mit Überschrift und formatiertem Text erstellen.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Riesenzwerg</title>
</head>
<body>
<h1>Hallo Welt!</h1>
<strong>Fett</strong>
<em>Kursiv</em>
</body>
</html>5) Bilder
Für Bilder ist das <img> Tag verantwortlich. Das <img> Tag ist jedoch ein "unregelmäßiges" Tag: Es schließt sich selbst. Hier ein erklärtes Anwendungsbeispiel mit Parametern:
Code:
<img src="http://www.bild.de/bild.png" width="64" height="64" alt="Alternativer Text" longdesc="http://www.lange-beschreibung.de" /><img : Der Tag
src: Die Adresse zum Bild
width: Weite
height: Höhe
alt: Alternativer Text
longdesc: Lange Beschreibung
Dieses Bild kann jetzt irgendwo eingefügt werden.
6) Umbruch
Nachdem wir nun die sich selbst schließenden Tags kennengelernt haben, kommt der Umbruch: Auch er schließt sich selbst.
Code:
<br />--------
Je nach Resonanz gibt es eine Vortsetzung
