Tworzenie elementów interaktywnych

Formularze

Formularze umożliwiają przekształcenie stron WWW ze stron statycznych, biernie przeglądanych, w strony interaktywne.

Aby utworzyć formularz, zastosuj znacznik <form>. Otwierający znacznik zazwyczaj zawiera dwa atrybuty – method i action

Atrybut method określa metodę przesyłania danych do skryptu, który je obrabia. Stosowane są dwie metody get i post.Druga z nich jest stosowana wówczas, gdy formularz wysyła niewielką ilość danych na adres e‑mail.
Atrybut action jest pełnym adresem URL, pod który należy przesłać zawartość pól formularza, by otrzymać odpowiedź, np.

<form method="post" action="mailto:nazwa_uzytkownika@outlook.com">
…</form>

Linię do wczytywania tekstu tworzy się za pomocą samozamykającego się znacznika <input>, który służy do tworzenia wszystkich typów pól na formularzu. Określa je dodatkowy parametr type, np.

<input type="typ" name="nazwa" value="wartość"/>

Atrybut type="text" pozwala wprowadzać dane w linii do wczytywania łańcucha znaków np.:

<input type="text" name="nazwisko" size="40"/>

Atrybut type="checkbox" pozwala wprowadzić pole w postaci pola opcji (tak lub nie), np.:

<input type="checkbox" name="jezyk" value="angielski"/>angielski

Atrybut type="radio" pozwala wprowadzić pole wyboru (jeden z wielu), np.:

<input type="radio" name="plec" value="mezczyzna"/>mężczyzna
><input type="radio" name="plec" value="kobieta"/>kobieta

Atrybut type="submit" wstawia przycisk wysyłający zawartość formularza, np.:

<input type="submit" value="Wyślij do …"/>

Atrybut type="reset"spowoduje usunięcie wszystkich danych wpisanych do formularza, np.:

<input type="reset" value="Usuń wszystko"/>

Oprócz powyżej wymienionych w HTML5 wprowadzono między innymi następujące wartości atrybutu type znacznika <input>:

email - przeznaczony do wpisywania adresu e‑mail,
url - przeznaczony do wpisywania adresu URL,
tel - przeznaczony do wpisywania numeru telefonu.

R59bw4FMPf7f7

Ilustracja przedstawia atrybuty znacznika input oraz mark.Po lewej stronie zdjęcia widać różne atrybuty dla znacznika input. Obok atrybutu pokazano uzyskaną wizualizacje znacznika dla danego atrybutu.W górnej części strony znajduje się napis: Atrybuty znacznika input i ich wartości. Słowo input znajduje się w nawiasie ostrym lewostronnie i prawostronnie domkniętym. Poniżej wyszczególnione są następujące atrybuty. Atrybuty umieszczone są w nawiasach ostrych.input type = "checkbox" checked/. Utworzone pole wyboru. Pole jest zaznaczone.input type = "file"/. Utworzony przycisk zamieszczenia pliku. Na przycisku znajduje się napis: Wybierz plik. Obok przycisku znajduje się napis: Nie wybrano plikuinput type = "password" maxlenght = "8"/. Powstaje puste pole do wpisania hasła.input type = "radio" name = "płeć"/. Za nawiasem ostrym znajduje się dopisek: kobieta. Powstaje pole do zaznaczenia z etykietą: kobieta. input type = "submit" value = "Wyślij"/. Powstaje przycisk z napisem: Wyślij. input type = "reset" value = "Wyczyść formularz"/. Powstaje przycisk z napisem: Wyczyść formularz. input type = "text" size = "50"/ — Atrybuty znacznika input i jego wartości.
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

W formularzach spotyka się także znacznik <textarea>, pozwalający wprowadzić pole dla komentarza. Wprowadza on standardowe pole o 40 kolumnach i 4 wierszach. W ten sposób zostawisz miejsce, które wypełni czytelnik, jeśli uzna, że warto o czymś jeszcze napisać.

<textarea name="nazwa"></textarea>

Tworząc formularz, możesz skorzystać z rozwijanych list ułatwiających dokonanie wyboru. Do ich tworzenia wykorzystywany jest parzysty znacznik <select>, a kolejne pozycje listy są definiowane za pomocą polecenia <option>. Każda lista musi mieć nazwę deklarowaną poprzez przypisanie pożądanej wartości atrybutowi name, np.

<select name="nazwa">

Przykładowy kod listy rozwijanej

