Poniższe treści są realizowane podczas 2 jednostek lekcyjnych.
Temat: Tworzenie strony internetowej – hiperłącza do innych stron, wstawianie grafiki.
Przeczytaj z podręcznika następujące rozdziały z tematu 17. Tworzenie strony internetowej z wykorzystaniem znaczników HTML – projekt:
4.3. Hiperłącza do innych stron.
4.4. Wstawianie grafiki.
Wykonaj zadania.
Zadanie 1
Dodajemy hiperłącza do innych stron.
Do naszej strony dodamy teraz hiperłącze (link) do innej strony. Zastosujemy znaczniki <a></a> z atrybutem href:
<a href="względna ścieżka dostępu">opis</a>
gdzie jako "względna ścieżka dostępu" należy podać lokalizację, gdzie znajduje się strona, do której chcemy się przenieść.
W miejsce wyrazu "opis" wpisujemy krótki tekst, który pojawi się na ekranie i po kliknięciu którego nastąpi uruchomienie odsyłacza.
Polecenie może mieć taką postać:
<p>
Na stronie o <a href="https://paryz.pl/">Paryżu</a> można znaleźć wiele informacji na temat stolicy Francji.
</p>
Uzyskamy taki efekt:
Jeśli chcesz, aby po kliknięciu odsyłacza otworzyło się nowe okno, wpisz następujący kod:
<p>
Na stronie o <a target="_blank" href="https://paryz.pl/">Paryżu</a> można znaleźć wiele informacji na temat stolicy Francji.
</p>
Dodaj do swojej strony jeszcze jeden odnośnik do strony o innej stolicy europejskiej np. o Warszawie.
DLA ZAINTERESOWANYCH: Kolory linków
<body link="kolor" vlink="kolor" alink="kolor">...</body>
przy czym:
- link - standardowy kolor odsyłaczy które nie zostały jeszcze odwiedzone,
- vlink (visited link) - kolor odsyłaczy które zostały przynajmniej raz odwiedzone,
- alink (active link) - kolor aktywnego odsyłacza, czyli odsyłacza w trakcie ładowania powiązanego do niego dokumentu.
Polecenia pozwalają określić kolor odsyłaczy na stronie internetowej. Staraj się używać barw, które będą się dobrze wyróżniały na kolorze tła oraz odróżniały od koloru tekstu.
Zadanie 2
Wstawiamy grafikę na stronę.
Obrazy to ważny element każdej strony internetowej. Ilustracje są podstawowym elementem ubarwiającym i uprzyjemniający przebywanie na stronach WWW. Prócz efektów wizualnych często są niezbędnym elementem informacyjnym - nie zawsze możemy wyrazić wszystko za pomocą tekstu.
Zastosujemy znacznik <img>:
<img src="ścieżka dostępu">
Polecenie może mieć taką postać:
<img src="paryz.jpg">
jeżeli plik paryz.jpg znajduje się w tym samym folderze co plik index.htm.
Istnieją inne atrybuty, które mogą być użyte razem z elementem image. Zmieniają one położenie, wielkość i inne cechy obrazka.
Określone wymiary
<img src="ścieżka dostępu" width="x" height="y">
lub:
<img src="ścieżka dostępu" width="x%" height="y%">
gdzie jako "x" oraz "y" należy wpisać odpowiednio: długość i wysokość obrazka w pikselach. Natomiast jako "x%" oraz "y%" należy wpisać odpowiednio: długość i wysokość obrazka w procentach ekranu.
Ustawienie grafiki względem tekstu ustala się następująco:
<img src="ścieżka dostępu" align="rodzaj">
gdzie jako "rodzaj" należy wpisać:
- left - obrazek ustawiony po lewej stronie względem otaczającego go tekstu
- right - obrazek ustawiony po prawej stronie względem otaczającego go tekstu
- top - tekst ustawiony na górze obrazka
- middle - tekst ustawiony na średniej wysokości względem obrazka
- bottom - tekst ustawiony na dole obrazka (domyślnie)
UWAGA!
Zadanie do oceny wysyłają tylko chętni uczniowie.
