Ilustracja jako tło dokumentu HTML

Aby uatrakcyjnić dokument HTML, można dodać do niego tło w postaci jakiegoś rysunku lub fotografii. Należy jednak pamiętać aby dokument nie stracił nic ze swej czytelności. Ciekawy efekt (tak zwany znak wodny - podczas przewijania dokumentu grafika jest nieruchoma) daje zastosowanie atrybutu BGPROPERTIES gdy nada mu się wartość "fixed".

Poniżej przedstawiony jest kod źródłowy przykładowego dokumentu - należy zwrócić uwagę na zastosowanie atrybutu BACKGROUND znacznika BODY.

<html>
<head>
<meta http-equiv="Content-Type" content=" text/html; charset=ISO-8859-2">
<title>Nasza Szkoła</title>
</head>

Poniższy fragment tekstu przedstawia przykład kodu źródłowego HTML umożliwiającego włączenie grafiki jako tła dokumentu. Przyjrzyj się znacznikowi BODY i jego argumentom.

<body background="dark.jpg" text="000050">

Atrybut BACKGROUND znacznika BODY wskazuje na zbiór zawierający rysunek, który wyświetlany będzie jako tło dokumentu.

<P><h5><B>The Dark Side Of The Moon</B></h5>

Nagrany w pośpiechu i niezbyt udany album Obscured By Clouds nie przysporzył grupie Pink Floyd sławy i nie był dobrą zapowiedzią przed kolejnym albumem. Ciemna Strona obroniła się jednak sama, nie potrzebowała reklamy. Od 1973 roku do dzisiaj zdobywa sobie nowe pokolenia słuchaczy i miłośników...., Wiesław Weiss nazwał ją "Symbolem wszystkiego, co najbardziej wartościowe w rocku".
Najpiękniejsza płyta we wszechświecie. Jak kto woli o sensie albo bezsensie życia. Zaczyna się od bicia serca, brzdęku kasy, krzyku szaleńca. Później robi się inteligentnie i ponadczasowo, muzyka leci sobie wolno, Waters śpiewa, z tyłu klawisze, z przodu gitara. Później kilkuminutowa ucieczka w głębie własnej osobowości. Powoli zapadamy w trans z którego budzi nas bicie tysięcy zegarów. Tak zaczyna się utwór o płynącym czasie - "Time", jedna z kluczowych kompozycji "Ciemnej strony...". To utwór pełen powietrza, w przeciwieństwie do następnej kompozycji pełnej mgły. "The Great Gig In The Sky" to mistrzowska kompozycja, na której dokonano mistrzostwa świata w manipulowaniu kobiecym głosem, najpiękniejsza wokaliza w historii rocka. Najbardziej przebojowym fragmentem płyty jest utwór o znaczeniu pieniędzy w ludzkim życiu - "Money" to już kultowa kompozycja, którą zna każda żywa istota na kuli ziemskiej. Najwięcej do myślenia daje kolejny utwór "Us And Them", opowiadający historię bezmyślnej żołnierskiej śmierci. To bez wątpienia jeden z najbardziej wzruszających fragmentów "Ciemnej strony...", a ten saksofon i klawisze... same cuda. Tak już jest do końca, pięknie. Zamykający płytę utwór Eclipse daje nadzieję na choć trochę optymizmu, bo "wszystko na co padają promienie słoneczne jest piękne", nasza radość trwa jednak krótko, gdyż "Słońce jest zaćmione przez ksieżyc".
Treść The Dark Side Of The Moon jest trudna w odbiorze. Teksty ukazują naszą kruchość i małość w obliczu śmierci...

Takie słowa jak ... przełomowa, .... rewelacyjna, ... odkrywcza, ...wspaniała....ponadczasowa.. Te i wiele inne podobne przymiotniki często sąsiadują z tytułem "The Dark Side Of The Moon" w recenzjach, analizach, tłumaczeniach.
Żaden z nich nie jest jednak w stanie oddać piękna muzyki z tego albumu.

<P align=right>Paweł</body> </html>

Rady:

  • Grafikę przygotuj tak, aby tło nie okazało się zbyt "agresywne" - rozjaśnij ją.

  • W celu umieszczenia tekstu na tle jakiegoś deseniu, nie trzeba stosować grafiki o dużych rozmiarach, lecz sensowniej jest przygotować mały element graficzny. Stosując atrybut BACKGROUND, podaj jako jego wartość mały rysunek. Przeglądarka powieli go tak, że wypełni on całość dokumentu. Przygotowując grafikę, należy zwrócić uwagę, aby podczas wyświetlania przez przeglądarkę nie były widoczne linie łączenia obrazków (przykład 2).

  1. W przykładzie 1 zastosowano rysunek duży "dark.jpg"
    <body background="dark.jpg" text="000050">
  2. W przykładzie 2 zastosowano rysunek mały "cegla.jpg"
    <body background="cegla.gif" text="000050">
  3. W przykładzie 3 zastosowano rysunek "cegla.jpg" z przykładu 2 , lecz do znacznika dodano jeszcze atrybut bgproperties, nadając mu wartość "fixed"
    <body background="cegla.jpg" bgproperties="fixed" text="000050">

 

Tutaj można poćwiczyć

W oknie edytora możesz wprowadzić zmiany w tekście kodu HTML, a po naciśnięciu przycisku "pokaż widok strony" zobaczysz efekt