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; backgroundcolor: yellow; textdecoration: underline;} a:visited {color: grey; backgroundcolor: yellow; textdecoration: none;} a:hover {color: green; backgroundcolor: yellow; textdecoration: 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