Теги для выделения текста жирным шрифтом: Форматирование текста (b, u ,i) в HTML

Акцентирование (выделение) текста в HTML — Разметка текста — codebra

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

Жирный текст

Всеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега <b> и <strong>. Тег <b>, более распространенный. Эти теги не одинаковы, хоть и результат схож. Различие заключается в том, что тег <b> определяет физическую жирность текста, а тег <strong> определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными). Такая же ситуация и у тегов

Код HTML

<b>Жирный текст</b>

Курсивный текст

За акцентирование курсивным шрифтом, отвечают теги <i> и <em>. Как сказано выше, они различны по своей направленности, но в современных браузерах эквивалентны. Далее пример:

Код HTML

<i>Курсивный текст</i>

Подчеркнутый текст

Акцентировать текст подчеркнутым шрифтом можно при помощи тега

Код HTML

<u>Подчеркнутый текст</u>

Зачеркнутый текст

Для того чтобы зачеркнуть текст, используют два эквивалентных тега: <s> и <strike>. Эти два тега осуждают и рекомендуют взамен им использовать стили. А тег <strike> категорически запрещен в HTML5. Далее пример:

Код HTML

<strike>Зачеркнутый текст</strike>

Крупнее и мельче обычного текста

Код HTML

<big>Крупнее текст</big>

Замена жирного текста стилями CSS

Есть такое свойство в CSS – font-weight. Оно принимает много значений: font-weight:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900. Чтобы сделать текст самым жирным, нужно использовать значение font-weight: 900. О нем мы еще поговорим в следующих уроках.

Замена курсивного текста стилями CSS

Код HTML

<span class = "i">Курсивный текст</span>

Код CSS

.i {
font-style: italic;
}

Замена подчеркнутого текста стилями CSS

Тег <u> осуждается спецификацией HTML и рекомендуется использовать стили. Аналогом может служить свойство text-decoration. Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:

Код HTML

<span class = "u">Подчеркнутый текст</span> 

Код CSS

.u {
text-decoration: underline;
}

Выделяем текст. Жирный шрифт. HTML-пособие для начинающих

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

Жирный шрифт как способ выделить главное

Наиболее ярко и броско выглядят слова, выделенные с помощью жирного шрифта. Такие слова и фразы сразу бросаются в глаза. Итак, для того чтобы научиться быстро выделять в тексте нужные места, следует запомнить специальный HTML-код. Жирный шрифт выставляется с помощью парного тэга <b> </b>.

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

Другие варианты выделения

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

Так, можно выделить текст курсивом с помощью парного тэга <i> </i>, подчеркнуть его с помощью <u> </u>. Это наиболее простые способы выделения текста.

Есть также менее известные и используемые тэги, с помощью которых можно выделять слова и предложения в тексте. Так, для того чтобы перечеркнуть текст, достаточно использовать <s> </s>. Сделать текст моноширным поможет парный тэг <tt> </tt>. Если вам нужно создать верхний индекс, используйте , нижний — .

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

Использование нескольких шрифтов

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

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

• <i><u><b> выделенный текст </b></u></i>.

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

• <i><u><b> выделенный текст </u></b></i>.

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

Кстати, тут можно отметить, что три варианта начертания – жирное, подчеркнутое и курсивное — запоминаются довольно легко, если вы владеете горячими клавишами в Word. Там начертание задается с помощью тех же букв-клавиш при зажатом Ctrl.

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

Выводы

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

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

Урок 3. Заголовки и форматирование текста

Заголовки в HTML

<html>

   <head>

   <title>html заголовки</title>

   </head>
 
<body>
   <h2>Заголовок 1</h2>

   <h3>Заголовок 2</h3>

   <h4>Заголовок 3</h4>

   <h5>Заголовок 4</h5>
</body>

</html>

