Teil 3: Meine eigene Webseite eiter geht‘s mit dem W Crash kurs zum Erstellen Ihrer eigenen Webseite: Im 3. Teil lernen Sie, wie man Farbe und Text auf die Webseite bringt. Das letzte Mal haben wir die Grundstruktur erstellt und unseren ersten Text verfasst. Nicht gelesen? Kein Problem! Auf unserer Internetseite www. the-insider.at finden Sie alle Ausgaben zum Nachlesen. 1 Der Text der Webseite Wir beginnen bei der ID-Main (#main). Ersetzen Sie zu Beginn den Text „Hallo“ durch

Herzlich Willkommen auf der Startseite Ihrer ersten Seite.

. Info: Das Tag

kennzeichnet die Überschrift 1. (1 ist die größtmögliche Überschrift - 6 die kleinste Überschrift) Schreiben Sie weiters
Lorem ipsum dolor sit amet, consectetur adipiscing elit. (...)
Info: Das Tag
steht für den Absatz. Insider sollten wissen, dass der Fülltext „Lorem Ipsum ...“ ein vorgefertigter Beispieltext ist, den Sie von der Web seite www.loremipsum.de kopieren können. Natürlich können Sie auch einen anderen Text nach Belieben ein fügen. Wenn Sie beide Tags richtig eingesetzt haben und jeweils das schließende Tag nicht vergessen haben, sollte Ihre Webseite nun wie auf dem Bild oben neben der Einleitung aussehen. Bei Fragen und Vorschlägen für neue Themen schreiben Sie mir an technik@the-insider.at. TEXT Sandro Letter 2 Zeit für Farbe Da Sie jetzt einen Text haben, können Sie sich nun der Farbe widmen. Dazu erstellen Sie in Ihrem Ordner, in dem sich die Datei „index.php“ befindet, einen neuen Unterordner „css“ und einen Unterordner „img“. Sobald Sie diese erstellt haben, legen Sie eine neue Datei mit dem Namen „style.css“ an. So geht‘s bei „Netbeans“: Bei Ihrem Projekt „Beispiel1“ haben Sie einen Ordner „Source Files“, in dem sich auch die „index.php“ befindet. Sie klicken mit der rechten Maustaste auf „Source Files“, dann auf „Neu“ und auf „Folder“. So erstellen Sie einen Ordner „img“ und „css“. Als nächstes klicken Sie auf den Ordner „css“, auf „Neu“ und dann auf „Cascading Style Sheet“. Sie nennen Ihre CSS-Datei „style“ und bestätigen mit „OK“. Wichtig: Bitte überprüfen Sie, ob Ihre Datei wirklich im Ordner „css“ ist. Als nächstes löschen Sie in der Datei „style.css“ den folgenden Code: (Achtung! Nur, wenn Sie die Datei mit „Netbeans“ erstellt haben!) root { display: block; } Schreiben Sie in die CSS-Datei: body { font: 12px/16px ‚Arial‘, sans-serif; background-color: #2D2D2D; color: #000; } Man sieht auf der Webseite aber noch nichts, da Sie die CSS-Datei zu erst einbetten müssen. Öffnen Sie „index.php“ und schreiben in über dem Tag : <link type=“text/css“ rel=“stylesheet“ href=“css/style.css“ /> Nun sollte Ihre Webseite wie das Bild unten aussehen. Beim nächsten Mal ... zeige ich Ihnen, wie Sie Bilder in Ihre Webseite einfügen können und eine Navigation funktioniert. Außerdem werden Sie lernen, was Sie mit CSS-Dateien alles anstellen können. Neugierig? Wenn Sie noch mehr wissen wollen, schreiben Sie mir. Gerne beantworte ich Ihre Fragen. 19 © Gerd Altmann / pixelio.de Technik & Co</article></body></html>