Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

Podstawowy szkielet strony internetowej oparty o HTML 5 – dodajemy treść

Łukasz Dudziński • HTML 5 • 5 września 2021 (pierwotna data publikacji: 4 września 2016) • 6

W poprzedniej części tego wpisu dodaliśmy w sekcji head meta tagi oraz link tagi. Poza opisem witryny oraz słowami kluczowymi podpięliśmy również plik ze stylami CSS oraz skrypt JavaScript. Teraz przechodzimy do kolejnego etapu czyli uzupełnienia naszych pustych bloków w sekcji body o treść. Wszystko to potem będziemy musieli jeszcze odpowiednio ostylować na podstawie projektu graficznego.

Nasz kod, który do tej pory napisaliśmy:

<!doctype html>
<html>
     <head>
          <title>Tytuł strony...</title>
          
          <!-- meta tagi !-->
          <meta charset="UTF-8" />
          <meta name="description" content="Przykładowa strona internetowa oparta o HTML 5 i CSS 3" />
          <meta name="keywords" content="blog, programowanie, HTML 5, tutorial, Strefa kodera, StrefaKodera.pl" />
          <meta name="author" content="Łukasz Dudziński" />

          <!-- link tagi !-->
          <link rel="stylesheet" href="css/style.css" />
          <link rel="alternate" type="application/rss+xml" title="RSS" href="https://strefakodera.pl/feed" />

          <!-- skrypty !-->
          <script src="js/skrypt.js"></script>
     </head>
     <body>
          <header>
               Nagłówek
          </header>
          <nav>
               Menu główne
          </nav>
          <section>
               <article>
                    Zawartość artykułu
               </article>
          </section>
          <aside>
               Kolumna boczna
          </aside>
          <footer>
               Stopka
          </footer>
     </body>
</html>

Nagłówek

Zaczynamy od samej góry czyli nagłówka (<header> </header>). Pasowało by tutaj wstawić logo naszego portalu, jego nazwę oraz krótki slogan.

Logo to po prostu obrazek, który wstawiamy za pośrednictwem znacznika <img />:

<img src="/logo.jpg" alt="Logo" />

Nie ustawiamy na razie żadnych wymiarów, tym zajmiemy się później.

Do umieszczenia nazwy portalu zastosujemy nagłówek stopnia pierwszego (<h1> </h1>):

<h1>Mój blog</h1>

A do krótkiego opisu po prostu znacznik paragrafu (<p> </p>):

Reasumując, nasz cały kod nagłówka:

<header>
     <img src="/logo.jpg" alt="Logo" />
     <h2>Mój blog</h2>
     <p>Witam, na mojej stronie!</p>
</header>

Menu główne

Menu główne umieszczamy w tagu <nav> </nav> dostępnym w HTML 5. Oczywiście całe menu budujemy na podstawie listy punktowej (<ul> </ul>):

<ul>
     <li><a href="/">Strona główna</a></li>
     <li><a href="/newsy">Newsy</a></li>
     <li><a href="/artykuly">Artykuły</a></li>
     <li><a href="/opinie">Opinie</a></li>
     <li><a href="/kontakt">Kontakt</a></li>
</ul>

Cały kod:

<nav>
     <ul>
          <li><a href="/">Strona główna</a></li>
          <li><a href="/newsy">Newsy</a></li>
          <li><a href="/artykuly">Artykuły</a></li>
          <li><a href="/opinie">Opinie</a></li>
          <li><a href="/kontakt">Kontakt</a></li>
     </ul>
</nav>

Kolumna główna

Przechodzimy teraz do kolumny głównej naszej strony. Będzie ona składać się z listy 5 ostatnio opublikowanych artykułów. Każdy artykuł będzie zawierał tytuł (umieszczony w znaczniku nagłówka pierwszego stopnia <h1> </h1>), obrazek (ikonę wpisu) krótki 2-3 zdaniowy opis oraz link „Czytaj dalej…”.

Tak więc przechodzimy do tagu <section> </section> i tworzymy pierwszy artykuł w znaczniku <article> </article>:

<article>
     <h1>Witaj na moim blogu!</h1>
     <img src="/ikonaWpisu1.jpg" alt="Witaj na moim blogu!" />
     
     <p>Jeśli trafiłeś na ten wpis, to prawdopodobnie jesteś nowym czytelnikiem, czas więc aby wprowadzić Ciebie w tajniki tego bloga. Ale od początku. Pewnie zastanawiasz się...</p>

     <a href="#" title="Czytaj dalej...">Czytaj dalej...</a>
</article>

Takich wpisów potrzebujemy 5. Na nasze potrzeby każdy z nich będzie różnił się tytułem oraz obrazkiem, opis pozostanie bez zmian. Wszytko to umieszczamy w kodzie jeden pod drugim i zamykamy znacznik </section>.

