O stronie
![Obrazek globusu internetowwego](img/img24.png)
Prezentowana strona internetowa została napisana zgodnie z najnowszym standardem języka HTML 5.0, który został połączony z Kaskadowym Arkuszem Stylów (z ang. Cascading Style Sheets) popularnie zwanym CSS.
Kaskadowy Arkusz Stylów (CSS), to najczęściej oddzielny dodatkowy dokument (plik) stworzony przez autora strony, w którym za pośrednictwem odpowiednich znaczników oraz komend pisanych w języku angielskim określony jest cały wygląd strony, tj. kolor tła strony, kolor tekstu, wygląd menu, rozmieszczenie poszczególnych elementów na stronie, itp. Odpowiednio utworzony plik z rozszerzeniem css zapisujemy na dysku twardym komputera i za pomocą odpowiedniej linii kodu HTML podłączamy go do każdego pliku z rozszerzeniem html. Siła a jednocześnie piękno i magia Arkuszy Stylów tkwi w ich kaskadowości, czyli hierarchii oraz zdolności dziedziczenia ustalonych przez nas cech strony, np. jeśli dla strony głównej ustalimy w CSS zielony kolor tła, to dla wszystkich podstron będzie on także zielony bez konieczności zmiany koloru na każdej z nich. Jeśli natomiast dla określonego akapitu ustawimy niebeski kolor tła, to wówczas ten jeden akapit będzie niebieski, bo w hierarchii akapit jest ważniejszy niż ogólne tło strony. Prostota, minimalizm, przejrzystość i ogromne możliwości stylizacji stron internetowych tkwiące w Kaskadowym Arkuszu Stylów sprawia, że technologia ta staje się niezastąpionym narzędziem wykorzystywanym przy ich budowie.
![Obrazek przykładowego kodu HTML](img/img25.png)
Nie od dziś wiadomo, że wygląd to nie wszysto, równie istotna jest treść strony. Przyszedł więc czas by w dużym skrócie i uproszczeniu wspomnieć o sercu, które zawiaduje niniejszą stroną internetową, czyli o najnowszym standardzie języka HTML w wersji 5.0. Zgodnie z założeniami tego standardu oglądana przez ciebie strona została w całości zamknięta w znacznikach semantycznych. Znaczniki semantyczne mimo, iż nie mają bezpośredniego wpływu na treść i na wygląd strony, są bardzo ważne z punktu widzenia pozycjonowania strony w wyszukiwarce internetowej. Dzięki nim robot indeksujący naszą stronę w wyszukiwarce dokładnie wie co i gdzie się na niej znajduje, a to z kolei w znacznym stopniu przekłada się na wysoką pozycję strony w wynikach wyszukiwania. Drugą bardzo ważną rolą znaczników semantycznych jest to, że ułatwiają one czytanie naszej strony programom dla osób niewidomych i niedowidzących. Dzięki nim program wie, który określony przez użytkownika fragment naszej strony ma przeczytać. W znacznikach semantycznych występujących w każdym pliku z rozszerzeniem html, znajdują się także przeźroczyste pojemniki zwane divami, których wielkość i położenie zdefiniowane jest we wspomnianym wyżej Kaskadowym Arkuszu Stylów. Zadaniem divów jest przechowywanie właściwego contentu (treści) strony widocznego dla osób, które ją odwiedzają.
Do tak skonstruowanego fundamentu strony składającego się z dwóch plików, tj. pliku HTML i CSS zostały zaimplementowane dodatki poprawiające jej wygląd oraz wygodę użytkowania, są to:
![Obrazek przedstawiający ikonki przeglądarek internetowych](img/img26.png)
Lepkie menu (z ang. sticky menu) - to "klejący" się do górnej krawędzi ekranu pasek z menu głównym. Rozwiązanie to sprawia, że osoba przeglądająca stronę internetową zawsze widzi u góry ekranu menu główne i może z niego swobodnie skorzystać niezależnie od tego w którym miejscu strony aktualnie się znajduje.
Zakotwiczenie tekstu połączone z efektem scrollTo (przewiń do...) - automatyczne płynne przewijanie do wybranej części tekstu po kliknięciu jej tytułu w spisie treści i z powrotem.
Przeglądarka do zdjęć "Lightbox" - dzięki niej każda osoba czytająca zakładkę "O mnie", może po kliknięciu w znajdujące się tam zdjęcia przeglądać je w pełnym rozmiarze wraz z podpisem, a następnie bez problemu wrócić do czytanego tekstu klikając w dowolne miejsce poza zdjęciem.
Ikonki fontello - niemal na każdej stronie internetowej znajdują się ikonki prowadzące do kontaktu z autorem, Facebooka, Instagrama, itp. Rozwiązanie to można zrealizować na dwa sposoby - poprzez podłączenie do pliku z rozszerzeniem html typowych obrazków symbolizujących dany przycisk, lub pobranie obrazkowych czcionek fontello ze strony fontello.com. Przewaga między jednym a drugim rozwiązaniem polega na tym, że tradycyjne ikonki obrazkowe zajmują sporo miejsca na serwerze, dłużej się wczytują, nie są w żaden sposób dodatkowo konfigurowalne i często nie są bezpłatne. Natomiast czcionki fontello przede wszystkim są czcionkami a nie obrazkami,
Hover - efekt zmiany koloru przycisku po najechaniu na niego kursorem myszy stosowany w CSS. Komenda ta jest alternatywą dla stosowanego w języku HTML polecenia onmouseover i onmouseout.
Google Fonts - zapewne każda osoba przeglądająca jakiekolwiek strony internetowe nie raz spotkała na nich tekst, którego akapity bądź poszczególne słowa napisane były różnymi czcionkami, przez co jedne z nich bardziej przyciągały uwagę a inne mniej. Nic w tym dziwnego - wszak Internet to narzędzie, które nie znosi nudy - ale nie ma chyba osoby, która znałaby na pamięć wszystkie nazwy czcionek wykorzystywanych na stronach internetowych i wiedziałaby jakie do nich pasują. Jak zatem wybrać czcionkę, która da internautom komfort czytania strony internetowej i jednocześnie poczucie obcowania z czymś ekskluzywnym? Odpowiedzią na to pytanie jest wykorzystana przy budowie tej strony baza czcionek Google Fonts, z której wybiera się jedną lub kilka czcionek, a następnie pobiera się z niej wygenerowane kody tych czcionek i wkleja zarówno do Kaskadowego Arkusza Stylów, jak i do każdego pliku z rozszerzeniem html. Ja wybrałem czcionkę bez szeryfową o nazwie "Lato".
![Obrazek globusu internetowwego](img/img28.png)
Biblioteka jQuery oraz język JavaScript. Biblioteka jQuery, to gotowy do pobrania z Internetu plik przy pomocy którego działają wspomniane wyżej trzy pierwsze komponenty prezentowanej strony internetowej, tj. "klejące" się do górnej krawędzi ekranu menu główne, automatyczne przewijanie do wybranego miejsca w tekście oraz przeglądarka "Lightbox". Za płynność automatycznego przewijania strony odpowiada natomiast język JavaScript, który znajduje się w "głowie strony", czyli w znaczniku hed, który znajduje się w każdym pliku HTML.
Kończąc pisanie o technologii wykonania niniejszej strony internetowej dodam tylko, że została ona napisana przeze mnie własnoręcznie w notatniku "Notepad++" w wersji 7.9.4. Mam nadzieję, że zastosowane tu i opisane wyżej technologie sprawiają, iż czyta się ją przyjemnie i komfortowo.
Pozdrawiam serdecznie
autor strony
Mirosław Haraś