Przeczytaj
Przejrzyj strony WWW związane z interesującą cię branżą lub tematyką. Te, które najbardziej przypadną ci do gustu, zapisz w formie zrzutów ekranu.
Stworzenie projektu strony internetowejstrony internetowej wymaga zaplanowania jej struktury – zarówno graficznej, jak i tekstowej. Pomocne w tym mogą być różne edytory graficzne, jednak lepszy efekt uzyskasz, stosując język HTML (ang. Hyper Text Markup Language). Jest to hipertekstowy język znaczników, który daje możliwość:
oznaczania tytułów,
oznaczania sekcji,
oznaczania rozdziałów,
dodawania tabel i grafik,
oddzielania akapitów,
łączenia zawartości poprzez odnośniki.
Sposób wyświetlania strony przez przeglądarkę opisuje się za pomocą języka CSS (ang. Cascading Style Sheets).
20 grudnia 1990 roku Europejska Organizacja Badań Jądrowych CERN uruchomiła pierwszą stronę internetową – World Wide Web – autorstwa Tima Bernersa‑Lee. Początkowo witryna ta działała tylko w obrębie CERN‑u, zaś w sierpniu 1991 roku została udostępniona publicznie. Do dziś istnieje ona pod adresem http://info.cern.ch/hypertext/WWW/TheProject.html.
Od czego zacząć projekt strony internetowej? Przede wszystkim ustal, jaki ma być cel twojej witryny. Czy ma ona służyć do dzielenia się informacjami, sprzedaży produktów i usług, zbierania danych potencjalnych klientów, a może po prostu do prezentowania profilu firmy? Kolejny krok to analiza konkurencji w danej branży oraz poszukanie inspiracji do stworzenia projektu, który będzie zgodny z aktualnie panującymi trendami.
Strony statyczne i dynamiczne – czyli jakie?
Strony mogą być statyczne – wówczas dokument HTMLdokument HTML jest stworzony raz. Przechowuje się go pod określonym adresem URLadresem URL na serwerzeserwerze w stanie niezmienionym. Aktualizacje strony wprowadzane są ręcznie w kodzie HTML, osobno w każdej podstroniepodstronie projektu. Statyczne strony cechuje niska cena obsługi (prawie nie wymagają konserwacji) oraz fakt, że ładują się szybciej i nie potrzebują dostępu do baz danych. Ich hostowanie jest również tanie, bo serwer nie ma wymagań innych niż przechowywanie danych.
Drugi rodzaj to strony dynamiczne, opierające się na dwóch filarach: szablonie układu oraz treściach. Przy każdym odwiedzeniu witryny serwer generuje jej zawartość zgodnie z tym, co aktualnie znajduje się w mechanizmie agregującym (baza danych, plik JSON lub XML). Oznacza to, że za każdym razem, gdy adres strony jest wywoływany, pobierane są treści, a witryna generowana jest w formie graficznej. W efekcie np. dodając jedną grafikę, na stronie zmieniamy tylko ją, bo układ witryny jest już zdefiniowany. Ta zależność działa także w drugą stronę. Modyfikując szablon strony, zmieniamy tylko sposób jej prezentacji. Treści pozostaną nienaruszone.
Ze względu na stałe generowanie treści strony dynamicznej wymaga ona serwera WWW o zwiększonej wydajności oraz bazy danych, za pomocą której serwer zarządza zawartością witryny. Do zarządzania tego rodzaju stroną zazwyczaj potrzebny jest CMSCMS. Warto pamiętać, że konfiguracja systemu wymaga nie tylko podstawowej wiedzy na temat HTML, ale także znajomości języka programowania, np.: PHP, Perl, Java Script, Ruby on Rails. Dynamiczne strony internetowe cieszą się większą popularnością, ponieważ są elastyczne i oparte na predefiniowanych układach i szablonach projektowych.
Klasyfikacja stron internetowych ze względu na pełnione funkcje
Cel, w jakim tworzymy stronę WWW, warunkuje jej funkcjonalności. Przeznaczenie strony może być jednym z kryteriów podziału witryn na rodzaje. Pamiętaj jednak, że nie ma jednej obowiązującej klasyfikacji stron WWW. Wynika to z szybkiego rozwoju branży IT.
Często można spotkać następujące rodzaje witryn:
wizytówka firmowa w formie strony (edytowana jedynie po stronie programistycznej) lub wizytówka z systemem CMS (zarządzana poprzez system CMS) – to statyczna strona internetowa, która stanowi tylko dodatek do działalności firmy, np. prowadzonej głównie w mediach społecznościowych; wizytówka jest też dobrym rozwiązaniem, gdy firma poprzez swoją obecność w internecie chce uwiarygodnić swoją działalność w oczach klientów lub gdy właściwa strona firmy jest w budowie;
![Zrzut ekranu przedstawia wizytówkę firmową w formie strony. Znajduje się na niej zdjęcie kobiety w okularach o rudych włosach oraz krótkie przedstawienie działalności: Hello, i am Helen Smith Designer, Art Director, Dreamer. W dolnej stopce strony znajdują się odnośniki do stron społecznościowych.](https://static.zpe.gov.pl/portal/f/res-minimized/RehEfHGcgfpyw/1646034343/14ogCJrQK9sO3hwccJLLJPA7cZGrZ8dH.jpg)
blog – dynamiczna strona, która ma na celu dzielenie się wiedzą;
![Zrzut ekranu przedstawia stronę typu: Blog. W górnej części strony znajdują się zakładki z wybranymi tematami bloga. Poniżej znajdują się ostatnio wstawione artykuły: 5 rzeczy, które możesz zrobić w 2021, Dwadzieścia siedem, 8 sposobów, żeby poczuć się trochę lepiej, mimo trudnych czasów. Przy każdym z tematów znajduje się nawiązujące do niego zdjęcie.](https://static.zpe.gov.pl/portal/f/res-minimized/R14ES9pHz2UhL/1646034344/28DoqoQo5I34FoUl1tmyfVfhjLM6vasV.jpg)
serwis i portal internetowy – zbiór stron internetowych, który może mieć różne cele.
![Zrzut ekranu przedstawia serwis i portal internetowy na przykładzie strony: onet. Strona ta posiada wyszukiwarkę, zakładki o różnych tematykach: wiadomości, sport, biznes, regionalne, kultura, nieruchomości, motoryzacja, zakupy, czas wolny. Poza tym strona zawiera prognozę pogody, najnowsze i najważniejsze wiadomości ze świata.](https://static.zpe.gov.pl/portal/f/res-minimized/RAnjsgavAvWIG/1646034344/1f44pOr2bsvzYapXhiJPVj7Z91hQN8si.jpg)
Wymienione strony mogą mieć różne formy:
landing page – strona, która służy konkretnemu celowi: zbieraniu kontaktów, skupieniu ruchu dotyczącego jakiejś akcji, kampanii reklamowej; witryna nie zawiera wielu informacji, natomiast od razu pokazuje, jaki jest jej cel; najczęściej nie zawiera menu;
one page – jedna strona, która nie wymaga przechodzenia do podstron (czasem posiada ułatwiające nawigację zakładki w menu, które kierują do odpowiedniego miejsca na stronie); ten typ witryn stosowany jest do prezentowania niewielkiej ilości informacji i sprawdza się jako np. wizytówka firmowa, strona produktowa, portfolio czy strona dedykowana konkretnej akcji (konkurs – zbieranie danych potencjalnych klientów za pomocą formularza zgłoszeniowego);
Projektanci coraz częściej sięgają po efekt paralaksy, by uatrakcyjnić stronę typu one page. Daje on złudzenie ruchu i efekt 3D.
multi page – klasyczna strona internetowa, która składa się z dowolnej liczby podstron; pozwala na prezentację dużej ilości informacji i treści w uporządkowany sposób; menu umożliwia szybkie przejście do interesującej użytkownika podstrony; w wersji mobilnej menu powinno zwinąć się do formy „hamburgera”, aby ułatwić korzystanie z niego na urządzeniach z mniejszym wyświetlaczem.
Projektowanie za pomocą edytora graficznego – podstawowe informacje
Za pomocą edytora graficznego strony mogą projektować zarówno osoby, które zajmują się tym po raz pierwszy, jak dla te, które mają doświadczenie i posiadają wiedzę z zakresu języka HTML i CSS. Przeanalizujmy ścieżkę projektową na przykładzie popularnego kreatora WIX.
Po założeniu konta w serwisie użytkownik odpowiada na pytania, które ułatwiają mu odnalezienie odpowiedniego miejsca w kreatorze. Pytania dotyczą m.in. przeznaczenia i tematyki strony, doświadczenia projektanta itd. Po udzieleniu odpowiedzi użytkownik zostaje przeniesiony na stronę z szablonami.
![Zrzut ekranu przedstawia edytor WiX w momencie wybierania szablonu do strony. Po lewej stronie znajduje się menu, w którym znajdują się tematyczne szablony dla stron. Po prawej stronie znajduje się napis: Fotografia wybierz idealny szablon dla twoich potrzeb. Poniżej znajdują się szablony z tematyką fotografii.](https://static.zpe.gov.pl/portal/f/res-minimized/RCymH5gwOe2Zr/1646034344/1xQRwvSepstTl6ekwGI7421FwXcOyxSx.jpg)
Na który szablon się zdecydować? Zastanów się, który z nich najlepiej pasuje do wybranej przez ciebie branży. Zwróć także uwagę, który jest nowoczesny i ma czytelne i intuicyjne menu. Spójrz, jak wyglądają podstrony i dokonaj wyboru. Następnie przejdź do trybu edycji.
![Zrzut ekranu przedstawia edytor Wix. Po prawej stronie znajduje się przybornik z różnymi opcjami: kopiowanie, wklejanie, usuwanie, ustawienia obiektów w pozycji wertykalnej i horyzontalnej, ustawianie obiektów pod określonym kątem, ustawienia rozmiaru obiektu, pozycji i opcja pokazania danego obiektu na wszystkich stronach projektowanego serwisu. Na samym dole przybornika widoczna jest opcja warstw. Po lewej stronie widoczne są takie opcje jak: Menu i ekrany, Tło, Dodaj, Menedżer motywów, Dodaj aplikacje, Media, Rozpocznij blogowanie, Wix Bookings. Na głównym planie znajduje się widok strony, na której widoczne są prowadnice ustawiające dane obszary strony. Strona ta zawiera wizytówkę: John Michael Photography studio Po prawej stronie znajduje się czarnobiałe zdjęcie kobiety.](https://static.zpe.gov.pl/portal/f/res-minimized/RrKZSGftmYNOm/1646034345/27r9909pI3RrwP93TKXDIyDixPi0avCQ.jpg)
O tym, jak powinna wyglądać strona, by zainteresować potencjalnego klienta, dowiesz się z kolejnych e‑materiałów z tej serii.
Projektowanie za pomocą edytora tekstowego – podstawowe informacje
Znajomość języka HTML sprawi, że w pełni zapanujesz nad swoim projektem, dzięki czemu będzie on oryginalny i niepowtarzalny.
Zaczynając pracę w HTML, możesz skorzystać np. z płatnego edytora Pajączek albo Bluefish. Zawierają one poradniki i gotowe szablony dla początkujących. Darmowy edytor Notepad++ jest kompatybilny z różnymi systemami operacyjnymi, a za pomocą wbudowanego wsparcia dla składni języka HTML ułatwia proces tworzenia kodu strony. Więcej na ten temat dowiesz się z e‑materiałów: Projektowanie stron – język HTML, cz. 1Projektowanie stron – język HTML, cz. 1 i Projektowanie stron – język HTML, cz. 2Projektowanie stron – język HTML, cz. 2.
![Zrzut ekranu przedstawia program Notepad++ z edytowanym plikiem: index.html. W głównym oknie znajduje się podstawowy kod strony www w języku html zawierający znaczniki: html, body, w którym znajduje się napis Hello Word! ze nagłówku h1.](https://static.zpe.gov.pl/portal/f/res-minimized/R17E5acv6lA3s/1646034345/eWeshnOhO0AY2BjZHyb6v5dDJv2P64J1.png)
Słownik
usługa pozwalająca na publikowanie treści (stron, witryn, serwisów) w sieci Internet
szyfrowanie, które zabezpiecza dane pozostawiane na stronie WWW, np. w formularzach kontaktowych, podczas logowania; certyfikat ten podnosi pozycję strony w wyszukiwarkach oraz zwiększa jej wiarygodność
oprogramowanie do zarządzania treścią strony (ang. Content Management System)
dokument (strona WWW) czytany przez przeglądarki internetowe, widoczny pod konkretnym adresem URL; zawiera tekst, odnośniki (linki), informacje o multimediach i zdjęciach
adres strony internetowej, np. www.zlompol.pl
strona, na którą domyślnie kieruje adres witryny internetowej
przestrzeń na zdalnym serwerze, gdzie przechowywana jest zawartość strony
narzędzie do tworzenia stron internetowych; znajdziesz tam gotowe szablony
zwany także odnośnikiem, jest aktywnym fragmentem tekstu albo obrazkiem; pozwala przejść na inny adres URL albo wykonać inną czynność, np. przesłać zapytanie przez formularz kontaktowy
wpis na stronie
automatyczne dostosowanie rozmiaru strony do urządzeń, na których będzie ona wyświetlana; responsywna strona to taka, która poprawnie wyświetla się na wszystkich monitorach i wyświetlaczach
urządzenie do obsługi technicznej stron WWW (przechowywanie plików strony WWW, poczty elektronicznej, multimediów itp.)
unikalna strona internetowa stanowiąca odrębny dokument zawierający treść
zbiór dokumentów HTML; połączone są ze sobą linkami URL (odnośnikami); dokumenty te znajdują się w obrębie jednej domeny internetowej (serwisu internetowego albo witryny internetowej)
zbiór połączonych ze sobą pojedynczych stron internetowych