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.
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.
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 :).
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.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
