Z czego robi się strony internetowe?

Strona internetowa to taka trochę gazeta tylko w wersji cyfrowej. Też ma tytuł, artykuły, zdjęcia i może składać się z kilku stron. Może też mieć filmy i inne dynamiczne treści a to potrafią już tylko gazety z Harrego Pottera. Ale jak się taką stronę robi? Co jest potrzebne aby na ekranie komputera czy telefonu zobaczyć treść wyglądającą tak a nie inaczej?

W dzisiejszych czasach jest to banalnie proste. Bierzesz WordPressa, wykonujesz prostą instalację i już, strona gotowa. Teraz możesz dodawać swoje treści i zmieniać ich wygląd bez żadnej znajomości programowania. No dobra, ale to tak jakbym tworzenie gazet wyjaśnił zdaniem: Bierzesz jakieś wydawnictwo i mówisz im, by zrobili gazetę z taką i taką treścią i takim wyglądem. Podobnie działa WordPress. Ty w prosty i zrozumiały dla Ciebie sposób wprowadzasz w WordPressie wytyczne jak ma wyglądać i działać strona a on to zapisuje w sposób zrozumiały dla komputera by ten przygotował i potem wyświetlił tę treść. Ten sposób zrozumiały dla komputera to specjalny kod w różnych językach programowania, który determinuje wygląd strony (HTML, CSS), jej działanie (PHP, JavaScript) i wybór danych (SQL).

Wymienione powyżej języki, to jedne z popularniejszych, ale nie jedyne języki za pomocą których można zbudować stronę internetową. Nie są one też tak bezpośrednio zrozumiałe dla komputera, muszą one być zinterpretowane i przetworzone przez różne narzędzia, ale nie chcę wchodzić w takie szczegóły. Ten artykuł jest skierowany do osób bez lub z podstawową wiedzą programistyczną dlatego użyłem i będę w tym artykule używał wielu uproszczeń i uogólnień. Opisując poniżej poszczególne języki będę używał przykładów ale bez dokładniejszego tłumaczenia. Nie chcę w tym artykule uczyć poszczególnych języków a jedynie zaprezentować jaką rolę odgrywają w procesie powstawania strony internetowej.

No dobrze, po tym przydługim wstępie przejdźmy do konkretów. Co zrobić by stworzyć stronę internetową bez WordPressa czy innych podobnych narzędzi? Albo jak zmienić stronę stworzoną przez WordPressa jeśli zmiany nie można wyklikać w panelu administracyjnym? Zacznijmy od końca, czyli od finalnego efektu, tego co widać w przeglądarce.

Treść wyświetlana w przeglądarce internetowej

Stronę internetową otwieramy w przeglądarce internetowej. Przeglądarka to program, który otwiera jakiś plik i wyświetla jego zawartość. Tak jak np. Word otwiera pliki tekstowe i wyświetla je w odpowiedni sposób, tak przeglądarki otwierają pliki stron internetowych i wyświetlają je w odpowiedni sposób. Taki plik to może być zwykły plik tekstowy napisany w notatniku. Aby był domyślnie otwierany przez przeglądarkę wystarczy nadać mu rozszerzenie .html.

Stwórzmy zatem w notatniku taki plik, wpiszmy do niego jakąś treść i zapiszmy jako strona.html.

Jakaś treść pliku.

Teraz wystarczy otworzyć ten plik w przeglądarce i już. Strona internetowa gotowa. Tak, wiem, nie jest zbyt piękna, ale jest. To właśnie jest strona internetowa, specjalny plik otworzony w przeglądarce. No dobra, przejdźmy teraz do tych języków i sprawmy by to jakoś wyglądało.

HTML – układ i wygląd strony

Język HTML to zbiór instrukcji dla przeglądarki w jaki sposób ma wyświetlić treść. Mamy tu formatowanie tekstów, tworzenie tabel, linków i wiele więcej. Dodajmy więc do naszego pliku kilka komend języka HTML i zobaczmy co się stanie.

<h4>Treść nagłówka</h4>
Jakaś <b>treść</b> pliku.
Ten tekst jest w tej samej linii.<br>A ten już w kolejnej.<br>
To jest <a href="adinet.pl">link</a> do strony głównej AdiNet.
A tu mamy obrazek <img src="Logo.png" />

Efekt

