HTML и CSS за начинаещи

HTML & CSS за начинаещи (Част 05): Оформяне на текстове

Всички видеоклипове от урока HTML и CSS за начинаещи

Отделни думи или цели пасажи могат много лесно да се отличат курсив и удебелят. Първо за опцията за удебеляне. За целта основно се използват два HTML елемента: b и strong.

Добре дошли в <b>PSD-Tutorials.de</b>!
<br />
Добре дошли в <strong>PSD-Tutorials.de</strong>!

При поглед във браузъра резултатът е следният:

HTML и CSS за начинаещи (Част 05): Украсяване на текстове

Очевидно и двете елемента доставят идентично показване. Защо съществуват два различни елемента? Фактически, за уебсайтовете съществуват и други начини, различни от известния стандартен браузър. Мислете за четци за слепи хора или за мобилни устройства. С HTML елементите, предлагани от W3C, се цели подкрепа на семантиката. Така елементът b вече наистина не означава, че нещо трябва да бъде удебелено. Вместо това b означава текст, който е видимо подчертан, но няма повишена важност. Този текст може да бъде например име на продукт или ключови думи в документи.

Елементът strong досега е представлявал по-силно подчертаване. em обаче бе използван за подчертан важен текст (емфатично). В по-ранни версии на HTML strong бе повишение на em. На HTML5 на двете елементи се придава различно значение.

Първо един текст с нормално подчертаване.

<p>
   Котките са сладки животни.
</p>



Сега отново същият текст, но този път с подчертаване на първата дума.

<p>
   <em>Котките</em>
   са сладки животни.
</p>



Чрез използването на em се поставя акцент върху думата Котките. Този подход е възможен в дискусия, в която става въпрос за това дали кучетата или котките са по-сладки.

Сега в този пример може да се приложи елементът em и към думата са.

<p>
   Котките
   <em>са </em>
   сладки животни.
</p>



Това би могло да бъде един отговор в дискусия, в която някой твърди, че котките изобщо не са сладки.

Елементите, маркирани с em, се показват курсивно в браузъра. Същият оптичен ефект се постига с елемента i.

Според работно предложение HTML5, елементът i вече не означава курсивно.

<p>
   Сърдечно добре дошли в
   <i>PSD-Tutorials.de</i>
</p>



Този елемент от сега нататък служи за въвеждане на различно настроение. Елементът i е интересен например за маркиране на технически изрази или таксономични наименования.

Това всичко звучи ужасно теоретично, знам. В принцип трябва да се опитвате да се придържате към HTML5 стандартите. В същото време, никой няма да ви наказва, ако използвате strong вместо b.

<p>
 <em>Ред с em</em><br />
 <i>Ред с i</i><br />
 <strong>Ред с strong</strong><br />
 <b>Ред с b</b>
</p>



В крайна сметка тук трябва да действат производителите на браузъри.

HTML & CSS за начинаещи (част 05): Оформяне на текстове



За реалното оформление на текстовете, оборудвани с посочените елементи, отговорен е CSS.

Акроними с abbr

За отбелязване на акроним се използва същият елемент, който досега е бил предназначен за абревиатурите, а именно abbr.

Офисът на
<abbr title="World Wide Web Consortium">W3C</abbr>
в Германия и Австрия от април 2009 г. е разположен във Висшето техническо училище Потсдам.



Браузърите, които правилно интерпретират елемента abbr, изобразяват текса, затворен в елемента abbr, подчертан.

HTML & CSS за начинаещи (Част 05): Оформяне на текстове

Допълнително, на abbr трябва да бъде зададен атрибут title. Тук обикновено се записва пълният израз за акронима. Когато посетителят постави мишката си върху акронима, изразът се показва в подсказващ прозорец.

Адресни данни с address

Чрез елемента address може да се маркират адресни данни.

<address>
  4eck Media GmbH & Co. KG<br />
  Hauptstraße 20<br />
  17309 Viereck<br />
</address>



Обикновено браузърите изобразяват съдържанието на елемента address курсивно.

HTML и CSS за начинаещи (Част 05): Оформяне на текстове

Отличяване на програмен код с code

Елементът code се използва за маркиране на програмен код. В този смисъл, в сравнение с по-ранни версии на HTML, нищо не се е променило. Все още code се използва за тази цел.

<pre>
Това е HTML заглавен ред:
  <code>
    <html>
     <head>
     <title></title>
     </head>
  </code>
</pre>



Обичайно се комбинира кодът с елемента pre, за да се запазят отстъпите, използвани в програмния код.

Спецификацията на HTML5 препоръчва използването на атрибута class във връзка с елемента code. На този атрибут може да се присвои езикът, използван в code-a. Ето някои типични примери, как може да изглеждат тези маркировки:

language-html

language-css

language-javascript

language-php

language-pascal

Дали и как браузърите ще изпълнят тези инструкции, не е определено от W3C.

<pre>
  Това е HTML заглавен ред:
  <code class="language-html">
    <html>
      <head>
        <title></title>
      </head>
  </code>
</pre>



В момента, атрибутът class няма видими ефекти в браузъра. Въпреки това хората могат да разпознаят на кой език е програмният код, като погледнат източния код на страницата.

Малки букви с small

Елементът small първоначално беше предназначен за показване на текст с по-малък размер. В HTML5 small е ясно предназначен за по-малки текстове. Тези по-малки текстове могат да са, например:

• Информация за авторски права

• Отказ от отговорност

• Лицензни условия

• Общи условия

W3C изрично посочва, че small не би трябвало да се използва за дълги текстове.

<small>
  Copyright by PSD-Tutorials.de<br />
  4eck Media GmbH & Co. KG<br />
  Hauptstraße 20<br />
  17309 Viereck
</small>

Подчертаване на текст

Можете да подчертавате думите чрез елемента u. Ето един пример:

<p>Здравейте на <u>PSD-Tutorials.de</u></p>

Резултатът в браузъра изглежда по следния начин:

HTML и CSS за начинаещи (Част 05): Прекрасяване на текстове



Когато погледнете резултата, това наистина е желаният ефект. Въпреки това има едно ограничение. В интернет подчертаните текстове обикновено са хипервръзки. Ако представите текст или дума подчертано, посетителите вероятно ще помислят, че става въпрос за хипервръзка. Опитът да се щракне върху него ще се провали. Затова трябва да се откажете от подчертаването.