Kurs HTML

Czym jest paragraf w HTML?

Paragraf (akapit) to podstawowy element tekstowy w HTML, który służy do grupowania i organizowania treści tekstowej. W HTML paragraf definiuje się za pomocą znacznika <p>. Jest to jeden z najczęściej używanych elementów na stronach internetowych, ponieważ większość treści tekstowej jest prezentowana właśnie w formie paragrafów.

Podstawowe użycie znacznika <p>

Aby utworzyć paragraf, umieść tekst pomiędzy znacznikami otwierającym <p> i zamykającym </p>:

<p>To jest przykładowy paragraf tekstu. Cała ta treść będzie wyświetlana jako jeden akapit.</p>

<p>To jest drugi paragraf. Zwróć uwagę, że przeglądarki automatycznie dodają odstęp między paragrafami.</p>

Formatowanie paragrafów

Przeglądarki internetowe domyślnie formatują paragrafy w następujący sposób:

• Dodają margines (odstęp) przed i po każdym paragrafie
• Traktują wiele spacji jako jedną spację
• Ignorują znaki nowej linii wewnątrz paragrafu
• Automatycznie zawijają tekst, gdy osiągnie on krawędź okna przeglądarki

Przykład pokazujący, jak przeglądarka interpretuje spacje i znaki nowej linii:

<p>Ten    tekst    ma    wiele    spacji    i
kilka
znaków
nowej
linii, ale przeglądarka wyświetli go jako ciągły tekst z pojedynczymi spacjami.</p>

Powyższy kod zostanie wyświetlony jako:

Atrybuty znacznika <p>

Znacznik <p> może zawierać różne atrybuty HTML, które modyfikują jego zachowanie lub wygląd. W HTML5 większość atrybutów formatujących (jak align) jest przestarzała i powinna być zastąpiona przez CSS, ale warto je znać:

Atrybut align (przestarzały w HTML5)

Atrybut align określa wyrównanie tekstu w paragrafie. Może przyjmować wartości: left, right, center lub justify.

<p align="center">Ten tekst będzie wyśrodkowany.</p>
<p align="right">Ten tekst będzie wyrównany do prawej.</p>
<p align="justify">Ten tekst będzie wyjustowany, co oznacza, że będzie wyrównany zarówno do lewej, jak i do prawej krawędzi.</p>

Uwaga: Chociaż powyższy kod zadziała w większości przeglądarek, w HTML5 zaleca się używanie CSS do formatowania tekstu:

<p style="text-align: center;">Ten tekst będzie wyśrodkowany.</p>
<p style="text-align: right;">Ten tekst będzie wyrównany do prawej.</p>
<p style="text-align: justify;">Ten tekst będzie wyjustowany.</p>

Globalne atrybuty HTML

Znacznik <p> może również zawierać globalne atrybuty HTML, takie jak:

• id - unikalny identyfikator elementu
• class - klasa CSS dla elementu
• style - wewnętrzne style CSS
• title - dodatkowa informacja o elemencie (wyświetlana jako podpowiedź)
• lang - język zawartości elementu
• dir - kierunek tekstu (ltr - od lewej do prawej, rtl - od prawej do lewej)

<p id="intro" class="important" style="color: blue;" title="Wprowadzenie">
    To jest paragraf wprowadzający z różnymi atrybutami.
</p>

Zagnieżdżanie elementów w paragrafach

Wewnątrz paragrafów można umieszczać inne elementy HTML, takie jak elementy formatujące tekst (<strong>, <em>), linki (<a>), obrazy (<img>) i inne elementy liniowe.

<p>
    To jest paragraf z <strong>pogrubionym tekstem</strong>, 
    <em>tekstem pochylonym</em> i 
    <a href="https://example.com">linkiem do innej strony</a>.
</p>

Uwaga: Nie można zagnieżdżać elementów blokowych (takich jak <div>, <h1>-<h6>, <p>, <ul>, <ol>) wewnątrz paragrafów. Takie zagnieżdżenie jest niepoprawne składniowo w HTML.

Puste paragrafy

Czasami możesz chcieć utworzyć pusty paragraf, aby dodać dodatkowy odstęp między elementami. W HTML można to zrobić na kilka sposobów:

<p></p>                 <!-- Pusty paragraf -->
<p> </p>             <!-- Paragraf z nierozdzielającą spacją -->

Uwaga: Chociaż powyższe metody działają, lepszym rozwiązaniem jest użycie CSS do kontrolowania odstępów między elementami (np. margin, padding).

Paragrafy a inne elementy tekstowe

Warto zrozumieć różnicę między paragrafami a innymi elementami tekstowymi w HTML:

• <p> - paragraf, element blokowy z odstępami przed i po
• <br> - łamanie linii, nie tworzy nowego akapitu, tylko przechodzi do nowej linii
• <div> - ogólny kontener blokowy, nie ma semantycznego znaczenia jako paragraf
• <span> - ogólny kontener liniowy, używany do formatowania fragmentów tekstu

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz stronę HTML z trzema paragrafami tekstu o różnym wyrównaniu (lewo, środek, prawo) i dodaj formatowanie do wybranych fragmentów tekstu.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykład paragrafów</title>
    <style>
        .left {
            text-align: left;
        }
        .center {
            text-align: center;
        }
        .right {
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>Przykłady paragrafów</h1>
    
    <p class="left">
        Ten paragraf jest wyrównany do <strong>lewej strony</strong>. 
        Jest to domyślne wyrównanie tekstu w HTML. Większość treści na stronach 
        internetowych jest wyrównana w ten sposób, ponieważ jest to 
        najłatwiejsze do czytania dla użytkowników.
    </p>
    
    <p class="center">
        Ten paragraf jest <em>wyśrodkowany</em>. 
        Wyrównanie do środka jest często używane dla nagłówków, 
        cytatów lub innych elementów, które chcemy wyróżnić na stronie.
    </p>
    
    <p class="right">
        Ten paragraf jest wyrównany do <strong><em>prawej strony</em></strong>. 
        Takie wyrównanie jest rzadziej używane, ale może być przydatne 
        w niektórych przypadkach, na przykład przy podpisach, datach 
        lub innych elementach, które chcemy umieścić po prawej stronie.
    </p>
</body>
</html>