HTML - tagi fraz

Tagi fraz zostały desicolgnowane do określonych celów, chociaż są wyświetlane w podobny sposób, jak inne podstawowe tagi, takie jak <b>, <i>, <pre>, i <tt>, widziałeś w poprzednim rozdziale. Ten rozdział poprowadzi Cię przez wszystkie ważne tagi fraz, więc zacznijmy je przeglądać jeden po drugim.

Podkreślony tekst

Wszystko, co pojawia się w środku <em>...</em> element jest wyświetlany jako wyróżniony tekst.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
	
</html>

To da następujący wynik -

Zaznaczony tekst

Wszystko, co pojawia się w środku <mark>...</mark> element, jest wyświetlany jako oznaczony żółtym tuszem.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
	
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
	
</html>

To da następujący wynik -

Silny tekst

Wszystko, co pojawia się w środku <strong>...</strong> element jest wyświetlany jako ważny tekst.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
	
</html>

To da następujący wynik -

Skrót tekstu

Możesz skrócić tekst, umieszczając go wewnątrz znaczników otwierających <abbr> i zamykających </abbr>. Jeśli występuje, atrybut tytułu musi zawierać ten pełny opis i nic więcej.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
	
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
	
</html>

To da następujący wynik -

Element akronimu

Plik <acronym> element pozwala wskazać, że tekst między tagami <acronym> i </acronym> jest akronimem.

Obecnie główne przeglądarki nie zmieniają wyglądu zawartości elementu <acronym>.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
	
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
	
</html>

To da następujący wynik -

Kierunek tekstu

Plik <bdo>...</bdo> element oznacza Bi-Directional Override i służy do zastąpienia bieżącego kierunku tekstu.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

To da następujący wynik -

Specjalne warunki

Plik <dfn>...</dfn>element (lub element definicji HTML) pozwala określić, że wprowadzasz specjalny termin. Jego użycie jest podobne do kursywy w środku akapitu.

Zazwyczaj element <dfn> użyjesz przy pierwszym wprowadzeniu kluczowego terminu. Najnowsze przeglądarki wyświetlają zawartość elementu <dfn> kursywą.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
	
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
	
</html>

To da następujący wynik -

Cytowanie tekstu

Jeśli chcesz zacytować fragment z innego źródła, umieść go pomiędzy <blockquote>...</blockquote> tagi.

Tekst wewnątrz elementu <blockquote> jest zwykle wcięty od lewej i prawej krawędzi otaczającego tekstu, a czasami używa się czcionki kursywą.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
	
</html>

To da następujący wynik -

Krótkie notowania

Plik <q>...</q> element jest używany, gdy chcesz dodać podwójny cudzysłów w zdaniu.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
	
</html>

To da następujący wynik -

Cytaty tekstowe

Jeśli cytujesz tekst, możesz wskazać źródło, umieszczając go między otworem <cite> tag i zamykanie </cite> etykietka

Jak można się spodziewać po publikacji drukowanej, zawartość elementu <cite> jest domyślnie wyświetlana kursywą.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

To da następujący wynik -

Kod komputerowy

Każdy kod programistyczny, który ma pojawić się na stronie internetowej, powinien być umieszczony wewnątrz <code>...</code>tagi. Zwykle zawartość elementu <code> jest prezentowana czcionką o stałej szerokości, tak jak kod w większości książek o programowaniu.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

To da następujący wynik -

Tekst klawiatury

Kiedy mówisz o komputerach, jeśli chcesz powiedzieć czytelnikowi, aby wprowadził jakiś tekst, możesz użyć <kbd>...</kbd> element wskazujący, co należy wpisać, jak w tym przykładzie.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

To da następujący wynik -

Programowanie zmiennych

Ten element jest zwykle używany w połączeniu z <pre> i <code> elementy wskazujące, że zawartość tego elementu jest zmienną.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

To da następujący wynik -

Wyjście programu

Plik <samp>...</samp> element wskazuje przykładowe dane wyjściowe programu, skryptu itp. Ponownie jest używany głównie podczas dokumentowania koncepcji programowania lub kodowania.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

To da następujący wynik -

Tekst adresu

Plik <address>...</address> element służy do przechowywania dowolnego adresu.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>

To da następujący wynik -