Centrum wiedzy o technologiach i pracy w IT
jak pogrubić tekst html / Fot. Zakharchuk, Shutterstock.com

Jak pogrubić tekst HTML? 3 proste techniki dla początkujących

Ostatnia aktualizacja 17 maja, 2024

Jednym z podstawowych sposobów na wyróżnienie tekstu w HTML jest jego pogrubienie. Pogrubiony tekst przyciąga uwagę użytkowników i pozwala wyróżnić kluczowe informacje, takie jak nagłówki, ważne daty czy istotne komunikaty. Dzięki odpowiedniemu użyciu pogrubienia możemy poprawić czytelność i zrozumiałość naszych treści, co jest szczególnie ważne w kontekście szybko przyswajanych informacji w internecie. Jak pogrubić tekst html?

Nie udało się zapisać Twojej subskrypcji. Spróbuj ponownie.
Udało się! Widzimy się niebawem – newsletter wysyłamy w każdy wtorek

Otrzymuj za darmo unikalne poradniki, dane i wiedzę o pracy w IT – dostarczane co tydzień

Klikając “Zapisz mnie” wyrażasz zgodę na otrzymywanie e-maili od redakcji, a także ofert partnerów oraz akceptujesz naszą Politykę prywatności.

Jak pogrubić tekst html? Znacznik bold

Jednym z najprostszych sposobów na pogrubienie tekstu w HTML jest użycie tagu . Tego tagu używa się do otoczenia tekstu, który ma być pogrubiony, co powoduje jego wyświetlenie w przeglądarce w bardziej wyrazisty sposób. Tag nie niesie za sobą żadnego znaczenia semantycznego, co oznacza, że przeglądarki i czytniki ekranu traktują go jedynie jako instrukcję wizualną do pogrubienia tekstu.

Przykład użycia tagu

<!DOCTYPE html>
<html>
<head>
    <title>Przykład użycia tagu b</title>
</head>
<body>
    <p>To jest <b>pogrubiony</b> tekst w akapicie.</p>
    <p>Inny przykład: <b>ważne informacje</b> są pogrubione, aby przyciągnąć uwagę.</p>
</body>
</html>

W powyższym przykładzie tekst “pogrubiony” oraz “ważne informacje” zostaną wyświetlone jako pogrubione w przeglądarce. Użycie tagu jest bardzo intuicyjne i nie wymaga dodatkowych stylizacji czy ustawień. Jednak warto pamiętać, że nie nadaje tekstowi żadnego specjalnego znaczenia i jest używany wyłącznie do celów wizualnych.

Pogrubienie tekstu w html znacznikiem strong

Tag jest kolejnym sposobem na pogrubienie tekstu w HTML, ale w przeciwieństwie do tagu , ma on semantyczne znaczenie. Używając , wskazujemy, że tekst wewnątrz tego tagu jest ważny lub ma szczególne znaczenie. Przeglądarki wyświetlają tekst otoczony tagiem jako pogrubiony, ale czytniki ekranu interpretują go jako bardziej istotny, co może wpłynąć na sposób, w jaki prezentują ten tekst użytkownikom.

Przykład kodu HTML pokazujący, jak używać do pogrubienia tekstu

<!DOCTYPE html>
<html>
<head>
    <title>Przykład użycia tagu strong</title>
</head>
<body>
    <p>To jest <strong>ważny</strong> tekst w akapicie.</p>
    <p>Inny przykład: <strong>nie przegap tej informacji</strong>, ponieważ jest ona kluczowa.</p>
</body>
</html>

W powyższym przykładzie tekst “ważny” oraz “nie przegap tej informacji” zostaną wyświetlone jako pogrubione w przeglądarce, podobnie jak w przypadku użycia tagu . Jednakże, w tym przypadku, przeglądarki i czytniki ekranu będą traktować te fragmenty tekstu jako bardziej znaczące, co może wpłynąć na sposób ich odczytu przez osoby korzystające z technologii wspomagających.

Jak pogrubić tekst html z wykorzystaniem CSS?

