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

Информация о материале: Родительская категория: Программирование; Категория: HTML

Разметка начертания текста, спецсимволы HTML.

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

ВАЖНО!

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

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

Обучающее видео по HTML. Разметка начертания текста, спецсимволы HTML.

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

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

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

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

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

Тег <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 также позволяет писать простейшие математические формулы и обозначать индексы. Для этого применяются теги:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)