Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Видео-уроки HTML. Часть 10. Разметка начертания текста, спецсимволы HTML

Это последнее видео в курсе «HTML для начинающих». В нём рассказано про разметку текста и про спецсимволы HTML.

ВАЖНО!

Все теги разметки в этом видео парные. Открывающий тег отмечает начало зоны форматирования, закрывающий её окончание.

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



Начертание текста.

Теги выделения текста.

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

Таким образом, применяя <b> и <strong>, получаем жирное начертание текста; применяя теги <i> и <em>, получаем курсивное начертание текста.

Тег <u> используется для подчёркивания текста.

Тег <s> и <srike> делают одно и тоже – перечёркивают текст.

Текст отмеченные тегом <tt> будет выведен моноширинным шрифтом.

Пример использования тегов выделения текста.

<html>
    <head>
        <title>Теги выделения текста</title>
    </head>

    <body>
        <h2>Теги выделения текста</h2>
        <ul>
            <li><b>жирный шрифт</b></li>
            <li><strong>акцент Жирным</strong></li>
	    <li><i>курсивный шрифт</i></li>
	    <li><em>акцент Курсивом</em></li>
	    <li><u>подчёркивание</u></li>
	    <li><s>зачёркивание</s></li>
	    <li><strike>зачёркивание</strike></li>
	    <li><tt>моноширинный</tt></li>
	</ul>
    </body>
</html>

Положение текста

Надстрочный и подстрочный текст

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

  • <sup> - выводит символы вверх (наверное от слова super, а может быть нет, но так проще запомнить: super – значит вверх);
  • <sub> - опускает символы вниз

Пример использования надстрочного и подстрочного текста

<html>
    <head>
        <title>Положение текста</title>
    </head>

    <body>
        <h2>Положение текста</h2>
        <p>1 м<sup>3</sup> H<sub>2</sub>O весит 1 тонну!</p>
    </body>
</html>

На примере видно, как можно использовать теги <sup> и <sub> в написании единиц измерений и химических формул.

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

Размер текста

Теги увеличения и уменьшения размера шрифта

Теги <big> и <small> служат для увеличения и уменьшения размера шрифта (как можно понять из их названия).

Пример использования тегов увеличения и уменьшения размера шрифта

<html>
    <head>
        <title>Размер текста</title>
    </head>

    <body>
        <h2>Размер текста</h2>
        <p>Джомолунгма (<big>Эверест</big>) — высочайшая вершина Земли.</p>
        <p>Колибри (семейство <small>мелких птиц</small>) — единственная в мире птица, способная летать назад.</p>
    </body>
</html>

Спецсимволы HTML

Спецсимвол в HTML – это символ, которого нет на стандартной клавиатуре. Начинается спецсимвол с амперсанда & и заканчивается точкой с запятой ; между которыми стоит спецслово или численный код спецсимвола.

Отдельно хочу отметить спецсимволы < (меньше) и > (больше). Эти символы есть на клавиатуре, но попробуйте вывести в HTML документе какой-нибудь HTML-тег. Он будет преобразован браузером и не отображён. Именно поэтому, если нам нужно вывести HTML-код в виде текста, нужно заменить < спецсимволом &lt;, а > спецсимволом &gt;.

Для того, чтобы узнать большее количество спецсимволов, погуглите по фразе «Спецсимволы HTML».

Задание к этому видео

Заданием к этому видео будет, как обычно, выполнить самостоятельно приведённые в нём примеры. Ну и поэкспериментировать со спецсимволами и выводом HTML-текста в браузере.

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

Заключение

Это было последнее видео данного уровня «HTML от простого к сложному». Если все примеры выполнены и усвоены – это повод вписать к себе в резюме строчку «Знания HTML – базовые». ;)

Следующий этап – это научиться верстать более сложные и структурированные HTML-документы. Но это уже в следующем цикле, который выведет знание HTML на более высокий уровень! =)

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )