R4MAUED62EK7D

Planeta w cyberświecie. Projektowanie strony internetowej

rawpixel.com na Freepik
Źródło: domena publiczna.

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

W tym materiale skupimy się wyłącznie na hipertekstowym języku znaczników HTML.

Nauczysz się
  • projektowania stron WWW (zgodnego z obowiązującymi światowymi standardami)

  • korzystania z tekstowych i graficznych edytorów WWW,

  • wykonasz atrakcyjną wizualnie stronę internetową,  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 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 HTML5.

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 tekstu i arkuszach 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 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.

R1Fuk7DmrqQAI
Widok strony internetowej ze wstawionym zdjęciem i linkiem
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Wstawiona fotografia posiada niewidoczne pola. Gdy klikniesz w jedno z nich, działanie odnośnika przeniesie cię na jedną z trzech stron:

R1NdSh2hauFHa
Układ niewidocznych pól na zdjęciu
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, musisz utworzyć nowy plik mapa.html i edytować jego zawartość w edytorze tekstowym dodając podstawową strukturę dokumentu HTML:

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 Mapa otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny charset znak równości cudzysłów utf minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Kowalski cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów sztuka przecinek malarstwo cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Zeus z Olimpii cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

Następnie w sekcji body wstaw zdjęcie z odpowiednimi atrybutami (w tym nazwą usemap):

Linia 1. otwórz nawias ostrokątny img src znak równości cudzysłów zeus kropka jpg cudzysłów title znak równości cudzysłów Zeus cudzysłów alt znak równości cudzysłów Zeus Olimpijski cudzysłów prawy ukośnik usemap znak równości cudzysłów kratka starozytnosc cudzysłów zamknij nawias ostrokątny.

Mapa odnośników na fotografii zadziałała kiedy w sekcji body dodasz znacznik map oraz współrzędne odpowiadające konkretnym miejscom na fotografii:

Linia 1. otwórz nawias ostrokątny map name znak równości cudzysłów starozytnosc cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Posąg Zeusa w Olimpii cudzysłów title znak równości cudzysłów Zeus cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Posąg podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 165 przecinek 565 przecinek 561 przecinek 5 cudzysłów shape znak równości cudzysłów rect cudzysłów zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 0 przecinek 662 przecinek 161 przecinek 0 przecinek 157 przecinek 10 cudzysłów shape znak równości cudzysłów rect cudzysłów zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 564 przecinek 650 przecinek 681 przecinek 0 cudzysłów shape znak równości cudzysłów rect cudzysłów zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Fidiasz cudzysłów title znak równości cudzysłów Fidiasz cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Fidiasz cudzysłów coords znak równości cudzysłów 342 przecinek 708 przecinek 141 cudzysłów shape znak równości cudzysłów circle cudzysłów zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 314 przecinek 860 przecinek 9 przecinek 668 przecinek 4 przecinek 857 przecinek 156 przecinek 857 przecinek 239 przecinek 859 cudzysłów shape znak równości cudzysłów poly cudzysłów zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 675 przecinek 854 przecinek 380 przecinek 856 przecinek 676 przecinek 660 przecinek 677 przecinek 778 przecinek 677 przecinek 808 cudzysłów shape znak równości cudzysłów poly cudzysłów zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny prawy ukośnik map zamknij nawias ostrokątny.

Aby móc wrócić do strony głównej znajdującej się w pliku index.html, na dole sekcji <body> w pliku mapa.html należy dodać następujące linijki kodu:

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów index kropka html cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny h1 zamknij nawias ostrokątny Wróć do strony głównej otwórz nawias ostrokątny prawy ukośnik h1 zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.

W pliku index.html edytuj linijkę z odnośnikiem, który po kliknięciu zamieszczonego na stronie obrazu wyświetlał w osobnej karcie większy obraz Zeusa. Zmień wartość atrybutu href z wpisanego wcześniej zeus.jpg na mapa.html:

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów mapa kropka html 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 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 3. otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.

Pamiętaj, aby wszystkie pliki znajdowały się w tym samym folderze. Od teraz, po kliknięciu na obraz Zeusa z Olimpii działanie odnośnika przeniesie cię na stronę utworzoną w pliku mapa.html.

Aby zdjęcie poprawnie wyświetliło się na twojej stronie internetowej należy umieścić plik zeus.jpg w tym samym folderze co plik mapa.html. Pobierz poniższą ilustrację wyobrażenia posągu Zeusa w Olimpii z 1815 roku, zmień nazwę pliku na zeus.jpg i umieść go w folderze z twoim nazwiskiem.

RUYDBToWZW31Q

Załącznik zawiera grafikę Zeusa.

Załącznik zawiera grafikę Zeusa.
Źródło: Antoine-Chrysostome Quatremère de Quincy, domena publiczna.
Plik JPG o rozmiarze 209.14 KB w języku polskim