<select name="Ulubione przeglądarki">  
<option>Microsoft Edge</option>  
<option>Firefox</option>  
<option>Opera</option>  
<option>Safari</option>  
</select>

R1FthCKG8EzLR

Tworzenie formularzy w kodzie HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 1

Na podstawie powyższych informacji, w nowym pliku .html spróbuj wykonać poniżej przedstawiony formularz.

RjgJpGXI7f2gF

Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge ze stworzonym formularzem.W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Formularz. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa.Na górze strony znajduje się nagłówek pierwszego poziomu brzmiący: Ankieta statystyczna. Poniżej znajduje się napis: Zapraszamy do wypełnienia ankiety. Użyj przycisku prześlij do wysłania odpowiedzi. Słowo prześlij jest pogrubione. Poniżej komunikatu znajduje się formularz. Kolejne pola formularza.Etykieta Nazwisko. Za etykietą pole tekstowe do uzupełnienia.Etykieta e‑mail Za etykietą pole tekstowe do uzupełnienia.Etykieta: Płeć. Za etykietą pola wyboru: Mężczyzna, Kobieta. Żadne z pól nie jest zaznaczone.Etykieta: Ile masz lat?. Poniżej rozwijalne pole wyboru. Wybrany przedział od 6 do 12.Etykieta: W którym zawodzie chciałbyś pracować. Poniżej znajdują się następujące opcje z polem wyboru: Grafik komputerowy, Programista, Administrator sieci, Serwisant. Żadne z pól nie jest zaznaczone. Etykieta: Dlaczego chciałbyś wykonywać ten zawód?. Poniżej pole z tekstem do uzupełnienia. W polu znajduje się napis: To miejsce na odpowiedźPrzycisk z napisem: prześlij wynikPrzycisk z napisem: Wyczyść formularz — Strona internetowa z utworzonym formularzem
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Aby uzyskać pożądany efekt, musisz utworzyć nowy plik o wybranej nazwie np. formularz.html i edytować jego zawartość w edytorze tekstowym dodając podstawową strukturę dokumentu HTML:

<!DOCTYPE html>
<html> 
<head>
<title>Formularz</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="dane, informacje" /> 
<name="description" content="Strona do zdobywania informacji" />
</head> 
<body>
</body> 
</html>

Przypomnij sobie poznane wcześniej znaczniki nagłówków, akapitu oraz sposoby na formatowanie tekstu i przenoszenie go do nowej linii. Za pomocą poznanych technik spróbuj ułożyć elementy formularza na stronie, tak aby wyglądały jak na podanym wyżej zrzucie ekranu. W celu pogrubienia czcionki użyj znacznika <strong>. Linie oddzielające poszczególne części strony dodasz za pomocą znacznika <hr/>.

W ciele strony utwórz formularz za pomocą znacznika <form> z atrybutami method="post", action="mailto:" oraz enctype:

<form method="post" enctype="text/plain" action="mailto: podajswójemail@outlook.com">
</form>

W znaczniku <form> dodaj pierwsze widoczne na zrzucie ekranu pola formularza <input>. Nazwisko będzie typu text, a adres poczty elektronicznej typu email. Nie zapomnij nadać nazwy, pod którą wpisane dane zostaną zwrócone. Aby przenieść kolejne elementy do nowej linii użyj znacznika <br>:

<input name="Nazwisko" type="text"> <br/>  
<input name="email" type="email"/>

Pola jednokrotnego wyboru płci utworzysz dodając typ radio oraz nadając im tę samą nazwę w atrybucie name. Zwracane przez nie wartości po wysłaniu formularza określisz w atrybucie value. Etykiety znajdujące się obok to wpisany czysty tekst.

<input type="radio" name="thesex" value="mezczyzna"/>Mężczyzna  
<input type="radio" name="thesex" value="kobieta"/>Kobieta

Rozwijaną listę utworzysz znacznikiem <select>. Kolejne pozycje listy znajdują się w znaczniku <option> umieszczonym w rodzicu <select>. Nie zapomnij nadać liście nazwy pod którą zostanie zwrócony wybrany przedział wiekowy.

<select name="Wiek">  
<option>6-12</option>  
<option>12-18</option>  
<option>18-24</option>  
<option>24-30</option>  
<option>>30</option>
</select>

Pola w postaci opcji do zaznaczenia (tak lub nie) posiadają typ checkbox. Po wysłaniu formularza zwrócą swoją nazwę w postaci grafik=on.

