Лого SiteHere.ru

Урок 8. Жирный, курсивный, подчеркнутый и зачеркнутый текст

Урок 8. Жирный и курсивный текст

Здравствуй, уважаемый читатель.

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


Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения Урок 5. Ссылки. Часть 1 Урок 5. Ссылки. Часть 2 Урок 6. Атрибуты Урок 7. Таблицы

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

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

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>.


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

<strong>eget aliquet</strong>
Жирный текст. Жирный текст в браузере
<em>eget aliquet</em>
Курсивный текст. Курсивный текст в браузере
<ins>eget aliquet</ins>
Подчеркнутый текст. Подчеркнутый текст в браузере
<del>eget aliquet</del>
Зачеркнутый текст. Зачеркнутый текст в браузере

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

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

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

Курсивный и жирный текст в браузере

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

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

1 комментарий к записи
  • Ирина

    А, поняла в чём проблема! Это стрелки в другое направление показывают. Стрелка, где следующий урок, направляет на предыдущий. 🙂

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *