Kurs HTML

Dodatkowe znaczniki formatowania tekstu w HTML

Oprócz podstawowych znaczników formatowania tekstu, takich jak <b>, <i>, <u> czy <s>, HTML oferuje wiele innych znaczników, które pozwalają na bardziej specjalistyczne formatowanie tekstu. W tej lekcji poznamy kilka z nich, które są szczególnie przydatne w różnych kontekstach.

Znacznik <mark>

Znacznik <mark> służy do wyróżnienia tekstu, tak jakby został zaznaczony markerem. Przeglądarki domyślnie renderują zawartość <mark> z żółtym tłem.

<p>Oto fragment tekstu z <mark>wyróżnionym fragmentem</mark>.</p>Kopiuj

Znacznik <mark> jest szczególnie przydatny do:

• Podkreślania ważnych fragmentów tekstu
• Pokazywania wyników wyszukiwania na stronie
• Zwracania uwagi na konkretne części tekstu

Znacznik <abbr>

Znacznik <abbr> (od angielskiego "abbreviation") służy do oznaczania skrótów i akronimów. Atrybut title może być użyty do podania pełnej formy skrótu, która pojawi się jako podpowiedź po najechaniu myszką.

<p>Organizacja <abbr title="World Health Organization">WHO</abbr> zajmuje się zdrowiem publicznym.</p>Kopiuj

Znacznik <abbr> pomaga w:

• Poprawie dostępności strony dla osób nieznających skrótów
• Zwiększeniu zrozumiałości tekstu
• Dostarczaniu dodatkowych informacji bez zakłócania przepływu tekstu

Znacznik <cite>

Znacznik <cite> służy do oznaczania tytułów dzieł, takich jak książki, filmy, obrazy, artykuły itp. Przeglądarki domyślnie renderują zawartość <cite> kursywą.

<p>Moją ulubioną książką jest <cite>Władca Pierścieni</cite> J.R.R. Tolkiena.</p>Kopiuj

Znacznik <code>

Znacznik <code> służy do oznaczania fragmentów kodu komputerowego. Przeglądarki domyślnie renderują zawartość <code> czcionką o stałej szerokości (monospace).

<p>Funkcja <code>console.log()</code> wyświetla informacje w konsoli przeglądarki.</p>Kopiuj

Dla dłuższych fragmentów kodu często używa się znacznika <code> w połączeniu ze znacznikiem <pre>, który zachowuje formatowanie tekstu (spacje, znaki nowej linii):

<pre><code>
function powitanie(imie) {
    console.log("Witaj, " + imie + "!");
}

powitanie("Jan");
</code></pre>Kopiuj

function powitanie(imie) {
    console.log("Witaj, " + imie + "!");
}

powitanie("Jan");
Kopiuj

Znacznik <pre>

Znacznik <pre> (od angielskiego "preformatted") służy do wyświetlania tekstu preformatowanego, zachowując wszystkie spacje, tabulatory i znaki nowej linii. Jest często używany do wyświetlania kodu, ASCII art lub innych tekstów, które wymagają zachowania oryginalnego formatowania.

<pre>
    _    _  _  _    _      
   | |  | || || |  | |     
   | |__| || || |__| | ___ 
   |  __  || ||  __  |/ _ \
   | |  | || || |  | | (_) |
   |_|  |_||_||_|  |_|\___/
</pre>Kopiuj

    _    _  _  _    _      
   | |  | || || |  | |     
   | |__| || || |__| | ___ 
   |  __  || ||  __  |/ _ \
   | |  | || || |  | | (_) |
   |_|  |_||_||_|  |_|\___/

Znacznik <kbd>

Znacznik <kbd> (od angielskiego "keyboard") służy do oznaczania tekstu, który powinien być wprowadzony przez użytkownika. Jest często używany w instrukcjach i dokumentacjach.

<p>Aby zapisać dokument, naciśnij <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>Kopiuj

Znacznik <samp>

Znacznik <samp> (od angielskiego "sample") służy do oznaczania przykładowego wyniku działania programu lub skryptu.

<p>Po uruchomieniu programu zobaczysz: <samp>Hello, World!</samp></p>Kopiuj

Znacznik <var>

Znacznik <var> (od angielskiego "variable") służy do oznaczania zmiennych w wyrażeniach matematycznych lub programistycznych.

<p>Wzór na pole trójkąta: <var>A</var> = (<var>b</var> × <var>h</var>) / 2</p>Kopiuj

Znacznik <q>

Znacznik <q> (od angielskiego "quote") służy do oznaczania krótkich cytatów wewnątrz tekstu. Przeglądarki domyślnie dodają cudzysłowy wokół zawartości <q>.

<p>Jak powiedział Einstein: <q>Wyobraźnia jest ważniejsza od wiedzy</q>.</p>Kopiuj

