Ćwiczenia z informatyki

zadanie 1 - styl zewnętrzny - pliki styl.css

zmiana stylu dokumentu przy zmianie pliku styl.css

Zakres zadania:

Zaprojektuj dokument html, który przy zmianie pliku stylu zmienia wygląd.
W pliku html zmieniamy jedynie odwołanie do pliku css - następuje zmiana wyglądu.
Tworzymy 5 identycznych plików html zawierających takie same klasy i identyfikatory obiektów.
Tworzymy 5 plików css, które przypiszemy do poszczególnych plików html.
Pierwszy dokument html będzie posiadał przypisany pusty plik stylu.
Wzory stron po zastosowaniu stylu:
- brak stylu
- styl 1
- styl 2
- styl 3
- styl 4

Polecenia i wskazówki:

Na dysku sieciowym utwórz folder css1
Utwórz główny plik html (zapisz w folderze css1 pod nazwą: index.html)
Wprowadź podstawowy kod html:
Treść strony (sekcja body) według wzoru:

Przykładowe teksty do pobrania:
tekst 1
tekst 2
Nadaj własne nazwy klasom (class) i identyfikatorom (id)
Zapisz pod nazwą index.html
Zmieniając nagłówek według wzoru: Zapisuj dokument pod nazwami: index1.html do index4.html
Utwórz pusty dokument i zapisz pod nazwą: styl.css
Zapisz dokument pod nazwami: styl1.css do styl4.css
W każdym dokumencie wprowadź opis stylu charakterystyczny dla poszczególnych stron.
Uwaga: Używamy tych samych nazw klas i identyfikatorów:
- strona 1
- strona 2
- strona 3
- strona 4
Przykładowy fragment kodu w pliku css:

zadanie 2 - menu strony

różne style menu dokumentu

Zakres zadań:

Zadania umieść w folderze css2.
Menu pionowe.
Menu poziome.
Menu zagnieżdżone.
Każde menu to oddzielny plik html oraz css.
Zastosuj własne kolory inne niż zastosowano w przykładzie, tu:
- nagłówek: #080;
- menu: #17a2b8;

Polecenia i wskazówki:

menu pionowe (index1.html - styl1.css)

Polecenia i wskazówki:
- Utwórz podstawową strukturę dokumentu html
- W sekcji <body> wprowdź kod tworzący:
  - nagłówek
  - część główną z menu
  - stopkę
- W części gółwnej wprowadź listę wypunktowaną zawierającą linki do podstron.
  np.: <li><a href="start.thml">Start</a></li>
  Efekt w przeglądarce:
- Dodaj klasy dla elementów html
- Dodaj opis stylu strony (czcionka, marginesy).
  Efekt w przeglądarce:
- Zmień styl nagłówka, dodaj margines dla listy.
  Efekt w przeglądarce:
- Zmień styl stopki - umieść ją w dolnej części strony niezależnie od wielkości okna przeglądarki.
  Efekt w przeglądarce:
- Zmień styl listy według wzoru (pamiętaj o stylu blokowym dla odnośników,
  aby zajmowały całą powierzchnię "rodzica" li.
  Efekt w przeglądarce:
- Dodaj obsługę pseudoklasy hover.
  Efekt w przeglądarce:
menu poziome (index2.html - styl2.css)
- Wykorzystaj strukturę html z poprzedniego zadania.
  Pozostaw trzy elementy listy
- Listę umieść w sekcji <nav> - element obejmuje całą szerokość strony
- Zmień styl wyświetlania listy <ul> z blokowego na inline
- Dla elementów li dodaj pozycję float:left; oraz biały kolor lewej części ramki
- Zmiana koloru prawej ramiki, dla ostatniego elementu, następuje po dodaniu stylu dla pseudoklasy last-child
  li:last-child {border-right-color: #fff;}
- Tak utworzone menu znajdować się będzie po lewej stronie okna.
  Centrowanie menu (stosowanie właściwości flex).
  Zajrzyj pod adres: https://www.w3schools.com/css/css3_flexbox.asp
  Efekt w przeglądarce:
- Dodaj obsługę pseudoklasy hover.
  Pozostaje jedynie dolna część ramki (menu "nie skacze")
  Efekt w przeglądarce:
menu zagnieżdżone (index3.html - styl3.css)
- Wykorzystaj strukturę html z pierwszego zadania.
- Do pozycji szkolenia dodaj kolejną listę punktową zawierającą trzy elementy:
  - HTML
  - CSS
  - JavaScript
  
  Efekt w przeglądarce:
- Dodaj pozycję relatywną dla elementów li oraz pozycję absolutną i margines dla listy podrzędnej.
  Efekt w przeglądarce:
- Dodaj obsługę hover.
  Efekt w przeglądarce:
- Zakładając, że głównej liście nadano identyfikator blok, przeanalizuj poniższy kod.
  Dodany jest tu efekt hover dla listy głównej i podrzędnej. Efekt w przeglądarce:
- Dodaj menu podrzędne dla innych pozycji menu głównego.
  Przykład:

zadanie - menu responsywne

zmiana stylu menu

Zakres zadania:

Zaprojektuj dokument html, który przy zmianie rozdzielczości zmienia sposób wyświetlania menu:
- szerokość do 768px - menu pionowe
- powyżej - menu poziome
Tworzymy folder: menu responsywne
W folderze umieszczamy dwa pliki: index.html oraz styl.css
Kolorystyka jest dowolna
Efekt do osiągnięcia: zobacz na kanale "informatyka bez tajemnic"

Polecenia i wskazówki:

W arkuszu stylu zdefiniuj najpierw parametry dla dużej szerokości ekranu.
Dla szerokości mniejszych niż 768px zastosuj regułę: @media only screen and (max-width:768px) {}
Do pozycjonowania elementów możesz użyć właściwości flex, szczegóły znajdziesz pod adresem: https://www.w3schools.com/css/css3_flexbox_container.asp

zadania powtórzeniowe

zaprojektuj strony według poniższych wzorów:

Plan lekcji (zapisz pod nazwą: plan_lekcji.html): Strukturę całej tabeli (z opisem wiersza nagłówkowego oraz łączeniem właściwych komórek) możemy wprowadzić korzystając z następującego kodu emmet:
Szachownica (zapisz pod nazwą: szachownica.html):
Pozycjonowanie obiektów DIV (zapisz pod nazwą: pozycjonowanie.html):
Bez zastosowanego arkusza stylu: Po dodaniu arkusza do dokumentu:
Menu strony: pionowe, poziome, zagnieżdżone:
menu1.html: menu2.html: menu3.html:

Polecenia i wskazówki:

Przypomnij materiał z działu rrogacz.pl/css-selektory
Do określania kolorów komórek stosuj pseudoklasy ntch-child() wybierające określone (parzyste, nieparzyste) wiersze, kolumny.