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.

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

  2. ZNACZNIKI P

    W celu umieszczenia tekstu na stronie, który nie jest nagłówkiem jak <h1>, <h2> etc. należy skorzystać ze znacznika <p>.

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

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

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

Add a Comment

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *