Elementy multimedialne na stronie

Prezentacja na temat: "Elementy multimedialne na stronie"— Zapis prezentacji:

1 Elementy multimedialne na stronie
Odsyłacze Elementy multimedialne na stronie

2 Hiperłącza Budowa Hiperłącza:
<a href= ”strona.html” >kliknij tu aby dowiedzieć się czegoś więcej o mnie.</a> Jak łatwo wywnioskować znacznikiem odpowiedzialnym za odsyłacze jest <a><a/>, wzbogacony o pewne atrybuty. I tak dla odsyłacza takim obowiązkowym atrybutem jest href=”adres” lub nazwa pliku

3 Odsyłacze Do dokumentów html, txt, doc itd
< a href=”nazwapliku.html> odsyłacz do pliku Adresy URL <a href=” Szkół </a> Adresy <a href=”mailto:

4 Odsyłacze względne i bezwzględne
Odsyłacz bezwzględny zawiera dokładny adres URL do danego pliku i wygląda tak: <a href=” to jest odnośnik do pliku</a> Odnośnik wzgledny ma następującą postać: <a href=”nazwa_pliku.html”> To jest odnośnik względny</a>

5 Grafika na stronie WWW Znacznik <img> - umożliwia deklarację w dowolnym miejscu na stronie. <img src= ”nazwa pliku”> Ma on wiele atrybutów: Np.: <img src="../../pictures/deal.jpg" alt=" " align=" " border=0 height=140 width=121/>

6 Należy również pamiętać, aby najlepiej wszystkie obrazki były zapisane w jednym z trzech formatów:
GIF - dla rysunków składających się z mniej niż 256 kolorów. JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości. PNG - pozwala zapisywać z bardzo dobrą jakością. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. Niestety zwłaszcza ta ostatnia własność może nie być interpretowana przez starsze przeglądarki (np. MSIE 6.0). Nie należy stosować formatu BMP, gdyż ma on bardzo słabą kompresję i w związku z tym grafika zapisana w tym formacie ma dużo większą objętość.

7 <img src=". /. /pictures/deal
<img src="../../pictures/deal.jpg" alt=" " border=0 height=140 width=121> src  określa ścieżkę dostępu do pliku zawierającego obrazek alt  za pomocą jego można określić tekst, jaki będzie wyświetlany w oknie przeglądarki jako etykieta obrazka. border  określa obramowanie obrazka w pixelach height, width  określa wysokość i szerokość w specyfikacji jednak zaznaczono, żeby w miarę mozliwości unikać ich stosowania.

8 Położenie grafiki w oknie przeglądarki
Wstaw dowolny obrazek na stronę <img src=”obrazki/obrazek.jpg”/> Obrazek automatycznie wyświetlany jest w oknie przeglądarki w lewym górnym rogu. Aby wyśrodkować obrazek względem strony wystarczy użyć znacznika <center> <center> <img src=”obrazki/obrazek.jpg”> </center>

9 <img src=”” align=” ”/>
Atrybut align Do określania położenia względem krawędzi strony można uzyć atrybutu znacznika <img src=”” align=” ”/> definiując atrybut align=”left” dla danego obrazka sprawimy, że pojawi się on z lewej strony obrazka definiując atrybut align=”right” dla danego obrazka sprawimy, że pojawi się on z prawej strony obrazka

10 align = ”top” tekst ustawi się przy górnej części obrazka
align = ”middle” tekst ustawi się w środkowej części obrazka align = ”bottom” tekst ustawi się w środkowej części obrazka

11 Ćwiczenie Umieść na stronie 3 obrazki, jeden normalnej wielkości, drugi dwukrotnie mniejszy, trzeci trzykrotnie mniejszy oraz wyśrodkuj je na stronie.

12 Jeśli z atrybutem align użyte zostaną atrybuty: vspace i hspace można określić odległość obrazka od tekstu. Odległość podajemy w pikselach. vspace = ”” odległość w pionie hspace = ”” odległość w poziomie Np.Obrazek z prawej strony tekstu: <img src = ”obrazki/obrazek.gif” align=”right” vspace = ”3” hspace =”10” border = ”3”>

13 Aby uzyskać pożądany efekt pojawienia się obrazka obok tekstu znacznik <img> musi być zdeklarowany w dokumencie html przed tekstem

14 Wyrównywanie względem obrazka w tej samej linii
wartość top – wyrównywanie względem górnej linii obrazka wartość middle – wyrównywanie względem środka linii obrazka wartość bottom – wyrównywanie względem górnej linii obrazka

15 Graficzne odsyłacze Nasz obrazek hiperłączem do naszej strony:
<a href= src=”obrazek.jpg” alt=”Odwiedź stronę naszej szkoły”/></a>

