Этот урок посвящен форматированию текста и вставке изображений в HTML-документ. Рассмотрим различные теги и атрибуты, позволяющие изменять внешний вид текста и добавлять изображения на веб-страницу.
Форматирование текста
Форматирование текста подразумевает изменение его внешнего вида: размера, стиля, выравнивания и т.д. В HTML для этого используются специальные теги.
Абзацы и перенос строки
Для разделения текста на смысловые части используется тег <p> (paragraph). Всё, что находится внутри тегов <p></p>, будет отображаться как отдельный абзац.
Тег <br> (break) создаёт перенос строки. Это одиночный тег, его не нужно закрывать.
Выравнивание текста
Атрибут align внутри тега <p> позволяет выравнивать текст:
- align="left" — выравнивание по левому краю
- align="right" — выравнивание по правому краю
- align="center" — выравнивание по центру
- align="justify" — выравнивание по ширине
Горизонтальная линия
Тег <hr> (horizontal rule) создаёт горизонтальную линию. Атрибут width позволяет задать ширину линии, а color — её цвет (например, color="blue" для синего цвета).
Изменение стиля текста
- Полужирное начертание: <strong> делает текст полужирным. <strong> несёт семантическую нагрузку, указывая на важность текста. <b> также делает текст полужирным, но не несёт семантической нагрузки.
- Курсив: <em> делает текст курсивным. <em> несёт семантическую нагрузку, обозначая акцент или выделение. <i> также делает текст курсивным, но не несёт семантической нагрузки.
- Подстрочный и надстрочный текст: <sub> и <sup> делают текст подстрочным и надстрочным соответственно.
- Выделение текста: <mark> выделяет текст, по умолчанию жёлтым цветом.
- Цитата: <blockquote> оформляет текст как цитату.
- Зачеркнутый текст: <strike> зачеркивает текст. В современных браузерах рекомендуется использовать <del>.
- Подчеркнутый текст: <u> подчеркивает текст. Использование <u> не рекомендуется, так как он может быть использован для обозначения гиперссылок.
Вставка изображений
Для вставки изображений используется тег <img>. Это одиночный тег.
Атрибут src
Атрибут src (source) указывает путь к изображению. Путь может быть абсолютным или относительным.
Атрибуты width и height
Атрибуты width и height задают ширину и высоту изображения в пикселях.
Атрибут alt
Атрибут alt (alternative text) содержит альтернативный текст, который отображается, если изображение не загружается. Он также важен для доступности веб-страницы.
Атрибуты vspace и hspace
Атрибуты vspace и hspace задают вертикальный и горизонтальный отступы от изображения до окружающего текста. Использование этих атрибутов не рекомендуется, лучше использовать CSS для стилизации.
Изменение стиля текста с помощью тега <font>
Тег <font> позволяет изменять цвет, размер и шрифт текста. Он устарел, но может использоваться для демонстрационных целей. Атрибуты:
- color — цвет текста (например, color="green").
- size — размер текста (от 1 до 7, или в пикселях).
- face — название шрифта.
В этом уроке мы рассмотрели основные теги и атрибуты HTML для форматирования текста и вставки изображений. Практикуйтесь, создавайте собственные HTML-документы, экспериментируйте с различными тегами и атрибутами, чтобы лучше понять их возможности.