Lekcja 3
kl 1 Projektowanie stron
Elementy języka HTML. Nagłówki i paragrafy w dokumencie HTML. Atrybuty elementów.
Zadanie 1
Utwórz plik cw1.html, w którym jako content zaprezentujesz ulubiony cytat z literatury polskiej. Jako tekst alternatywny dodaj informację z imieniem i nazwiskiem autora cytatu. Jako tytuł dodaj informację z jakiego utworu pochodzi przytaczany fragment. Dodaj na górze strony nagłówek poziomu 2 ze swoim imieniem i nazwiskiem. Pamiętaj o poprawnym zadeklarowaniu użycia w dokumencie języka polskiego i polskich znaków.
Zadanie 2
Przygotuj przy pomocy programu Paint obiekt graficzny o wymiarach 200x200 pikseli i kolorem wypełnienia czerwonym. Zapisz go nadając mu nazwę obrazek1 i przypisując mu format PNG. Utwórz plik cw2.html, w którym umieścisz przygotowany wcześniej obrazek. Następnie wstaw pod spodem ten sam obrazek po raz kolejny ustalając przy pomocy składni języka HTML jego wymiary na 120x120 pikseli. Pamiętaj o poprawnym zadeklarowaniu użycia w dokumencie języka polskiego i polskich znaków.
Zadanie 3
Utwórz dokument cw3.html, w którym jako content umieścisz 3 akapity składające się z minimum 5 zdań. Każdemu akapitowi przypisz tekst alternatywny odpowiednio: "Akapit 1", "Akapit 2" i "Akapit 3". Następnie dodaj do każdego z nich tytuł, który będzie się składał z dwóch pierwszych słów danego akapitu i znaku "...". Wstaw pomiędzy przygotowane paragrafy obrazek przygotowany do zadania 2 ustalając jego rozmiar na 500x200 pikseli. Pamiętaj o poprawnym zadeklarowaniu użycia w dokumencie języka polskiego i polskich znaków.
Zadanie 4
Utwórz dokument cw4.html, w którym jako content umieścisz w paragrafie treść zadania 1. Następnie dodaj jako element zagnieżdżony wewnątrz paragrafu nagłówek poziomu 3 wpisując jako jego treść temat dzisiejszych zajęć. Wewnątrz nagłówka umieść plik graficzny przygotowany dla zadania 2 nadając mu rozmiary: szerokość 80 pikseli i wysokość 80 pikseli. Ustal tytuł dla dokumentu: Ćwiczenie 4. Dodaj tytuł dla nagłówka: Temat zajęć. Ustal tekst alternatywny dla obrazka: Mały kwadracik. Dodaj pod akapitem 5 obrazków ułożonych obok siebie w rozmiarze 50x50 pikseli (wykorzystaj składnie HTML do zmiany rozmiaru obrazków). Pomiędzy obrazkami umieść słowo: Radom.
Zadanie 5
Wykonaj proste ćwiczenia umieszczone na końcu rozdziału
Zadanie 6
Umieść z notatkach podręcznych odpowiedzi na poniższe pytania
- Jaki znacznik definiuje w języku HTML: nagłówek, paragraf, koniec linii?
- Który z wyżej wymienionych elementów zawsze będzie elementem pustym?
- Co oznacza skrót W3C?
- W jakim zakresie wykorzystując składnię języka HTML można zmienić wielkość nagłówka w dokumencie?
- Czy wykorzystując składnię HTML da się umieścić jeden nagłówek wewnątrz drugiego? Jaki uzyskamy efekt na ekranie?
- Czy zamknięcie znacznika typu nagłówek lub paragraf powoduje jednocześnie zakończenie akapitu?
- Jaki znacznik w języku HTML definiuje element odnośnika?
- Jaki znacznik w języku HTML definiuje element graficzny (obrazek)?
- Dlaczego ważne jest deklarowanie języka dla dokumentu HTML?
- W jaki sposób należy poprawnie zadeklarować język dokumentu HTML zgodnie ze specyfikacją HTML v.5?
- Podaj przykład zastosowania atrybutu title (nie znacznika!).
- Podaj przykład zastosowania atrybutu href.
- Podaj przykład zastosowania atrybutów width/height.
- Podaj przykład zastosowania atrybutu lang.
- Podaj przykład zastosowania atrybutu alt.
- Czy wartości stosowane przy atrybutach trzeba umieszczać w cudzysłowach?
- Kiedy stosujemy cudzysłowy, a kiedy apostrofy?
- Jaki efekt na ekranie powoduje zastosowanie atrybutu alt?
- Czy atrybuty width oraz height zmieniają "wagę" obrazka?
- Wyjaśnij różnicę w działaniu atrybutów alt i title.
Pytania i odpowiedzi: