Proces projektowania i budowy stron WWW wymaga zaplanowania ich struktury tekstowej i graficznej zawartości oraz połączeń między witrynami. Wykorzystuje się do tego różne edytory graficzne, ale najlepszy efekt uzyskasz korzystając z hipertekstowego języka znaczników HTML (ang. HyperText Markup Language). Umożliwia on oznaczanie na stronie internetowej rozdziałów, sekcji, tytułów, oddzielanie akapitów, zamieszczanie tabel i grafiki oraz łączenie tych materiałów za pomocą odnośników. Sposób wyświetlania przez przeglądarkę internetowąP3x0ZAdPQprzeglądarkę internetową zawartości strony opisuje się z wykorzystaniem języka CSS (ang. Cascading Style Sheets), którego w przyszłości również możesz się nauczyć. Poniższy materiał skupia się wyłącznie na hipertekstowym języku znaczników HTML. Nauczysz się projektowania stron WWW (zgodnego z obowiązującymi światowymi standardami) oraz korzystania z tekstowych i graficznych edytorów WWW, a efektem ich wykorzystania będzie wykonana przez ciebie atrakcyjna wizualnie strona internetowa, zawierająca łącza do innych stron, grafikę oraz multimedia.

RD8omWJNtWUTg
Standardowy układ strony internetowej
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.
2
Ćwiczenie 1

Dokonaj analizy znanych ci stron internetowych. Jakie znajdujące się na nich elementy możesz wykorzystać na swojej stronie WWW?

Jeśli masz problem ze znalezieniem odpowiednich stron w interneciePt1nhKeXyznalezieniem odpowiednich stron w internecie lub nie wiesz na jakie elementy stron WWW należy zwrócić uwagę, zajrzyj do podpowiedzi.

Rodzaje stron internetowych

Przeglądając zasoby internetu, oglądasz w wybranej przeglądarce strony statyczne lub dynamiczne. Strony statyczne mają stałą zawartość i wygląd. Zazwyczaj składają się z niewielkiej liczby podstron. Wszelkie zmiany muszą być wprowadzone w kodzie strony przez jej autora, więc ostateczny wygląd takich stron musi już być znany na etapie ich projektowania. Strony dynamiczne generowane są na bieżąco. Mogą one zmieniać swoją zawartość i wygląd poprzez wprowadzanie zmian na komputerze użytkownika.

RdVx6b7yvH9zI
Grafika ilustrująca podobieństwa i różnice między stronami statycznymi a dynamicznymi
Źródło: GroMar Sp. z o.o., Sławomir Szaruga, licencja: CC BY 3.0.
Podobieństwa i różnice stron statycznych i dynamicznych

Strony statyczne

Strony dynamiczne

Zawierają tę samą treść

Treść jest modyfikowana na bieżąco

Wszyscy widzą tę samą treść

Różni użytkownicy widzą odmienne treści

Pusta komórka

Możliwość korzystania z baz danych

Zasady projektowania stron WWW

W celu zapewnienia prawidłowego wyświetlania projektowanych stron WWW w różnych przeglądarkach, opracowane zostały zbiory reguł, które mówią, jak powinny być budowane strony i przeglądarki, aby bez problemów ze sobą współpracowały. Takie zbiory zasad nazywamy standardami. Najnowszym, obsługiwanym przez większość przeglądarek, jest standard nazwany HTML5HTML5HTML5 (wersja HTML5). Jest to dokładna specyfikacja techniczna opisująca wszystkie elementy dostępne w HTML. Kiedy przeglądarki wprowadzają nowe funkcje, w niedługim czasie dodawane są one do standardu, tak żeby wszystkie pozostałe przeglądarki uzupełniły braki i żeby strony wyświetlały się wszędzie w jednakowy sposób.

Zapamiętaj!

Standard HTML5 to dokładna specyfikacja techniczna, która szczegółowo opisuje wszystkie elementy dostępne w HTML. Możesz się z nim zapoznać pod adresem http://whatwg.org/html.

RhZKqaThQkEmj
Zrzut fragmentu okna strony: http://whatwg.org/html
Źródło: GroMar Sp. z o.o., Sławomir Szaruga, licencja: CC BY 3.0.

Tworzenie stron WWW za pomocą edytorów graficznych i tekstowych

Dla osób początkujących w procesie tworzenia stron internetowych, ułatwieniem jest możliwość tworzenia ich za pomocą edytorów graficznych. Autor, za pomocą myszki i opcji menu danego edytora, tworzy stronę WWW z gotowych elementów, umieszczanych na stronie. Niestety, prostota tworzenia nie zawsze pozwala na spełnienie oczekiwań twórcy strony.

Ciekawostka

Warto wiedzieć, że w edytorach tekstuPx2ArsNCeedytorach tekstuarkuszach kalkulacyjnychPPFd3jtJgarkuszach kalkulacyjnych (w pakiecie Microsoft Office lub LibreOffice) istnieje możliwość zapisu dokumentów tam stworzonych pod postacią strony internetowej. Wystarczy zapisać je w formacie strony Web, wybierając odpowiednią opcję z menu programu, w którym powstała. Na przykład, z menu Plik pakietu Office wybierz opcję Zapisz jako, a następnie kliknij Strona sieci Web. Uzyskany efekt może nie spełnić twoich oczekiwań co do wyglądu i z pewnością nie będzie idealny pod względem informatycznym.

1
Ćwiczenie 2

Spróbuj zapoznać się z kodem źródłowym dowolnej strony. W tym celu otwórz ją w wybranej przeglądarce i wybierz z menu kontekstowego (widocznego po naciśnięciu prawego klawisza myszy) opcję Wyświetl źródło strony lub Źródło strony.

Ćwiczenie 2

Zapoznaj się z poniższym kodem źródłowym przykładowej strony internetowej. W notesie wypisz powtarzające i pojawiające się charakterystyczne elementy znalezione w jej strukturze.

R1Spk4uThwQwM
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.
Linia 1. otwórz nawias ostrokątny wykrzyknik minus minus To jest komentarz minus minus 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 Przykładowa strona HTML 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 h1 zamknij nawias ostrokątny Witaj na mojej stronie wykrzyknik otwórz nawias ostrokątny prawy ukośnik h1 zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny p zamknij nawias ostrokątny To jest akapit tekstu kropka Możesz użyć znaczników otwórz nawias ostrokątny strong zamknij nawias ostrokątny strong otwórz nawias ostrokątny prawy ukośnik strong zamknij nawias ostrokątny lub otwórz nawias ostrokątny em zamknij nawias ostrokątny em otwórz nawias ostrokątny prawy ukośnik em zamknij nawias ostrokątny przecinek aby nadać tekstowi odpowiednie formatowanie kropka otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny p zamknij nawias ostrokątny Oto lista nieuporządkowana dwukropek otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny li zamknij nawias ostrokątny Pierwszy element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny Drugi element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny li zamknij nawias ostrokątny Trzeci element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny p zamknij nawias ostrokątny A to lista uporządkowana dwukropek otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny ol zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny li zamknij nawias ostrokątny Pierwszy krok otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny li zamknij nawias ostrokątny Drugi krok otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny li zamknij nawias ostrokątny Trzeci krok otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny p zamknij nawias ostrokątny Oto tabela z danymi dwukropek otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny td zamknij nawias ostrokątny Nazwa otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny td zamknij nawias ostrokątny Cena otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny td zamknij nawias ostrokątny Ilość otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny td zamknij nawias ostrokątny Jabłko otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 zł otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 31. otwórz nawias ostrokątny td zamknij nawias ostrokątny 5 sztuk otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 32. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 33. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 34. otwórz nawias ostrokątny td zamknij nawias ostrokątny Banan otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 35. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 zł otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 36. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 sztuki otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 37. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 38. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny td zamknij nawias ostrokątny Pomarańcza otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 40. otwórz nawias ostrokątny td zamknij nawias ostrokątny 4 zł otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 41. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 sztuki otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 42. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 43. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny. Linia 46. otwórz nawias ostrokątny p zamknij nawias ostrokątny Oto formularz przecinek który pozwala wprowadzić swoje imię i e minus mail dwukropek otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 48. otwórz nawias ostrokątny form action znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik www kropka example kropka com cudzysłów method znak równości cudzysłów get cudzysłów zamknij nawias ostrokątny. Linia 49. otwórz nawias ostrokątny label for znak równości cudzysłów name cudzysłów zamknij nawias ostrokątny Imię dwukropek otwórz nawias ostrokątny prawy ukośnik label zamknij nawias ostrokątny. Linia 50. otwórz nawias ostrokątny input type znak równości cudzysłów text cudzysłów id znak równości cudzysłów name cudzysłów name znak równości cudzysłów name cudzysłów value znak równości cudzysłów Jan cudzysłów zamknij nawias ostrokątny. Linia 51. otwórz nawias ostrokątny label for znak równości cudzysłów email cudzysłów zamknij nawias ostrokątny E minus mail dwukropek otwórz nawias ostrokątny prawy ukośnik label zamknij nawias ostrokątny. Linia 52. otwórz nawias ostrokątny input type znak równości cudzysłów email cudzysłów id znak równości cudzysłów email cudzysłów name znak równości cudzysłów email cudzysłów value znak równości cudzysłów jan at example kropka com cudzysłów zamknij nawias ostrokątny. Linia 53. otwórz nawias ostrokątny button type znak równości cudzysłów submit cudzysłów zamknij nawias ostrokątny Wyślij otwórz nawias ostrokątny prawy ukośnik button zamknij nawias ostrokątny. Linia 54. otwórz nawias ostrokątny prawy ukośnik form zamknij nawias ostrokątny. Linia 56. otwórz nawias ostrokątny p zamknij nawias ostrokątny Oto obraz kwiatu dwukropek otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 57. otwórz nawias ostrokątny img src znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik upload kropka wikimedia kropka org prawy ukośnik wikipedia prawy ukośnik commons prawy ukośnik thumb prawy ukośnik 4 prawy ukośnik 41 prawy ukośnik Sunflower podkreślnik from podkreślnik Silesia2 kropka jpg prawy ukośnik 320px minus Sunflower podkreślnik from podkreślnik Silesia2 kropka jpg cudzysłów alt znak równości cudzysłów Słonecznik cudzysłów width znak równości cudzysłów 320 cudzysłów height znak równości cudzysłów 240 cudzysłów zamknij nawias ostrokątny. Linia 59. otwórz nawias ostrokątny p zamknij nawias ostrokątny Oto odnośnik do Wikipedii dwukropek otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 60. otwórz nawias ostrokątny a href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org cudzysłów zamknij nawias ostrokątny Wikipedia otwórz nawias ostrokątny prawy ukośnik a 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.

