Как сделать зачеркнутый текст в html
Приветствую вас, дорогой читатель, случайно или умышленно зашедший на мой блог!
В данной статье я покажу несколько способов как сделать в html зачёркнутый текст.
Навигация по статье:
Выглядеть он будет вот так: зачеркнутый текст в html
Для чего это может понадобится?
- Такой текст можно использовать для задания акционных цен, когда старая зачёркнута, а новая нет.
- Для общения на форумах и в сосетях. Я не очень понимаю зачем, но люди часто используют этот приём =)
- Для размещения текстов на сайте.
Для создания такого зачёркнутого текста можно воспользоваться одним из специальных тегов.
Использование тегов
stike и s для зачёркивания текстаТег strike
Используется он аналогично любым другим строчным (инлайновым) тегам. То есть вы просто ставите этот тег в начале и в конце слова или фразы, которую нужно зачеркнуть.
Сам код для зачёркнутого текста будет выглядеть так:
<strike>html тег для зачеркнутого текста</strike>
<strike>html тег для зачеркнутого текста</strike> |
Вот что получится в итоге:
html тег для зачеркнутого текста
Тег s
Тот же тег stike, но в сокращённом виде.
html код зачеркнутого текста будет выглядеть так:
<s>html тег для зачеркнутого текста</s>
<s>html тег для зачеркнутого текста</s> |
Результат этого кода выглядит так:
html тег для зачеркнутого текста
В последней спецификации HTML данные теги не рекомендованы к использованию, так как они относятся к классу форматирования текста, а не к классу разметки страницы.
Конечно, в их использовании нет ничего критичного. Просто всё оформление текста лучше задавать через CSS. Данные теги считаются уже устаревшими так как сейчас для создания подчёркнутого текста стараются использовать не их, а стилизацию через CSS или тег del.
Использование html тега
del для зачёркнутого тексаВообще данный тег изначально был предназначен для пометки удалённого текста в новой версии документа.
Если честно, то я ещё не сталкивалась с необходимостью помечать какой-то текст как удалённый, поэтому на практике его чаще всего используют просто для зачёркивания текста.
Для того чтобы сделать зачёркнутый текст при помощи html можно воспользоваться следующим кодом:
<del>html тег для зачеркнутого текста</del>
<del>html тег для зачеркнутого текста</del> |
Результат его использования будет выглядеть так:
html тег для зачеркнутого текста
Как видите полученный результат ничем не отличается от того что мы получили при использовании тегов
Использование тега del более предпочтительно для использования при вёрстке сайтов.
Как сделать зачеркнутый текст на css?
Самым оптимальным вариантом для создание зачёркнутого текста на html странице будет использование CSS. Правда этот способ немного дольше и длиннее, поэтому его применение не всегда оправдано.
Для создания зачёркнутого текста в CSS существует специальное CSS свойство text-decoration со значением line-through
Для того чтобы сделать зачёркнутый текст нужно его заключить в тег span или любой другой и присвоить этому тегу определённый класс, а затем в CSS для этого класса указать свойство text-decoration:line-through;
html код зачёркнутого текста будет выглядеть так:
<span class=”strike-text”>html тег для зачеркнутого текста</span>
<span class=”strike-text”>html тег для зачеркнутого текста</span> |
А вот CSS код:
.strike-text { text-decoration:line-through; }
.strike-text { text-decoration:line-through; } |
Также можно задать это CSS свойство в самом теге при помощи атрибута style:
<span style=”text-decoration:line-through;”>html тег для зачеркнутого текста</span>
<span style=”text-decoration:line-through;”>html тег для зачеркнутого текста</span> |
Правда этот вариант тоже не всегда приветствуется. Но в любом случае выбирать вам!
Для создания зачёркнутого текста у нас есть аж целых 5 способов! Так что выбирайте любой из них и смело используйте у себя на сайте.
На этом у меня всё. Подписывайтесь на обновления блога и заходите на мой канал YouTube. Там много полезных видео уроков.
Желаю вам хорошего настроения и до встречи в следующих статьях!
С уважением Юлия Гусарь
Основные html теги для текста и css-свойства для его оформления
От автора: пишете вы статью на своем блоге и надо как-то оформить ее, чтобы привлечь внимание посетителей. В этом вам помогут html теги для текста, а также нужные свойства в css.
Выделение текста с помощью html-тегов
Эта статья не претендует на полноценный справочник по html-тегам, но если вам интересна тема, то предлагаю разобраться в значении большинства необходимых нам тегов для выделения текста.
Чаще всего текст на страничке выделяют жирным шрифтом или курсивом. Для этого есть специальные теги <strong> и <b> (выделяют жирным), а также <em> и <i> (курсивом). Все они парные, то есть нужные слова нужно поместить между открывающим и закрывающим тегом. Казалось бы, зачем придумали два тега для одного и того же действия?
На самом деле в html они выполняют не только оформительскую роль, но и смысловую. Так, тег b просто выделяет тег жирным, не придавая ему большего смысла, а вот strong помимо простого выделения еще и придает словам особую важность. Поэтому этим тегом не стоит выделять полтекста, а использовать разумно.
В CSS также есть свойства, которые обладают таким же эффектом, что и перечисленные теги. Например, свойство font-weight: bold делает текст жирным, а font-style: italic – курсивным.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееПодчеркивание и зачеркивание текста
Для подчеркивания и зачеркивания тоже есть свои теги. <ins> подчеркивает слова, а <del> — зачеркивает их. Чтобы добиться такого же эффекта через css, применяют свойство text-decoration. У него есть несколько значений:
Underline – подчеркивание снизу;
Overline – подчеркивание сверху;
Line-through — зачеркивание;
И еще, для этого свойства через пробел можно прописать несколько значений. По сути, можно даже дать ему все три вида подчеркиваний, только не вижу смысла в этом.
В HTML 5 ввели еще один тег — mark, который позволяет просто выделить текст. По умолчанию он выделяется желтым цветом, хотя через css вы можете легко переназначить это и создать свое выделение, которое соответствует дизайну вашего сайта.
Вывод текста в верхнем и нижнем индексе
Немного разобрались, но что если вам надо написать формулу или что-то другое, где нужно вывести некоторые цифры или буквы в верхнем или нижнем индексе. Конечно, html предоставляет нам для этого нужные средства. Тег sub отображает шрифт в виде нижнего индекса, а sup — в виде верхнего. Также это можно сделать через css. Для этого нужному тексту надо прописать:
vertical-align: sub | super
vertical-align: sub | super |
Font-size: размер шрифта, чуть меньший, чем у обычного текста
Как оформить текст с помощью CSS?
Если вам нужно оформить шрифт с помощью css, то к нему нужно как-то обратиться с помощью селектора. Одно дело, если вам надо выделить целый абзац или ссылку, тогда селектор у вас есть, но что, если оформить нужно одно слово где-то в середине статьи? Для этого существует замечательный парный тег span, который никак не влияет на внешний вид своего содержимого и не придает ему никакого смысла.
Соответственно, нужный вам для оформления фрагмент заключаем в span, привязываем к нему произвольный стилевой класс и пишем стили без каких-либо проблем!
Вывод текста с сохранением пробелов.
В html существует тег pre, который позволяет вывести информацию так, как написано в текстовом редакторе. Это может пригодиться, если вы пишете стих или нужно поставить несколько пробелов. Нор через css тоже можно управлять форматированием текста. Для этого существует свойство white-space. Его значения:
Nowrap – слова отображаются одной строкой без переносов. Если они не влезают в строку, появится горизонтальная прокрутка.
Pre – действует аналогично тегу pre
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPre-wrap – аналогично предыдущему значению, но автоматически переносит текст на новую строку, когда он перестает помещаться (пожалуй, самое лучшее значение)
Выравнивание текста
Мы уже рассмотрели некоторые html теги для текста, но еще стоит упомянуть выравнивание. Оно задается не тегами, а через css-свойство text-align:
Right – по правому краю.
Left – по левому.
Center – по центру (например, для заголовков)
Justify – по ширине. Это значение означает, что слова в строке будут растянуты так, чтобы занять всю ее ширну.
Цвет и фон текста
Опять же, это уже невозможно задать с помощью html-тегов, зато можно через css. Мы опять же приходим к выводу, что использовать теги для редактирования текста html не очень удобно. Для цвета самого текста есть свойство color, которое имеет много значений. Цвет можно задавать как с помощью ключевых слов (orange, black, red), так и с явным указанием цветового режима: color: rgb(130, 100, 12). Фон задается абсолютно также, но только с помощью свойства background.
Размер и шрифт текста
Свойство Font-size задает размер шрифта, а font-family позволяет выбрать сам шрифт или его семейство. Например:
Если название шрифта состоит из нескольких слов, то нужно заключать его в кавычки.
Тени для текста
К тексту также можно применить тень, которая задается свойством text-shadow:
text-shadow: 2px 2px 0 red
text-shadow: 2px 2px 0 red |
где:
Смещение по горизонтали | смещение по вертикали | размытие тени | цвет тени.
Смещение по горизонтали | смещение по вертикали | размытие тени | цвет тени. |
Таким образом, можно сделать достаточно красивые буквы. Тени обычно применяют к заголовкам. В статье нет необходимости это делать, так как тень зачастую ухудшает читаемость. Можно выделять тенью подзаголовки и т.д.
Как видите, теги для работы с текстом в html есть, и их достаточно немало. Самыми популярными являются те, которые выделяют текст жирным шрифтом. Стоит отметить, что CSS предлагает гораздо больше возможностей для оформления шрифтов. С его помощью можно и задать тени (даже множественные), и задать размер, начертание и т.д. В CSS можно повернуть текст, задать межбуквенный интервал и реализовать интересные эффекты при наведении. Применение к словам некоторых свойств можете посмотреть на этом скриншоте:
Хотите и дальше изучать html и css? Тогда подписывайтесь на наш блог, потому что здесь вы найдете все для сайтостроения.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьКак сделать зачеркнутый текст в html
Первыми тегами для зачёркнутого текста были strike и s. C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили.
1. Зачеркнутый текст через html теги <s>, <strike> и <del>
Весь текст заключенные в html теги <s></s>, <strike></strike> и <del></del> становится зачеркнутым. Необычная буква s произошло в сокращение от английского слова “strike”.
Разница между всеми тремя тегами визуально отсутствуют. Однако последний вариант с использованием html тега <del></del> считается более предпочтительным, поскольку он поддерживается в стандарте HTML5. Другие теги не поддерживаются (они конечно будут отображаться корректно, но валидацию не пройдут).
<p>Обычный шрифт. <s>Зачеркнутый текст через тег s</s></p><p>Обычный текст. <strike>Зачеркнутый текст через тег strike</strike></p><p>Обычный текст. <del>Зачеркнутый текст через тег del</del></p>
Преобразуется на странице в
Обычный шрифт. Зачеркнутый текст через тег s
Обычный текст. Зачеркнутый текст через тег strike
Обычный текст. Зачеркнутый текст через тег del
Источник: http://zarabotat-na-sajte.ru/uroki-html/zacherknutiy-tekst-v-html.html
Использование тегов
stike и s для зачёркивания текстаТег strike
Используется он аналогично любым другим строчным (инлайновым) тегам. То есть вы просто ставите этот тег в начале и в конце слова или фразы, которую нужно зачеркнуть.
Сам код для зачёркнутого текста будет выглядеть так:
<strike>html тег для зачеркнутого текста</strike> |
Вот что получится в итоге:
html тег для зачеркнутого текста
Тег s
Тот же тег stike, но в сокращённом виде.
html код зачеркнутого текста будет выглядеть так:
<s>html тег для зачеркнутого текста</s> |
Результат этого кода выглядит так:
html тег для зачеркнутого текста
В последней спецификации HTML данные теги не рекомендованы к использованию, так как они относятся к классу форматирования текста, а не к классу разметки страницы.
Конечно, в их использовании нет ничего критичного. Просто всё оформление текста лучше задавать через CSS. Данные теги считаются уже устаревшими так как сейчас для создания подчёркнутого текста стараются использовать не их, а стилизацию через CSS или тег del.
Источник: http://impuls-web.ru/kak-sdelat-zacherknutyj-tekst-v-html/
Синтаксис
<s>выделенный текст</s>
Источник: http://guruweba.com/html/teg-s-html-zacherknutyy-neaktualnyy-tekst-perecherknytyy/
Использует
Маркировка ошибок
Зачеркнутый текст в основном используется для обозначения ошибочного текста или текста, который необходимо удалить. Исторически это также отмечалось точками под буквами, которые следует игнорировать (на латыни : punctum delens ).
Физика
В квантовой теории поля , слэш через символ, например, ⱥ , является сокращенным для & gamma ц ц , где есть ковариантный четырехмерный вектор , то & gamma ц являются гамма – матрицей , и повторяются индекс ц суммируется по согласно обозначения Эйнштейна .
Выделение
В средневековых рукописях, таких как Книга Судного дня , «зачеркивание» текста красными чернилами часто выполняет функцию выделения, как и современные подчеркивания .
Источник: http://ru.other.wiki/wiki/Strikethrough
Заголовки текста разного уровня
Заголовки это не только важная часть оформления текста, но и один из инструментов внутренней оптимизации. В html тексте заголовки задают теги <h>. Для того, чтобы посмотреть, как они будут выглядеть прописываем в документе следующий код:
<h3>Поместите здесь текст, который вы хотите сделать заголовком</h3>
Цифра 2 рядом с буквой h означает уровень заголовка. Всего уровней 6. Первый уровень – название статьи. Все остальные – заголовки разделов и подразделов.
Источник: http://bestseoblog.ru/tegi-html-kotorye-ispolzuyutsya-dlya-oformleniya-tekst/
Отображение в браузере
Население Земли составляет уже более шести семи миллиардов человек.
Источник: http://guruweba.com/html/teg-s-html-zacherknutyy-neaktualnyy-tekst-perecherknytyy/
Изменяем размер шрифта
Размер шрифта текста задается в html с помощью тега <font>, у которого есть атрибут «size».
<font size=”5”>Размер шрифта 5</font>
Источник: http://bestseoblog.ru/tegi-html-kotorye-ispolzuyutsya-dlya-oformleniya-tekst/
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Источник: http://webref.ru/html/strike
2. Зачеркнутый текст через свойство CSS text-decoration
В CSS есть свойство text-decoration, которое отвечает за подчеркивание текста.
Синтаксис CSS text-decoration
text-decoration: none|underline|overline|line-through|inherit;
Где:
- none – текст без оформления
- underline – нижнее подчеркивание
- overline – верхнее подчеркивание
- line-through – зачеркивание текста
- blink – мерцающий текст (рекомендуется не применять это значение)
Нас интересует значение line-through, которое задает зачеркивание текста.
Например:
<html><head><style> .del{ text-decoration: line-through; }</style></head><body> <div class=”del“>Текст со свойством text-decoration: line-through</div></body></html>
Преобразуется на странице в
Текст со свойством text-decoration: line-through
Читайте также:
• Подробное описание свойства CSS border
• Подчеркнутый текст через теги html и свойства CSS
• Как сделать фон для сайта (background css)
• Фреймы html
• Декларация !important
• Свойство CSS display
• Свойство CSS transform
• Свойство CSS transition
• Курсивный текст в html
• Подчеркнутый текст html
• Жирный шрифт html
← Перейти в каталог html уроков и советов
Источник: http://zarabotat-na-sajte.ru/uroki-html/zacherknutiy-tekst-v-html.html
Синтаксис
text-decoration: none|underline|overline|line-through|inherit;
Источник: http://puzzleweb.ru/css/pr_text-decoration.php
Пример использования <s> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Зачеркнутый текст с помощью тега s</title>
</head>
<body>
<p>Население Земли составляет уже более <s>шести</s> семи миллиардов человек.</p>
</body>
</html>
Источник: http://guruweba.com/html/teg-s-html-zacherknutyy-neaktualnyy-tekst-perecherknytyy/
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Источник: http://webref.ru/html/strike
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
Источник: http://webref.ru/html/strike
Смотрите также
- Бар (диакритический знак)
Источник: http://ru.other.wiki/wiki/Strikethrough
| Объявления | |
| Тема | Обычный текст |
| Сообщение | Полностью в формате HTML |
| Ссылка внутри курса | Не отображается |
| Задания (традиционные курсы) | |
| Имя | Обычный текст |
| Инструкции | Частично в формате HTML |
| Отзыв | Частично в формате HTML |
| Задания (курсы Ultra) | |
| Имя | Обычный текст |
| Описание | Обычный текст |
| Содержимое задания | Полная поддержка редактора содержимого курсов Ultra |
| Отзыв | Полная поддержка редактора содержимого курсов Ultra |
| Аудио | |
| Имя | Обычный текст |
| Имя файла | Обычный текст |
| Ссылка внутри курса | |
| Имя | Обычный текст |
| Описание | Не отображается |
| Форум обсуждений | |
| Имя | Обычный текст |
| Описание | Полностью в формате HTML |
| Тема | Полностью в формате HTML |
| Ответ в теме | Полностью в формате HTML |
| Ответ на ответ | Полностью в формате HTML |
| Имя ссылки внутри курса | Обычный текст |
| Описание ссылки внутри курса | Не отображается |
| Документ (курсы Ultra) | |
| Имя | Обычный текст |
| Основная область | Полная поддержка редактора содержимого курсов Ultra |
| Файл | |
| Имя | Обычный текст |
| Имя файла | Обычный текст |
| Папки | |
| Имя | Обычный текст |
| Описание | Не отображается |
| Изображения | |
| Имя | Обычный текст |
| Замещающий текст | Не отображается |
| Длинное описание | Обычный текст |
| Элемент (традиционные курсы) | |
| Имя | Обычный текст |
| Основная область | Полностью в формате HTML |
| Учебный модуль | |
| Имя | Обычный текст |
| Описание | Не отображается * Учебные модули выполняют те же функции, что и папки. Содержание не отображается. |
| План занятия | |
| Имя | Обычный текст |
| Описание | Не отображается * Планы занятий выполняют те же функции, что и папки. Метаданные не отображаются. |
| Тест (традиционные курсы) | |
| Имя | Обычный текст |
| Описание ссылки на содержимое | Не отображается |
| Описание теста | Не отображается |
| Инструкции к тесту | Частично в формате HTML |
| Заголовок вопросов теста | Частично в формате HTML |
| Текст вопросов теста | Частично в формате HTML |
| Вариант ответа на вопрос теста | Частично в формате HTML * Вложения и ссылки не отображаются |
| Отзыв: для каждого вопроса | Не отображается |
| Отзыв: попытка | Частично в формате HTML |
| Тест (курсы Ultra) | |
| Имя | Обычный текст |
| Описание | Обычный текст |
| Текст вопросов теста | Полная поддержка редактора содержимого курсов Ultra |
| Вариант ответа на вопрос теста | Полная поддержка редактора содержимого курсов Ultra |
| Отзыв об отправке | Полная поддержка редактора содержимого курсов Ultra |
| Неподдерживаемые типы содержимого: ссылки на инструменты, блоги, вики-страницы, журналы, диспетчер сеансов Collaborate Ultra, учебные планы, гибридные веб-приложения для YouTube | |
| Имя | Обычный текст |
| Описание | Не отображается |
| Видео | |
| Имя | Обычный текст |
| Имя файла | Обычный текст |
| Веб-ссылка | |
| Имя | Обычный текст |
| Текст | Не отображается |
что это и как применять
Положительная репутация в поисковых системах без помех от недоброжелателей возможна с Семантикой!
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Html-теги для текста – это теги, которые меняют оформление заключенного в них контента.
Эта идея пришла из печатных издательств. Редакторы на полях помечали, что является заголовком, как оформить список.
Так же и теги. Они указывают, какой стиль должен быть у элемента.
Теги и элементы
Каждый тег имеет вид:
<Название тега>
Элемент – это совокупность тега и его содержимого. Многие из них требуют закрывающего тега:
</Название тега>
Особенно это касается текстовых тегов. Закрывающий показывает, когда следует прекратить оформление или закончить блок, таблицу, заголовок и т.д.
Примеры элементов:
- <h2>Header</h2>
- <div>Блок</div>
- <i>курсив</i>
Некоторые элементы не требуют закрытия
- <img src=”1.jpg”>
- <hr>
В таких случаях отсутствует содержимое и браузер просто размещает на экране заданный объект. В первом случае это рисунок, во втором линия. Закрывающий используется, когда в элементе есть содержимое: текст и/или другие теги.
Верстальщик сайтов знает, для чего предназначен каждый тег и как поведет себя «обернутое» в элемент содержимое.
Парадигма оформления современных сайтов
Первоначально разметка позволяла и оформлять страницы, и указывать логическое назначение блоков. Новая версия HTML 5.0 нацелена на логическую разметку. Таким образом определяются тематические разделы на странице. При этом подходе и поисковым машинам, и людям легче ориентироваться в коде.
Все оформление выполняется в стилистических таблицах CSS в виде правил. Назначая каждому элементу класс или идентификатор, верстальщик указывает свойства стиля и устанавливает его значение. Хранение стилей в отдельном файле позволяет выполнить единое оформление для всех страниц сайта.
Но самый большой плюс заключается в легкости изменения дизайна всего ресурса. Изменяя одно значение для фона, верстальщик получает новый бэкграунд на всех страницах, где это правило использовалось.
Валидация страницы
При продвижении сайта важную роль играет его валидность: «правильность» кода и соответствие его стандартам. Так как в настоящее время распространены два стандарта HTML – 4 и 5, то используются различные виды объявления типа документа:
- Strict. Не включает теги font, фреймы и пр. Это «строгий» набор правил для верстки на HTML 4.<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
- Transitional. Используется для сайтов, которые были написаны до появления новых стандартов. Разрешены устаревшие теги.<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
- HTML. Поддержка последнего стандарта.<!DOCTYPE HTML>
Каждый документ должен ссылаться на правила и соблюдать их. Используются только те элементы, которые разрешены стандартом. В связи с этим в новом стандарте указываются теги, которые считаются устаревшими. Их использование не рекомендуется. К ним относится большая часть тегов, предназначенных исключительно для форматирования контента.
Проверить валидность сайта можно на официальном сайте W3C – организации, где создаются стандарты.
Теги форматирования текста html
Их можно разделить на оформительские и логические. Последние меняют стиль, но при этом показывают и назначение блока контента. Например, цитаты или машинный код.
Рассмотрим все элементы, которые позволяют оформить текстовую часть сайта.
- <b>— Жирное выделение.
- <basefont>— Установка цвета и шрифта по умолчанию для страницы. Не рекомендуется к использованию.
- <big> — Увеличивает размер шрифта на одну условную единицу. Всего их семь. Стандартный не оформленный символ имеет размер 3. Вложение тегов будет увеличить на дополнительную единицу на каждом уровне. В CSS аналогом является свойство font-size.
- <cite> — Логическая метка текста как цитаты или сноски. Символы оформляются курсивом, но это можно изменить в таблице стилей.
- <code> — Вывод символов, которые помечаются как программный код. Оформляется моноширинным текстом уменьшенного размера (все символы имеют одинаковую ширину).
- <dfn>— Необходимо заключать в этот тег первое упоминание термина в статье. Отображается курсивом во всех браузерах.
- <em>— Используется для привлечения внимания к фрагменту контента. Выделяется курсивом. Аналог CSS font-style.
- <font> — Самый запрещенный тег для текста в современной разметке. Браузеры его еще поддерживают, так как многие встроенные редакторы используют его для указания размера и шрифта. Но при ручной верстке не рекомендуем применять такой способ форматирования. Лучше пользоваться свойствами CSS font-size и color – аналоги написания<font size=”Размер”color=”Цвет”>.
- <h2>-<h6>— Логическое выделение структуры заголовков контента. Текст между открывающим и закрывающим тегами помечается жирным и имеет нестандартный размер. Главный заголовок h2 имеет самый большой шрифт, h6 — самый маленький.
- <i> — Курсив. Не осуждается последним стандартом, но рекомендуется использовать font-style.
- <kbd>— Обозначает моноширинным шрифтом имитацию напечатанного на клавиатуре текста.
- <mark>— Логическое выделение контента. Дополнительно Chrome и FireFox подсвечивают его желтым фоном.
- <p> — Абзац. Контент, помеченный этим тегом начинается с новой строки. Между ними ставится отступ. Не требует закрывающего тега, новый абзац начинается при появлении любого блочного элемента.
- <pre>— Используется для оформления текста так, как он был указан при верстке. По умолчанию в HTML любое количество подряд идущих пробелов трансформируются в один, а обычные переносы не учитываются. Элемент pre учитывает положение символов.>
- <q> — Выделение цитат, текст отображается в кавычках.
- <samp>— Отображает символы как на результат выполнения программы на экран. Используется моноширинный шрифт.
- <small>— Выполняет действия, обратные элементу big, уменьшая размер символов на условную единицу.
- <strike> — Зачеркивает текст. Аналог сокращенного элемента. Не рекомендуется использовать. Аналог CSS text-decoration со значением line-through.
- <strong>— Жирное начертание. Логически акцентирует текст.
- <sub>— Показывает символ в нижнем индексе. Размещается ниже стандартной базовой линии, на которой располагаются символы, и имеет уменьшенный размер. В CSS используется vertical-align.
- <sup>— Показывает символ в верхнем индексе. Размещается выше базовой линии стандартного текста и имеет уменьшенный размер. В CSS используется vertical-align.
- <sup>— Используется для подчеркивания текста. В HTML 5 запрещен, используется свойство CSS text-decoration со значением underline.
- <var> — При выводе кода компьютерной программы все переменные заключаются в этот тег. Выделяет их курсивом.
- <xmp> — Показывает текст так, как он записан в коде страницы. Аналогично pre.
Специальные символы
Помимо текста и медиа-контента, на страницу можно выводить небольшие изображения. Они выглядят как иконки, но вставляются в текст не картинками, а спецсимволами. Некоторые примеры приведены в таблице.
Также в HTML 5 появились деньги, карточные масти и знаки гороскопа.
Используйте в разметке Html текстовые теги, которые подчеркивают логическое значения текста. Не стоит оформлять каждый фрагмент контента отдельно. Это допустимо только в случае, если вы точно знаете, что такое форматирование больше нигде не повторяется. Для одинаковых стилей используйте классы CSS.
В дальнейшем такой подход поможет сэкономить время на изменении дизайна, а также повысить шансы на попадание в ТОП поисковых систем.
2.8. Форматирование шрифтов в html
При создании сайта постоянно возникает необходимость изменения шрифта текста для самых разных частей и элементов HTML-страниц, ведь это не только добавляет сайту уникальность и стиль, но и повышает качество восприятия информации. В HTML для этого существуют специальные теги.
Изменение стилей шрифтов
Изменять стили написания шрифтов в HTML можно далеко не одним способом:
<B>…</B> и <STRONG>…</STRONG> — выделяют текст полужирным шрифтом.
<I>…</I> и <EM>…</EM> — выделяют текст курсивом.
<SUP>…</SUP> — выводит текст в верхнем индексе, например E = mc2.
<SUB>…</SUB> — выводит текст в нижнем индексе, например H2SO4.
Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.
Для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри <STRONG> и <EM>. Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.
Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Лучше использовать атрибут style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:
<тег style=»text-decoration:underline»>…</тег> — подчеркивает текст.
<тег style=»text-decoration:overline»>…</тег> — надчеркивает текст.
<тег style=»text-decoration:line-through»>…</тег> — зачеркивает текст.
Пример изменения стилей шрифтов
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Изменение стилей шрифтов</title>
</head>
<body>
<p><b>Жирный шрифт.</b><i>Курсив.</i></p>
<p><b><i>Жирный курсив.</i></b></p>
<p><em>H<sub>2</sub>SO<sub>4</sub></em> — формула серной кислоты написанная курсивом.</p>
<p style=»text-decoration:underline»>Подчеркнутый параграф текста.</p>
<p>Обычный текст,
<strong style=»text-decoration:line-through»>зачеркнутый жирный.</strong>
</p>
</body>
</html>
Результат в браузере
Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. есть. Общий синтаксис атрибута style следующий:
<тег>…</тег>
Тег <SPAN> или что делать, когда нет нужных тегов
Тег <SPAN>…</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства.
Пример использования тега SPAN
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Использование тега SPAN</title>
</head>
<body>
<p><span>Обычный текст без изменений.</span></p>
<p>Еще обычный текст.
<span style=»text-decoration:underline»>Подчеркнутый.</span>
<span style=»text-decoration:line-through»>Зачеркнутый.</span>
</p>
</body>
</html>
Результат в браузере
Меняем имя (гарнитуру) шрифта
Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:
Шрифты | Семейство |
‘Comic Sans MS’ | cursive (рукописные) |
Courier | monospace (моноширинные) |
Arial, Helvetica, Verdana, Tahoma | sans-serif (рубленные, гротески) |
Times, ‘Times New Roman’, Garamond | serif (с засечками, антиква) |
По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:
<тег style=»font-family:имя шрифта, семейство»>…</тег>
Если имя шрифта состоит из нескольких слов, то его необходимо закрывать в одинарные кавычки. Допускается указывать не одно, а несколько имен шрифтов через запятую и тогда, если первого шрифта на компьютере нет — будет использован второй, третий и т.д.
Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его втег<SPAN> и примените атрибут к нему.
Пример изменения имени шрифтов
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Изменение имени шрифтов</title>
</head>
<body style=»font-family:Arial, Verdana, sans-serif»>
<p>Это шрифт Arial, если его нет, то Verdana, а если
и его нет, то любой другой из sans-serif.
</p>
<p style=»font-family:’Comic Sans MS’, cursive»>
Это Comic Sans MS илилюбой cursive.
</p>
<p>Этоопять Arial, Verdana илилюбой sans-serif.
<span style=»font-family:Courier, monospace»>
А это Courier или любой monospace.
</span>
</p>
</body>
</html>
Результат в браузере
Меняем размер шрифта
Язык HTML ограничен всего семью размерами шрифтов, что, согласитесь, очень мало для хорошего сайта. Поэтому для изменения размеров все давно используют CSS, и сейчас вы тоже этому научитесь.
В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:
pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
% — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.
Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:
<тег style=»font-size:размер»>…</тег>
Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его втег<SPAN> и примените атрибут к нему.
Пример изменения размера шрифтов
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Изменение размера шрифта</title>
</head>
<body style=»font-size:90%»>
<p>Этот размер шрифта составляет 90% от размера
в браузере по умолчанию.
</p>
<p>
Этот размер составляет 90% уже от размера в теге BODY.
</p>
<h5 style=»font-size:120%»>
Размер шрифта заголовка составляет 120% от размера в BODY.
</h5>
<p>Это опять 90% от размера в браузере по умолчанию.
<span style=»font-size:15pt»>
Размер этого шрифта 15 пунктов.
</span>
</p>
</body>
</html>
Результат в браузере
Если для всего параграфа нужен шрифт Arial с размером в 80%, то надо написать так:
<p style=»font-family:Arial, sans-serif»>
<span style=»font-size:80%»>
Текст параграфа.
</span>
</p>
Или так.
<p>
<span style=»font-family:Arial, sans-serif»>
<span style=»font-size:80%»>
Текст параграфа.
</span>
</span>
</p>
Или вообще вот так.
<p style=»font-family:Arial, sans-serif» style=»font-size:80%»>
Текст параграфа.
</p>
Первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS:
<p style=»font-family:Arial, sans-serif; font-size:80%»>
Текст параграфа.
</p>
Гораздо проще. Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует.
Цвет шрифта и цвет знакоместа
В языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега <P> нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.
Как можно указывать цвет?
Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:
Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.
Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета.
Как изменить цвет текста?
Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:
<тег>…</тег> — указание цвета текста по имени.
<тег style=»color:#HEX-код»>…</тег> — указание цвета текста по коду.
И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его втег<SPAN> и примените атрибут к нему.
Пример изменения цвета текста
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Изменение цвета текста</title>
</head>
<body>
<h5 style=»color:#FF0000″>Красный текст заголовка</h5>
<p style=»color:#0000FF»>Синий текст параграфа.</p>
<p>
<em style=»color:#008000″>Зеленыйкурсив.</em>
<span style=»color:#FF0000″>Красныйтекст.</span>
</p>
</body>
</html>
Результат в браузере
Как изменить цвет фона?
Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:
<тег style=»background:имя цвета»>…</тег> — указание цвета фона по имени.
<тег style=»background:#HEX-код»>…</тег> — указание цвета фона по коду.
Пример изменения цвета фона
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Изменение цвета фона</title>
</head>
<body style=»background:#CCCCFF»>
<h5 style=»background:#FFCCCC»>Заголовок.</h5>
<p style=»background:#CCFFCC»>Параграф.</p>
<p>
<b style=»background:#FFFFCC»>Жирныйтекст.</b>
<span style=»background:#FFFFCC»>Обычныйтекст.</span>
</p>
</body>
</html>
Результат в браузере
Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно — прозрачный, вот и все.
Теги выравнивания содержимого теста относительно страницы
Для того, чтобы выровнять содержимое HTML-элемента, необходимо атрибуту style присвоить одно из следующих значений:
text-align:center — Выравнивание каждой строки по центру элемента, например параграфа.
text-align:left — Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).
text-align:right — Каждая строка прижимается к правой стороне.
text-align:justify — Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая — «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify, то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.
Пример выравнивания содержимого тегов
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Выравнивание содержимого тегов</title>
</head>
<body>
<h5 style=»text-align:center»>Заголовокпоцентру.</h5>
<p style=»text-align:right»>Текстпараграфаприжимаетсявправо.</p>
<p style=»text-align:center»>Параграфпоцентру.</p>
</body>
</html>
Результат в браузере
Вообще, горизонтальное выравнивание применяется только к блочным тегам и ячейкам таблицы (о них поговорим позже). Хотя, с другой стороны, даже если вы попытаетесь, то не сможете применить его к встроенным (inline).
Теги, выделяюцие цитаты
Рассмотренные здесь теги не так часто используются в HTML-страницах, но все же иногда без них не обойтись.
Тег <BLOCKQUOTE> или выделяем длинные цитаты
Тег <BLOCKQUOTE>…</BLOCKQUOTE> используется в HTML для выделения так называемых «длинных цитат», например одного или нескольких параграфов. Этот тег является блочным и может содержать блочные теги, но не может содержать встроенные. Кроме этого он добавляет такие же как у параграфов внешние поля сверху и снизу, но еще добавляет и боковые поля, благодаря чему происходит визуальное выделение цитируемого текста.
Пример использования тега BLOCKQUOTE
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Использование тега BLOCKQUOTE</title>
</head>
<body>
<p>Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:</p>
<blockquote>
<p>Очень часто тег BLOCKQUOTE используют не по прямому назначению —
выделение цитируемого текста. А только ради боковых отступов, которые
он создает. В принципе, подобное применение этого тега не противоречит
синтаксису HTML, главное чтобы BLOCKQUOTE содержал блочные теги. Но все
же лучше подобным образом его не использовать, так как BLOCKQUOTE
предназначен именно для выделения длинных цитат.</p>
</blockquote>
</body>
</html>
Результат в браузере
Тег <Q> или выделяем небольшие цитаты
А вот тег <Q>…</Q> используется для обозначения небольших цитат или слов в переносном смысле. Весь текст, который находится между тегов этого элемента, он ставит в кавычки. Кстати, <Q> — это самый обычный встроенный (уровня строки) тег, который может содержать только встроенные теги.
Пример выделения цитат
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Выделяем цитаты в тексте</title>
</head>
<body>
<p><q>Для изучения языка гораздо важнее свободная любознательность,
чем грозная необходимость.</q> Августин Аврелий.</p>
<p><q>Чему бы ты ни учился, ты учишься для себя.</q> Петроний.</p>
</body>
</html>
Результат в браузере
Тег <BR> или принудительный обрыв строки
Иногда требуется, чтобы строка текста не продолжалась во всю ширину доступного пространства, а оборвалась в нужном нам месте и продолжилась на следующей строке. Но как вы помните — браузеры игнорируют простые переводы строк в HTML-коде, как будто их нет. В таких случаях нам поможет тег <BR>, который и осуществляет принудительный обрыв строки в месте его установки.
Тег <BR> тоже является встроенным (inline) элементом и пусть вас не запутает то, что он осуществляет перенос строки после себя, просто у него функция такая. Кроме этого, у элемента <BR> нет закрывающего тега, то есть он является пустым, потому что не может иметь содержимого.
Пример использования тега BR
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Тег BR, обрывстроки</title>
</head>
<body>
<p>Цель творчества — самоотдача,<br>А не шумиха, не успех.<br>
Позорно, ничего не знача,<br>Выть притчей на устах у всех.<br>
<strong>Б. Пастернак.</strong></p>
</body>
</html>
Результат в браузере
Зачем использовать тег <BR>, если можно просто написать текст в нескольких параграфах, он ведь тогда тоже будет указан на разных строках?» Все это так, но не забывайте, что тег <P> создает сверху и снизу поля пустого пространства, а тег <BR> этого не делает. Кроме этого параграфы на то и существуют, чтобы в каждом из них содержались осмысленные и законченные выражения, а не куски текста.
Часто на сайтах можно увидеть, что <BR> используют лишь для того, чтобы создать несколько пустых строк. Да, если его указать подряд несколько раз (<BR><BR><BR>…), то можно сделать вертикальные отступы любых размеров. Но, хотя это и не противоречит синтаксису HTML, я не рекомендую вам так поступать, так как данный тег для этого не предназначен.
Спецсимволы HTML
Спецсимволы HTML — это условные кодовые обозначения, которые преобразуются браузером в различные текстовые знаки: буквы, цифры, знаки препинания, стрелки и так далее. Например, если мы напишем в HTML-странице вот такой код:
<p>±</p>
То браузер нам его не покажет, а отобразит в параграфе знак плюс-минус:
±
Спецсимволы HTML можно указывать двумя способами:
Код символа — В этом случае ставится амперсанд (&), за ним решетка (#), потом идут цифры и в конце ставится точка с запятой (;), как показано выше.
Мнемоника — Сначала также идет амперсанд, потом пишется ключевое слово и тоже в конце точка с запятой, например: ©
Естественно удобней использовать вариант с мнемониками, так как, если вы хоть чуть-чуть знаете английский язык, то сможете догадаться, что за символ выводит каждый из них на страницу и не будете путаться в цифрах. Но, к сожалению, мнемоники есть не у всех символов, поэтому часто приходится использовать именно кодовый вариант.
Обратите особое внимание на то, что спецсимволы-мнемоники чувствительны к регистру, то есть © и © — не одно и то же.
Соответственно, указывайте спецсимволы также, как обычный текст — внутри тегов, которые могут содержать встроенные элементы.
Для чего нужны спецсимволы HTML?
Спецсимволы HTML используются для совершенно разных целей. Я думаю, вы уже догадались, что их применяют, когда нужно вставить на страницу символ, которого нет в стандартной компьютерной клавиатуре. Но это далеко не все. Кроме этого они указываются, когда кодировка страницы не поддерживает какие-то символы в «готовом» виде (к этому мы еще вернемся).
Или, например, есть такой спецсимвол, как неразрывный пробел ( ). И если его поставить вплотную между двумя словами, то в этом месте будет запрещен перенос строки. А если указать его несколько раз подряд ( …), то получим нужный отступ строки, так как эти указанные подряд пробелы браузеры не игнорируют.
Довольно часто спецсимволы используются для отображения на странице HTML-разметки. И правда, ведь если мы захотим отобразить на странице какой-нибудь тег, то просто так у нас это сделать не получится, так как браузер его скроет, посчитав за разметку. Поэтому придется использовать спецсимволы заменяющие угловые скобки тегов (< и >) и кавычки атрибутов («)
Пример использования спецсимволов HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Использование спецсимволов HTML</title>
</head>
<body>
<p><P> — Тег для создания параграфов.</p>
<p><strong>®</strong> — Знак зарегистрированной торговой марки.</p>
<p>При написании статьи лучший вариант — это использование
между словами длинного тире и дефиса, а не только дефиса во всех случаях.</p>
</body>
</html>
Результат в браузере
Создание горизонтальных линий в HTML
В основном горизонтальные линии используются для декорирования HTML-страниц сайта, придавая им более привлекательный вид. Но также ими можно визуально разграничивать информацию соседних разделов, добавляя удобства читателям при ее изучении.
Как нарисовать горизонтальную линию?
Для создания горизонтальных линий в HTML существует специальный тег <HR>. Причем он является блочным тегом, то есть создает переносы строк до и после себя, поэтому линия всегда получается на отдельной строке. Соответственно и указывать его можно только внутри тегов, которые могут содержать блочные элементы, например <BODY> или <BLOCKQUOTE>. А вот сам <HR> не может иметь содержимого, так как у него попросту нет закрывающего тега, то есть он является пустым.
Пример рисования горизонтальных линий в HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Рисуем горизонтальные линии</title>
</head>
<body>
<hr>
<p>Параграф.</p>
<p>Параграф.</p>
<hr>
<p>Параграф.</p>
</body>
</html>
Результат в браузере
Линии получаются очень тонкими, невзрачными и рисуются во всю доступную ширину, поэтому сейчас мы научимся их изменять, чтобы они выглядели более привлекательно.
Как изменить цвет, толщину и ширину горизонтальных линий?
В старых версиях HTML у тега <HR> существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color, size и width, соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style. Общий синтаксис такой:
<hr style=»background:цвет»> — цвет линии (вернее ее фон).
<hr style=»height:размер»> — толщина линии.
<hr> — ширина линии.
<hr> — а можно указать сразу все параметры, только не забываем про точку с запятой (;).
Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#).
В CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.
Если вы указываете размеры в пикселях, то толщина и ширина линии будет зависеть от разрешения монитора, на котором просматривают ваш сайт (чем выше разрешение экрана, тем тоньше и уже линия).
Только ширину линии можно указывать в процентах. Процентные размеры всегда зависят и высчитываются исходя из размеров родительского элемента-контейнера, внутри которого расположен тег <HR>. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег <hr style=»width:50%»> внутри элемента <BLOCKQUOTE>, то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока <BLOCKQUOTE>.
Пример изменения цвета, толщины и ширины горизонтальных линий.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Меняем цвет, толщину и ширину горизонтальных линий.</title>
</head>
<body>
<hr style=»width:50%; height:10px»>
<hr style=»background:#FF9933; width:50%; height:10px»>
<hr style=»background:#9933FF; width:40%; height:15px»>
<hr style=»background:#33FF99; width:20%; height:20px»>
</body>
</html>
Результат в браузере
Изменение положения горизонтальных линий
Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри <HR> атрибут style со значениями для выравнивания содержимого тегов.
Как убрать рамку вокруг линии?
По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.
Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style. А пишется это так:
<hr>
Группирование элементов
Группирование элементов HTML-страницы является одним из самых мощных, удобных и одновременно простых инструментов для создания качественного сайта.
Тег <DIV> или сгруппированный блок
До сих пор все изученные нами элементы HTML могли содержать только один из типов тегов — либо встроенные (inline, уровня строки), либо блочные (block). А теперь позвольте вам представить тег <DIV>…</DIV>. Сам он является блочным, но вот содержать может как встроенные, так и блочные теги, ну и конечно же обычный текст. Но это еще не все, в отличие от других блочных тегов — <DIV> не добавляет абсолютно никаких внешних полей (отступов) пустого пространства вокруг себя, как это делает, например, тег <P>.
Пример использования тега DIV
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Использование тега DIV</title>
</head>
<body>
<div style=»color:#FF00CC; background:#00CCFF; font-size:150%; text-align:center»>Менюсайта</div>
<div style=»color:#CCFF00; background:#FF00CC; font-size:150%; text-align:center»>Дополнительные разделы</div>
<p>Параграф.</p>
<p>Параграф.</p>
<p>Параграф.</p>
<div style=»font-family:Times, serif; text-align:right»>
<p>Параграф.</p>
<p>Параграф.</p>
<p>Параграф.</p>
</div>
</body>
</html>
Результат в браузере
Тег <SPAN> или сгруппированная строка
Тег <SPAN>…</SPAN> является встроенным (инлайн) элементом, который может содержать только встроенные теги и использоваться внутри строк текста.
Пример использования тега SPAN
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Использование тега SPAN</title>
</head>
<body>
<p>
Обычный текст.
<span style=»color:#FF00CC»>
<strong>Жирный.</strong>
<em>Курсив.</em>
</span>
</p>
</body>
</html>
Результат в браузере
При группировании элементов важно соблюдать не только синтаксис HTML, но также смысловое и логическое структурирование кода. Например, если у вас есть страница с краткой биографией двух людей, то не надо пихать внутрь одного блока конец биографии первого человека и начало второго. А вот информацию отдельной биографии или ее части вы вполне можете расположить внутри блока, если это необходимо, или вообще их обе заключить в один блок.
Комментарии в HTML
Xтобы проще ориентироваться в HTML-коде, придумали специальные комментарии. Выглядит это так:
<!— Комментарии —>
Любая информация заключенная в HTML-комментарии не будет обработана браузером и выведена на страницу. Чаще всего их применяют для пояснения того или иного участка кода или для скрытия части самого кода от браузеров, например, при тестировании макета страницы.
Комментарии в HTML можно указывать в любом месте, между любыми тегами, и писать все, что вам заблагорассудится. Но есть несколько ограничений: их нельзя вкладывать друг в друга и писать внутри тела открывающего или закрывающего тега, то есть между скобками < >.
Пример использования комментариев в HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Комментарии в HTML</title>
</head>
<body><!— Начало тела документа —>
<!—Основной блок—>
<div>
<p>Параграф.</p>
<p>Параграф.</p>
<p>Параграф.</p>
<!— <p>Параграф.</p>
<p>Параграф.</p>
<p>Параграф.</p> —>
</div><!—/Основной блок—>
</body><!— Конец тела документа —>
</html>
Ссылки и их разновидности
Ссылки (или гиперссылки) играют самую важную роль в HTML, да и вообще в интернете. В первую очередь именно благодаря им интернет получил столь быстрое развитие и популярность. Ведь ссылки используются для связи HTML-страницы с различными документами в сети, это могут быть другие страницы внутри сайта или страницы любого другого сайта, изображения, аудио и видеофайлы и т.д.
Тег <A> или как сделать ссылки в HTML?
Ссылки создаются при помощи тега <A>…</A>, он относится к уже хорошо известному вам типу — это обычный встроенный (уровня строки) элемент, который может содержать тоже только встроенные теги. Но, внимание, он не может содержать другие теги <A>, то есть нельзя одну ссылку располагать внутри другой.
Чтобы ссылка заработала, в теге <A> необходимо указать адрес документа, к которому она ведет. Это делается с помощью атрибута href, значением которого является URL — уникальный адрес каждого документа в интернете (как адрес вашей квартиры). Подобный адрес вы всегда видите в адресной строке браузера, например: http://seodon.ru/. Обратите внимание, что в интернет-адресах используются прямые слеши (/), а не обратные (\), как в Windows. Чтобы ссылку было видно на странице — внутри элемента <A> надо написать какой-нибудь текст.
Если вы хотите, чтобы при наведении курсора мыши на ссылку появлялась «всплывающая» подсказка, то используйте уже известный вам атрибут title.
Пример создания ссылок в HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Ссылкив HTML</title>
</head>
<body>
<p><a href=»http://seodon.ru/» title=»Сеодон.ру»>Главнаястраница</a></p>
<div>
<a href=»http://seodon.ru/html/»><em>Учебник HTML</em></a>
</div>
</body>
</html>
Результат в браузере
Абсолютные и относительные ссылки
В зависимости от вида адреса, указанного в атрибуте href, ссылки могут быть абсолютными и относительными. Как правило, для связи HTML-документов внутри сайта, используются относительные ссылки, а для ссылок на другие ресурсы — абсолютные.
Абсолютные ссылки — это ссылки, которые содержат полный адрес страницы: имя протокола (http), имя домена-сайта (seodon.ru, www.seodon.ru) и месторасположение самого файла или папки на сайте. Плюсы таких ссылок в том, что они работают везде, где бы их ни указали (любой сайт или компьютер).
Относительные ссылки — они содержат адреса относительно корня сайта или страницы, на которой указаны. Плюсы — они гораздо короче абсолютных, минусы — работают только в пределах сайта. Относительные адреса можно указывать разными способами, поэтому остановимся на них поподробней.
Как правило, все файлы сайта располагают в разных тематических папках. Как называть эти папки, впрочем, как и сами файлы, дело ваше, но обычно в названии присутствует суть содержимого. Например, папки с изображениями называют «image», «img», «pictures», «kartinki» и т.д. Самое главное всегда пишите названия папок и файлов (в том числе и HTML-страниц) строчными буквами.
Чтобы нам разобраться с относительными ссылками, давайте сделаем следующее: создайте папку «mysite», внутри нее создайте папки «1» и «2», а в них еще по одной папке, соответственно «1-1» и «2-2». В каждой папке создайте по одной HTML-странице, их названия должны соответствовать названиям папок, в которых они расположены: 1.html, 1-1.html и т.д., а в корневой папке сделайте два файла mysite1.html и mysite2.html
Файловая структура для обучения созданию ссылок.
Если исходный файл и тот на который ссылаются, находятся в одной папке, то в атрибуте href тега <A> указывается только имя файла.
Ссылка из файла mysite1.html на mysite2.html
<a href=»mysite2.html»>mysite2.html</a>
Если страница на которую ссылаются вложена в одну или несколько папок относительно исходной, то в ссылке перед именем файла указываются эти папки, через прямой слеш (/).
Ссылки из mysite1.html на 1.html и 2-2.html
<a href=»1/1.html»>1.html</a>
<a href=»2/2-2/2-2.html»>2-2.html</a>
Если оба файла находятся в разных папках, то сначала перед адресом указывается одна или несколько команд выхода из папки — «../» (две точки и прямой слеш), чтобы выйти в общую для обоих файлов папку. А затем все так же, как в предыдущем примере.
Ссылки из 1-1.html на 1.html и 2.html
<a href=»../1.html»>1.html</a>
<a href=»../../2/2.html»>2.html</a>
Есть еще один вариант относительных ссылок — относительно корня сайта, но они работают только под управлением сервера, на котором этот сайт находится. В этом случае в самом начале адреса ставится прямой слеш, который означает команду выхода из всех папок, а потом указывается обычный прямой адрес к нужному файлу.
Ссылки из любого файла на 2.html (только для сервера)
<a href=»/2/2.html»>2.html</a>
Естественно ссылки могут вести не только на HTML-страницы, но и на любые другие документы (изображения, программы, видеофайлы и т.д.). В этом случае поведение браузера будет зависеть от его возможностей и настроек, а также от типа самого файла. Например, изображения браузеры обычно открывают в своем окне, а видеофайлы предлагают скачать на компьютер.
Ссылки посещенные, непосещенные, активные и под курсором
Вы сталкивались на разных сайта с такой ситуацией, когда, при нажатии на ссылку, она меняет цвет и если вы возвращаетесь на страницу, то цвет ссылки остается измененным, а не первоначальным. Или когда ссылка меняет цвет в момент нажатия либо при наведении на нее курсора мыши. Так вот:
Ссылки, которые пользователь еще ни разу не активировал называются непосещенными, которые хоть раз активировались — посещенными. Ссылки в кратковременный момент нажатия называются активными, а ссылки при наведении на них курсора мыши так и называются — ссылки при наведении курсора мыши. Для чего я вам все это рассказал? Cкоро узнаете.
Как открыть страницу по ссылке в новом окне?
По умолчанию все браузеры открывают новые страницы в том же окне, но при помощи атрибута target тега <A> можно сделать так, чтобы документы открывались в новом окне. Но есть одно «НО». Этого атрибута нет в текущей версии HTML 4.01 и нет ему аналога в CSS. А все потому, что разработчики языка решили, что открытие новых окон без желания пользователя — это плохо, а если он захочет, то сможет сам открыть страницу в новом окне, кликнув по ссылке правой кнопкой мышки и выбрав нужный пункт меню.
Пример открытия страницы в новом окне.
<a href=»page.html» target=»_blank»>page.html</a>
Именно так, _blank, со знаком подчеркивания в начале.
Изменение цветов в ссылке
Возможность изменения цвета ссылок одна из важных составляющих HTML-верстки. Ведь это позволяет не только грамотно вписать ссылки в дизайн сайта, но и помогает посетителям ориентироваться в его навигации.
В старых версиях HTML существовали специальные атрибуты тега <BODY>, позволяющие изменять цвет ссылок на HTML-странице, это link, alink и vlink, но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS0. Для этого нам надо будет в «шапку» страницы (<HEAD>) вставить тег <STYLE type=»text/css»>…</STYLE>, а внутри него указать один или несколько следующих стилей:
<style type=»text/css»>
a:link {color:цвет} /* цвет непосещенной ссылки */
a:visited {color:цвет} /* цвет посещенной ссылки */
a:hover {color:цвет} /* цвет ссылки при наведении курсора мыши */
a:active {color:цвет} /* цвет активной ссылки (в момент нажатия) */
</style>
Тег <STYLE> используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.
Что касается самих стилей, то сначала там идет имя тега, к которому применяется стиль (в нашем случае это <A>), затем после двоеточия указывается к какой именно ссылке применяется стиль (link, visited, hover, active). Ну а то, что находится в фигурных скобках { } вам должно быть уже хорошо известно по предыдущим урокам. И не забывайте про совет: лучше всегда задавать цвет в HEX-формате со знаком решетка (#) впереди, а не писать имя цвета.
Пример изменения цвета ссылок в HTML-странице
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Изменение цвета ссылок на странице</title>
<style type=»text/css»>
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
<p><a href=»http://seodon.ru/»>Каксоздатьсайт</a></p>
<p><a href=»http://spravka.seodon.ru/»>Справочникипо HTML и CSS</a></p>
</body>
</html>
Результат в браузере
Изменяем цвет отдельных ссылок
Иногда вам может понадобиться, чтобы цвет определенной ссылки отличался от остальных. Тогда укажите внутри тега <A> атрибут style=»color:цвет» и задайте нужный цвет.
Пример использования тегов
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Изменение цвета ссылок на странице</title>
<style type=»text/css»>
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
<p><a href=»http://seodon.ru/»>Сайт Seodon.ru</a></p>
<p>
Здесь вы можете найти
<a href=»http://spravka.seodon.ru/»>
справочник по тегам HTML
</a>
</p>
</body>
</html>
Результат в браузере
Ссылки на электронную почту
Каждый уважающий себя сайт должен иметь обратную связь со своими посетителями. Один из способов этой связи — написать адрес электронной почты (e-mail), но гораздо лучше будет указать его в виде ссылки, при нажатии на которую автоматически откроется почтовая программа. Чтобы это сделать, достаточно создать в теге <A> такую конструкцию:
<a href=»mailto:адрес почты»>адрес почты</a>
Пример создания ссылки на электронную почту
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Ссылка на почтовый ящик</title>
</head>
<body>
<p>
<a href=»mailto:[email protected]» title=»Почтадлясвязи»>[email protected]</a>
</p>
</body>
</html>
Результат в браузере
Как видите все очень просто, только не забывайте о том, что <A> является встроенным (inline, уровня строки) элементом и располагать его можно только внутри тегов, которые могут содержать этот тип.
Пример создания ссылки на несколько ящиков электронной почты
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Ссылка несколько почтовых ящиков</title>
</head>
<body>
<p>
<a href=»mailto:[email protected][email protected],[email protected]»>[email protected]</a>
</p>
</body>
</html>
Создаем закладки. Якоря
До сих пор мы с вами рассматривали ссылки, которые просто вели на другие документы в интернете. А в этом уроке вы научитесь создавать якоря. Якорь (анкор) в HTML — это специальная закладка, которая используется для перемещения пользователя к определенному участку страницы при нажатии на ссылку.
Для создания якоря вам необходимо в месте, к которому будет переход по ссылке, указать <A name=»имя»></A>, где имя якоря — любое слово на английском языке. Как видите, у закладки совершенно не обязательно писать что-то между тегами, ведь она используется только в роли служебной метки. Самое главное не забывайте, что <A> — это встроенный (inline) тег и ставить его можно только внутри HTML-элементов, которые могут содержать данный тип. Впрочем таких элементов очень много.
А вот чтобы сделать ссылку на якорь надо написать <A href=»#имя»>любой текст</A>, именно так, со знаком решетка (#) впереди.
Обратите внимание, что имя якоря в обоих местах надо указывать в одном регистре, то есть нельзя написать в якоре имя, а в ссылке на него #ИМЯ. Кроме этого, на каждой HTML-странице не может быть два якоря с одинаковыми именами, иначе браузер не поймет к какому из них делать переход. А вот ссылок на один и тот же якорь может быть сколько угодно!
Пример создания якорей в HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Создание якорей (закладок)</title>
</head>
<body>
<p><a name=»ontop»></a>Параграф.</p>
<p>Параграф. <a href=»#ontop»>В начало</a></p>
<p>Параграф. <a href=»#ontop»>В начало</a></p>
<p>Параграф. <a href=»#ontop»>В начало</a></p>
<p>Параграф. <a href=»#ontop»>В начало</a></p>
</body>
</html>
Результат в браузере
Ссылка на якорь другой HTML-страницы
Для создания ссылки из одной HTML-страницы на якоря других страниц необходимо в атрибуте href в конце адреса указать #имя нужного якоря.
Пример создания ссылки на якорь другой HTML-страницы
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251″>
<title>Создание ссылки на якорь другой страницы</title>
</head>
<body>
<p>О разведении кактусов вы можете прочитать в разделе
<a href=»flowers.html#cactus»>Кактусы</a>
статьи и цветоводстве.</p>
</body>
</html>
HTML теги для оформления текста | Справочник HTML CSS
Текст является важность частью сайтов, умение правильно его оформить очень важная составляющая при его создании. Использование правильных тегов для текста позволит не только улучшить его визуальное отображение, но также значительно повлияет на оптимизацию страницы для поисковых систем.
В данной статье перечислены только те теги, которые рекомендованы для использования актуальной спецификацией html5.
Структура
h2, h3, h4, h5, h5, h6 — блочные теги предназначены для указания заголовков. Заголовков в html есть 6 уровней, от h2 (первый уровень) до h6 (последний уровень), каждый визуально выделен жирным шрифтом и его соответствующим размером. Заголовки должны описывать содержание, это положительно влияет на оптимизацию сайта. Хорошей практикой считается указывать только один заголовок первого уровня h2, остальных может быть несколько. Заголовки должны указываться по иерархии, на первом уровне заголовок h2 дальше подзаголовок h3 и так далее
p — абзац. Блочный тег, разделяет текст на отдельные абзацы, в конце добавляется отступ
Примеры: https://codepen.io/Yury_P/pen/WNGLgdW
Форматирование
b — визуально выделяет текст жирным начертанием
strong — отображает текст жирным начертанием, логически указывает на важность текста. Может быть использован для выделения ключевых слов для оптимизации поиска
i — задает курсивное начертание текста
em — задает курсивное начертание текста, логически указывает на важность текста
u — подчеркивает текст снизу
pre — сохраняет форматирование текста (не удаляет пробелы и переносы строк)
sup — текст отображается как верхний индекс
sub — текст отображается как нижний индекс
small — уменьшает текст на условную единицу
address — внутри указывается адрес (физический адрес, телефон, почта), обычно отображается курсивным шрифтом
mark — отображает текст как выделенный
abbr — оборачивает аббревиатуру (сокращение), в атрибуте title указывается ее расшифровка, которая показывается при наведении
kbd — отображает название клавиш или текст набранный пользователем, обычно отображается моноширинным шрифтом
dfn — внутри пишется название нового термина, далее идет его пояснение, обычно отображается курсивным шрифтом
ins — выделяет новый текст, который был добавлен при обновлении содержания, обычно отображается как подчеркнутый текст
del — выделяет старый текст, который был удален при обновлении содержания, обычно отображается как зачеркнутый текст
s — зачеркивает текст
Примеры: https://codepen.io/dmitryvalak/pen/zYKXjaV
Цитаты
q — отображает текст как цитату, обрамляет его кавычками
blockquote — отображает текст как цитату. По сравнению с тегом используется для длинных цитат, оформляется отступами
cite — выделяет цитату на материал из другого источника, обычно отображается курсивным шрифтом
Примеры: https://codepen.io/dmitryvalak/pen/yLarjoq
Списки
ul — маркированный список. Каждый элемент списка оборачивается тегами li
ol — нумерованный список. Каждый элемент списка оборачивается тегами li
dl — список терминов. Внутри используются теги: dt — название термина, dd — описание термина
Примеры: https://codepen.io/Yury_P/pen/mdrgZQb
Отображение кода
code — оборачивает программный код, обычно отображается моноширинным шрифтом, не учитывает переносы строк и дополнительные пробелы
var — оборачивает переменную из программного кода, обычно отображается моноширинным шрифтом
samp — оборачивает текст, которые является результатом вывода скрипта или программы, обычно отображается моноширинным шрифтом
Примеры: https://codepen.io/Yury_P/pen/yLaGxPB
Другие теги
span — строчный тег. Сам по себе не имеет никакого логического или визуального смысла. Часто используется внутри абзаца (
) для выделения части текста. Если часть текста нужно стилизовать по другому, ее можно обернуть в span, указать класс и в css добавить нужные стили
br — переносит текст на новую строку
wbr — указывает где можно сделать перенос слова
hr — вставляет горизонтальную полосу
bdo — задает направление текста, в атрибуте dir указывается направление: rtl — справа на лево, ltr — слева направо
bdi — запрещает изменение направления текста, по аналогии с bdo направление указывается в атрибуте dir, по умолчанию значение auto
Примеры: https://codepen.io/Yury_P/pen/rNMoZrL
HTML-тег
HTML-тег Тег используется для определения зачеркнутого текста.
Для зачеркивания вы также можете использовать CSS text-decoration: line-through; с тегом
CStechbook - это портал инженерии информатики для студентов.