<input type="checkbox" name="grafik"/>Grafik komputerowy<br/>  
<input type="checkbox" name="programista"/>Programista<br/>  
<input type="checkbox" name="siec"/>Administrator sieci<br/>  
<input type="checkbox" name="computer"/>Serwisant<br/>

Miejsce na dłuższą odpowiedź utworzysz za pomocą znacznika <textarea>

Najważniejsze przyciski całego formularza to submit oraz reset. Wartość wyświetlana w przyciskach umieszczona jest w atrybucie value. Ich kliknięcie spowoduje wysłanie formularza na podany w znaczniku <form> e‑mail lub usunięcie wszystkich uzupełnionych informacji w formularzu.

<input type="submit" value="Prześlij wyniki"/>
<input type="reset" value="Wyczyść formularz"/>

W załączniku poniżej znajduje się plik o rozszerzeniu .html. Zmień jego nazwę na formularz.html. Plik zawiera strukturę dokumentu HTML:

Linia 2. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny html zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny title zamknij nawias ostrokątny Formularz otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny charset znak równości cudzysłów utf minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Kowalski cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów dane przecinek informacje cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Strona do zdobywania informacji cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny h2 zamknij nawias ostrokątny Ankieta statystyczna otwórz nawias ostrokątny prawy ukośnik h2 zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny form method znak równości cudzysłów post cudzysłów enctype znak równości cudzysłów text prawy ukośnik plain cudzysłów action znak równości cudzysłów mailto dwukropek podajswójemail at outlook kropka com cudzysłów zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny p zamknij nawias ostrokątny Zapraszamy do wypełnienia ankiety kropka otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny p zamknij nawias ostrokątny Użyj przycisku otwórz nawias ostrokątny strong zamknij nawias ostrokątny Prześlij otwórz nawias ostrokątny prawy ukośnik strong zamknij nawias ostrokątny do wysłania odpowiedzi kropka otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny hr prawy ukośnik zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny strong zamknij nawias ostrokątny Nazwisko dwukropek otwórz nawias ostrokątny prawy ukośnik strong zamknij nawias ostrokątny otwórz nawias ostrokątny input name znak równości cudzysłów Nazwisko cudzysłów type znak równości cudzysłów text cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny strong zamknij nawias ostrokątny E minus mail dwukropek otwórz nawias ostrokątny prawy ukośnik strong zamknij nawias ostrokątny otwórz nawias ostrokątny input name znak równości cudzysłów email cudzysłów type znak równości cudzysłów email cudzysłów prawy ukośnik zamknij nawias ostrokątny otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny p zamknij nawias ostrokątny otwórz nawias ostrokątny strong zamknij nawias ostrokątny Płeć dwukropek otwórz nawias ostrokątny prawy ukośnik strong zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny input type znak równości cudzysłów radio cudzysłów name znak równości cudzysłów thesex cudzysłów value znak równości cudzysłów mezczyzna cudzysłów prawy ukośnik zamknij nawias ostrokątny Mężczyzna. Linia 27. otwórz nawias ostrokątny input type znak równości cudzysłów radio cudzysłów name znak równości cudzysłów thesex cudzysłów value znak równości cudzysłów kobieta cudzysłów prawy ukośnik zamknij nawias ostrokątny Kobieta. Linia 30. otwórz nawias ostrokątny p zamknij nawias ostrokątny Ile masz lat znak zapytania otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 31. otwórz nawias ostrokątny select name znak równości cudzysłów Wiek cudzysłów zamknij nawias ostrokątny. Linia 32. otwórz nawias ostrokątny option zamknij nawias ostrokątny 6 minus 12 otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 33. otwórz nawias ostrokątny option zamknij nawias ostrokątny 12 minus 18 otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 34. otwórz nawias ostrokątny option zamknij nawias ostrokątny 18 minus 24 otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 35. otwórz nawias ostrokątny option zamknij nawias ostrokątny 24 minus 30 otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 36. otwórz nawias ostrokątny option zamknij nawias ostrokątny zamknij nawias ostrokątny 30 otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 37. otwórz nawias ostrokątny prawy ukośnik select zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny p zamknij nawias ostrokątny otwórz nawias ostrokątny strong zamknij nawias ostrokątny W którym zawodzie chciałbyś lub chciałabyś pracować otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 41. otwórz nawias ostrokątny input type znak równości cudzysłów checkbox cudzysłów name znak równości cudzysłów grafik cudzysłów prawy ukośnik zamknij nawias ostrokątny Grafik komputerowy otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 43. otwórz nawias ostrokątny input type znak równości cudzysłów checkbox cudzysłów name znak równości cudzysłów programista cudzysłów prawy ukośnik zamknij nawias ostrokątny Programista otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 45. otwórz nawias ostrokątny input type znak równości cudzysłów checkbox cudzysłów name znak równości cudzysłów siec cudzysłów prawy ukośnik zamknij nawias ostrokątny Administrator sieci otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 47. otwórz nawias ostrokątny input type znak równości cudzysłów checkbox cudzysłów name znak równości cudzysłów computer cudzysłów prawy ukośnik zamknij nawias ostrokątny Serwisant otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 49. otwórz nawias ostrokątny p zamknij nawias ostrokątny Dlaczego chciałbyś lub chciałabyś wykonywać ten zawód znak zapytania otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 51. otwórz nawias ostrokątny textarea name znak równości cudzysłów odpowiedz cudzysłów zamknij nawias ostrokątny To jest miejsce na odpowiedź otwórz nawias ostrokątny prawy ukośnik textarea zamknij nawias ostrokątny otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 52. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 54. otwórz nawias ostrokątny input type znak równości cudzysłów submit cudzysłów value znak równości cudzysłów Prześlij wyniki cudzysłów prawy ukośnik zamknij nawias ostrokątny otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 55. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 57. otwórz nawias ostrokątny input type znak równości cudzysłów reset cudzysłów value znak równości cudzysłów Wyczyść formularz cudzysłów prawy ukośnik zamknij nawias ostrokątny otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 59. otwórz nawias ostrokątny prawy ukośnik form zamknij nawias ostrokątny. Linia 61. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 62. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

 
<!DOCTYPE html>
<html> 
<head>
<title>Formularz</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="dane, informacje" /> 
<name="description" content="Strona do zdobywania informacji" />
</head> 
<body> 