Znacznik <blockquote>

Znacznik <blockquote> służy do oznaczania dłuższych cytatów, które są wyodrębnione z głównego tekstu. Przeglądarki domyślnie dodają wcięcie do zawartości <blockquote>.

<blockquote cite="https://example.com/source">
    <p>To jest dłuższy cytat, który zajmuje kilka linii tekstu. Znacznik blockquote jest używany do formatowania takich dłuższych cytatów.</p>
    <footer>— Autor cytatu</footer>
</blockquote>Kopiuj

Znacznik <dfn>

Znacznik <dfn> (od angielskiego "definition") służy do oznaczania terminu, który jest definiowany w tekście.

<p><dfn>HTML</dfn> to język znaczników używany do tworzenia stron internetowych.</p>Kopiuj

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz stronę z instrukcją obsługi prostego programu, używając różnych znaczników formatowania tekstu poznanych w tej lekcji.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Instrukcja Obsługi Edytora Tekstu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        .shortcut {
            background-color: #f5f5f5;
            padding: 2px 5px;
            border-radius: 3px;
            border: 1px solid #ddd;
        }
        code {
            background-color: #f8f8f8;
            padding: 2px 4px;
            border-radius: 3px;
        }
        pre {
            background-color: #f8f8f8;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        mark {
            background-color: #ffffcc;
        }
    </style>
</head>
<body>
    <h1>Instrukcja Obsługi <cite>SimpleEdit</cite></h1>
    
    <p><dfn>SimpleEdit</dfn> to prosty edytor tekstu, który umożliwia tworzenie i edycję dokumentów tekstowych.</p>
    
    <h2>Podstawowe funkcje</h2>
    
    <h3>Tworzenie nowego dokumentu</h3>
    <p>Aby utworzyć nowy dokument, naciśnij <kbd class="shortcut">Ctrl</kbd> + <kbd class="shortcut">N</kbd> lub wybierz z menu <mark>Plik > Nowy</mark>.</p>
    
    <h3>Otwieranie istniejącego dokumentu</h3>
    <p>Aby otworzyć istniejący dokument, naciśnij <kbd class="shortcut">Ctrl</kbd> + <kbd class="shortcut">O</kbd> lub wybierz z menu <mark>Plik > Otwórz</mark>.</p>
    
    <h3>Zapisywanie dokumentu</h3>
    <p>Aby zapisać dokument, naciśnij <kbd class="shortcut">Ctrl</kbd> + <kbd class="shortcut">S</kbd> lub wybierz z menu <mark>Plik > Zapisz</mark>.</p>
    
    <h2>Formatowanie tekstu</h2>
    
    <p>SimpleEdit obsługuje podstawowe formatowanie tekstu za pomocą skrótów klawiaturowych:</p>
    <ul>
        <li><kbd class="shortcut">Ctrl</kbd> + <kbd class="shortcut">B</kbd> - <strong>pogrubienie</strong></li>
        <li><kbd class="shortcut">Ctrl</kbd> + <kbd class="shortcut">I</kbd> - <em>kursywa</em></li>
        <li><kbd class="shortcut">Ctrl</kbd> + <kbd class="shortcut">U</kbd> - <u>podkreślenie</u></li>
    </ul>
    
    <h2>Przykładowy kod</h2>
    
    <p>SimpleEdit obsługuje również podświetlanie składni dla różnych języków programowania. Na przykład, dla <abbr title="JavaScript">JS</abbr>:</p>
    
    <pre><code>
function powitanie() {
    var imie = document.getElementById("imie").value;
    alert("Witaj, " + imie + "!");
}
    </code></pre>
    
    <p>Po uruchomieniu tego kodu, zobaczysz okno dialogowe z komunikatem: <samp>Witaj, [twoje imię]!</samp></p>
    
    <h2>Opinie użytkowników</h2>
    
    <blockquote>
        <p>SimpleEdit to najlepszy edytor tekstu, jakiego kiedykolwiek używałem. Jest prosty, intuicyjny i ma wszystkie potrzebne funkcje.</p>
        <footer>— Jan Kowalski, programista</footer>
    </blockquote>
    
    <p>Jak powiedział jeden z naszych użytkowników: <q>SimpleEdit zmienił sposób, w jaki piszę kod</q>.</p>
    
    <h2>Wymagania systemowe</h2>
    
    <p>Do uruchomienia programu SimpleEdit potrzebujesz:</p>
    <ul>
        <li>System operacyjny: Windows 10 lub nowszy, macOS 10.15 lub nowszy, Linux z <var>X</var> Window System</li>
        <li>Pamięć RAM: minimum 2 GB</li>
        <li>Miejsce na dysku: minimum 100 MB</li>
    </ul>
</body>
</html>Kopiuj