---
# System prepended metadata

title: Kurs WWW. Lista nr 1
tags: [pwit, www20]

---

# Kurs WWW. Lista nr 1
###### 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 | 9 |
|----------------------- | - | - | - | - | - | - | - | - | - |
| Kacper	Bajkiewicz   | x | x | x | x | x | x | x | x |   |
| Jakub	Bok              |==x==|==x==|   | x |==x==|==x==| x | x |  |
| Kamila	Brzozowska   | x | x | x | x | x | x | x | x |   |
| Monika	Jędrzejkowska| x | x | x | x | x | x | x | x | x |
| Karol	Kęciński         |   |   |   |   |   |   |   |   |   |
| Szymon	Kiczak       | x | x |   |   | x |   | x |   |   |
| Szymon	Kosakowski   | x | x | x | x | x | x | x |x  |   |
| Denys	Lukeniuk         |==x==  | ==x==  | ==x==  | ==x==  | ==x== | ==x==  | ==x==  | ==x==  | x  |
| Piotr	Mańkowski        | x | x | x | x | x | x | x | x |   |
| Mateusz	Materek      |   |   |   |   |   |   |   |   |   |
|Sonia	Pawluk           |   |   |   |   |   |   |   |   |   |
| Marcin	Rogala       | x | x | x | x | x | x | x |   |   |
| Aleksander	Szymański| ==x== | ==x== | x | ==x== | ==x== | x | x | ==x==| x |
| Jakub	Świgło           |   |   |   |   |   |   |   |   |   |
| Nikola	Wrona        | x | x | x | x | x | x | x |   |   |
| Patryk	Pęczak       |   |   |   |   |   |   |   |   |   |


Osoby rozwiązujące:

zad 1: Szymon Kiczak

Raport. Szymon Kiczak

- zmiana zawartości title na 'WTF' - trzeba w sekcji `<head>` zamienić `<title>Strona główna - system zapisów<\title>` na `<title>WTF<\title>`
- popsucie linku do styli CSS - w linijce `<link type="text/css" href="/static/common-main_fc31b1de5d28c1e7e92f.css" rel="stylesheet">` wystarczy usunąć link, aby wyglądała ona tak `<link type="text/css" href="">` (wtedy CSS przestaje działać)
- powielenie ostatniego niusa i zmiana daty - trzeba skopiować całą sekcję zaczynającą się od `<div class="od-news-item">` (pierwsze wystąpienie), a następnie wkleić ją poniżej. Aby zmienić datę trzeba zmienić `<span class="od-news-date">Tuesday, 13.10.2020 · 11:54</span>` na inną, np. `<span class="od-news-date">Thursday, 14.10.2020 · 13:29</span>`.


zad 2: Jakub Bok

------------------------
Raport. Jakub Bok

Tworzymy pusty plik, następnie sprawdzamy go walidatorem.
Mówiąc pusty, mamy tutaj na myśli plik .html, który zawiera podstawowe elementy składni, takie jak:
- `<!DOCTYPE html>`
- `<title></title>`, w którym musi się znajdować niebiały znak
- Znaczniki `<head>` `<body` oraz `<html>`, w którym zapiszemy język strony -> `<html lang="pl">`
- Kodowanie znaków -> `<meta charset="UTF-8"/>`

Bez powyższych, walidator wykryje błędy w postaci braku podstawowych elementów strony.
https://github.com/jakubbok23/KursWWW/blob/main/index.html

zad 3: Marcin Rogala

Raport. Marcin Rogala

- Odnośniki ze ścieżką absolutną:   `<a href="/Users/marcinrogala/Desktop/sem7/www/l1/zadanie3a.html">`
- Odnośniki ze ścieżką wzdlędną:
`<a href="zadanie3a.html">`
- Odnośniki przez link:
`<a href="http://www.onet.pl">Onet</a>`

Znacznik base:
`<base href="../www/l1/">`
Pozwala na dodanie prefiksu do ścieżki odnośnika.
Przy `<a href="zadanie3a.html">` przejdziemy do `../www/l1/zadanie3a.html`.