Spróbuj wyświetlić również kod źródłowy dowolnej strony znalezionej w internecie. W tym celu otwórz ją w wybranej przeglądarce i wybierz z menu kontekstowego opcję Wyświetl źródło strony lub Źródło strony. Zwróć uwagę, jak bardzo jest on rozbudowany względem podanego wyżej przykładu.

3
Ćwiczenie 3

Poszukaj w internecieP5C5LR65wPoszukaj w internecie graficznego edytora stron WWW. Za jego pomocą wykonaj prostą stronę internetową na wybrany przez siebie temat. Możesz wykorzystać do tego jeden z gotowych szablonów. Po wykonaniu strony zapoznaj się z jej kodem źródłowym. Zapewne zdziwi cię długość i stopień skomplikowania kodu.

Jeśli nie wiesz gdzie zacząć, skorzystaj z podpowiedzi i zaproponowanego tam edytora graficznego.

Ćwiczenie 3

Pobierz tekstowy edytor kodu Visual Studio Code ze strony https://code.visualstudio.com. Następnie zapoznaj się z jego podstawowymi funkcjonalnościami.

Ważne!

Program Visual Studio Code posiada wiele funkcji i dostosowań mogących ułatwić pracę każdemu użytkownikowi. Zmiana kolorów, wysoki kontrast i powiększenie może poprawić widoczność edytora, a system nawigacji za pomocą klawiatury i zoptymalizowanie pod kątem czytników ekranu w znaczący sposób wpływa na wygodę jego użytkowania.

W podanym programie zmodyfikuj poniższy kod, tak aby była to strona poświęcona twojemu hobby, np. pisaniu wierszy. Nie musisz edytować elementów, których jeszcze nie znasz, zostaną one wyjaśnione w dalszej części materiału. Skup się na zmianie tekstu zawartego pomiędzy charakterystycznymi elementami znalezionymi w poprzednim ćwiczeniu.

Linia 1. otwórz nawias ostrokątny wykrzyknik minus minus To jest komentarz minus minus 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 Przykładowa strona HTML 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 h1 zamknij nawias ostrokątny Witaj na mojej stronie wykrzyknik otwórz nawias ostrokątny prawy ukośnik h1 zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny p zamknij nawias ostrokątny To jest akapit tekstu kropka otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny p zamknij nawias ostrokątny Oto lista nieuporządkowana dwukropek otwórz nawias ostrokątny prawy ukośnik p 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 Pierwszy element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny li zamknij nawias ostrokątny Drugi element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny Trzeci element listy otwórz nawias ostrokątny prawy ukośnik li 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 p zamknij nawias ostrokątny A to lista uporządkowana dwukropek otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny ol zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny li zamknij nawias ostrokątny Pierwszy krok otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny li zamknij nawias ostrokątny Drugi krok otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny li zamknij nawias ostrokątny Trzeci krok otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny p zamknij nawias ostrokątny Oto tabela z danymi dwukropek otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny td zamknij nawias ostrokątny Nazwa otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny td zamknij nawias ostrokątny Cena otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny td zamknij nawias ostrokątny Ilość otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny td zamknij nawias ostrokątny Jabłko otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 31. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 zł otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 32. otwórz nawias ostrokątny td zamknij nawias ostrokątny 5 sztuk otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 33. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 34. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 35. otwórz nawias ostrokątny td zamknij nawias ostrokątny Banan otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 36. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 zł otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 37. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 sztuki otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 38. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 40. otwórz nawias ostrokątny td zamknij nawias ostrokątny Pomarańcza otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 41. otwórz nawias ostrokątny td zamknij nawias ostrokątny 4 zł otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 42. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 sztuki otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 43. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 44. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny. Linia 46. otwórz nawias ostrokątny wykrzyknik minus minus To jest formularz przecinek który pozwala użytkownikowi wprowadzić swoje imię i e minus mail minus minus zamknij nawias ostrokątny. Linia 47. otwórz nawias ostrokątny wykrzyknik minus minus Atrybut action określa przecinek co się stanie po wysłaniu formularza minus minus zamknij nawias ostrokątny. Linia 48. otwórz nawias ostrokątny wykrzyknik minus minus Atrybut method określa sposób przesyłania danych minus minus zamknij nawias ostrokątny. Linia 49. otwórz nawias ostrokątny wykrzyknik minus minus W tym przypadku użyłem wartości cudzysłów get cudzysłów przecinek która dodaje dane do adresu URL minus minus zamknij nawias ostrokątny. Linia 50. otwórz nawias ostrokątny wykrzyknik minus minus Możesz użyć również wartości cudzysłów post cudzysłów przecinek która ukrywa dane przed adresem URL minus minus zamknij nawias ostrokątny. Linia 51. otwórz nawias ostrokątny wykrzyknik minus minus Atrybut name określa nazwę pola formularza minus minus zamknij nawias ostrokątny. Linia 52. otwórz nawias ostrokątny wykrzyknik minus minus Atrybut type określa typ pola formularza minus minus zamknij nawias ostrokątny. Linia 53. otwórz nawias ostrokątny wykrzyknik minus minus Atrybut value określa domyślną wartość pola formularza minus minus zamknij nawias ostrokątny. Linia 54. otwórz nawias ostrokątny wykrzyknik minus minus Znacznik label służy do opisania pola formularza minus minus zamknij nawias ostrokątny. Linia 55. otwórz nawias ostrokątny wykrzyknik minus minus Znacznik input służy do tworzenia pola formularza minus minus zamknij nawias ostrokątny. Linia 56. otwórz nawias ostrokątny wykrzyknik minus minus Znacznik button służy do tworzenia przycisku wysyłania formularza minus minus zamknij nawias ostrokątny. Linia 57. otwórz nawias ostrokątny wykrzyknik minus minus Atrybut for w znaczniku label musi być taki sam jak atrybut id w znaczniku input przecinek aby połączyć je ze sobą minus minus zamknij nawias ostrokątny. Linia 59. otwórz nawias ostrokątny p zamknij nawias ostrokątny Oto formularz przecinek który pozwala wprowadzić swoje imię i e minus mail dwukropek otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 61. otwórz nawias ostrokątny form action znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik www kropka example kropka com cudzysłów method znak równości cudzysłów get cudzysłów zamknij nawias ostrokątny. Linia 62. otwórz nawias ostrokątny label for znak równości cudzysłów name cudzysłów zamknij nawias ostrokątny Imię dwukropek otwórz nawias ostrokątny prawy ukośnik label zamknij nawias ostrokątny. Linia 63. otwórz nawias ostrokątny input type znak równości cudzysłów text cudzysłów id znak równości cudzysłów name cudzysłów name znak równości cudzysłów name cudzysłów value znak równości cudzysłów Jan cudzysłów zamknij nawias ostrokątny. Linia 64. otwórz nawias ostrokątny label for znak równości cudzysłów email cudzysłów zamknij nawias ostrokątny E minus mail dwukropek otwórz nawias ostrokątny prawy ukośnik label zamknij nawias ostrokątny. Linia 65. otwórz nawias ostrokątny input type znak równości cudzysłów email cudzysłów id znak równości cudzysłów email cudzysłów name znak równości cudzysłów email cudzysłów value znak równości cudzysłów jan at example kropka com cudzysłów zamknij nawias ostrokątny. Linia 66. otwórz nawias ostrokątny button type znak równości cudzysłów submit cudzysłów zamknij nawias ostrokątny Wyślij otwórz nawias ostrokątny prawy ukośnik button zamknij nawias ostrokątny. Linia 67. otwórz nawias ostrokątny prawy ukośnik form zamknij nawias ostrokątny. Linia 69. otwórz nawias ostrokątny wykrzyknik minus minus To jest odnośnik przecinek który pozwala użytkownikowi przejść do innej strony minus minus zamknij nawias ostrokątny. Linia 70. otwórz nawias ostrokątny wykrzyknik minus minus Atrybut href określa adres URL strony docelowej minus minus zamknij nawias ostrokątny. Linia 71. otwórz nawias ostrokątny wykrzyknik minus minus Tekst pomiędzy znacznikami a jest wyświetlany jako hiperłącze minus minus zamknij nawias ostrokątny. Linia 73. otwórz nawias ostrokątny p zamknij nawias ostrokątny Oto odnośnik do Wikipedii dwukropek otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 74. otwórz nawias ostrokątny a href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org cudzysłów zamknij nawias ostrokątny Wikipedia otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny. Linia 75. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 76. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.
Zapamiętaj!

