Przeskocz do treści

Lekcja 5 (HTML)

Komentarze w kodzie HTML. Definiowanie kolorów. HTML_SPR_1. Konstruowanie odsyłaczy. Mapy odsyłaczy.

Zapoznaj się z treścią materiału pod odnośnikami:

Komentarze      Kolory      Odsyłacze

Zadanie 1: Przy pomocy dostępnych narzędzi i poznanych elementów składni języka HTML przygotuj dokument zad1.html z poprawnymi: kodowaniem polskich znaków, deklaracją języka strony (język polski) oraz tytułem (jako tytuł podaj: ZST Radom). W nagłówku stopnia 3 umieść swoje imię i nazwisko, ustalając kolor tekstu na niebieski i wyrównywanie tekstu do środka strony. W paragrafie poniżej umieść tekst korzystając z serwisu Lorem Ipsum ustalając kolor tekstu na zielony i wyrównywanie dwustronne. Dodaj dla Twojego dokumentu tło żółte. Poniżej umieść pod nagłówek poziomu 5 dodając jako zawartość pełną nazwę naszej szkoły. Ustal dla tego elementu krój czcionki "Segoe UI" i nadaj mu kolor brązowy oraz tło szare.

Zadanie 2: Przy pomocy dostępnych narzędzi i poznanych elementów składni języka HTML przygotuj dokument zad2.html z poprawnymi: kodowaniem polskich znaków, deklaracją języka strony (język polski) oraz tytułem (jako tytuł podaj: Kolory). Umieść w nagłówku poziomu 6 nazwę zawodu, w którym aktualnie się szkolisz. Za pomocą składni HTML wskaż, że drugie słowo jest ważniejsze. Dodaj do tego nagłówka tytuł: Nazwa zawodu. Ustal kolor napisu granatowy (wykorzystaj składnię RGB). Przygotuj obiekt graficzny rys1.png o wymiarach 50x50 px i wypełnieniu czerwonym. Pod nagłówkiem umieść obiekt graficzny o wymiarach (wymiary ustal przy pomocy składni HTML) 800x50 px. Dodaj do obrazka na stronie tekst alternatywny: Ładny czerwony obrazek. Poniżej obrazka wstaw akapit, którego zawartością będzie treść pobrana z serwisu Lorem Ipsum. Nadaj mu kolor brązowy wykorzystując znajomość składni RGB. Ustal wyrównywanie tekstu do prawej krawędzi. Dodaj dla całego dokumentu kolor tła kontrastujący z pozostałymi elementami strony.

Zadanie 3: Przy pomocy dostępnych narzędzi i poznanych elementów składni języka HTML przygotuj dokument zad3.html z poprawnymi: kodowaniem polskich znaków, deklaracją języka strony (język polski) oraz tytułem (jako tytuł podaj: Zad3). Korzystając z serwisu Lorem Ipsum wygeneruj 10 akapitów tekstu i wklej je do swojego dokumentu. Każdemu akapitowi ustal inny kolor tła i tekstu, stosując zasadę jasne tło i ciemne litery. Na samej górze zawartości strony wstaw nagłówek poziomu 5 w którym umieścisz 3 odnośniki pozwalające przenieść się do akapitu 4, 7 i 10. Przed każdym z pozostałych akapitów umieść odnośnik do akapitu pierwszego. Ustal dla wszystkich odsyłaczy kolor tekstu na czerwony. Wykorzystaj składnie heksagonalną dla definicji kolorów.

Zadanie 4: Przy pomocy dostępnych narzędzi i poznanych elementów składni języka HTML przygotuj dokument zad4.html z poprawnymi: kodowaniem polskich znaków, deklaracją języka strony (język polski) oraz tytułem (jako tytuł podaj: MAPA). W kolejnych akapitach na stronie umieść odsyłacze do wszystkich dzisiaj stworzonych dokumentów (zad1, zad2, zad3). Każdy dokument powinien się otwierać w nowym oknie (zakładce). Ustal kolor tła strony na jasny żółty. Kolor liter ustal na czarny. Dla wszystkich napisów na stronie wykorzystaj krój czcionki Verdana.

Zadanie 5: Przy pomocy dostępnych narzędzi i poznanych elementów składni języka HTML przygotuj dokument zad5.html z poprawnymi: kodowaniem polskich znaków, deklaracją języka strony (język polski) oraz tytułem (jako tytuł podaj: ZAD5). Wykorzystując źródło pobierz 5 obrazków z serii Yin-Yang-Yuan, a następnie użyj ich w swoim dokumencie jako odnośników obrazkowych do niżej wymienionych elementów:

a. strona: http://www.w3schools.com/html/html_links.asp
b. strona: http://tujestok.eu/
c. strona: https://mva.microsoft.com/
d. strona: https://pl.khanacademy.org/
e. dokument: zad5.html

Zadanie 6: Przy pomocy dostępnych narzędzi i poznanych elementów składni języka HTML przygotuj dokument zad6.html z poprawnymi: kodowaniem polskich znaków, deklaracją języka strony (język polski) oraz tytułem (jako tytuł podaj: Lokomotywa). Wstaw nagłówek poziomu 4 o treści "Lokomotywa". Wycentruj go na stronie wykorzystując odpowiedni atrybut języka HTML. Umieść jako treść strony wiersz Lokomotywa. Użyj odpowiednich znaczników języka HTML, aby nadać mu właściwy wygląd. Pokoloruj tekst, Zastosuj czcionkę "Tahoma". Dobierz rozmiar czcionki. Ustal tło oraz tytuł (tytuły: Zwrotka 1, Zwrotka 2, Zwrotka 3, ...) dla każdej zwrotki. Wstaw pod wierszem obrazek pokazujący lokomotywę. Ustal rozmiar obrazka  na 150x100 pikseli. Wstaw pomiędzy wszystkie zwrotki poziomą linię. Dodaj tekst alternatywny do obrazka: Super lokomotywa. Utwóz z wstawionego obrazka odsyłacz do strony PKP.

Zadanie 7: Odpowiedz na pytania

a. Podaj przykład konstrukcji odsyłacza do wybranej strony internetowej.
b. Podaj przykład konstrukcji odsyłacza "lokalnego".
c. Podaj przykład konstrukcji odsyłacza otwierającego dokument docelowy w nowym oknie.
d. Podaj przykład konstrukcji odsyłacza w postaci graficznej.
e. Podaj przykład odsyłacza do elementu w bieżącym dokumencie.
f. Jakiej składni należy użyć, aby ustalić kolor tekstu paragrafu na czerwony z wykorzystaniem notacji RGB?
g. Jakiej składni należy użyć, aby ustalić kolor tła strony na zielony z wykorzystaniem notacji heksagonalnej?
h. Podaj wartości w notacjach RGB i heksagonalnej dla kolorów: czerwony, zielony, niebieski, żółty, czarny i biały.
i. W jaki sposób oznaczamy komentarze w kodzie HTML?

SPRAWDZIAN 1
error: Content is protected !!