# Kurs WWW. Lista nr 2
###### tags: `www20` `pwit`

:::info
grupa PWit, wtorki 12-14
:::

## Deklaracje

:::info
Studenci wypełniają poniższą tabelkę przed rozpoczęciem zajęć.
:::
Gotowość rozwiązania zadania należy wyrazić poprzez postawienie X w odpowiedniej kolumnie!

Można również wyrazić chęć prezentacji któregoś zadeklarowanych zadań za pomocą znaku ==X== (X na żółtym tle).

| | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|----------------------- | - | - | - | - | - | - | - | - |
| Kacper Bajkiewicz | X | X | X | | X | X | X | |
| Jakub Bok | x | x | x | x | x | | | |
| Kamila Brzozowska | x | x | x | x | x | x | |
| Monika Jędrzejkowska| | | | | | | | |
| Karol Kęciński | X | X | X | ==X== | X | X | X | X |
| Szymon Kiczak | | | | | | | | |
| Szymon Kosakowski | x | x | x | x | x | | x | x |
| Denys Lukeniuk | x | x | x | x | | x | ==x== | x |
| Piotr Mańkowski | | | | | | | | |
| Mateusz Materek | | | | | | | | |
| Sonia Pawluk | | | | | | | | |
| Patryk Pęczak | X | X | X | X | X | X | X | |
| Bartosz Polaszek | | | | | | | | |
| Marcin Rogala | | x | | x | x | x | x | x |
| Aleksander Szymański| X | ==X== | ==X== | ==X== | X | X | | |
| Jakub Świgło | x | | x | x | | x | x | |
| Nikola Wrona | x | x | x | x | | x | x | |

Osoby rozwiązujące:

Zad 1: Jakub Świgło

Zad 2: Jakub Bok

Box model CSS:

+---margin------------------+
| |
| +---border-----------+ |
| | | |
| | +---padding--+ | |
| | | | | |
| | | CONTENT | | |
| | | | | |
| | +------------+ | |
| | | |
| +--------------------+ |
| |
+---------------------------+

padding - wypełnienie, zapobieganie przylegania tekstu do granic
border - obramowanie - styl ramki box'a
margin - margines - odległość box'a od innego

Właściwościami display, inline oraz block, możemy zmieniać układ danego elementu.
Przykładowo:
Znacznik`<span>` jest elementem liniowym, jeżeli zastosujemy na nim `display: block;` stanie się on elementem blokowym
Analogicznie, `<div>` jest blokowy, jeżeli zastosujemy `display: inline;` będzie on w kilku pudełkach liniowych

Zad 3: Aleksander Szymański
**Treść:** *Znajdź sposoby na wyśrodkowanie treści w ramach box-a. Jak to wygląda, gdy centrujemy tekst, a jak, gdy div-a? Ogólniej, jak wygląda centrowanie elementów typu block, a jak typu inline?*

**Centrowanie treści**
Do umiejscowienia treści w ramach boxa służy atrybut `text-align`. Możliwe wartośći:
- `left` - dopasowuje tekst do lewej
- `right` - dopasowuje tekst do prawej
- `center` - wyśrodkowuje tekst
- `justify` - ustawia wszystkie linie na równy rozmiar
- `initial` - ustawia domyślną wartość
- `inherit` - dziedziczy z nadrzędnego elementu

**Centrowanie div-a lub innych tagów**
Ogólnie jest wiele sposobów na wyśrodkownie pozycji elementów w boxie. Ja użyłem atrubutu `margin: auto`. Sam atrybut może przyjąć różne wartości:
- długość podaną w pixelach, centymetrach itd.
- procent - margines jest ustawiany na podany procent elementu nadrzędnego
- `auto` - wartość która wyśrodkowuje umiejscowienie elementu

*Centrowanie elementu typu `block` wyśrodkuje go poziomo w linii (będzie na środku linijki w boxie, gdzie się znajduje), a elementu `inline` wyśrodkuje go między słowami, pomiędzy którymi się znajduje*