Kolumna boczna (sidebar)

Prawie każda witryna internetowa posiada boczną kolumnę z różnymi widgetami. Można tam umieścić przydatne z punktu widzenia internauty informacje, na przykład: ostatnio komentowane artykuły, ostatnio dodane komentarze czy najpopularniejsze wpisy. Kolumnę boczną (sidebar) umieszczamy w specjalnym tagu HTML 5, który nazywa się aside: <aside> </aside>.

Wewnątrz tagów <aside> </aside> umieszczamy pojedyncze widgety, każdy widget możemy oznaczyć jako zwykły element blokowy div (<div> </div>) i wewnątrz niego dodawać resztę treści.

Przykładowy sidebar może więc wyglądać tak:

<aside>
     <div id="widget1" class="widget">
          <h1>Tytuł widgetu 1</h1>
          <p>Witaj na moim blogu o programowaniu, ja nazywam się Łukasz Dudziński i na tej stronie zabiorę Cię w świat HTML'a, CSS'a, Javy oraz wielu innych technologii. Jesteś gotowy?</p>
     </div>
     <div id="widget2" class="widget">
          <h1>Tytuł widgetu 2</h1>
          <ol>
               <li>HTML 5 taki fajny...</li>
               <li>Polecam Wordpress'a</li>
          </ol>
     </div>
</aside>

Stopka (footer)

No i został nam ostatni element naszego szablonu czyli stopka (ang. footer). Jak pewnie wielu z was się już domyśliło również i w tym celu został przygotowany specjalny tag HTML 5. Jak się on nazywa? A jakże by inaczej – po prostu footer: <footer> </footer>.

W stopce zamieszczamy przede wszystkim informacje o prawach autorskich, autorze strony bądź też odnośnik do podstrony z danym kontaktowymi. Napiszmy więc przykładową stopkę do naszego szablonu:

<footer>
     <p class="copyright">Copyright &copy; by StrefaKodera.pl - Wszelkie prawa zastrzeżone.</p>
     <p class="contact">Chcesz się ze mną skontaktować? Nie ma problemu po prostu udaj się pod ten adres: <a href="https://strefakodera.pl/kontakt" title="Kontakt">StrefaKodera.pl/kontakt</a>.</p>
</footer>

Podsumowanie

Przyszedł czas na podsumowanie, czyli zebranie wszystkich naszych elementów w jedną całość. Bez zbędnego przedłużania poniżej prezentuję cały kod:

