The Blog

By / Egzamin E.14Egzamin EE.09HTML

HTML: tekst, nagłówki i nacisk!

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>.


Zaprezentowanie znaczników formatujących tekst – kod HTML:

<!DOCTYPE html>
<html>
(...)
<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 <.

poprzedzając nazwę znaku specjalnego znakiem &
&lt;

std::cout &lt;&lt; "Hello! #1";<br>

zapisując w systemie dziesiętnym przy użyciu przedrostka &# &#60; std::cout &#60;&#60; “Hello! #2”;<br>


zapisując w systemie szesnastkowym przy użyciu przedrostka &#x &#x3C; 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.


Autor tekstu: Jacek Woźniak

kompendiumEE09

Jestem projektem wykonanym przez czwórkę znajomych mających podobne zainteresowania. Możesz znaleźć wszystkie materiały z zakresu E14 na stronie: http://danda.e-kei.pl/jacek/kompendiumEE_IX/