WCPR - Tworzenie stron internetowych w kodzie HTML

Warszawskie Centrum Pomocy Rodzinie
ul. Rakowiecka 21, 02-517 Warszawa, tel: 646-53-13, 646-53-15, 646-18-11, 646-52-54
fax: w. 102, [email protected], www.wcpr.pl
Tworzenie stron internetowych w kodzie HTML
Cz 6
6. Multimedia
6.1. Obrazek
1. Zwykły (domyślnie):
<img src="ścieżka dostępu" alt="Tekst alternatywny" />
2. O określonych rozmiarach:
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y" />
lub
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x%" height="y%" />
gdzie jako "x" oraz "y" naleŜy wpisać odpowiednio: długość i wysokość obrazka w
pikselach.
Natomiast jako "x%" oraz "y%" naleŜy wpisać odpowiednio: długość i wysokość
obrazka w procentach ekranu.
3. Z obramowaniem:
<img src="ścieżka dostępu" alt="Tekst alternatywny" border="n" />
gdzie jako "n" naleŜy wpisać grubość obramowania (w pikselach).
4. O określonym ustawieniu względem tekstu:
<img src="ścieżka dostępu" alt="Tekst alternatywny" align="rodzaj" />
gdzie jako "rodzaj" naleŜy wpisać:
o "left" - obrazek ustawiony po lewej stronie względem otaczającego go tekstu
o "right" - obrazek po prawej stronie względem tekstu
o "top" - tekst ustawiony na górze obrazka
o "middle" - tekst ustawiony na średniej wysokości względem obrazka
o "bottom" - tekst ustawiony na dole obrazka (domyślnie)
5. O określonej odległości od tekstu:
<img src="ścieżka dostępu" alt="Tekst alternatywny" hspace="x" vspace="y" />
gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość (równieŜ w
pikselach).
6.1.1 Animowany banner
Animowany banner moŜna stworzyć przy uŜyciu takich programów jak np. Animation Shop,
Ulead GIFAnimator czy GIMP i inne. Jest to po prostu specjalny plik GIF, który wstawiamy
na stronę, tak jak zwykły obrazek. MoŜe on mieć przykładowo rozmiary 400x50. Pamiętaj, Ŝe
im więcej klatek animacji, tym większe rozmiary pliku i dłuŜsze wczytywanie strony!
6.2. Osadzenie pliku
<embed src="ścieżka dostępu do pliku" width="x" height="y" />
gdzie jako "ścieŜka dostępu do pliku" naleŜy podać lokalizację na dysku, gdzie znajduje się
Ŝądany plik multimedialny.
Natomiast "x" oznacza szerokość w pikselach, a "y" wysokość wyświetlanego obrazu wtyczki
(ang. plug-in), czyli okna na stronie w którym odtwarzany będzie plik. Jeśli nie podamy
1 z 4
Projekt „Integracja dla samodzielności”
współfinansowany jest przez Unię Europejską
w ramach Europejskiego Funduszu Społecznego
Warszawskie Centrum Pomocy Rodzinie
ul. Rakowiecka 21, 02-517 Warszawa, tel: 646-53-13, 646-53-15, 646-18-11, 646-52-54
fax: w. 102, [email protected], www.wcpr.pl
rozmiarów obrazu wtyczki, moŜe on przyjąć wielkość, która nie pasuje do wymiarów pliku!
Rozmiary zaleŜą równieŜ od posiadanej przez uŜytkownika wtyczki.
Polecenie <embed /> jest przydatne jeśli chcemy wstawić na stronę jeden z plików
multimedialnych:
• *.wav - plik dźwiękowy typu "wav"
• *.mid - plik dźwiękowy typu "midi"
• *.avi - plik typu "avi"
• *.ra - plik Real Audio Player
• *.mp3 - plik dźwiękowy typu "mp3" (MPEG Layer-3)
• *.mpeg - plik typu "mpeg"
• *.mov - plik typu "mov"
• *.asf - plik typu "asf"
• i inne
W przypadku niektórych plików moŜna dodatkowo uŜyć atrybutów:
1. Automatyczny start odtwarzania:
<embed src="ścieżka dostępu do pliku" autostart="typ" />
gdzie jako "typ" naleŜy podać:
o "true" - plik zostanie automatycznie odtworzony, zaraz po wczytaniu strony
o "false" - plik nie zostanie odtworzony po wczytaniu (trzeba go uruchomić
"ręcznie" - poprzez wyświetlony panel kontrolny)
2. Ukrycie obrazu:
<embed src="ścieżka dostępu do pliku" hidden="typ" />
gdzie jako "typ" naleŜy podać:
o "true" - obraz zostanie ukryty
o "false" - obraz będzie wyświetlony na ekranie.
3. Ukrycie panelu kontrolnego:
<embed SRC="ścieżka dostępu do pliku" showcontrols="typ" />
gdzie jako "typ" naleŜy podać:
o "0" - panel zostanie ukryty
o "1" - panel będzie wyświetlony na ekranie
4. Ukrycie paska wyświetlania informacji:
<embed src="ścieżka dostępu do pliku" showdisplay="typ" />
gdzie jako "typ" naleŜy podać:
o "0" - pasek zostanie ukryty
o "1" - pasek będzie wyświetlony na ekranie
5. Powtarzanie:
<embed src="ścieżka dostępu do pliku" loop="typ" />
gdzie jako "typ" naleŜy podać:
o "true" - powtarzanie w nieskończoność
o lub "false" - brak powtarzania
6. Poziom głośności (w przypadku plików dźwiękowych):
2 z 4
Projekt „Integracja dla samodzielności”
współfinansowany jest przez Unię Europejską
w ramach Europejskiego Funduszu Społecznego
Warszawskie Centrum Pomocy Rodzinie
ul. Rakowiecka 21, 02-517 Warszawa, tel: 646-53-13, 646-53-15, 646-18-11, 646-52-54
fax: w. 102, [email protected], www.wcpr.pl
<embed src="ścieżka dostępu do pliku" volume="v" />
gdzie "v" oznacza poziom głośności (od "-10000" do "0").
7. Balans głośników (w przypadku stereofonicznego pliku dźwiękowego):
<embed src="ścieżka dostępu do pliku" balance="b" />
gdzie "b" oznacza balans między głośnikami (od "-10000" do "+10000").
8. Adres do pobrania wtyczki (ang. plug-in):
<embed src="ścieżka dostępu do pliku" pluginspage="adres wtyczki" />
gdzie jako "adres wtyczki" naleŜy podać adres internetowy, gdzie znajduje się
wtyczka, pozwalająca odtworzyć wybrany rodzaj pliku, dzięki czemu uŜytkownik
będzie ją mógł zainstalować, np.:
o "http://www.apple.com/quicktime/download/" - wtyczka *.mov (QuickTime)
o "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=
ShockwaveFlash" - wtyczka *.swf (Macromedia Flash)
o "http://www.microsoft.com/Windows/MediaPlayer/" - wtyczka Windows Media
Player Plug-In for Netscape - dla posiadaczy Netscape (*.wav, mid, mp3, asf,
wma, wmv, avi itp.).
6.3. Plik AVI
<img dynsrc="ścieżka dostępu do pliku *.avi" alt="Tekst alternatywny" />
Polecenie to odtwarza pliki typu *.avi (animacja, film) wprost na stronie, bez wyświetlania
panelu kontrolnego. MoŜliwe są przy tym dodatkowe atrybuty:
1. Ilość powtórzeń:
<img dynsrc="ścieżka dostępu do pliku *.avi" alt="Tekst alternatywny" loop="n" />
gdzie "n" oznacza ilość powtórzeń (dla loop="infinite" jest to nieskończoność).
2. Sposób rozpoczęcia odtwarzania:
<img dynsrc="ścieżka dostępu do pliku *.avi" alt="Tekst alternatywny" start="sposób" />
gdzie jako "sposób" naleŜy wpisać:
o "fileopen" - plik będzie odtwarzany po wczytaniu strony
o "mouseover" - plik będzie odtwarzany po wskazaniu myszką
6.4. Tło dźwiękowe
<bgsound src="ścieżka dostępu do pliku dźwiękowego" />
Dla tego znacznika moŜliwe są dodatkowe atrybuty:
1. Ilość powtórzeń:
<bgsound src="ścieżka dostępu do pliku dźwiękowego" loop="n" />
gdzie "n" oznacza ilość powtórzeń (dla loop="infinite"" jest to nieskończoność).
2. Poziom głośności:
<bgsound src="ścieżka dostępu do pliku dźwiękowego" volume="v" />
gdzie "v" oznacza poziom głośności (od "-10000" do "0").
3. Balans głośników (w przypadku dźwięku stereofonicznego):
<bgsound src="ścieżka dostępu do pliku dźwiękowego" balance="b" />
3 z 4
Projekt „Integracja dla samodzielności”
współfinansowany jest przez Unię Europejską
w ramach Europejskiego Funduszu Społecznego
Warszawskie Centrum Pomocy Rodzinie
ul. Rakowiecka 21, 02-517 Warszawa, tel: 646-53-13, 646-53-15, 646-18-11, 646-52-54
fax: w. 102, [email protected], www.wcpr.pl
gdzie "b" oznacza balans między głośnikami (od "-10000" do "+10000").
Dźwięk w tle ucichnie, jeŜeli przejdziemy na inną stronę. Aby stworzyć prawdziwy podkład
muzyczny, który jest odgrywany przez cały czas, podczas przechodzenia pomiędzy stronami
serwisu, powinniśmy umieścić tło dźwiękowe na osobnej stronie, a następnie odwołać się do
niej poprzez następujący odsyłacz:
<a target="muzyka" href="ścieŜka do strony z muzyką">Włącz podkład muzyczny</a>
4 z 4
Projekt „Integracja dla samodzielności”
współfinansowany jest przez Unię Europejską
w ramach Europejskiego Funduszu Społecznego