1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. In diesem Bereich findet ihr Tutorials und Reviews. Die Forenrechte zur Erstellung neuer Themen sind hier eingeschränkt, da Problemdiskussionen bitte in den übrigen Forenbereichen auf Apfeltalk zu führen sind. Wer ein Tutorial oder Review einstellen möchte, kann im Unterforum "Einreichung neuer Tutorials" ein neues Thema erstellen. Die Moderatoren verschieben den Beitrag dann in den passenden Bereich.
    Information ausblenden

HTML: Ganz simple Homepage erstellen

Dieses Thema im Forum "Software-Tutorials" wurde erstellt von Felix Rieseberg, 19.03.06.

  1. Felix Rieseberg

    Felix Rieseberg Seestermüher Zitronenapfel

    Dabei seit:
    24.01.06
    Beiträge:
    6.149
    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:
    [B]Fetter Text[/B]
    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 :)
     
  2. Cyrics

    Cyrics Neuer Berner Rosenapfel

    Dabei seit:
    01.04.05
    Beiträge:
    1.975
    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 :)
     
  3. sfs

    sfs Friedberger Bohnapfel

    Dabei seit:
    06.10.05
    Beiträge:
    528
    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 ;)
     
  4. Felix Rieseberg

    Felix Rieseberg Seestermüher Zitronenapfel

    Dabei seit:
    24.01.06
    Beiträge:
    6.149
    Stand auf dem Wunschzettel :) Ich versuche nur, die Forumsqualität zu bedienen ;)
     
    MasterDomino gefällt das.
  5. MasterDomino

    MasterDomino Roter Eiserapfel

    Dabei seit:
    28.04.05
    Beiträge:
    1.440
    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
     
  6. knolle

    knolle Gast

    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
     
    #6 knolle, 21.03.06
    Zuletzt von einem Moderator bearbeitet: 22.03.06
  7. turncoat

    turncoat Uelzener Rambour

    Dabei seit:
    18.02.06
    Beiträge:
    374
    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. :)
     

Diese Seite empfehlen