Tworzenie stron na DIVach, cz. 2.

Data dodania:

18 czerwca 09

Autor:

Łukasz Rutkowski

Kategoria:

(x)HTML, CSS

Dobrze, wiesz już Drogi Czytelniku, jak wykonać prosty szablon oparty na DIVach, ale to nie wszystko. Jeżeli zrobisz wszystko na tychże elementach, strona będzie niepoprawnie zbudowana i boty wyszukiwarek, zwane pająkami, będę miały problem z poprawnym zaindeksowaniem strony. Wszystko opiszę dla botów, ale proszę pamiętać, że taka budowa strony pomaga w poruszaniu się po Internecie przez osoby niepełnosprawne. Spróbuję w tej części tego artykułu zwrócić Ci uwagę na najczęstsze błędy.

Menu

Menu wydaje się prostą rzeczą, najprościej by było po prostu umieścić w DIVie wiele anchorów, którym nada się określony styl CSS, aby jakoś wyglądały. To jest chyba najczęstszym błędem początkujących koderów. Otóż dla botów będą to zwykłe linki znajdujące się na stronie. Jak je wyróżnić i pogrupować? Wystarczy umieścić je w liście.

<ul>
	<li><a href="#1">Link pierwszy</a></li>
	<li><a href="#2">Link drugi</a></li>
</ul>

Usuwanie kropek

Jeżeli chcesz usunąć kropki przy każdym elemencie listy, nadaj całej liście taki styl:

ul#menu {
    list-style-type: none;
}

Usuwanie wcięcia

Wcięcie w liście to nic innego jak padding. Wystarczy go wyzerować:

ul#menu {
    padding: 0;
}

Menu poziome

Standardowo elementy listy są ułożone poziomo. Jak je zmusić do bycia obok siebie, w jeden linii? Trzeba każdemu elementowi li nadać przyleganie z lewej strony.

ul#menu li {
    float: left;
}

Lista definicji?

Niektórzy uważają, że lepiej zamiast nad zwykłą listą, która jest menu, dać zwykły nagłówek, umieścić całe menu w liście defninicji:

<dl>
    <dd>Nagłówek menu</dd>
        <dt>Pierwszy element</dt>
        <dt>Drugi element</dt>
    </dd>
    <dd>Nagłówek menu drugiego</dd>
        <dt>Pierwszy element</dt>
        <dt>Drugi element</dt>
    </dd>
</dl>

Znaczenie semantyczne jest takie same, czyli botom jest bez różnicy, czy użyje się pierwszego sposobu, który przedstawiłem, czy tego. Po prostu rozpoznają to na takim samym poziomie.

Nagłówki

Większość ludzi nagłówki umieszcza po prostu w jakimś znaczniku, który będzie zawierał powiększony tekst. Niestety, pająki nie wróżki i nie domyślą się, że ten tekst jest nagłówkiem, co zaowocuje gorszą indeksacją strony. Jest na to proste rozwiązanie, jakim jest element hX, gdzie X to liczba z zakresu 1 do 6. Czym liczba jest większa, tam nagłówek mniej ważny. W Internecie można spotkać się z pojęciem stopnia nagłówka, który jest równy liczbie X.

<h2>Nagłówek stopnia drugiego</h2>

Usuwanie lub zmiana nadmiarowych marginesów

Domyślnie elementy z rodziny hX mają bardzo duże marginesy, co psuje efekt całej strony. Można go zmienić poprzez zwykłą zmianę właściwości margin dla danego elementu:

h3 {
    margin: 5px;
}

Oczywiście można ten margines również usunąć, podając jako wartość 0.

Pogrubianie tekstu

Pogrubianie tekstu ma na celu zwiększyć ważność danych słów w tekście. Służy do tego element strong, którego treść pająki traktują jako ważniejszą. Pamiętaj, że służy on jedynie do podkreślania ważności, a pogrubienie jest tylko efektem wizualnym dla użytkownika, aby on również to zauważył. Jeżeli chcesz po prostu udekorować jakiś tekst, użyj znacznika span.

To jest tekst, ale <strong>ten</strong> element jest ważniejszy.

Pochylenie tekstu

Pochylenie tekstu ma oznaczać zaakcentowanie danego lub danych słów. Jest ono uważane, jak pogrubione poprzez element strong, jako ważniejsze, lecz o trochę mniejszym priorytecie od powyższego. Używamy do tego znacznika em.

To też jest tekst, ale <em>te</em> słowo jest specjalnie zaakcentowane.

Zwykła dekoracja tekstu

Jeżeli chcesz po prostu udekorować jakiś tekst, nie zmieniając jego znaczenia dla botów, umieść go w znaczniku span i nadaj mu określony styl. Dla przykładu pogrubienie:

To jest tekst, ale <span style="font-weight: bold;">ten</span> jest pogrubiony, lecz tej samej wartości

Pamiętaj jednak, że w używa się go tylko w specyficznych przypadkach i zazwyczaj powinno się zamiast niego używać strong lub em.

Podział tekstu na akapity, nowe linie

Przy kodowaniu na DIVach popularne BRy stają się praktycznie bezużyteczne. Tutaj, kiedy chcemy w tekście uzyskać nową linię, po prostu zaczynamy nowy akapit. Znacznikiem akapitu jest p. Tekst, który ma być w akapicie, obejmujemy tymże elementem. Daje to nam przejrzysty podział tekstu dla pająków, dla których tak wiele rzeczy robimy.

<p>Pierwszy akapit</p>
<p>Drugi akapit</p>

Odstępy pomiędzy akapitami

Odstępy pomiędzy akapitami kontrolujemy zmieniając wartość właściwości margin dla danego elementu p za pomocą CSS:

p#naszAkapit {
    margin: 5px 0;
}

Czemu dałem dwie wartości? Pierwsza to wielkość marginesu u góry i dołu, a druga – po lewej i prawej stronie.

Kody źródłowe

Kody źródłowe trzeba obejmować znacznikiem code. Nie dość, że boty wiedzą, że jest to treść tego typu, to i przeglądarki pomijają parsowanie(zamianę kodu na widoczny element) jego treści, więc możemy tam umieszczać dowolny kod bez obawy, że będzie trzeba zamieniać znaki < i > na encje(ciagi rozpoczynające się na & i kończące średnikiem, które w wyniku dają określony znak).

<code><h3>Ten nagłówek nie będzie parsowany</h3></code>

Cytaty

Jeżeli cytujemy jakiś tekst, trzeba poinformować boty, że nie jest on naszej własności. Taką treść umieszczamy w elemencie blockquote.

<blockquote>To jest treść cytatu</blockquote>

To już koniec tej części artykułu o tworzeniu stron na DIVach. Pozostaje Ci poprawić swoje szablony i cieszyć się tym, że niepełnosprawni łatwiej będą mogli się poruszać po Twojej stronie oraz boty lepiej zaindeksują jej treść, co da Ci wyższe miejsca w wynikach wyszukiwania.

~Łukasz Rutkowski