[0:07]Witam serdecznie z tej strony Mirosław Zelen. Zapraszam państwa do drugiego odcinka kursu HTML. Odcinek ten jest szczególnie ważny i cenny, bo dotyczyć będzie planowania struktury strony. Czyli innymi słowy będziemy budować szkielet rozmieszczenia elementów na stronie. To jest zawsze największy problem osób rozpoczynających swoją przygodę z HTML-em, bo każdy z nas intuicyjnie wie, jak rozmieścić elementy na przykład w pliku Worda czy w programie graficznym. A w HTML-u jest trudniej. Po pierwsze, musimy to zrobić z użyciem tekstowych znaczników, tak więc kodu źródłowego, a nie jak na przykład w programie graficznym łapiąc sobie ten element i po prostu przesuwając go myszką. Po drugie, na początku nauki bardzo często to układanie elementów na stronie po prostu nie wychodzi nam tak, jak byśmy tego chcieli. Męczymy się z tymi divami, przesuwając je w lewo, w prawo, do góry, na dół, prawda? A i tak odnosimy nieodparte wrażenie, że ta strona żyje własnym życiem i nie chce nas słuchać. Jest to niewątpliwie irytujące. Wręcz powiedziałbym, że etap budowania struktury strony stanowi dla wielu osób moment zniechęcenia. Niepotrzebnego zniechęcenia, tak naprawdę, co dziś, hopefully, uda mi się państwu udowodnić. Tak wiele osób zniechęca się na tym etapie nauki, iż programiści stworzyli nawet coś takiego, jak tak zwane edytory WYSIWYG, co jest akronimem, a wiadomo nie od dziś, że programiści są zboczeni na punkcie używania akronimów od słów What You See Is What You Get, czyli to, co widzisz w edytorze, no to dostaniesz w przeglądarce. Super, nie? Po co się męczyć kodowaniem? Tylko że z tymi edytorami graficznymi jest trochę jak z komunizmem. Idea niby dobra, ale w praktyce to już nie wychodzi tak kolorowo. Takie graficzne edytory mają olbrzymią wadę. Generują za dużo niepotrzebnego kodu. Człowiek piszący samodzielnie w HTML-u strukturę witryny zawsze napisze to krócej i uzyska bardziej optymalny kod. Poza tym budować trzeba na skale, a nie na piasku. Jeżeli strukturę, czyli rdzeń witryny, zbudujesz w nadmiarowym kodzie, to cała ta budowla będzie byle jaka. Zresztą i tak trzeba się nauczyć pozycjonowania elementów na stronie, bo przecież czasami otrzymasz zlecenie przebudowy już istniejącej witryny. Bez zrozumienia, jak poukładane są tam elementy, nie ruszysz nawet z miejsca. Edytor WYSIWYG w większości przypadków nie otworzy prawidłowo takiej witryny i wszystko się tam rozwali. A swoją drogą to my jesteśmy tutaj po to, żeby HTML-a zrozumieć w pełni i znać na wylot. Nie interesują nas jakieś półśrodki. Nawet nie muszę tego teraz tłumaczyć, bo państwo sami oczekujecie przede wszystkim jakości od kursu HTML-a. Pomagacie mi zresztą cały czas, oferując liczne sugestie i propozycje, za co jestem wam niezmiernie wdzięczny. Piszą do mnie nawet osoby doświadczone w temacie tworzenia stron i mówią: ja już dawno to umiem, ale widzę, że robisz coś fajnego, wartościowy kurs dla adeptów. Pomyślałem, że napiszę maila i pomogę ci co nieco. Nie zapomnij o tym, o tamtym, a ja bym to zrobił tak i tak. Szczerze za to dziękuję i cieszę się, że YouTube to właśnie też community, że naszym wspólnym celem jest jakość tego kursu, a państwo pomagacie tak naprawdę więcej, niż wam się może wydawać. Zdarza mi się także uczyć pisania stron WWW na żywo, w realnym świecie i naprawdę zaobserwowałem wiele razy, że osoba, która zrozumiała, jak się tworzy strukturę strony WWW, nagle nabierała nowego zapału do pracy, świeżej motywacji. Najczęściej ktoś wypowiada wówczas słowa w stylu: hmm, to jednak nie jest takie trudne, jak by się mogło wydawać, albo nie sądziłem, że może to być takie proste. Chyba wrócę jeszcze do tego HTML-a, bo teraz widzę, że jednak można się tego nauczyć. Pokonywanie własnych ograniczeń to taki głęboki instynkt, który siedzi gdzieś tam w środku nas. Antropologiem nie jestem, ale wiem, że daje to zawsze ludziom sporo satysfakcji, takiego powera i chęci. Dziś w odcinku niniejszym postaramy się osiągnąć wszystkie poziomy tak zwanej taksonomii celów nauczania Blooma. Zdobędziemy wiedzę, czyli innymi słowy poznamy zasady, jak się tworzy strukturę witryny, ale także uzyskamy zrozumienie tej wiedzy i zastosujemy ją w konkretnym projekcie. Po przepracowaniu tego odcinka będziesz w stanie przeanalizować budowę dowolnej witryny oraz samodzielnie stworzyć, czyli zsyntetyzować własny projekt. Ocenimy dziś także jakość dwóch różnych sposobów rozmieszczania elementów na stronie internetowej, podejścia opartego na tabelach oraz podejścia opartego na tak zwanych divach. Także czeka na nas sporo atrakcji, sporo nowej wiedzy, ale i umiejętności. I życzę ci, drogi widzu, abyś po przepracowaniu tego odcinka także poczuł przypływ entuzjazmu, ale i konkretnego skilla, bo przepracowanie tego filmu pomoże ci popchnąć twoje umiejętności tworzenia stron w HTML-u znacząco do przodu. Na zupełnie inny poziom niż dotychczas. Państwo wiecie też, że szanuję wasz czas. Zatem zakończmy już wstęp i do dzieła. Dziś stworzymy strukturę następującej witryny. Ostatnio mówiliśmy o filmach, no, dziś zrobimy sobie szkielet serwisu o serialach. Jak widzimy, strona składa się z kilku dających się wyróżnić elementów. Mamy tutaj logo, menu boczne z lewej strony. Czasem takie menu umieszcza się też poziomo pod logiem, ale tu akurat mamy takiego sidebar-a i dalej zawartość główna podstrony, czyli powiedzielibyśmy treść artykułu. A po prawej mamy przewidziane miejsce na reklamę, na przykład z AdSense-a. I rzecz jasna, u dołu strony znajduje się typowa stopka. Taką właśnie strukturę, taki layout dziś będziemy implementować z użyciem HTML-a i CSS-a. I teraz tak, zasadniczo mamy dwie filozofie tworzenia struktury witryny, o czym wspominałem. Albo jest ona zbudowana na tak zwanych divach, albo na tabelach. Zbudujemy te strony obiema metodami i sami doświadczymy zalet i wad każdego podejścia. Zwróć uwagę, ocenianie to najwyższy poziom umiejętności w taksonomii. Pamiętamy tę piramidę? No bo zauważ, żeby coś ocenić, to trzeba mieć rzeczywiste doświadczenie w danej materii, prawda? Trzeba dobrze znać tę dziedzinę. Więc my nie oceniamy z góry. Najpierw pokodujemy, zobaczymy, jak to jest w każdym podejściu, sami wyrobimy sobie opinię i tą ostateczną oceną podsumujemy cały odcinek. Natomiast co do szczegółów. Znacznik div wziął się od angielskiego słowa divide. No, divide znaczy podzielić. Zatem div jest to podział strony. Jest to taki element blokowy, czy najprościej mówiąc prostokąt. Domyślnie taki blok, taki div nie ma żadnego obramowania, służy on jedynie do rozmieszczenia poszczególnych elementów witryny. Warto, żeby każdy taki div miał swoją unikatową, czyli niepowtarzalną nazwę. Stąd w naszym projekcie zrobimy sobie div-a o nazwie na przykład logo i do niego wsadzimy nasze tekstowe logo. Potem zrobimy obok siebie trzy kolejne, następujące po sobie divy i nazwiemy je, na przykład, nav, czyli nawigacja na stronie, prawda? Content, czyli właściwa zawartość strony, a po prawej mamy przewidziane miejsce na reklamę, na przykład z AdSense-a. I rzecz jasna, u dołu strony znajduje się typowa stopka. Do kolejnego div-a wsadzimy stopkę, nazwę ten blok, na przykład, footer. Prawda, z angielskiego. No i jeszcze zrobimy jednego div-a, takiego, w którym będą się działy wszystkie pozostałe, czyli taki główny pojemnik. Wówczas będziemy mogli łatwiej wyśrodkować cały layout strony, no i nazwę go może container, czyli właśnie po angielsku pojemnik.
[7:18]Tak wyglądać będzie struktura strony zbudowana na divach, czyli na elementach blokowych, na tych prostokątach. I rzeczywiście ma to sens, bo każdy div zawiera w sobie pewien blok funkcjonalny witryny, bo mamy osobno logo, nawigację, treść artykułu, reklamę i stopkę, a cała witryna siedzi w ogólnym pojemniku, który sprawia, że nic nie ucieka nam na boki i wszystko jest spójne i wyśrodkowane. Logika, piękno, elegancja, prostota również, bo to raptem sześć divów, a sam znacznik div to po prostu tagi div div, no i jeszcze identyfikator. I tyle, żadnych więcej linii kodu, jeśli chodzi o strukturę. Te wszystkie cechy bloków, takie jak kolor tła, wymiary, czyli wysokość i szerokość, no i to, jak są ze sobą sklejone. No bo te divy są jeden pod drugim, prawda, a te trzy są obok siebie. To właśnie te wszystkie informacje znajdować się będą w całości w CSS-ie. Co jest fajne, bo mamy tutaj całkowite rozdzielenie treści witryny od jej wyglądu, a to sprawia, że łatwo nam w razie czego i to nawet drastycznie zmienić wygląd witryny, używając CSS-a. Bez w ogóle naruszania jej zawartości HTML-a. Fantastyczna sprawa. Patrząc na to schematycznie, nasza struktura będzie wyglądała tak. I to jest podejście oparte na divach, czyli blokach. Alternatywne, drugie podejście, oparte jest na tabelach, czyli znaczniku table. No bo zastanówmy się, taka witryna bardzo przypomina nam tabelę, jaką znamy, na przykład, z Worda czy z jakiegokolwiek innego edytora tekstu. Można by taką witrynę nawet wykonać w jednej tabeli 3 na 3, czyli trzy wiersze, trzy kolumny. I teraz tylko scalimy, czyli połączymy ze sobą komórki w pierwszym wierszu i w ostatnim, no bo będziemy mieli logo i stopkę. A całą tabelę wyśrodkujemy sobie na stronie. Tada, mamy logiczny podział. Tu wsadzimy logo, tu nawigację, artykuł, dalej reklamę, no i rzecz jasna, stopkę u dołu. Nie trzeba tu tych wszystkich divów. Nie trzeba ich jakoś specjalnie dodatkowo nazywać. Mamy tu po prostu komórki w tabeli, jedynie powkładamy HTML-a do odpowiednich komórek. No, niestety jednak taka tabela 3 na 3, to jednak sporo kodu będzie w HTML-u. No bo znacznik table ma w sobie jeszcze znaczniki nowego wiersza, tak zwany znacznik TR, a pomiędzy nimi jeszcze znaczniki nowych komórek TD. Dodatkowo pierwszy i ostatni wiersz będzie scaleniem trzech komórek. Także niestety stracimy trochę na prostocie, bo mimo że tabela jest jedna, to jednak sporo tu jest tych tagów TR, TD i tych atrybutów, takiej, powiedzielibyśmy, drobnicy. No, zobaczymy, jak to wyjdzie w praniu. Druga sprawa, to fakt, iż do tabeli dodajemy też na pewno atrybuty, żeby zmienić jej wygląd. Nie mamy indywidualnych nazw poszczególnych komórek, więc trzeba zapisać atrybutami HTML-a ich szerokości, kolory tła i wyrównanie zawartości komórek w pionie do góry, no bo domyślne jest do środka.
[10:10]I to wszystko zapiszemy na atrybutach. Coraz mniej nam się to podoba, bo jeszcze więcej tu HTML-a, a mało CSS-a. Zaburzyliśmy rozdzielenie zawartości strony od jej wyglądu, no bo wygląd tabeli opisujemy HTML-em, a nie CSS-em. Jeśli kiedyś przyjdzie nam przebudować tę witrynę, no to niestety będzie trzeba także edytować pliki HTML-a, czyli zawartość strony. Zatem pierwsze spostrzeżenia już mamy, ale są to spostrzeżenia, że tak powiem, na sucho, no bo nie zrobiliśmy jeszcze samodzielnie tych witryn, prawda? Zatem pora wziąć się, że tak powiem, do rzeczywistej kodeskiej roboty. Zaczniemy od zbudowania struktury tej naszej witryny na elementach blokowych, czyli divach. Mam tutaj na pulpicie katalog o nazwie www, a w nim plik divy.html. No, tak nazwałem, żeby podkreślić, że będziemy tutaj realizować podejście blokowe. Otwórzmy sobie ten plik w Notepadzie++. Jak widać, mam już tutaj znaną z odcinka pierwszego templatkę HTML-a. Uzupełnijmy jeszcze co trzeba. Tytuł witryny to będzie, na przykład, Najlepsze seriale – subiektywne TOP 5! Opis i słowa kluczowe przygotowałem sobie, jak widać, wcześniej, no bo nie będziemy tracić czasu dziś na zajmowanie się nimi. Dziś proponuję jeszcze dodać w sekcji head tagi style otwierający i zamykający. Czyli tego CSS-a dla wygody dzisiaj umieścimy w samym pliku HTML-a. Oczywiście w rzeczywistej witrynie będzie to zazwyczaj osobny plik CSS, który będzie obsługiwał wszystkie nasze podstrony, a nie tylko tę jedną. Jeżeli tworzenie i dołączanie plików CSS nie jest ci znane, to odsyłam do odcinka numer 1 kursu CSS. Tam dowiesz się wszystkiego, co trzeba o nich tak naprawdę wiedzieć na starcie oraz jak je podpiąć do dokumentu. Natomiast my teraz w sekcji body umieścimy strukturę naszej witryny, zrealizowaną na divach. Przywołajmy na ekran nasz schemat, czyli plan działania, jaki przygotowaliśmy dla tego projektu. Proponuję zacząć od tego głównego pojemnika o nazwie container, w którym będzie siedzieć cała nasza witryna. Zapiszmy zatem div i od razu dajmy znacznik zamykający. Okej. Tylko że pamiętamy, nadajemy tym divom indywidualne nazwy, żeby potem CSS wiedział, które elementy mają jaki wygląd. W tym celu nadamy temu blokowi tak zwane ID. No, ID, czyli identification, identyfikator, jednoznaczna nazwa. Po angielsku ID, to także dowód osobisty. Mówi pięknie samo za siebie. No i ten główny blok nazywa się container, czyli pojemnik po angielsku. Jak wspomniałem, będę pisał nazwy angielskie. Jeśli ktoś jest purystą językowym, tudzież nacjonalistą, to niech sobie napisze pojemnik, nie ma sprawy. Wstawmy sobie parę enterów. I teraz odtąd dotąd będzie nasza witryna. Trzeba przyznać, że taki tag div faktycznie jest krótki i prosty w zapisie i w zasadzie to jedynie dwa proste znaczniki, prawda? I jak powiedzieliśmy, cały wygląd tego bloku, tego pojemnika, zdefiniujemy w CSS-ie. I dlatego przejdźmy do sekcji style i zapiszmy tam wygląd naszego div-a. Najpierw będzie taki znak kratki, czy, jak kto woli, hasza. No, ten znak mówi w CSS, że to, co teraz wpiszę, będzie czyimś ID. Zatem ja wpiszę tutaj container, no bo taki identyfikator ma element, którego styl będę teraz określał odtąd dotąd. Proste, prawda? Cały styl elementu o ID container znajdzie się pomiędzy tymi klamrami. Logiczne. Okej, najpierw ustawmy szerokość tego div-a, czyli de facto naszej strony, czyli width. Zwróćmy uwagę, końcówka thy i dajmy 1000 pikseli. To będzie taka szerokość, jaka komfortowo się zmieści komuś nawet w rozdzielczości 1024 na 768 pikseli. W dzisiejszych czasach możemy spokojnie założyć, że nasz odbiorca dysponuje przynajmniej rozdzielczością 1366 na 768. Oczywiście mówimy o komputerach, na urządzeniach mobilnych sprawa wygląda nieco inaczej, bo tam radzimy sobie tak, iż dodajemy do strony tak zwaną responsywność. Czyli te nasze divy same się poukładają jeden pod drugim, jeżeli zmniejszymy szerokość ekranu, prawda? Oczywiście w odcinku drugim kursu HTML-a jest jeszcze za wcześnie na wprowadzenie responsywności i omówienie tego, ale zapewniam, że ten temat pojawi się w kursie, bo jest to obecnie zdecydowanie must have na kursie programowania webowego. Zainteresowanych odsyłam do dokumentacji frontend-owego frameworka o nazwie Bootstrap. My dziś założymy po prostu stałą szerokość witryny. Nie będzie ona jeszcze responsywna, ale spokojnie, wszystko w swoim czasie. Zatem ten nasz pojemnik, a zatem w praktyce cała nasza strona, będzie mieć szerokość 1000 pikseli. Oczywiście fajnie byłoby, gdyby ta nasza strona w większych rozdzielczościach została na ekranie wyśrodkowana, prawda? No bo takie przyklejenie serwisu do lewej krawędzi ekranu powoduje chyba wrażenie takiego braku profesjonalizmu, prawda? Oczywiście w CSS wyśrodkowanie div-a w poziomie to nie problem. Ba, przeglądarka zrobi to sama. Trzeba jej tylko powiedzieć, żeby zajęła się lewym i prawym marginesem automatycznie. Zapiszemy tak. Margin left, czyli lewy margines, prawda? I napiszemy: ustaw automatycznie – auto. I tak samo prawy margines, margin right – auto. No bo zauważmy, my nie wiemy, ile w przeglądarce dokładnie będzie pikseli marginesu ustawić, bo nie wiemy, jaką rozdzielczość ma użytkownik. On może mieć 1366 na 768, a może mieć Full HD: 1920 na 1080. Poza tym nie wiadomo, czy przeglądarka zajmuje cały ekran. W związku z czym my mówimy przeglądarce: kochana, zajmij się marginesami automatycznie. I przeglądarka mówi: nie ma sprawy, zostaw to mnie. Ja zawsze wyśrodkuję taką stronę, bo wiem, że internauta tego właśnie by sobie życzył. Tak mnie zaprogramowano defaultowo, żebym z góry wiedziała takie rzeczy. I super. Mamy już główny container. Będzie on po prostu wycentrowany na ekranie. No i w tym pojemniku umieścimy całą naszą stronę. Oczywiście, póki co ten div jest pusty, stąd zapisanie dokumentu i wyświetlenie go w przeglądarce nic nam na razie na ekranie nie pokaże. Ale to, że nie widzimy tego pojemnika, to nie znaczy, że go tam nie ma, bo rzeczywiście jest tam taki, póki co, niewidzialny pojemnik, który ma 1000 pikseli szerokości i który jest wycentrowany. Idźmy dalej. Pora na logo. Wstawiamy w środek div-a container kolejny blok i, zobaczcie, że wcięcia w kodzie fajnie nam tutaj mówią, że ten div znajduje się w środku tego div-a, prawda? I nazwijmy ten nowy blok, na przykład, ID równa się logo. I od razu wpiszmy tutaj napis w ramach nagłówka H1. Niech to będzie, na przykład, najlepsze seriale – subiektywne TOP 5! Ha! To teraz CSS tego div-a z logiem. Czyli będzie hasz, oznaczający, oczywiście, ID, a nie hashtaga. Logo i klamry zamykające obszar stylizacji tego div-a. Pisać ponownie width 1000 pikseli nie musimy, bo ten div logo znajduje się wewnątrz container-a i tak naprawdę to on, jak to mówimy, odziedziczy szerokość po swoim rodzicu, prawda? Czyli i tak będzie miał od razu ustalony width na 1000 pikseli. Nie trzeba tego drugi raz pisać. Fajne to dziedziczenie, prawda? Natomiast my chcemy ustawić kolor tła tego div-a z logiem na czarny, czyli zapiszę sobie background color, no, czyli kolor tła po angielsku, prawda? I damy black, czyli czarny jak węgiel, jak ten napój od Mike’a Tysona, albo kawa ze Starbucksa. W zasadzie to powinniśmy już móc ujrzeć tego div-a logo na stronie. Żadnego średnika nie zapomnieliśmy. Tu jest myślnik, no, wszystko wydaje się okej. Zapiszę i w przeglądarce damy sobie odśwież. No i proszę. Jest czarny div i to wycentrowany. Ale zaraz, a gdzie się podział nasz tekst? A no tak, przecież domyślny kolor czcionki to czarny, a nasz div ma czarne tło. Co to jest? Czarne na czarnym, nasze logo proszę państwa. No to skoro suchara rodem z Familiady mamy już za sobą, to spróbujmy zaznaczyć tekst. Ha! Jest. Nie zniknął. Po prostu nie był widoczny. To nie Paranormal Activity, napisy same nie znikają z ekranu, a odkurzacza do basenów same się nie poruszają. Natomiast ustawmy kolor tekstu w tym divie logo na biały. Dokonamy tego linią color, white, czyli biały. Ktoś zapyta, a czemu nie font color, albo text color, tylko samo color? A no wystarczy samo słowo color i na początku każdego to dziwi, ale jak się nad tym zastanowić, to oszczędzamy pisania niepotrzebnych znaków. Po co pisać, że chodzi o czcionkę? Przecież wiadomo, że jeśli ustawimy kolor tego, co znajduje się w divie, no to dotyczyć to będzie także czcionki. To tak, jakby ktoś wszedł do windy na parterze i zapytał: na górę jedzie? Tak, gdzie ma jechać? Bok. Przepraszam, nie mogłem się powstrzymać. Nie wiem czemu, ale bardzo lubię tę scenę. Sprawdźmy efekt. Okej, super. Wypadałoby nam jeszcze wyśrodkować ten tekst, no bo domyślne wyrównanie tekstu w tym divie jest do lewej, ale chyba lepiej będzie to wyglądać, jeśli damy to na środek, a nie tak w bok. Okej, już nie będę. Użyjemy właściwości text align center. Align, czyli ułożenie zawartości tego div-a. Ale zauważmy, tym razem mówimy konkretnie, że chodzi o text align. Ktoś powie: hmm, co to? Niekonsekwencja w nazewnictwie, czemu nie samo align? No, napisanie jedynie słowa align mogłoby zasugerować komuś, że chodzi tutaj o wyśrodkowanie samego div-a na ekranie, a nie tego, co znajduje się wewnątrz tego div-a, prawda? Więc może dlatego dodano tutaj słówko text, żeby uniknąć takiego nieporozumienia. Okej, zobaczmy efekt. Tak jest. Na koniec proponuję jeszcze wstawić w środku div-a trochę odstępu od tekstu, czyli ustawmy tak zwany padding na 15 pikseli. Padding oznacza wypełnienie div-a. Ustawiamy 15 pikseli odstępu z każdej strony zawartości div-a. Oczywiście, ponieważ tekst jest wyśrodkowany, to z lewej i z prawej strony i tak będziemy mieć więcej niż 15 pikseli odstępu, nawet dużo więcej, ale dodamy miejsce z góry i z dołu napisu, prawda? Zobaczmy. Wygląda to lepiej, prawda? Zatem mamy już pojemnik, czyli container, a w nim div logo. I teraz jest kluczowy moment, bo chcę umieścić obok siebie trzy divy o następujących ID: nav, czyli nawigacja, content, czyli zawartość podstrony i ad, czyli reklama od Google-a. A pod tymi divami chcę mieć stopkę, czyli blok funkcyjny o nazwie footer. I tu większość osób napotyka na problem. Bo, uwaga, domyślnie, standardowo, defaultowo, po wstawieniu tych wszystkich divów do containera, to ułożą się one jeden pod drugim. To jest domyślne zachowanie elementu blokowego, że ustawia się pod tym elementem blokowym, który był wcześniej. I żeby te trzy divy nie znajdowały się jeden pod drugim, tylko żeby były obok siebie, to należy to odpowiednio okodować w CSS-ie. Właśnie w tym momencie często wiele osób się wkurza, bo nie wiedzą, jak to poukładać obok siebie. Dodatkowo potem pojawiają się pewne błędy związane ze stopką, ale o tym później. I teraz posłuchaj, bo to jest kluczowy moment, trzeba to dobrze zrozumieć. Otóż zasada jest taka: w kodzie CSS każdego div-a, który ma sąsiadować z jakimś innym, i to obojętnie, czy z prawej, czy z lewej strony, dajemy dodatkowy wpis float: left. Ta linia określa, że posiadający ją element blokowy będzie szukał po prawej stronie kolejnego div-a, którego spróbuje przykleić do siebie. Innymi słowy, każemy tym divom ustawiać się w jednym szeregu, zamiast jeden pod drugim. Zmieniamy domyślne zachowanie na ustawianie się obok siebie, czyli przyklejanie się do siebie. Ale uwaga, to nie wszystko. Pierwszy element, który już nie ma się przyklejać do innych, a u nas będzie to stopka, div footer, powinien posiadać specjalną linię clear: both. No, clear, czyli wyczyść niestandardowe zachowanie div-a, przywróć ponowne układanie się ich jeden pod drugim. I to wystarczy. To już wszystko, co trzeba wiedzieć. To jest cała zasada. Czyli chcąc ułożyć divy obok siebie, dodaj do ich CSS-a float: left. I obojętnie, czy tych divów będzie 3, 2, czy 8, dodajesz ten zapis do wszystkich. Oraz do pierwszego div-a, który znowu ma układać się pod spodem poprzednika, dodajesz linię CSS clear: both. U nas był to div footer, ale jeżeli takiego następnego, na przykład, nie ma, to tworzysz, że jakiegoś pustego div-a, który w stylu będzie posiadał tę linię clear: both. Banalne, ale, uwierzcie mi, że tak rzadko jest to dobrze wyjaśnione i dlatego gros osób ma problemy z pozycjonowaniem divów obok siebie. Ty już ich mieć nie będziesz. Ba, będziesz w stanie wyjaśnić to komuś w ciągu max 15 sekund. Dobra, zasady już znamy. Użyjmy jej teraz w strukturze naszej witryny. Lecimy taśmowo. Po kolei je powstawiajmy. Najpierw div o ID nav, od navigation. No, tam wstawimy linki, czyli nawigację naszej strony docelowo. TOP 5 seriali. Ciężko wybrać, prawda? No bo każdy serial jest inny. Nie ma tu płaszczyzny porównania, że tak powiem. Poza tym każdy ma swoje gusta. Moim ulubionym serialem, takim osobistym numerem jeden jest chyba Doctor House. Bardzo lubiłem ten serial, świetny. Co tam jeszcze wstawimy? True Detective. Polecam, świetny serial. Dalej niech będzie Breaking Bad, no, myślę, że nie trzeba przedstawiać. Co dalej? No, ma być TOP 5. A może sitcom komediowy Big Bang Theory, czyli Teoria Wielkiego Wybuchu. Bazinga. I na koniec, a z sentymentu dajmy tutaj z Archiwum X. Jak byłem mały, to oglądało się to na Dwójce. Oj, tak, to były czasy. Super, mamy nawigację. Kolejny div to content. A skopiujmy opis serialu House z Wikipedii. Znajdę to na szybko w Google-ach.
[23:37]Okej. No, tyle wystarczy, myślę. Control C. Control V. Tytuł dajmy w nagłówek H2, a opis pozostawimy tak, jak jest, tylko trochę to uporządkuję.
[24:00]Okej. Dalej będzie div z reklamą. ID div-a to będzie słowo ad, czyli reklama po angielsku. Kojarzymy AdSense, AdBlock, prawda? Reklama. Takim standardowym wymiarem pionowego baneru jest w AdSense format 160 na 600 pikseli. Taką przykładową reklamę mam przygotowaną tutaj. O, w pliku JPEG. Przekopiuję ją do katalogu www. W porządku. Oczywiście jest to tylko test, no bo prawdziwe reklamy Google wstawia na stronę z użyciem JavaScriptu, a nie jako obrazy, które musimy sami załączyć na serwer. Natomiast my póki co wpiszmy znany nam znacznik IMG, image i dalej source, czyli źródło pliku, SRC. No, plik leży w tym samym folderze, co strona, zatem wpiszę tu po prostu reklama.jpg. Super. To na koniec jeszcze stopka, czyli div o ID równym footer. Wewnątrz tego div-a zapiszemy: najlepsze seriale – TOP 5. Wstawimy też znaczek copyrightu, czyli taki. Zrobimy to tak zwaną encją HTML. Wystarczy zapisać: and, czyli Shift i 7 i potem napisać copy ze średnikiem. Encje HTML również zostaną omówione później w kursie, albo samodzielnie wygoogluj je. Natomiast zapiszemy jeszcze wszelkie prawa zastrzeżone. No, taka standardowa, sztampowa stopka. No i teraz wracamy do problemu rozmieszczania tych divów. Wszystko zdefiniujemy w CSS-ie. HTML zawiera tylko informacje, że divy o takich, a takich nazwach istnieją i co mają w środku. Natomiast cały wygląd jest wyabstrahowany do CSS-a. Mamy zachowany tak pożądany rozdział zawartości od wyglądu. No to co? Stwórzmy sekcję CSS dla każdego z tych divów. Najpierw będzie div o nazwie nav. Okej, skopiuję sobie i wkleję jeszcze trzy razy taką sekcję.
[25:56]Gotowe. I kolejne divy mają następujące ID: content, ad, czyli reklama, no i last but not least – footer, czyli stopka. I teraz najważniejsze. Te trzy divy mają być umieszczone w szeregu, czyli jeden obok drugiego. A zatem pamiętamy: mają one mieć w sobie zapis float: left. Czyli świadomie łamiemy domyślne układanie się divów jeden pod drugim. No, my chcemy je mieć obok siebie, przyklejone kropelką, albo poxipolem. Okej, gotowe. I nie zapominajmy też drugiej części reguły pozycjonowania bloków. Pierwszy div, który już nie ma być przyklejony do pozostałych, powinien zawierać linię clear: both. I to wystarczy. Natomiast zanim potestujemy, to od razu ustawmy jeszcze wymiary i kolory tła tych divów. Kolor tła div-a z nawigacją ustawimy sobie na background color: light gray, czyli jasno szary. Szerokość width ustawimy na, powiedzmy, 120 pikseli. Reklama po prawej w divie ad będzie miała 600 pikseli wysokości. No to niech nasza nawigacja ma minimalną wysokość min-height, na przykład, 620 pikseli. I chyba jeszcze warto dołożyć padding, tak, jak to zrobiliśmy dla loga. Niech będzie, na przykład, padding równy 10 pikseli. Okej. Teraz div z zawartością strony. A dajmy też padding, żeby tekst nie był brzydko przyklejony do krawędzi, czyli padding i wpiszmy więcej, może 20 pikseli. A na koniec jeszcze ustalmy szerokość całego div-a. Dajmy 600 pikseli. To wystarczy, myślę, chociaż strzelam w ciemno. Teraz div z reklamą. Dajmy mu width 160 pikseli, żeby obraz na pewno się zmieścił, prawda? No bo tyle ma pikseli. I analogicznie jak dla nawigacji, dajmy minimalną wysokość min-height 620 pikseli, oraz padding 10-pikselowy. Oraz padding 10 pikselowy. Okej. Teraz div z zawartością strony. background color, light gray, czyli jasno szary. Ostatni div do stylizacji to nasz footer. Niech kolor tła będzie tak jak dla logo czarny. Black. Okej. Zatem kolor tekstu powinien być biały, no bo znowu będziemy mieli czarne na czarnym, prawda? Pamiętamy suchara. I dalej, wyśrodkujmy tekst w stopce. I dajmy padding, na przykład, 20 pikseli. No, to teraz chwila prawdy. Przekonajmy się, że ta nasza metoda float left i clear both rzeczywiście działa. No, proszę. Działa jak należy. Co prawda, tu jest nierówno, no ale ja tak strzeliłem w ciemno 600 pikseli dla div-a content. No, trzeba by to po prostu policzyć. Ach, matematyka. Bez niej byłbym jak miedź brzęcząca, albo cymbał brzmiący, że tak sfora frazuje Świętego Pawła. Zastanówmy się. Div z nawigacją ma szerokość 120 pikseli, a do tego dochodzi padding 10-pikselowy z dwóch stron. Czyli trzeba doliczyć do tego jeszcze 20 pikseli. No, szerokości bloku content szukamy, no więc nie znamy, więc oznaczmy to jako x. Wiemy jednak, iż padding tego div-a wynosi 20 pikseli, ale zarówno z lewej, jak i z prawej strony, czyli trzeba dodać kolejne 40. I div z reklamą ma szerokość 160.
[29:06]A że padding jest 10-pikselowy, to do wyniku dodamy jeszcze 20. I to razem ma dać 1000. No to policzmy z tego x-a. Wychodzi 640 pikseli. A my mamy ile? 600. No to poprawmy co trzeba i zobaczmy, czy rezultat będzie można zmierzyć poziomicą. Ha, how cool is this? Natomiast sprawdźmy jeszcze, co by było, gdybyśmy nie dali w stopce linii clear: both. Skasujemy to tymczasowo. I rzućmy okiem. Zobaczcie, jak div footer nam się rozlał. Udowodnijmy jednak, że to właśnie footer jest winny i że to on się tutaj rozlał. Dajmy sobie chwilowo kolor tła stopki na, na przykład, green, zielony. Okej. Widzimy? Masło maślane, wszystko zepsute. I tu widać najpiękniej źródło frustracji początkującego kodera HTML, o czym wspominałem we wstępie. Osoba ta może nawet samodzielnie ona znalazła w Internecie komendę float left, a na ekranie pojawia jej się w nagrodę coś takiego. Wówczas rzeczywiście irytujemy się. I niczym Stanisław Witkiewicz w Szewcach wykrzykniemy może: szturba jego wygwizdrana mać! Czemu to nie działa? Ty już od dziś wiesz czemu. I to tyle, proszę państwa, jeśli chodzi o strukturę, opartą o elementy blokowe, czyli divy. A że nasz świat jest często dualistyczny i składa się z różnych dychotomii, to poznajmy jeszcze drugą stronę medalu. Rewers monety. Słowem, alternatywne do divów podejście, oparte na tabelach. Mam tutaj plik tabele.html, w którym identyczną strukturę witryny zrealizujemy na tabelach. Tak, jak wspominaliśmy wcześniej, nasz layout możemy spokojnie wykonać w tabeli o rozmiarze 3 na 3. No, z tym, że komórki w pierwszym i trzecim wierszu zostaną scalone. Jeżeli chodzi o tworzenie tabel, to zasada jest prosta: cała tabela jest zamknięta pomiędzy znacznikami table otwierającym i zamykającym. A wiersz tabeli oznaczony jest znacznikami TR, od table row, czyli właśnie wiersz tabeli, a wewnątrz wiersza znajdują się poszczególne komórki, a każda z nich jest zdefiniowana znacznikami TD. Zróbmy szkielet naszej tabeli w kodzie, czyli tag table i teraz szerokość strony, to miało być 1000 pikseli, czyli atrybut width 1000. Tu nie piszemy px, no bo jesteśmy w HTML-u, a nie w CSS-ie. A strona miała być wyśrodkowana na ekranie, co w przypadku tabeli najłatwiej osiągnąć, zapisując atrybut HTML-a align równa się center. Chodzi o align całej tabeli, czyli ułożenie jej samej na ekranie. No, my chcemy, aby pozostawała zawsze na środku. Zróbmy też od razu zamykający tag table, żeby o nim nie zapomnieć. I teraz zróbmy szablon wnętrza tabeli. Mamy mieć trzy wiersze, prawda? No to zapiszmy pierwszy z nich TR, czyli table row, i zamykający TR. W porządku. I mamy trzy kolumny, zatem do pierwszego wiersza wstawię teraz trzy komórki, czyli trzy razy zrobię znaczniki TD. Widzimy? Mamy wiersz TR, a w nim trzy komórki: pierwszą, drugą, trzecią. Logiczne. Teraz skopiuję sobie ten wiersz i wkleję go jeszcze dwa razy. Okej, no to mamy tabelę 3 na 3. Mamy zdefiniowane trzy wiersze po trzy komórki. I teraz tak, w pierwszym wierszu ma być jedna komórka, a nie trzy, i ma ona powstać poprzez scalenie trzech komórek. Zapiszę zatem tylko jedną komórkę, a pozostałe dwie skasuję i dopiszę tylko informację, że ta komórka to tak naprawdę scalenie trzech. Atrybut HTML-a colspan równa się 3. No, colspan, czyli column span – scalenie trzech kolumn w jedną. No ma to sens. W drugim wierszu zostawiamy trzy komórki, ale trzeba im przypisać odpowiednie wymiary. No bo nie może być tak, że każda zajmie 33% miejsca w poziomie. A tak stanie się domyślnie. Content podstrony powinien być najszerszy, rzecz jasna. Zatem atrybut width, damy 140 w nawigacji. Przypominam, że nie piszemy px, bo jesteśmy w HTML-u. I dalej atrybut HTML-a width 680 dla środkowej komórki. Oczywiście korzystam tu z naszych poprzednich obliczeń, które przeprowadziliśmy na divach. No i miejsca na reklamę zostawiamy 180 pikseli. Razem daje to dokładnie 1000. No i jeszcze stopka, czyli wiersz trzeci. No i tu też ma nastąpić colspan trzech komórek. Okej, w porządku. Tabela gotowa. Jakoś specjalnie trudne to nie było. Pamiętamy po prostu, że TR to wiersz tabeli, a TD to jej komórka. To teraz cierpliwie przenieśmy z pliku divy.html zawartość, jaką trzeba powkładać do tych poszczególnych komórek. Czyli najpierw przeniesiemy tekst stanowiący u nas logo.
[33:53]Teraz przenieśmy nawigację naszej witryny. Oczywiście docelowo będą to linki. No, póki co jest to tylko tekst.
[34:07]Dalej przenosimy content, czyli zawartość podstrony.
[34:26]Znajdźmy i przenieśmy teraz obrazek z reklamą.
[34:37]I na koniec nasza stopka, czyli zawartość div-a footer.
[34:48]Super. Zobaczmy efekt. No, jak widzimy, jest prawie dobrze. Rozmieszczenie jest okej. Trzeba by jeszcze tylko zadbać o szczegóły wyglądu: kolor czarny, wyśrodkowanie, a tu wyrównanie ku górze. Okej, no to zacznijmy może od loga. Dodajmy align center, żeby tekst był wyśrodkowany i bgcolor black, co sprawi, że background color tej komórki będzie czarny, tak jak chcieliśmy. No, w CSS pisało się background color, w HTML-u pisze się bgcolor. Sprawdźmy rezultat w przeglądarce. No, jest lepiej, ale tekst jest czarny. Aczkolwiek, ponieważ jest to nagłówek H1, to wystylizujmy sobie przynajmniej to w CSS-ie. Zróbmy sobie tagi style otwierający i zamykający. I określimy styl nagłówka H1. Color white, czyli biały. Zajrzyjmy. Okej. To może teraz drugi wiersz. Tła nawigacji i reklamy miały być jasno szare. No i tekst chcemy przykleić do góry w pionie, a nie mieć go na środku. Zatem do dzieła. Dodamy sobie linię valign równa się top, co oznacza vertical align, czyli wyrównanie tekstu w pionie. No i my dajemy top, czyli przyklej do góry, zamiast wyśrodkować. Doklejamy taki atrybut do każdej jednej komórki w wierszu drugim. Okej, sprawdźmy. Tak jest. No to teraz jeszcze jasno szare tło nawigacji i reklamy. Bgcolor równa się light gray, jasno szary.
[36:31]I tutaj też, prawda, bgcolor light gray. Sprawdźmy. Super. Dodajemy atrybut align center, żeby wyśrodkować obraz z reklamą w komórce. Sprawdźmy. Tak jest. No to jeszcze stopka. Dodajemy atrybut align center, żeby wyśrodkować tekst i bgcolor równa się black.
[37:03]Co na to przeglądarka? No, jeszcze tekst. Dopiszemy sobie także nagłówek H2 tutaj.
[37:16]Pomiędzy znacznikami style dopiszemy sobie także kolor biały dla nagłówka H2, a najłatwiej jest to wykonać, po prostu dodając H2 po przecinku. Okej, zobaczmy. W porządku. No, tyle, że ten tekst tutaj też jest teraz biały, no bo zapewne też jest to nagłówek H2. Mhm. No to zróbmy go jako H3, tak będzie najszybciej. Wówczas będzie czarny. Tak jest. I to by było na tyle. Oczywiście już na pierwszy rzut oka zauważamy, że kot jest mniej elegancki. Dużo więcej tu znaczników i przede wszystkim atrybutów. Tam mieliśmy tylko div div i nazwę ID, a tu, jak widać, źródło jest bardziej takie nieuporządkowane, entropia, chaos. No i nie ma tu zachowanego do końca rozdziału zawartości strony od jej wyglądu, no bo użyliśmy atrybutów HTML-a do określania wyglądu, a nie CSS-a. Oczywiście, tabelę można by też próbować wystylizować w czystym CSS-ie. Na dłuższą metę nie uciekniesz jednak od używania w tabeli niektórych atrybutów HTML-a.
[38:44]Prawda jest taka, że znacznik table nie został pomyślany, jako znacznik strukturalny. W zamyśle twórców HTML-a nie ma on służyć do tworzenia struktury strony, a jedynie do prezentowania tabelarycznie pewnych danych. Użycie tabeli jako znacznika strukturalnego, no to pogwałcenie jego roli, taki misuse. Z tego wynikają potem tylko problemy, bo tabele okazują się za mało elastyczne w roli pojemnika strukturalnego. No bo nie do tego ma służyć tabela. No, twórcy HTML-a mówią o tym otwarcie. Ktoś też powie: zamiast scalać komórki tutaj, można było użyć znacznika TH, czyli table header. No, ale to też specjalnie nie poprawi czytelności kodu ani nie zapewni swobody i autonomii pozostałym elementom tabeli. Popatrzmy sobie na kod z divami. Na żółto zaznaczono znaczniki i atrybuty HTML-a, które służą do opisania struktury witryny. A teraz to samo w podejściu opartym na tabelach. To już nie jest masakra. To już jest Massachusetts. Gołym okiem widać różnicę, prawda? Z używaniem tabel do budowy struktury witryn jest trochę, jak z biciem wariatem. Bo wiemy, że to generuje nadmiarowy, bałaganiarski kod. Wiemy, że na dłuższą metę tabele są mniej elastyczne od divów, zwłaszcza w razie ewentualnej przebudowy layout-u. No i komórki tabeli nie są w pełni autonomicznymi elementami, takimi jak divy. A jaka jest definicja szaleństwa? Szaleństwo to powtarzanie stale tych samych działań, oczekując innych rezultatów. Nie budujmy stron opartych na tabelach, bo kolejny raz powtarzamy te same błędy, oczekując, że tym razem może rezultat będzie inny, że tym razem będzie dobrze. To jest bez sensu. To jest szaleństwo. Budujmy na skalę, a nie na piasku. Ale może nie wszyscy z nas są jeszcze przekonani. Podsumujmy. Mamy więcej tagów, a więc taki lekki bałagan w kodzie, łamiemy kontekst użycia tabel. Na takim tabelarycznym podejściu do strony ucierpi też elastyczność i autonomia elementów interfejsu. Kuleje nam też rozdział treści od wyglądu strony, czyli tak zwany łatwiejszy maintenance. No, ale może te wszystkie powody to jeszcze dla kogoś za mało, żeby zrezygnować ze stosowania tabel przy tworzeniu fundamentu strony. Dlaczego jeszcze to podejście jest gorsze? No, wymieniać można by długo. Więcej kodu to też większy rozmiar pliku HTML do pobrania i zinterpretowania przez przeglądarkę. Tak więc nasza strona może się wolniej ładować. Tabele są też inaczej renderowane w przeglądarce. No bo cały kod tabeli, wszystkie znaczniki wierszy i kolumn oraz ich zawartość, no musi być znana przeglądarce, żeby ona mogła tą tabelę nam pokazać, czyli wyrenderować na ekranie. Inaczej jest przy divach, które wczytują się jeden po drugim, a każdy div zawiera jedną, wybraną funkcjonalność strony. Popatrzmy też na ilość dodatkowych tagów w kodzie z tabelami, w porównaniu do wersji z divami i wczujmy się jednocześnie w skórę robota Google-a, który ma daną stronę zaindeksować w przeglądarce. Ten drugi kod jest dużo bardziej Search Engine Friendly, czyli przyjazny dla wyszukiwarki, czy robota indeksującego Google-a. Zatem niefajnie będzie, jeśli cały ten bałagan z tagami w tabelach wpłynie negatywnie na naszą pozycję w Google-ach. No, tego tworząc stronę byśmy nie chcieli. Kolejna sprawa, wspomniana dziś krótko responsywność i framework Bootstrap. Czyli fakt, że divy mogą się układać jeden pod drugim w razie potrzeby na urządzeniach mobilnych. A tabela ma wiersze i kolumny i responsywność takiej tabeli jest niestety ograniczona, a jej realizacja w kodzie bardziej kłopotliwa. No, komórki w tabeli nie są do końca autonomiczne, prawda? Stąd trudniej tutaj o responsywność. Więc, reasumując, oceniając obiektywnie obie filozofie tworzenia struktury witryny, należy uznać, iż podejście z divami wygrywa na całej linii i jest najrozsądniejszym wyborem, biorąc pod uwagę szerokie spektrum konsekwencji tego wyboru. No, proszę państwa, cóż to był za ważny i cenny odcinek. Proponuję przepracować go kilkukrotnie na spokojnie, bo najważniejsze to zrozumieć dobrze, jak rozmieszczać elementy na stronie. I na koniec jeszcze jedna uwaga. HTML 5 wprowadza nam kolejne nowości do planowania struktury strony. Będziemy mieli specjalne, dodatkowe strukturalne znaczniki, których nazwy widzisz teraz na ekranie. To oczywiście zostanie jeszcze omówione w tym kursie, natomiast jeszcze nie dziś. Nie mogę mieszać ci w głowie, dając za dużo wiedzy na raz, to za dużo do przetrawienia. Uciskałyby na tym pozostałe, wyższe w taksonomii poziomy celów nauczania i niepotrzebnie poczułbyś się może przytłoczony. A jak widzisz, budowanie struktury witryny może być czystą przyjemnością. Nie będziesz już męczyć się z porozwalonymi blokami, niechcącymi się kleić divami i rozlanymi pojemnikami. Po tym odcinku rzeczywiście wiesz dużo więcej. Wzniosłeś swoje umiejętności na kolejny poziom. Do usłyszenia wkrótce w innej produkcji na moim kanale.
[43:38]Pozdrawiam serdecznie.
