Przeskocz do treści

Lekcja 3 (HTML)

Elementy języka HTML. Nagłówki i paragrafy w dokumencie HTML. Atrybuty elementów.

Zapoznaj się z materiałami dostępnymi pod poniższymi odnośnikami:

Elementy HTML  /   Atrybuty HTML   /    Nagłówki HTML

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: Wykonaj 4 proste ćwiczenia umieszczone na końcu rozdziału Nagłówki HTML.

Zadanie 5: 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 6: Zapisz w zeszycie odpowiedzi na poniższe pytania.

a. Jaki znacznik definiuje w języku HTML: nagłówek, paragraf, koniec linii?
b. Który z wyżej wymienionych elementów zawsze będzie elementem pustym?
c. Co oznacza skrót W3C?
d. W jakim zakresie wykorzystując składnię języka HTML można zmienić wielkość nagłówka w dokumencie?
e. Czy wykorzystując składnię HTML da się umieścić jeden nagłówek wewnątrz drugiego? Jaki uzyskamy efekt na ekranie?
f. Czy zamknięcie znacznika typu nagłówek lub paragraf powoduje jednocześnie zakończenie akapitu?
g. Jaki znacznik w języku HTML definiuje element odnośnika?
h. Jaki znacznik w języku HTML definiuje element graficzny (obrazek)?
i. Dlaczego ważne jest deklarowanie języka dla dokumentu HTML?
j. W jaki sposób należy poprawnie zadeklarować język dokumentu HTML zgodnie ze specyfikacją HTML v.5?
k. Podaj przykład zastosowania atrybutu title (nie znacznika!).
l. Podaj przykład zastosowania atrybutu href.
m. Podaj przykład zastosowania atrybutu size.
n. Podaj przykład zastosowania atrybutu alt.
o. Czy dla wartości stosowane przy atrybutach trzeba umieszczać w cudzysłowach?
p. Kiedy stosujemy cudzysłowy, a kiedy apostrofy?
r. Jaki efekt na ekranie powoduje zastosowanie atrybutu alt?
s. Czy atrybuty width oraz height zmieniają fizyczny rozmiar obrazka?
t. Wyjaśnij różnicę w działaniu atrybutów alt i title.
error: Content is protected !!