3.1. HTML&CSS – ćwiczenie 1

Informacja

W pliku index.html należy przygotować stronę HTML, która wygląda podobnie do poniższej.

../../_images/index.png

Kliknij, aby zobaczyć większy obrazek

Uwaga

W katalogu html_css_cw1 znajdziesz 3 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 tylko w części rozszerzonej.

Uwaga: Treść i obrazki, które masz umieścić w dokumencie index.html, skopiuj ze strony Romantyzm Wikipedii.

3.1.1. Część podstawowa

W pliku index.html dokonaj wymienionych zmian:

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

  2. Wstaw dwa odnośniki w menu.

  3. Wstaw dwa akapity, a w każdym wstaw obrazki.

  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. Na końcu listy umieść odnośnik 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 umieść:

    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 elementu <section> na 20px
    4. definicje zmieniające kolor tła (wybierz), kolor czcionki (wybierz) i wewnętrzne marginesy 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.

Po wykonaniu ćwiczenia lub upłynięciu przeznaczonego na nie czasu utwórz archiwum w formacie zip zawierające katalog html_css_cw1, zmień jego nazwę wg schematu: kl1ag1_nazwisko_imie_html1.zip i wgraj na wskazany serwer.

3.1.2. Część rozszerzona

W pliku norwid.html należy przygotować stronę HTML, która wygląda podobnie do poniższej.

../../_images/norwid.png

Kliknij, aby zobaczyć większy obrazek

Uwaga

Uwaga: Treści zawarte w pliku norwid.html pobierz z odpowiedniej strony Wikipedii.

  1. Zapisz plik index.html pod nazwą norwid.html.
  2. Upewnij się, że działają odnośniki w menu.

W pliki 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 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 oraz prawe obramowanie (2px solid grey).
  8. Zastosuj utworzoną klasę.

Po wykonaniu ćwiczenia lub upłynięciu przeznaczonego na nie czasu utwórz archiwum w formacie zip zawierające katalog html_css_cw1, zmień jego nazwę wg schematu: kl1ag1_nazwisko_imie_html1_roz.zip i wgraj na wskazany serwer.

3.1.3. Materiały

  1. Elementy HTML
  2. HTML Element Reference
  3. Właściwości CSS
  4. CSS Reference

Utworzony:2017-10-03 o 07:44 w Sphinx 1.4.5