Тег strong

Вставка специальных символов. Литералы.

Иногда на web-страницу требуется вставить какой-нибудь специальный символ, например такие символы:

Для вставки специальных символов в HTML используются литералы. Литерал — это последовательность символов, которая начинается с символа & и заканчивается символом ;, а между ними помещается последовательность букв — код символа. Так для вставки этих символов используются соответственно следующие литералы:

Вставим на нашу страницу в блок об авторских правах символ копирайта:

Теперь страничка выглядит совсем круто:

Ниже привожу названия наиболее часто используемых символов:

Особое место среди этих символов занимает «неразрывный пробел». Если необходимо чтоб в каком-то месте строки текста перенос не выполнялся, то вставляете туда «неразрывный пробел».

Кроме литерала «неразрывный пробел» для запрета переноса строк можно использовать парный тег nobr. Тег «nobr» уведомляет браузер о том, что отображать текст следует без переносов.

Правда применение этого тега может привести к появлению в окне браузера горизонтальной полосы прокрутки и пользователю придется прокручивать текст по горизонтали, чтобы увидеть его полностью, что очень не удобно.

И еще этот тег не входит в спецификацию HTML, что приводит к не валидному коду. По этому советую применять этот тег только в крайних случаях при оформлении текста html страницы.

HTML также позволяет вставлять любой символ, поддерживаемый кодировкой Unicode. Для этого используется литерал со следующей структурой:

Узнать код нужного символа можно либо в Интернете, либо можно воспользоваться утилитой «Таблица символов», поставляемая в составе Windows. Запустить ее можно так: «Пуск — Все Программы — Стандартные — Служебные — Таблица символов» или нажать WIN+R и набрать в окне выполнить charmap. Появится окно «Таблица символов».

Если в списке символов выделить символ, который нельзя ввести с клавиатуры, в строке статуса с левой стороны появится надпись вида «Клавиша: Alt + код символа». Берете это код символа и вставляете в литерал.

Для примера вставим символ в нашу страницу с помощью кода символа. Выделяем этот символ в «Таблице символов» и в статусной строке с левой стороны видим надпись «Клавиша: Alt+0169». Берем код «0169» и в нашей web-странице вместо литерала «copy» вставляем:

И убеждаемся, что на странице отображается все правильно.

На сегодня у меня все. Как всегда подведу итоги:

мы рассмотрели теги для оформления текста html страницы. Наиболее важные из них тег «strong» — жирное выделение текста и тег «em» — курсивное начертание;
для разрыва строк без отступов применяем тег «br»;
и для вставки специальных символов используем литералы вида:

Массовое использование тега

Практически каждый из вас, знает об этом теге и широко применяет его, для выделения ключевых слов по тексту или даже целых предложений

Также, его используют для выделения важных моментов, на которые автор статьи хочет обратить внимание. И все бы ничего, но в последнее время ПС настолько скрупулезно начали анализировать контент, что чрезмерное выделение слов именно этим тегом, может вызывать подозрение, и как следствие наложение серьезных санкций на ваш сайт

Казалось бы, а что плохого в том, если я хочу обратить внимание своего читателя на важные моменты, которые описаны в статье. Для ответа на этот вопрос, предлагаю просто ознакомится с определением этого тега

Тег — является элементом логической разметки текста и указывает на его важность в пределах остального текста.

Другими словами, только самые важные элементы по тексту, необходимо выделять этим тегом. Есть даже определенное правило – не более 4-5 выделений по тексту статьи, в соотношении величины статьи 4000-5000 символов. Примерно 1 выделение на 1000 символов.

Если рассматривать мой блог в качестве примера, то вот какой принцип выделения текста был у меня ранее:

Как видите, я старался как можно более ключевых слов и их вариаций выделить тегом , а также использовал этот тег для выделения, на мой взгляд, важных моментов по тексту статьи. Бывали случаи, когда количество таких выделений доходило до 40-50 штук на статью размером 5000-6000 символов!

