Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Kurs HTML5 - wzorowy szablon

W dzisiejszym artykule przedstawię wzorowy szablon na stronę główną prostej witryny internetowej stworzonej w HTML5.

Nasza strona będzie składać się z:

  • Górnej części strony - logo, menu etc. - wykorzystamy znacznik header
  • Menu główne - znacznik nav
  • Główna treść wraz z ostatnimi aktualnościami - znaczniki section, article, hgroup, time
  • Panel boczny - znaczniki aside, figure, figurecaption, picture
  • Stopka strony - footer

W przybliżeniu zostało to przedstawione na obrazku poniżej:

szablon

Teraz przejdźmy do kodu i jego analizy:


<!doctype html>
<html lang=”pl”>
<head>
<title>Moja idealna strona w HTML5</title>

<meta charset="UTF-8">

<meta name="description" content="Opis naszej strony">
<meta name="keywords" content="Tutaj słowa kluczowe oddzielone przecinkiem">

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="main.css" />

</head>
<body>

<!— Główny nagłówek strony -->
<header role=”banner”>
<!—Grupa nagłówków, użcie hgroup -->
   <hgroup>
      <h1><a href="http://moja-strona.pl " rel="home">Mojastrona.pl – nasza najlepsza strona HTML5 </a></h1>
      <h2>Nasze hasło reklamowe</h2>
   </hgroup>

<!—Rozpoczynamy menu, przy użyciu nav -->
   <nav id="menu" role="navigation">
      <ul>
         <li><a href="index.html">Główna</a></li>
         <li><a href="link.html">O Mnie</a></li>
         <li><a href="link.html">Kontakt</a></li>
      </ul>
   </nav>
</header>

<!—Główna część strony, przy użyciu znacznika main -->
<main role=”main”>
   <hgroup role=”heading”>
   <h1>Aktualności</h1>
   <h3>Aktualności ze świata IT w jednym miejscu</h3>
   </hgroup>
<!—Rozpoczynamy pierwszy artykuł (article) -->
   <article role=”article”>
<!—Tym razem jest nagłówek dla pojedynczego artykułu -->
     <header>
     <h2>Tytuł newsa pierwszego</h2>
     <p class=”news-info”>
<!—informacja o autorze i data dodania aktualności – „time” -->
Autor: rwd5 | <time datetime="2013-02-20">20 lutego</time>
      </p>
      </header>

<!—Sekcja (section) z treścią newsa -->
      <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.</p>
      </section>
   </article>

   <article role=”article”>
      <header>
      <h2>Tytuł newsa drugiego</h2>
      <p class=”news-info”>
Autor: rwd5 | <time datetime="2013-02-21">21 lutego</time>
      </p>
      </header>

      <section>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, e lit magna vulputate arcu, vel tempus metus leo non est. Etiam sit   amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
          </p>
      </section>
   </article>
</main>

<!—Panel boczny, przy użyciu znacznika aside -->
<aside role=”complementary”>
<!—Początek sekcji  -->
   <section>
   <h2>Polecam</h2>
      <figure>
<!—Element obrazkowy :P -->
         <picture>
         <img src="polecamy.jpg" alt="Polecana fotka">
         <p>Polecana fotka</p>
         </picture>
          <figcaption>Bardzo mocno polecana fotka</figcaption>
      </figure>
   </section>
</aside>

<!—Stopka całej strony, użycie znacznika footer -->
<footer role=”contentinfo”>
<p>Wszelkie prawa zastrzeżone. Kopiowanie bez zgody autora zabronione.</p>
</footer>

<!—Skrypty Javascript -->
<script src=”javascript.js”> </script>

<!—Koniec body -->
</body>

<!—Koniec html -->
</html>


Warto wytłumaczyć kilka znaczników z wyżej wymienionego kodu (spójrz również na komentarze znajdujące się w samym kodzie!):

  • header – jest to nagłówek każdej części dokumentu
  • footer – stopki każdego z elementów
  • main – główna treści strony
  • aside - panel boczny na naszej stronie
  • section – fragment strony z elementami tematycznie ze sobą powiązanymi
  • nav – nawigacja, zbiór linków :P
  • hgroup – zbiór nagłówków
  • figure – służy do oznaczania obiektów multimedialnych – zdjęcia, filmy etc. (figurecaption – zawiera dokładny opis obiektu)
  • oraz oczywiste dla każdego - time, picture

Dodatkowo skorzystałem z atrybutu „role”. O to części roli jakie mogą odgrywać nasze elementy:

  • banner – ogólne informacje dotyczące naszej witryny
  • complementary – określa coś uzupełniającego na stronie
  • contentinfo – informacje o elemencie nadrzędnym (metadane)
  • main – główna część strony
  • navigation – coś nawigacyjnego
  • search – wyszukiwarka :D
  • form - formularz

więcej można znaleźć między innymi tutaj

Celowo nie używałem w szablonie elementów takiach jak filmy, muzyka czy formularze, ponieważ o nich napiszę w kolejnych kursach.