16 ATRYBUT target Atrybut definiuje okno docelowe dla otwieranego dokumentu. Wartości atrybutu: • _blank nowe, nienazwane okno • _parent okno macierzyste lub okno rodzica • _self - (wartość domyślna) okno, z którego nastąpiło odwołanie - standardowe zachowanie • _top okno główne, likwidowane są wszelkie inne ramki • nazwa okno o nazwie podanej przez użytkownika

17 Przykładowe zastosowania:
odnośnik otwiera się w nowym oknie: <a href=" target="_blank"> Zespół Szkół</a>

18 Zmiana kolorów Łączy <body vlink=”kolor” - link
alink=”kolor"> link odwiedzony

19 TABELE Konstrukcja tabeli: <table> Określa ramy tabeli </table> <tr> określamy wiersz tabeli</tr> <td> określamy komórkę tabeli </td>

20 Ćw. Prosta tabela – stwórz tabelę składającą się z 2 wierszy i dwóch kolumn

21 <table border="1">
Przy znaczniku <table> musi się pojawić atrybut border=”1” <table border="1"> Jeśli nie zastosujesz atrybutu border lub nadasz mu wartość „0” krawędzie tabeli będą niewidoczne.

22 <th>Nagłówek</th>
Nagłówek tabeli Zazwyczaj chcemy by nagłówek tabeli się wyróżniał. Na stronie www możemy to uzyskać stosując zamiast znacznika <td> znacznik <th> <th>Nagłówek</th>

23 n szerokość komórki wyrażona w pixelach
Modyfikowanie tabeli Określanie szerokości komórki lub tabeli Wewnatrz znacznika <table> lub <td> wpisz width=”n” n szerokość komórki wyrażona w pixelach

24 Modyfikowanie tabeli Wyrównywanie tabeli do środka strony
Wewnatrz znacznika <table> użyj atrybutu align = ”center” <table border="1" align="center" > Jeżeli chcemy umieścić tabelę z lewej lub prawej strony również stosujemy atrybut align z wartościami ”right” ”left”

25 Modyfikowanie tabeli Określanie koloru komórki lub tabeli
Wewnatrz znacznika <table> lub <td> wpisz atrybut bgcolor= ”wybrany kolor” <table border="1" bgcolor="blue">

26 Modyfikowanie tabeli Określanie odstępu między komórkami a obramowaniem komórki Wewnatrz znacznika <table> wpisz atrybut cellpadding= ”n” Określanie odstępu między komórkami a ich krawędzią atrybut cellspacing= ”n” Domyślnie odstępy miedzy komórkami a obramowaniem i krawedzią wynoszą 2 px.

27 Gdzie n określa na ile kolumn komórka ma być szeroka
Modyfikowanie tabeli Łączenie komórek leżących w sąsiednich kolumnach Kiedy dojdziesz do miejsca w którym chcesz zdefiniować komórkę szeroką na kilka kolumn wpisz znacznik <td i dodaj atrybut: colspan=”n” Gdzie n określa na ile kolumn komórka ma być szeroka

28 Gdzie n określa na ile wierszy ma zajmować komórka
Modyfikowanie tabeli Łączenie komórek leżących w sąsiednich wierszach Kiedy dojdziesz do miejsca w którym chcesz zdefiniować komórkę zajmującą kilka wierszy wpisz znacznik <td i dodaj atrybut: rowspan=”n” > Gdzie n określa na ile wierszy ma zajmować komórka

29 Ćwiczenie - tabele2

30 Czcionka tekstu i tytuł tabeli
Tekst w komórce tabeli możesz formatować pod względem czcionki, jej rozmiaru czy koloru dokładnie tak, jak zwykły tekst w dokumencie HTML. Wystarczy, że użyjesz znacznika <font> z odpowiednimi atrybutami. Np.. <table> <tr> <td><font size=”2”><b>Tekst</font></b></td> </tr>

31 Modyfikowanie tabeli Wybór linii do wyświetlenia
W przypadku użycia atrybutu border pomiędzy wszystkimi komórkami pojawia się widoczna krawędź Język (X)HTML, pozwala na określenie, które zewnętrzne krawędzie powinny posiadać ramkę, jak również, które z wewnętrznych krawędzi powinny się pojawiać.

32 Aby wybrać, które zewnętrzne krawędzie powinny być wyswietlane
Wewnątrz znacznika <table> po niezbędnym atrybucie border wpisz frame=”polożenie” Gdzie położenie to jedna z wymienionych w tabeli wartości

33

34 Aby wybrać, które z wewnętrznych krawędzie powinny być widoczne
Wewnątrz znacznika <table> po niezbędnym atrybucie border wpisz rules=”obszar” Gdzie obszar to jedna z wymienionych w tabeli wartości

35