Odsyłacze i multimedia


ODSYŁACZE

do podstrony

<a href="ścieżka dostępu np.: ../index.html" title="dymek z podpowiedzią" >opis</a>
Więcej informacji znajdziesz na stronie Kurs HTML

do strony zewnętrznej

<a href="http://adres strony">opis</a>

do etykiety = kotwica, uchwyt, wskaźnik

<a href="(ścieżka do strony)#nazwa_etykiety">opis odsyłacza</a>
powyższy przykład należy traktować jak element ze spisu treści który po kliknięciu przenosi nas do odpowiedniego rozdziału o nazwie „nazwa etykiety”. Pamiętajcie, że należy dodać do miejsca docelowego poniższy kod:
<a name="nazwa_etykiety"></a>
 element do którego będziemy się przenosić, musi być przez nas oznaczony „nazwa etykiety”

pocztowy

<a href="mailto:adres e-mail">opis</a>
 Po kliknięciu takiego odnośnika, list nie zostanie wysłany natychmiastowo, lecz nastąpi otwarcie domyślnego programu pocztowego użytkownika (np. Outlook Express), w którym będzie on mógł wpisać treść listu, a potem go wysłać do wskazanego adresata, którego e-mail pojawi się automatycznie.
Dodatkowe parametry odsyłacza pocztowego

List e-mail będzie miał podany przez nas tytuł

<a href="mailto:adres e-mail?subject=tytuł listu">opis</a>

Kopia listu będzie wysłana do podanej osoby

<a href="mailto:adres e-mail?cc=adres e-mail gdzie wysłać kopię">opis</a>

Ukryta kopia (żaden inny odbiorca listu nie zobaczy adresu podanego w bcc)

<a href="mailto:adres e-mail?bcc=adres e-mail gdzie wysłać ukrytą kopię">opis</a>

W treści listu pojawi się podany tekst

<a href="mailto:adres e-mail?body=tu wpisz tekst">opis</a>

List zostanie wysłany do kilku podanych adresatów

<a href="mailto:pierwszy adres e-mail;drugi adres e-mail;trzeci adres e-mail">opis</a>

Połączenie powyższych elementów

<a href="mailto:pierwszy adres e-mail;drugi adres e-mail;trzeci adres 
e-mail?subject=tytuł listu&amp;cc=adres e-mail gdzie wysłać 
kopię&amp;bcc=adres e-mail gdzie wysłać ukrytą kopię&amp;body=tutaj 
wpisz treść listu">opis</a>

do FTP

<a href="ftp://ftp.adres">opis</a>
Więcej informacji znajdziesz na stronie Kurs HTML

odsyłacz obrazkowy

<a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" /></a>

komunikatory internetowe

opis TUTAJ

Zadania:

Wykonaj zadania ze strony http://slawekrokicki.vizz.pl/technikum_cwiczenia/cwiczenia/html/cwiczenie_4.html

MULTIMEDIA

obrazek

<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y" border="n"
align="rodzaj" hspace="x" vspace="y" />
src - ścieżka dostępu do pliku
alt - krótka informacja, która pojawi się w przypadku, kiedy obrazek 
      nie zostanie wyświetlony 
width, height - gdzie jako "x" oraz "y" należy wpisać odpowiednio: 
      długość i wysokość obrazka w pikselach lub %.
border - obramowanie, gdzie jako "n" należy wpisać grubość obramowania (w pikselach).
align - wyrównanie w poziomie:
  • left” – obrazek ustawiony po lewej stronie względem otaczającego go tekstu
  • right” – obrazek po prawej stronie względem tekstu
  • top” – tekst ustawiony na górze obrazka
  • middle” – tekst ustawiony na średniej wysokości względem obrazka
  • bottom” – tekst ustawiony na dole obrazka (domyślnie)

hspace, vspace – odległość obrazka od tekstu, gdzie „x” oznacza poziomą odległość w pikselach, a „y” pionową odległość (również w pikselach).

 MARQUEE

 Znacznik blokowy w HTML-u pozwalający na animację tekstu, grafiki, bądź kilku obrazów. Został wprowadzony jako rozszerzenie interpretowane przez przeglądarkę Internet Explorer i nie był nigdy częścią oficjalnego standardu HTML, nie został też uwzględniony w XHTML-u. Podobny do jego użycia efekt można uzyskać za pomocą Java Scriptu.
<marquee scrollamount="2" style="background-color:red">Przesuwający się o dwa piksele 
tekst na czerwonym tle</marquee>

Znacznik <marquee> może przybrać następujące charakterystyczne dla siebie atrybuty:

  • behavior – określa tryb przesuwania się tekstu na ekranie. Dopuszczalne wartości: scroll, slide oraz alternate.
  • bgcolor – określa kolor tła znacznika
  • direction – definiuje kierunek przesuwania się tekstu. Dopuszczalne wartości: left, right, up, down.
  • loop – określa ilość powtórzeń
  • scrollamount=” ” – skok o (…) pikseli
  • scrolldelay=” ” – opóźnienie tekstu

Oprócz tego znacznik może przybrać inne atrybuty charakterystyczne innych znaczników (np. class, style, width, height, hspace, vspace, lang, id). Znacznik wymaga „zamknięcia” czyli </marquee>.

 

Osadzenie pliku

UWAGA!
Polecenie EMBED nie wchodzi w skład specyfikacji HTML 4.01!

<embed src="ścieżka dostępu do pliku" width="x" height="y" />

width, height – gdzie jako „x” oraz „y” należy wpisać odpowiednio: długość i wysokość wyświetlanego obrazu   wtyczki (ang. plug-in), czyli okna na stronie w którym odtwarzany będzie plik.
Jeśli nie podamy 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.