Mechanizm "kotwic" pozwala na nawigowanie wewnątrz pliku. Tworząc kotwicę `<a href="#kotwica">Kotwica</a>` ustawiamy odnośnik to miejsca w pliku w którym postawimy `<a name="kotwica">Opis kotwicy</a>`.
    

------------------------
Raport. Denys Lukeniuk
> Odnośniki tworzymy przy pomocy znacznika `<a></a>`
Dodajemy odnośnik jako parametr href `<a href="twoj.link"></a>`
Możemy wkazać ścieżkę :
- bezwzględną:
`<a href="C:/Users/kichn/Documents/2Rok/KursWWW/Lista1/zadanie3a.html">Zadanie 3a</a>`
- względną (odnośnie folderu, w którym znajduje się plik)
 `<a href="zadanie3a.html" target="_blank">zadanie3a Wzgledny</a>`
- albo link zewnętrzny (www)
 `<a href="https://www.onet.pl" target="_blank">onet.pl</a>`
 
 
 https://github.com/FelixKeetch/Studies/blob/main/KursWWW/Lista1/zadanie3.html
> Kotwicę(En. anchor ) służy do łatwej nawigacji na jednej stronie. Tworzymy ją przy pomocy znacznika `<a></a>` używając #id znacznika, do którego chcemy przenieść się, jako znaczenie href.
 
 `<a href="#sectionTwo">Kliknij Tu żeby przenieść się to Sekcji 2</a>`
 `...`
`<span id = "sectionTwo">
    <h1>Sekcja 2</h1>
</span>`



https://github.com/FelixKeetch/Studies/blob/main/KursWWW/Lista1/zadanie3.html
> `<base></base>` Używamy w `<head></head>`, służy on do tego, żeby zmienić folder dla odnośnych odnośników poprzez własnośc href.
> 
Mamy taki katalog:
Lista1:
 * zadanie3k.html
 * zadanie3katalog
   - zadanie3k1.html
   - zadanie3k2.html
   - zadanie3k3.html
#### zadanie3k.html
`<head>`
`...`
`<base href="C:/Users/kichn/Documents/2rok/KursWWW/Lista1/zadanie3katalog/">`
`</head>
`

        <a href="zadanie3k1.html">zadanie3k1.html</a>
        <a href="zadanie3k2.html">zadanie3k2.html</a>
        <a href="zadanie3k3.html">zadanie3k3.html</a>

`

https://github.com/FelixKeetch/Studies/blob/main/KursWWW/Lista1/zadanie3k.html

 ------------------
zad 4: Aleksander Szymański
Raport. Aleksander Szymański
**Treść:** *Mapy.   Skopiuj  plik  index.html  jako  zadanie4.html.   Przygotuj  przykład  prostej  mapy,  w  której  wykorzystasz kształt koła i kwadrata.*

                Mapy w HTML służą do wyznaczania klikalnych obszarów w zdjęciu.

**Zdjęcie**
Dodajemy je za pomocą tagu `<img>`, który wymaga od nas podania mu dwóch atrybutów:
- `src` - ścieżkę do zdjęcia
- `alt` - tekst który zostanie wyświetlony, jeżeli z jakiegoś powodu zdjęcie nie bedzie wyświetlone.

Aby związać zdjęcie z mapą używamy atrybutu `usemap`, w którym wpisujemy nazwę mapy, która korzysta z tego zdjęcia (nazwę mapy wpisujemy w takim formacie `"#nazwa_mapy"`).

**Mapa**
Mapy dodajemy tagiem `<map>`, który posiada wymagany atrybut `name`, który ściśle wiąże mapę ze zdjęciem.
Aby wyznaczyć klikalne obszary wewnątrz mapy, używamy tagu `<area>`.
#### Atrybuty tagu `<area>`

- `shape` - kształt klikalnego obszaru, używany razem z atrybutem `coords` do ustalenia kształtu, pozycji na zdjęciu oraz rozmiaru klikalnego obszaru. Dostępne kształty:
    * `default` - całe zdjęcie
    * `rect` - prostokąt - w `coords` podajemy współrzędne dwóch wierzchołków, które leżą na jednej przekątnej
    * `circle` - okrąg - w `coords` podajemy współrzedne środka okręgu oraz promień
    * `poly` - wielokąt - w `coords` podajemy współrzędne wszystkich wierzchołków  
- `coords` - pozycja klikalnego obszaru na zdjęciu. Lewy górny róg zdjęcia ma współrzedne (0,0). Do wyznaczania współrzędnych obszarów można użyć stron internetowych np. [map coords generator](https://www.image-map.net/), w której wybieramy kształt obszaru i klikając myszką na zdjęciu wyznaczamy ten obszar. Następnie generujemy kod i mamy gotowe koordynaty.
- `href` - link do strony, na którą ma nastąpić przekierowanie po kliknięciu obszaru.
- `alt` - alternatywny tekst dla obszaru, który będzie widoczny jeżeli nie bedzie można wyświetlić zdjęcia. Atrybut ten jest wymagany jeżeli użyjemy atrybutu `href`.

#### Przykład mapy z trzema klikalnymi obszarami: 
```
<img src="map.png" alt="map" usemap="#navmap">

<map name="navmap">
	<area shape="rect" coords="100,50,300,150" href="index.html" alt="zadanie1">
	<area shape="rect" coords="400,50,600,150" href="zadanie2.html" alt="zadanie2">
	<area shape="circle" coords="350,275,100" href="zadanie3.html" alt="zadanie3">

</map>
```
---
zad 5: Jakub Bok

---

Raport. Jakub Bok

Tworzymy listę numerowaną, złożoną z 3 marek samochodów, następnie w środku każdej marki podlistę 3 modeli.

Tworzymy liste, otwierając ją znacznikiem `<list></list>`, następnie aby otworzyć listę numerowaną, używamy znacznika `<ol></ol>`, w której znacznikami `<li></li>` zawieramy elementy.
Aby zagnieździć podlisty, pod każdym z elementów, używamy znaczników `<ul></ul>`, by stworzyć listę nienumerowaną, analogicznie listując znacznikami `<li></li>`.
Dodatkowo, możemy zmienić rodzaje numerowań listy, z numerów na litery alfabetu, w znaczniku zawierając type ->`<ol type="a">`


https://github.com/jakubbok23/KursWWW/blob/main/zadanie5.html

---

zad 6: Denys Lukeniuk

---
Raport. Denys Lukeniuk.

![](https://i.imgur.com/PtZPGwv.png)

```
<table style="width:100%">
        <tr>
          <th>Indeks</th>
          <th>Ocena</th>
          <th>Grupa</th>
        </tr>
        <tr>
          <td>91044</td>
          <td>5.0</td>
          <td rowspan="2">Gr.1</td>
        </tr>
        <tr>
          <td>91055</td>
          <td>5.0</td>

        </tr>
        <tr>
            <td colspan="3">Razem</td>
        </tr>
      </table>
