Page 19 - Informatyka na czasie ZP1

11. Tworzenie stron internetowych

zdjecie2.jpg katalog
 Dobra rada
W nazwach plików unikaj
stosowania polskich
index.html znaków, spacji i znaków
specjalnych.
StronaWWW zdjecie1.jpg
pliki  Dobra rada
W kodzie najlepiej podawać
zdjecie3.jpg względne ścieżki dostępu
do plików. Dzięki temu
jeśli przeniesiesz stronę
Wycieczka zdjecie4.jpg internetową w inne miejsce
wraz z plikami i zachowasz
strukturę katalogów, nie
Rys. 11.6. Przykład struktury katalogów będzie trzeba aktualizować
ścieżek.
Znacznik <img> ma szereg atrybutów rozszerzających jego działanie.
Może się zdarzyć, że z jakichś powodów przeglądarka nie wyświetli
zdjęcia, np. gdy w atrybucie src podano adres URL pliku graficznego, Adres URL,
a po pewnym czasie zmieni się nazwa pliku. Wtedy pomocny okaże s. 58 
się atrybut alt. Wartością tego atrybutu jest tekst alternatywny, który  Dobra rada
przeglądarka wyświetli zamiast grafiki. Zawsze staraj się używać
Rozmiar obrazu na stronie internetowej ustawiamy za pomocą atry­ atrybutu alt przy
butów width i height. Ich wartości podajemy w pikselach: umieszczaniu grafiki na
stronie internetowej.
<img src="zdjecie.jpg" alt="boisko do koszykówki" width="350"
height="650">
Aby wyświetlane obrazy dopasowywały się do urządzenia, na którym
przeglądamy strony WWW, wprowadzono w języku HTML znacznik
<picture>. Wewnątrz tego znacznika (między elementem rozpoczy­
nającym a kończącym) ustalamy, który z obrazów przeglądarka ma
wyświetlać w zależności od szerokości ekranu. Służy do tego znacz­
nik <source>. Za pomocą atrybutu media podajemy minimalną szero­
kość okna przeglądarki, dla której dany obrazek zostanie wyświetlony.
Źródło obrazka wskazujemy, używając atrybutu srcset. Przeglądarka
wyświetli ten obrazek z listy, który jako pierwszy spełnia kryterium
szerokości.
1. <picture>
2. <source media="(min-width: 650px)" srcset="obraz1.
jpg">
3. <source media="(min-width: 465px)" srcset="obraz2.
jpg">
4. <img src="obraz3.jpg" alt="Ratusz w Zamościu"
style="width: auto;">
5. </picture>
Na końcu listy zawsze należy umieścić znacznik <img> ze ścieżką
dostępu do obrazka, który zostanie wyświetlony, jeżeli przeglądarka
nie obsługuje znacznika <picture> lub jeśli żadne z kryteriów szerokości
znacznika <source> nie jest spełnione.
175