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 strony index.html,

  • norwid_done.png – zrzut gotowej strony norwid.html.

3.1.1. Część pierwsza

Twoim zadaniem jest przygotowanie strony WWW, której zrzut znajduje się poniżej.

../../_images/index_done.png

Kliknij, aby zobaczyć większy obrazek

Tekst i obrazki, które mają znaleźć się w dokumencie index.html skopiuj ze strony Romantyzm (Wikipedia).

W pliku index.html dokonaj następujących zmian:

  1. Wstaw taki sam tytuł strony i zawartość nagłówka pierwszego stopnia.

  2. W menu wstaw dwa odnośniki:

    1. jeden o treści „Romantyzm” do strony zapisanej w pliku index.html,

    2. drugi o treści „Norwid” do strony zapisanej w pliku norwid.html.

  3. Wstaw dwa akapity i w każdym wstaw obrazek.

  4. Wstaw akapit z tekstem „Źródło” i odnośnikiem do Wikipedii.

  5. Wstaw poziomą linię.

  6. Wstaw nagłówek stopnia drugiego.

  7. Wstaw listę wypunktowaną.

  8. Ostatni element listy powinien być odnośnikiem do konkretnej strony w Internecie.

  9. W stopce wstaw znacznik nagłówka trzeciego poziomu.

  10. Wstaw listę wypunktowaną zawierającą dwa odnośniki do stron w Internecie.

  11. Dołącz do dokumentu arkusz stylów CSS o nazwie style.css.

  12. W pliku style.css dodaj:

    1. definicję ustawiającą marginesy zewnętrzne strony (poza marginesem górnym) na 20px

    2. definicję powiększającą czcionkę nagłówka stopnia pierwszego do 26px

    3. definicje zmieniające kolor tła (wybierz) i wewnętrzne marginesy (wypełnienie) elementu <section> na 20px

    4. definicje zmieniające kolor tła (wybierz), kolor czcionki (wybierz) i wewnętrzne marginesy (wypełnienie) elementu footer na 20px

    5. klasę .obrazek definiującą szerokość (250px), obramowanie (2px solid grey) i marginesy zewnętrzne obrazków (10px)

    6. klasy .nalewo, .naprawo pozwalające wyrównywać elementy do lewej i prawej strony

    7. klasę .źródlo podkreślającą tekst, pochylającą czcionkę i wyrównującą tekst akapitu „Źródło” do prawej strony

  13. Przypisz odpowiednim elementom zdefiniowane klasy CSS.

3.1.2. Część druga

Twoim zadaniem jest przygotowanie strony WWW, której zrzut znajduje się poniższej.

../../_images/norwid_done.png

Kliknij, aby zobaczyć większy obrazek

Tekst i obrazki, które powinny znaleźć się w dokumencie norwid.html skopiuj z Wikipedii.

  1. Zapisz plik index.html pod nazwą norwid.html.

  2. Upewnij się, że działają odnośniki w menu.

W pliku norwid.html dokonaj następujących zmian:

  1. Zmień tytuł dokumentu i zawartość nagłówka strony.

  2. Z elementu <section> usuń wszystko poza nagłówkiem.

  3. Wstaw 2-komórkową tabelę, szerokość lewej komórki ustaw na 10%.

  4. W lewej komórce umieść obrazek, w prawej akapity z tekstem oraz akapit „Źródło”.

  5. Zmień treść i url odnośnika na dole strony.

  6. Za pomocą stylów CSS ustaw prawy zewnętrzny margines tabeli na 100px.

  7. Utwórz klasę CSS .tdright, która definiuje 5% wewnętrzne marginesy (wypełnienie) oraz prawe obramowanie (2px solid grey).

  8. Zastosuj utworzoną klasę do prawej komórki tabeli.

3.1.3. Materiały

  1. HTML Tutorial

  2. HTML Element Reference

  3. HTML Tables

  4. Właściwości CSS

  5. CSS Layout - float and clear

  6. CSS Reference

  7. CSS: Kaskadowe arkusze stylów

Utworzony:

2024-04-23 o 08:28 w Sphinx 7.3.7