<h2> Ankieta statystyczna</h2>  

<form method="post" enctype="text/plain" action="mailto: podajswójemail@outlook.com">  

<p>Zapraszamy do wypełnienia ankiety. </p>
<p>Użyj przycisku <strong>Prześlij</strong> do wysłania odpowiedzi. </p>  
<hr/>  

<strong>Nazwisko: </strong><input name="Nazwisko" type="text"> <br/>  
<br/>
<strong>E-mail:</strong> <input name="email" type="email"/>  <br/>

<p><strong>Płeć: </strong>  </p>  
<input type="radio" name="thesex" value="mezczyzna"/>Mężczyzna  
<input type="radio" name="thesex" value="kobieta"/>Kobieta  

 
<p>Ile masz lat?</p>  
<select name="Wiek">  
<option>6-12</option>  
<option>12-18</option>  
<option>18-24</option>  
<option>24-30</option>  
<option>>30</option>  
</select>  

<p><strong>W którym zawodzie chciałbyś lub chciałabyś pracować</p> <br/>  

<input type="checkbox" name="grafik"/>Grafik komputerowy<br/>  

<input type="checkbox" name="programista"/>Programista<br/>  

<input type="checkbox" name="siec"/>Administrator sieci<br/>  

<input type="checkbox" name="computer"/>Serwisant<br/>  

<p>Dlaczego chciałbyś lub chciałabyś wykonywać ten zawód?</p>  

<textarea name="odpowiedz">To jest miejsce na odpowiedź</textarea><br/>
<br/>
  
<input type="submit" value="Prześlij wyniki"/><br/>
<br/> 
 
<input type="reset" value="Wyczyść formularz"/><br/>  

</form>

</body> 
</html>

RT0vfqkky0Zsv

Załącznik zawiera plik o rozszerzeniu html. Strona internetowa zawiera formularz.

Załącznik do pobrania strony internetowej z formularzem

Źródło: GroMar Sp. z o.o., Sławomir Szaruga, licencja: CC BY 3.0.

Plik HTML o rozmiarze 1.60 KB w języku polskim

Elementy blokowe i liniowe

Omawiane w poprzednich podrozdziałach elementy dzielimy na liniowe (wierszowe) oraz blokowe.

Elementy liniowe wstawione w wierszu pozostawiają w nim miejsce dla kolejnych elementów, a elementy blokowe zawsze wyświetlane są od nowej linii i zajmują całą jej powierzchnię. W tym przypadku następny element ukaże się poniżej, w kolejnej linii.

Rib2F59wiNdMS

