Celem lekcji jest wykonanie strony internetowej, która zawiera obraz z podpisem. Zdefiniujesz element figure i figcaption. Elementy te zostały wprowadzone w celu poprawy struktury opisu zawartości strony. Trzeba jednak pamiętać, że obrazy mogą być w dalszym ciągu konfigurowane jako elementy div.

Element figure i figcaption

Znacznik figure określa element blokowy, który reprezentuje zawartość zwartą (np. obraz, ilustracja, fragment kodu ), ewentualnie z podpisem, w którym poszczególne składowe są traktowane jako jedna całość. Element figcaption jest podpisem elementu figure.

  1. Utwórz folder o nazwie figure_i_figcaption
  2. Pobierz z banku zdjęć (np. pixabay.com) zdjęcie ze zwierzakiem ???? – zapisz rozdzielczość pobranego zdjęcia. W moim przypadku będzie to zdjęcie kota o rozdzielczości 1224x1280px w formacie jpg.
  3. Uruchom edytor stron www (np. Notepad++) i otwórz w nim plik z szablonem strony internetowej, który możesz pobrać stąd https://www.nauczycielka-informatyki.pl/wp-content/uploads/2021/09/szablon.zip. TO JEST ZIP. ROZPAKUJ GO. Zmień konieczne tagi.
  4. W sekcji body wstaw znacznik <img> i ustaw w nim wyświetlanie obrazu nazwa_twojego_pliku.jpg:

<img src=”nazwa_twojego_pliku.jpg” alt=”Opis_zdjecia” height=”1224” width=”1280”>

<img src=”cat1224x1280.jpg” alt=”Mały biały kotek” height=”1224” width=”1280”> – możesz zmienić ustawienia ale pamiętaj o zachowaniu proporcji. 

<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta charset="utf-8">
		<meta description="tu wpisz opis strony">
		<meta keywords="tu wpisz słowa kluczowe">
		<title>Tu wpisz tytuł strony oraz swoje imię nazwisko i klasę</title>

	</head>

	<body>
	       <img src="cat1224x1280.jpg" alt="Mały, biały kotek" height="1224" width="1280">

	</body>

</html>
  1. Zapisz plik pod nazwą index.html w folderze figure_i_figcaption.
  2. Uruchom przeglądarkę internetową i przetestuj nową stronę — powinna wyglądać podobnie jak na obrazku
Figure i figcaption
Figure i figcaption – obrazek jako img
  1. Ustaw teraz podpis wyświetlanego obrazu, następnie otwórz w edytorze plik z kodem strony.
  2. W sekcji head dopisz wewnętrzny kod CSS, który ustali wyświetlanie podpisu tekstem pogrubionym, pochylonym i zapisanym czcionką Arial. Stopień pisma ustaw na 1,5 em. Kod CSS definiujący opisany styl powinien wyglądać następująco:
<style>
	figcaption { 
	text-weight: bold;
	font-style: italic;
	font-family: Arial;
	font-size: 1,5em;
         }
</style>

Dokonajmy paru zmian w kodzie HTML

<figure>
	<img src="cat1224x1280.jpg" alt="Mały kotek" height="1224" width="1280">
	<figcaption>
	Mały biały kotek
	</figcaption>
</figure>

Napis się pojawił. Zmodyfikuj go tak, by był troszeczkę większy. Tu jest miejsce na Twoją piątkę 🙂