Podstawowe znaczniki html – tekst

Nadszedł czas na wypełnienie strony przynajmniej tekstem i hiperłączami. Naszą pierwszą stronę winniśmy zawsze nazywać index.html, ponieważ właśnie takiej nazwy szukają serwery internetowe i wczytują ją automatycznie. Zatem utwórzcie nowy plik w edytorze i przygotujcie go do pracy zgodnie z poprzednią lekcją lub za wzór zastosujcie poniższy kod:

[html]

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Moja pierwsza strona</title>
</head>

<body>

</body>
</html>
[/html]

Na początku dodamy nagłówek pierwszego stopnia, którego wygląd jest wstępnie określony przez język html.

[html]

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>To jest nagłówek pierwszego stopnia</h1>
</body>
</html>
[/html]

Nagłówki h mają sześć stopni od h1 do h6.

Teraz dla większej czytelności kodu bedę jedynie prezentował oreślone znaczniki bez całej struktury strony. Proszę pamiętać, że wszystkie znaczniki prezentowane w tym miejscu należy umieszczać w sekcji body.

[html]
<h1>Nagłówek pierwszego stopnia</h1>
<h2>Nagłówek drugiego stopnia</h2>
<h4>Nagłówek czwartego stopnia</h4>
<p>Tekst akapitowy</p>
<p>Kolejny tekst akapitowy</p>
[/html]

Nagłówki na stronach używane są do nadawania tytułów i tworzenia logicznej całości podzielonej na tematy, podtematy i zagadnienia.
Znacznik <p> odpowiada zaś za podział logiczny tekstu na akapity, tak jak jest to zorganizowane w prasie lub literaturze.

Bardzo przydatne znaczniki to <br /> odpowiadający za podział wiersza oraz <hr /> wyświetlający poziomą linię w miejscu wstawienia znacznika.

W łatwy sposób można za pomocą tych znaczników zbudować stronę np. z wierszami wybranego poety, co postaram się zilustrować przykładem.

[html]

<h1>Moje ulubione wiersze</h1>

<h3>Tytuł wiersza 1</h3>

<p>Zwrotka 1</p>

<p> Zwrotka 2</p>

<p>Zwrotka 3</p>

<hr />

<h3>Tytuł wiersza 2</h3>

<p>Zwrotka 1</p>

<p>Zwrotka 2</p>

<Zwrotka 3</p>

[/html]

 

Jeśli odstępy między zwrotkami są zbyt małe można użyć znacznika podziału wiersza <br /> między kolejnymi blokami

[html]

<p>Zwrotka 1</p>

<br />

<p>Zwrotka 2</p>

[/html]


Back to: HTML5 i CSS