Języki programowania stron internetowych

Języki w skrócie

Strona Internetowa to HTML, reszta jest dodatkiem, acz bardzo ważnym, bez którego nowoczesne dzisiejsze strony nie są w stanie się obejść. Myślę tu o CSS, czyli opisywaniu głównie wyglądu i rozmieszczenia każdego elementu. Kolejnym jest język JavaScript (JS), dzięki któremu i jego wielu bibliotekom jesteśmy dziś w stanie budować złożone zależności wszystkich elementów i interakcji z użytkownikami. Są jeszcze języki biorące udział w zarządzaniu samym kodem strony, jak PHP używany w WordPressie, który montuje plik strony html z wielu fragmentów w tym pobranych z baz danych, obsługiwanych w WordPress przez kolejny język zwany SQL. Główne języki są kompilowane w przeglądarce, a ich supersety (jak np. TypeScript dla JS, czy SASS dla CSS) nie, ale pomagają je usystematyzować i wygenerować przed załączeniem do strony. Jest jeszcze wiele języków, które w zamyśle nie mają nic wspólnego z technologiami webowymi, a dostały możliwość swojego zaistnienia w tym infosystemie dzięki WebAssembly.

HTML

Akronim z angielskiego Hyper Text Markup Language, to właśnie ten główny język od stron internetowych. Nie można go niczym zastąpić.* Jakich by narzędzi nie używać, zawsze musi być do przeglądarki internetowej wysłany dokument html. Na jego podstawie budowany jest model strony tzw. DOM, czyli Document Object Model. To nim manipuluje JavaScript, np. poprzez bibliotekę jQuery. Są w niej odwołania do wykonania różnych funkcji po załadowaniu DOM. Wtedy pisząc wywołanie używamy konstrukcji:

// JavaScript kod

$(document).ready(function(){ //a tu umieszczamy cały potrzebny kod });

HTML jest językiem znaczników. To, co widzi się w edytorze tekstu, aby zaistniało na stronie trzeba opisać, żeby przeglądarka wiedziała, jak ma traktować poszczególne elementy. I tak, na przykład słowa tworzące tytuł artykułu, aby zostały odczytany jako tytuł muszą trafić między znaczniki, w poniższym przykładzie h2, i tekście akapitu p.

<!-- HTML kod -->

<h2>Języki programowania stron WWW</h2>

<p>Strona Internetowa to HTML, reszta jest dodatkiem, acz bardzo ważnym...</p>

Dopiero wtedy wiadomo, że składają się one na tytuł, a kolejne na akapit. Więcej o języku można znaleźć pod tym odnośnikiem: MDN.

CSS

Kontynuując przykład, można się spodziewać, że tytuł wyświetli się zgodnie z naszymi oczekiwaniami. Najprawdopodobniej w osobnej linii i o większej czcionce od następującego po nim tekstu. Tak też jest, ale tylko za sprawą predefiniowanych styli w przeglądarkach, które jednak różnią się między sobą w tej kwestii.

Aby sprostać sztuce prezentowania słowa pisanego należy odpowiednio opisywać znaczniki html. H1, czyli nagłówek (ang. header) najwyższego poziomu, odpowiada głównemu tytułowi strony, a w odniesieniu do książki, jej tytułowi. H2 tytułom stron, artykułów, rozdziałów książek, a h3 ich podrozdziałom, podtytułem itd. H5 może być stosowane np. do nagłówków list. Należy pamiętać, żeby na stronie nagłówki występowały w logicznej kolejności. Numery przy H oznaczają ważność nagłówka, a nie jego wielkość, chociaż można odnieść takie wrażenie, ponieważ domyślnie każde H o większym numerze, jest mniejsze od poprzedniego. Bez zrozumienia tego do powiększania czcionki nagłówka wybierzemy nagłówek o mniejszym numerze i nie świadomie zaburzymy strukturę, która jest wykorzystywana przez czytniki dla osób niedowidzących, oraz roboty indeksujące pod SEO. Wielkość i inne cechy nagłówków, czy innych znaczników opisuje się w stylach. Przykład stylu dla nagłówka tej strony poniżej.

/* CSS kod */

h2 {
  font-family: 'PT Serif';
  font-weight: 700;
  font-size: 62px;
  line-height: 1;
  color: #252B31;
}

Stylizowanie znaczników koduje się najczęściej w osobno zapisywanych plikach z rozszerzeniem css, czyli w kaskadowych arkuszach stylów.

Kaskadowe odnosi się do hierarchii ważności stylizowania tego samego elementu kilka razy. Każdy później wczytany arkusz ma większe uprawnienie do nadpisania wcześniejszego stylu, o ile tamten nie ma nadanego jeszcze innego, specjalnego atrybutu, którego kolejny arkusz nie może znieść zwykłym ujęciem stylu znacznika. Ta hierarchia jest wyliczana w tzw. specyfikacji, gdzie znaczniki dostają też rangi ze względu na opis stylu przypisanego do nich identyfikatora i klas. Na koniec muszę wspomnieć o wyjątku zapisywanym jako !important, który podnosi rangę wybranego stylu. Więcej, tym razem po angielsku: MDN.

envelopephone-handset