HTML - formatowanie

Jeśli używasz edytora tekstu, musisz znać umiejętność pogrubiania, kursywy lub podkreślania tekstu; to tylko trzy z dziesięciu dostępnych opcji wskazujących, jak tekst może wyglądać w HTML i XHTML.

Pogrubiony tekst

Wszystko, co pojawia się w środku <b>...</b> element, jest wyświetlany pogrubioną czcionką, jak pokazano poniżej -

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

To da następujący wynik -

Tekst kursywa

Wszystko, co pojawia się w środku <i>...</i> element jest wyświetlany kursywą, jak pokazano poniżej -

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

To da następujący wynik -

Podkreślony tekst

Wszystko, co pojawia się w środku <u>...</u> element, jest wyświetlany z podkreśleniem, jak pokazano poniżej -

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

To da następujący wynik -

Tekst ostrzeżenia

Wszystko, co pojawia się w środku <strike>...</strike> element jest wyświetlany z przekreśleniem, czyli cienką linią przechodzącą przez tekst, jak pokazano poniżej -

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

To da następujący wynik -

Czcionka o stałej szerokości

Treść pliku <tt>...</tt>element jest napisany czcionką o stałej szerokości. Większość czcionek jest nazywana czcionkami o zmiennej szerokości, ponieważ różne litery mają różne szerokości (na przykład litera „m” jest szersza niż litera „i”). Jednak w przypadku czcionki o stałej szerokości każda litera ma tę samą szerokość.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

To da następujący wynik -

Tekst w indeksie górnym

Treść pliku <sup>...</sup>element jest zapisywany w indeksie górnym; używany rozmiar czcionki jest taki sam jak rozmiar otaczających ją znaków, ale jest wyświetlany o połowę wysokości znaku nad pozostałymi znakami.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

To da następujący wynik -

Tekst indeksu dolnego

Treść pliku <sub>...</sub>element jest zapisywany w indeksie dolnym; używany rozmiar czcionki jest taki sam, jak otaczających ją znaków, ale jest wyświetlany o połowę wysokości znaku pod innymi znakami.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

To da następujący wynik -

Wstawiony tekst

Wszystko, co pojawia się w środku <ins>...</ins> element jest wyświetlany jako wstawiony tekst.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

To da następujący wynik -

Usunięty tekst

Wszystko, co pojawia się w środku <del>...</del> element, jest wyświetlany jako usunięty tekst.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

To da następujący wynik -

Większy tekst

Zawartość <big>...</big> element jest wyświetlany o jeden rozmiar czcionki większy niż reszta otaczającego go tekstu, jak pokazano poniżej -

Przykład

<!DOCTYPE html>
<html>

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

To da następujący wynik -

Mniejszy tekst

Zawartość <small>...</small> element jest wyświetlany o jeden rozmiar czcionki mniejszy niż reszta otaczającego go tekstu, jak pokazano poniżej -

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

To da następujący wynik -

Grupowanie treści

Plik <div> i <span> elementy pozwalają na zgrupowanie kilku elementów w celu utworzenia sekcji lub podsekcji strony.

Na przykład możesz chcieć umieścić wszystkie przypisy na stronie w elemencie <div>, aby wskazać, że wszystkie elementy w tym elemencie <div> odnoszą się do przypisów. Następnie możesz dołączyć styl do tego elementu <div>, aby pojawiały się przy użyciu specjalnego zestawu reguł stylów.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

To da następujący wynik -

Z drugiej strony element <span> może służyć do grupowania tylko elementów wbudowanych. Więc jeśli masz część zdania lub akapitu, którą chcesz zgrupować, możesz użyć elementu <span> w następujący sposób.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

To da następujący wynik -

Te znaczniki są powszechnie używane w CSS, aby umożliwić dołączenie stylu do sekcji strony.