Форматирование текста в HTML

Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (

<html>

   <head>

   <title>html параграфы</title>

   </head>

<body>
<p>Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>

<p>Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>
</body>

</html>

У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:

left — выравнивание по левой стороне
right — выравнивание по правой стороне
center — по центру
jastify — по ширине

Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру

<html>

   <head>

   <title>html выравнивание параграфов</title>

   </head>

<body>
<p align="left">Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>

<p align="right">Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>
 
<p align="center">Текст третьего абзаца. Текст третьего абзаца. Текст третьего абзаца.</p>

</body>

</html>

Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.

<html>

   <head>

   <title>центрирование в html</title>

   </head>

<body>
<center>Текст по центру</center>
</body>
 
</html>

Как выделить текст полужирным в html?

Рассмотрим пример кода выделения текста жирным

<html>

   <head>

   <title>html выделение жирным</title>

   </head>

<body>
<p>Если Вы хотите выделить какую-то фразу, чтобы она просто была видна пользователю, 

например, напоминание, то <strong>делаем так</strong>. Или так в случае <b>ключевого слова</b></p>
</body>

</html>

И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова

Как выделить текст курсивом в html?

Рассмотрим пример кода c выделением текста курсивом

<html>

   <head>

   <title>Допустим страница о машинах</title>

   </head>

<body>
<i>Mercedes-Benz</i> - это немецкий автоконцерн, который был основан в 1886 году. 

Название произошло от двух марок - <dfn>Мерседес</dfn> и <dfn>Бенц</dfn>. 

Он занимается в основном выпуском <dfn>легковых автомобилей премиум-класса</dfn>, <dfn>грузовых автомобилей</dfn>, <dfn>автобусов</dfn>.

<p><cite>http://ru.wikipedia.org/wiki/Mercedes-Benz</cite></p>
</body>

</html>

Как выделить текст подчёркиванием в html?

Данные и в первом, и во втором случае будут выделен подчёркиванием.

Как сделать перечёркнутый текст в html?

<html>

   <head>

   <title>Перечёркнутый текст в html</title>

   </head>

<body>
Дважды два равно <del>пяти</del> четырём. Обычный <s>перечёркнутый текст</s>
</body>

</html>

Как выделить текст в верхнем и нижнем индексах в html?

<html>

   <head>

   <title>индексы в html</title>

   </head>

<body>
<p>a<sup>2</sup>+b<sup>2</sup> = c<sup>2</sup> - теорема Пифагора.</p>

<p>H<sub>2</sub>O - химическая формула воды.</p>
</body>

</html>

Тег font в html

Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:

face — название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.

size — активные значения от 1 до 7. Шрифт по молчанию равен 3.

color — цвет текста. Если не задать параметр, то текст будет чёрным.

<html>

   <head>

   <title>Тег font в html</title>

   </head>

<body>
<font face="Tahoma" size=5 color="blue">Шрифт Tahoma, размер 5, цвет синий.</font>
</body>

</html>

Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE

<html>

   <head>

   <title>Тег pre в html</title>

   </head>

<body>
<pre>Как захотели ввести текст

              так он и                отобразился!     =)</pre>
</body>

</html>

Другие теги для форматирования текста

<html>

   <head>

   <title>Тег abbr в html</title>

   </head>

<body>
<abbr title="Hypertext Markup Language">HTML</abbr> 
</body>

</html>

Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

<html>

   <head>

   <title>Тег acronym в html</title>

   </head>

<body>
<acronym title="Hypertext Markup Language">HTML</acronym> 
</body>

</html>

Горизонтальная черта в html или тег hr

У данного тега есть следующие атрибуты:
align — выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width — фиксирует длину черты в пикселях или процентах
size — толщина линии
color — цвет линии
noshade — убирает рельефность линии

<html>

   <head>

   <title>Тег font в html</title>

   </head>

<body>
Обычная линия

<hr>
Линия по центру длиной 50% от ширины блока, толщина линии 2

<hr align="center" size=2 width=50%>
Линия справа, синяя, 200 пикселей<hr align="right" color="blue" width="200">
</body>

</html>

Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!

Выделение текста: жирным, курсивом, подчеркнутым и зачеркнутым стилями

Выделение жирным:
По типографскому стандарту в печати различают четыре вида насыщенности шрифта: светлое выделение, нормальное, полужирное и жирное. В системе HTML  можно установить только нормальное и жирное начертание и делают это с помощью двух тегов <b> или <strong>. Оба тега закрывающиеся.

Сейчас открываем наш файл index_3.html в Блокноте. У кого его нет скачиваем здесь в формате index_3.rar. Вписываем указанные теги в первые строчки стихотворения, как показано на картинке Screen 1. Как всегда «Сохраняем». Полученный файл

                                                             
                                                                                                              Screen 1

 «Открываем» в браузере. Что мы видим? На Screen 2 показано, что все три строчки выделены жирным, в каких бы вариантах

                                                           
                                                                                                              Screen 2

 не были вставлены теги. Кроме того мы открывали этот файл в Opera и Firefox. Результат тот же. Текст в них отражается нормально. Можете проверить сами. Не будем вдаваться в подробности и забивать себе голову лишним: почему?, что? и как?

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

Выделение курсивом:
Курсивный шрифт представляет собой наклон в правую сторону отдельных букв, слов или целых предложений. Для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Происходит при помощи двух закрывающихся тегов <i> или <em>.

Вставляем,   как  в предыдущем  примере,   в разных вариантах теги курсива в наш файл.    1. Заключаем фамилию автора в тег <i>.
2. Делаем курсивом две нижние строчки стихотворения, Screen 3. Смотрим что получилось, Screen 4.

                                                                                                    
                                                                   Screen 3.

                                 
                                                                   Screen 4.

На картинке видно, две последние строчки и фамилия автора выделены курсивом. Проверяем в других интернет-обозревателях. Все в порядке. Теги работают везде нормально. Что и требовалось доказать.

Подчеркнуть и зачеркнуть текст:
Здесь все делаем как в предыдущих разделах. Подчеркиваем зоголовок стихотворения используя тег <u>. Зачеркиваем оставшиеся строчки стиха тегами <s> и <strike>. Смотрим Screen 5 и Screen 6.

                                  
                                                                    Screen 5.

                                 
                                                                    Screen 6.

       Все выше изложенные теги  прошли проверку на интернет-обозревателях Uran, Opera, Mozilla, Yanex, Google Crome. Ни каких искажений показа на экране не отмечено. Дополнительные сведения об отдельных тегах, тем кому потребуются более точная информация, можно получить в «Cправочнике  html».
         Выделять  жирным, курсивом, подчеркивать и зачеркивать можно не только фразы, но и отдельные слова, а также отдельные буквы и цифры.
          На последок переименуем Копию index_3.html, в файл index_4.html и Сохраним. 
 

Изучаем курсивный, жирный, подчеркнутый и зачеркнутый текст

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

Теория и практика

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
    <title>Главная</title>
</head>
<body>
    <p>Меню</p>
    <ul>	
        <li><a href="example.html" title="Главная">Главная</a></li>
        <li><a href="banan.html" title="Польза банана">Банан</a></li>
        <li><a href="apple.html" title="Польза яблока">Яблоко</a></li>
        <li><a href="persik.html" title="Польза персика">Персик</a></li>
    </ul>
 
	<p>Nullam <strong>eget aliquet</strong> sapien, <b>vitae vulputate</b> diam. <ins>Vivamus at arcu</ins> urna. Sed eget <em>neque et</em> sapien <i>auctor</i> adipiscing. <del>Aenean tincidunt</del> metus at facilisis imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</body>
</html>

Как это выглядит в браузере:

Сейчас о каждом теге по порядку:

1. За выделение жирным шрифтом отвечают теги <b></b> и <strong></strong>. Дело в том что тег <b></b> является устаревшим, а вместо него рекомендуется использовать тег <strong></strong>.

2. Чтобы выделить текст курсивом отвечают теги <i></i> и <em></em>. Но тег <i></i> также устарел как и тег <b>, поэтому вместо него используйте тег <em></em>.

