Transcript Obrazki i hiperłącza
Slide 1
Odsyłacze
Elementy multimedialne na
stronie
Slide 2
Hiperłącza
• Budowa Hiperłącza:
kliknij tu aby dowiedzieć
się czegoś więcej o mnie.
Jak łatwo wywnioskować znacznikiem
odpowiedzialnym za odsyłacze jest ,
wzbogacony o pewne atrybuty. I tak dla
odsyłacza takim obowiązkowym atrybutem
jest href=”adres” lub nazwa pliku
Slide 3
Odsyłacze
Do dokumentów html, txt, doc itd
• < a href=”nazwapliku.html> odsyłacz do pliku
Adresy URL
• Zespół
Szkół
Adresy e-mail
• Opis
Slide 4
Odsyłacze względne i bezwzględne
• Odsyłacz bezwzględny zawiera dokładny adres
URL do danego pliku i wygląda tak:
to jest
odnośnik do pliku
• Odnośnik wzgledny ma następującą postać:
To jest odnośnik
względny
Slide 5
Grafika na stronie WWW
• Znacznik - umożliwia deklarację w
dowolnym miejscu na stronie.
Ma on wiele atrybutów:
Np.: align=" " border=0 height=140 width=121/>
Slide 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ść.
Slide 7
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.
Slide 8
Położenie grafiki w oknie przeglądarki
• Wstaw dowolny obrazek na stronę
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
Slide 9
Atrybut align
• Do określania położenia względem krawędzi
strony można uzyć atrybutu znacznika
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
Slide 10
• align = ”top”
• align = ”middle”
• align = ”bottom”
tekst ustawi się przy
górnej części obrazka
tekst ustawi się w
środkowej części obrazka
tekst ustawi się w
środkowej części obrazka
Slide 11
Ćwiczenie
• Umieść na stronie 3 obrazki, jeden normalnej
wielkości, drugi dwukrotnie mniejszy, trzeci
trzykrotnie mniejszy oraz wyśrodkuj je na
stronie.
Slide 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:
vspace = ”3” hspace =”10” border = ”3”>
Slide 13
Aby uzyskać pożądany efekt pojawienia się
obrazka obok tekstu znacznik
musi być zdeklarowany w dokumencie html
przed tekstem
Slide 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
Slide 15
Graficzne odsyłacze
• Nasz obrazek hiperłączem do naszej strony:
src=”obrazek.jpg” alt=”Odwiedź stronę naszej
szkoły”/>
Slide 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
Slide 17
Przykładowe zastosowania:
• • Przykład 1:
• odnośnik otwiera się w nowym oknie: href="http://dobczyce.edu.pl/"
target="_blank"> Zespół Szkół
Slide 18
Zmiana kolorów Łączy
• vlink=”kolor” - link
• alink=”kolor"> link odwiedzony
Slide 19
TABELE
Konstrukcja tabeli:
określamy wiersz tabeli
określamy komórkę tabeli
Slide 20
Ćw. Prosta tabela – stwórz tabelę składającą się
z 2 wierszy i dwóch kolumn
Slide 21
• Przy znaczniku musi się pojawić lub
Odsyłacze
Elementy multimedialne na
stronie
Slide 2
Hiperłącza
• Budowa Hiperłącza:
kliknij tu aby dowiedzieć
się czegoś więcej o mnie.
Jak łatwo wywnioskować znacznikiem
odpowiedzialnym za odsyłacze jest ,
wzbogacony o pewne atrybuty. I tak dla
odsyłacza takim obowiązkowym atrybutem
jest href=”adres” lub nazwa pliku
Slide 3
Odsyłacze
Do dokumentów html, txt, doc itd
• < a href=”nazwapliku.html> odsyłacz do pliku
Adresy URL
• Zespół
Szkół
Adresy e-mail
• Opis
Slide 4
Odsyłacze względne i bezwzględne
• Odsyłacz bezwzględny zawiera dokładny adres
URL do danego pliku i wygląda tak:
to jest
odnośnik do pliku
• Odnośnik wzgledny ma następującą postać:
To jest odnośnik
względny
Slide 5
Grafika na stronie WWW
• Znacznik - umożliwia deklarację w
dowolnym miejscu na stronie.
Ma on wiele atrybutów:
Np.: align=" " border=0 height=140 width=121/>
Slide 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ść.
Slide 7
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.
Slide 8
Położenie grafiki w oknie przeglądarki
• Wstaw dowolny obrazek na stronę
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
Slide 9
Atrybut align
• Do określania położenia względem krawędzi
strony można uzyć atrybutu znacznika
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
Slide 10
• align = ”top”
• align = ”middle”
• align = ”bottom”
tekst ustawi się przy
górnej części obrazka
tekst ustawi się w
środkowej części obrazka
tekst ustawi się w
środkowej części obrazka
Slide 11
Ćwiczenie
• Umieść na stronie 3 obrazki, jeden normalnej
wielkości, drugi dwukrotnie mniejszy, trzeci
trzykrotnie mniejszy oraz wyśrodkuj je na
stronie.
Slide 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:
vspace = ”3” hspace =”10” border = ”3”>
Slide 13
Aby uzyskać pożądany efekt pojawienia się
obrazka obok tekstu znacznik
musi być zdeklarowany w dokumencie html
przed tekstem
Slide 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
Slide 15
Graficzne odsyłacze
• Nasz obrazek hiperłączem do naszej strony:
src=”obrazek.jpg” alt=”Odwiedź stronę naszej
szkoły”/>
Slide 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
Slide 17
Przykładowe zastosowania:
• • Przykład 1:
• odnośnik otwiera się w nowym oknie: href="http://dobczyce.edu.pl/"
target="_blank"> Zespół Szkół
Slide 18
Zmiana kolorów Łączy
• alink=”kolor"> link odwiedzony
Slide 19
TABELE
Konstrukcja tabeli:
Slide 20
Ćw. Prosta tabela – stwórz tabelę składającą się
z 2 wierszy i dwóch kolumn
Slide 21
• Przy znaczniku
znacznik | Nagłówek |
---|
wpisz width=”n” n szerokość komórki wyrażona w pixelach Slide 24 Modyfikowanie tabeli • Wyrównywanie tabeli do środka strony Wewnatrz znacznika
|