Elementy multimedialne na stronie Odsyłacze Elementy multimedialne na stronie

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

Odsyłacze Do dokumentów html, txt, doc itd < a href=”nazwapliku.html> odsyłacz do pliku Adresy URL <a href=”http://www.dobczyce.edu.pl”>Zespół Szkół </a> Adresy e-mail <a href=”mailto: zs@dobczyce.edu.pl”>Opis</a>

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=”http://xxx.pl/nazwapliku.html”> 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>

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

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ść.

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

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>

<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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”

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

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.

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

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

Ćwiczenie - tabele2

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>

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

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

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