Edytory graficzne stosowane są przez osoby rzadko zajmujące się tworzeniem stron WWW. Pojawiające się problemy przy tworzeniu strony pomoże ci rozwiązać znajomość kodowania w języku HTML. Podstawy języka HTML możesz poznać korzystając z edytorów tekstu, które oferują możliwość tworzenia i modyfikowania kodu źródłowego. Do edytorów tego rodzaju zaliczamy:

  • Notepad++ - rozbudowany darmowy edytor tekstowy, rozpowszechniany na licencji GNU GPL, z możliwością instalacji i pracy w różnych systemach operacyjnych. Dzięki kolorowym znacznikom i wcięciom ułatwia on proces tworzenia kodu strony internetowej.

R1HsSqBjAONSq
Okno edytora tekstowego Notepad++ z otwartym w nim kodem HTML.
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.
  • Visual Studio Code - darmowy edytor kodu źródłowego stworzony przez firmę Microsoft na zasadach otwartego kodu źródłowego. VS Code posiada kolorowanie składni dla wielu języków, wbudowane wsparcie dla debugowaniaDebugowaniedebugowania, refaktoryzacjiRefaktoryzacjarefaktoryzacji oraz zarządzania wersjami kodu.

Refaktoryzacja1
Refaktoryzacja

W programowaniu refaktoryzacja to proces czyszczenia i przekształcania istniejącego już kodu na postać mniej złożoną, czytelniejszą i bardziej przejrzystą jednak z pełnym zachowaniem oryginalnych funkcjonalności. Refaktoryzacja ma na celu utrzymanie wysokiej jakości kodu źródłowego. Pomimo, że nie wpływa zwykle na jego sposób działania, to jest nieodłącznym etapem programowania ułatwiającym pielęgnację oprogramowania i jego przyszłą rozbudowę.

Debugowanie1
Debugowanie

Proces wykrywania i usuwania wszelkich błędów oprogramowania (nazywanych również bug-ami (ang. pluskwa, robak; czyt. bag)) z kodu źródłowego programu. W debugowaniu programów pomagają inne, specjalne programy komputerowe zwane debuggerami stworzone do dynamicznej analizy, wykrywania i identyfikacji błędów.

Tworzenie stron WWW z wykorzystaniem języka HTML

Strony internetowe tworzymy, korzystając z języka HTML. Do pisania kodu w tym języku nie będzie ci potrzebny dostawca usług internetowych ani nawet podłączenie do internetu. Aktualnie powszechnie stosowanym standardem jest HTML5.

Dokument HTML to zwykły plik tekstowy, który możesz tworzyć i modyfikować praktycznie w każdym edytorze tekstu. Dla systemów WindowsLinux może to być wspomniany przed chwilą Notepad++ lub Visual Code Studio, dla systemu MacOS  Text Edit czy Sublime Text.

RZaVBbNaaUoml
Grafika z napisem HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Po utworzeniu pliku HTML zachowaj go na dysku w formacie pliku tekstowego z rozszerzeniem .html lub .htm. Przy zapisywaniu pliku opcją Zapisz jako ustaw sposób kodowania na UTF‑8. Do obejrzenia efektów pracy konieczna będzie dowolna przeglądarka, która odczytuje plik HTML z dysku lokalnego, a następnie przetwarza go i wyświetla tak samo, jak pliki z sieci WWW.

R1CTu4eysVrRv
Film przedstawia w jaki sposób utworzyć dokument HTML

Utworzony plik zawiera opis strony w języku HTML. Do tego celu używane są odpowiednie polecenia języka, które określają sposób zamieszczania na stronie tekstu, elementów graficznych oraz wstawiania odnośników do innych stron WWW. Polecenia (znacznikiZnacznikznaczniki) języka HTML opisujące stronę rozpoczynają się znakiem mniejszości <, zaś kończą znakiem większości >.

Większość poleceń HTML występuje w parach, istnieją jednak również takie, które występują pojedynczo. W przypadku poleceń występujących w parze, początkowe polecenie nazywane jest otwierającym, zaś końcowe poprzedzone jest zamykającym znakiem slash /.

R19xGaxCgejk4
Znacznik akapitu w HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Składnia poleceń jest więc następująca:

Linia 1. otwórz nawias ostrokątny znacznik zamknij nawias ostrokątny fragment dokumentu otwórz nawias ostrokątny prawy ukośnik znacznik zamknij nawias ostrokątny.

lub w przypadku polecenia pojedynczego:

Linia 1. otwórz nawias ostrokątny znacznik prawy ukośnik zamknij nawias ostrokątny.
Zapamiętaj!

W pliku HTML znajdują się znaczniki, natomiast po otworzeniu strony, przeglądarka zamienia je na elementy HTML. Element HTML to obiekt, który powstaje w wyniku interpretacji tekstowych znaczników.

Struktura dokumentu HTML

Na początku dokumentu powinien znajdować się znacznik <!DOCTYPE html>. Nazywany jest definicją typu i może być użyty tylko raz, na samym początku pliku. Informuje on przeglądarkę, że nie jest to zwykły plik tekstowy, ale dokument HTML. Z kolei znacznik <html> występujący zaraz za definicją typu wskazuje początek właściwego dokumentu i jednocześnie deklaruje język, w którym dokument zostanie napisany. Na samym końcu znajduje się znacznik </html>, który wskazuje jego koniec. Pomiędzy tymi znacznikami znajduje się treść dokumentu, która podzielona jest na dwie części: nagłówek <head> i część główną, tzw. ciało <body>.
Podstawowa struktura dokumentu, która odpowiada pustej stronie jest następująca:

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 … otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny body zamknij nawias ostrokątny … otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.
R2Tydr3udfYz4
Film prezentuje strukturę dokumentu HTML
1
Ćwiczenie 4

Utwórz katalogP1626rFMLUtwórz katalog nazwany twoim nazwiskiem. Uruchom edytor tekstu i utwórz plik tekstowy, zawierający podstawową strukturę dokumentu HTML, odpowiadającą pustej stronie. Zapisz plik w swoim katalogu jako plik tekstowy, nadając mu nazwę index z rozszerzeniem .html. Pamiętaj o zmianie sposobu kodowania na UTF‑8. Sprawdź wynik swojej pracy w przeglądarce.

Nagłówek strony <head>

Nagłówek wyznacza początek strony i zawiera informacje o tytule dokumentu i jego autorze, rodzaju zastosowanego języka programowania, oraz odwołania do innych powiązanych stron i zasobów.

Jedynym widocznym elementem na stronie jest tytuł wyświetlany na górnym pasku okna przeglądarki. Zawartość tytułu jest wykorzystywana przez wyszukiwarki przy poszukiwaniu dokumentów w sieci. Tytuł umieszcza się w nagłówku, posługując się znacznikiem <title>:

Linia 1. otwórz nawias ostrokątny title zamknij nawias ostrokątny Tytuł dokumentu otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny.

Zmodyfikowany nagłówek będzie wyglądał następująco:

Linia 1. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny title zamknij nawias ostrokątny Moja pierwsza strona otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny.
1
Ćwiczenie 5

Dodaj do kodu źródłowego utworzonego pliku tekstowego index.html tytuł dokumentu, który będzie widoczny na górnym pasku okna przeglądarki. Tytuł powinien być krótki, określający o czym będzie tworzona przez ciebie strona internetowa.

Oprócz tytułu, w nagłówku strony znajdują się informacje, umieszczane w pojedynczym znaczniku <meta>, z wykorzystaniem tzw. atrybutów oraz ich wartości, podawanych w cudzysłowach, np.

Linia 1. otwórz nawias ostrokątny meta name znak równości cudzysłów nazwa cudzysłów content znak równości cudzysłów treść cudzysłów prawy ukośnik zamknij nawias ostrokątny.

gdzie name to nazwa atrybutu, a content jest wartością tego atrybutu. Najbardziej rozpoznawalne rodzaje atrybutów znacznika <meta> to:

  • author - autor strony;

Linia 1. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów dane autora cudzysłów prawy ukośnik zamknij nawias ostrokątny.
  • description - opis strony do wykorzystania przez katalogi lub wyszukiwarki;

Linia 1. otwórz nawias ostrokątny meta name znak równości cudzysłów description cudzysłów content znak równości cudzysłów opis strony cudzysłów prawy ukośnik zamknij nawias ostrokątny.
  • generator - nazwa programu, przy pomocy którego powstała strona;

Linia 1. otwórz nawias ostrokątny meta name znak równości cudzysłów Generator cudzysłów content znak równości cudzysłów nazwa edytora cudzysłów prawy ukośnik zamknij nawias ostrokątny.
  • keywords - lista słów kluczowych (informujących wyszukiwarki o treściach strony) oddzielonych przecinkami;

