Ostatnia aktualizacja 30 czerwca, 2023
Tworzenie footera (stopki) na stronie internetowej jest istotnym elementem struktury każdej strony. Footer zawiera najczęściej informacje takie jak linki do innych stron, dane kontaktowe, prawa autorskie czy informacje o polityce prywatności. Tworzymy go za pomocą znacznika <footer> w HTML. Jak dokładnie się za to zabrać?
Sprawdź: Jak zrobić stronę internetową w HTML-u?
Pierwszym krokiem jest dodanie znacznika <footer> na dole struktury naszej strony. Zazwyczaj umieszcza się go tuż przed zamykającym znacznikiem </body>.
<body>
<!-- zawartość strony -->
<footer>
</footer>
</body>W tym znaczniku możemy umieścić różne elementy, np. akapity, linki czy obrazy. Przykładowo możemy dodać prosty tekst z informacją o prawach autorskich:
<footer>
<p>© 2023 Moja strona</p>
</footer>Symbol © to tzw. encja HTML, która reprezentuje symbol praw autorskich.
Możemy również dodać do naszej stopki linki do innych stron:
<footer>
<p>© 2023 Moja strona</p>
<nav>
<ul>
<li><a href="onas.html">O nas</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="polityka_prywatnosci.html">Polityka prywatności</a></li>
</ul>
</nav>
</footer>W powyższym kodzie zastosowaliśmy znaczniki <nav>, <ul>, <li> i <a> do stworzenia prostej nawigacji w stopce.
Style CSS w footerze
Footer w HTML-u często stylizuje się za pomocą CSS, aby go wyróżnić. Możemy to zrobić dodając atrybut class do znacznika <footer> i definiując styl dla tej klasy w naszym pliku CSS:
<footer class="mojaStopka">
<!-- zawartość stopki -->
</footer>.mojaStopka {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}Powyższy kod CSS nadaje stopce szary kolor tła, dodaje padding (wewnętrzne marginesy) i wyśrodkowuje tekst.
Dalsza część tekstu znajduje się pod materiałem wideo:
Dlaczego footer to ważny element strony internetowej?
- Informacje o prawach autorskich. Footer jest miejscem, gdzie zazwyczaj umieszcza się informacje o prawach autorskich do treści na stronie. Pomaga to ochronić treści i informuje użytkowników o prawach do ich używania.
- Nawigacja. W stopce często umieszcza się linki do innych stron lub sekcji witryny, które mogą nie pasować do głównego menu nawigacyjnego. Może to obejmować linki do stron takich jak “O nas”, “Kontakt”, itp.
- Dane kontaktowe. Footer to często miejsce, gdzie firmy umieszczają swoje dane kontaktowe, takie jak adres e-mail, numer telefonu czy adres siedziby.
- Integracja z mediami społecznościowymi. W stopce można umieścić linki do profili na portalach społecznościowych, co pozwala użytkownikom na łatwe odnalezienie firmy w mediach społecznościowych.
- SEO. Umieszczanie ważnych linków w stopce może pomóc w optymalizacji strony pod kątem wyszukiwarek. Linki te pomagają robotom wyszukiwarek zrozumieć strukturę strony i mogą poprawić jej ranking.
- Profesjonalizm i zaufanie. Dobrze zaprojektowana i informacyjna stopka może dodawać stronie profesjonalizmu i budować zaufanie wśród użytkowników.
- Ciągłość informacyjna. Footer, który jest konsekwentny na całej stronie, pomaga utrzymać spójność informacji i wzmacnia tożsamość marki.
- Informacje prawne. Wiele stron internetowych wykorzystuje footer do umieszczenia informacji prawnych, takich jak warunki usługi, polityka prywatności i zasady dotyczące plików cookie.
- Oznakowanie lokalizacji. Dla firm z fizycznymi lokalizacjami, footer to dobre miejsce do umieszczenia informacji takich jak adres, godziny otwarcia i mapa dojazdu.
Czytaj także:
Macierz dyskowa – czym jest i kiedy warto ją stosować?