Ilustracja przedstawiająca znacznik zamknięcia akapitu. Literka p poprzedzona ukośnikiem znajduje się wewnątrz nawiasów ostrych. Z lewej strony znajduje się nawias lewostronnie domknięty. Z prawej strony znajduje się nawias prawostronnie domknięty. — Znacznik zamknięcia na przykładzie akapitu.
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Elementy liniowe to np. <a>, <b>, <em>, <i>, <img>, <strong>, a elementy blokowe poznane do tej pory to: <p>, <h1>-<h6>, <ul>, <ol>, <li>, <dt>, <dl>, <dd>. Elementy liniowe mogą być zagnieżdżone w elemencie blokowym.
Tworząc stronę internetową, możesz pewne elementy HTML połączyć w sekcje z wykorzystaniem elementu blokowego o nazwie <div>.

<div>  
<img src="grafika.png" alt="robot"/>  
<ul>  
<li><a href="#"> Strona czołowa</a></li>   
<li><a href="druga.html">Strona druga</a></li>
<li><a href="trzecia.html">Strona trzecia</a></li>  
</ul>  
</div>

Jeżeli takich sekcji będzie więcej, musisz do ich rozróżnienia użyć tzw. identyfikatorów (w skrócie id) przyjmujących dowolne nazwy. Przypisujemy im wartości, tak jak atrybutom, pamiętając o znaku równości i cudzysłowach.
Oznaczmy powyższą sekcję <div> identyfikatorem id z wartością o nazwie header1.

<div id="header1">  
<img src="grafika.png" alt="robot"/>  
<ul>  
<li><a href="#"> Strona czołowa</a></li>  
<li><a href="druga.html">Strona druga</a></li>  
<li><a href="trzecia.html">Strona trzecia</a></li>  
</ul>  
</div>

Do wybranego id możesz się przenosić poprzez znacznik <a>. W atrybucie href dodaj nazwę identyfikatora poprzedzoną znakiem #:

<a href="#header1">Nagłówek</a>

Po kliknięciu słowa Nagłówek na stronie internetowej przeniesiesz się do miejsca, gdzie zaczyna się sekcja o id równym header1.

W większości przypadków, w momencie wskazania połączenia, użytkownik znajdzie się u góry strony WWW. Warto wówczas wprowadzić spis nagłówków i tytułów podrozdziałów, aby umożliwić odbiorcy przejście od razu do części strony, która go interesuje. W tym celu skorzystaj z dowolnych elementów blokowych, np. akapitów czy tytułów zawierających atrybut id:

<p id="identyfikator">To jest element p do którego odsyła łącze
wewnątrz dokumentu</p>

Następnie w wybranym miejscu na stronie wstaw łącze do tej sekcji.
Odnośnik do elementu identyfikowanego przez atrybut id zawiera wartość atrybutu id poprzedzoną znakiem #:

<a href="#id_elementu">tekst odnośnika</a>

np.

<a href="#identyfikator">Przejdź do rozdziału 3</a>

Uwaga!

Różne właściwości obiektom tego samego typu, znajdującym się w treści jednej strony, nadasz, posługując się pojęciem klasy. Używamy ich, stosując słowo class. Identyfikatory i klasy będą potrzebne, gdy poznasz na dalszych etapach edukacji Kaskadowe Arkusze Stylów i będziesz chciał się odwoływać do odpowiednich elementów HTML.

RM0zQSyYmYMEN

Podział strony na sekcje za pomocą kodu HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Poznawany przez ciebie język HTML5 wprowadził także do poprzedniej jego specyfikacji oznaczonej jako HTML 4.01, szereg innych zmian. Między innymi zrezygnował z niektórych znaczników i ich atrybutów, np. <font>, <center>, <frameset>, <u>, <big>, <strike>, a wprowadził nowe znaczniki takie jak np. <article>, <audio>, <dialog>, <footer>, <header>, <nav>, <section>, <video> - pozwalających na lepsze opisywanie struktury dokumentu oraz <canvas> umożliwiający rysowanie w oknie przeglądarki a także nowe typy formularzy, np. email, number, search, URL, tel. Korzystając np. ze znacznika <nav>, możesz obecnie zgrupować odnośniki do prezentowania innych podstron i stron WWW.
Nowe znaczniki w HTML5:

<section> – reprezentuje wybraną zwartą część dokumentu,
<nav> – sekcja dokumentu odpowiedzialna za nawigację, składająca się z odnośników,
<article> – zawiera część dokumentu z jego niezależną treścią np. artykuł,
<aside> – dodatkowa treść dokumentu luźno powiązana z resztą strony,
<embed> – umożliwia osadzenie muzyki,
<header> – przedstawia początkową, nagłówkową, część dokumentu,
<footer> – zawiera końcową część dokumentu, tzw. Stopkę,
<canvas> – umożliwia tworzenie dynamicznych animacji,
<dialog> – reprezentuje rozmowę,
<figure> – pozwala na powiązanie podpisu z rysunkiem lub filmem,
<time> – oznacza czas,
<command> – reprezentuje polecenie wywoływane przez użytkownika,
<audio>; <video> – pozwalają osadzić materiał multimedialny,
<wbr> – łamanie wiersza,
<mark> – wyeksponowanie tekstu.
<figure> – umożliwia utworzenie pojemnika dla grupy grafik,
<figcaption> – tworzy wspólny podpis dla grupy grafik.

Poniżej przedstawiono przykładu strony internetowej, uwzględniającej nowe znaczniki i atrybuty. Wyraźnie widać, że w języku HTML5 nacisk położono na strukturę dokumentu.

Sformatowany kod źródłowy:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny html zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny title zamknij nawias ostrokątny Dzieła sztuki otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny header zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny h1 zamknij nawias ostrokątny Światowe dzieła sztuki otwórz nawias ostrokątny prawy ukośnik h1 zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik header zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny nav zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów index kropka html cudzysłów zamknij nawias ostrokątny Strona główna otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów dziela kropka html cudzysłów zamknij nawias ostrokątny Dzieła sztuki światowej otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów tworcy kropka html cudzysłów zamknij nawias ostrokątny Twórcy uznanych dzieł sztuki otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny prawy ukośnik nav zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny section id znak równości cudzysłów wstep cudzysłów zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny header zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny h2 zamknij nawias ostrokątny Poznajemy dziela sztuki światowej otwórz nawias ostrokątny prawy ukośnik h2 zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny prawy ukośnik header zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny p zamknij nawias ostrokątny cudzysłów Dzieło sztuki jest rzadką przecinek trwałą wartością majątkową przecinek która oferuje swojemu właścicielowi usługi natury estetycznej otwórz nawias okrągły przyjemność estetyczna zamknij nawias okrągły przecinek społecznej otwórz nawias okrągły wyróżnienie i prestiż zamknij nawias okrągły oraz finansowej kropka Nie jest źródłem dochodów przecinek ale minus minus minus biorąc pod uwagę przecinek że ma charakter mobilny i może być korzystnie odsprzedane minus minus minus stanowi potencjalny obiekt alternatywnej lokaty finansowej cudzysłów kropka Tak dzieło sztuki definiuje Raymonde Moulin przecinek francuska socjolog kropka otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny prawy ukośnik section zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny div id znak równości cudzysłów content cudzysłów zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny div id znak równości cudzysłów page cudzysłów zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny section zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny article zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny header zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny h2 zamknij nawias ostrokątny Arcydzieła rzeźbiarstwa greckiego otwórz nawias ostrokątny prawy ukośnik h2 zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny prawy ukośnik header zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny div zamknij nawias ostrokątny. Linia 31. otwórz nawias ostrokątny p zamknij nawias ostrokątny Sztuka starożytnej Grecji powstała i rozwijała się po upadku kultury mykeńskiej spowodowanym w głównym stopniu najazdem Dorów kropka Za czas jej trwania przyjmuje się okres od ok kropka 1200 p kropka n kropka e kropka do I w kropka p kropka n kropka e kropka przecinek czyli do czasu podboju starożytnej Grecji przez Rzymian kropka Miała wpływ na całą późniejszą sztukę minus minus minus od starożytnego Rzymu do współczesności kropka Przy wykonywaniu elementów rzeźbiarskich pracował Fidiasz otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 32. otwórz nawias ostrokątny img src znak równości cudzysłów zeus kropka jpg cudzysłów alt znak równości cudzysłów Zeus Olimpijski cudzysłów width znak równości cudzysłów 180 cudzysłów height znak równości cudzysłów 220 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 33. otwórz nawias ostrokątny p zamknij nawias ostrokątny Ten posąg przedstawiał siedzącego na tronie Zeusa kropka W lewej dłoni trzymał berło przecinek na którego głowicy siedział orzeł kropka Na jego prawej dłoni stała bogini zwycięstwa Nike kropka Głowa Zeusa była przyozdobiona wieńcem z gałązek oliwnych kropka Był zdobiony złotem i kością słoniową kropka Tron również wykonano z kości słoniowej kropka Posąg Zeusa był największym i najbardziej znanym wizerunkiem Zeusa kropka Zeus przedstawiony przez Fidiasza jest mądrym i dobrotliwym mężczyzną przecinek który nie wzbudza lęku kropka. Linia 34. otwórz nawias ostrokątny prawy ukośnik p. Linia 35. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 36. otwórz nawias ostrokątny prawy ukośnik article zamknij nawias ostrokątny. Linia 37. otwórz nawias ostrokątny prawy ukośnik section zamknij nawias ostrokątny. Linia 38. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny aside zamknij nawias ostrokątny. Linia 40. otwórz nawias ostrokątny section zamknij nawias ostrokątny. Linia 41. otwórz nawias ostrokątny header zamknij nawias ostrokątny. Linia 42. otwórz nawias ostrokątny h3 zamknij nawias ostrokątny Inne dzieła otwórz nawias ostrokątny prawy ukośnik h3 zamknij nawias ostrokątny. Linia 43. otwórz nawias ostrokątny prawy ukośnik header zamknij nawias ostrokątny. Linia 44. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 45. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów malarstwo kropka html cudzysłów zamknij nawias ostrokątny Malarstwo otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 46. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów muzyka kropka html cudzysłów zamknij nawias ostrokątny Muzyka otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 47. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 48. otwórz nawias ostrokątny prawy ukośnik section zamknij nawias ostrokątny. Linia 49. otwórz nawias ostrokątny prawy ukośnik aside zamknij nawias ostrokątny. Linia 50. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 51. otwórz nawias ostrokątny footer zamknij nawias ostrokątny. Linia 52. otwórz nawias ostrokątny div zamknij nawias ostrokątny. Linia 53. Copyright ampersant copy dwukropek 2010 by otwórz nawias ostrokątny b zamknij nawias ostrokątny Autor otwórz nawias ostrokątny prawy ukośnik b zamknij nawias ostrokątny minus Wszelkie prawa zastrzeżone. Linia 54. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 55. otwórz nawias ostrokątny prawy ukośnik footer zamknij nawias ostrokątny. Linia 56. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 57. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

