Ultraszybki serwer VPS NVMe START
programowanie

Po zapoznaniu się z sekcją <head> witryny, pora najwyższa nauczyć się tworzenia struktury ciała witryny w sekcji <body> dokumentu HTML. Naszym celem dzisiaj jest zrozumieć sposoby tworzenia klasycznej siatki elementów blokowych, tak aby podczas egzaminu móc stworzyć zadaną strukturę w ciągu zaledwie 5-7 minut. W praktyce jednak, dzisiejszy odcinek zaprosi nas do eksploracji całej gamy przeróżnych metod budowania szkieletów witryn internetowych – od tabel, przez divy, po nowe znaczniki strukturalne wprowadzone w HTML5 i responsywne siatki (RWD = ang. Responsive Web Design). Rozwiniemy także umiejętności miękkie, potrzebne do skutecznego komunikowania się w celu wymiany poglądów i doświadczeń zawodowych bez niepotrzebnych emocji, animozji, zachowań dogmatycznych, czy stawiania siebie w roli nieomylnego, zasiadającego w wygodnym fotelu eksperta, sędziego.

Przede wszystkim jednak, nadal zachowujemy podczas naszej pracy pierwotną, atawistyczną radość z uczenia się nowych umiejętności. Kiedy nauka wynika bardziej z naturalnej ciekawości i pasji, aniżeli z przymusu, rezultaty bywają zaskakująco dobre. To nasze umysły i ciała, jako systemy otwarte, naturalnie iskrzą nowymi połączeniami i asocjacjami, ucząc się i rozumiejąc coraz więcej, co też daje nam wiele radochy i satysfakcji. Bycie początkującym w jakiejkolwiek dziedzinie bardzo często wiąże się ze sporą dawką entuzjazmu i poczucia niczym nieskrępowanej, dziecięcej frajdy. Sztuką samą w sobie (którą niektórzy nazywają ścieżką własnego mistrzostwa) jest utrzymać reżim treningowy także kiedy ten początkowy entuzjazm siłą rzeczy się wyczerpie. Więcej o przemijającej motywacji, o długoterminowym charakterze treningu i sposobach skutecznej nauki napisałem w tym miejscu – polecam lekturę osobom zainteresowanym. A my bierzmy się do pracy!

Jak tworzymy strukturę witryny internetowej? Pozwólcie, że odpowiem na tak postawione pytanie parafrazując graficznie – na obrazku poniżej – piramidę potrzeb Abrahama Maslowa, zamieniając ją w piramidę sposobów tworzenia szkieletu sekcji body dokumentu HTML. Przedstawiam naturalną ewolucję metod rozmieszczania elementów na wirtualnym płótnie przeglądarki internetowej:

Dlaczego nie budujemy struktury na tabelach?

Podstawę piramidy stanowi powstrzymanie się od intuicji użycia tabeli do planowania rozmieszczenia elementów witryny. Jakkolwiek samo stosowanie tabel to zdecydowanie w web developerce relikt przeszłości, to jednak ludzie po dziś dzień wykazują naturalną chęć użycia wierszy i kolumn do planowania ciała dokumentu HTML i to raczej nigdy się nie zmieni – czytamy gazety, książki, ulotki – jesteśmy przyzwyczajeni do kolumnowego rozkładu tekstu i grafik. Tabela wydaje się być idealna – przy jej pomocy łatwo zorganizować sobie szpalty tekstu i na tej podstawie rozplanować content artykułu. Często tak zresztą postępujemy w edytorach typu Word, Libre Office Writer, WordPad. Arkusze kalkulacyjne (Excel, Libre Office Calc) także zachowują strukturę wierszy i kolumn, podobnie jak bazy danych, faktury VAT, potwierdzenia przelewu czy nawet paragony.