Linia 1. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów wyraz1 przecinek wyraz2 przecinek wyraz3 cudzysłów prawy ukośnik zamknij nawias ostrokątny.
  • charset - określa kodowanie dokumentu HTML. W HTML5 używając polskich znaków korzystamy z kodowania domyślnego UTF‑8, będącego kodowaniem uniwersalnym pozwalającym na zapisanie dowolnych symboli:

Linia 1. otwórz nawias ostrokątny meta charset znak równości cudzysłów UTF minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny.
R3KtLBgvWLcMh
Film prezentuje w jaki sposób dodać w dokumencie nagłówek, kodowanie strony, autora, słowa kluczowe i krótki opis strony, który będzie wyświetlał się w wyszukiwarce.
2
Ćwiczenie 6

Do edytowanego wcześniej pliku tekstowego index.html dodaj autora, słowa kluczowe oraz opis strony. Możesz również edytować jej tytuł. Od teraz jest to twoja własna strona internetowa. Pomyśl nad tematem jaki chcesz na niej zaprezentować. Jeśli nie masz pomysłu, możesz wykorzystać temat Europejskich Pasm Górskich przedstawiony w filmach instruktażowych lub podążać krok po kroku za rozwiązaniami zaproponowanymi w podpowiedziach i odpowiedziach. W dalszych ćwiczeniach będziesz rozbudowywać swoją stronę internetową o kolejne elementy.

Część główna strony <body>

Zaraz po sekcji nagłówka występuje sekcja <body> … </body>, w której znajduje się właściwa zawartość dokumentu. W niej umieścisz treści, zdjęcia i multimedia, wykorzystując znaczniki, ich atrybuty i wartości.

Podstawowe znaczniki HTML i ich zastosowanie

Nagłówki

Żeby dodać tytuł i podtytuły w treści tworzonej strony, możesz skorzystać ze znaczników <h1>, <h2>, <h3>, <h4>, <h5> oraz <h6>. Nagłówek największy to <h1>, a najmniejszy to <h6>. Jeśli wiec tworzysz stronę WWW zawierającą artykuł, to do nadania mu tytułu możesz użyć znacznika <h1>. Nagłówki <h2> mogą wskazywać rozdziały, a <h3> podrozdziały. Tekst nagłówków jest pogrubiony.
Rozpoczynając pracę, zacznij od nagłówka pierwszego poziomu, umieszczając pomiędzy znacznikami <body> … </body> tytuł opisujący treść, którą chcesz zamieścić na stronie, np.

Linia 1. otwórz nawias ostrokątny h1 zamknij nawias ostrokątny Historia Internetu otwórz nawias ostrokątny prawy ukośnik h1 zamknij nawias ostrokątny.

Następnie wstaw nagłówki poziomu drugiego i trzeciego.
Zauważ, że nagłówki oddzielone są od siebie pustą linią.

R1ID8zhoxSuD1
Film przedstawia umieszczanie nagłówków w części głównej strony umieszczonej między znacznikami BODY
1
Ćwiczenie 7

Dodaj nagłówek głównej sekcji swojego dokumentu oraz nagłówki sygnalizujące treści przedstawiane w dalszej części tworzonej przez ciebie strony WWW.

Akapity

Tekst w dokumencie pisany jest w akapitach pomiędzy znacznikami <p> … </p>. Akapity są domyślnie rozdzielane, podobnie jak nagłówki, pustą linią. Przeglądarki ignorują białe znakiBiałe znakibiałe znaki (spacja, tabulacja, nowa linia), łącząc je w pojedynczą spację.
Tekst umieszczony między znacznikami <p> będzie przenoszony do następnej linii, kiedy na jej końcu zabraknie miejsca. Gdy zajdzie potrzeba przejścia do nowej linii wewnątrz akapitu, wykorzystuje się znacznik złamania linii <br/>. Na przykład powyższe zdania można przedstawić w sposób następujący:

Linia 1. otwórz nawias ostrokątny p zamknij nawias ostrokątny. Linia 2. Tekst na stronie internetowej będzie przenoszony do następnej linii przecinek otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 3. Kiedy na jej końcu zabraknie miejsca kropka otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 4. Gdy zajdzie potrzeba przejścia do nowej linii wewnątrz akapitu przecinek otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 5. Wykorzystuje się znacznik złamania linii. Linia 6. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny.

A oto efekt na stronie internetowej:

RgVsBlZqOJeET
Widok akapitu tekstu z zastosowanymi znacznikami line break
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.
RpjdXcsy7QRGS
Film przedstawia umieszczanie akapitów w dokumencie HTML

Znaki specjalne

Encje - w celu wstawiania w dokumencie różnych symboli możesz skorzystać z tzw. encji HTMLEncje HTMLencji HTML. Encja HTML to specjalny zestaw znaków określających nazwę encji, poprzedzonych znakiem & (ampersand), np.: „&lt;” - mniejszy niż < (ang. less than), „&gt;” - większy od > (ang. greater than).

Gdy zamierzasz na stronie umieścić zdanie:

„Każda informacja tekstowa znajdująca się wewnątrz znaczników <pre> … </pre> uznawana jest za sformatowaną za pomocą białych znaków.”,

to pożądany efekt uzyskasz, umieszczając w kodzie źródłowym zapis:

Linia 1. otwórz nawias ostrokątny p zamknij nawias ostrokątny Każda informacja tekstowa znajdująca się wewnątrz znaczników ampersant lt średnik pre ampersant gt średnik … ampersant lt średnik pre ampersant gt średnik uznawana jest za sformatowaną za pomocą białych znaków kropka otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny.

A oto rezultat na stronie internetowej.

RCju2Q1OmitMO
Widok strony dokumentu HTML z widocznym efektem zastosowania znaków specjalnych
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.
Zapamiętaj!

Jeżeli chcesz zaprezentować znacznik, musisz odpowiednio zakodować znaki.
Tekst poprawnie rozmieszczony na stronie powinien być również pozbawiony pojedynczych liter na końcach linii. W tym celu możesz pomiędzy spójnik, a słowo występujące bezpośrednio po nim, wprowadzić tzw. twardą spację, którą uzyskasz wprowadzając znacznik specjalny &nbsp;. Wyrazy połączone ze sobą tą spacją nie zostaną rozdzielone. Wprowadza on także dodatkową spację w dokumencie, a przez to umożliwia, po kilkakrotnym wpisaniu, zwiększanie odstępu między poszczególnymi wyrazami.

Uwaga!

Encji, np. &nbsp; nie wpisujemy pomiędzy znakami większości.

Więcej encji znajdziesz na stronie:
https://www.w3schools.com/charsets/ref_html_entities_a.asp

Do rozdzielenia wprowadzanych na stronie treści możesz wykorzystywać znacznik <hr>, który podobnie jak znacznik <br>, nie posiada znaczników zamykających.

R151f8WQwboct
Film przedstawia zastosowanie encji HTML
2
Ćwiczenie 8

W pliku index.html utwórz pierwszy i drugi akapit dokumentu (znaczniki <p></p>). W pierwszym akapicie, fragment tekstu w nim zawarty przenieś do następnego wiersza (znacznik <br/>). Wykorzystaj odpowiednią encję do utworzenia wcięcia drugiego z akapitów oraz rozdziel linią dwa ostatnie podrozdziały znajdujące się na realizowanej stronie.

Formatowanie tekstu

Tekst umieszczany na stronie pisany jest standardową czcionką. Możemy jednak to zmienić, formatując wygląd i wielkość czcionki. Znaczniki stosowane do tego celu można podzielić na dwie grupy: fizyczne i logiczne. Pierwsze wpływają bezpośrednio na czcionkę, np. pogrubiają ją, a drugie wpływają na wygląd tekstu, np. wyróżniają cytat lub fragment tekstu.

Znaczniki z grupy fizycznej to m. in. znaczniki <b>, <i>, <u>. Jeśli umieścisz tekst pomiędzy znacznikami <i> … </i>, to przeglądarka odwzoruje go jako pisany kursywą. Podobny efekt otrzymasz, gdy znacznik będzie miał postać <b> (styl pogrubiony) i <u> (styl podkreślony). Również tekst zawarty pomiędzy znacznikami <sup></sup> oraz <sub></sub> będzie zmodyfikowany, odpowiednio jako indeks górny i dolny, np.

Linia 1. otwórz nawias ostrokątny b zamknij nawias ostrokątny a otwórz nawias ostrokątny sup zamknij nawias ostrokątny 2 otwórz nawias ostrokątny prawy ukośnik sup zamknij nawias ostrokątny plus b otwórz nawias ostrokątny sup zamknij nawias ostrokątny 2 otwórz nawias ostrokątny prawy ukośnik sup zamknij nawias ostrokątny znak równości c otwórz nawias ostrokątny sup zamknij nawias ostrokątny 2 otwórz nawias ostrokątny prawy ukośnik sup zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik b zamknij nawias ostrokątny.

pozwoli na przedstawienie na stronie zapisu: aIndeks górny 2 + bIndeks górny 2 = cIndeks górny 2

Należy zwrócić uwagę na prawidłowe zagnieżdżanie znaczników. Znaczniki otwierane jako pierwsze powinny być zamykane jako ostatnie, np.

Linia 1. otwórz nawias ostrokątny b zamknij nawias ostrokątny otwórz nawias ostrokątny u zamknij nawias ostrokątny otwórz nawias ostrokątny i zamknij nawias ostrokątny Formatowanie tekstu otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik u zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik b zamknij nawias ostrokątny.

