Popularne

Czym są divy? – Podstawy struktur HTML

0

Jeżeli rozpoczynasz swoją przygodę z tworzeniem stron internetowych to ten artykuł będzie idealny dla ciebie. Postaram Ci się maksymalnie prosto przełożyć jak skonstruowane są aktualne strony i jaką rolę w tym wszystkim pełnią Divy.

Czym są divy?

Div to nic innego jak kontener i tyle, w sumie tutaj definicja się kończy. W ten kontener możemy wrzucić pewne wartości/elementy np. akapity, nagłówki czy też inne kontenery. Co ważne sam kontener nic nie robi. Twoją rolą jako młodego Front End Developera jest nadać mu odpowiednie atrybuty, które wprost określą jak ma się zachowywać. Jakie atrybuty? Choćby klasę lub statyczne style.

Poniżej postaram się przedstawić przykład, który powinien zobrazować główną idee diva. Załóżmy, że w ramach ćwiczenia chcemy stworzyć górną sekcję strony (header) zawierającą logo, nawigację i np. dane kontaktowe.

Praktycznie możemy sobie to podzielić na 3 kontenery wewnątrz jednego głównego (konteneru matki) – postarajmy się nadać temu logiczną strukturę:


<div class="header">
<div class="logo">
</div>
<div class="nav">
</div>
<div class="contact-info">
</div>
</div>

Jak widzimy taka logiczna struktura pozwala nam rozdzielić pewne sekcje (zrzut poniżej):

Struktura divy

Z tym, że aktualnie mamy pewnie problem, ponieważ nadaliśmy divą klasy, jednak nie mają one żadnego odzwierciedlenia w kodzie (nie istnieją). Zanim zaczniemy je uzupełniać postaram się wytłumaczyć kilka ważnych kwestii.

Czym są klasy?

Klasa to nic innego jak deklaracja w kodzie, która zawiera zbiór atrybutów. Są dwie metody nadawania stylu – statyczna i poprzez klasy (czasem dla unikatowych elementów identyfikatory).

Statyczna metoda wygląda tak, że dla każdego elementu HTML dodajemy kod w obrębie jego tagu np.

<p style="color:red; font-size:15px;">Ala ma kota</p>

Praktycznie taki zapis zadziała poprawnie, jednak jeżeli mamy np. 100 takich samych elementów i nagle stwierdzimy, że chcemy aby kolor tekstu nie był czerwony a zielony to musimy wykonać 100 operacji zmiany. Jest to czasochłonne i nieefektywne.

Z pomocą przychodzą nam klasy – tak jak pisałem, klasa to zbiór atrybutów, które można przypisać dowolnej liczbie elementów (tagów HTML). Rozważmy ten sam przykład jednak z klasami:

<p class="style1">Ala ma kota</p>

No i co dalej? W zasadzie pozostaje nam tylko zadeklarować link do pliku ze stylami albo dopisać „style” w sekcji head strony (w ramach artykułu, skupimy się na metodzie dopisującej style w sekcji head):

Struktura klas

Posiadając taki zapis możemy wywołać wiele razy klasę dla dowolnego elementu i zawsze element nabierze jego atrybuty (są wyjątki, jeżeli tag wewnętrzny nadpisuje atrybut swoim), dodatkowo mamy zachowany porządek w kodzie – rozdzieloną sekcję stylów od struktury HTML.

Wracając do naszej sekcji górnej

Posiadamy następujący kod:

Struktura przykładu divy

Musimy teraz nadać atrybuty naszym klasą, zaczynajmy:

Klasa header powinna wyglądać następująco:

klasa  header

Jak widzimy, określamy jej szerokość (width), wysokość (height), tło (background) oraz wyśrodkowujemy (margin). Powinniśmy uzyskać następujący obraz w wyszukiwarce:

header

Czas nadać pozostałe klasy, zacznijmy od logo:

style logo

Jak widzimy logo posiada następujące atrybuty: szerokość (width), wysokość (height), tło (background), zaczep (float – aktualnie jest wiele sposobów układania elementów na stronie, my przybliżymy jedną z pierwszych). Zaczep Float to nic innego jak atrybut określający jak element ma się ustawić względem poprzedniego.

Po dodaniu naszego kodu uzyskamy następujący efekt:

Widok przykładu z klasą logo

Teraz przystąpmy do klasy nav:

Nav klasa style css

Jak widzimy, struktura wygląda niemal identycznie, jedynym elementem zmieniającym się w tym wypadku jest kolor.

Widok z klasą nav

Analogicznie zrealizujemy ostatni element:

Klasa contact info

Po dodaniu tego kodu, powinniśmy otrzymać następujący widok:

Widok po wszystkich zmianach

Jak widzimy mamy nasz rozkład zgodny z zaprezentowaną strukturą. Widzimy też kawałek zielonego paska, z czego to może wynikać? Odpowiedź jest prosta 33% (szerokości) *3 (elementy) = 99% (całkowitej szerokości elementów) – ten 1 % to właśnie fragment zielonego paska.

Jeżeli chcemy się go pozbyć musimy pozmieniać wartości w naszych atrybutch width, tak aby wartości wynosiły 33.3%, 33.3% oraz 33.4%.

Dlaczego divy są tak istotne?

Odpowiedź może Ci się nasunąć już sama, są to po prostu bardzo elastyczne elementy, które mogą posłużyć nam przy projektowaniu serwisu – każdy serwis można podzielić na odpowiednie sekcję moduły, które mogą składać się z dodatkowych modułów – wszystko da się zrealizować za pomocą divów.

Divy to dość stara konstrukcja, jednak nadal aktualna i nie zapowiada się, żeby technologia je wypierała. Co ciekawe to właśnie one wyparły budowanie stron w oparciu o tabele, które kiepsko zachowywały się pod kątem responsywności.

Przydatne linki:

Dołączam do artykułu spis serwisów, z których śmiało możesz czerpać wiedzę:

https://www.w3schools.com/
https://www.kurshtml.edu.pl/html/zielony.html
https://codepen.io/ (gotowy kod, przykłady użycia)

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *