Odsyłacze (hiperłącza) Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do innych stron, które znajdują się w światowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzieć, gdzie znajdują się te strony - ważne jest, aby miał do nich łatwy dostęp. Na tym polega istota hipertekstu - jakiś temat może być opisany za pomocą stron tworzonych przez różnych autorów, mieszkających w różnych krajach, nawet często nie znających się wzajemnie. Czytelnik jakiegoś dokumentu będzie po prostu za pomocą kliknięć myszką na odsyłaczach przenosić się do różnych miejsc w Internecie, skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do Francji.
Możemy mówić o : hiperłączach tekstowych hiperłączach graficznych mapach odsyłaczy kotwicach Odsyłacze tekstowe <a href= strona.html >Kliknij tutaj, aby obejrzeć moją stronę</a> znacznikiem odpowiadającym za odsyłacze jest <a> </a> z atrybutami. Atrybutem obowiązkowym jest: href= adres lub nazwa pliku określający do jakiego dokumentu lub miejsca ma prowadzić odnośnik
Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <a href="... "> i </a> Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy to jednak zmienić). w powyższym przykładzie będzie to: Kliknij tutaj, aby obejrzeć moją stronę Gdy przesuniemy kursor myszki nad odsyłacz, w pasku stanu przeglądarki zobaczymy kryjący się pod tekstem adres internetowy. Kliknięcie na nim spowoduje skok do strony.
przykłady odsyłaczy <a href= nazwa_pliku.html >Opis</a> <a href= obrazek.gif >Opis</a> odwołanie do pliku zawierającego stronę odwołanie do konkretnego obrazka <a href= http://www.helion.com.pl>opis</a> <a href= http://www.helion.com.pl/ nazwa_pliku.html >Opis</a> <a href= ftp://www.helion.com.pl >Opis</a> odwołanie do innej witryny dostępnej w sieci odwołanie do serwera FTP, na którym możesz przechowywać swoje programy lub inne pliki <a href= news:pl.comp.www >Opis</a> odwołanie do serwera grupy dyskusyjnej tylko to jest widoczne na twojej stronie internetowej
odsyłacz uruchamiający pocztę elektroniczną Bardzo często autorzy stron, którzy dysponują swoim własnym adresem, wstawiają go na stronie, prosząc o uwagi czytelnika. Jest to dobry obyczaj, który daje czytelnikowi łatwy kontakt z autorem. Stosujemy tutaj na przykład następujące polecenie: <a href="mailto:autor@jego.adres">imię i nazwisko</a> Napis mailtodaje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną. (Internet Explorer uruchomi np. Outlook Express, jeśli jest on domyślnym programem pocztowym). Aby taki odsyłacz zadziałał, osoba która go klika musi mieć na swoim komputerze skonfigurowane oprogramowanie do obsługi poczty e-mail <a href="mailto:autor@jego.adres?subject=temat wiadomości">imię i nazwisko</a> po kliknięciu tego odsyłacza zostanie otwarte okno nowej wiadomości, a w polu temat znajdzie się tekst temat wiadomości
Fragment w postaci: Jeśli masz jakieś uwagi, napisz do <a href= "mailto:m.hilczer@mitr.p.lodz.pl">autora strony</a> zostanie przedstawiony w przeglądarce następująco: Jeśli masz jakieś uwagi, napisz do autora strony Przesunięcie kursora myszki nad tekst "autora strony" wyświetli w pasku stanu adres poczty elektronicznej, kliknięcie myszką natomiast spowoduje uruchomienie modułu pocztowego, w którym czytelnik strony będzie mógł zredagować list do autora.
Inne atrybuty znacznika <a> </a> target określa sposób otwierania odnośnika Po kliknięciu odnośnika z atrybutem target, odnośnik ten może zostać otwarty na cztery sposoby: target= _blank zostanie otwarte nowe okno przeglądarki, w którym zostanie wyświetlony żądany dokument target= _self target= _parent target= _top wartość domyślna, dokument zostanie wyświetlony w tym samym oknie przeglądarki zostanie dokonana zamiana dokumentu nadrzędnego dla bieżącego dokumentu zostanie ponownie wczytana zawartość okna i wyświetlony nowy dokument (zostanie dokonana zmiana na miejscu dokumentu pierwszego w hierarchii skoków) ważny jest target z wartością blank inne wartości są dla stron zbudowanych z wykorzystaniem ramek
Inne atrybuty znacznika <a> </a> titlepozwala na dołączenie do odnośnika dodatkowego opisu, który będzie widoczny po umieszczeniu kursora myszy nad opisem hiperłącza <a href= http://mitr.p.lodz.pl target= _blank title= oficjalna strona Marii Hilczer >Maria Hilczer</a> Odsyłacz (Hiperłącze) graficzny to hiperłącze plus obrazek <a href= http://mitr.p.lodz.pl/moja_strona.http > <img src= ścieżkadostępu do obrazka alt= obrazek width= 94 height= 19 /></a>
Mapa odsyłaczy to inaczej obrazek, którego różne części są odsyłaczami do innych miejsc Programy, które ułatwiają budowę mapy odsyłaczy są m.in. na serwerze http://www.tucows.com/windows CoffeeCup Image Mapper CuteMAP MapEdit Imagemap Editing Software HTML Map Designer Pro Za deklarację mapy odsyłaczy odpowiada znacznik <map> </map> zawiera on obowiązkowy atrybut name= wykorzystywany dalej do osadzania obrazka z obszarami aktywnymi za pomocą znacznika <img />
wewnątrz <map> </map> znajduje się znacznik <area /> z atrybutami: href= definiuje adres, do którego ma prowadzić obszar aktywny na mapie odsyłaczy cords= definiuje współrzędne krańcowych punktów aktywnego obszaru shape= określa kształt aktywnego obszaru i przyjmuje wartości circle koło rect kwadrat polygon wielokąt title= odpowiednik atrybutu alt (zastępczy tekst dla przeglądarek nieobsługujących grafiki)
W praktyce: należy otworzyć obrazek w programie graficznym i odczytać współrzędne obszaru aktywnego obrazek 253,136 332, 223 obszar aktywny potrzebujemy współrzędne lewego górnego i prawego dolnego rogu można wykorzystać darmowy Paint.Net <body> <map name= test > <area href= http://onet.pl shape= rect coords= 253,136,332,223 /> </map> <img src= obrazek.gif border= 0 height= 346 width= 324 usemap= #test /> </body> wywołanie obrazka nie musi być pod kodem definiującym mapę odsyłaczy. Ważne to nadać nazwę mapie i potem tę samą nazwę wywołać w znaczniku obrazka dla obszaru w kształcie koła określamy środek koła i jego promień wielokąta współrzędne każdego wierzchołka
Kotwice pozwala odwołać się do konkretnego miejsca w dokumencie ma to sens zwłaszcza przy bardzo długich dokumentach można więc odnieść się do konkretnego pliku i do zadeklarowanej kotwicy przeglądarka otworzy wskazany plik i przewinie dokument tak, aby linia zawierająca kotwicę była możliwie najbliżej górnej krawędzi okna przeglądarki Deklaracja kotwicy: <a id= nazwa_kotwicy >Fragment</a> tekstu dokumentu <a id= nazwa_kotwicy ></a> Odwołanie się do kotwicy: <p>jeślichcesz odwołać się do kotwicy znajdującej się na tej stronie, kliknij <a href= nazwa_pliku.html#nazwa_kotwicy >tutaj</a>. Strona zostanie przewinięta do odpowiedniego miejsca, w którym wstawiłeś kotwicę. </p> lub gdy kotwica jest na tej samej stronie co odnośnik <a href= #nazwa_kotwicy >do góry</a>
adresy względne i bezwzględne odsyłacz bezwzględny zawiera dokładny adres URL do danego pliku <a href = http://mitr.p.lodz.pl/pliki_do_pobrania.html > To jest odnośnik do pliku na stronie instytutu</a> wada gdy zmieni się adres serwera, gdzie publikujemy stronę trzeba wszystkie odnośniki bezwzględne poprawiać. Powinno się ich więc używać do łączenia zewnętrznych stron. Przy dokumentach wewnątrz jednego serwisu należy stosować odnośniki względne odsyłacz względny w ramach danego katalogu na serwerze <a href = nazwa_pliku.html > to jest odnośnik względny </a>
katalog główny indeks.html plik.html katalog Oferta oferta.html katalog Informacje informacje.html z pliku indeks.html wołamy plik plik.html <a href= plik.html >odnośnik do plik.html</a> z pliku plik.html wołamy plik oferta.html w katalogu Oferta <a href= Oferta/oferta.html >odnośnik do pliku oferta.html</a> z pliku informacje.html wołamy plik indeks.html <a href=../indeks.html >odnośnik do indeks.html</a> z pliku informacje.html wołamy plik oferta.html <a href=../oferta/oferta.html >odnośnik do oferta.html</a> symbol../ sugeruje, by przeglądarka w poszukiwaniu pliku weszła o jedno piętro wyżej ciąg../../ może być dowolnie długi w zależności od potrzeb
Tworzenie hiperłączy za pomocą edytora ked kliknij na ikonę odsyłacz na pasku narzędzi lub naciśnij klawisze Ctrl+M wypełnij tabelkę w oknie wstaw odnośnik w polu Element docelowy wybierasz typ odnośnika i wpisujesz odpowiedni adres w polu Treść odnośnika wpisujesz tekst wyświetlany na stronie między <a> i </a> w polu Opis wpisujesz tekst w chmurce po najechaniu myszką na odnośnik w polu Okno docelowe wybierasz wartość atrybutu target w polu id możesz wpisać nazwę kotwicy, do której ma się odwołać odsyłacz w kodzie XHTML używamy atrybutu id, w kodzie HTML używamy name, ked wstawia obydwa należy usunąć zbędny wstawianie kotwicy kliknij odpowiednią ikonę na pasku narzędzi
Układ strony Twoja witryna może się składać z jednej zaledwie strony, może ich też zawierać dowolnie wiele, gdzie poszczególne wchodzące w jej skład dokumenty są powiązane odsyłaczami. Sposoby ułożenia treści, czyli o tzw. layouty stron w pierwszych latach rozwoju WWW, dominował prosty, wręcz ascetyczny wygląd stron. Strony zawierały podstawowe znaczniki struktury dokumentu i wiązano je po prostu zwykłymi odsyłaczami, umieszczając zwykle spis treści na początku pierwszej strony. Taki sposób sprawdza się doskonale do dzisiaj. To najprostsza technika, dzięki której strony szybko się ładują, i w której trudno popełnić jakieś błędy techniczne.
w połowie lat 90. firma Netscape wprowadziła w swojej przeglądarce Navigator obsługę tzw. ramek. Inne przeglądarki poszły śladem Netscapa. Dzięki ramkom można było tworzyć pomocnicze okienko zawierające spis treści, zaś zawarte w nim odsyłacze wczytywały dowiązane do nich strony do głównego okna. Technika ta, choć efektywna powoduje pewne kłopoty. Na przykład wyszukiwarki sieciowe, jak Google, indeksują dokumenty w ramkach i podsuwają je potem szukającym poza kontekstem nadrzędnego układu ramkowego.
pod koniec lat 90. przyszedł czas tabel, w których umieszczano elementy strony. Technika ta została spopularyzowana przez wielkie portale, stąd nawet przyjęło się określenie "portalowy układ strony". Jest ona do dzisiaj dość powszechnie stosowana, aczkolwiek tego rodzaju podejście jest uznane za niewłaściwe, gdyż tabele są tu wykorzystywane niezgodnie z ich naturalnym przeznaczeniem, którym jest tworzenie danych tabelarycznych. Tabela jako szkielet strony jest po prostu sztuczką, sposobem wykorzystania niezgodnym z istotą tabeli, na dodatek wprowadzającym mnóstwo trudnego do utrzymania i modyfikacji kodu (zajrzyj do źródła strony w dowolnym portalu, a przerazisz się jego skomplikowaniem). Dzisiaj odradza się używanie tabel w roli szkieletów układu.
I wreszcie pojawiła się tendencja, którą uczeni w piśmie uznają za tę właściwą, i która powoli, bardzo powoli, zyskuje sobie uznanie w światowym webmasterstwie. Strony są budowane w oparciu o bloki (sekcje, warstwy) zakreślone przez znaczniki div, dzięki którym można swobodnie rozmieszczać na stronie poszczególne elementy.
Atrybuty czcionki Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki wyróżnienie (pogrubienie) i emfazę (pochylenie) Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą pogrubienia:
Przykład: To jest tekst normalny <strong>to jest tekst pogrubiony</strong> <em>to jest tekst pochylony</em> Rezultat: To jest tekst normalny To jest tekst pogrubiony To jest tekst pochylony
Wielkość i kolor czcionki W starszych specyfikacjach HTML istniały specjalne polecenia definiujące wielkość i kolor czcionki. W HTML 4.01 już ich nie ma, natomiast atrybuty te zostały przeniesione do stylów, za pomocą których można uzyskać znacznie bogatsze efekty. Można podać jednak pewne polecenia, które obowiązywały w starszych wersjach HTML.
<p style="font-size:small">treść akapitu</p> Co da: Treść akapitu zapisana czcionką small Zaleca się stosowanie wielkości absolutnych i relatywnych czcionek, jak xx-small, x-small, small, medium, large, x-large, xx-large oraz smaller i larger
Treść akapitu wyświetlana za pomocą wielkości xx-small Treść akapitu wyświetlana za pomocą wielkości x-small Treść akapitu wyświetlana za pomocą wielkości small Treść akapitu wyświetlana za pomocą wielkości medium Treść akapitu wyświetlana za pomocą wielkości large Treść akapitu wyświetlana za pomocą wielkości x-large Treść akapitu wyświetlana za pomocą wielkości xx-large
Określanie kolorów czcionek <p style="color: darkgreen; ">Treść akapitu w kolorze darkgreen</p> Rezultat: Treść akapitu w kolorze darkgreen.
Chcąc określić kolor, rodzaj i wielkość czcionki w akapicie, możemy napisać: <p style= color: blue; font-family: Arial; font-size: 12pt;">Treść akapitu</p> Jeśli chcemy jeszcze dodać kolor tła np. jasnozielony, to piszemy: <p style= color: blue; font-family: Arial; font-size: 12pt; background color: lightgreen">treść akapitu</p>