Przeskocz do treści

Lekcja 6 (HTML)

Wstawianie obrazów na stronę. Konstruowanie tabel.

Zapoznaj się z treścią informacji na stronie Obrazki oraz Tabele.

Zadanie 1: Przygotuj szkielet strony zapisując go pod nazwą zad1.html. Strona ma poprawnie obsługiwać język polski i polskie znaki. Dodaj tytuł dla strony: OBRAZY. Następnie:

  • Korzystając z serwisu Wikimedia Commons pobierz 4 obrazy pokazujące polskie góry, zapisując je w folderze, w którym umieściłeś dokument zad1.html.
  • Umieść wszystkie obrazy na swojej stronie w taki sposób, aby wyświetlały się w jednym wierszu.
  • Za pomocą składni języka HTML ustal ich szerokość na 150 pikseli. Do każdego z nich dodaj wymagany atrybut alt wpisując jako wartość odpowiednio: obrazek1, obrazek2, obrazek3 i obrazek4.
  • Dodaj nad obrazkami nagłówek poziomu 3 z treścią: Polskie piękne góry.
  • Zawartość nagłówka i obrazki wyrównaj względem środka strony.
  • Dodaj jasne (odcień niebieskiego) tło dla całej strony.
  • Wypisz w kolejnych liniach poniżej obrazków nazwy polskich łańcuchów górskich (min. 3).
  • Ustal dla całej strony czcionkę MS Comic Sans.
  • Przenieś obrazki do folderu IMG.
  • Popraw składnię HTML tak, aby obrazki wyświetlały się poprawnie.
  • Utwórz ze swoich obrazków hiperłącza w taki sposób, aby po kliknięciu na obrazek pokazywał się on w nowym oknie w oryginalnym rozmiarze.
  • Zamień tekst prezentujący nazwy polskich łańcuchów górskich na hiperłącza do stron z informacjami o tych górach, np. Tatry.

Zadanie 2: Przygotuj szkielet strony zapisując go pod nazwą zad2.html. Strona ma poprawnie obsługiwać język polski i polskie znaki. Dodaj tytuł dla strony: MAPA. Następnie:

  • Przygotuj obrazek o wymiarach 100x100 pikseli. Utwórz na nim wzór szachownicy składającej się z czterech pól w kolorach czarnym i czerwonym. Zapisz go pod nazwą szach.png;
  • Wstaw go na stronę wyśrodkowując względem okna przeglądarki;
  • Utwórz z obrazka mapę odsyłaczy w taki sposób, aby:
    • lewy górny kwadrat był odsyłaczem do strony http://tujestok.eu/ (otwarcie w nowym oknie)
    • prawy górny kwadrat był odsyłaczem do dokumentu zad2.html (otwarcie w nowym oknie)
    • lewy dolny kwadrat był odsyłaczem do obrazka szach.png (otwarcie w nowym oknie)
    • prawy dolny kwadrat był odsyłaczem do dowolnego obrazka z zadania 1 (otwarcie strony w tym samym oknie)
  • Dodaj po obrazkiem nagłówek stopnia 2 o zawartości: Mapa odsyłaczy.

Zadanie 3: Przygotuj szkielet strony zapisując go pod nazwą zad2.html. Strona ma poprawnie obsługiwać język polski i polskie znaki. Dodaj tytuł dla strony: TABELA. Następnie:

  • Przygotuj szkielet tabeli składającej się z 4 kolumn i 5 wierszy;
  • Połącz wszystkie komórki w pierwszym wierszu i ustal formatowanie jej zawartości:
    • tło: dowolny jasny odcień zielonego
    • krój czcionki: MS Comic Sans
    • rozmiar tekstu: 14pt
    • położenie tekstu: centralnie w komórce
    • umieść tekst: Dane pracowników
  • Drugi wiersz wypełnij kolejno napisami: LP, Nazwisko i imię, Zawód, Miejsce urodzenia i ustal jego formatowanie:
    • krój czcionki: Courier
    • rozmiar tekstu: 12pt
    • kolor tekstu: #00001a
  • Połącz trzy dolne komórki w ostatniej kolumnie i ustal formatowanie:
    • tło komórki: żółte
    • krój czcionki: Segoe UI
    • rozmiar tekstu: 1em
    • wyrównywanie tekstu: centralne
    • treść komórki: Radom
  • Kolumnę Zawód wypełnij danymi: Elektryk, Mechanik, Mechatronik
  • Kolumnę LP wypełnij danymi: 1, 2, 3
  • Kolumnę Nazwisko i imię wypełnij danymi: Jan Nowak, Cezary Kowal, Maria Jodła
  • Dopasuj szerokości poszczególnych kolumn do ich zawartości;
  • Dodaj obramowania do wszystkich komórek.

Zadanie 4: Wykonaj instrukcje zawarte w załączniku do zadania.

Zadanie 5: Wykonaj instrukcje zawarte w załączniku do zadania.

Zadanie 6: Zapisz w zeszycie odpowiedzi na poniższe pytania:

a. pyt1
b. pyt2
c. pyt3
d. pyt4
error: Content is protected !!