Treść nagłówka

Jakaś treść pliku. Ten tekst jest w tej samej linii.
A ten już w kolejnej.
To jest link do strony głównej AdiNet. A tu mamy obrazek

Jak widać za pomocą kilku tagów html utworzyliśmy nagłówek, pogrubiliśmy tekst, dodaliśmy nową linię, utworzyliśmy link i wstawiliśmy obrazek podając w tagu img źródło pliku graficznego i ustawiając jego wielkość. Tych instrukcji jest oczywiście dużo więcej i można za ich pomocą zbudować całą stronę. Przeglądarka, czyli ten program który wyświetla stronę wie w jaki sposób interpretować kod języka HTML dlatego zawartość tekstową naszego pliku wyświetla w taki a nie inny sposób.

To tylko przykład użycia kilku tagów HTML, cała strona powinna się zawierać w tagach <html> i </html>. Powinna zawierać sekcję <head></head> w której możemy definiować np. tytuł strony wyświetlany na karcie przeglądarki, język strony, opis, inne pliki, które należy dołączyć itp. Treść, która ma być wyświetlana zawiera się w sekcji <body></body>. O mniej więcej tak.

<html>
   <head>
      <title>Tytuł strony</title>
      <description>Opis strony</description>
   <head>
   <body>
      Treść strony
   </body>
</html>

Różne przeglądarki mogą w nieco inny sposób interpretować kod języka HTML, dlatego czasem ta sama strona otworzona w różnych przeglądarkach wygląda trochę inaczej.

CSS – style czyli wygląd strony

Choć w samym języku HTML można zdefiniować podstawowe parametry wyglądu strony i jej elementów to użycie CSS daje nam o wiele większe możliwości. Zamiast np. pogrubiać tekst osadzając go w tagach <b> (jak bold) możemy nadać mu styl font-weight.

Zwykłe <b>pogrubienie</b> w HTML i 
tekst <span style="font-weight:bold;">pogrubiony</span> za pomocą CSS.

I tu nasuwa się pytanie po co stosować ten CSS skoro trzeba się więcej napisać i kod strony jest mniej czytelny? Otóż w powyższym przypadku nie ma, bo faktycznie skorzystanie z tagu <b> jest prostsze. Jednak gdy styl jest bardziej rozbudowany zaczyna mieć to sens. Stwórzmy na przykład takie dwa linki. Pogrubione, podkreślone, pochylone i jeszcze z kolorem.

Link <a href="adinet.pl"><b><u><i><font color="blue">Adinet</font></i></u></b></a> w HTML. 
Link <a href="adinet.pl" style="font-weight:bold; text-decoration:underline; font-style:italic; color:blue;">Adinet</a> w CSS. 

Nadal treść ostylowana za pomocą CSS jest dłuższa, ale już styl jest oddzielony od treści. Prawdziwą zaletę CSS odkryjemy gdy jeszcze bardziej oddzielimy style CSS od treści. Każdemu elementowi HTML możemy nadać identyfikator lub klasę. Jeden identyfikator może być przypisany do jednego elementu, a klasa może być przypisana do wielu elementów. Style natomiast możemy zdefiniować w innym miejscu dokumentu lub w osobnym pliku i przypisać je do konkretnych identyfikatorów, klas czy tagów html.

<style>
#naszLink { font-weight:bold; text-decoration:underline; font-style:italic; color:blue; }
</style>

Link <a href="adinet.pl" id="naszLink">Adinet</a> z identyfikatorem. 

Prawda że zrobiło się bardziej przejrzyście? Nadając linkom klasę, możemy jeden zestaw styli wykorzystać do wielu linków. Możemy też zdefiniować styl linku wyświetlany po najechaniu na niego kursorem. W definicji styli nazwy identyfikatorów poprzedzamy znakiem # a nazwy klas kropką.

<style>
.naszeLinki { font-weight:bold; text-decoration:underline; font-style:italic; color:blue; }
.naszeLinki:hover { color:green; text-decoration:none; }
</style>

Link <a href="adinet.pl" class="naszeLinki">Adinet</a> z klasą oraz linki do <a href="imienniczek.pl" class="naszeLinki">Imienniczka</a> i strony <a href="Bolimowski.pl" class="naszeLinki">Pawła Bolimowskiego</a>. 

