Schlagwortarchiv für: HTML

CSS Kurs – Überschriften und Absätze

Dieser Beitrag ist Teil des CSS Kurses.
Überschriften und Absätze helfen bei der Orientierung. In diesem Beitrag lernen Sie den Text Ihrer Webseite zu strukturieren.
HTML kennt sechs verschiedene Gliederungsebenen für Überschriften, von h1 bis h6.
Wir fügen nun im Kopfbereich eine Überschrift ein. Kümmern Sie sich zunächst nicht um das Aussehen, dieses gestalten wir später mit CSS. Unter der Hauptunterschrift fügen wir einen Slogan hinzu. Dazu verwenden wir das HTML Element p für Absatz (engl. paragraph). Innerhalb des Absatzes wollen wir später einen Satz besonders hervorheben. Daher wird dieser mit span umspannt. Dieser Satz bekommt also ein eigenes Kästchen innerhalb des Absatz-Kästchens.


<div id="kopfbereich">
<h1>CSS Kurs</h1>
<p>CSS ist einfach. <span>Das Wesentliche auf den Punkt gebracht</span>.</p>
</div> <!-- kopfbereich -->

Das Ergebnis sieht wie folgt aus.
Eine Überschrift und ein Absatz
Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

/0 Kommentare/von

CSS Kurs – Webseite mit „div“ in Bereiche unterteilen

Dieser Beitrag ist Teil des CSS Kurses.
In der Regel wird eine Webseite in verschiedene Bereiche unterteilt: Kopfbereich, Navigation, Text und Fußbereich. Ein zusätzlicher Bereich umschließt alle diese Bereiche wie ein Schutzumschlag und hält sie zusammen. So auch diese Webseite: im Kopfbereich sehen Sie das Logo, Sie sehen die Navigation, den Inhalt (dieser Text) und im Fußbereich können Sie den Slogan lesen. Diese Einteilung findet mit dem Element div (engl. Division, also Bereich) statt. Wir fügen in den body nun die einzelnen Bereiche ein. Damit wir diese später eindeutig unterscheiden können, bekommt jeder Bereich eine id. Diese Bereiche können Sie sich wie eine Kiste vorstellen, in die später andere Kästchen zur leichteren Aufbewahrung reinkommen. Da solche Verschachtelungen schnell übersichtlich werden können empfiehlt sich die Verwendung von Kommentaren wie z.B. <!-- kopfbereich --> um die Grenzen einer Kiste auf einen Blick zu erkennen.


<!DOCTYPE html>
<html>
<head>
<title>Denis Reis – CSS Kurs Beispiel</title>
</head>
<body id=”startseite”>
<div id="kopfbereich">
 
</div> <!-- kopfbereich -->
</body>
</html>

Wir legen nun die einzelnen Behälter für Kopf-, Navi-, Text-, und Fußbereich an. Anschließend packen wir diese Kästchen in eine andere Kiste, die diese Bereiche wie ein Schutzumschlag (engl. wrapper) umschlingt.


<!DOCTYPE html>
<html>
<head>
<title>Denis Reis – CSS Kurs Beispiel</title>
</head>
<body id=”startseite”>
<div id="wrapper">
<div id="kopfbereich">

</div> <!-- kopfbereich -->
<div id="navibereich">

</div> <!-- navibereich -->
<div id="textbereich">

</div> <!-- textbereich -->
<div id="fussbereich">

</div> <!-- fussbereich -->
</div> <!-- wrapper -->
</body>
</html>

Damit sie die einzelnen Kästchen besser erkennen können habe ich die Rahmen mit CSS sichtbar gemacht.
Die Webseite besteht aus verschiedenen Bereichen
Probieren Sie es selbst aus.

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

/0 Kommentare/von

CSS Kurs Übersicht

CSS Experte und Autor Peter Müller drückt es ganz treffend aus – alle Webseiten bestehen im Wesentlichen aus kleinen Kisten. Diese Webseite übrigens auch. Die Überschrift, das Logo und selbst dieser Satz – alle sind in kleinen, rechteckigen Kästchen untergebracht. In diesem Kurs lernen Sie wie Sie diese Kisten mit HTML erschaffen und über CSS (Cascading Style Sheets) ihr Aussehen sowie ihre Position verändern können.
Wie bei jeder Sprache müssen wir auch bei CSS zunächst ein Paar Vokabeln und Grammatikregeln pauken. Als Schreibwerkzeug können Sie einen beliebigen Editor verwenden. Von Notepad (kostenlos) bis Adobe Dreamweaver (ca. 1000 EUR) existieren eine Menge von nützlichen Tools. Notepad++ ist ebenso kostenlos, ist einsteiger freundlich und erleichtert das Erstellen von HTML und CSS Dokumenten.
Obwohl dieser Kurs CSS als Überschrift trägt, ist es zunächst wichtig sich mit HTML zu beschäftigen. Mit HTML, Hypertext Markup Language (engl. für Hypertext-Auszeichnungssprache), legen Sie die Kästchen an, die Sie später mit CSS gestalten können.

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

/0 Kommentare/von

CSS Kurs – HTML Grundgerüst

Dieser Beitrag ist Teil des CSS Kurses.
Um unsere Webseite zu bauen brauchen wir zunächst ein Gerüst. Das Grundgerüst einer Webseite ist relativ einfach gestrickt und kann unter SELFTHTML eingesehen werden.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>Titel der Webseite</title>
</head>
<body>
 
</body>
</html>

Das Grundgerüst besteht im Wesentlichen aus drei Teilen. Im ersten Teil werden Informationen zu dem Dokumententyp angegeben. Dabei kann auch eine URL angegeben werden, unter der der Browser die Grammatik für diesen Typ nachschlagen kann. Diese Angaben sind wichtig, damit der Browser die Webseite richtig lesen kann. So vermeiden Sie unerwünschte Ergebnisse bei der Anzeige. Im zweiten Teil, dem head, steht der Vorspann der Webseite. Zum Beispiel der Titel der Webseite, der kurz und prägnant den Inhalt der Webseite beschreibt. Der eigentliche Inhalt, der für jeden sichtbar ist, wird im body dargestellt. Diese Teile, head und body, werden von html umschlossen, dem ersten eigentlichen HTML-Element.

Zu Übungszwecken passen wir das Grundgerüst etwas an. Wir vergeben zunächst einen aussagekräftigen Titel. Um unseren Inhalt später eindeutig identifizieren zu können, vergeben wir eine ID startseite. Lassen Sie uns nun eine Textpassage mit dem Inhalt „Hallo Welt!“ (wie kann es anders sein) erstellen. Gratuliere, Sie haben Ihre erste Webseite erstellt!


<!DOCTYPE html>
<html>
<head>
<title>Denis Reis – CSS Kurs Beispiel</title>
</head>
<body id="startseite">
<p>Hallo Welt!</p>
</body>
</html>

Ihre erste Webseite
Probieren Sie es selbst aus.

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

/0 Kommentare/von