Jak zrobić stronę internetową dostosowaną do urządzeń mobilnych
Opisujemy jak zrobić stronę internetową, tak zwaną wizytówkę. Zastosujemy kodowanie HTML5, w celu uzyskania jak najbardziej aktualnej wersji, oraz dostosujemy stronę do urządzeń mobilnych.
Dlaczego warto pamiętać o użytkownikach urządzeń mobilnych takich jak smartfony i tablety? Dlatego, ponieważ zwiększa się ich ilość. Twoja wizytówka internetowa powinna być dostosowana do tych urządzeń.
Jak zrobić stronę internetową w HTML5
Twoja strona internetowa – część HEAD
W części HEAD wpisujemy informacje, które nie są widoczne w treści strony, ale są bardzo istotne dla poprawności dokumentu HTML, a tym samym dla pozycjonowania.
<head> <meta charset="UTF-8"> <title>Tytuł Twojej strony</title> <meta name="Description" content="Opis strony" /> <meta name="Keywords" content="Słowa kluczowe" /> <style>Style strony</style> </head>
Kodowanie znaków
Kodowanie UTF-8 umożliwia poprawne wyświetlanie polskich znaków na stronie internetowej. Warto zwrócić uwagę na kodowanie pliku. Sam meta-tag może nie odpowiadać za poprawność kodowania, ponieważ jest to informacja dla przeglądarki. Jeśli taki problem się pojawi to przy pomocy edytora zmieniamy definicję strony kodowej – na przykład z iso-8859-2 na UTF-8.
<meta charset="UTF-8">
Meta-tagi
Description – to opis strony, który wyświetla się w wynikach wyszukiwarek. Jeśli go nie posiadamy to robot indeksujący pobiera opis z treści strony. Długość opisu nie powinna przekraczać 160 znaków. Więcej informacji na ten temat można znaleźć w naszym poradniku Pozycjonowanie stron internetowych.
Keywords – to słowa kluczowe występujące na stronie internetowej. Ten meta-tag obecnie przez wyszukiwarkę Google nie jest brany pod uwagę.
<meta name="Description" content="Opis strony" /> <meta name="Keywords" content="Słowa kluczowe" />
Tytuł strony internetowej
Tytuł strony internetowej pojawia się w wynikach wyszukiwania oraz w zakładce okna przeglądarki. Tytuł jest tym elementem, który zdecydowania wpływa na pozycjonowanie strony. Jego długość nie powinna przekraczać 60 znaków, a wykorzystane słowa kluczowe powinny być umieszczone w treści strony. Więcej informacji można znaleźć w poradniku Pozycjonowanie stron internetowych.
<title>Tytuł Twojej strony</title>
Style strony
<style>Style strony</style>
Twoja strona internetowa – część BODY
Teraz przedstawiamy jak zrobić stronę internetową w części BODY stosując HTML5
<body> <header> ... </header> <nav id="menu"> ... </nav> <article> ... </article> <footer> ... </footer> </body>
Nagłówek strony
<header> <h1>Nazwa firmy</h1> <h2>Krótki opis firmy.</h2> <img src="baner.jpg" alt="nazwa grafiki" /> </header>
Menu strony
<nav id="menu"> <a href="#">O firmie</a> <a href="#oferta" >Oferta</a> <a href="#kontakt" >Kontakt</a></li> </nav>
Treść strony
<article> <h2>O firmie</h2> <p> </p> </article> <article> <h2>Oferta</h2> <p> </p> </article> <article> <h2>Kontakt</h2> <p> </p> </article>
Stopka strony
<footer> <p> Nazwa firmy © 2016 </p> </footer>
Jeśli masz trudności w kodowaniu HTML i CSS i nie wiesz jak zrobić stronę internetową to skontaktuj się z nami, a my profesjonalnie wykonamy to zlecenie.
Dla zainteresowanych samodzielnym tworzeniem strony – darmowa strona internetowa – udostępniamy plik index.html.
Plik po pobraniu należy uzupełnić o treść oraz grafikę. Następnie umieścić na serwerze wraz z plikami jpg.
Jeśli masz pytania odnośnie elementów strony internetowej HTML5 dołącz się do dyskusji na ten temat.