Stworzenie projektu strony internetowejstrona internetowastrony 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).

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 HTMLdokument HTML jest stworzony raz. Przechowuje się go pod określonym adresem URLadres URLadresem URL na serwerzeserwer internetowyserwerze w stanie niezmienionym. Aktualizacje strony wprowadzane są ręcznie w kodzie HTML, osobno w każdej podstroniesingle page (podstrona lub pojedyncza strona)podstronie 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 CMSCMSCMS. 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;

RehEfHGcgfpyw

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.

• blog – dynamiczna strona, która ma na celu dzielenie się wiedzą;

R14ES9pHz2UhL

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.

• serwis i portal internetowy – zbiór stron internetowych, który może mieć różne cele.

RAnjsgavAvWIG

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.

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

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

RCymH5gwOe2Zr

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.

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.

RrKZSGftmYNOm

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.

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. 1P12jbJinmProjektowanie stron – język HTML, cz. 1 i Projektowanie stron – język HTML, cz. 2PMd1LN1GlProjektowanie stron – język HTML, cz. 2.

R17E5acv6lA3s

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.

Słownik