<!doctype html>
<html>
     <head>
          <title>Tytuł strony...</title>
          
          <!-- meta tagi !-->
          <meta charset="UTF-8" />
          <meta name="description" content="Przykładowa strona internetowa oparta o HTML 5 i CSS 3" />
          <meta name="keywords" content="blog, programowanie, HTML 5, tutorial, Strefa kodera, StrefaKodera.pl" />
          <meta name="author" content="Łukasz Dudziński" />

          <!-- link tagi !-->
          <link rel="stylesheet" href="css/style.css" />
          <link rel="alternate" type="application/rss+xml" title="RSS" href="https://strefakodera.pl/feed" />

          <!-- skrypty !-->
          <script src="js/skrypt.js"></script>
     </head>
     <body>
          <header>
               <img src="/logo.jpg" alt="Logo" />
               <h2>Mój blog</h2>
               <p>Witam, na mojej stronie!</p>
          </header>
          <nav>
               <ul>
                    <li><a href="/">Strona główna</a></li>
                    <li><a href="/newsy">Newsy</a></li>
                    <li><a href="/artykuly">Artykuły</a></li>
                    <li><a href="/opinie">Opinie</a></li>
                    <li><a href="/kontakt">Kontakt</a></li>
               </ul>
          </nav>
          <section>
               <article>
                    <h1>Witaj na moim blogu!</h1>
                    <img src="/ikonaWpisu1.jpg" alt="Witaj na moim blogu!" />
     
                    <p>Jeśli trafiłeś na ten wpis, to prawdopodobnie jesteś nowym czytelnikiem, czas więc aby wprowadzić Ciebie w tajniki tego bloga. Ale od początku. Pewnie zastanawiasz się...</p>

                    <a href="#" title="Czytaj dalej...">Czytaj dalej...</a>
               </article>
               <article>
                    <h1>Witaj na moim blogu!</h1>
                    <img src="/ikonaWpisu1.jpg" alt="Witaj na moim blogu!" />
     
                    <p>Jeśli trafiłeś na ten wpis, to prawdopodobnie jesteś nowym czytelnikiem, czas więc aby wprowadzić Ciebie w tajniki tego bloga. Ale od początku. Pewnie zastanawiasz się...</p>

                    <a href="#" title="Czytaj dalej...">Czytaj dalej...</a>
               </article>
               <article>
                    <h1>Witaj na moim blogu!</h1>
                    <img src="/ikonaWpisu1.jpg" alt="Witaj na moim blogu!" />
     
                    <p>Jeśli trafiłeś na ten wpis, to prawdopodobnie jesteś nowym czytelnikiem, czas więc aby wprowadzić Ciebie w tajniki tego bloga. Ale od początku. Pewnie zastanawiasz się...</p>

                    <a href="#" title="Czytaj dalej...">Czytaj dalej...</a>
               </article>
               <article>
                    <h1>Witaj na moim blogu!</h1>
                    <img src="/ikonaWpisu1.jpg" alt="Witaj na moim blogu!" />
     
                    <p>Jeśli trafiłeś na ten wpis, to prawdopodobnie jesteś nowym czytelnikiem, czas więc aby wprowadzić Ciebie w tajniki tego bloga. Ale od początku. Pewnie zastanawiasz się...</p>

                    <a href="#" title="Czytaj dalej...">Czytaj dalej...</a>
               </article>
               <article>
                    <h1>Witaj na moim blogu!</h1>
                    <img src="/ikonaWpisu1.jpg" alt="Witaj na moim blogu!" />
     
                    <p>Jeśli trafiłeś na ten wpis, to prawdopodobnie jesteś nowym czytelnikiem, czas więc aby wprowadzić Ciebie w tajniki tego bloga. Ale od początku. Pewnie zastanawiasz się...</p>

                    <a href="#" title="Czytaj dalej...">Czytaj dalej...</a>
               </article>
          </section>
          <aside>
               <div id="widget1" class="widget">
                    <h1>Tytuł widgetu 1</h1>
                    <p>Witaj na moim blogu o programowaniu, ja nazywam się Łukasz Dudziński i na tej stronie zabiorę Cię w świat HTML'a, CSS'a, Javy oraz wielu innych technologii. Jesteś gotowy?</p>
               </div>
               <div id="widget2" class="widget">
                    <h1>Tytuł widgetu 2</h1>
                    <ol>
                         <li>HTML 5 taki fajny...</li>
                         <li>Polecam Wordpress'a</li>
                    </ol>
               </div>
          </aside>
          <footer>
               <p class="copyright">Copyright &copy; by StrefaKodera.pl - Wszelkie prawa zastrzeżone.</p>
               <p class="contact">Chcesz się ze mną skontaktować? Nie ma problemu po prostu udaj się pod ten adres: <a href="https://strefakodera.pl/kontakt" title="Kontakt">StrefaKodera.pl/kontakt</a>.</p>
          </footer>
     </body>
</html>

Właśnie stworzyliśmy szkielet strony w HTML’u 5 z przykładową treścią. Teraz kolejnym krokiem, na drodze budowy layoutu jest jego ostylowanie zgodnie z projektem graficznym.

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, , , ,

Dodaj komentarz

Komentarze (6)

  • Wilczu pisze:
    12 maja 2017 o 10:40

    Się tak zastanawiam, po co męczyć się samemu wystarczy wymyślić jakiś projekt i dać go jakiejś dobrej firmie ******. No ale, czasami przydatne jest też znać z html, css, javyscript, czy też php by coś edytować.

    Odpowiedz
  • norbert pisze:
    2 września 2020 o 12:08

    Super strona : )

    Odpowiedz
  • Znacznik pisze:
    26 marca 2022 o 18:41

    Witam serdecznie,
    Strona jest super – bardzo prosta dla początkującego ucznia :)
    Chciałabym zapytać odnośnie powyższej prezentacji kodu dlaczego nigdzie nie ma znacznika semantycznego main ?
    Gdzie można go zawrzeć? Czy byłoby poprawnie umieścić go przed znacznikiem i zakończyć z nim ?
    z góry dziękuję

    Odpowiedz
    • Natalia pisze:
      26 marca 2022 o 18:43

      Czy umieścić znacznik main przed section i zakończyć za section miało być :)

      Odpowiedz
    • Łukasz Dudziński pisze:
      27 marca 2022 o 11:19

      Cześć Natalia,

      Odnośnie Twojego pytania, znacznik MAIN określa główną treść dokumentu. Powinna ona być unikalna, nie możemy więc zawrzeć tam elementów powtarzalnych (sidebar, menu, stopka, formularze etc.) – <main> NIE MOŻE być potomkiem elementu <article>, <aside>, <footer>, <header> lub <nav>.

      Zaprezentowany w artykule kod HTML, to szkielet strony głównej, prezentujący powtarzalne elementy (listę ostatnio opublikowanych artykułów). Z tego względu znacznik MAIN, nie został tutaj wykorzystany. Dobrym pomysłem jest oznaczanie poprzez MAIN np. treści unikalnych artykułów na stronach, które prezentują konkretny wpis.

      Pozdrawiam,
      Łukasz :)

      Odpowiedz

Odpowiedz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Pin It on Pinterest