3. Чтобы подчеркнуть текст, его необходимо взять в тег <ins></ins>.

4. Чтобы зачеркнуть текст, его необходимо взять в тег <del></del>.

Итак. Еще раз посмотрим, но только в виде таблицы:

Также данные теги можно комбинировать Но важно чтобы тег открывался и закрывался правильно. Далее в примере написано правильно! Нельзя допускать такого: <em><strong>eget aliquet</em></strong>. То есть тег сначала должен открываться, потом закрываться. А если хотите еще в один тег взять — необходимо брать все теги внутри в эту конструкцию. Например:

<em><strong>eget aliquet</strong></em>

Как это будет выглядеть в браузере:

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

Больше практикуйтесь!

Теги форматирования текста в HTML

Доброго времени суток, уважаемые подписчики.

Этот урок мы посветим форматированию текста в html. Рассмотрим, какие теги для этого применяются.

Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно «обойти», используя каскадные таблицы стилей (css).

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

Итак, начнем.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: Архив 2 урока

Возьмем из высланного Вам архива файл «Лис и лошадь.doc» и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм.

Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока.

Готово?

Верю, что да.

Теперь вернемся в word, скопируем весь наш текст из файла «сказка.doc» и вставим его между тегами <body> </body> нашей заготовки.

Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).

Мы видим, что текст идет без заголовков, без абзацев, без отступов.

Вот теперь и займемся непосредственным форматированием текста в языке HTML.

Для выделения заголовков используются теги <h2>текст</h2>, <h3>текст</h3> и т.д. до <H6>текcт</H6>.

Цифры после буквы H в теге применяются от 1 до 6.

1 – самый крупный заголовок, 6 – самый маленький заголовок.

Давайте теперь найдем в нашем файле названия сказок и заключим их в теги <h2>…<h2>.

<h2>Лис и лошадь</h2> <h2>Лис и кошка</h2>

У тега <h2> есть параметр align со значением Left — по левому краю, right — по правому и center — по центру.

Давайте выровняем заголовок по центру. Для этого пропишем:

Аналогично и второй заголовок.

Сохраняем и смотрим в браузер.

Заголовки стали по центру.

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

А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5).

Самостоятельно попробуйте разные значения тега <H>текст</H>. И разные значения align. Выберите любой Вам понравившейся.

Теперь разобьем наш текст на абзацы.

Тег, который это делает — <p>текст абзаца</p>.

Для этого находим начало абзацев и ставим там тег <p>, а в конце абзаца закрываем его </p>.

Сохраняем исходный файл с кодом (ctrl+s), в браузере жмем кнопку «обновить» и смотрим, что получилось.

У тега <p> есть параметр align с такими же значениями, что и у тегов <H> — left, right, center. Его работа абсолютно такая же как и у тега <H>.

На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.

Текст можно сделать жирным. При помощи тега <b>или <strong> (кстати, это закрывающиеся теги. Рекомендуется <strong>).

Курсив — <i> или <em>, подчеркнутый <u>, моноширинный <tt> или <kbd>.

Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать.

Например:

<b> любой текст из сказки</b> <i>…………………………..</i> <u>………………………….</u> <kbd>……………………..</kbd>

Для изменения размера, цвета и шрифта отдельного участка текста используйте тег <font>, его параметры:

fаce=»arial» – указывает названия шрифта.

size=»3″ — размер (значения от 1 до 7).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

color=»******» – цвет шрифта.

****** — определенный код шрифта (например, 000000 – это черный).

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

<font face=»arial» size=»6″ color=»red’> фрагмент текста сказки </font>

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

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

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

Итак, теги:

<sub> — подиндексы (H₂O)

<sup> — надиндекс (4⁵)

<big> — увеличивает шрифт на 1

<small> — уменьшает шрифт на 1

<address> — сведения об авторе и последнем обновлении страницы (отображаются курсивом)

<cite> — цитаты, отображаются курсивом

<code> — программный код отображается моноширинным шрифтом