Można wykorzystać następujące pliki multimedialne:

  • *.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

Polecenie to współpracuje z różnymi wtyczkami (atrybut pluginspage="..."), dzięki którym teoretycznie może odtwarzać nowe formaty plików multimedialnych. Wtyczka (czyli plug-in) to specjalny niewielki program, który można doinstalować do przeglądarki, zwiększając jej możliwości. Po wywołaniu polecenia, wprost na stronie powinno zostać wyświetlone okno (o podanych rozmiarach), w którym będzie odtwarzany wskazany plik.

Należy pamiętać, że pliki multimedialne mają zwykle duże rozmiary, dlatego najlepiej na początku strony umieścić tekst, a dopiero na końcu polecenie <embed />. W takim przypadku w pierwszej kolejności wczyta się tekst.

W przypadku niektórych plików można dodatkowo użyć atrybutów:

Automatyczny start odtwarzania: autostart=”

  • true” – plik zostanie automatycznie odtworzony, zaraz po wczytaniu strony
  • false” – plik nie zostanie odtworzony po wczytaniu (trzeba go uruchomić „ręcznie” – poprzez wyświetlony panel kontrolny)

Ukrycie obrazu: hidden=”

  • true” – obraz zostanie ukryty
  • false” – obraz będzie wyświetlony na ekranie.

Ukrycie panelu kontrolnego: showcontrols=”

  • 0” – panel zostanie ukryty
  • 1” – panel będzie wyświetlony na ekranie

Ukrycie paska wyświetlania informacji: showdisplay=”

  • 0” – pasek zostanie ukryty
  • 1” – pasek będzie wyświetlony na ekranie

Powtarzanie: loop=”

  • true” – powtarzanie w nieskończoność
  • false” – brak powtarzania

Poziom głośności (w przypadku plików dźwiękowych): volume=”     od „-10000” do „0”     

Balans głośników (w przypadku stereofonicznego pliku dźwiękowego):

balance=”    od „-10000” do „+10000”   

Adres do pobrania wtyczki (ang. plug-in): pluginspage=”…

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.:

  • http://www.apple.com/quicktime/download/” – wtyczka *.mov (QuickTime)
  • http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” – wtyczka *.swf (Macromedia Flash)
  • 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.).

Polecenie <embed /> sprawia wiele kłopotów nawet w przeglądarkach, które je interpretują! Ponadto należy pamiętać, że pliki multimedialne mają zwykle bardzo duże rozmiary, a więc wczytywanie takiej strony w Internecie, może trwać potwornie długo!

Aby umożliwić dotarcie do plików multimedialnych w przeglądarkach, które nie obsługują polecenia <embed />, wskazane jest umieszczenie na stronie znaczników:

<noembed>Treść alternatywna</noembed>
Wewnątrz nich wpisuje się treść, która powinna pojawić się, jeśli polecenie EMBED nie może zostać zinterpretowane.
<noembed>
Niestety Twoja przeglądarka nie odtwarza plików multimedialnych,
ale <a href="ścieżka dostępu do pliku">tutaj</a>
możesz zobaczyć ten plik!
</noembed>

Możliwe jest również bezpośrednie osadzenie na stronie dokumentu PDF. Jest to format, który stał się powszechnym standardem publikacji elektronicznych. Umożliwia m.in. różnorodne formatowanie tekstu, wstawianie grafiki i inne. Dokumenty PDF można stworzyć np. przy użyciu programu wbudowanego w pakiet biurowy WordPerfect Office 2000, natomiast aby przeglądać pliki PDF, trzeba dysponować darmowym programem Adobe Reader.

Aby można było osadzić na stronie WWW plik PDF, użytkownik oglądający nasz serwis musi mieć zainstalowany program Adobe Reader.

Dodatkowo należy pamiętać o podaniu rozmiarów obiektu EMBED (atrybuty width="..." oraz height="..."), ponieważ jeśli tego nie zrobimy, w MSIE otrzymamy zbyt małe okienko (uniemożliwiające czytanie), natomiast w Netscape Navigatorze trzeba będzie kliknąć prawym przyciskiem myszki i wybrać polecenie „Open”.

Plik AVI

UWAGA!
Polecenie dynsrc nie wchodzi w skład specyfikacji HTML 4.01!

<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:

Ilość powtórzeń: loop=”ilość” (dla loop="infinite" jest to nieskończoność).

Sposób rozpoczęcia odtwarzania: start=”

  • fileopen” – plik będzie odtwarzany po wczytaniu strony
  • mouseover” – plik będzie odtwarzany po wskazaniu myszką

Polecenie IMG DYNSRC=”…” sprawia kłopoty nawet w Microsoft Internet Explorerze! Ponadto nie jest interpretowane przez inne przeglądarki, dlatego zaleca się raczej stosowanie <embed />.

Tło dźwiękowe

UWAGA!
Polecenie bgsound nie wchodzi w skład specyfikacji HTML 4.01!

<bgsound src="ścieżka dostępu do pliku dźwiękowego" />

Dostępne atrybuty:

Powtarzanie: loop=”ilość” (dla loop="infinite" jest to nieskończoność).

Poziom głośności (w przypadku plików dźwiękowych): volume=”     od „-10000” do „0”     

Balans głośników (w przypadku stereofonicznego pliku dźwiękowego):

balance=”    od „-10000” do „+10000”   

 

Uniwersalny sposób odtwarzania plików

 

Zadania:

Wykonaj zadania ze strony http://slawekrokicki.vizz.pl/technikum_cwiczenia/cwiczenia/html/cwiczenie_6.html