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śla ramy 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ć
atrybut border=”1”

Jeśli nie zastosujesz atrybutu border lub nadasz
mu wartość „0” krawędzie tabeli będą
niewidoczne.


Slide 22

Nagłówek tabeli
• Zazwyczaj chcemy by nagłówek tabeli się
wyróżniał. Na stronie www możemy to
uzyskać stosując zamiast znacznika


Slide 23

Modyfikowanie tabeli
• Określanie szerokości komórki lub tabeli
Wewnatrz znacznika

znacznik

Nagłówek

lub

wpisz width=”n” n szerokość komórki wyrażona w pixelach  Slide 24 Modyfikowanie tabeli • Wyrównywanie tabeli do środka strony Wewnatrz znacznika użyj atrybutu align = ”center” Jeżeli chcemy umieścić tabelę z lewej lub prawej strony również stosujemy atrybut align z wartościami ”right” ”left” Slide 25 Modyfikowanie tabeli • Określanie koloru komórki lub tabeli Wewnatrz znacznika lub wpisz atrybut bgcolor= ”wybrany kolor” Slide 26 Modyfikowanie tabeli • Określanie odstępu między komórkami a obramowaniem komórki Wewnatrz znacznika wpisz atrybut cellpadding= ”n” • Określanie odstępu między komórkami a ich krawędzią Wewnatrz znacznika wpisz atrybut cellspacing= ”n” Domyślnie odstępy miedzy komórkami a obramowaniem i krawedzią wynoszą 2 px. Slide 27 Modyfikowanie tabeli • Łączenie komórek leżących w sąsiednich kolumnach 1. Kiedy dojdziesz do miejsca w którym chcesz zdefiniować komórkę szeroką na kilka kolumn wpisz znacznik  colspan=”n” Gdzie n określa na ile kolumn komórka ma być szeroka  Slide 28 Modyfikowanie tabeli • Łączenie komórek leżących w sąsiednich wierszach 1. Kiedy dojdziesz do miejsca w którym chcesz zdefiniować komórkę zajmującą kilka wierszy wpisz znacznik rowspan=”n” > Gdzie n określa na ile wierszy ma zajmować komórka  Slide 29 Ćwiczenie - tabele2  Slide 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 z odpowiednimi atrybutami. Np.. Slide 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ć. Slide 32 Aby wybrać, które zewnętrzne krawędzie powinny być wyswietlane • Wewnątrz znacznika Tekst  po niezbędnym atrybucie border wpisz frame=”polożenie” Gdzie położenie to jedna z wymienionych w tabeli wartości Slide 33 Slide 34 Aby wybrać, które z wewnętrznych krawędzie powinny być widoczne • Wewnątrz znacznika po niezbędnym atrybucie border wpisz rules=”obszar” Gdzie obszar to jedna z wymienionych w tabeli wartości Slide 35 Directory ×