<!DOCTYPE html>
<html>
<head>
    <title>Dzieła sztuki</title>
</head>
<body>
<header>
    <h1>Światowe dzieła sztuki</h1>
</header>
<nav>
    <ul>
        <li><a href="index.html">Strona główna</a>
        <li><a href="dziela.html">Dzieła sztuki światowej</a>  
        <li><a href="tworcy.html">Twórcy uznanych dzieł sztuki</a>
    </ul>
</nav>
<section id="wstep">
    <header>
        <h2>Poznajemy dziela sztuki światowej</h2>
    </header>
    <p>"Dzieło sztuki jest rzadką, trwałą wartością majątkową, która oferuje swojemu właścicielowi usługi natury estetycznej (przyjemność estetyczna), społecznej (wyróżnienie i prestiż) oraz finansowej. Nie jest źródłem dochodów, ale --- biorąc pod uwagę, że ma charakter mobilny i może być korzystnie odsprzedane --- stanowi potencjalny obiekt alternatywnej lokaty finansowej". Tak dzieło sztuki definiuje Raymonde Moulin, francuska socjolog.</p>
</section>
<div id="content">
    <div id="page">
        <section>
            <article>
                <header>
                    <h2>Arcydzieła rzeźbiarstwa greckiego</h2>
                </header>
                <div>
                    <p>Sztuka starożytnej Grecji powstała i rozwijała się po upadku kultury mykeńskiej spowodowanym w głównym stopniu najazdem Dorów. Za czas jej trwania przyjmuje się okres od ok. 1200 p.n.e. do I w. p.n.e., czyli do czasu podboju starożytnej Grecji przez Rzymian. Miała wpływ na całą późniejszą sztukę --- od starożytnego Rzymu do współczesności. Przy wykonywaniu elementów rzeźbiarskich pracował Fidiasz</p>
                    <img src="zeus.jpg" alt="Zeus Olimpijski" width="180" height="220" />
                    <p>Ten posąg przedstawiał siedzącego na tronie Zeusa. W lewej dłoni trzymał berło, na którego głowicy siedział orzeł. Na jego prawej dłoni stała bogini zwycięstwa Nike. Głowa Zeusa była przyozdobiona wieńcem z gałązek oliwnych. Był zdobiony złotem i kością słoniową. Tron również wykonano z kości słoniowej. Posąg Zeusa był największym i najbardziej znanym wizerunkiem Zeusa. Zeus przedstawiony przez Fidiasza jest mądrym i dobrotliwym mężczyzną, który nie wzbudza lęku.
                    </p
                </div>
            </article>
        </section>
    </div>
    <aside>
        <section>
            <header>
                <h3>Inne dzieła</h3>
            </header>
            <ul>
                <li><a href="malarstwo.html">Malarstwo</a></li>
                <li><a href="muzyka.html">Muzyka</a></li>
            </ul>
        </section>
    </aside>