Zapis tem można uprościć jeszcze bardziej ale to temat na osobny artykuł. Generalnie style CSS pozwalają na dokładne określenie wyglądu, rozmiaru i umiejscowienia wszystkich elementów strony. Pozwalają też definiować jak zmienia się wygląd po najechaniu kursorem, kliknięciu czy przy zmianie wielkości okna przeglądarki.

JavaScript – skrypty czyli akcje na stronie

Można powiedzieć, że akcją wykonywaną na stronie jest kliknięcie w link by przejść na inną stronę. Jednak to tylko otworzenie nowej strony w przeglądarce. JavaScript natomiast daje nam możliwość wykonywania różnych akcji na otwartej stronie. Kod JavaScript, podobnie jak HTML i CSS jest z serwera wysyłany do przeglądarki użytkownika i to po stronie użytkownika jest wykonywany.

Jakie akcje można wykonać za pomocą JavaScript? Możliwości jest tak wiele, że nawet nie wiem od czego zacząć. Możemy wyświetlać komunikaty, zmieniać style elementów strony czy nawet tworzyć dynamicznie nowe elementy. Możemy wykonywać obliczenia, lub tworzyć całe programy, ale zacznijmy od podstaw.

Kliknij w <a onclick="alert('Bardzo ładnie :)');">ten link</a>.

Funkcja alert() wyświetla okienko z treścią, którą wpiszemy w nawiasach. Elementowi <a> dodaliśmy atrybut onclick, który mówi przeglądarce, że po kliknięciu w ten element ma wykonać wymienioną funkcję. Możemy również pisać własne funkcje i umieszczać w nich różne polecenia. Kod JavaScript piszemy w tagach <script></script>.

<script>
   function naszaFunkcja() {
      var imie = prompt("Jak masz na imię?");
      alert("Witaj " + imie);
   }
</script>

Kliknij w <a onclick="naszaFunkcja();">ten link</a>.

W ten sposób stworzyliśmy niewielką funkcję, która najpierw pyta o imię, następnie to imię zapisuje do zmiennej o nazwie imie by na końcu wyświetlić komunikat z wykorzystaniem zapamiętanego imienia. Tak jak pisałem wcześniej za pomocą JavaScript możemy zmieniać style elementów oraz dodawać nowe. Wszystkie te zmiany dzieją się na stronie uruchomionej już w naszej przeglądarce. Nie są widoczne dla innych użytkowników, nie są też widoczne po odświeżeniu strony. Chyba, że za pomocą JavaScript wywołamy coś co zapisze zmiany na serwerze, ale to temat na inny artykuł.

<script>
   function zmienKolor(kolor) {
      document.getElementById('przykladowyTekst').style.color = kolor;
   }
   function naszaFunkcja2() {
      var imie = prompt("Przypomnij, jak masz na imię?");
      document.getElementById('pustyDiv').innerHTML = 'Świetnie <b>' + imie + '</b> teraz Twoje imię jest na naszej stronie :)';
   }
</script>

Kliknij w <a onclick="naszaFunkcja2();">ten link</a>.<br/>
<span id="przykladowyTekst">Kliknij w wybrany kolor:</span> 
<a onclick="zmienKolor('red');">czerwony</a>, 
<a onclick="zmienKolor('green');">zielony</a>, 
<a onclick="zmienKolor('blue');">niebieski</a> 
<div id="pustyDiv"></div>

Pliki z treścią strony wraz z kodem HTML, CSS i Javascript są dostarczane z serwera www do przeglądarki użytkownika. Przeglądarka interpretuje kod w tych plikach i wyświetla stronę na jego podstawie. Pliki takie mogą być na serwerze po prostu zapisane i przy wywołaniu adresu strony pobrane do przeglądarki. Jednak w dzisiejszych czasach już prawie nie występują strony z raz zapisaną i niezmienną treścią. Zanim pliki z treścią oraz kodem HTML, CSS i JavaScript trafią do przeglądarki to na serwerze jest wykonywany inny kod, którego zadaniem jest utworzyć pliki wysyłane do przeglądarki.

PHP – skrypt wykonywany po stronie serwera