И если Яндекс, пока еще на это закрывает глаза, то поверьте мне что Google, может очень серьезно наказать ваш ресурс за излишний переспам. Что собственно говоря и произошло в случае с моим блогом. Здесь конечно, нельзя винить один только этот тег, но я думаю, что эта ошибка вместе с остальными и сыграла свою заключительную роль.

Естественно, на данный момент, я полностью устранил эту проблему, и теперь жду, когда Google переиндексирует полностью все страницы моего сайта и наконец-то присвоит блогу его заслуженные позиции.

А теперь, я приведу вам 3 способа, которые можно использовать, если у вас такая же проблемная ситуация, как была у меня ранее.

1) Использование тега в минимальном количестве на странице сайта. В среднем это значение должно соответствовать формуле 1 выделение на 1000 символов.

2) Вместо тега использовать тег , который является элементом физической разметки и устанавливает жирный текст. Этим тегом, вы точно не навредите сайту! Но стоит отметить, что он является уже устаревшим и используется, как правило, на старых сайтах.

3) Вариант с использованием тега который, я применяю у себя на блоге

После долгих раздумий, что же использовать на своем ресурсе, для выделения важных моментов, на которые я хочу обратить внимание своих читателей, было принято решение использования тега , как абсолютно безопасного, и универсального тега

Теперь для выделения нужного мне слова или словосочетания, я делаю вот такую вставку:

и визуально результат получается точно такой же, как и с применением тега .

Единственным отличием, является тот момент, что таких выделений по тексту, я могу делать сколько угодно и не переживать за переспам, ведь по сути устанавливаю только стиль для отдельного слова или словосочетания.

Вот и все, о чем я хотел рассказать в данной статье. Обязательно посмотрите на свои сайты друзья, со стороны и если подобная проблема у вас существует, то исправляйте ее.

Ну, а теперь давайте перейдем к приятным вещам, и я объявлю победителей ежемесячного конкурса комментаторов:

Ну все, буду заканчивать. Всем пока!

(3 голоса, в среднем: 5 из 5)

How to Italicize Text in HTML

To italicize the text in HTML, you can use either the tag or the (italics) tag. Both of these tags italicize the text, but the tag indicates that the text has stress emphasis when read. You can also italicize text with the CSS font-style property set to italic.

Like and , the tag is generally preferred over the tag as it is a semantic element, so we’ll be using it in our HTML examples.

Learn More: The Beginner’s Guide to HTML & CSS

Want to learn more about HTML? Download our free guide for best practices for getting started with HTML.

How to Italicize Text in HTML with the Emphasis Element

To define text with stress emphasis, place the text inside tags. Let’s see an example.

Here’s the HTML:

Here’s the result:

How to Italicize Text in HTML with the CSS Font-Style Property

To italicize text for decoration, use the CSS font-style property. Imagine you want to italicize a word inside a paragraph. First, wrap the word in tags, then apply the font-style property to the span element only.

Here’s the HTML and CSS:

Here’s the result:

Аудио[править]

bgsoundправить

Этот тег нестандартный и не входит в спецификации. Поддерживается только IE. Вместо него рекомендуется использовать тег .

Тег указывает на музыкальный файл, который будет проигрываться на веб-странице при её открытии. Звук, время звучания музыки и другие характеристики указываются с помощью параметров тега, а также могут управляться при помощи скриптов. Этот тег должен размещаться только в середине тега .

Чтобы указать файл, который будет проигрываться, нужно написать так:

<bgsound src="Example.mid" loop="3" volume="-1000" balance="3000">

Параметры:

src указывает путь к музыкальному файлу.
loop устанавливает, сколько раз будет проигрываться музыка. По умолчанию проиграется 1 раз.
volume задаёт громкость звучания музыки на странице. По умолчанию — 0. Громкость — целое число от −10000 до 0. Ноль — максимальный уровень. Чем больше значение этого параметра, тем тише звучит музыка.
balance регулирует громкость звучания в левой и правой колонках.

audioправить

В HTML5 добавили новый тег .

Вот как он выглядит:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Очень красивая мелодия! 
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <audio controls="controls">
         <source src="music1.mp3" type="audio/mpeg" />
         <source src="music2.mp3" type="audio/ogg; codecs=vorbis" />
      </audio>
   </body>