</div>
<footer>
    <div>
        Copyright &copy: 2010 by <b> Autor</b> - Wszelkie prawa zastrzeżone
    </div>
</footer>
</body>
</html>

Wygląd strony:

RHRMsvW7PLwYm

Przedstawiono zrzut ekranu strony internetowej zawierającej pogrubione nagłówki, hiperlinki, fotografię oraz krótkie opisy. — Przykładowy widok strony internetowej
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Zaprezentowaną powyżej stronę internetową oraz ilustrację wyobrażenia posągu Zeusa w Olimpii z 1815 roku pobierzesz poniżej:

R1UinzNHmlXUG

Załącznik zawiera archiwum zip z plikami strony internetowej.

Załącznik zawiera archiwum zip z plikami strony internetowej

Źródło: Sławomir Szaruga, GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik ZIP o rozmiarze 210.68 KB w języku polskim

Jeśli chcesz poćwiczyć tworzenie stron internetowych i szukasz pomysłów, przeczytaj poniższe propozycje:

Utwórz stronę internetową zawierającą informacje o twoim hobby. Tworząc stronę, postaraj się wykorzystać przedstawione w niniejszym rozdziale informacje o języku HTML.
Wykorzystując informacje przedstawione w niniejszym rozdziale, spróbuj przedstawić w postaci strony WWW osiągnięcia twojej szkoły w różnych rodzajach jej działalności (nauka, sport, osiągnięcia artystyczne). Wykonując stronę, skorzystaj z własnych materiałów zdjęciowych i graficznych prezentowanych w ramkach zagnieżdżonych.
Przedstaw w postaci witryny internetowej osiągnięcia polskich sportowców na ostatnich Mistrzostwach Europy w Lekkiej Atletyce. Na stronie głównej zawarte powinny być informacje ogólne o mistrzostwach, a na podstronach zdjęcia i teksty przybliżające poszczególnych medalistów. Do prezentacji wyników użyj tabel, a przekaz wzbogać o filmy i dźwięk.
Utwórz na stronie internetowej galerię 16 samodzielnie wykonanych zdjęć dotyczących dziedziny, którą się interesujesz. Niech każde ze zdjęć będzie w niej zaprezentowane w postaci miniatury, a po kliknięciu ukaże się w osobnym oknie (karcie) jego powiększenie. Wykorzystaj do tego celu tabelę oraz stosowne hiperłącza.

Spróbuj swoich sił, a jeśli napotkasz problem - przypomnij sobie informacje z powyższego materiału.

HTML51

Znacznik1

Białe znaki1

Encje HTML

Sekwencje znaków zaczynające się od „&”, pełniące funkcję specjalnego kodu, za pomocą którego można wstawić w dokumencie różne niestandardowe symbole.

R2vZZMx1LfKEH

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Zapamiętaj!

Język HTML umożliwia tworzenie stron internetowych, oznaczanie na nich rozdziałów, sekcji, tytułów, oddzielanie akapitów, załączanie tabel, ramek zagnieżdżonych, formularzy, grafiki i multimediów, oraz łączenie tego wszystkiego za pomocą odnośników.

Język CSS służy do formatowania elementów HTML (określania wyglądu strony, rozmiaru czcionek, koloru tła itp.). Poznasz go na dalszych etapach edukacji.

Ostatnią czynnością wieńczącą wysiłek włożony w przygotowanie strony WWW będzie jej umieszczenie na serwerze WWW. Umiejętności te ukształtujesz na innych etapach nauki, ale już teraz, dysponując wiedzą i umiejętnościami z zakresu projektowania i tworzenia stron internetowych w HTML, możesz przystąpić do realizacji poważnego projektu mającego postać witryny WWW.