Szkielet dokumentu#

Wstęp#

W rozdziale zaprezentuję ogólną strukturę dokumentu HTML, a więc ramy - prolog (DTD), część nagłówkową (HEAD) i ciało dokumentu (BODY) - do których wstawiamy informacje o samym dokumencie oraz jego właściwą treść. Zrozumienie tego rozdziału jest kluczowe dla pisania poprawnie skonstruowanych stron, interpretowanych bez zakłóceń przez przeglądarki internetowe oraz dobrze widocznych w samym Internecie, a przede wszystkim w wyszukiwarkach sieciowych.

Pliki i składnia (X)HTML#

Pliki (X)HTML są najzwyklejszymi plikami tekstowymi, dzięki czemu można je tworzyć za pomocą prostych edytorów tekstowych. Plikom HTML nadajemy rozszerzenie .html lub .htm. Dla XHTML-a dodatkowo można użyć rozszerzenia .xhtml (niestety, niektóre przeglądarki nie obsługują takiego rozszerzenia np. starsze wersje MSIE).

W nazwach plików lepiej nie używać:Podkreślam, zwracaj szczególną uwagę na wielkości liter w nazwach plików, obrazów, skryptów itp. do których się odnosisz. Dla wielu serwerów FTP wywodzących się z systemu Unix (w przeciwieństwie do Windowsa) nazwa index.html, Index.html, INDEX.html oznacza różne pliki. Stanowi to czasem źródło pomyłek, niezwykle trudnych do wykrycia przez mniej doświadczonych webmasterów.

Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!

Pliki w postaci źródłowej wysyłane są przez serwery do przeglądarek, które następnie odpowiednio interpretują polecenia w nich zawarte.

Serwer to właściwie program, ale przyjęło się nazywać tym mianem także komputer, na którym go zainstalowano. Serwer jest odpowiedzialny za realizację żądania przesłania dokumentów do tego komputera, który wystąpił z takim żądaniem. Jest także konieczny do opublikowania dokumentów w Internecie. Internet z kolei stanowi sieć komputerów połączonych ze sobą - za pomocą odpowiedniej infrastruktury. Komputery mogą komunikować się wzajemnie i przesyłać sobie dane, czyli informacje.

Pisząc "polecenia" mam na myśli pewne osobliwe znaczniki (tzw. tagi). Tagi, których jest blisko setka, stanowią wraz z parametrami język (X)HTML. Same składają się z nawiasów kątowych <>, między którymi znajdują się ściśle określone litery, cyfry, symbole. Pozwalają nam na precyzyjne sterowanie zawartością strony.

Deklaracja elementu (X)HTML:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<znacznik otwierający>..................</znacznik zamykający>

Znaczniki spełniają trzy funkcje:

Znaczniki nie są widoczne na ekranie, widoczne są tylko efekty ich działania (np. wstawienie obrazka). Jeżeli dany Tag jest niezrozumiały dla przeglądarki, to w przypadku HTML-a jest ignorowany oraz nie jest sygnalizowany błąd.

Chociaż zwyczajowo stosuje się zamiennie określenia polecenie, element, znacznik czy tag, formalnie rzecz biorąc element jest ogólną nazwą, np. h1, natomiast znaczniki to <h1> (znacznik otwierający) i </h1> (znacznik zamykający). Krótko mówiąc, element jest ogólniejszym i zbiorczym określeniem. Nie powinno to jednak prowadzić do nieporozumień, gdyż z kontekstu wiadomo, o co chodzi.

Wewnątrz elementu (X)HTML - a więc pomiędzy znacznikiem otwierającym a zamykającym dany element - znajdować się może treść tego elementu (jeśli dany element reprezentuje na przykład akapit tekstu lub komórkę tabeli) lub dowolna liczba innych elementów języka (X)HTML, przykładowo:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p>Treść akapitu <b>pogrubienie</b> i <i>pochylenie</i>.</p>

Znaczniki (X)HTML poza samą, zamkniętą między znakami nawiasów ostrokątnych nazwą oraz treścią elementu mogą zawierać jeszcze dodatkowe parametry - tzw. atrybuty, np.:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<Nazwa_elementu atrybut1="wartość1" atrybut2="wartość2">...</Nazwa_elementu>
<Nazwa_elementu atrybut1="wartość1" atrybut2="wartość2" />

Atrybuty definiuje się tylko w znaczniku otwierającym (także w znaczniku określającym pusty element). Każdy atrybut ma swoją nazwę i wartość. Atrybuty oddzielone są od nazwy elementu i pozostałych atrybutów znakami spacji, zaś wartość atrybutu zapisywana jest zaraz za nazwą atrybutu, jest oddzielona o niej znakiem równości i ujęta w znaki cudzysłowu lub apostrofu: atrybut="wartość". Atrybutów używa się do określenia cech elementu.

Jeden element może mieć dowolną ilość atrybutów (kolejność nie jest istotna), ale każdy musi mieć swoją unikalną nazwę. Nie można w jednym znaczniku dwa razy definiować atrybutu o tej samej nazwie:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<h1 name="tytuł" name="podtytuł">...</h1>

Dla różnych znaczników istnieją zarówno atrybuty obowiązkowe, jak i takie, które nie muszą być koniecznie użyte.

Struktura plików i katalogów na serwerze#

Po utworzeniu strony należy przenieść jej całą zawartość na serwer. Zazwyczaj serwery (przy domyślnych ustawieniach) traktują nazwy plików (index.html, index.htm, default.html, default.htm) jak stronę startową (główną, pierwszą, tytułową). W przypadku XHTML pliki te będą miały rozszerzenie .xhtml, a dla plików tworzonych dynamicznie po stronie serwera może być to .php. Plik startowy należy umieścić bezpośrednio w najwyższym katalogu udostępnionym przez serwer.

Po wpisaniu adresu naszej strony w przeglądarce internetowej np. www.crimsteam.site90.net zwrócona zostanie strona startowa odnaleziona w katalogu głównym serwera. Ten sam efekt uzyskamy wpisując www.crimsteam.site90.net/index.html. Oczywiście istnieje możliwość, by strona taka miała dowolną nazwę (a nawet rozszerzenie). Wszystko zależy od ustawień serwera, ale jest to temat dla bardziej zaawansowanych programistów.

Pozostałe pliki/katalogi można rozmieszczać według własnego uznania. Proponuję jednak wydzielać sobie pewne zasoby i umieszczać je w różnych katalogach. Upychanie wszystkich plików w jeden folder (główny) wprowadza niepotrzebny bałagan. Prawidłowa struktura danej strony może wyglądać następująco:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
Adres strony: http://www.strona.pl
Struktura katalogów:

<!-- zawartość głównego katalogu -->
index.html
favicon.ico
style.css

<!-- katalogi podrzędne -->
[akwarystyka]

	[akwarium]
		wstep.html
		budowa.html
		materialy.html
	[/akwarium]

	[ryby]

		gatunki.html

		[kasaczowate]

			[gupik]
				opis.html
				hodowla.thml
			[/gupik]

		[/kasaczowate]

	[/ryby]

[akwarystyka]

W przypadku gotowych CMS-ów nie musimy sobie zaprzątać tym głowy. Tworząc statyczną stronę warto przemyśleć jej strukturę plików i folderów, późniejsze zarządzanie takim projektem będzie wygodniejsze.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Szkielet dokumentu (H1) Wstęp (H2) Pliki i składnia (X)HTML (H3) Struktura plików i katalogów na serwerze (H3)