</html>

Обращаем ваше внимание на непонятный тег .

Дело в том, что браузеры не поддерживают все форматы музыки и порой приходится перекодировать вашу музыку в другие типы аудио, чтобы мелодия корректно отображалась в основных браузерах.

Подробно про атрибуты тега :

autoplay — звук начинает играть сразу после загрузки страницы.
controls — добавляет панель управления к аудиофайлу.
loop — повторяет воспроизведение звука с начала после его завершения.
preload — используется для загрузки файла вместе с загрузкой веб-страницы.
src — указывает путь к воспроизводимому файлу (только если не использовался тег <source />).

Тег для вставки изображений

Интернетом правят котики. А представляют собой котики в Интернете ни что иное как картинки. Об этом мощнейшем инструменте влияния на людей мы и поговорим. И я сейчас про картинки, а не про котиков (ну не расстраивайтесь вы так).

Чтобы вставить картинку используется тег <img>, у которого есть два обязательных атрибута:

src, указывающий путь до картинки. Путь может быть или абсолютным (начинающийся с http://…), или относительным (относительно корневой директории сайта или относительно текущей странички);
alt, содержащий текстовое описание картинки. В случае, если картинку не получится загрузить, на её месте будет этот текст

На практике это выглядит так:

Выделение фрагментов текста. Теги strong и em.

Самым важным средством HTML применяющемся для выделения важных фрагментов текста является тег . Он выделяет текст полужирным шрифтом. Выделять текст полужирным шрифтом умеет также тег . Хоть теги и похожи по своему действию, но они не являются эквивалентными. Тег является тегом физической разметки и просто устанавливает полужирное начертание текста

А является тегом логической разметки и отмечает важность выделенного текста. Тег имеет более важное значение при поисковой оптимизации сайта и его содержимое имеет больший вес для поисковиков

Для курсивного выделения фрагментов текста применяются теги и . Содержимое этих тегов выводится под наклоном имитируя рукописный шрифт. При разработке web-сайтов для выделения текста чаще применяются теги и , чем теги и . Пример использования тегов , , и для оформления текстов:

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста»; произносится эйч-ти-эм-эл) — стандартный язык разметки документов во Всемирной паутине.

И выглядит это так:

Применим теги и на нашей страничке из предыдущих статей:

<h1>Сайт об автомобилях.</h1> Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях. Научным языком автомобиль это: Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами. <hr> <h2>Классификация автомобилей</h2> Автомобили бывают следующих типов: <ul> <li>Легковой;</li> <li>Грузовой;</li> <li>Внедорожник;</li> <li>Багги;</li> <li>Пикап;</li> <li>Спортивный;</li> <li>Гоночный.</li> </ul>

Результат:

Кроме элементов , , и в HTML имеется множество тегов для оформления текста html документа. Привожу краткий список таких тегов:

<abbr> — Аббревиатура. по умолчанию в браузере отображается подчеркнутым;
<acronym> — Акроним. В отличие от аббревиатуры обозначает устоявшееся сокращение. Отображается подчеркнутым;
<cite> — небольшая цитата, отображается курсивом;
<code> — фрагмент исходного кода программы, отображается моноширинным шрифтом;
<del>— отмечает текст, удаленный из Web-страницы, отображается зачеркнутым;
<dfn> — обозначает новый термин в документе, отображается курсивом;
<ins> — используется для выделения текста, который был добавлен в новую версию документа, отображается подчеркнутым;
<kbd> — применяется для выделения данных вводимых с клавиатуры, либо для названия клавиш, выводится моноширинным шрифтом;
<q> — используется для выделения цитат, содержимое автоматически помещается в кавычки;
<samp> — обозначает данные, выводимые какой-либо программой, отображается моноширинным шрифтом;
<tt> — фактически тоже самое что и <samp>, только является тегом физической разметки, а <samp> — логической. отображается моноширинным шрифтом;
<var> — выделение имени переменной в исходном коде программы, отображается курсивом.

И вот так они отображаются в браузере:

Выделение текста жирным и курсивом — теги , , и