Aby wyróżnić niewielką ilość tekstu, należy użyć znaczników z grupy znaczników logicznych opisujących rolę, jaką pełni tekst na stronie internetowej (czy jest np. adresem), takich jak: <strong> lub <em>. Pierwszy z nich pogrubi czcionkę we fragmencie tekstu, a drugi spowoduje, że fragment tekstu będzie napisany czcionką pochyłą. Znaczniki te są nowym standardem w HTML5 i mają zastąpić stosowane we wcześniejszych standardach znaczniki <b> oraz <i> (ale na razie można ich zamiennie używać).
W wersji HTML5 masz także możliwość zaznaczenia fragmentu tekstu żółtym tłem, stosując znacznik <mark>, np.:

Linia 1. otwórz nawias ostrokątny mark zamknij nawias ostrokątny klasycyzm oświeceniowy przecinek klasycyzm renesansowy oraz neoklasycyzm kropka otwórz nawias ostrokątny prawy ukośnik mark zamknij nawias ostrokątny.
Rb6eu1b1KUNfP
Widok strony dokumentu HTML z widocznym efektem zastosowania znacznika mark
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.
R1cqu9bvSqfFU
Film prezentuje umieszczanie na stronie znaczników służących do formatowania tekstu.

Z kolei, chcąc zacytować czyjąś wypowiedź, możesz skorzystać ze znacznika <blockquote> … </blockquote> oznaczającego cytat. Jego zawartością są całe akapity, oznaczone dodatkowym wcięciem tekstu, np.:

Linia 1. otwórz nawias ostrokątny blockquote zamknij nawias ostrokątny Nie zrozumiecie sztuki przecinek póki nie zrozumiecie przecinek że w sztuce 1 plus 1 może dać każdą liczbę z wyjątkiem 2 kropka otwórz nawias ostrokątny prawy ukośnik blockquote zamknij nawias ostrokątny.

Informację o autorze możesz przedstawić w postaci tekstu wyświetlonego po nakierowaniu kursora na cytat. Efekt ten uzyskasz, jeżeli dodasz do znacznika <blockquote> atrybut title, np.: w powyższym przypadku umieszczając w znaczniku początkowym kodu zapis:

Linia 1. otwórz nawias ostrokątny blockquote title znak równości cudzysłów Autor dwukropek Pablo Picasso cudzysłów zamknij nawias ostrokątny.
RD2e6eJMRjz9p
Film prezentuje umieszczanie na stronie cytatu
1
Ćwiczenie 9

Korzystając z dwóch znaczników formatowania tekstu oraz znacznika <blockquote>, umieść na swojej stronie dowolny cytat. Ciekawe cytaty możesz znaleźć na stronie http://pl.wikiquote.org. Dodatkowo zastosuj znacznik <mark> na dowolnym fragmencie tekstu.

Listy

Język HTML5 pozwala grupować treści, wykorzystując do tego celu trzy rodzaje list:

  • nieuporządkowaną (punktową),

  • uporządkowaną (numerowaną),

  • definiowaną.
    Listę punktową utworzysz używając znacznika <ul>, a listę numerowaną - używając znacznika <ol>. Wewnątrz list jedynym dopuszczalnym znacznikiem jest <li>. Tylko wewnątrz niego zawarte mogą być kolejne elementy listy. Zawartością znacznika <li> może być zarówno tekst, jak i kolejne listy, tzw. zagnieżdżone.

Linia 1. otwórz nawias ostrokątny h1 zamknij nawias ostrokątny Ranking wartościowych filmów dokumentalnych otwórz nawias ostrokątny prawy ukośnik h1 zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dramaty otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny ol zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny li zamknij nawias ostrokątny Człowiek ringu otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny li zamknij nawias ostrokątny Pianista otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny li zamknij nawias ostrokątny Piękny umysł otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dokumentalne otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny ol zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny li zamknij nawias ostrokątny Wielka cisza otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny Duśka otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny Biograficzne otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny ol zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny li zamknij nawias ostrokątny Generał Nil otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny li zamknij nawias ostrokątny Bogowie otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny li zamknij nawias ostrokątny Świadectwo otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny.
R1U13LZYEDeW5
Widok strony z listą numerowaną i nienumerowaną
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Aby uzyskać inny rodzaj wyróżnienia listy punktowej (standardowo kółko), należy użyć Kaskadowych Arkuszy Stylów (ang. Cascading Style Sheets, w skrócie CSS), o których dowiesz się później. Natomiast w listach uporządkowanych można zmienić sposób oznaczania elementów listy, korzystając z atrybutów type oraz start. Atrybut start pozwala na rozpoczęcie numeracji od dowolnej liczby. Istnieje możliwość zastosowania jednego z pięciu sposobów numerowania elementów listy:

  • type="A" - wielkie litery alfabetu (A, B, C, D),

  • type="a" - małe litery alfabetu (a, b, c d),

  • type="I" - wielkie cyfry rzymskie (I, II, III, IV),

  • type="i" - małe cyfry rzymskie (i, ii, iii, iv),

  • type="1" - cyfry arabskie.

Przykładowo, lista numerowana wielkimi cyframi rzymskimi, rozpoczynająca się od IV ma postać:

Linia 1. otwórz nawias ostrokątny ol type znak równości cudzysłów I cudzysłów start znak równości cudzysłów 4 cudzysłów zamknij nawias ostrokątny.
Uwaga!

Listy są wprowadzane w większej odległości od marginesu niż akapit.

Trzecim rodzajem listy jest lista definicyjna, służąca do definicji różnych pojęć. Rozpoczyna się ona znacznikiem <dl>, a jej elementy znacznikami <dt>. Wyjaśnienie pojęcia zawarte jest pomiędzy znacznikami <dd>. Znaczniki te są sparowane.

RxZGFWMiGi2d6
Struktura listy definicyjnej
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.
RG5hJK6auwcO9
Film przedstawia tworzenie list w HTML
2
Ćwiczenie 10

Wykorzystując znaczniki <ul> oraz <li> zamień nagłówki <h2> w tworzonej przez siebie stronie internetowej na listę wyliczeniową, w której elementy oznaczone są małymi literami.

Tabele

Do wstawiania tabel w dokumentach HTML służą trzy podstawowe polecenia: <table>, <tr>, oraz <td>. Tworzenie tabeli rozpoczyna się od wpisania znacznika <table>, a następnie należy określić liczbę kolumn i wierszy. Wiersze tabeli zdefiniuj za pomocą znacznika <tr>, natomiast jej kolumny za pomocą znacznika <td>.

Każda tabela powinna mieć obramowanie. W HTML5 atrybut border pozwala zadecydować, czy obramowanie ma być włączone (border="1") czy wyłączone (border="*").

Ważne!

Styl obramowania reguluje się za pomocą Kaskadowych Arkuszy Stylów (ang. Cascading Style Sheets, w skrócie CSS).

Linia 1. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny td zamknij nawias ostrokątny Pierwszy wiersz przecinek pierwsza komórka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny td zamknij nawias ostrokątny druga komórka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny td zamknij nawias ostrokątny Drugi wiersz przecinek pierwsza komórka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny td zamknij nawias ostrokątny druga komórka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny.
RXauzk0xjjNKb
Przykładowa tabela w dokumencie HTML
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Ilustracja przedstawia przykładową strukturę tabeli bez wiersza nagłówkowego. Dodatkowo przedstawiona na zdjęciu tabela ma włączone obramowanie.

Pierwszy wiersz, pierwsza komórka

druga komórka

Drugi wiersz, pierwsza komórka

druga komórka

Nagłówek tabeli możesz utworzyć, stosując zamiast znacznika <td>, znacznik <th>, pogrubiający informacje zawarte w danej komórce.

Linia 1. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny th zamknij nawias ostrokątny Imię otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny th zamknij nawias ostrokątny Nazwisko otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny td zamknij nawias ostrokątny Bilbo otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny td zamknij nawias ostrokątny Baggins otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny td zamknij nawias ostrokątny Peregrin otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny td zamknij nawias ostrokątny Tuk otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny.
R190zVORJoHcg
Przykładowa tabela w dokumencie HTML
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Ilustracja przedstawia przykładową strukturę tabeli z wierszem nagłówkowym. Dodatkowo przedstawiona na zdjęciu tabela ma włączone obramowanie.

Imię

Nazwisko

Bilbo

Baggins

Peregrin

Tuk

Można wykorzystać go także do nazywania wierszy:

Linia 1. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny th zamknij nawias ostrokątny Imię otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny td zamknij nawias ostrokątny Bilbo otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny td zamknij nawias ostrokątny Peregrin otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny th zamknij nawias ostrokątny Nazwisko otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny td zamknij nawias ostrokątny Baggins otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny td zamknij nawias ostrokątny Tuk otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny.
RTcvDEeBxCYKI
Przykładowa tabela w dokumencie HTML
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Ilustracja przedstawia przykładową strukturę tabeli z pionowym wierszem nagłówkowym. Dodatkowo przedstawiona na zdjęciu tabela ma włączone obramowanie.

Imię

Bilbo

Peregrin

Nazwisko

Baggins

Tuk

Do tabeli możesz dodać również tytuł. Wystarczy, jeśli wewnątrz znacznika <table> umieścisz znacznik <caption>.

