Artykuł
11/30/2011

Kurs HTML5 - WebMatrix - Nowe znaczniki semantyczne w HTML5

Autor: Piotr Bubacz

Opublikowano: 2011-11-28

Większość z nas posiada już strony przygotowane w poprzednich wersjach HTML/XHTML. Nowy standard HTML5 staje się coraz bardziej popularny i można go wykorzystać po to, aby uaktualnić już utworzone strony. W tym samouczku zobaczysz na praktycznym przykładzie, jak to zrobić. Szczegóły, dotyczące struktury dokumentu i nowych znaczników w HTML5, znajdziesz w artykule Internet Explorer 9 – Struktura dokumentu i nowe elementy HTML5.

Przed wykonaniem zadań powinieneś wiedzieć:

jak tworzyć strony w HTML 4.

Po wykonaniu zadań nauczysz się:

jak uaktualnić stronę internetową, aby mogła korzystać z HTML5,
jak wspierać starsze przeglądarki, które nie obsługują nowego standardu.

Odcinek przygotowano na podstawie dokumentacji CSS3.

Implementacja

Twoim zadaniem jest migracja istniejącej już strony, napisanej w XHTML, do nowego standardu HTML5 oraz sprawdzenie, jak będzie ona wyglądała w starszej wersji przeglądarki.

Przygotowanie strony

Pierwszym krokiem będzie utworzenie nowego projektu i dodanie do niego istniejącej strony.

W programie WebMatrix utwórz nową stronę i nazwij ją HTML5.

Uruchom program WebMatrix (Rys. 1.).

Rys. 1. Program WebMatrix po uruchomieniu.

Kliknij przycisk Templates.
Wybierz szablon Empty Site i w polu Site Name wpisz HTML5. (Rys. 2.)

Rys. 2. Dodanie nowego projektu w WebMatrix.

Kliknij przycisk OK.
Kliknij przycisk Files.
Prawym przyciskiem myszki, kliknij plik Default.cshtml. Kliknij Delete. W oknie potwierdź chęć usunięcia pliku.
Pobierz plik HTML5-WebMatrix.zip. Rozpakuj go i przejdź do katalogu HTML5-WebMatrix\HTML5.
Przeciągnij do projektu HTML5 w programie WebMatrix pliki index.html i fourthcoffee.css. Podobnie przeciągnij katalog img. Twój projekt powinien wyglądać tak, jak na Rys. 3.

Rys.3. Wygląd dokumentu w WebMatrix.

Klikając na przycisk Run na wstążce, otwórz stronę w przeglądarce.

Pierwsze kroki zmian

Pierwszym krokiem zmian jest zmiana lub dodanie definicji typu dokumentu oraz wyczyszczenie znacznika html i meta.

Zamień pierwszą linijkę pliku następującą definicją typu:

<!DOCTYPE html>

Usuń parametr xmlns ze znacznika html.
Ze znacznika meta usuń: http-equiv="Content-Type" content="text/html;
Zapisz zmiany. Sprawdź, czy Twoja strona wygląda tak, jak na Rys. 4.

Rys. 4. Elementy nagłówka dokumentu po migracji do HTML5.

Informacja

W tym momencie mógłbyś już skończyć swoją pracę, ponieważ strona w większości przypadków będzie prawidłową stroną HTML5. Jednak nie wykorzystuje ona jeszcze wszystkich nowości tego standardu.

Zamiana elementów struktury dokumentu

W HTML5, zamiast elementów blokowych div, odpowiadających za najważniejsze elementy na stronie, takich jak nagłówek, menu, czy stopka użyj nowych znaczników semantycznych. Szczegóły, dotyczące nowych znaczników, znajdziesz w artykule Internet Explorer 9 – Struktura dokumentu i nowe elementy HTML5.

Zmień nagłówek strony.

Znajdź na stronie element <div id="header"> i zastąp go elementem:

<header>

Znajdź odpowiadający mu element </div> i zastąp go elementem:

</header>

W pliku fourthcoffee.css zamień #header na

header

Zmień element menu.

W pliku index.html znajdź <ul id="navlinks">, usuń parametr id i powyżej znacznika dodaj znacznik:

<nav>

Znajdź odpowiadający znacznik </ul> i poniżej dodaj:

</nav>

Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 5.

Rys. 5. Dokument po migracji elementów div do header i nav.

W pliku fourthcoffee.css zamień pierwsze wystąpienie #navlinks na:

nav ul

W pliku fourthcoffee.css zamień pozostałe wystąpienia #navlinks na:

nav

Zamień poszczególne elementy treści.

W pliku index.html znajdź wszystkie <div class="headline"> i zamień je na element:

<article>

Znajdź odpowiadające im elementy </div> i zamień je na element:

</article>

Zapisz plikindex.html i sprawdź, czy wygląda tak, jak na Rys. 6.

Rys. 6. Dokument po migracji elementów div do article.

W pliku fourthcoffee.css zamień .headline na:

article

Zmień element boczny.

Znajdź na stronie element <div id="sidebar"> i zastąp go elementem:

<aside>

Znajdź odpowiadający mu element </div> i zastąp go elementem:

</aside>

W pliku fourthcoffee.css zamień #sidebar na:

aside

Zmień element stopki.

Znajdź na stronie element <div id="footer"> i zastąp go elementem:

<footer>

Znajdź odpowiadający mu element </div> i zastąp go elementem:

</footer>

Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 7.

Rys. 7. Dokument po migracji elementów div do aside i footer.

W pliku fourthcoffee.css zamień oba wystąpienia #footer na:

footer

Zapisz plik index.html. Odśwież go w przeglądarce i sprawdź, czy wygląda tak, jak na początku.

Sprawdzenie wyglądu dokumentu w starszych wersjach przeglądarek

Ważne jest, aby mimo, iż Twoja strona wspiera najnowszy standard, była dostępna dla użytkowników starszych wersji przeglądarek. Aby to sprawdzić, wykorzystaj narzędzia programistyczne, dostępne w Internet Explorer 9.

Będąc w Internet Explorer, wciśnij F12. Określ Browser Mode na IE7 i sprawdź, czy strona wygląda tak, jak na Rys. 8.

Rys. 8. Problemy z wyświetlaniem dokumentu w starszych wersjach przeglądarek.

Dodaj wsparcie dla starszych przeglądarek.

W pliku index.html, poniżej znacznika style, dodaj:

<script type="text/javascript" >
  document.createElement('header');
  document.createElement('footer');
  document.createElement('aside');
  document.createElement('article');
  document.createElement('nav');
</script>

Na końcu pliku fourthcoffee.css dodaj:

header, aside, nav, footer,article  {
  display:block; }

Odśwież stronę w przeglądarce i sprawdź, czy wygląda podobnie, jak na początku.

Podsumowanie

W tym samouczku nauczyłeś się, jak praktycznie wykorzystać nowe tagi HTML5 podczas aktualizacji strony przygotowanej w XHTML. Poznałeś również narzędzia programistyczne w Internet Explorer 9 i dowiedziałeś się, w jaki sposób można przygotować stronę, aby była ona dostępna dla użytkowników starszych przeglądarek.

W kolejnym samouczku nauczysz się, jak umieścić mapę Bing na stronie i wyświetlić aktualną pozycję użytkownika.