Text mit CSS formatieren
Falls über diesem Text keine PDF-Präsentation zu sehen ist, wurde diese von Ihrem Browser direkt runtergeladen (wenn Sie z.B. mit Safari@Mac surfen). Sie könnnen zum Download auch hier klicken: Direktdownload PDF-Präsentation
Übungen
Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).
Die aktuelle Übung können Sie hier als txt-File herunterladen.
***** Übungen: CSS - Schrift formatieren *****
CSS_2-1: Fehler finden
In welchen Zeilen befinden sich Fehler?
1. <p style="font-weight : bold">fetter Text</p>
2. <style="color : blue;">blabla</style>
3. <h1 style="blue">Überschrift</h1>
4. <p><color : blue>Text Text</color></p>
5. <body "blue">html-Inhalte</body>
6. <h1 style : blue>Überschrift</h1>
7. <h1 style="color : blue">Überschrift</h1>
8. <p style="font : Arial">Arial</p>1
9. <style="color blue;">blauer text</style>
10. <li style="font-weight : bold">ein Aufzählungspunkt, fett</li>
CSS_2-2: Schrift formatieren
Formatieren Sie den folgenden Textabsatz nach der jeweiligen Vorgabe und überprüfen Sie im Browser, ob die Formatierung funktioniert.
1. dunkelblaue Textfarbe, Arial oder Verdana als Schriftart, NICHT fett, Größe 14px
2. graue Textfarbe, Größe 60px, Zeilenabstand 20%, unterstrichen
3. grün, fett
CSS_2-3: Schrift formatieren nach Vorgabe
Formatieren Sie den folgenden Text so, dass er aussieht wie im Bild in der Datei css02-screenshot.png dargestellt:
Warenkorb
Sie sehen hier sämtliche Artikel Ihres Warenkorbs als Liste angezeigt. Wenn Sie die Bestellung fortsetzen wollen, betätigen Sie bitte den Absendenknopf.
Bitte beachten Sie:
Betätigen Sie den Absendenknopf nur einmal, da es sonst zu Fehlermeldungen kommen kann.
Aufgaben zur Übungsfirma
Alle Aufgaben zur Übungsfirma finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).
Die aktuelle Übung können Sie hier als txt-File herunterladen.
***** Übungsfirma: Gestaltung der Webvisitenkarte *****
Sie betreten das Büro von Frau Schuster und bringen ihr einen Brief. "Prima, da sind Sie ja", ruft sie erfreut aus. "Nächste Woche wird unsere neue Website online sein. Ich habe schon einen Vermerk für unsere aktuelle Visitenkarte gemacht. Leider kenne ich mich mit Formatierungen nicht so gut aus. Könnten Sie die Seite etwas hübscher machen? Ich habe einige Hinweise in eckige Klammern gesetzt, ich würde Sie aber auch bitten, die Schriftart und evtl. Hintergrundfarbe usw. etwas zu modifizieren. Danke. Ich maile Ihnen gleich den Code für die index.html."
HTML-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=UTF-8" /> <title>Under Construction</title> </head> <body> <p>13.02.2015</p> <p>Sehr verehrte Kundinnen und Kunden! [fett]</p> <p>In wenigen Tagen wird unser neuer Webauftritt online gehen. Bis dahin bitten wir Sie noch um etwas Geduld.</p> <p>Wenn Sie eine Bestellung vornehmen wollen, können Sie das telefonisch unter 012345/678890-12 tun, außerdem per Mail an bestellung@lernglueck.de.</p> <p>Bitte beachten Sie, dass wir in der KW 9 wegen Betriebsferien nicht erreichbar sind! [rot]</p> <p>Mit freundlichen Grüßen,</p> <p>Frau R. Schuster (Geschäftsleitung) [fett]</p> </body> </html>
Gehen Sie an die Arbeit. Bitte beachten Sie, dass Frau Schuster eine SERIÖSE Webseite wünscht. Vermeiden Sie also übertriebene Farbgebung und achten Sie auf gute Lesbarkeit.
OUTPUT:
- HTML-Datei "index.html" mit den gewünschten CSS-Formatierungen