Самые популярные теги форматирования текста — выделение его жирным и курсивом

Обычно их используют для придания важности какому-либо фрагменту. Первый случай служит для выделения фрагмента, содержащего полезную информацию или ключевые слова

Курсив применяется в тех же целях, что и жирный текст, но информация менее важна, потому что курсив на фоне основного текста менее заметен, нежели жирный текст.

Рассмотрим для начала выделение текста жирным. Для этого действия используется два тега — и . Разницы во внешнем виде нет. Хотя, учитывая то, что любой браузер может интерпретировать каждый элемент по-своему, вы сможете увидеть какие-либо отличия. Вот как выглядит текст в тегах — и в уже обработанном браузером виде:

Текст в тегах strong

Текст в тегах b

А вот как выглядят две данные строчки в исходном коде страницы:

Ту же ситуацию мы можем наблюдать в случае с тегами выделения курсивом и . Попытайтесь найти отличия между двумя примерами:

Текст в тегах em

Текст в тегах I

А вот исходный код:

Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги и влияют на внутреннюю оптимизацию сайта. Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта. Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге , и столько же и курсива в теге .

Если же вы хотите просто выделить в тексте какой-либо момент, то используйте тег или . Вообще, я думаю, что поисковики тоже рассматривают текст в этих тегах как более важный, но на внутреннюю оптимизацию они все-таки оказывают меньшее влияние, нежели и .

Жирный текст на CSS

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

bold (жирный) — 700 по умолчанию;
normal (обычный) — 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

<p>Обычный текст с <span class="my-bold-font">жирным выделением</span> по центру.</p>

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

. my-bold-font {
    color black;
    font-weight 700; 
 }

Либо можно написать:

. my-bold-font {
    color black;
    font-weight bold;
 }

Разницы нет никакой. Кстати, если говорить о HTML теге , то для него по умолчанию прописан такой стиль:

strong {
    font-weight bold;
}

Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль class=»my-bold-font» выглядит логичнее чем class=»new-font», т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

§ 1. Теория

Здесь нужно коротко упомянуть о том, что такое текст в «электронном» виде. Я не буду подробно вдаваться в то, как он представляется в различных кодировках и системах. Скажу лишь о том, как связаны форматирование текста в HTML и его редактирование в текстовых редакторах.

Допустим, ты набрал текст в редакторе, произвел его форматирование (выделил какие-то слова жирным или курсивом), либо сделал с ним что-то ещё. Затем скопировал и вставил текст в свой html-код. Открываешь html-страницу в браузере, а всё твоё форматирование куда-то исчезло. Происходит это потому, что текстовый редактор для форматирования текста применяет свои спецсимволы (по сути те же теги, только используются в текстовых редакторах), которые ты по умолчанию не видишь.

В окне редактора ты видишь только текст. А на самом деле там есть ещё управляющие спецсимволы, с помощью которых редактор «понимает», как ему отображать тот или иной кусок текста. Т. е., повторюсь, это то же самое, что и теги в HTML, только «заточенные» под использование в текстовых редакторах.

Но, не смотря на это, существует способ перенести текст из редактора и вставить его в html-код в исходном виде. И раз уж об этом зашла речь, то форматирование текста и начнем изучать с этого тега. Итак, приступим.

Тег и атрибуты — параметры шрифта текста

Теперь рассмотрим тег, который не используется без атрибутов. С помощью его вы сможете задать параметры для определенного фрагмента текста. Вообще, сейчас предпочтительней использовать CSS (каскадные таблицы стилей), т.к. с помощью них можно сильно сократить весь HTML код страницы. Итак, рассмотрим тот самый тег . Для него существует всего три атрибута:

face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).

Так выглядит текст в теге с использованием каждого атрибута:

Ссылки[править]

Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст, является гиперссылка. Гиперссылки создаются с помощью тега <a> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>
         Ссылка
      </title>
   </head>
   <body>
      Здесь можно найти материалы о web-дизайне: <a href="http://ru.wikibooks.org/wiki/HTML">ru.wikibooks.org</a>. 
   </body>
</html>

