Kolejne znaczniki budujące treść strony www

Najobszerniejszym co do zawartości pojemnikiem naszego szablonu jest zdecydowanie warstwa mainCont. Jak pamiętasz składa się ona z dwóch głównych części - menu głównego i właściwej treści.

Ugryźmy je po kolei.

Menu główne

<div id="mainmenu">
   <ul>
      <li><a class="active" title="home" href="index.html">HOME</a></li>
      <li><a title="link one" href="index.html">LINK ONE</a></li>
      <li><a title="link two" href="index.html">LINK TWO</a></li>
      <li><a title="link three" href="index.html">LINK THREE</a></li>
      <li><a title="link four" href="index.html">LINK FOUR</a></li>
      <li><a title="contact us" href="contact.html">CONTACT US</a></li>
   </ul>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla
   convallis. Curabitur facilisis mollis arcu:</p>
   <p>Tel: <span>+44 (0)1332 000000</span></p>
</div>

Zaraz po otwarciu pojemnika menu głownego mamy znacznik <ul>. Znacznik ten to początek listy wypunktowanej. Każdy element tej listy zawarty jest między znacznikami <li> a </li>. I to one właśnie tworzą elementy naszego menu. I choć jest to lista wypunktowana to żadnych kropek ani kresek tu nie widać, co oczywiście wynika z reguł CSS.

Elementy menu to nic innego jak tylko hiperłącza. Dlatego mamy na naszej liście same znaczniki <a>. Każdy z nich posiada parametr title i href, który tym razem wskazuje już na adres strony, do której kieruje dany element menu. Na końcu listy jest oczywiście znacznik zamykający </ul>.

Zauważ też, że jeden z elementów <a> jest trochę inny od reszty:

<li><a class="active" title="home" href="index.html">HOME</a></li>

Znacznik ten należy do klasy active. Przynależność ta zmienia jego wygląd tak, aby było widoczne który element menu jest aktualnie aktywny (na której stronie jest w danej chwili osoba odwiedzająca Twój serwis).

Pod menu głównym mamy standardowy akapit tekstowy wypełniony wypełniaczem, nie jest więc wart większej uwagi.

Przyjrzyjmy się natomiast kolejnemu akapitowi, gdyż znajduje się w nim nowy, nieznany nam jeszcze znacznik <span>.

<p>Tel: <span>+44 (0)1332 000000</span></p>

Znacznik <span> jest używany do tego, aby zmienić wygląd kawałka strony, który jest objęty tym znacznikiem. W tym przypadku jak widzisz działa to tak, że numer telefonu pisany jest czcionką większą niż napis Tel:. Reguła, która to ustala jest oczywiście zawarta w pliku CSS.

I na tym ostatnim napisie kończy się nasz pojemnik menu głównego.

Właściwa treść strony

Zawarta jest ona w pojemniku maincontent i nie zawiera już zbyt wiele nowych dla Ciebie znaczników.

Na uwagę może zasługiwać znacznik <img>:

<img alt="home image" src="images/homeimage.jpg" width="175" height="130" />

Oprócz poznanych już przez Ciebie elementów zawiera on dwa parametry - width i height. Określają one wymiary obrazka, który zostanie wstawiony w tym miejscu. Co prawda parametry te nie są konieczne, bo jak przeglądarka wczyta obrazek to i tak wyświetli go we właściwych proporcjach, natomiast ich stosowanie jest wskazane ze względu na to, że dzięki temu przeglądarka jeszcze przed wczytaniem obrazka wie, ile miejsca na stronie na niego sobie zarezerwować. Jeżeli zdarzyło Ci się kiedyś wejść na jakąś stronę i zacząć ją czytać, kiedy nagle i niespodziewanie treść zaczęła skokami uciekać w dół to wiedz, że był to właśnie efekt nie zastosowania tych parametrów.

Po kilku kolejnych akapitach mamy tu jeszcze jedną listę i znacznik <blockquote>, który oznacza jak sama nazwa wskazuje blokowy cytat. Czyli jak cytujesz jakiś większy fragment tekstu to stosujesz właśnie ten znacznik. Nie jest to tak bardzo często używane, ale zdarza się na przykład na blogach.

Jeżeli chodzi o akapity tekstu to musisz pamiętać o jeszcze jednej cesze języka HTML. Mianowicie nie zwraca on uwagi na to, ile spacji i innych pustych znaków postawisz między słowami w kodzie strony. Niezależnie od ich liczby na stronie pojawi się zawsze jedna spacja. Nawet jeśli każde słowo zdania wpiszesz w osobnej linii to i tak pojawią się one obok siebie (przejście do nowej linii możesz wymusić znacznikiem <br />). Jest to całkiem wygodne gdyż daje Ci pełną kontrolę nad treścią Twojej strony.

Stopka

W stopce nie mamy również już nic nowego, wszystkie znaczniki są Ci znane.

I tym samym doszliśmy już do końca treści naszego szablonu :-)