Zadania na laboratoria 3, 4

Laboratoria 3, 4 (HTML + CSS)
Utwórz katalog lab0304 w tym samym katalogu co katalog lab0102. Pobierz ze strony internetowej
http://logika.uwb.edu.pl/mg/zajecia/ppwi/index.html:
 slajdy z wykładu 2 (zapisz w lab0304)
 przykłady z wykładu 2 (rozpakuj do lab0304/przyklady)
 listę zadań na laboratoria 3 i 4 (zapisz w lab0304)
Wykonane zadania zapisuj w lab0304. Nazwy plików nadawaj takie jak podane przy treści zadań.
Zadania należy wykonać bez korzystania z generatorów HTML i CSS.
Należy wykonać walidację kodu HTML i CSS.
zad. 1 (nazwa pliku zad1.html)
Na kopii zad1.html z lab. 1,2 wykonaj następujące polecenia.
a) Nadaj następujący wygląd (sformatuj) tak jak to przedstawia poniższy obrazek dla pierwszego
tytułu głównego (element h1) stosując styl wpisany: czcionka: dowolna bezszeryfowa,
rozmiar: 200% normalnego rozmiaru, kolor czcionki: czerwony, kolor tła całego elementu h1:
żółty, obramowanie elementu h1 tylko z dołu i z góry: czarna pojedyncza linia, tyłuł ma być
wyśrodkowany, tekst tytułu przekształć na duże litery, odstęp między literami: 10px.
POLSKA
b) Sformatuj pierwszy akapit z tekstem rozdziału (element p) stosując styl wpisany: czcionka:
dowolna szeryfowa, kolor: dowolny inny niż czarny, skorzystaj z tablicy kolorów (link podany
na wykładzie), tekst w akapicie wyrównaj obustronnie, ustaw wcięcie I pierwsza na 5%
szerokości okna przeglądarki, ustaw odstęp między wierszami na 150% standardowego
odstępu.
To jest tekst pierwszego akapitu. To jest tekst pierwszego akapitu. To jest tekst pierwszego
akapitu. To jest tekst pierwszego akapitu. To jest tekst pierwszego akapitu. To jest tekst pierwszego
akapitu. To jest tekst pierwszego akapitu. To jest tekst pierwszego akapitu. To jest tekst pierwszego
akapitu. To jest tekst pierwszego akapitu.
c) Element blockquote zamień na element p, a następnie sformatuj następująco stosując styl
wpisany: szerokość akapitu 50%; tekst w akapicie wyjustuj (czyli wyrównaj obustronnie) i
pochyl, akapit ustaw na środku w stosunku do brzegów okna przeglądarki, obramowanie ze
wszystkich stron: kolor dowolny, tło: kolor dowolny, odstęp tekstu od obramowania: 10px
To jest tekst akapitu. To jest tekst akapitu. To jest
tekst akapitu. To jest tekst akapitu. To jest tekst
akapitu. To jest tekst akapitu. To jest tekst akapitu.
To jest tekst akapitu. To jest tekst akapitu. To jest
tekst akapitu. To jest tekst akapitu. To jest tekst
akapitu. To jest tekst akapitu. To jest tekst akapitu.
d) Nadaj tło dla całej strony: kolor dowolny
Pamiętaj: tak dobieraj kolory, aby strona była czytelna i nie raziła w oczy.
zad. 2 (nazwa pliku zad2.html)
Zapisz poprzednie zadanie jako zad2.html i uzyskaj za pomocą stylu osadzonego (style wpisane usuń)
wygląd strony:
a) wygląd wszystkich tytułów głównych (elementy h1) tak jak w p. a) zad. 1
wygląd wszystkich akapitów tak jak w p. b) zad. 1
takie samo tło strony jak w w p. d) zad. 1
b) utwórz klasę wyroznienie. Nadaj dla niej styl taki jak w p. c) zad. 1. Zastosuj klasę dla
trzech dowolnie wybranych elementów p.
c) wykorzystaj selektor h1,h2,h3, aby za pomocą jednej reguły stylu od razu przekształcić na
duże litery wszystkie tytuły i nadać im ten sam rodzaj czcionki (czcionkę bezszeryfową)
d) dodaj styl dla elementów h2: kolor tekstu dowolny, obramowanie u dołu dowolne, tekst
umieść przy prawym marginesie, rozmiar czcionki 150% standardowego rozmiaru, nie
dodawaj tła
WARSZAWA
e) dodaj styl dla elementów h3: kolor dowolny, obramowanie u dołu dowolne, tło dowolne,
szerokość elementu 50%, tytuł na środku, rozmiar czcionki 120% standardowego rozmiaru
STARE MIASTO
zad. 3 (nazwa pliku zad3.html)
Zapisz poprzednie zadanie jako zad3.html. Uzyskaj ten sam wygląd strony jak w zadaniu poprzednim,
ale tym razem za pomocą stylu zewnętrznego. Plik ze stylem nazwij zad3.css
zad. 4
Skopiuj zadania: zad4.html, zad4a.html, zad4b.html z lab. 1,2 do lab0304. Uzyskaj ten sam wygląd
stron zad4a.html, zad4b.html co w zadaniu poprzednim dołączając arkusz stylów zad3.css
zad. 5
Dodaj regułę stylu, aby w poprzednim zadaniu we wszystkich dokumentach teksty (opisy) linków były
napisane dużymi literami, nie były podkreślone i miały kolor inny niż niebieski. Uzyskaj efekt, aby po
najechaniu myszką na link zmieniał się kolor tekstu linku i tworzyło się podkreślenie.
zad. 6
Skopiuj zad2.html z lab. 1,2 do lab0304 i zapisz jako zad6.html. Za pomocą stylu osadzonego:
a) na pierwszej liście zrób numerowanie cyframi rzymskimi. Zwiększ odstępy między wierszami
(liniami) na 150%.
b) na drugiej liście: I poziom – „numerowanie” dużymi literami, II poziom – punktowanie
kwadratami
c) na trzeciej liście: I poziom – numerowanie cyframi arabskimi, II poziom – „numerowanie”
małymi literami, III poziom – punktowanie wypełnionymi kółkami. Zmniejsz wcięcie z lewej
na II i III poziomie do 20px.
d) skopiuj listę z punktu a). Zmień tą listę na punktowaną, a jako symbol punktowania użyj
dowolnego obrazka
e) wykonaj następującą listę numerowaną (tekst poniższy skopiuj). Zwiększ odstępy między
liniami na 150%. Dodaj odstęp po każdej pozycji numerowanej na 20px:
1.
Polska - państwo unitarne w Europie Środkowej położone między Morzem Bałtyckim na północy a
Sudetami i Karpatami na południu, w przeważającej części w dorzeczu Wisły i Odry. Powierzchnia
administracyjna Polski wynosi 312 679 km²[b][1], co daje jej 70. miejsce na świecie i 9. w Europie.
Zamieszkana przez prawie 38,5 miliona ludzi (2014), zajmuje pod względem liczby ludności 34.
miejsce na świecie[5]
2.
Litwa - Lietuvos Respublika) – państwo w Europie[5], jeden z krajów bałtyckich, członek Unii
Europejskiej i NATO; graniczy od zachodu z Rosją (obwodem kaliningradzkim), od południowego
zachodu z Polską, od wschodu z Białorusią, od północy z Łotwą. Pierwsza wzmianka o Litwie pochodzi
z 14 lutego 1009, jednak państwo litewskie powstało dopiero w XIII wieku. W XIV wieku ówczesne
Wielkie Księstwo Litewskie było największym państwem w Europie, w 1385 weszło w związki z
Polską, które przerodziły się w 1569 w trwałą unię realną (unia lubelska).
3.
Rosja - (ros. Россия, Rossija, wymowa i), Federacja Rosyjska (ros. Российская Федерация,
Rossijskaja Fiedieracyja, wymowa i) – państwo rozciągające się od wschodniej Europy poprzez
północną część Azji po Ocean Spokojny[5]. Federacja Rosyjska jest największym państwem na świecie
pod względem powierzchni oraz szóstym największym w historii świata. Pod względem liczby ludności
zajmuje 9. miejsce[6]. Rosja należy do największych gospodarek świata, pod względem
4.
Białoruś - Biełaruś, Respublika Biełaruś ros. Беларусь, Республика Беларусь) – państwo w Europie
Wschodniej. Graniczy z Polską (na zachodzie), Litwą, Łotwą (na północy), Rosją (na wschodzie) i
Ukrainą (na południu). W odróżnieniu od swoich sąsiadów nie ma dostępu do morza. Białoruś jest
członkiem założycielem ONZ oraz organizacji regionalnych i subregionalnych, tj. WNP, EaWG, ZBiR i
OBWE. Białoruska SRR była członkiem założycielem Organizacji Narodów Zjednoczonych i
członkiem ośmiu organizacji wyspecjalizowanych ONZ[6]; obok Rosyjskiej FSRR i Ukraińskiej SRR
była jedną z trzech republik radzieckich będących
zad. 7 (nazwa pliku zad7.html)
Skopiuj pierwszą tabelę z zad. 3a z lab. 1,2. Nadaj następujący wygląd dla tej tabeli:
a) szerokość tabeli 50% ekranu
b) szerokość I kolumny 75%, szerokość II kolumny 25%
c) krawędzie: kolor dowolny, grubość 1px, linia ciągła, pojedyncza (brak odstępów między
krawędziami zewnętrznymi a wewnętrznymi)
d) tło I wiersza dowolne, pozostałych wierszy dowolne, ale inne niż pierwszego
e) zwiększ odstęp tekstu od krawędzi, aby tekst nie przylegał do krawędzi
f) tekst w komórkach na środku w pionie i w poziomie
g) tekst w pierwszym wierszu duże litery, kolor inny niż w pozostałych wierszach
h) wyróżnij komórkę z najwyższą ceną zmieniając jej tło i krawędzie w stosunku do pozostałych
i) tabelę umieść na środku
j) skopiuj wykonaną tabelę. Pozostaw tło I wiersza bez zmian. Dla pozostałych wierszy zmień tło
na przemian, aby wiersze parzyste miały jeden kolor, a wiersze nieparzyste drugi kolor
Wskazówka: użyj selektora w postaci klasy, zob. przykład:
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
k) skopiuj wykonaną tabelę. Pozostaw tło I wiersza bez zmian. Dla I kolumny ustaw jeden kolor
tła, dla II inny kolor
Wskazówka: użyj klas lub wygodniejszego sposobu:
http://www.w3schools.com/tags/tag_colgroup.asp
l) do ostatniej tabeli dopisz tytuł „Cennik z dnia …” wykorzystując element caption i ustaw ten
tytuł nad tabelę na środku
Wskazówka:
http://www.w3schools.com/tags/tag_caption.asp
zad. 8
Skopiuj zad6.html z lab. 1,2 jako zad8.html. Dodaj obramowania do obrazków, zwiększ odstępy
między obrazkami (właściwość border-spacing http://www.w3schools.com/cssref/pr_borderspacing.asp albo padding). Rozmieść cały układ obrazków na środku na strony.
zad. 9
Skopiuj zad10.html z lab. 1,2 jako zad9.html. Ustaw jakiś kolor czcionki, powiększ tekst kodu, pogrub,
odsuń od lewego brzegu na 20%.