Zadania na laboratoria 1 i 2

Laboratoria 1, 2 (Język HTML)
Zadania należy wykonać bez korzystania z generatorów HTML. Należy wykonać walidację kodu HTML.
Wykonane zadania zapisuj w katalogu lab0102.
zad. 1
Ze strony zajęć pobierz pliku TekstDoZad1.txt. Przygotuj dokument HTML (nazwa zad1.html) z
tekstem z tego pliku:
a) Nazwy krajów, miast i zabytków powinne być tytułami. Tytuły utwórz za pomocą znaczników
h1 - kraje, h2 - miasta, h3 – zabytki.
b) Zwiększ trzykrotnie odstępy między słowami w tytule „Zamek Królewski i plac Zamkowy”.
c) Utwórz akapity z pozostałych części tekstu za pomocą (znacznik p).
d) Na koniec każdego opisu miasta dodaj poziomą linię (znacznik hr)
e) Przenieś do nowej linii drugie zdanie w pierwszym akapicie (znacznik br)
f) W pierwszym akapicie: pogrub wszystkie liczby (znacznik b), pochyl nazwy gór i rzek (znacznik
i), kilometry kwadratowe umieść w indeksie górnym (znacznik Sup), wyróżnij powierzchnię
Polski za pomocą znacznika mark
g) Wyróżnij trzeci i szósty akapit za pomocą znacznika blockquote
h) Dodaj elementy meta o użytej stronie kodowej, opisie strony, słowach kluczowych i autorze.
i) Na dole strony umieść linię poziomą, a poniżej informację o autorze strony i dodaj symbol
praw autorskich.
zad. 2 (nazwa pliku zad2.html)
Wykonaj listy:
a) listę numerowaną z kilkoma krajami europejskimi
b) skopiuj listę z p. a) i dopisz do każdego kraju miasta w postaci listy punktowanej
c) skopiuj listę z p. b) i dopisz do wybranych dwóch miast kilka jego zabytków w postaci listy
punktowanej
zad. 3 (nazwa pliku zad3.html)
Wykonaj tabele, tabele rozdziel poziomymi liniami:
a) cennik z dowolnymi towarami. 2 kolumny i 5 wierszy. W pierwszym wierszu wpisz tytuły
kolumn. Ceny podaj w euro, użyj symbolu euro.
b) skopiuj tabelę z p. a). Dodaj kolumnę na końcu, wpisując tam ceny w złotówkach
c) skopiuje tabelę z p. b). Dodaj scalony wiersz na początku,w którym napisz: „Cennik z dnia …”.
d) wykonaj tabelę wg wzoru (odtwórz układ tabeli, rozmiary są nieisotne):
Zestawienie podstawowych spółek
kurs
Lp.
nazwa
symbol
PLN
EUR
1
Spółka 1
Sp1
11,40
3,05
2
Spółka 2
Sp2
64,50
15,32
zad. 4
a) Informacje z zad. 1 o Polsce i Litwie (wraz z miastami i zabytkami) zapisz w oddzielnych
plikach: zad4a.html, zad4b.html. Utwórz stronę zad4.html, w której umieść linki prowadzące
do tych plików. W zad4a.html, zad4b.htm utwórz linki powrotne do zad4.html.
b) Utwórz katalog dane i skopiuj do niego zad4a.html, zad4b.html. W zad4.html dopisz listę
punktowaną z linkami prowadzącymi do plików z katalogu dane, a w tych plikach popraw
linki powrotne, aby prowadziły do zad4.html
zad. 5
Skopiuj zad1.html jako zad5.html. W zad5.html umieść na początku strony sześć linków
wewnętrznych z nazwami miast, które są w tekście. Kliknięcie w link powinno przesunąć stronę do
miejsca gdzie zaczyna się informacja o danym mieście. A z kolei przy każdym mieście umieść linki
wewnętrzne, które będą przesuwały stronę na początek (na górę).
zad. 6 (nazwa pliku zad6.html)
Utwórz tabelę: 3 kolumny, 2 wiersze. Do każdej komórki wstaw dowolne obrazki. Zmniejsz
ewentualnie obrazki w programie graficznym, aby cała tabela nie zajmowała więcej niż połowę
ekranu. Wstawiając każdy obrazek wykorzystaj atrybuty alt i title.
zad. 7 (nazwa pliku zad7.html)
Skopiuj zad6.html jako zad7.html. Z obrazków wykonaj linki prowadzące do stron, gdzie można
przeczytać więcej o tym co jest na obrazku.
zad. 8
Skopiuj zad6.html jako zad8.html. Utwórz katalog obrazki i skopiuj tam pliki z obrazkami. Zmień w
zad8.html wartości atrybutu src, aby umieszczone w tabeli obrazki były pobierane z tego katalogu.
zad. 9 (zad9.html)
Korzystając z map Google przygotuj obrazek z mapą Litwy (lub pobierz gotowy z internetu). Utwórz
stronę zad9.html i wstaw tam ten obrazek. Dodaj mapę obrazu, aby uzyskać na stronie następujący
efekt: kliknięcie w miasto otwiera stronę (np. Wikipedia) z informacją o tym mieście. Mapę obrazu
wykonaj korzystając z programu np. GIMP.
zad. 10 (zad10.html)
Wykorzystując możliwość zamieszczania tesktu preformatowanego umieść na stronie szkielet
dokumentu html zachowując wcięcia. Poniżej opisz poszczególne elementy korzystając np. ze slajdu 7
z wykładu.