# 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)