Microsoft PowerPoint - XHTML_2_odsy\263acze.ppt [tryb zgodno

Microsoft PowerPoint - XHTML_2_odsy\263acze.ppt [tryb zgodno

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>
<a href=”news:pl.comp.www”>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
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:[email protected]">Imię i nazwisko</a>
Napis mailto daje 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:[email protected]?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:[email protected]">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:
zostanie otwarte nowe okno przeglądarki, w
którym zostanie wyświetlony żądany dokument
target=”_blank”
target=”_self”
wartość domyślna, dokument zostanie wyświetlony w tym
samym oknie przeglądarki
target=”_parent”
target=”_top”
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>
title pozwala 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żka dostę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
253,136
obszar aktywny
332,
223
obrazek
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śli chcesz 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>