Podstawowe znaczniki HTML stron internetowych

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

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.

Efekt:

Przykład h1

Przykład h2

Przykład h3

Przykład h4

Przykład h5
Przykład h6

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:

Przykład h3

Znacznik HTML <p>

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.

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.

<strong> znacznik HTML kodu strony 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ść.

Efekt:

Przykład

Znacznik linku na stronie www <a>

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.

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.

Atrybuty znacznika “<a>” kodu HTML:

  • target=”_blank” – otwiera stronę w nowym oknie
  • title=”tytuł linku” – dodaje tytuł, który pojawia się po najechaniu na dane hiperłącze, może służyć jako podpowiedź dla użytkownika strony www
  • rel=”nofollow” – nie przekazuje “mocy” naszej strony internetowej witrynie do której prowadzi dany link.

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.

Znacznik <div> w kodzie HTML

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.

Efekt:

Przykładowa treść

<ul> ostatni z podstawowych znaczników HTML

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ę.

Efekt:

  • Przykład
  • Przykład
  • Przykład

Wszystkie znaczniki możemy łączyć ze sobą np. menu:

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.

 

 

Zapraszamy do komentowania artykułu "Podstawowe znaczniki HTML stron internetowych" oraz odwiedzin strony www Olsztyn.
28 czerwca, 2013
Powrót

Komentarze zostały wyłączone.

Dodaj komentarz do tego artykułu

Zobacz także

Tworzenie pierwszej strony internetowej

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 …

3 sierpnia, 2013
więcej

Kod HTML strony internetowej

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 …

5 czerwca, 2013
więcej

Archiwum

Archiwa