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 HTML, która wygląda jak poniżej.

../../_images/index_done.png

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:

  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, a 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 HTML, która wygląda podobnie do poniższej.

../../_images/norwid_done.png

Kliknij, aby zobaczyć większy obrazek

Treści (tekst i obrazki) zawarte w dokumencie norwid.html kopiuj (pobieraj) 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.