Przyszedł czas na skrócik nr 2. Sprawdźcie streszczenie kursu HTML 2 Mirosława Zelenta. Odcinek ten dotyczył struktury strony, którą można przedstawić na 2 różne warianty – albo za pomocą znacznika <div> albo za pomocą tabel <table>.
Struktura strony to szkielet rozmieszczenia elementów na stronie. W naszym ćwiczeniu, w obu przypadkach strona ma składać się z takiej samej struktury: logo („logo„), menu boczne („nav„), artykuł („content„), reklama („ad„), stopka („footer„).
Pierwsza wersja – lepsza – znacznik <div>
div = divide = podzielić
Widok w kodzie <div>Hello</div>
Warto, aby każdy <div> posiadał swoją unikalną nazwę <div id=”nazwa”></div>
Każdy <div> znajduje się w pudełku zwanym „container”.
Jak powinien wyglądać kod w sekcji <body>?
<div id=”container”>
<div id=”logo”>
<h1>Najlepsze seriale</h1>
</div>
<div id=”nav”>
</div>
<div id=”content”>
</div>
<div id=”ad”>
</div>
<div id=”footer”>
</div>
</div>
Style danych divów, h1, itp. zapisujemy w pliku CSS. Teraz o tym pisać nie będę.
Ważne
Domyślnie umieszczając sekcje div w HTML ustawiają się one pod sobą. A co jeśli my chcemy je mieć obok siebie? Tak, jak w tym przypadku sekcja nav, content i ad? W kodzie CSS każdego diva, który ma sąsiadować obok innego, niezależnie czy z prawej czy z lewej strony, należy umieścić dodatkowy wpis float: left; . Ta linia określa, że dany element będzie szukał kolejnego elementu, który ma przykleić do siebie. Natomiast pierwszy element, który już nie ma być przyklejony do elementów, tylko ma się znajdować pod spodem (u nas footer) musi posiadać wpis: clear: both; Jeśli nie ma takiego diva to dodajemy do kodu wpis <div style=”clear: both;”></div>
Całość umieszczona jest w znaczniku <table></table>
<tr></tr> – wiersze tabeli – table row
<td></td> – kolumny tabeli
Atrybuty kodu w tabelach:
width – szerokość. nie piszemy px ponieważ jesteśmy w html. np. „1000”
align – wyśrodkowanie. może być left, right, center – align=”center”
colspan – scalenie kolumn – colspan=”3″
bgcolor – kolor tła – bgcolor=”black”
valign – wyrównanie w pionie. vertical align – valign=”top” – wyrównanie tekstu w pionie – przyklej do góry
Jak powinien wyglądać kod w sekcji <body>?
Tabela jest wyśrodkowana, składa się z 3 wierszy i 3 komórek. W pierwszym i trzecim wierszu ma być 1 komórka, która ma być scalona w sumie z 3 komórek. Drugi wiersz ma się składać z 3 komórek o różnej szerokości.
Dlaczego stosowanie tabel zamiast divów jest gorsze?
- Niepełne rozdzielenie zawartości witryny od opisu jej wyglądu – w przypadku <div> używamy do styli CSS.
- Komórka tabeli nie jest autonomicznym elementem, tak jak div. np. margin-left, display none może mieć wpływ na inne komórki.
- Tag <table> nie jest znacznikiem strukturalnym.
- Stosując tabele powstaje nadmierna ilość kodu.
- Strony z tabelami wolniej się ładują i renderują strony.
- Tabele nie są przyjazne dla SEO.
- Problem z obsługą responsywności strony.