Obrazy

Karta pracy 2017/2018

Adres:
http://plotkarka.eu/KP/obrazy.html
Autor:
Radosław Kowaluk

W swoim folderze roboczym utwórz dokument obrazy.html (wykorzystaj plik szablonstrony1.html, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <title>Obrazy</title>
  <meta charset="utf-8"/>
 </head>
 <body>

 </body>
</html>

W systemowym edytorze grafiki utwórz rysunek o rozmiarze 200 na 100 pikseli (kliknij narzędzie Zmień rozmiar lub przeciągnij uchwyt w prawym dolnym rogu obrazu), zawierający kilka figur geometrycznych.

Zapisz grafikę w formacie PNG, pod nazwą figury.png w swoim folderze.

Definiowanie obrazu1 (lokalizacja pliku2)

W źródle pliku, w elemencie body dopisz kod. 

 <body>
  <img src="figury.png"/>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Tekst alternatywny 3

W źródle pliku, w elemencie img dopisz kod.

  <img src="figury.png" alt="figury"/>

Zapisz dokument i otwórz go w przeglądarce.

Szerokość4

W źródle pliku, w elemencie img dopisz kod.

  <img src="figury.png" alt="figury"
 width="200"/>

Zapisz dokument i otwórz go w przeglądarce.

Wysokość5

W źródle pliku, w elemencie img dopisz kod.

  <img src="figury.png" alt="figury"
 width="200" height="100"/>

Zapisz dokument i otwórz go w przeglądarce.

Skopiuj dowolny plik animacji w formacie GIF do swojego folderu.

Zmień nazwę pliku na animacja.gif

W źródle pliku, w elemencie body dopisz kod.

 width="200" height="100"/>
  <br/>
  <img src="animacja.gif" alt="animacja"/>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Skopiuj dowolne zdjęcie (większe niż 400 na 400 pikseli) w formacie JPEG do swojego folderu.

W edytorze grafiki wykadruj zdjęcie do rozmiaru 400 na 400 pikseli i zapisz pod nazwą fotka.jpg w swoim folderze.

Przeskaluj zdjęcie do rozmiaru 100 na 100 pikseli i zapisz pod nazwą miniatura.jpg w swoim folderze.

Grafika jako hiperłącze

W źródle pliku, w elemencie body dopisz kod.

  <img src="animacja.gif" alt="animacja"/>
  <br/>
  <a href="fotka.jpg" alt="Fotka">
   <img src="miniatura.jpg" alt="Miniatura"
 width="100px"/>
  </a>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj hiperłącze.

Okno otwieranego zasobu6

W źródle pliku, w elemencie img dopisz kod.

  <a href="fotka.jpg" alt="Fotka" target="_blank">

Zapisz dokument i otwórz go w przeglądarce. Przetestuj hiperłącze.

Dodaj w pliku index.html link do pliku obrazy.html w części Rozwiązania

Wgrywanie plików na serwer

Sprawdź poprawność kodu i umieść pliki obrazy.html, index.html, figury.png, fotka.jpg, miniatura.jpg, animacja.gif na serwerze.

  1. Element <img> - definiuje obraz (grafika, zdjęcie).
  2. Atrybut src - definiuje nazwę pliku. Wartością jest nazwa pliku lub lokalizacja.
  3. Atrybut alt - definiuje opis (alternatywny) pliku. Wartością jest tekst.
  4. Atrybut width - definiuje szerokość. Wartością jest liczba (domyślnie w px) lub procent.
  5. Atrybut height - definiuje wysokość. Wartością jest liczba (domyślnie w px) lub procent.
  6. Atrybut target - definiuje okno otwieranego zasobu. Wartość "_blank" otwiera hiperłącze w nowej karcie.

Mapy

 

Na stronie Wolnej Encyklopedii  (www.wikipedia.pl) wyszukaj grafikę przedstawiającą podział administracyjny Polski (miniatura link ↗) i skopiuj ją do folderu pod nazwą polska.png. Otwórz w edytorze grafiki plik polska.png zlokalizuj województwo pomorskie, łódzkie, świętokrzyskie. Zwróć uwagę na pasek stanu podczas przesuwania kursorem nad grafiką. Wyświetlane liczby określają pozycję x (poziomą) i y (pionową).

Definiowanie mapy graficznej1 (nazwa mapy2)

W źródle pliku, w elemencie body dopisz kod.

 <hr/>
 <img src="polska.png" usemap="#mapka" alt="Polska"/>
 <map name="mapka">

 </map>
</body>

Zapisz dokument i otwórz go w przeglądarce.

Definiowanie obszarów mapy3 o określonym kształcie4 i parametrach5

W źródle pliku, w elemencie map dopisz kod.

 <map name="mapka">
  <area shape="rect" coords="75,10,130,50"
 alt="pomorskie" href="http://www.woj-pomorskie.pl"/>
 </map>

Zapisz dokument i otwórz go w przeglądarce. Sprawdź działanie hiperłącz.

W źródle pliku, w elemencie map dopisz kod.

 alt="pomorskie" href="http://www.woj-pomorskie.pl"/>
  <area shape="circle" coords="130,130,30"
 alt="łódzkie" href="http://www.lodzkie.pl"/> 
 </map>

Zapisz dokument i otwórz go w przeglądarce. Sprawdź działanie hiperłącz.

W źródle pliku, w elemencie map dopisz kod.

 alt="łódzkie" href="http://www.lodzkie.pl"/> 
  <area shape="poly" coords="150,150,190,170,160,190"
 alt="świętokrzyskie"
 href="http://www.kielce.uw.gov.pl/">
 </map>

Zapisz dokument i otwórz go w przeglądarce. Sprawdź działanie hiperłącz.

Kolejność tabulacji6

W źródle pliku, w znacznikach area dopisz kod.

 href="http://www.woj-pomorskie.pl" tabindex ="1"/>
...
 href="http://www.kielce.uw.gov.pl/" tabindex ="2"/>
...
  href="http://www.lodzkie.pl" tabindex ="3"/>

Zapisz dokument i otwórz go w przeglądarce. Sprawdź działanie tabulatora.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze po sprawdzenie ich poprawności.

Sprawdzanie poprawności stron witryny

Sprawdź poprawność stron witryny narzędziem  validator.w3.org.

Nowe elementy w HTML 5.1 11

  1. Element <map> – zawiera strukturę definiowanych obszarów mapy.
  2. Atrybuty usemap i name – zawierają nazwę mapy.
  3. Element <area> – definiuje obszar mapy graficznej.
  4. Atrybut shape – definiuje kształt opisujący aktywny region mapy odsyłaczy. Wartościami są: circle lub rect lub poly
  5. Atrybut coords – definiuje współrzędne dla regionu aktywnego na mapie odsyłaczy. Określa zbiór punktów, które tworzą aktywny obszar. W zależności od atrybutu shape punkty mogą wyznaczać prostokąt, okrąg lub wielokąt. Dla prostokąta są to współrzędne lewego górnego i prawego dolnego wierzchołka. Dla koła to współrzędne środka i długość promienia. Dla wielokąta to współrzędne kolejnych wierzchołków.
  6. Atrybut tabindex – definiuje kolejność „skoku” tabulatora. Wartością jest liczba całkowita.
  7. Elementy: <picture>, <source>