Linia 1. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny caption zamknij nawias ostrokątny Ważne informacje z giełdy otwórz nawias ostrokątny prawy ukośnik caption zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny th zamknij nawias ostrokątny Pierwszy wiersz przecinek pierwsza komórka otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny th zamknij nawias ostrokątny druga komórka otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny td zamknij nawias ostrokątny Drugi wiersz przecinek pierwsza komórka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny td zamknij nawias ostrokątny druga komórka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny.
RZe1Kc1ot0kJH
Przykładowa tabela w dokumencie HTML
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Ilustracja przedstawia przykładową strukturę tabeli z wierszem nagłówkowym oraz dodanym tytułem tabeli. Dodatkowo przedstawiona na zdjęciu tabela ma włączone obramowanie.

Ważne informacje z giełdy

Pierwszy wiersz, pierwsza komórka

druga komórka

Drugi wiersz, pierwsza komórka

druga komorka

Prezentacja danych w tabelach wymaga często łączenia komórek w obrębie tego samego wiersza, bądź też wewnątrz pojedynczej kolumny. Służą do tego atrybuty colspanrowspan, które można stosować w znaczniku <td>. Atrybut colspan powoduje, ze komórka powiększa się przez połączenie wskazanych kolumn z prawej strony. Wartością tego atrybutu jest liczba określająca, z ilu kolumn ma zostać złożona komórka. Atrybut rowspan powoduje, że komórka powiększa się przez połączenie wskazanych wierszy poniżej tej komórki. Wartością tego atrybutu jest liczba określająca, z ilu wierszy ma zostać złożona komórka.

Linia 1. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny td rowspan znak równości cudzysłów 2 cudzysłów colspan znak równości cudzysłów 2 cudzysłów zamknij nawias ostrokątny 1 otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny td zamknij nawias ostrokątny 4 otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny td zamknij nawias ostrokątny 5 otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny td zamknij nawias ostrokątny 6 otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny.
R1X5KsFLvTs7P
Przykładowa tabela w dokumencie HTML
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Ilustracja przedstawia przykładową strukturę tabeli bez wiersza nagłówkowego w której zastosowano scalanie wierszy i kolumn. Dodatkowo przedstawiona na zdjęciu tabela ma włączone obramowanie.

1

2

3

4

5

6

Przeglądarki określają domyślnie szerokość tabeli w taki sposób, aby zmieściła się w niej zawartość wszystkich komórek.

R1QrSOjEKOIou
Film prezentuje tworzenie tabel w HTML
2
Ćwiczenie 11

Na tworzonej przez siebie stronie internetowej wstaw tabelę, o co najmniej trzech kolumnach i wierszach oraz tytule, zawierającą informacje dotyczące wybranej przez ciebie tematyki.

Obrazy

Poza tekstem, na strony WWW możesz wstawić grafikę. Służy do tego znacznik <img> z atrybutem src, określającym nazwę pliku. Znacznik ten nie potrzebuje znacznika zamykającego. Wstawiana grafika powinna być zapisana w formacie GIF, JPG, PNG lub SVG (format stworzony do wykorzystania na stronach internetowych).
Przykładowo:

Linia 1. otwórz nawias ostrokątny img src znak równości cudzysłów nazwa kropka png cudzysłów zamknij nawias ostrokątny.

Grafika zostanie wyświetlona po lewej stronie względem otaczającego tekstu.

RA061Yj64d1qQ
Zrzut ekranu przykładowej strony internetowej
Źródło: GroMar Sp. z o.o., Mróz Kamil, licencja: CC BY 3.0.

Istotne jest, aby znacznik <img> uzupełnić o atrybut alt, którego wartością jest tekst opisujący wstawioną grafikę. Będzie on przydatny wówczas, gdy przeglądarka nie będzie mogła odnaleźć źródła grafiki, np.

Linia 1. otwórz nawias ostrokątny img src znak równości cudzysłów pies kropka png cudzysłów alt znak równości cudzysłów Pies cudzysłów zamknij nawias ostrokątny.

Warto dodać także atrybut title, który będzie wyświetlany w momencie, gdy najedziemy kursorem myszy na grafikę, np.

Linia 1. otwórz nawias ostrokątny img src znak równości cudzysłów pies kropka png cudzysłów alt znak równości cudzysłów pies cudzysłów title znak równości cudzysłów Pies Yoki cudzysłów zamknij nawias ostrokątny.

Kolejne atrybuty pozwalają na określenie wysokości (height) i szerokości (width) wczytywanej grafiki, np.

Linia 1. otwórz nawias ostrokątny img src znak równości cudzysłów pies kropka png cudzysłów alt znak równości cudzysłów Pies cudzysłów title znak równości cudzysłów Pies Yoki cudzysłów width znak równości cudzysłów 188 cudzysłów. Linia 2. height znak równości cudzysłów 220 cudzysłów zamknij nawias ostrokątny.

Nie należy używać tej możliwości jako podstawowego sposobu zmiany rozmiaru grafiki. Na stronie powinna być umieszczana grafika wcześniej przygotowana (skalowana) w programie graficznym.

Ponieważ znacznik <img> tworzy element wierszowy (liniowy), można umieścić kilka grafik obok siebie, w jednym wierszu. Ponadto w HTML5 istnieje znacznik <figure>, umożliwiający utworzenie kontenera (pojemnika) dla grupy grafik, które mogą otrzymać wspólny podpis definiowany za pomocą znacznika <figcaption>. Powinien on znajdować się wewnątrz znacznika <figure>, np.

Linia 1. otwórz nawias ostrokątny figure zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny img src znak równości cudzysłów zdjecie1 kropka jpg cudzysłów alt znak równości cudzysłów Dalia cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny img src znak równości cudzysłów zdjecie2 kropka jpg cudzysłów alt znak równości cudzysłów Owoce cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny img src znak równości cudzysłów zdjecie3 kropka jpg cudzysłów alt znak równości cudzysłów Aster kremowy cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny img src znak równości cudzysłów zdjecie4 kropka jpg cudzysłów alt znak równości cudzysłów Astry niebieskie cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny figcaption zamknij nawias ostrokątny Zdjęcia minus minus minus Kwiaty jesienne otwórz nawias ostrokątny prawy ukośnik figcaption zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny prawy ukośnik figure zamknij nawias ostrokątny.
RhQWlZwRjiL1F
Widok strony ze wstawionymi fotografiami
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.
R1A9409QymAwC
Film przedstawia wstawianie grafiki poprzez kod HTML
Zapamiętaj!

Przy kilku plikach graficznych na stronie utwórz na nie osobny podfolder (nazwany np. ilustracje) i twórz odwołania do pliku, poprzedzając w kodzie jego nazwę ścieżką dostępu, np.

Linia 1. otwórz nawias ostrokątny img src znak równości cudzysłów ilustracje prawy ukośnik nazwa kropka gif cudzysłów prawy ukośnik zamknij nawias ostrokątny.
2
Ćwiczenie 12

Korzystając ze znacznika <img> oraz jego atrybutów, umieść na tworzonej przez ciebie stronie zdjęcie (JPG) lub rysunek (GIF). Pamiętaj, aby plik z grafiką znajdował się w twoim folderze, a jego nazwa nie zawierała polskich znaków oraz dużych liter.

Odnośniki

Jak już zapewne wiesz, odnośniki (hiperłącza) to odsyłacze do innych stron internetowych. Połączenia definiowane są za pomocą znacznika rozpoczynającego <a> oraz kończącego </a>, wewnątrz których zawarte są informacje określające hiperłącza.

Etykieta określająca połączenie do przykładowego adresu w Internecie ma postać

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów http dwukropek prawy ukośnik prawy ukośnik www kropka zpe kropka gov kropka pl cudzysłów zamknij nawias ostrokątny Platforma Edukacyjna otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.

gdzie:

  • <a> - etykieta otwierająca;

  • href="http://www.zpe.gov.pl" - atrybut z docelowym adresem hiperłącza, czyli miejsce gdzie przekieruje cię link po kliknięciu w atrybut;

  • Platforma Edukacyjna - treść odnośnika na stronie internetowej, która przeniesie na wskazany adres;

  • </a> - etykieta zamykająca.

R1XpPbRbfIVVy
Przykładowy link z wyodrębnieniem elementów jego struktury
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Odnośniki <a> mogą posiadać atrybut target, którego wartość _blank mówi, że odnośnik otworzy się w nowym oknie, a wartość _self, że odnośnik otworzy się w tym samym oknie.

Istnieją dwa rodzaje hiperpołączeń:

  • relatywne, opisujące połączenie z plikiem znajdującym się w tym samym folderze, co dokument zawierający hiperpołączenie, np.

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów inform kropka html cudzysłów zamknij nawias ostrokątny Wiadomości otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny przecinek.

gdzie:

    • inform.html jest połączeniem z plikiem o podanej nazwie, znajdującym się w tym samym katalogu co plik index.html. Połączeń relatywnych powinno się używać łącząc dokumenty, które zostały stworzone własnoręcznie, gdyż to twórca określa miejsce, gdzie są one przechowywane.

  • absolutne, zawierające pełny adres miejsca docelowego, np.

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik www kropka gov kropka pl cudzysłów zamknij nawias ostrokątny Strona rządowa otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.

Hiperpołączenia do innych miejsc w sieci można również tworzyć z wykorzystaniem grafik. Polega to na umieszczeniu znacznika <img> wewnątrz znacznika hiperpołączenia <a>, np.

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów koty kropka html cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny img src znak równości cudzysłów kot kropka gif cudzysłów alt znak równości cudzysłów Kot cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.