**Inne możliwości centrowania elementów (nie użyte przeze mnie)**
- `margin-left: auto`, `margin-right: auto`
- `position: absolute`
- `float: dopasowanie`
- `padding` - centrowanie w pionie (razem z `text-align` wycentruje w pionie i poziomie)
- `line-hight` - należy ustawić wartość taką samą jak atrybutowi `height` i to wycetruje w pionie
Zad 4: Karol Kęciński

Zad 5: Szymon Kosakowski
https://drive.google.com/file/d/1eswaJzuW-rxIoCx2p6s4rO8TBZPHeRlL/view?usp=sharing

Element o pozycjonowaniu 'absolute' jest ustawiany odnośnie do ostatniego zakotwiczonego przodka (przodka z pozycjonowaniem innym niż static). Żeby wykonać wzór posługując się tym pozycjonowaniem należy każdy element 'ręcznie' ustawić - wybrać docelowy margines z każdej ze stron.

W pozycjonowaniu 'relative' elementy są ustawiane w odniesieniu do pozycji, w której znajdowały by się w pozycjonowaniu domyślnym. W związku z tym dodawane elementy będą znajdować się po sobie - nie trzeba wszystkich pozycji ustawiać ręcznie.

Zad 6: Patryk Pęczak

[Mini-tutorial](https://www.w3schools.com/css/css_float.asp)

Właściwość float jest używana do pozycjonowania i formatowania zawartości na stronie np.
do opływania tekstu przy obrazku, aby tekst ładnie nam przylegał.

Możlie wartości float:
- `left` - opływaj do lewej strony swojego kontenera
- `right` - opływaj do prawej strony swojego kontenera
- `inherit` - odziedzicz wartość float od swojego rodzica
- `none` - nie opływaj, element zostanie umieszczony w swoim miejscu domyślnym

Właściwość clear jest używana aby zabronić opływania elementów z właściwością float.

Możliwe wartości clear:
- `left` - zabroń opływania elementów które przylegają do lewej strony
- `right` - zabroń opływania elementów które przylegają do prawej strony
- `both` - zabroń opływania elementów które przylegają do obydwu stron
- `none` - pozwól na opływanie elementów z obydwu stron
- `inherit` - odziedzicz wartość clear po rodzicu

Przykłady:
[Przykład 1](https://pastebin.pl/view/b1895675)
[Przykład 2](https://pastebin.pl/view/2b4ad17f)

Zad 7: Denys Lukeniuk
[Link]( https://github.com/FelixKeetch/Studies/blob/master/KursWWW/Lista2/zadanie7.html)

        label{ ... }
        input{
            width: 150px;
            transition: 3.0s;
            /*Transition należący
            do elementu rozpowszechnia się na animację przejścia
            (:hover, :focus, ...) i powrotną. */
            ...
        }
        input:focus{
            
            width: 300px;
            background-color:seashell;
            
            /* transition: 2.0s;
            Dodane tutaj transition wpływa tylko na
            animację przejścia, przy usuwaniu kursora lub
            focusu element momentalnie wróci do 
            stałego wyglądu.
            */
        }
        div{
            background-color: black;
            color: white;
            width: 100px;
        }
        a div h1:hover{
            /*Animacja na tekście przycisku */
            color: thistle; 
        }

Zad 8: Marcin Rogala

https://www.w3schools.com/css/css3_flexbox.asp

Flexbox model pozwala na łatwiejsze ustawianie elementów na stronie.

Pierwszym krokiem jest stworzenie kontenera FlexBox, przez dodanie `display: flex;`.
Kontenery można modyfikować, na przykład zmieniając ich ustawienie - row lub column, lub środkowanie elementów.

Do kontenera dodajemy elementy, które automatycznie ustawiane są w odpowiedniej kolejności. Obiekty w kontenerze mogą mieć zmienne kształty i wymiary w zależności od ustawień.

Struktura kontenerów w zadaniu 8.
- body - główny kontener w ustawieniu pionowym
- header - pasek z menu strony
- elementy menu z odpowienio ustawionym float
- logo - niebieski pasek z logo
- title - pasek z tytułem
- main - pionowy kontener trzymający posty
- posty
- bottom - poziomy kontener trzymający informacje na dole strony
- 3 x informacje podane na dole strony
- footer

Moje rozwiązanie:
index.html - https://pastebin.pl/view/d2305ac2
style.css - https://pastebin.pl/view/644f3581