Znaczniki budujące treść Twojej strony

Wiesz już, że nasz szablon składa się z całkiem dużej liczby pojemniczków (lub inaczej wartstw, czyli znaczników <div>). Czas najwyższy abyśmy zajęli się tym, co buduje konkretną treść Twojej strony.

Górna część strony

Spójrzmy więc znowu na pojemnik zawierający górną część strony (a w przeglądarce otwórz sobie plik index.html szablonu):

<div id="topCont">
   <div id="top">
      <div id="topleft"><p><a title="skip to content" href="#mainCont">SKIP TO CONTENT</a></p></div>
      <div id="topright"><p>Lorem ipsum dolor consectetuer - Tel: +44 (0)1332 000000</p></div>
   </div>
   <div id="header">
      <div id="headerleft"><img alt="" src="images/image.jpg" /></div>
      <div id="headerright">
         <h1>website.name.here</h1>
         <h2>website.slogan.here</h2>
      </div>
   </div>
</div>

Wewnątrz pojemnika topleft mamy coś takiego:

<p><a title="skip to content" href="#mainCont">SKIP TO CONTENT</a></p>

Widzimy tutaj dwa znaczniki, jeden w drugim. Pierwszym z nich jest znacznik <p>, oznaczający poczętek akapitu, czyli po prostu kawałka tekstu. Wewnątrz tego akapitu jest znacznik <a>, który rozpoczyna odnośnik (link, hiperłącze). Jak widzisz link ten ma kilka parametrów. Pierwszym z nich jest title, czyli tekst podpowiedzi, pojawiającej się po najechaniu myszą na ten link (możesz to sprawdzić najeżdżając kursorem w szablonie i czekając krótką chwilkę).

Drugim i w sumie najważniejszym parametrem jest href, którego wartość mówi o tym dokąd kieruje dany link. W tym przypadku link nie kieruje jednak do żadnej innej strony, tylko do elementu bieżącej strony o identyfikatorze mainCont (powoduje to właśnie ten krzyżyk #). Sprawdź co się stanie kiedy na niego klikniesz - okno strony przewinie się trochę. Następnie widzimy już tekst linka (SKIP TO CONTENT) a po nim znacznik zamykający (</a>). Zaraz za nim jest kolejny znacznik zamykający, tym razem kończy nam się akapit tekstu (</p>).

Informacja dodatkowa: O co chodzi w takim dziwnym linku przewijającym nam kawałek strony (SKIP TO CONTENT)?

Jest to ułatwienie dla osób niewidomych, coraz częściej spotykane na porządnie robionych stronach. Osoby niewidome korzystają bowiem ze specjalnych przeglądarek, które po kolei czytają im stronę. Kiedy więc taka osoba natrafi na link opisany jako "przeskocz do właściwej treści" może od razu kazać przeglądarce na niego kliknąć i dzięki temu zacznie od razu czytać konkretną treść, zamiast żmudnie przechodzić przez na przykład elementy menu głównego lub spisu treści.

Akapit tekstu mamy również w pojemniku topright:

<p>Lorem ipsum dolor consectetuer - Tel: +44 (0)1332 000000</p>

Tym razem nie występuje już tutaj nic więcej. Jest to sam tekst i tylko tekst. A co do jego treści (Lorem ipsum...) to jest to standardowy wypełniacz stosowany w szablonach stron.

Jak łatwo można zauważyć przyglądając się szablonowi, teksty zawarte w obu tych pojemnikach paska górnego są całkowicie różne. Mają inną wielkość i kolor czcionki. Co o tym decyduje? Dobrze się domyślasz - reguły CSS.

Kolejnym elementem strony jest szeroki pasek nagłówka z obrazkiem, tytułem strony i jej sloganem.

Najpierw mamy pojemnik będący lewą częścią tego nagłówka (headerleft), a wewnątrz niego taki oto znacznik:

<img alt="" src="images/image.jpg" />

Znacznik <img> wstawia nam na stronę obrazek. W tym przypadku widzimy dwa parametry. Pierwszym z nich jest alt. Parametr ten określa tekst alternatywny, który pojawia się w przypadku braku obrazka lub gdy osoba przeglądająca stronę korzysta z przeglądarki wyświetlającej tylko tekst. Jako wartość tego parametru podaje się jakiś krótki opis tego, co można zobaczyć na obrazku. Jeżeli natomiast ten obrazek jest tylko mało istotnym z punktu widzenia treści strony ozdobnikiem wartość parametru alt może zostać pusta (i tak mamy w tym przypadku). Niezależnie od tego, parametr alt powinien wystąpić zawsze, inaczej do naszej strony doczepi się walidator.

Drugim parametrem znacznika <img> jest parametr src, który wskazuje na lokalizację obrazka, który ma zostać wyświetlony (od source . W tym przypadku jest to plik image.jpg znajdujący się w katalogu images. Po tym parametrze znacznik sam się zamyka (/>) i to jest już koniec naszego obrazka.

Teraz mamy prawą część pasa nagłówkowego, a w niej dwa znaczniki:

<h1>website.name.here</h1>
<h2>website.slogan.here</h2>

Pierwszy z nich - <h1> to nagłówek poziomu pierwszego. Traktuj go jak najważniejszy nagłówek na stronie (jak tytuł książki). Drugi z nich - <h2> to nagłówek poziomu drugiego. Nagłówków może być więcej (aż do <h6>) i stosuje się je do zaznaczenia na stronie elementów najważniejszych, takich jak właśnie tytuł strony, nagłówek danej sekcji. To również coś takiego jak rozdziały i podrozdziały w książce. W przypadku naszego szablonu mamy nagłówek <h1> jako tytuł strony a nagłówek <h2> jako jej slogan.

I to już wszystko, jeżeli chodzi o pojemnik górny.