HTML - Lekcja 1.2 - Dokument źródłowy, bloki dokumentu, znaczniki


Blok Body zawiera główną partię dokumentu, która po odczytaniu przez przeglądarkę ma być pokazana na stronie.
Blok Head zawiera informacje służące do właściwego wyświetlenia treści body, do identyfikacji dokumentu i spełniające wiele innych ważnych funkcji. Tak skonstruowany dokument nazywany jest dokumentem źródłowym

Znaki przeniesienia do następnego wiersza ENTER, tabulatora TAB nie są w normalnych warunkach brane pod uwagę przez przeglądarkę. Są ignorowane tak jakby ich nie było. Podobnie każda ilość spacji umieszczona obok siebie jest odczytywana jako jedna spacja. Dzięki temu dokument źródłowy może być formowany w sposób wygodny dla projektanta strony.

Do spełniania funkcji przeniesienia do następnego wiersza utworzono specjalny znacznik <BR> (break). Dodatkowe spacje można uzyskać stosując znak specjalny &nbsp; wstawiający do dokumentu spację niełamliwą.

Podstawowe znaczniki blokowe to znaczniki paragrafu <P> </P> (akapit) oraz warstwy <DIV> </DIV> mogące obejmować (zawierać) tekst, grafikę, tabele, listy i rozmaite inne obiekty.

Znaczniki mogą zawierać identyfikatory pozwalający na manipulowanie własnościami bloków, oraz atrybuty np. align pozwalający na wyrównanie do lewej, prawej, justowanie i centrowanie zawartości bloku. Znaczniki zawierają też niekiedy indywidualny atrybut style decydujący o formie prezentacji bloku lub obiektu zdefiniowanego znacznikiem. O stylach będziemy mówili szczegółowo później.

Proste znaczniki formatujące tekst to:
<B> </B> do pogrubienia tekstu (bold)
<I> </I> do uzyskania tekstu pochylonego (italic)
<U> </U> do uzyskania tekstu podkreślonego (underline)

Atrybuty o określonych nazwach występujące w rozmaitych znacznikach spełniają na ogół tą samą lub podobną funcję łatwo kojarzącą się z nazwą atrybutu. Przykładowo atrybut color będzie oznaczać kolor czcionki, a atrybut align sposób wyrównania tekstu lub innych obiektów znajdujących się wewnątrz bloku dokumentu lub komórki tabeli.

Wartość atrybutu color to nazwa koloru w języku angielskim lub odpowiednie precyzyjne podanie składowych RGB wybranego koloru. Dowolny kolor uzyskuje się przez zmieszanie świateł trzech podstawowych kolorów Red Green Blue, dobierając odpowiednio ich natężenia. Jest to tzw. addytywne mieszanie barw, zgodne ze sposobem postrzegania światła przez oko człowieka.

Poprzez zmiany jasności kolorów składowych otrzymujemy szeroką gamę różnych barw.
Dla każdego z kolorów podstawowych RGB istnieje możliwość wyboru jednego z 256 stopni jasności od zera do 255.
Zero oznacza całkowity brak światła w danym kolorze, a 255 maksymalne świecenie ekranu. Całkowita ilość poziomów jasności dla każdego koloru wynosi 256, a zatem ilość kombinacji przy 3 kolorach Red Green Blue wyniesie 2563, co odpowiada możliwości uzykania 16777216 różnych kombinacji barw.

Sam sposób zapisu koloru za pomocą składowych RGB jest dosyć skomplikowany, ponieważ wymyślono, że jasności zapisywać się będzie nie liczbami dziesiętnymi tylko liczbami o podstawie 16.   Zamiast zatem pisać 255 piszemy FF. Liczby określające każdą ze składowych koloru są dwucyfrowe.

Dodatkowe, większe od 9 cyfry systemu szestnastkowego to A=10, B=11, C=12, D=13, E=14 i F=15. Oczywiście dla liczby dwucyfrowej o podstawie 16 pierwsza pozycja to liczba szesnastek, a druga to liczba jedności.

Kolor zapisujemy podając kolejno składowe RGB w postaci dwucyfrowych liczb szestnastkowych. Całość poprzedzamy krzyżykiem #.
Przykładowo: color=#A7BC9F oznacza:

czerwieni: A7 to 10*16+7=167, zieleni: BC to 11*16+12=188, niebieskiego: to 9*16+15=159

Konwersji liczb szestnastkowych na dziesiętne i odwrotnie możemy dokonać za pomocą kalkulatora-windows w wersji rozszerzonej.

Eksperymenty z dobieraniem kolorów najlepiej przeprowadzić manipulując kolorem tła dokumentu w znaczniku <BODY>. Decyduje o nim atrybut bgcolor. Oto przykład zapisu w znaczniku body: <body bgcolor=#FFE9E1>

Znacznik body posiada wiele innych atrybutów, np. ustalających kolory tekstu i odsyłaczy (link) na stronie. TEXT - kolor tekstu, LINK - kolor tekstu odsyłaczy do stron nie oglądanych, VLINK - kolor tekstu odsyłaczy do stron już oglądanych oraz ALINK - kolor tekstu odsyłaczy w momencie klikania.

Do wyposażenia znacznika body można jescze dodać atrybut wstawiający tło w postaci obrazka oraz atrybuty marginesów.

Atrybut wstawiający tło mieści się wewnątrz znacznika <BODY> i ma postać background="aaaaa.bbb", gdzie aaaaa jest nazwą pliku zawierającego grafikę do wstawienia na stronę jako tło, a bbb jest jednym z dopuszczalnych rozszerzeń plików jakie możemy używać do celów internetu. Pliki standardowo czytane przez przeglądarki to pliki z rozszerzeniami gif, jpg oraz png.

Oto przykład poprzedniego zapisu uzupełnionego tłem w postaci obrazka:
<body bgcolor=#FFE9E1 background="obrazek.jpg"> Musisz pamiętać, że kolor tła pojawi się wcześniej niż obrazek, ponieważ przeglądarka potrzebuje nieco czasu aby ściągnąć plik graficzny z serwera na podstawie informacji, które umieściliśmy w znaczniku body.

Jak przekonasz się później obrazek, który będzie wstawiony jako background ( tło) zostanie powtórzony stosownie do wielkości strony. Na pierwszy rzut oka możesz tego nie zauważyć...

Jest to zjawisko normalne. Tła jakie stosujemy mogą składać się z niewielkich segmentów graficznych, które powtórzone układają się w mozaikę. Obrazki mogą być także odpowiednio dopasowywane do wielkości strony i nie będą się wówczas automatycznie powielać.

Przy zastosowaniu styli CSS uzyskujemy nad tłem pełną kontrolę. Możemy np. zlikwidować powtarzanie całkowicie lub w kierunku poziomym czy pionowym, ustawić tło w odpowiednim miejscu, zatrzymać je lub pozwolić mu przewijać się razem z treścią strony.

Dalej