Laboratorium: HTML+CSS

1.1 Należy wprowadzić znaczniki semantyczne zdefiniowane w HTML5 do dokumentu index.html:

• znacznik <header> zamiast <div class="header">,
• znacznik <nav> zamiast <div class="menu">,
• znacznik <main> zamiast <div class="content-column">,
• znacznik <aside> zamiast <div class="right-column">,
• znacznik <footer> zamiast <div class="footer">.

Po wprowadzeniu zmian do pliku index.html należy zmodyfikować arkusz stylów main.css tak, aby wygląd strony nie uległ zmianie w stosunku do oryginalnego dokumentu.

1.2 Należy przygotować tabelę prezentującą informacje o filmach z ostatnich lat (znaczniki: <table>, <thead>, <tbody>, <tr>, <td>, <th>). Tabela powinna posiadać atrybut id="movies" i zawierać następujące kolumny:

• kolumna 1: plakat (pliki graficzne z przykładowymi plakatami w podkatalogu img, znacznik <img>), grafiki plakatów powinny być linkami do grafik w pełnym rozmiarze (element <a>),
• kolumna 2: tytuł w pierwszej linii, poniżej krótki opis (można posłużyć się opisami dystrybutorów, np. ze strony filmweb.pl)
• kolumna 3: ocena

1.3 Wygląd tabeli należy dostosować przy użyciu stylów CSS w następujący sposób:

• opisy kolumn w nagłówku tabeli wyświetlane przy użyciu pogrubionej czcionki (przykładowy selektor: table#movies thead, atrybut CSS: font-weight: bold)
• widoczne poziome obramowania pomiędzy wierszami (atrybuty border-top, border-bottom dla elementów td)
• ciemniejsze tło wierszy parzystych (pseudoselektory :nth-child(even) i :nth-child(odd))
• tytuły filmów wyświetlane z użyciem kursywy (atrybut font-style: italic)

1.4 Należy zmienić sposób pozycjonowania elementów na stronie zgodnie z poniższymi wytycznymi:

• należy zmodyfikować układ strony tak, aby kolumna z miejscami na reklamy znajdowała się po lewej stronie (zamiast przesuwać kolumnę na lewą stronę można zmienić szerokości kolumn i zamienić zawartości miejscami),
• należy zmodyfikować nagłówek strony tak, aby był przypięty do górnej krawędzi okna przeglądarki (atrybut position: fixed),
• należy usunąć miejsca na reklamy i przenieść w to miejsce menu strony, konieczne będzie przeorganizowanie menu z układu poziomego na pionowy,
• korzystając z dyrektywy "@media (max-width: 768px){ ... }" należy przygotować zestaw stylów, które pozwolą na przeglądanie strony na smartphonie, przykładowo:
  • zmniejszamy rozmiar nagłówka i rezygnujemy z atrybutu position: fixed,
  • kolumny w głównej części strony nie są wyświetlane obok siebie, zamiast tego najpierw wyświetlamy menu, a pod spodem treść strony,
  • w przypadku użytkownika odwiedzającego stronę za pośrednictwem komputera wszystkie elementy powinny wyświetlać się tak, jak dotychczas.