Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » Websites nachbauen – Schritt für Schritt » 3-Spalten-Layout mit CSS erstellen » Inhalte übernehmen & strukturieren

Inhalte übernehmen und mit HTML-Befehlen strukturieren

Im ersten Schritt übernehmen wir den Inhalt und strukturieren diesen mit den entsprechenden HTML-Befehlen. Dabei bitte nicht an das Design der Seite denken, sondern an die logische Struktur! Den Text selber am besten per „Copy and Paste“ von der fennek.mobi Seite kopieren. Nur den Text, nicht bereits die HTML-TAGs. Am schnellsten können wir den Text kopieren, indem wir auf die Webseite gehen und dort STRG+a drücken. Somit wird der komplette Text auf der Webseite markiert. Mit der rechten Maustaste (oder STRG+c) können wir den Text kopieren und nun im HTML-Editor wieder mit der rechten Maustaste (oder STRG+v) in unserem <body>-Bereich einfügen.

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Fennek und seine Umwelt – Beispielseite HTML5</title>
    <meta name="description" 
          content="160 Zeichen zum Beschreiben des Inhalts">
    <link href="design.css" rel="stylesheet">
</head>

<body>

Wüstenläufer

    Kontakt
    Impressum

    Startseite
    Vorstellung
    Einzelteile

    Startseite
    über diese Website
        Einzelteile
        Design verwenden

Bildersammlung: Fennek schlafend Fennek schläft noch immer Fenneks sind Nachts wach
Fennek - Wüstenläufer

Der Fennek bzw. der Wüstenfuchs ist ein Wildhund mit extrem großen Ohren, die dem Wärmeausgleich dienen. Die Ohren sind ca. 15 cm lang - bei einer Gesamtläge von ca. 40 cm ist das proportional beachtlich.

Lebt gerne im Sand sprich in Wüsten und schläft tagsüber.
Mahlzeiten des Fennek

Zu der Nahrung der Fenneks zählen:

    Mäuse
    Heuschrecken
    Eidechsen
    Vögel
    Obst und Beeren (in Gefangenschaft)

Der Mozilla-Fennec

Bei dem Fennec von Mozilla handelt es sich um einen mobilen Webbrowser, der als kleiner Bruder des Firefox einen passenden Namen benötigt hat. Und ein Fennek ist definitiv kleiner als ein Fuchs:)

Diese Seite hat nichts mit Fennec von mozilla.org zu tun - wenn Sie aber zu Mozillas mobilem Webbrowser Fennec wollen, gehen Sie zu http://www.mozilla.org/projects/fennec/1.0a1/releasenotes
Sinn und Zweck dieser Website

Diese Website dient als Nachbau-Objekt und zum Lernen von HTML und CSS. Alle benötigten Einzelteile bekommen Sie auf den Unterseiten. Beachten Sie, dass der Hintergrund frei ausgetauscht werden kann.

So - nun viel Spaß daran.

Axel

© www.fennek.mobi

</body>
</html>

Jetzt haben wir unseren Inhalt (noch ohne Struktur) in unserer Webseite. Speichern von Zeit zu Zeit ist wichtig. Da es sich um die Startseite des Webauftritts handelt, sollte der Dateiname index.htm sein.

Schauen wir uns die Ausgabe im Browser an, sehen wir zwar unseren kompletten Text – allerdings ohne jegliche Struktur und ohne Design.

Ausgabe im Browser des Textes noch mit fehlender Struktur
Ausgabe im Browser des Textes noch mit fehlender Struktur

Der erste Schritt ist nun, sauber und logisch die Struktur in den Inhalt zu bringen. Hier kann man sich überlegen, was die Hauptüberschrift ist. Dabei darf man sich nicht vom Design blenden lassen. Es steht zwar über der ganzen Seite „Wüstenläufer“. Dies ist aber keine Überschrift. Unsere Hauptüberschrift <h1> ist der Text „Fennek – Wüstenläufer“. Dann kommen zwei Absätze mit dem HTML-Befehl <p> . Dann folgt die Unterüberschrift <h2> mit dem Inhalt „Mahlzeiten des Fennek“. So wird nun der komplette Text durchgegangen. Bei der folgenden Aufzählung werden die für Aufzählung vorgesehenen HTML-Befehle <ul> und <li> verwendet.

Unser bisheriger Quellcode für die Seite:

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title> Fennek und seine Umwelt – Beispielseite HTML5</title>
    <meta name="description" 
          content="160 Zeichen zum Beschreiben des Inhalts">
    <link href="design.css" rel="stylesheet">
</head>

<body>

Wüstenläufer

    Kontakt
    Impressum

    Startseite
    Vorstellung
    Einzelteile

    Startseite
    über diese Website
        Einzelteile
        Design verwenden

Bildersammlung: Fennek schlafend Fennek schläft noch immer Fenneks sind 
Nachts wach

<h1>Fennek - Wüstenläufer</h1>

<p>Der Fennek bzw. der Wüstenfuchs ist ein Wildhund mit extrem großen Ohren, 
die dem Wärmeausgleich dienen. Die Ohren sind ca. 15 cm lang - bei einer 
Gesamtläge von ca. 40 cm ist das proportional beachtlich.</p>

<p>Lebt gerne im Sand sprich in Wüsten und schläft tagsüber.</p>

<h2>Mahlzeiten des Fennek</h2>

<p>Zu der Nahrung der Fenneks zählen:</p>

<ul>
    <li>Mäuse</li>
    <li>Heuschrecken</li>
    <li>Eidechsen</li>
    <li>Vögel</li>
    <li>Obst und Beeren (in Gefangenschaft)</li>
</ul>

<hr />

<h2>Der Mozilla-Fennec</h2>

<p>Bei dem Fennec von Mozilla handelt es sich um einen mobilen Webbrowser, 
der als kleiner Bruder des Firefox einen passenden Namen benötigt hat. 
Und ein Fennek ist definitiv kleiner als ein Fuchs:)</p>

<p>Diese Seite hat nichts mit Fennec von mozilla.org zu tun - wenn Sie 
aber zu Mozillas mobilem Webbrowser Fennec wollen, gehen Sie zu 
http://www.mozilla.org/projects/fennec/1.0a1/releasenotes</p>

<hr />

<h2>Sinn und Zweck dieser Website</h2>

<p>Diese Website dient als Nachbau-Objekt und zum Lernen von HTML und CSS. 
Alle benötigten Einzelteile bekommen Sie auf den Unterseiten. Beachten Sie, 
dass der Hintergrund frei ausgetauscht werden kann.</p>

<p>So - nun viel Spaß daran.</p>

<p>Axel</p>

© www.fennek.mobi

</body>
</html>

Die unterschiedlichen Themen, wie das Tier Fennek und der mobile Browser „Fennec“, werden durch das HTML-Element <hr> getrennt. Dieses HTML-Element hat durch HTML5 eine neue Rolle bekommen. Es trennt inhaltlich unterschiedliche Themen voneinander. Das Aussehen des Trennstrichs kann später dann entsprechend durch CSS beeinflusst werden.

Struktur durch korrekte HTML-Befehle
Struktur durch korrekte HTML-Befehle

Bisher haben wir nur den eigentlichen Textinhalt strukturiert. Im nächsten Schritt wollen wir die Bereiche der Seite festlegen und dabei die Steuerung usw. mit den entsprechenden HTML-TAGs versehen.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details