HTML: tekst, nagłówki i nacisk!

article-thumbnail

Tekst, nagłówki i nacisk!

Tekst w języku HTML, możemy dodawać bez żadnych znaczników. Jednak nie będzie on wtedy wyglądał przystępnie – tutaj warto pamiętać, że przeglądarki nie działają jak pakiety biurowe, więc aby zdefiniować odstęp pomiędzy kolejnymi wierszami, powinniśmy użyć znacznika <br>, by zaś cały tekst opisać jako akapit, powinniśmy użyć znacznika <p>.

Do zapisu nagłówków używamy znacznika blokowego <h$>, gdzie znak dolara $ oznacza cyfrę od 1 do 6. Nagłówki posiadają domyślny wygląd, zdefiniowany przez przeglądarkę. Żeby zachować formatowanie, takie jakie mamy w edytorze kodu, używamy znacznika blokowego <pre>. Do zacytowania pewnego fragmentu tekstu służy znacznik blokowy <blockquote>.

Tekst możemy zdefiniować również za pomocą poniżej opisanych elementów liniowych:

By dać kursywę na tekst, używamy znacznika <i>, zaś aby pogrubić tekst, używamy znacznika <b>. Dokładnie ten sam wygląd można zrealizować odpowiednio za pomocą <em> (nacisk) oraz <strong> (siła), przy czym te znaczniki też są artykułowane przez syntezator mowy i mają znaczenie semantyczne.

Żeby zapisać tekst w indeksach używamy znaczników <sub> (dolny indeks) oraz <sup> (górny indeks). Jeśli chcemy zaznaczyć, że jakiś tekst został usunięty, używamy znacznika <del>, a jeśli wstawiony, to <ins>. Podkreślenie tekstu realizujemy za pomocą znacznika <mark>.

Prezentacja znaczników formatujących tekst – kod HTML poniżej
<!DOCTYPE html> 
<html> 
  <!-- znacznik head -->
  <body> 
    <h1>Tekst, nagłówki i nacisk!</h1> 
    <pre> Tutaj tekst formatowany w edytorze kodu </pre> 
    Tekst złamany <br> znacznikiem &lt;br&gt; 
    <h2>Cytat - znacznik semantyczny &lt;blockquote&gt;</h2> 
    <blockquote cite="https://pl.wikiquote.org/wiki/Linus_Torvalds"> 
      Chciałbym powiedzieć, że <em>wiedziałem,</em> że tak się <i>stanie</i>, 
      że to <strong>wszystko</strong> jest częścią <del>dużego</del> 
      <ins><b>wielkiego</b></ins> planu zdobycia <mark>władzy</mark> nad światem.<br><br> 
      <cite>Linus Torvalds</cite> 
    </blockquote> 
    <h2>Kod - witaj świecie w C++ w &lt;pre&gt; i &lt;code&gt;</h2> 
    <pre> 
    <code> #include &lt;iostream&gt; int main() { std::cout << "Hello, World!"; return 0; } </code> 
    </pre> 
  </body> 
</html>

Znaki specjalne

Część znaków w języku HTML pełni ważną rolę. Na przykład znaki, takie jak <, > czy &. Powinniśmy zasymulować je w postaci odwołania do systemu znaków. Możemy to zrobić na trzy sposoby:

Na przykładzie znaku <

  1. Poprzedzając nazwę znaku specjalnego znakiem & &lt;
  2. Zapisując w systemie dziesiętnym przy użyciu przedrostka &# &#60;
  3. Zapisując w systemie szesnastkowym przy użyciu przedrostka &#x &#x3C;
std::cout &lt;&lt; "Hello! #1";<br>
std::cout &#60;&#60; "Hello! #2";<br>
std::cout &#x3C;&#x3C; "Hello! #3";<br>

W internecie możemy znaleźć wiele zestawień znaków specjalnych języka HTML. Jedno z nich znajduje się na stronie:

https://www.w3schools.com/charsets/ref_utf_punctuation.asp.

Jacek Woźniak

Ostatnio zaktualizowane: 27 maja 2020

Egzamin EE.09, Egzamin INF.03, HTML