tutaj

Transkrypt

tutaj
Znacznik <a> definiuje tzw. kotwicę, a więc miejsce, z którym skojarzono jakieśmiejsce w dokumencie HTML, plik
lub adres strony internetowej. Znacznik ten posiada wiele argumentów, jednak do najważniejszych należy zaliczyć:
1. href – tworzy link do innego dokumentu, strony lub pliku (wskazuje ich adres)
2. name – tworzy zakładkę przenoszącą nas do określonego miejsca w bieżącym dokumencie HTML.
Linki tworzone za pomocą znacznika <a> mają najczęściej postać tekstu lub grafiki (zdjęcie, element graficzny itp.).
LINKI TEKSTOWE
PRZYKŁAD 1. Link tekstowy do innej strony internetowej
Zadanie: Chcemy, aby pod naszym artykułem znalazł się odnośnik do strony, gdzie czytelnik odnajdzie więcej
informacji na dany temat.
Kod:
<p> ... Więcej na ten temat czytaj na
<a href="http://www.onet.pl" target="_blank">Portalu Onet</a>.
Działanie: W wybranym przez nas miejscu (na końcu artykułu) wyrażenie “Portalu Onet” stanie się linkiem do
adresu wskazanego po argumencie href. Zaleca się kopiować do niego dokładny adres strony internetowej do jakiej
się odwołujemy.
PRZYKŁAD 2. Link tekstowy do pliku sznurki.doc
Zadanie: Chcemy do naszego artykułu dołączyć plik sznurki.doc, w którym czytelnik odnajdzie dodatkowe
informacje na dany temat. W tym celu MUSIMY umieścić plik sznurki.doc w tym samym katalogu co nasz plik
HTML.
Kod:
<p> ... Więcej na ten temat czytaj <a href="sznurki.doc">TUTAJ</a> (plik .doc, 120 kB).
Działanie: W wybranym przez nas miejscu wyrażenie “TUTAJ” stanie się linkiem do pliku wskazanego po
argumencie href. Plik ten zostanie zapisany lub otwarty po odpowiedniej decyzji internauty. Zaleca się podawać typ
pliku i jego wielkość w nawiasie.
PRZYKŁAD 3. Link tekstowy do wybranego miejsca na bieżącej stronie.
Zadanie: Chcemy utworzyć krótki spis treści, w którym umieścimy linki do poszczególnych nagłówków w naszym
tekście. Użytkownik zamiast przewijać stronę może automatycznie przenieść się w żądane miejsce.
Kod:
<a href="#R1">Rozdział 1</a><br />
<a href="#R2">Rozdział 2</a><br />
<a href="#R2">Rozdział 3</a><br /><br />
<h2><a name="R1">Rozdział 1</h2>
<p>treść rozdziału 1</p>
<h2><a name="R2">Rozdział 2</h2>
<p>treść rozdziału 2</p>
<h2><a name="R3">Rozdział 3</h2>
<p>treść rozdziału 3</p>
PRZYKŁAD 4. Link tekstowy – e-mail
<p>
<a href="mailto:[email protected]?Subject=Kontakt">
Napisz do nas!!!</a>
</p>
PROBLEM
Współczesne przeglądarki w różnorodny sposób wyświetlać mogą linki tekstowe. Domyślnie można spodziewać
się następujących ustawień:
•
•
•
Link nie odwiedzony – podkreślenie, kolor niebieski
Link odwiedzony – podkreślenie, kolor fioletowy
Link aktywny – podkreślenie, kolor czerwony.
Aby zapanować nad efektami kolorów i dekoracji linków na naszej stronie powinniśmy w sekcji head umieścić
definicję CSS, pozwalającą na szczegółowe określenie spososbu zachowania się linków. Metoda ta daje bardzo
dobre efekty wizualne. Zapoznajmy się z przykładem.
<head>
<style type="text/css">
a:link {color: red; background­color: yellow; text­decoration: underline;}
a:visited {color: grey; background­color: yellow; text­decoration: none;}
a:hover {color: green; background­color: yellow; text­decoration: blink;}
a:active {color: black}
</style>
</head>
<body>
<p><b><a href="http://www.onet.pl" target="_blank">ONET.PL</a></b></p>
</body>
</html>
LINKI OPARTE NA GRAFICE
PRZYKŁAD 4. Link graficzny do pliku tekstowego sznurki.doc
W poprzedniej części chcieliśmy (przykład 2), aby czytelnik na naszej stronie miał dostęp do pliku sznurki.doc i
stworzyliśmy w tym celu link tekstowy. Teraz założenie jest podobne, jednak chcemy, aby użytkownik mógł pobrać
ten sam plik naciskając na ikonkę znaną z plików MS Word.
W tym celu MUSIMY umieścić plik sznurki.doc w tym samym katalogu co nasz plik HTML oraz plik word.gif
(przedstawiający ikonkę) w katalogu grafika, będącego podkatalogiem dla naszego dokumentu HTML
Kod:
<p> ... Kliknij na ikonę aby pobrać plik z dalszymi informacjami >> <a href="sznurki.doc"><img src=”grafika/word.gif” border=”0”></a> (plik .doc, 120 kB)
W podobny sposób zadziała odniesienie każdego innego obrazka do innych stron internetowych.
Jest to najpopularniejsza metoda tworzenia linków w menu graficznym. Tworząc takie menu musimy przygotować
odpowiednią grafikę oraz umieścić ją w tabeli.
Na przykład <a href="http://www.onet.pl"><img src=”grafika/word.gif” border=”0”></a>
−
ta sama ikona odniesie nas teraz do portalu ONET.
INNE ISTOTNE FUNKCJE I PRZYDATNE APLIKACJE
http://www.phpform.org/ - formularze na stronę www w kilka chwil
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_lists_ordered – listy numerowane w HTML
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_lists_unordered – listy nienumerowane w HTML
http://www.gimpuj.info/index.php?action=download – darmowy super program do grafiki GIMP
http://hotpot.uvic.ca/setup_hotpot_6254.exe – HOT POTATOES – quizy, krzyżówki itd – zapis w HTML!!!
http://www.hotpot.hojnacki.net/ - polska strona HOT POTATOES