<em> — выделенный текст отображается курсивом

<strong> — выделенный текст отображается жирным шрифтом, рекомендуется вместо <b>

<hr> — горизонтальная линия. У этого тэга есть такие параметры, как:

align=center(left, right) -выравнивание, с этим параметром мы знакомы из других тегов

width=»число» — длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана

size»число» — толщина линии (меньше 100 пикселей, т.е. если задать параметр size=99, a параметр width=1, то получим вертикальную линию, только с ограниченной высотой)

color=»цвет» -цвет линии

noshade — отменяет рельефность

Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:

<hr color=»red» >

Поэкспериментируйте с набором и значениями параметров этого тега.

Есть еще один интересный тег, но поддерживается он только браузером Internet Explorer. Честно говоря мне его на практике использовать не приходилось.

Тег <marquee> – контейнер бегающей строки с параметрами:

align=»middle(top, bottom)»— выравнивает контейнер относительно окружающего текста.

top — по верхнему тексту, bottom- по нижнему, middle- по середине.

behavior=»scroll(slide, alternate)» — scroll — текст прокручивается, slide — скольжение, alternate — текст «плавает» со стороны в сторону.

bgcolor =»цвет» — фоновый цвет для контейнера.

direction=»left(right)» — задает направление движения текста.

height=»число» — высота контейнера.

hspace=»число» — расстояние от контейнера до текста по горизонтали.

vspace=»число» — расстояние от контейнера до текста по вертикали.

loop=»число» — количество повторений.

width=»число» — ширина контейнера.

scrollmount=»число» — скорость движения текста.

scrolldelay=»число» — время задержки между циклами.

Например, в нашей сказке это может выглядеть так:

<marquee align=»top» behavior=»scroll» bgcolor=»blue» direction=»left»> Как можете? </marquee>

Как можете?

Вот, пожалуй, и все что я хотел вам рассказать о тегах форматирования текста в HTML. Предлагаю самостоятельно сделать упражнение:

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

В следующем уроке мы научимся делать ссылки, рассмотрим, какие они бывают, поработаем над вставкой картинок в нашу html страницу, и сделаем картинку ссылкой на любой web-ресурс.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Выделяем важные слова или оформляем текст html страницы! : WEBCodius

Здравствуйте, уважаемые читатели блога. В прошлой статье я рассмотрел блочные теги для структурирования текста.

А сегодня мы рассмотрим оформление текста html-страницы, т.е. рассмотрим теги, которые помогут выделить важные фрагменты текста, чтобы привлекать к ним внимание посетителей. А также научимся вставлять на страницу специальные символы.

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

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

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

Для курсивного выделения фрагментов текста применяются теги «i» и «em». Содержимое этих тегов выводится под наклоном имитируя рукописный шрифт.

При разработке web-сайтов для выделения текста чаще применяются теги «strong» и «em», чем теги «b» и «i». Пример использования тегов «strong», «b»,
«em» и «i» для оформления текстов:

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

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

Результат:

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

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

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

Разрыв строк

Как мы узнали из предыдущих статей, для перевода строк используются блочные элементы, в частности тег «p», выделяющий абзац.

Давайте поместим на нашу web-страницу сведения об авторских правах:

Сайт об автомобилях.

Результат:

И как мы видим строки разделены слишком большим расстоянием, как-будто они не имеют друг к другу никакого отношения. В этом случае для разрыва строк лучше использовать тег br. Этот тег устанавливает перенос строки, но в отличие от тега «p», не устанавливает отступ перед строкой. Применим тег «br» на нашей страничке:

Так гораздо лучше:

Поэтому в некоторых случаях при оформлении текста html страницы не забывайте про тег «br».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• для разрыва строк без отступов применяем тег «br»;

• и для вставки специальных символов используем литералы вида:

  

В следующей статье я расскажу как вставлять картинки на страницу, поэтому советую подписаться на обновления моего блога!)))

python — установите выделенный текст жирным шрифтом с помощью тегов