Po naciśnięciu obrazka przeniesiesz się na stronę koty.html.

Możesz również umieścić na stronie WWW ikonę grafiki, po wybraniu której ukaże się jej pełnowymiarowa wersja. Za pomocą omówionego już parametru target możesz określić okno przeglądarki, w którym ma się pojawić większa ilustracja.
Przykładowo, jeżeli chcesz otworzyć grafikę z podfolderu ilustracje w nowym oknie, przypisz atrybutowi target wartość _blank.

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów ilustracje prawy ukośnik duza podkreślnik grafika kropka gif cudzysłów target znak równości cudzysłów podkreślnik blank cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny img src znak równości cudzysłów ilustracje prawy ukośnik mala podkreślnik grafika kropka gif cudzysłów alt znak równości cudzysłów Mała grafika cudzysłów prawy ukośnik zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.
Uwaga!

Grafiki – mała i duża – powinny znajdować się w tym samym folderze.

RCQGbBgiQgzE0
Film przedstawia używanie odsyłaczy w HTML
2
Ćwiczenie 13

Na tworzonej przez siebie stronie internetowej dodaj odnośnik do fotografii. Po kliknięciu w fotografię, wstawioną przez ciebie w poprzednim zadaniu, w nowej karcie powinno otworzyć się to samo zdjęcie w większym formacie.

Mapy odnośników na obrazach

W kodzie HTML istnieje także możliwość utworzenia mapy odnośników, dzięki której różne obszary jednej grafiki mogą prowadzić do wielu miejsc w sieci. W celu przekazania przeglądarce informacji na temat wybranego obszaru grafiki, niezbędna będzie znajomość współrzędnych ograniczających go punktów. W tym celu możesz skorzystać z programu umożliwiającego czytanie tego typu danych, na przykład z programu Paint.

Jeżeli wiesz, w którym miejscu chcesz wstawić odsyłacz oraz jaki ma on posiadać kształt, musisz zdefiniować następujące polecenie:

Linia 1. otwórz nawias ostrokątny img src znak równości cudzysłów adres podkreślnik obrazu kropka gif cudzysłów usemap znak równości cudzysłów kratka nazwa mapy cudzysłów. Linia 2. alt znak równości cudzysłów opis podkreślnik alternatywny cudzysłów prawy ukośnik zamknij nawias ostrokątny.

Polecenie img src="adres_obrazu.gif" przywołuje wskazaną grafikę.
Umieszczając atrybut usemap z wartością #nazwa mapy, podasz przeglądarce informację, że elementy grafiki obraz.gif są przygotowywane do pełnienia roli odnośników, a przygotowywana do tego celu mapa nosi nazwę #nazwa_mapy.
Poleceniem <map> rozszerzonym o atrybut name zdefiniujemy mapę. Wartość tego atrybutu musi być taka sama, jak wartość parametru usemap, z pominięciem znaku #, np.

Linia 1. otwórz nawias ostrokątny map name znak równości cudzysłów nazwa podkreślnik mapy cudzysłów zamknij nawias ostrokątny.

Kolejnym krokiem będzie wprowadzenie fragmentów mapy, odpowiadających poszczególnym aktywnym jej obszarom. W tym celu wprowadź nieparzysty znacznik <area>, zawierający następujące atrybuty:

  • shape (kształt) - zawiera informacje o kształcie danego obszaru przyjmujące jedną z następujących wartości: rect – prostokąt, circle – okrąg, poly – wielokąt;

  • coords (współrzędne) - określa oddzielane przecinkami współrzędne punktów ograniczających obszar aktywny. W przypadku prostokąta dwie pierwsze liczby podają współrzędne lewego górnego rogu, a następne dwie – prawego dolnego, np.

Linia 1. otwórz nawias ostrokątny area shape znak równości cudzysłów rect cudzysłów coords znak równości cudzysłów 15 przecinek 5 przecinek 70 przecinek 60 cudzysłów prawy ukośnik zamknij nawias ostrokątny.

W przypadku okręgu pierwsze dwie liczby informują o położeniu środka okręgu, a ostatnia o długości promienia. W przypadku obszaru nieregularnego musisz zdefiniować wszystkie jego wierzchołki.

  • href (odsyłacz) - określa adres URL, do którego odsyła dany fragment mapy.

Przykładowo:

Linia 1. otwórz nawias ostrokątny img src znak równości cudzysłów polska kropka gif cudzysłów border znak równości cudzysłów 0 cudzysłów usemap znak równości cudzysłów kratka kraj cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny map name znak równości cudzysłów kraj cudzysłów zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny area href znak równości cudzysłów lublin kropka html cudzysłów shape znak równości cudzysłów rect cudzysłów coords znak równości cudzysłów 350 przecinek 21 przecinek 371 przecinek 270 cudzysłów alt znak równości cudzysłów Województwo lubelskie cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny area href znak równości cudzysłów poznan kropka html cudzysłów shape znak równości cudzysłów poly cudzysłów coords znak równości cudzysłów 228 przecinek 215 przecinek 369 przecinek 215 przecinek 420 przecinek 411 przecinek 160 przecinek 412 cudzysłów alt znak równości cudzysłów Województwo wielkopolskie prawy ukośnik zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny area href znak równości cudzysłów lodz kropka html cudzysłów shape znak równości cudzysłów circle cudzysłów coords znak równości cudzysłów 733 przecinek 873 przecinek 485 cudzysłów alt znak równości cudzysłów Województwo łódzkie cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny prawy ukośnik map zamknij nawias ostrokątny.
ROB0pExX40aye
Film przedstawia w jaki sposób podzielić ilustrację na fragmenty, które będą odsyłały do innych miejsc (za pomocą mapy odnośników)
3
Ćwiczenie 14

W tym samym folderze w którym znajduje się plik index.html utwórz drugi plik o nazwie mapa z rozszerzeniem .html i edytuj jego zawartość tworząc podstawową strukturę dokumentu HTML z ćwiczenia 4. Do swojej strony index.html dodaj relatywne połącznie hipertekstowe prowadzące do nowoutworzonego pliku mapa.html podobnie jak w ćwiczeniu 13. Pamiętaj, aby z nowej podstrony dało się również wrócić do strony głównej. Następnie, na nowej stronie umieść fotografię stosowną do tematu jaki prezentujesz (w taki sam sposób jak w ćwiczeniu 12).  Do fotografii w pliku mapa.html dodaj mapę odnośników kierującą na inne strony internetowe istniejące już w sieci o podobnej tematyce.

Multimedia

Jedną z przyczyn popularności sieci internet jest możliwość publikowania na stronach WWW dźwięków i klipów video. Aby przeglądaniu zawartości stron towarzyszył podkład muzyczny, należy użyć, wprowadzonego w HTML5, znacznika <audio> wraz z atrybutami <audio atrybuty> np.:

Linia 1. otwórz nawias ostrokątny audio src znak równości cudzysłów audio kropka mp3 cudzysłów type znak równości cudzysłów audio prawy ukośnik mpeg cudzysłów controls autoplay zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik audio zamknij nawias ostrokątny.
  • src – URL wskazuje źródło (plik multimedialny);

  • type – typ MIME (ang. Multipurpose Internet Mail Extensions), mówi o rodzaju danych przesyłanych drogą elektroniczną, przykładowo audio/mpeg dla MP3 lub audio/x ms wma dla WMA;

  • controls – umożliwia sterowanie odtwarzanym utworem,

  • autoplay – informuje, że odtwarzanie rozpocznie się automatycznie.

Pliki audio mogą być również wykorzystywane jako uzupełnienie informacji tekstowych prezentowanych na stronie. Za pomocą polecenia <a> i atrybutu href możesz utworzyć połączenie pomiędzy fragmentem tekstu (grafiki) i plikiem audio, np.:

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów plik podkreślnik audio kropka mp3 cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny img src znak równości cudzysłów nutka kropka gif cudzysłów alt znak równości cudzysłów Wesołe nutki cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 2. Przeboje minionego roku otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.

W podobny sposób można utworzyć połączenie tekstu (grafiki) z plikiem video.

RP58q6lcnAzZn
Film prezentuje wstawianie plików audio i wideo w HTML.
2
Ćwiczenie 15

Znajdź spokojną muzykę lub urywek audiobooka (możesz go nagrać samodzielnie lub wyszukać w Internecie) pasujący tematycznie do tworzonej przez ciebie witryny internetowej, a następnie dodaj go na swojej stronie, tak aby odtwarzał się automatycznie i zapętlony. Muzykę możesz dodać do utworzonego pliku mapa.html, aby umilić użytkownikom czas podczas przeglądania stron zawartych na mapie odnośników.

Ciekawe źródła z muzyką znajdziesz na http://otwartezasoby.pl/category/muzyka/.

Ramki zagnieżdżone

W HTML5 zostały wprowadzone, tzw. ramki zagnieżdżone. Strony HTML mogą zawierać nie tylko odnośniki do innych stron, ale także zagnieżdżać inne, co oznacza, że jakaś strona pojawi się jako fragment strony zewnętrznej. Żeby zagnieździć stronę, należy skorzystać ze znacznika <iframe>:

Linia 1. otwórz nawias ostrokątny iframe src znak równości cudzysłów plik kropka html cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik iframe zamknij nawias ostrokątny.