CSS to język stosowany do opisywania wyglądu i formatowania dokumentów HTML. Umożliwia on oddzielenie treści od prezentacji, co zwiększa elastyczność i możliwości stylizacji stron internetowych. W CSS, aby pogrubić tekst, można użyć właściwości font-weight z wartością bold. Wartość bold jest najczęściej używana do standardowego pogrubienia tekstu, ale można również użyć numerycznych wartości font-weight, takich jak 700, aby uzyskać podobny efekt. Numeryczne wartości pozwalają na precyzyjne określenie grubości tekstu, gdzie 400 oznacza normalną grubość, a 700 odpowiada pogrubionemu tekstowi.

<!DOCTYPE html>
<html>
<head>
    <title>Przykład użycia font-weight</title>
    <style>
        .bold-text {
            font-weight: bold;
        }
        .bold-700 {
            font-weight: 700;
        }
    </style>
</head>
<body>
    <p class="bold-text">To jest pogrubiony tekst przy użyciu font-weight: bold.</p>
    <p class="bold-700">To jest pogrubiony tekst przy użyciu font-weight: 700.</p>
</body>
</html>

W powyższym przykładzie klasa bold-text używa font-weight: bold;, a klasa bold-700 używa font-weight: 700;, aby uzyskać pogrubiony tekst.

Zobacz: CSS border inside – stwórz ten styl krok po kroku

Jak zmienić czcionkę w HTML?

Wiesz już jak pogrubić tekst w HTML. Podobnym problemem, przed którym możesz stanąć, jest zmiana czcionki w HTML. Zmiana czcionki w HTML jest możliwa dzięki wykorzystaniu CSS, a dokładnie właściwości font-family, która definiuje listę preferowanych czcionek. Właściwość font-family akceptuje listę nazw czcionek, oddzielonych przecinkami. Zaleca się podanie kilku alternatyw, w tym co najmniej jednej czcionki ogólnej, takiej jak serif, sans-serif, monospace, cursive lub fantasy.

<!DOCTYPE html>
<html>
<head>
    <title>Przykład zmiany czcionki</title>
    <style>
        .custom-font {
            font-family: 'Arial', 'Helvetica', sans-serif;
        }
    </style>
</head>
<body>
    <p class="custom-font">To jest tekst z czcionką Arial, a w przypadku jej braku Helvetica lub domyślną czcionką bezszeryfową.</p>
</body>
</html>

W powyższym przykładzie, klasa custom-font ustawia czcionkę tekstu na Arial. Jeśli Arial nie jest dostępna, przeglądarka użyje Helvetica, a jeśli i ta czcionka nie jest dostępna, zastosuje dowolną dostępną czcionkę bezszeryfową.

CSS pozwala również na używanie niestandardowych czcionek dzięki regule @font-face. Dzięki temu możemy załadować czcionkę z zewnętrznego źródła, takiego jak Google Fonts, lub bezpośrednio z naszego serwera.

Zobacz: Line-height w CSS – klucz do lepszej czytelności tekstów

Jak ustawić rozmiar czcionki w HTML?

Ustawienie rozmiaru czcionki w HTML również odbywa się za pomocą CSS. Właściwość font-size pozwala na precyzyjne określenie rozmiaru tekstu. Można użyć różnych jednostek miary, takich jak piksele (px), em (em), rem (rem), procenty (%), czy punkty (pt). Każda z tych jednostek ma swoje zastosowania i charakterystyki.

Możemy jej użyć w ramach klas CSS lub bezpośrednio na elementach HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Przykład ustawienia rozmiaru czcionki</title>
    <style>
        .small-text {
            font-size: 12px;
        }
        .medium-text {
            font-size: 16px;
        }
        .large-text {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p class="small-text">To jest tekst o rozmiarze 12px.</p>
    <p class="medium-text">To jest tekst o rozmiarze 16px.</p>
    <p class="large-text">To jest tekst o rozmiarze 24px.</p>
</body>
</html>

W powyższym przykładzie, klasy CSS small-text, medium-text, i large-text definiują różne rozmiary czcionki dla poszczególnych akapitów.

Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.

Total
0
Shares
_podobne artykuły