```
> `<tr> - dodaj nowy rząd`
> `<th> - dodaj nową kolumnę i daj nazwę`
> `<td> - dadaj nową komórkę`
> `<td rowspan="n"> - łączy n komórek wdół`
> `<td colspan="n"> - łączy n komórek wprawo`
---
zad 7: Nikola Wrona

Formularz tworzymy znacznikiem `<form></form>`.
Niektóre atrybuty:
`id` - id
`name` - nazwa formularza
`action`- ścieżka dostępu do pliku .php lub do adresu strony przetwarzającej dane z formularza
`method` - metoda przekazania danych formularza; `"post"` lub `"get"`
`enctype` - sposób kodowania danych dla formularza 

### Wybrane tagi:
**<input>**
Przybiera różne formy w zależności od wybranego typu.
|Przykładowe typy   |Krótki opis |
|-------------------|--------------|
|"radio"|Pozwala na wybranie jednej z podanych opcji.|
|"text" |Tworzy pole do wpisania jednej linii tekstu.|
|"checkbox"|Użytkownik zaznacza od 0 do kilku opcji.|
|"submit"|Tworzy przycisk do wysłania formularza.|
|"date"|Tworzy okienko z opcją wybrania daty.|
|"range"|Pole z suwakiem do wybrania liczby.|


`<input>` posiada również typy przeznaczone do pól tekstowych konkretnego formatu, np. `tel`, `email`, `url`, `number`, `password`.

Inne atrybuty (działające z wybranymi typami):
`value` - wartość
`pattern` - określa wzorzec; poniższy przykład wymusza wpisanie dwucyfrowej liczby
```<input type="text" name="liczba" pattern="[0-9]{2}">```
`placeholder` - treść podpowiedzi na wybranym polu formularza
`required` - element z tym atrybutem musi być wypełniony przed wysłaniem

**<textarea>**
Tworzy pole tekstowe, gdzie użytkownik może wprowadzić długi ciąg znaków (np. komentarz).
`rows` - wysokość pola podana w liczbie wierszy
`cols` - szerokość pola podana w liczbie znaków
`maxlenght` - maksymalna ilość wpisywanych znaków

```<textarea rows="5" cols="50"></textarea> ```


**<select>**
Tworzy wysuwaną listę rozwijaną z możliwymi opcjami `<option>`. Atrybut `size` pozwala na wyświetlenie kilku opcji na raz, a `multiple` na wybraniu przez użytkownika więcej niż jednej.

Jeśli chcemy domyślnie zaznaczyć określoną opcję uzupełniamy tag `<option selected>`.

Opcje możemy grupować stosując element `<optgroup></optgroup>`.

```
<select>`
    <optgroup label="grupa1">
        <option value="o1">opcja</option>
    </optgroup>
    <optgroup label="grupa2">
        <option value="o2" selected>inna opcja</option>
        <option value="o3">kolejna opcja</option>
    </optgroup>
</select>
```

**<fieldset>**
Znacznik pozwala na tematyczne pogrupowanie elementów formularza, tworzy obramowanie.
```
<form>
  <fieldset>
    <legend>Nagłówek</legend>
     ...
  </fieldset>
</form>
```

**<label>**
Tworzy etykietę dla danego pola formularzu.
```
<label for="imie">Imię:</label> 
<input id="imie" name="imie_uzytkownika" type="text"/>
```


---
zad 8: Kacper Bajkiewicz

Do zapisania obrazka w formacie Base64 użyłem kompilatora:
https://www.base64encode.org/enc/compiler/
A następnie zapisany obrazek wrzuciłem tak, jak polecono w artykule https://en.wikipedia.org/wiki/Data_URI_scheme.

```
<!DOCTYPE html>
<html lang="pl-PL">
    <head>
        <meta charset="UTF-8">
        <title>Zadanie 8</title>
    </head>
    <body>
        <img src="data:image/png;base64,(tu wstaw skompilowany obrazek)>
    </body>
</html>
```
---
zad 9: Monika Jędrzejkowska

Jednym ze sposobów na stworzenie szablonu strony w HTML5 jest użycie odpowiednich znaczników.

| Elemnt strony | Tag |
|---|---|
| Nagłówek | \<header\>\</header\>|
| Logo | \<picture\>\</picture\> |
| Menu główne | \<nav\>\</nav\> |
| "Okruszki" | \<ul\>\</ul\> |
| 4 ostatnie wpisy | \<section\>\</section\> |
| Wpisy/arykuły | \<article\>\</article\> |
| Najczęściej czytane artykuły | \<section\>\</section\> |
| Stopka | \<footer\>\</footer\> |

[Rozwiązanie zad. 9](https://drive.google.com/drive/folders/12g0ojKwx3ro8WmFMkB3JXJptWABXWXo4?usp=sharing)