Теперь на странице надпись ru.wikibooks.org станет гиперссылкой.

Обычно страницы в интернете не сидят одиноко. Они размещаются группами, которые называются узлами. Сайт — это по моему определению набор страниц и других файлов, которые имеют общую часть URL. Например, все страницы, начинающиеся на http://www.microsoft.com, принадлежат одному сайту одной маленькой компьютерной фирмы. Далее следует символ «/», и адрес продолжается.

Можно сделать у себя на компьютере маленькую модель сайта. Для этого нужно создать новый каталог, в котором будем размещать файлы. Затем в каталоге разместить файл index.htm. Если есть какая-то ссылка на ваш сайт, без указания, какой конкретно файл загружать, то будет загружен именно index.htm. Далее мы можем создать ещё одну папку внутри нашей. Пусть она называется subdir. Если в ней разместить файл index.htm, то для перехода к нему нужно будет написать: «www.ваш_сайт.com/subdir/».

Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:

<html>
<head>
<title>Моя музыка</title>
</head>
<body>
Я только что записал новый трек. Вы можете <a href="track1.mp3">скачать его здесь.</a>
</body>
</html>

Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы «site/1.htm» и «site/subdir/2.htm», то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href =»subdir/2.htm» и href =»../1.htm» соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.

Но этим возможности тега <a> не исчерпываются. a — сокращенно от anchor — что значит якорь. С помощью тега <a> можно ставить в гипертекстовом документе якоря, или проще говоря закладки, позволяющие переходить в определённое место документа. Это особенно полезно, когда документ большой, и нужно быстро переходить в нём к нужному разделу. Для этого существует атрибут id.

Чтобы долго не объяснять снова приведу пример:

<html>
<head>
<title>Моя музыка</title>
</head>
<body>
<h1> Содержание</h1>
<a href="#part1"><h2>Часть 1</h2></a>
<a href="#part2"><h2>Часть 2</h2></a>
<a href="#part3"><h2>Часть 3</h2></a>
<h1 id="part1">Часть 1</h1>
<p> Много текста </p>
<h1 id="part2">Часть 2</h1>
<p>Много текста</p>
<h1 id="part3"> Часть 3</h1>
<p>Много текста</p>
</body>
</html>