Trzy najważniejsze atrybuty, jakie mogą wystąpić w elemencie iframe to:

  • src – wartość adresu URL dokumentu do wstawienia,

  • width – szerokość iframe w pikselach,

  • height – wysokość iframe w pikselach.

Mechanizm ten jest wykorzystywany przez różne serwisy do udostępniania dodatków do stron. Przykładowo, aby wstawić na stronę film z serwisu YouTube przedstawiający informacje o e‑podręczniku, trzeba napisać:

Linia 1. otwórz nawias ostrokątny iframe width znak równości cudzysłów 560 cudzysłów height znak równości cudzysłów 315 cudzysłów. Linia 2. src znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik www kropka youtube kropka com prawy ukośnik watch znak zapytania v znak równości sI9hk3JwbhQ cudzysłów zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny prawy ukośnik iframe zamknij nawias ostrokątny.

Znacznik <iframe> umożliwia między innymi:

  • dodawanie filmów z zewnętrznych serwisów,

  • zagnieżdżanie gotowych komentarzy,

  • umieszczanie reklam,

  • cytowanie innych stron,

  • dodawanie przycisków sieci społecznościowych.

Znacznik <iframe> możesz wykorzystać również do otwierania się wewnątrz ramki zagnieżdżonej odnośników. Aby to zrobić znacznikowi początkowemu dodaj nazwę, korzystając z atrybutu name:

Linia 1. otwórz nawias ostrokątny iframe name znak równości cudzysłów okienko cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik iframe zamknij nawias ostrokątny.

a następnie odnośnik, który otwiera stronę zmodyfikuj dodając mu w atrybucie target nazwę ramki, w której powinien się otworzyć.
Przykładowo:

Linia 1. otwórz nawias ostrokątny p zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny a href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik zpe kropka gov kropka pl cudzysłów target znak równości cudzysłów okienko cudzysłów zamknij nawias ostrokątny. Linia 3. Epodręcznik dla młodzieży otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny.

Przypomnij sobie, że wcześniej element, do którego kierował odnośnik, mógł się otwierać w tym samym lub nowym oknie. Obecnie może otworzyć się wewnątrz ramki, a taka strona będzie w pełni funkcjonalna - działają na niej odnośniki i skrypty.
Przykładowo:

RFx6apkwRW5NP
Film przedstawia w jaki sposób umieszczać ramki zagnieżdżone w HTML.
2
Ćwiczenie 16

Wykorzystując podane informacje, umieść na jednej ze stron ramkę pływającą, zawierającą inną ze stron twojego serwisu. Może to być strona utworzona w pliku mapa.html.

Komentarze

Kod źródłowy przedstawiony powyżej jest już kodem dość skomplikowanym. Gdy powrócisz do niego za jakiś czas, możesz zastanawiać się, dlaczego został napisany w ten sposób. Przydatne mogą być w takim przypadku komentarze, które wstawione w kod zostaną pominięte przez przeglądarkę przy wyświetlaniu strony internetowej, a będą widoczne w kodzie. Komentarze występują w każdym języku programowania, pomagając w ustaleniu np. czego dana część kodu dotyczy. W języku HTML komentarz wielolinijkowy umieszczany jest pomiędzy znacznikami <!- oraz ->.  Jednolinijkowy komentarz możesz również wstawić używając dwóch ukośników //. Przykładowa informacja może być również wskazówką dla autora i może wyglądać w ten sposób:

R18nMaMwIRYu9
Fragment kodu HTML z komentarzem jednolinijkowym oraz wielolinijkowym
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

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 – methodaction

  • Atrybut method określa metodę przesyłania danych do skryptu, który je obrabia. Stosowane są dwie metody getpost.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.

Linia 1. otwórz nawias ostrokątny form method znak równości cudzysłów post cudzysłów action znak równości cudzysłów mailto dwukropek nazwa podkreślnik uzytkownika at outlook kropka com cudzysłów zamknij nawias ostrokątny. Linia 2. … otwórz nawias ostrokątny prawy ukośnik form zamknij nawias ostrokątny.

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.

Linia 1. otwórz nawias ostrokątny input type znak równości cudzysłów typ cudzysłów name znak równości cudzysłów nazwa cudzysłów value znak równości cudzysłów wartość cudzysłów prawy ukośnik zamknij nawias ostrokątny.

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

Linia 1. otwórz nawias ostrokątny input type znak równości cudzysłów text cudzysłów name znak równości cudzysłów nazwisko cudzysłów size znak równości cudzysłów 40 cudzysłów prawy ukośnik zamknij nawias ostrokątny.

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

Linia 1. otwórz nawias ostrokątny input type znak równości cudzysłów checkbox cudzysłów name znak równości cudzysłów jezyk cudzysłów value znak równości cudzysłów angielski cudzysłów prawy ukośnik zamknij nawias ostrokątny angielski.

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

Linia 1. otwórz nawias ostrokątny input type znak równości cudzysłów radio cudzysłów name znak równości cudzysłów plec cudzysłów value znak równości cudzysłów mezczyzna cudzysłów prawy ukośnik zamknij nawias ostrokątny mężczyzna. Linia 2. zamknij nawias ostrokątny otwórz nawias ostrokątny input type znak równości cudzysłów radio cudzysłów name znak równości cudzysłów plec cudzysłów value znak równości cudzysłów kobieta cudzysłów prawy ukośnik zamknij nawias ostrokątny kobieta.

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

Linia 1. otwórz nawias ostrokątny input type znak równości cudzysłów submit cudzysłów value znak równości cudzysłów Wyślij do … cudzysłów prawy ukośnik zamknij nawias ostrokątny.

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

Linia 1. otwórz nawias ostrokątny input type znak równości cudzysłów reset cudzysłów value znak równości cudzysłów Usuń wszystko cudzysłów prawy ukośnik zamknij nawias ostrokątny.

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
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ć.

Linia 1. otwórz nawias ostrokątny textarea name znak równości cudzysłów nazwa cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik textarea zamknij nawias ostrokątny.

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.

Linia 1. otwórz nawias ostrokątny select name znak równości cudzysłów nazwa cudzysłów zamknij nawias ostrokątny.

Przykładowy kod listy rozwijanej

Linia 1. otwórz nawias ostrokątny select name znak równości cudzysłów Ulubione przeglądarki cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny option zamknij nawias ostrokątny Microsoft Edge otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny option zamknij nawias ostrokątny Firefox otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny option zamknij nawias ostrokątny Opera otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny option zamknij nawias ostrokątny Safari otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny prawy ukośnik select zamknij nawias ostrokątny.
R1FthCKG8EzLR
Film prezentuje tworzenie formularzy w HTML
2
Ćwiczenie 17

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

RjgJpGXI7f2gF
Strona internetowa z utworzonym formularzem
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

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
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>.

Linia 1. otwórz nawias ostrokątny div zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny img src znak równości cudzysłów grafika kropka png cudzysłów alt znak równości cudzysłów robot cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów kratka cudzysłów zamknij nawias ostrokątny Strona czołowa 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 5. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów druga kropka html cudzysłów zamknij nawias ostrokątny Strona druga 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 6. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów trzecia kropka html cudzysłów zamknij nawias ostrokątny Strona trzecia 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 7. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.

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.

Linia 1. otwórz nawias ostrokątny div id znak równości cudzysłów header1 cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny img src znak równości cudzysłów grafika kropka png cudzysłów alt znak równości cudzysłów robot cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów kratka cudzysłów zamknij nawias ostrokątny Strona czołowa 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 5. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów druga kropka html cudzysłów zamknij nawias ostrokątny Strona druga 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 6. otwórz nawias ostrokątny li zamknij nawias ostrokątny otwórz nawias ostrokątny a href znak równości cudzysłów trzecia kropka html cudzysłów zamknij nawias ostrokątny Strona trzecia 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 7. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.

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

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów kratka header1 cudzysłów zamknij nawias ostrokątny Nagłówek otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.

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:

Linia 1. otwórz nawias ostrokątny p id znak równości cudzysłów identyfikator cudzysłów zamknij nawias ostrokątny To jest element p do którego odsyła łącze. Linia 2. wewnątrz dokumentu otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny.

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

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów kratka id podkreślnik elementu cudzysłów zamknij nawias ostrokątny tekst odnośnika otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.

np.

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów kratka identyfikator cudzysłów zamknij nawias ostrokątny Przejdź do rozdziału 3 otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.
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
Film prezentuje podział strony na sekcje

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.

Wygląd strony:

RHRMsvW7PLwYm
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
HTML5

Język znaczników wykorzystywany do tworzenia stron internetowych WWW. Łączy kilka technologii usprawniając działanie i wygląd stron internetowych między różnymi przeglądarkami internetowymi. W porównaniu z poprzednimi wersjami, nie posiada wstecznej kompatybilności, ale pozwala na łatwiejsze zarządzanie grafiką i multimediami przez co wyparł dotychczas używany w tym celu Adobe Flash Player.

Znacznik1
Znacznik

Specjalny tekst umieszczony w nawiasach ostrych będący częścią składni języka HTML. Pozwala sterować wyglądem strony, a jego zawartość dostosowywać do własnych potrzeb.

Białe znaki1
Białe znaki

Symbole, takie jak: spacja, tabulacja, nowa linia. Nie posiadają one graficznej reprezentacji

Encje HTML
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.