Programowanie stron WWW
ict-trainer.pl - © 2024 - Grzegorz Szyjewski
Zadanie 2 - wykorzystanie CSS na przykładzie elementów blokowych

Zastosowanie stylów na poziomie pojedynczego elementu
Zastosowanie stylów na poziomie pojedynczego skryptu (pliku)
Zastosowanie stylów na poziomie zewnętrznego pliku, importowanego do skryptu
plik skryptu (html)

plik arkusza stylów (style.css)
Postać wynikowa powyższych kodów:
Tworzenie warstw za pomocą elementów blokowych

trzy elementy blokowe o różnych rozmiarach, ustawione w pozycji domyślnej:
zawartość bloku pierwszego
zawartość bloku drugiego
zawartość bloku trzeciego

 
dwa elementy blokowe ustawione "side by side" zagnieżdzone w bloku trzecim:
zawartość bloku lewego
zawartość bloku prawego
kolejny blok niezagnieżdzony

  dwa elementy blokowe wypełniające element w którym są zagnieżdzone (blok trzeci):
zawartość bloku lewego
zawartość bloku prawego
kolejny blok niezagnieżdzony

 
Zadanie - puzzle

1. Pobierz paczkę z fragmentami obrazu oraz wypakuj ją do nowego katalogu o nazwie "img" na pulpicie.
2. Pobrane obrazy są fragmentami zdjęcia delfina pokazanego poniżej.
3. Utwórz dwa pliki: delfin.html oraz delfin.css.
4. Połacz plik z arkuszami stylów z głónym dokumentem html wykorzystując odwołanie w sekcji head.
5. Utwórz matrycę wykorzystując elementy blokowe div tak aby powstała siatka 3 kolumny 5 wierszy, w których umieszczone zostaną fragmenty obrazka.
6. Style dla elementów blokowych zapisuj w pliku css, nastepnie wykorzystuj jako klasa (class) w pliku html.
7. Umieśc każdy kawałek obrazka w odpowiednim polu w matrycy, tak aby złożyc obrazek w całość.
8. Jak skończysz spróbuj umieścić piłkę na nosie delfina. Piłka jest dodatkowym obrazkiem w pobranym zestawie plików.