Gdy wywołujemy stronę, czyli wpisujemy jej adres w przeglądarce to otwieramy jakiś plik na serwerze www, czyli na komputerze na którym znajduje się strona internetowa. Gdy otwierany plik zawiera skrypt PHP to jest on wykonywany na serwerze www i gdy efektem jego działania jest jakaś treść to zostaje ona pobrana przez przeglądarkę i wyświetlona użytkownikowi.

W skrypcie PHP mogą być zaprogramowane różne działania, które wygenerują treść w zależności od różnych czynników. Na przykład gdy otworzymy stronę imienniczek.pl/dzis to najpierw skrypt PHP sprawdzi w kalendarzu systemowym jaki jest dziś dzień, następnie pobierze imiona i inne informacje przypisane do danego dnia i wygeneruje treść strony zawierającą te imiona, dzisiejszą datę, listę wydarzeń itp. Następnie przeglądarka pobierze tę przygotowaną treść zawierającą kod HTML, CSS i JavaScript i wyświetli nam gotową stronę. Oczywiście, gdy na tę samą stronę wejdziemy jutro, treść będzie inna.

<?
   $data = date("Y-m-d"); 
   echo "Dziś jest $data"; 
?>

Ten prosty kod sprawdza bieżącą datę, przypisuje ją do zmiennej $data a następnie generuje treść, która będzie pobrana i wyświetlona przez przeglądarkę. Pliki ze skryptem PHP mają zwykle rozszerzenie .php. W przeciwieństwie do skryptów JavaScript, które do działania potrzebują tylko przeglądarki, skryptów PHP nie da się tak po prostu uruchomić na lokalnym komputerze. Do działania potrzebują specjalnego oprogramowania zainstalowanego na serwerze www.

Oprócz pobierania daty skrypty PHP mogą na przykład sprawdzać jakie parametry są w adresie URL i generować odpowiednią podstronę, wykonywać obliczenia, działania logiczne oraz odczytywać i zapisywać dane w plikach na serwerze oraz w bazach danych.

SQL – język do komunikowania się z bazą danych

Oprócz tego, że treść strony znajduje się w plikach na serwerze www, może się też znajdować w bazach danych. Są to zbiory danych przechowywane w postaci tabel. Jest to wygodniejsze niż przechowywanie danych w plikach. Serwer www może się komunikować z serwerem baz danych i odczytywać oraz zapisywać dane za pomocą języka SQL. Jednym z popularniejszych systemów baz danych, wykorzystywanym do stron internetowych jest MySQL.

SELECT 
   dzien, 
   miesiac 
FROM imieniny 
WHERE imie = 'Ewa'

Czyli wybierz dane w kolumnach dzien i miesiac z tabeli imieniny dla wierszy w których w kolumnie imie jest treść 'Ewa'.
Analogicznie możemy zapytać o to kto ma imieniny 24 grudnia:

SELECT imie FROM imieniny WHERE dzien = 24 AND miesiac = 12

Można oczywiście wykonywać bardziej złożone zapytania łącząc ze sobą dane z wielu tabel. Można też dodawać nowe rekordy, edytować istniejące, usuwać, tworzyć tabele itp itd. Zdecydowana większość treści na stronach WordPressa jest przechowywana właśnie w bazie danych. Jest tabela z treścią wpisów, osobne z kategoriami, tagami, stronami, użytkownikami itd.

Podsumowanie

To tylko zarys opisujący języki i systemy biorące udział w powstawaniu stron internetowych. Chcieliśmy tym artykułem pokazać jak wiele elementów składa się na finalny efekt, czyli to co oglądamy w przeglądarkach. I na każdy z tych elementów możemy mieć wpływ. Nawet podstawowa wiedza o wymienionych językach może nam pozwolić na wprowadzanie na naszych stronach zmian, których nie da się wyklikać w WordPressie. W panelu administracyjnym możemy dodawać własne style CSS a także edytować niektóre pliki zawierające kod HTML i PHP. W kolejnych artykułach zapoznamy was z podstawowymi poleceniami w tych językach, byście mogli dostosować wasze strony do waszych oczekiwań.

Źródła i linki

• imienniczek.pl – omawiany przykład wykorzystania kodu PHP – „Imieniny dzisiaj – Czyje są dzisiaj imieniny”
• wordpress.org – oficjalna strona darmowego systemu CMS WordPress – „Blog Tool, Publishing Platform, and CMS”
• Zdjęcie tytułowe autorstwa Negative Space z Pexels