HTML + CSS + BOOTSTRAP, czyli o stronach www i ich stylizacji oraz responsywności.
Budowanie stron www to bardzo ciekawe zagadnienie z pogranicza programowania i tworzenia treści. Wskakując w świat www, możemy spotkać się z różnymi pojęciami, takimi jak: WordPress, Drupal, Laravel, PHP, JavaScript, React, Vue, Wix, i tak dalej i dalej… Dla „świeżaka” to makabra vel masakra. Strony jesteśmy w stanie tworzyć w kreatorach, w systemach zarządzania treścią, w potężnych frameworkach. Mogą one być statyczne, a także dynamiczne. Powiązane z aplikacjami czy serwisami typu Facebook i YouTube. Ogólnie chaos! Piękny chaos, ale chcemy podstaw. Od czego zatem zacząć? Proponuję statyczną, klasyczną stronę HTML.
Znaczniki? A co to?
HyperText Markup Language, czyli HTML, to język znaczników, używany do opisywania dokumentów hipertekstowych. Hipertekst to tekst czytany nieliniowo – nie książka, którą czytamy w porządku. Hipertekst charakteryzuje się tym, że to użytkownik nawiguje po leksjach (podstawowych jednostkach hipertekstu), czytając tylko te obszary, które go interesują. Brzmi znajomo? W dużym uproszczeniu: tak właśnie działają strony internetowe. Mamy jakiś tekst, w którym jest link do innego tekstu, w którym jest kolejny link – i tak dalej. Język znaczników to nic innego, jak format dokumentu. Poprzez znaczniki definiujemy, czy dany tekst jest na przykład pogrubiony, a może jest wypunktowaną listą lub linkiem do innej treści.
Pisanie dokumentów HTML ociera się zatem o programowanie. W tym przypadku programujemy przeglądarkę internetową. Mówimy jej, jak ma wyświetlić i traktować nasz tekst. No właśnie: pisanie. Do pisania stron internetowych nie potrzebujemy specjalnych kompilatorów czy edytorów. Wystarczy nam notatnik. Najzwyklejszy edytor tekstów. Osobiście jednak polecam jakiś edytor dla programistów, coś w stylu Visual Studio Code lub Sublime Text. Taki edytor pomaga nam w pisaniu, na przykład poprzez autouzupełnianie czy kolorowanie składni, jesteśmy więc w stanie szybciej wychwycić błąd. Jak zatem wygląda taki dokument HTML? Na przykład tak, jak poniżej:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł Strony</title>
</head>
<body>
<h1>To jest nagłówek</h1>
<p>To jest zwykły tekst</p>
<a href=”https://productdesignmagazine.pl/„>
To jest link do ProductDesignMagazine.pl
</a>
</body>
</html>
W tym przykładzie zapisana jest prosta, ale w pełni funkcjonalna strona internetowa. Możecie sprawdzić sami! Kopiujemy tekst do pustego notatnika i zapisujemy dokument z rozszerzeniem .html. Teraz możemy otworzyć ten plik w przeglądarce.
Rozłożymy teraz ten dokument na atomy. Po pierwsze: dokument posiada odpowiednią strukturę. Całość zawarta jest w znaczniku <html>. Sekcja <head> odpowiada za metadane strony, takie jak załączone skrypty czy style, o których później. W naszym przypadku jest to tytuł zawarty w znaczniku <title>, w efekcie wyświetlany jako tekst na karcie przeglądarki. Kolejna sekcja <body> to ciało naszego dokumentu. W niej umieszczamy właściwy kontent strony.
Po drugie: każdy otwarty znacznik (dobra, nie każdy, jest kilka wyjątków, ale nie o tym teraz) musi zostać zamknięty:
<html></html>, <body></body>, <a></a>
i tak dalej… Znaczniki można zagnieżdżać, a w niektórych przypadkach nawet trzeba:
<head><title></title></head>.
Otwieramy head, otwieramy title, zamykamy title, zamykamy head. Zwróćmy uwagę, że w przypadku zagnieżdżeń ważna jest kolejność zamykania znaczników.
Po trzecie: tekst, który znajduje się pomiędzy znacznikami, to nasza treść, którą widzi użytkownik. W naszym przypadku znaczniki <h1> oraz <p> określają rodzaj tekstu, ale znacznik <a> jest bardziej funkcjonalny – to link do innej strony www. Treść tego linku może być dowolna, zaś faktyczny link podajemy w atrybucie znacznika: href. Poprzez atrybuty znaczników wpływamy nie tylko na zachowanie, ale również na wygląd treści. Na przykład znacznik <font> posiada atrybut color, definiujący kolor tekstu:
<h1><font color=”red”>To jest nagłówek</font></h1>
Powyższy zapis ustawi tekst „To jest nagłówek” jako typ nagłówkowy <h1> oraz nada kolor czerwony. Znaczniki mogą mieć wiele atrybutów według poniższego schematu.
<znacznik atrybut_01 = ”wartość” atrybut_02 = ”wartość” …>
Co ważne: przy zamknięciu znacznika nie podajemy atrybutów.
Znaczników jest sporo. Istnieją znaczniki osadzające w dokumencie multimedia takie, jak obrazy czy wideo, a nawet osadzające inne strony www (popularny <iframe>). Ciekawostką jest to, iż całą stronę możemy napisać ciągiem, w jednej linii.
<!DOCTYPE html><html><head><title>Tytuł Strony</title></head><body><h1>To jest nagłówek</h1><p>To jest zwykły tekst</p><a href=”https://productdesignmagazine.pl/„>To jest link do ProductDesignMagazine.pl</a></body></html>
Nadal jest to poprawna, ta sama strona www. Dokumenty HTML staramy się jednak formatować. Głównie dla czytelności.
Więc chodź, pomaluj mój HTML
Wiemy już jak zbudować stronę www za pomocą html-owych znaczników. Wiemy, że możemy wpłynąć na jej wygląd bezpośrednio w HTML (np. na kolory). Prawdziwą stylizacją naszej strony zajmuje się jednak CSS.
Kaskadowe Arkusze Stylów (z ang. Cascading Style Sheets) to język służący do opisu wyświetlania stron www. Z polskiego na nasze: CSS odpowiada za wygląd strony. Za jej detal, za jej styl. W CSS zapisujemy, jak mają wyglądać treści poszczególnych znaczników czy elementów. Jak ma wyglądać ich ułożenie czy zachowanie względem wskaźnika myszy.
Pamiętamy sekcję <head> w dokumencie HTML. W tej sekcji, jak już wspomniałem, możemy podpiąć dodatkowe skrypty lub właśnie style. Stylami nazywamy pliki tekstowe (choć nie tylko, gdyż styl możemy zapisać bezpośrednio w sekcji head), tym razem w formacie .css, które możemy utworzyć w dowolnym edytorze tekstu. Styl CSS możemy nadać również bezpośrednio w znaczniku/elemencie HTML (tak zwany styl inline).
Kaskadowość, w skrócie, polega na tym, że style możemy nadpisywać. Style mogą być zapisane w kilku miejscach/plikach, zatem liczy się odpowiednia kolejność deklaracji. Aby zbyt mocno nie odpłynąć w teorię, rozjaśnijmy sytuację na żywym przykładzie. Zamieńmy naszą stronę w coś ostylowanego – jak na obrazie poniżej.
Pliku HTML nie ruszamy. W sekcji <head>, zaraz po zamknięciu </title> podpinamy nasz arkusz stylów.
<link rel=”stylesheet” href=”style.css”>
Uwaga! Znacznika <link> nie musimy zamykać. W atrybucie href podajemy ścieżkę do pliku ze stylami. W naszym przypadku, aby wszystko zadziałało poprawnie, plik HTML oraz CSS znajdować się muszą w tym samym katalogu (po więcej informacji na temat ścieżek odsyłam w szeroki świat internetu), a poniżej przedstawiam treść pliku style.css.
body {
background-color: rgb(170, 218, 235);
}
h1, p, a {
font-family: verdana;
}
h1 {
color: white;
text-transform: uppercase;
text-align: center;
}
p, a {
margin-left: 50px;
color: rgb(50, 50, 50);
font-size: 20px;
text-decoration: none;
}
a {
font-family: georgia;
}
a:hover {
background-color: thistle;
}
A teraz po kolei. CSS, jako język, różni się znacząco od HTML. Przede wszystkim występuje tu zupełnie inna składnia. W CSS nie pracujemy z treścią (treść strony www istnieje w HTML) – pracujemy z elementami naszej strony. Elementami mogą być poszczególne znaczniki, ale również klasy lub unikatowe id (o tym później).
W naszym przypadku ustawiamy dla znacznika <body> (a jako że w tym znaczniku znajduje się cała treść, to de facto i dla całej strony) kolor jasnoniebieski (podany jako kod rgb). Następnie dla znaczników <h1>, <p> oraz <a> ustawiamy krój fontu jako Verdana. Osobno zaś dla <h1> ustawiamy jego kolor na biały, tekst uppercase, czyli duże litery, oraz pozycję wyśrodkowaną. Dla znaczników <p> i <a> przyjmujemy lekki margines z lewej (wyrażony w pikselach), kolor szary w rgb, rozmiar tekstu w pikselach oraz brak dekoracji (chodzi tutaj o podkreślenia, przekreślenia itp.).
Teraz trochę kaskadowości. Dla znacznika <a> przyjmujemy krój fontu Georgia. Zwróćmy uwagę, że krój fontu dla znacznika <a> został już wcześniej ustawiony na Verdanę (wraz ze znacznikiem <h1> oraz <p>). Ponieważ znaczenie ma kolejność deklaracji, ostatecznie font dla <a> będzie Georgią. Na tym, w uproszczeniu, polega kaskadowość.
Ostatnim elementem jest ta dziwna deklaracja a:hover. Oznacza ona reakcję na wskaźnik myszy. W naszym przypadku, jeżeli kursor znajdzie się nad treścią znacznika <a>, to tło tejże zmieni kolor na jasno różowy (thistle).
W naszym CSS rozpisaliśmy style dla znaczników <body>, <h1>, <p> oraz <a>. Co, jeśli użyjemy innego znacznika, na przykład <h2>? Jeżeli nie zadeklarujemy żadnego stylu, przeglądarka, oczywiście, wyświetli element w stylu domyślnym. Warto wspomnieć również, że zapisaliśmy style dla wskaźników, co oznacza, że jeżeli na naszej stronie pojawią się kolejne elementy <h1>, <p> czy <a>, przyjmą one odpowiedni już zadeklarowany styl.
Co z wyjątkami? Wyobraźmy sobie sytuację, że mamy ostylowany znacznik <a>, a na naszej stronie chcemy mieć kolejny <a>, ale unikatowy, inny od wszystkich. W CSS możemy odwołać się również do konkretnego elementu. Wystarczy odpowiednio oznaczyć taki element w dokumencie HTML, czyli nadać atrybut id lub class, a następnie odwołać się w CSS i nadać unikatowy styl.
Możliwych opcji stylizacji jest masa. Zarówno, jeżeli chodzi o poszczególne właściwości czy ich jednostki (rozmiary w pikselach czy procentach, kolory w rgb, kolory w hex), jak i zachowanie stron na różnych urządzeniach. Nic więc dziwnego, iż powstają przeróżne szablony, szkielety, frameworki oparte o CSS i HTML.
Bootstrap framework, to już brzmi poważnie
Wiemy już sporo na temat HTML i CSS. Wspomnieliśmy o frameworkach, czyli takich rusztowaniach pod budowę stron www. Obecnie istnieje potrzeba, aby strony budować responsywnie. Tak, aby raz napisana strona www była funkcjonalna i ładna na klasycznych komputerach i ekranach, ale również na platformach mobilnych. Z pomocą przychodzi Bootstrap – biblioteka CSS, rozwijana przez programistów Twittera. To nie tylko gotowe stylizacje przycisków, tekstów czy formularzy. Framework ten to przede wszystkim system kolumn i wierszy, pozwalający na szybkie budowanie stron www, zachowujących się odpowiednio na różnych ekranach. Tworzenie strony opiera się wtedy głównie o znaczniki <div> z atrybutem class. Przykładowy kod Bootstrap poniżej.
<div class=”row”>
<div class=”col-xs-12 col-md-8″>zawartość komórki</div>
<div class=”col-xs-6 col-md-4″>zawartość komórki</div>
</div>
Oznacza on, że pierwsza komórka na telefonach będzie zajmować całą szerokość ekranu, a na średnich i większych ekranach będzie miała 2/3 szerokości wiersza, a po jej prawej będzie druga komórka na 1/3 wiersza.
Zostawiam Was z powyższymi podstawami wiedzy o budowaniu stron www i gorąco zachęcam do pójścia dalej!
