Podstawowe znaczniki HTML5
Po przeczytaniu tego artykułu będziesz znał podstawowe znaczniki html. Dzięki nim będziesz potrafił umieścić na swojej stronie: zdjęcia, linki i teksty.
-
ZNACZNIKI H1, H2, H3…
Bardzo istotne jest, aby na stronie znajdował się znacznik
<h1>
. Co więcej, taki znacznik może być tylko jeden. Jest to tytuł strony, który ma za zadanie reprezentować całą jej zawartość. Natomiast znaczników<h2>, <h3>
itd. może być już znacznie więcej. Każdy z nich musi być unikalny, jest to tzw. śródtytuł a za nim znajduje się treść. Każdy kolejny nagłówek – stopnia trzeciego<h3>
, czwartego, piątego i szóstego – ma mniejszą ważność. Stosowanie nagłówków hierarchizuje treść na stronie.Spójrz na przykład:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> REYCO - strony internetowe </title> </head> <body> <header> <h1> REYCO - strony internetowe </h1> <p> Jestesmy firma projektujaca nowoczesne, w pelni responsywne strony internetowe </p> </header> <nav> <h2> Nawigacja </h2> </nav> <section> <h2> O nas </h2> <p> Dzialamy na rynku od wielu dlugich lat. Kazdego dnia sie uczymy, zdobywamy wiedze, poganiamy sie, studjujemy. </p> </section> <section> <h2> Nasze publikacje</h2> <p> Zapraszamy do zapoznania sie z naszymi artykulami </p> <article> <h3> Szkielet strony html </h3> <p> W tym artykule poznasz budowe schematu kodu html... </p> </article> <article> <h3> Znaczniki html </h3> <p> Po przeczytaniu tego artykulu bedziesz znal wiele znacznikow... </p> </article> </section> <footer> <h2> Stopka </h2> </footer> </body> </html>
Jeśli chcesz, aby Twoja strona była widoczna w google, trzymaj się tych zasad.
-
ZNACZNIKI P
W celu umieszczenia tekstu na stronie, który nie jest nagłówkiem jak
<h1>, <h2>
etc. należy skorzystać ze znacznika<p>
. -
ZNACZNIKI BR
Znacznik
<br/>
odpowiada za przejście do nowej linii. Stosuje się go wewnątrz paragrafów albo nagłówków.
UWAGA! Znacznik br wygląda tak<br/>
. Jest to jeden z niewielu znaczników, których się już nie zamyka!!!Spójrz na przykład:
<p> Adres: <br/> Pl. Niepodleglosci 26/13 <br/> 65-754 Wroclaw </p>
Gdy wkleisz ten kod do swojej strony, to w oknie przeglądarki zobaczysz ten tekst w 3 linijkach. Bez użycia znacznika
<br/>
, wszystko byłoby napisane w jednej linii. -
ZNACZNIKI A
Aby dodać link do strony należy skorzystać ze znacznika
<a>
. Pomiędzy znacznikami wpisuje się tekst, który ma być widoczny np. „Kliknij mnie”, „Czytaj więcej”, „Zobacz artykuł” itp.
<a> Czytaj wiecej </a>
Aby link miał sens, musi posiadać jeszcze adres, do którego ma się odnosić (tzw. hiperłącze). Aby po kliknięciu na „Czytaj więcej” przenieść się do mojej strony, należy w środku znacznika otwierającego tj.
<a>
dodać:href="https://rejkowicz.pl/"
.Spójrz na przykład:
<a href="https://rejkowicz.pl/"> Czytaj wiecej </a>
Tak dodaje się linki na stronę. Pomiędzy znaczniki
<a>
można wstawić tekst jak w powyższym przykładzie, albo obrazek zamiast tekstu. -
ZNACZNIK IMG
Znacznik
<img/>
pozwala na umieszczenie na stronie zdjęcia.
UWAGA!!! Jest to kolejny znacznik, którego się nie zamyka!!! Aby umieścić zdjęcie należy wewnątrz znacznika wpisać ścieżkę do obrazka:src="link_do_obrazka"
.
<img src="https://rejkowicz.pl/blog/wp-content/uploads/2015/09/9534194705_7dff5a52c5_b1-945x436.jpg" />
Znasz podstawowe znaczniki html. Używając ich oraz szkieletu strony www możesz stworzyć już interesującą stronę. Zadbaj o jej wygląd używając odpowiednich stylów css i gotowe.