C o m p u t e r - u n d N e t z w e r k t e c h n o l o g i e
CSS-Grundlagen
Im Header von HTML-Dateien finden Sie das style-Tag. Innerhalb dieses Tags finden Sie Formatierungen der HTML-Elemente der Seite. Im CSS-Tutorial von w3schools.com finden Sie mögliche Formatierungen Ihrer HTML-Elemente:
Das folgende Beispiel zeigt eine Formatierung, die die Eigenschaften der im Browser angezeigten Zeichen festlegt:
<style>
​
body
{
font-family: verdana;
color: blue;
text-align: center;
}
​​​​​​
</style>
Aufgabe 1:
-
Kopieren Sie das oben angezeigte style-Tag mit Inhalt in Ihre HTML-Datei. Wenn der Text mit dem Font verdana, blau und zentriert angezeigt wird, dann haben Sie es wahrscheinlich alles richtig gemacht.
-
Ändern Sie die Textfarbe auf 'rot', den Font auf 'times roman' und die Textausrichtung auf 'left'. Wenn der Text jetzt rot und links mit dem Font 'times roman' angezeigt wird, dann haben Sie alles richtig gemacht.
-
...
Aufgabe 2: Eigenschaften eines Containers <div>
Das div-Tag bezeichnet man auch als Container, da es oft viele weitere Tags beinhaltet.
<style>
​
div
{
width: 200px;
background-color: green;
}
​
</style>
Testen Sie 10 Eigenschaften eines Container-Elements!
Siehe: https://www.w3schools.com/tags/tag_div.asp
Aufgabe 3: Eigenschaften eines Links <a>
Formatieren Sie einen Link ihrer Wahl entsprechend der auf w3schools.com gezeigten Möglichkeiten. Ändern Sie die Farben. Notieren Sie Ihre Feststellungen für die Besprechung mit dem Lehrer!
CSS - Klassen und IDs - Wo ist da der Unterschied?
Auf einer HTML-Seite existieren Tags häufig mehrfach. Nicht immer sollen alle diese Tags auf die gleiche Art und Weise formatiert werden. Um sie unterschieden zu können bekommen diese Tags zusätzliche Attribute, class="Klasse1" oder id="Identifikation1". 'class' verwendet man für Formatierungen, die an vielen Stellen innerhalb der Seite benötigt werden. 'id' verwendet man für Formatierungen von Elementen, die es so nur einmal auf der Seite gibt. Die Zusatzangaben 'class' und 'id' findet man jeweils im Start-Tag eines Elements, z.B. <div class="lalala">.
​
Die Formatierungen findet man innerhalb des Style-Tags im Head der HTML-Seite:
​
Die folgende Formatierung bedeutet, dass es sich umdie Formatierung einer Klasse namens 'Klasse1' handelt. Das erkennt man am Punkt.
.Klasse1
{
color: red;
}
​
Die folgende Formatierung bedeutet, dass es sich um eine Formatierung einer Id handelt. Das erkennt man am vorangestellten '#'.
#Identifikation1
{
background-color: grey;
}
Aufgabe 4: Formatieren Sie zwei verschiedene DIV-Container!
Aufgabe 5: Verwendung von Containern / Responsive Design
Heutzutage ist es selbstverständlich, dass Seiten auf allen Anzeigegeräten funktionieren.
Lesen Sie bitte:
-
https://blog.kulturbanause.de/2013/12/css-grid-layout-module/
-
https://t3n.de/magazin/css-grid-layout-vorgestellt-gestalten-rastern-242792/
Realisieren Sie einen Grid-Container, entsprechend des folgenden Beispiels auf w3schools.com:
​
-
Der Gridcontainer soll 4 Elemente enthalten.
-
Die Elemente sind gleich groß, quadratisch und haben eine Höhe und Breite von 150px.
-
Alle Hintergründe sollen verschiedene Farben haben.
In Javascript-Programmen können Sie wie folgt auf Grid_Elemente zugreifen:
Aufgabe 6: Formulare gestalten mit CSS
Wir suchen uns ein HTML-Formular im Internet, welches wir selbst nachbauen und entsprechend gestalten.
Infos:
Aufgabe 7: Google-Fake-Seite
Programmieren Sie die originale Google-Einstiegsseite nach: www.google.de
Je genauer ihre Seite dem Original entspricht, desto besser.
​
Hilfen:
​
Testfragen
Für die Beantwortung der folgenden Fragen ist immer ein vollständiges und fehlerfreies Beispiel zu notieren!
-
Wie heißt das Tag, welches die Formatierungen der HTML-Seite enthält?
-
Wie ändert man die Schriftart für die komplette HTML-Seite?
-
Welches Tag nennt man auch Container, weil in diesem viele weitere zusammengefasst werden?
-
Wie zentriert man den Text in einem Container?
-
Mit welcher Eigenschaft ändert man die Hintergrundfarbe auf gelb?
-
Wie ändert man die Schriftfarbe einer Überschrift auf grau?
-
...
Weitere interessante Informationen
-
Geometrische Figuren:
https://t3n.de/news/css-geometrische-figuren-reinem-358616/ -
...
© 2018 by Rüdiger Borrmann