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.