Когда мы делаем гиперпереходы в пределах одной страницы, то в атрибуте href просто пишем знак («#») и название закладки (то что написано в атрибуте id). А когда делаем переход на закладку в другой странице, то сначала пишем адрес страницы, затем добавляем знак («#») и название закладки. Когда случайно делается переход на закладку, которой не существует, ничего страшного не происходит. Мы просто попадаем в начало страницы, как при обычном переходе.

Чаще страницы загружаются в том окне, где вы щёлкнули ссылку. Но мы можем выбрать место, где будут загружаться страницы. Для этого в теге <a> существует атрибут target. Он может принимать значения _blank, если нам нужно загружать страницу в новом окне, _self, если нам ничего менять не нужно (оно и так загружается в том окне где щёлкнули), _parent, если мы хотим забрать из окна фрейма и открыть страницу на всё окно.

Элементы оформления[править]

Подведём чертуправить

Иногда вы что-то пишете, пишете, и вдруг чувствуете что нужно подвести черту.

Делается это просто как новая строка: <hr /> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.

Картинкиправить

До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <img>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, поэтому закрывающий тег не нужен.

Иногда картинки не отображаются. Это происходит по разным причинам. Тем не менее, нужно чтобы пользователь и в таких случаях знал, что вы хотели ему показать. Для этого картинки имеют атрибут alt. Он задает текст, который отображается на месте картинки в тех случаях, когда сама картинка недоступна.

Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Картинки
      </title>
      <meta charset="utf-8" />
   </head>
   <body>
      <img src="image.jpg" alt="Маленькая картинка" title="Маленькая картинка" width="100" height="100">
      <br/>
      <img src="image.jpg" alt="Велика картинка" title="Велика картинка" width="400" height="400">
      <br />
      <img src="image.jpg" alt="Широка картинка" title="Широка картинка" width="100%" height="400">
      <br/>
   </body>
</html>

Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.

Картыправить

Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <map> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <area>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.

<!DOCTYPE html>
<html>
   <head>
      <title>
         Карта планет
      </title>
      <meta>
   </head>
   <body>
      <img src="planets.gif" width="145" height="126" usemap="#planetmap">
      <map id="planetmap" name="planetmap">
         <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
         <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.htm" />
         <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
      </map>
   </body>
</html>

Теги физического форматирования текста.

О тегах физического форматирования текста речь в этом учебнике шла ранее, поэтому повторятся, не стану, а просто перечислю их:

, , , <strike>, <s>, <tt>, , <big>, , , , , <pre>…

— всё это теги физического форматирования текста.

Почему их так назвали? Да все просто.. потому что данные теги способны тем или иным способом физически воздействовать на текст.. делать его жирным, курсивом, маленьким, большим.. и т. д. Заключив текст, в какой либо тег из вышеперечисленных, мы получаем ожидаемый результат, который описан в спецификации HTML и в различных браузерах отображается практически одинаково.

На всякий случай вновь покажу старый пример:

<html><head><title>Стили текста</title></head><body><big>Научная статья.</big> Если разбавить дистиллированную воду Н2О сорока процентами этилового спирта С2Н5ОН то получится жидкость в 40о более известную широкой публике под названием — водка. Впервые данную пропорцию <s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ.</tt> Распитие спиртных напитков вредит вашему здоровью.</body></html>

смотреть пример

Основная задача тегов физического форматирования текста это выполнение сугубо декоративных функций.

Однако если Вы изучали справочник HTML, то наверняка обратили внимание что выше перечисленные теги это далеко не все инструменты для работы с текстом! А если Вы изучали справочник скрупулезно и пристально, то наверное заметили что некоторые теги выполняют одни и те же действия над текстом.. Например, чем отличается тег от тега ? или какая разница между и ? ведь результат и там и там одинаков!

Например, чем отличается тег  от тега ? или какая разница между  и ? ведь результат и там и там одинаков!

Так да не так.. отличия есть.. и они достаточно существенные!!..

Теги выделения текста чертой — , и

Теперь рассмотрим несколько тегов, которые используют черту в оформлении текста. Самый известный вам из текстовых редакторов — тег или подчеркивание

Влияние на ранжирование этот тег не оказывает (насколько я знаю), а вот выделить какой-либо текст и заострить на нем внимание поможет. Пример использования данного тега я привел чуть выше

Еще два схожих по назначению тега — <s> и <strike>. Оба выполняют функцию ~~зачеркивания~~ текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.

Отличия же этих двух тегов заключаются только в их написании, вследствие чего предпочтительней использовать первый, т.к. во-первых удобнее писать, а во-вторых, на вашей странице будет находиться меньшее количество HTML-кода, а поисковики это любят.

§ 2. Сами теги для форматирования

Предварительно отформатированный текст можно вставить в html-страницу с помощью тегов и . Браузер покажет текст, заключенный между этими тегами в том виде, в каком он был в текстовом редакторе. Я, если честно, ни разу не использовал этот тег на практике, поэтому что-то ещё про него сказать не могу.

Самыми популярными тегами для форматирования текста являются:

— используется для выделения текста полужирным.
!

Примечание. Во многих последних (по времени выпуска) учебниках и самоучителях вместо него рекомендуется использовать тег . Я не знаю, почему это так, но для «жирного» выделения использую рекомендуемый тег strong.
— используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег .
— позволит подчеркнуть текст. Тут главное, чтобы пользователь не перепутал подчёркнутый текст с ссылкой.
— делает текст ~~перечёркнутым~~.
— предназначен для выделения подстрочного текста (нижний индекс). Этот тег может быть полезен, например, для записи химических формул. Вот этот код
H2O
даст нам вот такую формулу

H₂O.
— нужен для выделения надстрочного текста (верхнего индекса). Например, для записи возведения в степень: пишем

(a+b)2,
получаем

(a+b)2.

Все эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий html-код:

H2O — это формула воды.

при просмотре в браузере будет выглядеть так:

H₂O — это формула воды.