Chciałbym tutaj omówić bardziej szczegółowo podstawowe znaczniki HTML, dzięki którym będziemy w stanie zbudować nasza pierwszą stronę internetową. Oczywiście tych znaczników w kodzie strony www możemy stosować znacznie więcej ale zacznijmy od sześciu podstawowych.
Nagłówki na stronie www to ważny element budowy strony www. Nagłówkami oznaczamy np. tytuły podstron, ważne elementy dalej opisane zwykłym tekstem, tytuły aktualności czy galerii występujących na stronie www. Odpowiednie stosowanie nagłówków ma istotny wpływ na pozycjonowanie strony www. Mamy dostępnych 6 nagłówków.
1 2 3 4 5 6 7 8 9 10 11 |
<h1>Przykład h1</h1> <h2>Przykład h2</h2> <h3>Przykład h3</h3> <h4>Przykład h4</h4> <h5>Przykład h5</h5> <h6>Przykład h6</h6> |
Efekt:
Nagłówek h1 w budowie stron internetowych jest najważniejszym i ten znacznik powinniśmy stosować tylko raz na danej podstronie. Powinien jak najdokładniej opisywać zawartość danej strony www. Odpowiednio drugim znacznikiem co do “ważności” na stronie jest h2 i powinniśmy go stosować w ograniczonej liczbie, następnie h3, h4 itd.
Nagłówki muszą odpowiadać treści strony www, czyli jeśli wstawimy <h1>Fryzjer Olsztyn</h1> treść danej podstrony musi opisywać właśnie tę frazę a wiec strona musi opisywać salon fryzjerski z siedzibą w Olsztynie. Oczywiście każdy nagłówek może dowolnie wyglądać w zależności jakie właściwości przypiszemy temu elementowi w stylach CSS czy bezpośrednio na stronie stosując:
1 |
<h3 style="color:#ff0000">Przykład h3</h3> |
Kolejnym elementem, który chciałbym omówić to znacznik kodu HTML “<p>”. Ten znacznik formatuje nam treść strony internetowej, w skrócie daje przerwę w tekście.
1 2 3 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
Efekt:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Również ten znacznik może wyglądać dowolnie, w zależności jak opiszemy go w arkuszu stylów strony www. Każdy znacznik HTML może wyglądać dowolnie, może dowolnie zachowywać się po najechaniu myszą itd. Mamy ograniczoną ilość znaczników kodu HTML lecz mogą one być sformatowane na miliony sposobów.
Ogólną zasadą znacznika “<p>” jest to, że powinien obejmować treść na witrynie internetowej.
Znacznik kodu HTML <strong> również dotyczy treści strony www. Wyróżnia nam fragment artykułu, odpowiednie stosowanie znacznika kodu HTML <strong> ma wpływ na pozycjonowanie strony internetowej. Wyróżniamy tym znacznikiem wyłącznie frazy kluczowe, ważne elementy treści. Znacznik <strong> nie ma takiej mocy jak nagłówki <h1> lecz warto je stosować, dla czytelników jak i robotów Google. Warto dbać o wygląd samej treści danego artykułu tak by był czytelny i ładnie sformatowany. Pamiętajmy, że nasza strona musi mieć atrakcyjną szatę graficzną ale i także czytelną i odpowiednio zredagowaną treść.
1 |
<strong>Przykład</strong> |
Efekt:
Znacznik linku, hiperłącze pozwala nam na nawigację w obrębie naszej strony internetowej jak i całej dostępnej sieci czyli linków zewnętrznych. Dzięki temu znacznikowi kodu HTML jesteśmy w stanie zmienić podstronę. Ten element również ma znaczenie jeśli chodzi o pozycjonowanie strony www. Odpowiednie zastosowanie tego znacznika na stronie www ułatwia indexację całej witryny robotom a także pozwala użytkownikiem na zapoznanie się z całą treścią serwisu internetowego.
1 |
<a href="http://www.wp.pl">treść linku</a> |
Efekt:
Podobnie jak w powyższych przykładach ten znacznik może dowolnie prezentować się na stronie internetowej, ponadto posiada dodatkowe atrybuty kodu HTML, którymi możemy opisać ten znacznik.
1 |
<a href="http://www.wp.pl" target="_blank" title="tytuł linku" rel="nofollow">treść linku</a> |
Atrybuty znacznika “<a>” kodu HTML:
Jednym z elementów, który ma duży wpływ na pozycjonowanie strony www to właśnie linki. Dzięki znacznikowi <a> oddajemy głos na na dana stronę. Siła i ilość tych głosów jest jednym z podstawowych elementów pozycjonowania stron internetowych. Więcej o pozycjonowaniu znajdziecie tutaj.
Tym znacznikiem HTML opisujemy, formatujemy budowę strony www. Tworzymy kolumny, topy czy opisujemy wygląd dołu naszej strony internetowej. Znaczniki <div> pozycjonują nam wcześniej wymienione znaczniki.
1 |
<div style="width:200px; height:150px; background:#0CF; border:1px solid #06F; padding:15px;">Przykładowa treść</div> |
Efekt:
Tym znacznikiem możemy formatować treść a także budować menu naszej stronie czy formatować wygląd całej strony. Możemy posługiwać się nim podobnie jak znacznikiem “<div>” jak i formatować treść strony www. Stosujemy go przy powtarzalnych elementach na stronie a więc każde menu powinno zawierać się w tym znaczniku, możemy opisać nim również aktualności czy galerię.
1 2 3 4 5 |
<ul> <li>Przykład</li> <li>Przykład</li> <li>Przykład</li> </ul> |
Efekt:
Wszystkie znaczniki możemy łączyć ze sobą np. menu:
1 2 3 4 5 |
<ul> <li style="float:left; margin-right:5px;"><a href="" style="float:left; padding:5px 10px; background:#09F; color:#FFF">Przykład</a></li> <li style="float:left; margin-right:5px;"><a href="" style="float:left; padding:5px 10px; background:#09F; color:#FFF">Przykład</a></li> <li style="float:left; margin-right:5px;"><a href="" style="float:left; padding:5px 10px; background:#09F; color:#FFF">Przykład</a></li> </ul> |
Efekt:
Odpowiednio stosując te podstawowe znaczniki HTML stron internetowych będziecie w stanie stworzyć prawidłowo zbudowaną stronę internetową, która będzie dobrze prezentować się w praktycznie każdej przeglądarce stron www. Oczywiście w raz z doświadczeniem poznacie kolejne bardzo przydatne znaczniki kodu HTML i nauczycie się je odpowiednio wykorzystywać. Moja propozycja to zacząć właśnie od tych sześciu, które opisałem powyżej.
Komentarze zostały wyłączone.
Kod HTML jest językiem zrozumiałym dla przeglądarek internetowych, pozwalającym na publikację dowolnej treści w internecie. Dzięki temu kodowi budujemy strukturę całej strony www. Określamy rodzaj kodowania dla znaków, określamy gdzie ma znaleźć się logo, menu, kolumny lewa, środkowa i prawa, określa czy w ogóle jakieś kolumny będą występować na stronie www, określa dół strony (footer) i wszystkie elementy zawarte na stronie. Następnie tą strukturę opisujemy arkuszem stylów CSS, nadajemy jej …
W tym artykule chciałbym przedstawić Wam krok po kroku stworzenie pierwszej strony internetowej. Pominiemy w tym przypadku projekt graficzny, zajmiemy się tylko kodem HTML strony www. Ogólne założenia to witryna internetowa ma posiadać nagłówek, trzy kolumny na treść oraz element dołu strony (footer). Przyjęły się nazwy w języku angielskim a więc nagłówek strony www, element odpowiedzialny za wyświetlanie topu strony nazywamy headerem, element dołu strony to footer. Panele boczne nazywamy …
Jedna strona dla wszystkich Urządzeń. Tworzymy responsywne strony internetowe Responsive web design (RWD). Nowatorskie, z oryginalną, pomysłową szatą graficzną, wyposażone w system zarządzania treścią (CMS). Przejrzyj naszą stronę na smartfonie. Jeśli jeszcze nie masz dochodowej mobilnej strony internetowej, nie czekaj! Napisz do nas lub zadzwoń. Stworzymy ją dla Ciebie!
Projektujemy nowoczesne, responsywne strony internetowe Olsztyn z zachowaniem standardów UX i UI. Wyposażone w system zarządzania treścią (CMS), ułatwiający aktualizację, modyfikację jak i rozbudowę strony. Bazujemy na najnowszych technologiach programistycznych. Dbamy o estetykę naszych projektów, prostotę i użyteczność oraz przejrzystą nawigację.