3.1. HTML&CSS – ćwiczenie 1¶
Pobierz archiwum html_css_cw1.zip
i rozpakuj w dowolnym katalogu.
W katalogu html_css_cw1
znajdziesz pliki:
index.html
– szkielet strony HTML, tu wprowadzaj wszystkie zmiany,style.css
– podstawowy arkusz stylów CSS, tu dodawaj definicje stylów,norwid.jpg
– obrazek potrzebny w części drugiej,index_done.png
– zrzut gotowej stronyindex.html
,norwid_done.png
– zrzut gotowej stronynorwid.html
.
3.1.1. Część pierwsza¶
Twoim zadaniem jest przygotowanie strony HTML, która wygląda jak poniżej.
Kliknij, aby zobaczyć większy obrazek
Treści (tekst i obrazki) zawarte w dokumencie index.html
kopiuj (pobieraj)
ze strony Romantyzm umieszczonej na Wikipedii.
W pliku index.html
dokonaj następujących zmian:
Wstaw taki sam tytuł strony i zawartość nagłówka pierwszego stopnia.
W menu wstaw dwa odnośniki:
- jeden o treści “Romantyzm” do strony zapisanej w pliku
index.html
, - drugi o treści “Norwid” do strony zapisanej w pliku
norwid.html
.
- jeden o treści “Romantyzm” do strony zapisanej w pliku
Wstaw dwa akapity, a w każdym wstaw obrazek.
Wstaw akapit z tekstem “Źródło” i odnośnikiem do Wikipedii.
Wstaw poziomą linię.
Wstaw nagłówek stopnia drugiego.
Wstaw listę wypunktowaną.
Ostatni element listy powinien być odnośnikiem do konkretnej strony w Internecie.
W stopce wstaw znacznik nagłówka trzeciego poziomu.
Wstaw listę wypunktowaną zawierającą dwa odnośniki do stron w Internecie.
Dołącz do dokumentu arkusz stylów CSS o nazwie
style.css
.W pliku
style.css
dodaj:- definicję ustawiającą marginesy zewnętrzne strony (poza marginesem górnym) na 20px
- definicję powiększającą czcionkę nagłówka stopnia pierwszego do 26px
- definicje zmieniające kolor tła (wybierz) i wewnętrzne marginesy (wypełnienie) elementu
<section>
na 20px - definicje zmieniające kolor tła (wybierz), kolor czcionki (wybierz) i wewnętrzne marginesy (wypełnienie) elementu
footer
na 20px - klasę
.obrazek
definiującą szerokość (250px), obramowanie (2px solid grey) i marginesy zewnętrzne obrazków (10px) - klasy
.nalewo
,.naprawo
pozwalające wyrównywać elementy do lewej i prawej strony - klasę
.źródlo
podkreślającą tekst, pochylającą czcionkę i wyrównującą tekst akapitu “Źródło” do prawej strony
Przypisz odpowiednim elementom zdefiniowane klasy CSS.
3.1.2. Część druga¶
Twoim zadaniem jest przygotowanie strony HTML, która wygląda podobnie do poniższej.
Kliknij, aby zobaczyć większy obrazek
Treści (tekst i obrazki) zawarte w dokumencie norwid.html
kopiuj (pobieraj) z Wikipedii.
- Zapisz plik
index.html
pod nazwąnorwid.html
. - Upewnij się, że działają odnośniki w menu.
W pliku norwid.html
dokonaj następujących zmian:
- Zmień tytuł dokumentu i zawartość nagłówka strony.
- Z elementu
<section>
usuń wszystko poza nagłówkiem. - Wstaw 2-komórkową tabelę, szerokość lewej komórki ustaw na 10%.
- W lewej komórce umieść obrazek, w prawej akapity z tekstem oraz akapit “Źródło”.
- Zmień treść i url odnośnika na dole strony.
- Za pomocą stylów CSS ustaw prawy zewnętrzny margines tabeli na 100px.
- Utwórz klasę CSS
.tdright
, która definiuje 5% wewnętrzne marginesy (wypełnienie) oraz prawe obramowanie (2px solid grey). - Zastosuj utworzoną klasę do prawej komórki tabeli.
3.1.3. Materiały¶
- HTML Tutorial
- HTML Element Reference
- HTML Tables
- Właściwości CSS
- CSS Layout - float and clear
- CSS Reference
- CSS: Kaskadowe arkusze stylów
Utworzony: | 2022-05-27 o 15:34 w Sphinx 1.4.5 |
---|