Odnośniki do stron zewnętrznych

Większość naszych stron zbudowanych jest z kilku dokumentów, reprezentujących różne działy. Poruszamy się po tych stronach klikając pewne przyciski lub napisy. To właśnie one są odnośnikami.
Znacznik służący do tworzenia odnośników to <a>. Posiada on szereg dodatkowych argumentów. Oto najważniejsze z nich:
=>  href – adres strony docelowej
=> name – nazwa zakładki (kotwica)
=>   target – okno docelowe

Oto przykładowy dokument zawierający kilka odnośników:
<html> <head>
<meta http-ecjuiv= “Content-type”
content=”text/html; charset=ISO-8859-2 “>
<title>Linki</title> </head> <body>
<hl>Linki</hl>
<p>Na tej stronie umieściłem odnośniki do moich ulubionych stron. Zachęcam do ich przeglądania!</p>
<ul> <li> href = “http: //www.google.pl”>
http://www.google.pl</a> – Google <li><a href=”http://www.onet.pl”>
http://www.onet.pl</a> – Ulubiony portal <li><a href=”http://www.wp.pi”>
http://www.wp.pl</a> – Wirtualna Polska </ul>
</body> </html>

Na prezentowanej przed chwilą stronie umieściliśmy trzy odnośniki. Zostały one wypunktowane, a więc skorzystaliśmy ze znaczników <ul> i <li> Przyjrzyjmy się bliżej samej konstrukcji znacznika. Wygląda on tak:
<a href=”http://www.google.pl”>http://www.google.pl </a> – wyszukiwarka
Pomiędzy znacznikami <a> i </a> umieszczamy treść odnośnika, czyli ten tekst, który ma nim być. To właśnie na nim klikamy myszką. W naszym przykładzie owym tekstem jest adres strony. Jednak to, jaką stronę przeglądarka ma wyświetlić po kliknięciu na danym hiperłączu określamy argumentem href. W powyższym przykładzie za odnośnikiem umieściliśmy opis strony. Moglibyśmy jednak zrobić tak, aby sam opis danej witryny był odnośnikiem. Wystarczy umieścić go pomiędzy <a>  i < /a>. Zrobimy to w kolejnym przykładzie.

Listy definicji

Język HTML pozwala na tworzenie jeszcze jednego rodzaju list, tzw. list definicji, czyli definicji i wykazów różnych pojęć. Oto przykładowy kod i rysunek prezentujące wykorzystanie i wygląd opisywanego elementu.
<html> <head>
<meta http-equiv=”Content-type”
content=”text/html; charset=ISO-8859-2″>
<title>Encyklopedia</title> </head> <body>
<dl>
<dt>abecedariusz</dt>
<dd>jest to wierszowany utwór, w którym
kolejne strony lub wersjy rozpoczynają się kolejnymi literami alfabetu</dd>
<dt>ablucja</dt>
<dd>jest to rytualne obmycie dla oczyszczenia
duszy nakazane przez przepis lub zwyczaj
religijny</dd> <dt>absorbcj a</dt> <dd>jest to wchłanianie jednej substancji
przez drugą, np. wchłanianie cieszy przez
ciało stałe</dd> </dl>
</body> </html>

Jak widzimy, lista definicji objęta jest znacznikiem <dl>. Następnie każde nowe pojęcie (termin definiowany) objęty jest znacznikiem <dt>…</dt>, a jego opis znacznikiem < dd> …</ dd>.

Jak dodawać CSS do strony

Istnieje kilka sposobów na dodawanie kodu CSS do strony i wszystkie maja swoje zalety i wady. Najbardziej podstawowym sposobem dodawania kodu CSS jest pisanie go bezpośrednio w kodzie HTML co może wyglądać na przykład tak:

<head>
<style type=”text/css”>
p { padding-bottom: 12px; }
</style>
</head>

Jest to o tyle wygodne, że można na bieżąco pisać CSS podczas tworzenia kodu HTML. Jednak gdy po jakimś czasie developer chce zmienić wygląd jakiegoś elementu strony musi wchodzić w każdy plik HTML osobno a jest to bardziej czasochłonne i pracochłonne.

Dlatego też wiele osób decyduje się na przywołanie zewnętrznego pliku CSS zawierającego stylizację wszystkich możliwych elementów ze strony co może wyglądać na przykład tak:

<link href=”myCSSfile.css” rel=”stylesheet” type=”text/css”>

Ma to takie zalety, że przy zmianie wyglądy całej strony można wprowadzić wszystkie poprawki tylko w jednym pliku i w ten sposób oszczędzić czas. Z drugiej strony taki plik CSS jest często niezwykle długi i zawiera mnóstwo elementów.

Podstawowy szablon strony

W podstawowym szablonie strony, czyli w pliku CSS, który ma być wykorzystywany globalnie dla całej zawartości twojej strony umieszcza się wszystkie elementy, które mogą pojawić się w obrębie całej strony. Mogą to być elementy takiej jak rodzaj i rozmiar czcionki w akapicie, szerokość akapitów, szczegółowa stylizacja nagłówków, a także odnośniki, tabele i menu strony. W ten sposób nie trzeba precyzować wyglądy tych elementów w każdym pliku html bo i tak pewnie w większości z nich wygląd tych elementów jest taki sam. Przykładowy plik css może wyglądać na przykład tak:

body {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}

p {
width: 80%;
}

li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}

h1 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}

h2 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}

a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}

li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}

a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}

li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}

 

i tak dalej…