Formatowanie tekstu z Html 5

By /

Html

HTML5 oferuje szeroki zakres elementów służących do formatowania tekstu, co pozwala twórcom stron na efektywne przekazywanie informacji oraz nadawanie dokumentom odpowiedniej struktury i stylu. Poprzez użycie różnorodnych znaczników, możliwe jest wyróżnienie ważnych fragmentów tekstu, organizacja treści w listy czy definiowanie nagłówków, co wspomaga czytelność i dostępność treści.

Przykład formatowania tekstu w HTML5

Poniżej znajduje się przykład dokumentu HTML5, który demonstruje użycie różnych elementów służących do formatowania tekstu, wraz z komentarzami wyjaśniającymi ich zastosowanie.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Formatowanie tekstu w HTML5</title>
</head>
<body>
    <!-- Nagłówek główny strony -->
    <h1>Witaj w świecie HTML5</h1>
    
    <!-- Podnagłówek, wprowadzenie do sekcji -->
    <h2>Formatowanie tekstu</h2>
    
    <!-- Akapit tekstu -->
    <p>
        HTML5 oferuje <strong>mnóstwo elementów</strong> 
        do <em>formatowania tekstu</em>, które pomagają w tworzeniu
        <mark>czytelnych</mark> i <del>łatwych</del> 
         <ins>strukturalnych</ins> dokumentów.
    </p>
    
    <!-- Lista wypunktowana -->
    <ul>
        <li><code>&lt;strong&gt;</code> - pogrubienie tekstu</li>
        <li><code>&lt;em&gt;</code> - kursywa, wyróżnienie tekstu</li>
        <li><code>&lt;mark&gt;</code> - zaznaczenie tekstu</li>
        <li><code>&lt;del&gt;</code> - przekreślenie tekstu</li>
        <li><code>&lt;ins&gt;</code> - podkreślenie dodanego tekstu</li>
    </ul>
    
    <!-- Cytat -->
    <blockquote cite="http://przykladowy.cytat.pl">
        Cytowanie jest bardzo ważne w kontekście tworzenia treści.
    </blockquote>
    
    <!-- Adres, autor cytatu -->
    <p>— Autor Nieznany</p>
    
    <!-- Wstawienie kodu -->
    <p>Aby dodać obrazek, użyj znacznika <code>&lt;img src="obrazek.jpg"&gt;</code>.</p>
    
</body>
</html>

Wyjaśnienie elementów:

  • <h1> do <h6>: Nagłówki o różnej wielkości, służące do organizacji hierarchii treści na stronie.
  • <p>: Akapit, podstawowy blok tekstu.
  • <strong>: Wyróżnienie tekstu poprzez pogrubienie, zaznacza ważność fragmentu.
  • <em>: Kursywa, podkreśla wyróżnienie tekstu bez nadawania mu dodatkowej ważności.
  • <mark>: Zaznaczenie tekstu, używane do wyróżnienia ważnych fragmentów.
  • <del> i <ins>: Odpowiednio przekreślenie i podkreślenie tekstu, używane do oznaczania zmian w dokumencie.
  • <ul> i <li>: Lista wypunktowana, służy do prezentacji zbioru elementów.
  • <blockquote>: Blok cytatu, używany do wyróżnienia dłuższych cytatów z innych źródeł.
  • <code>: Element preformatowany, służy do prezentacji fragmentów kodu.

Podsumowanie

Formatowanie tekstu w HTML5 umożliwia twórcom stron internetowych efektywne przekazywanie informacji, strukturyzację treści oraz nadanie dokumentom estetycznego wyglądu.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDevelopera w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

 

 

 

Powiązane artykuły

Scroll to Top