Inkscape. Projektowanie okazjonalnego banera. Testowanie strony w przeglądarkach. Publikowanie strony internetowej.

Zadanie 1

Układ elementów na stronie - powtórzenie HTML + CSS

HTML

• Utwórz dokument cw201.html
• Nadaj stronie tytuł: CW201 i ustaw poprawne kodowanie polskich znaków
• Wstaw na stronie 4 bloki: baner, lewy, prawy i stopka
• W bloku baner umieść nagłówek 2 poziomu o treści BANER
• W bloku lewy umieść listę punktowaną składającą się z nazw wszystkich dni tygodnia
• W bloku prawy umieść obraz o1.png
• W bloku stopka umieść nagłówek 2 poziomu o treści STOPKA

CSS

• Dla całej strony ustaw marginesy zewnętrzne na 0 oraz czcionkę 'Segoe UI'
• Dla bloku baner:
  • szerokość 100%
  • wysokość 100px
  • kolor tła żółty - wykorzystaj zapis heksadecymalny
• Dla bloku lewy:
  • szerokość 30%
  • wysokość 500px
  • kolor tła #80dfff
• Dla bloku prawy:
  • szerokość 70%
  • wysokość 500px
  • kolor tła #99ff99
• Dla bloku stopka
  • szerokość 100%
  • wysokość 100px
  • kolor tła żółty - wykorzystaj zapis rgb
• Dla nagłówka poziomu 2
  • wyrównywanie tekstu centralne w poziomie i w pionie
  • rozmiar tekstu 150%
  • odstęp między znakami 8px
• Dla listy nieuporządkowanej margines wewnętrzny górny i lewy 50px
• Dla elementów listy rozmiar czcionki 2.5em
• Obraz wyśrodkowany w pionie i poziomie z dodanym cieniem odsuniętym w prawo i do dołu po 8 pikseli w kolorze #800000

Grafika - obraz o1.png

• Plik w formacie PNG o nazwie obraz
• Wymiary 300x300 pikseli
• Kolor wypełnienia czerwony
• W środku wycięte koło o promieniu 75 pikseli nadające przeźroczystość obrazowi.
• Na łuku okręgu ułożone Nazwisko i imię wykonawcy pracy.

Przykład

 

Pytania i odpowiedzi: