Как вставить текст в HTML страницу? Для этого существуют специальные HTML теги для текста.

В HTML существует шесть уровней заголовков. Они добавляются с помощью тэгов

-

. При этом

это заголовок первого уровня, он самый большой.

Пример создания заголовков:

Заголовки никак не зависят друг от друга. Вы можете добавить заголовок любого уровня везде, где это нужно.

Новички иногда не могут разобраться с вопросом - сколько заголовков первого уровня может быть на странице. В интернете я не раз встречал на эту тему неполную и недостоверную информацию. Поэтому я решил подробно рассмотреть этот вопрос.

На работу страницы количество тэгов

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

на страницу. Ведь в HTML есть целых шетсь уровней заголовков. При любой вёрстке страницы этого вполне достаточно, чтобы выделить тэг

только для одного заголовка.

Абзац

Тэг

Создаёт абзац текста. У него есть отступы сверху и снизу для отделения одного абзаца от другого. Кроме того, есть возможность установить отступ первой строки. Всё это регулируется с помощью CSS.

Тэг

Тэг это строчный тэг для вставки текста. Обычно он используется тогда, когда нужно выделить часть текста определённым образом.

Для примера выделим часть текста красным цветом.

Нужная часть текста находится внутри тэга . Чтобы она была красной, тэгу установлен атрибут style, который задаёт стили. Так как работа со стилями описывается в учебнике CSS, здесь я не буду объяснять, как работает этот атрибут. Просто добавьте его в тэг, как написано в примере.

Тэг

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

Выделение текста

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

Пример выделения текста:

21
22
23
24
Жирный шрифт Жирный шрифт Курсивный шрифт Курсивный шрифт
Текст можно выделять с помощью стилей. Каждый сам решает, как выделять текст, с помощью тэгов или стилей.

Другие тэги

Мы рассмотрели специальные HTML теги для текста. Но текст могут содержать и многие другие тэги, которые добавляют контент на страницу. Можно даже вставить текст вне каких-либо тэгов, он всё равно отобразится на экране. Но на практике так никто не делает, потому что вне тэгов текстом нельзя управлять. Поэтому весь текст конечно должен находиться внутри тэгов. А когда Вы изучите CSS, Вы сможете определять внешний вид текста.

Бывает так, что нужно вывести картинку и приписать название (короткую фразу). Для этого есть такие параметры:
Align="top" – выравнивает текст по верху изображения.
align="bottom" – выравнивает текст по низу.
align="middle" – выравнивает текст по центру.
Ниже приведён код, в котором демонстрируется работа выше описанных параметров.
<html > <head > <title > Изображение и текстtitle > head > <body > <img src="images/htmlbeer0.jpg" width="100" height="180" align="top" /> Красивая пчёлкаp > <img src="images/htmlbeer1.jpg" width="120" height="180" align="middle" /> Очень симпатичная пчёлкаp > <img src="images/htmlbeer2.jpg" width="160" height="180" align="bottom" /> Тоже ничего.p > body > html >
Красивая пчёлка

Очень симпатичная пчёлка

Тоже ничего.

Теперь посмотрим, как нужно выводить картинку при большом количестве текста.
Есть два параметра:
Align="left" – изображение "обтекает текст" слева.
align="right" – изображение "обтекает текст" справа.
Для наглядности напишите такой код:
<html > <head > <title > HTML изображение слева – текст справаtitle > head > <body > <img src="images/htmlsun.jpg" align="left" width="140" height="124" /> <big > Солнцеbig > > Здесь может быть текст содержащий информацию о Солнце.p > <img src="images/htmlmoon.jpg" align="right" width="140" height="124" /> <big > Лунаbig > Здесь вы можете вставить научную статью о Луне.p > body > html > Солнце
По форме Солнце близко к идеальной сфере с диаметром 1392000 км. Оно вмещает в себя орбиту Луны, и еще остается много места. Фактически более миллиона таких планет как Земля свободно поместились бы внутри Солнца. Кроме того, если бы вы смогли вести машину по его поверхности со скоростью 88 км/ч, у вас бы ушло 5 с половиной лет, чтобы объехать Солнце один раз (притом не останавливаясь). Но размер Солнца не постоянен. Современные исследования показывают, что диаметр Солнца уменьшается приблизительно на 1 метр в час. Если этот феномен проходил и в прошлом столетии, тогда Солнце, которое мы видим сейчас на 800 км меньше, чем то, которое видели наши предки. Возможно, это солнечное сжатие является частью долговременного колебания, которое помогает стабилизировать громадный выброс энергии.

Луна
Это единственный естественный спутник Земли. Масса Луны составляет 0,0123 массы Земли (приблизительно 1/81) или 7,6.1022 кг. Диаметр Луны чуть больше четверти земного (0,273) или 3 476 км. Луна освещает Землю в 500 000 раз слабее Солнца). На Луне нет привычной для нас атмосферы, нет рек и озёр, растительности и живых организмов. Сила тяжести на Луне в шесть раз меньше, чем на Земле. День и ночь с перепадами температур до 300 градусов длятся по две недели.

Но как вы видите может быть так, что текст и картинка слишком близко находятся друг к другу. Что бы исправить это, нужно просто задать некоторую нужную величину толщины рамки и цвет, как у заднего фона.
<html > <head > <title > Вывод изображения на HTML страницу title > head > <body > <img src=" images//htmleclipse.jpg" alt= align="left" width="160" height="130" style=" border: 8px solid #ffffff;" /> <big > big > Статья о Солнечном затмении. p > body > html >
Астрономическое явление, которое заключается в том, что Луна закрывает (затмевает) полностью или частично Солнце от наблюдателя на Земле. Солнечное затмение возможно только в новолуние, когда сторона Луны, обращенная к Земле, не освещена, и сама Луна не видна. Затмения возможны только если новолуние происходит вблизи одного из двух лунных узлов (точки пересечения видимых орбит Луны и Солнца), не далее чем примерно в 12 градусах от одного из них.

Как легко добавить описание к картинке

Итак, суть способа заключается в том, чтобы нужное нам изображение заключить в парный тег
. Этот элемент появился в HTML5 и позволяет группировать нужные вам элементы и подписывать их. Для выведения заголовка используется тег figcaption , который нужно записать после вставки изображения. Код выглядит так:

Космос

Чтобы выровнять нашу надпись по центру, а также немного оформить все, добавим еще такие стили:

Figure{
max-width: 250px;
}
figcaption{
text-align: center;
color: grey;
}
figure img{
border-radius: 30%
}

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

Я незнаю, что тут еще сказать. Все остальные способы вывести текст под картинкой (если они существуют) явно не такие удобные и простые в реализации, а здесь мы связываем изображение и подпись.

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

Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.

Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.

Строчные элементы обрамляются тегами ... .

Для обрамления элементов блочного типа используется пара
...
.

Браузеры обрамляют div-блоки разрывами строки.

Блок
не может располагаться внутри блока .

Пример
Блоки
Первый блок текста

Второй блок текста.

Основные теги форматирования текста

Пример
Заголовки и абзацы
Заголовок
первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня

Заголовок шестого уровня

Тест абзаца

Создайте текстовый файл, как в примере. Сохраните его с расширением html .

Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.

Выделение в тексте

Пример
Текст может быть полужирным. Текст может быть курсивом.
Текст можно подчеркнуть. ~~Текст можно зачеркнуть.~~
Текст может быть ^{надстрочным}. Текст может быть _{подстрочным}.
Цитаты, переменные, адреса

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

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