HTML: Ganz simple Homepage erstellen

**Felix Rieseberg** · 19.03.2006, 15:46

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:

Code:

Fetter Text

wird zu

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>

Interessant ist in unserem Fall nur das <title>: Schreibt dort euren Seitentitel herein.

Für die eigentliche Seite kommt jetzt

Code:

<body>
</body>

In diesen Bodytag kommt der Text unserer Seite. Gebt mal probeweise ein "Hallo Welt" ein:

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

**Cyrics** · 19.03.2006, 16:31

bei 3. wäre vielleicht noch die Information gut, dass man als *.HTML-Datei abspeichert.

Trotzdem Danke für die Informationen. Informativ sind auch die Befehle <div> <table> und dergleichen.
Mit <div> legt man Felder fest und mit <table> kann man Tabellen aufziehen. Ältere Webseiten sind in diesen Tabellen komplett gehalten, sinder aber kaum administrierbar und pflegbar, weil sie zu unübersichtlich erscheinen. Neuere Webseiten sind eher mit <div>-Tags und in Verbindung mit CSS-Dateien gehalten.
Dies nur noch als kleine Information am Rande.

Alles das und mehr kann man aber auch bei Self-HTML nachlesen und erlernen. Die gehen Schritt für Schritt alles durch und erklären sehr gut

**sfs** · 19.03.2006, 16:36

Hi Riesenzwerg,

deine kleine Einführung ist ganz informativ, aber es gibt schon eine ziemlich umfassende und (sorry) kaum zu toppende Seite: http://de.selfhtml.org/

Mach dir nix draus, ansonsten bin ich übrigens ganz deiner Meinung: eine wirklich gute Seite erkennt man u.a. am Quellcode

lg, sfs

@Cyrics: na super, jetzt warste schneller

**Felix Rieseberg** · 19.03.2006, 22:48

Stand auf dem Wunschzettel

Ich versuche nur, die Forumsqualität zu bedienen

**MasterDomino** · 20.03.2006, 11:27

Also erst einmal danke für die kurze Einführung! Gibt schon einmal Karma.
Allerdings fehlen mir hier noch viele Informationen, da ich - wie im Wunschzettel beschrieben - auch gerne wüsste, wie man die Seite online stellt und wo man Webspace herbekommt und ähnliche Problemstellungen. Außerdem ist, was ich brauche wohl doch eher ein WYSIWYG-Editor, mag das unter Profis auch eine eher unschöne Lösung sein...

Ich lasse das ganze daher vorerst mal auf dem Wunschzettel stehen, wenn du's mir nicht übel nimmst, vielleicht kann ja jemand das Tutorial hier noch ergänzen oder einen weiteren Thread dazu aufmachen.

Nichtsdestotrotz vielen Dank schonmal für diese erste Einführung!

Lieber Gruß, MasterDomino

knolle · 21.03.2006, 23:51

Also mal ehrlich, ich finde "selfhtml" zwar sehr ausführlich, aber für Einsteiger eigentlich eher doch undurchschaulich, bzw. zu stark verzweigend.

Eine Einführung, wie Riesenzwerg das vermutlich anstrebt, halte ich für wirkliche Anfänger, besser.

Er sollte weitermachen. Vielleicht kann man auch eine eigene Rubrik dafür einräumen. Dies mag weiter fortgeschrittene nicht so ansprechen, aber für Anfänger sehr gut.

Die wichtige Frage ist, wie baue ich eine Site so zusammen, wie ich möchte und welche Befehle sind dazu notwenig. Jede weitere Site kann ich nach dieser ersten, die ich erstellt habe dann zusammenbauen und kapiere das auch.

Und es bleibt vielleicht nicht nur bei einer "simplen hompage" sondern, wenn es ein Hobby oder Ehrgeiz ist, können wir mehr erwarten. Bin jedenfalls gespannt darauf.

Jedenfalls ein dickes Plus für diesen Anfang und diese Idee und natürlich auch Karma.

Gruß
knolle

**turncoat** · 22.03.2006, 14:14

Ich finde selfHTML nicht nur für Einsteiger nutzlos; wenn man auf die Schnelle nähere Informationen zu einem Tag sucht oder ein paar CSS-Definition braucht, gibt es inzwischen nützlichere Quellen.

Als Einstiegsinformationen leg' ich Freunden und Bekannten gern Michael Jendryschiks „Einführung in XHTML, CSS und Webdesign“ ans Herz.

In Sachen Nachschlagewerk greif' ich auf Css4You oder auf Referenzmaterial von MediaEvent zurück. Und dann gibts da ja noch die css-discuss Mailinglist und den großen Meister, das World Wide Web Consortium.

Zusätzlich sind in meinen Lesezeichen Unmengen an Links zu Farbkombinationen, Vorlagen u.ä. verwahrt.

Thema: HTML: Ganz simple Homepage erstellen

Themen-Optionen

Thema durchsuchen

HTML: Ganz simple Homepage erstellen

Ähnliche Themen

HTML Email erstellen in MAIL????

homepage erstellen für laien

Homepage erstellen

homepage erstellen mit dreamweaver mx...

Berechtigungen