Nie należy więc ganić siebie (albo innej osoby) za intuicję użycia tabeli do rozmieszczenia zawartości witryny – często taką bezpardonową, wręcz prześmiewczą wobec innych manierę, wykazują młodzi entuzjaści tworzenia stron internetowych (którzy nauczyli się już dlaczego to podejście akceptowalne nie jest). Zapominają oni wówczas, iż sami także taką chęć na początkowym etapie nauki wykazywali, albo może pamiętają o tym w głębi podświadomości, ale chcąc podkreślić jak wiele już wiedzą o tworzeniu witryn, namiętnie piętnują innych za choćby zwykłe zadanie pytania o możliwość wykorzystania tabel. Dlaczego więc tabele nie nadają się do tworzenia struktury witryny? Poniżej zestawiłem siedem „grzechów głównych” stosowania w tym celu znacznika table:

  1. Niepełne rozdzielenie zawartości witryny od opisu jej wyglądu (problemy ze stylizowaniem tabel w CSS).
  2. Komórka w tabeli nie jest autonomicznym elementem takim jak blok (div albo nowy kontener w HTML5).
  3. Tag <table> nie jest pomyślany jako znacznik strukturalny – ma służyć do tabelarycznego prezentowania informacji.
  4. Stosowanie tabel skutkuje powstawaniem nadmiarowego kodu opisującego strukturę witryny.
  5. Przeglądarka wolniej ładuje i renderuje zawartość strony, której szkielet zbudowano na tabeli.
  6. Tabele nie są SEO friendly (ang. Search Engine Optimization – optymalizacja w wyszukiwarkach internetowych).
  7. Szkielet tabelaryczny uniemożliwia zastosowanie responsywności (różnego układania bloków w zależności od aktualnego rozmiaru ekranu).

Samo posiadanie intuicji do stworzenia swoistej siatki wierszy i kolumn jest dobre i naturalne. Później zresztą, pracując już na stronach responsywnych, przekonasz się, iż takie myślenie tabelaryczne stało się także podstawą responsywnych frameworków, takich jak np. Bootstrap. W Bootstrapie posługujemy się siatką (tzw. gridem) divów (albo innych elementów blokowych znanych z HTML5) złożoną z maksymalnie dwunastu kolumn:

I oczywiście to nadal są struktury blokowe, a nie tabele, niemniej jednak to myślenie o stronie jako o siatce wierszy i kolumn, ewidentnie tam występuje. Dodatkowo, w Bootstrapie określamy także dostępne w witrynie, predefiniowane rozmiary ekranu:

W zależności od obecnego rozmiaru okna przeglądarki, witryna potrafi zatem odpowiednio dostosować swoją strukturę do zaistniałych okoliczności (z użyciem JavaScript i CSS). Trudno więc nazwać Bootstrapa dokładną realizacją tabelarycznej intuicji, niemniej jednak sama idea wierszowo-kolumnowej budowy szkieletu witryny, idea posiadania układu kartezjańskiego o dwunastu jednostkach, rzeczywiście w gridzie występuje. Zatem fakt, iż posiadamy taką „tabelaryczną” intuicję i że w pewien sposób kusi nas użyć znacznika <table> przestaje nas dziwić – w końcu ekran przeglądarki to płaszczyzna, a położenie elementu na płaszczyźnie opisujemy zazwyczaj dwiema współrzędnymi.

Trzeba jednak poskromić tę pokusę ze względu na poważne, negatywne implikacje użycia <table> jako fundamentu witryny. A najlepiej przekuć tę pokusę w miłość do autonomicznych elementów blokowych, które rzeczywiście lepiej nadają się do frywolnego bazgrania po wirtualnym płótnie okna przeglądarki. Więcej o wadach tabel w drugim odcinku serii HTML.

Elementy blokowe, domyślne zachowanie bloków

Do zbudowania szkieletu współczesnej witryny internetowej używamy tak zwanych znaczników strukturalnych. Klasycznym przykładem takiego znacznika jest <div> (od ang. divide = podział strony). Divy nazywane są też często elementami blokowymi, albo wprost – blokami. Element blokowy ma to do siebie, że zawsze układa się pod poprzedzającym go elementem. Na przykład: mamy w kodzie witryny dwa divy: czerwony i niebieski. Nawet jeżeli ten pierwszy blok zajmuje jedynie 30% dostępnego na ekranie miejsca, to i tak następny, niebieski div, ułoży się domyślnie pod czerwonym. Pomimo, że zmieściłby się obok, to i tak ułoży się pod poprzednim – tak właśnie domyślnie zachowują się elementy blokowe

…to jedynie wstęp do całego artykułu w PDF. Pobierz plik poniżej ↓


Obudowa dydaktyczna oraz wersja na słuchawki:

pdf file mp3 file






8 pytań sprawdzających wiedzę z odcinka:


Pobierz kody źródłowe z odcinka:


Udostępnij