Как добавить текст в html

HTML: Поле для ввода текста

Основной элемент форм в HTML — поле для ввода. Оно реализуется с помощью тега и позволяет задать различные поля для ввода данных: текст, пароли, чекбоксы, радио кнопки, кнопки отправки, загрузка файла, ввод даты и так далее.

Начиная со стандарта HTML5 список полей пополнился множеством новых вариантов. Базовыми типами инпутов являются:

• Текст
• Пароли
• Чекбоксы
• Радио кнопки

Самый простой способ использования — создание текстового поля для ввода. Именно присутствует во всех полях поиска. Чтобы создать простое текстовое поле для ввода данных, необходимо внутрь формы добавить непарный тег и указать у него атрибут type со значением text :

Тег label

Поле создано, но совершенно непонятно что там вводить: имя? фамилию? код от сейфа? Чтобы указать назначение поля, используется тег . Это парный тег, который напоминает параграф, но относится именно к описанию поля формы.

 Введите имя 

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

Для связи label используется один из двух вариантов:

• Связь по атрибуту id . Для этого у тега указывается атрибут id с произвольным именем, а у добавляется атрибут for с таким же именем, как и значение id у элемента input

 
Введите имя
 

Атрибут placeholder

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

 Введите имя и фамилию 

Другие текстовые поля

Замечали, что при вводе паролей, браузер автоматически проставляет звёздочки вместо показа символов? Этого можно добиться указав значение password для атрибута type :

 Введите пинкод 

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

Их назначение в том, что значения автоматически проверяются браузером на корректность. Например, если ввести значение email , то браузер будет ожидать корректный шаблон для Email адреса. В противном случае он сам укажет, что значение неверное при попытке отправить форму.

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

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people . Внутри формы создайте 2 текстовых поля

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

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

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Как писать на HTML

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

В этом туториале вы поможете верстальщице Оле сделать страницу с результатами поиска в Яндексе. Получится не один в один, но довольно похоже:

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

1. Создайте HTML-документ

Для начала Оле понадобится заготовка, файл index.html . Создайте у себя файл с таким же содержимым:

html> head> title>Заголовок страницыtitle> head> body> body> html> 

Здесь 3 тега, которые обязаны быть в каждом html-файле:

• — здесь лежат все теги страницы, он “корневой”, главный;
• — в этом теге лежит всё, что не контент страницы: стили, заголовок страницы в теге , кодировка и так далее;
• — “тело” HTML -документа, здесь лежит всё, что вы увидите на страничке в браузере.

2. Добавьте текст

Вот что Оля должна вывести при поиске “Коала” в поисковике, для которого она верстает страницу с результатами поиска:

Коала — Википедия Коaла (лат. Phascolarctos cinereus) — вид сумчатых, обитающий в Австралии. Единственный современный представитель семейства коаловых . Читать ещё. 

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

Как получилось у Оли

Не долго думая, Оля добавила текст прямо внутрь и получила такой результат:

3. Добавьте ссылку

Без ссылок на результаты поиска работа Оли бесполезна. Люди пришли не просто почитать про коал: им нужны ссылки на сайты про коал.

Оля помнит наизусть несколько тегов: — для картинок, а

— для параграфа текста. Но как добавить ссылку? Какой у неё тег?

Оля загуглила, и получила этот ответ:

htmlbook.ru — крутой сайт, на котором хорошая документация по HTML и CSS, поэтому в первую очередь присматривайтесь к нему.

Как писать теги

У тегов бывают разные названия, но способов их написать всего два. Способ записи зависит от того парный он или одиночный.

Пример парного тега:

p>Покупайте наши веб-сайты!p> 

Так на страницу можно добавить параграф с текстом. Тег

обязательно “закрывать” — добавлять в конце ещё один, но с чёрточкой:

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

Пример одиночного тега:

img src="адрес_картинки"> 

Он сам по себе, его “закрывать” не нужно. Одиночных тегов очень мало, в основном, вам пригодится только — для картинок,
— перенос строки и

---

— горизонтальная линия.

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

img src="https://dvmn.org/filer/canonical/1594118255/683/"> h1> Зачем нужен h1 h1> p> В теге h1 пишут заголовки, как "Как писать теги" чуть выше. Это парный тег, у него есть начало и конец, как и у тега p. p> p> У тега img нет "начала" или "конца". Он значит только то, что нужно добавить картинку. Браузеру не нужно сообщать, когда она "закончится". p> 

Парные теги нужно закрывать

Допишите тег

a href="#">Читать ещёa> 

Оля не знала какую ссылку поставить для ссылки, ведь ссылки будут подставляться уже при шаблонизации, поэтому оставила “#” вместо ссылки. Это называется якорь, и это такой обычай среди верстальщиков: если не знаешь, какую ссылку поставить, ставь # .

Теперь на страничке Оли появилась ссылка. Попробуйте повторить результат Оли:

4. Выделите все “коала” на странице

Поисковик выделяет жирным шрифтом все слова, которые вы искали. Оля не знает, что это за тег, но по запросу html жирный шрифт в google.com Оля нашла ссылку на заветный htmlbook.ru.

Попробуйте, у вас получится, как у Оли? У неё получился такой текст:

5. Выделите заголовок

Сейчас текст у Оли весь одинакового размера. В нём Оля хочет выделить заголовок: Коала — Википедия крупно, а чуть ниже весь остальной текст, мельче. Оля загуглила html заголовок и сразу нашла подходящий тег: .

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

: пишут, что он нужен для текста. Но зачем? Чтобы разобраться в этом Оле пришлось узнать о строчных и блочных тегах.

О строчных и блочных тегах

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

Другой вид тегов — блочные. Это теги, которые объединяют другие теги внутри себя в группы, и наделяют их смыслом. Например, блочный тег содержит в себе заголовок страницы, а блочный тег

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

h1 style="color:red;">Статья о котикахh1> p style=". "> b>Котикиb> — замечательные животные. Я полюбил их, когда мне было 7 лет. Как сейчас помню, на мой i>день рожденияi> мне подарили замечательного кота. p> 

В этом примере заголовок статьи покрашен в красный цвет: color:red; . Текст же статьи при этом остался чёрным, покрасился только заголовок “Статья о котиках”. Для текста внутри тега

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

Внутри тега

есть несколько строчных тегов: и . Они прямо “срослись” с текстом, существуют прямо внутри него, в отличие от блочных, которые только обрамляют текст по краям.

Блочные теги незаменимы, когда хочется добавить тексту фон, рамку, отступы… Вот небольшой список из самых популярных блочных тегов:

Отдельно стоит выделить эти блочные теги:

• — параграф текста;
• , . — заголовок. Чем больше число — тем мельче заголовок;

Допишите код

Теперь, когда Оля разобралась с блочными/строчными тегами, она может наконец закончить незавершённую работу: добавить на страницу теги и

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

6. Сделайте заголовок ссылкой

Заголовок на то и нужен, чтобы на него хотелось кликнуть. А на ваш заголовок кликнуть нельзя. Что делать? Нужен тег для ссылок . Но как правильно: положить тег внутрь тега или наоборот.

О комбинации тегов

Нельзя располагать блочные теги внутри строчных.

Такой код существовать не должен:

a>h1>Заголовокh1>a> 

Тег — строчный, он существует внутри текста. Тег — блочный, он оборачивает собой текст и все строчные теги для этого текста. Вот как стоило поступить в этой ситуации:

h1>a>Заголовокa>h1> 

Оля прислушалась к этой рекоммендации и вот что у неё получилось:

h2> a href="#">b>Коалаb> — Википедияa> h2> 

Проверьте, у вас получилось сделать заголовок ссылкой?

7. Добавьте подпись под заголовком

Теперь Оля хочет подпись под заголовком ссылки, как вот тут:

Оля загуглила html мелкий текст и нашла тег, который поможет сделать текст меньше. Подпись под заголовком Оля решила делать прямо внутри тега , чтобы она была “едина” с заголовком , никуда не уехала и так далее:

h2> a href="#">b>Коалаb> — Википедияa> small>ru.wikipedia.org›Коалаsmall> h2> 

Получилось не то, что хотела Оля… Во-первых, текст не сильно-то и уменьшился. Во-вторых, не хватает переноса.

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

h2> a href="#">b>Коалаb> — Википедияa> br> small>ru.wikipedia.org›Коалаsmall> h2> 

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

small> small> ru.wikipedia.org›Коала small> small> 

Тег как бы “накапливает” эффект мелкого текста и делает его ещё мельче. Проверьте, у вас тоже так получится?

Что делать, если подходящий тег не нашёлся

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

Если же и гугл не помогает — придётся подумать, как составить то, что вы хотите из того, что есть. Самый простой пример — вы хотите сделать кнопку с картинкой. Такого тега нет, зато есть кнопка и есть картинка:

button> img src="#" > button> 

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

a>b>Жирная ссылкаb>a> b>a>Жирная ссылкаa>b> 

Что ещё почитать по теме

• Статья Строчные элементы от htmlbook.ru
• Слайды типичные ситуации в вёрстке

Попробуйте бесплатные уроки по Python

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

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

Основы редактирования текста в HTML

Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать HTML, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.

Предварительные требования:	Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача:	Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..

Основы: Заголовки и абзацы / параграфы

Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, или газету, или учебник, журнал и т.д.

Упорядоченный контент делает чтение более лёгким и приятным.

В HTML каждый абзац заключён в элемент , подобно:

p>Я параграф, да, это я.p> 

Каждый заголовок заключён в элемент заголовка (en-US):

h1>Я заголовок истории.h1> 

Имеется шесть элементов заголовка: (en-US), (en-US), (en-US), (en-US), (en-US) и (en-US). Каждый элемент представляет разный уровень контента в документе; представляет главный заголовок, представляет подзаголовки, представляет под-подзаголовки и так далее.

Создание иерархической структуры

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

h1>Сокрушительная скукаh1> p>Крис Миллсp> h2>Глава 1: Тёмная ночьh2> p>Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на . p> h2>Глава 2: Вечное молчаниеh2> p>Наш главный герой ничего не мог, когда шёпот из тёмной фигуры . p> h3>Призрак говоритh3> p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» p> 

Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.

• Предпочтительнее использовать только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
• Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте для создания подзаголовков при одновременном использовании для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.
• Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.

Зачем нам необходима структура?

Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).

Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!

Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац. Более того:

• Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
• Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (Search Engine Optimization — поисковая оптимизация).
• Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
• Чтобы стилизовать контент с помощью CSS или сделать его интересным с помощью JavaScript, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.

Поэтому нужно дать структурную разметку нашему контенту.

Активное изучение: создание структуры для нашего контента

Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».

Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки Сбросить. Если вы застряли, нажмите кнопку Показать решение, чтобы увидеть ответ.

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px; width: 95%"> Моя мини-история Я полицейский, и моё имя Триш. Мои ноги сделаны из картона, и мой муж — рыба.textarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = "
Моя мини-история
\n
Я полицейский, и моё имя Триш.
\n
Мои ноги сделаны из картона, и мой муж — рыба.
"; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > textarea.onkeyup = function ()  if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Почему мы нуждаемся в семантике?

Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент (en-US) также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».

h1>Это заголовок верхнего уровняh1> 

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

С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня. Рассмотрим следующее:

span style="font-size: 32px; margin: 21px 0;" >Это заголовок верхнего уровня?span > 

Списки

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

Неупорядоченные

Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:

молоко яйца хлеб хумус

Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент (элемент списка):

ul> li>молокоli> li>яйцаli> li>хлебli> li>хумусli> ul> 

Активное изучение: разметка неупорядоченного списка

Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px; width: 95%"> молоко яйца хлеб хумусtextarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

Упорядоченные

Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:

Двигайтесь до конца дороги Поверните направо Езжайте прямо через первые два перекрёстка с круговым движением Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дороге

ol> li>Двигайтесь до конца дорогиli> li>Поверните направоli> li>Езжайте прямо через первые два перекрёстка с круговым движениемli> li>Поверните налево на третьем перекрёсткеli> li>Школа справа от вас, в 300 метрах вверх по дорогеli> ol> 

Активное изучение: разметка упорядоченного списка

Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 200px; width: 95%"> Двигайтесь до конца дороги Поверните направо Езжайте прямо через первые два перекрёстка с круговым движением Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дорогеtextarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

Активное изучение: разметка собственной страницы рецептов

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 200px; width: 95%"> Рецепт быстрого приготовления хумуса. Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет. Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой. Ингредиенты 1 банка (400г) турецкого гороха (или бараньего гороха) 175г тахини 6 вяленых томатов Половинка красного перца Щепотка кайенского перца 1 зубчик чеснока Чуть-чуть оливкового масла Рецепт Очистите чеснок от кожуры и крупно нарежьте. Удалите стебель и семена у перца; крупно нарежьте перец. Добавьте все ингредиенты в пищевой комбайн. Измельчите все ингредиенты до состояния пасты. Если вы хотите "грубый" хумус, измельчайте пару минут. Если вам нужен гладкий хумус, измельчайте дольше. По вкусу вы также можете добавить в небольших количествах лимон с кориандром, перец чили, лайм с чипотле, хариссу с мятой или же шпинат с брынзой. Попробуйте и решите, что подойдёт вам. Хранение Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его. Хумус можно хранить в морозильном отделении 2–3 месяца.textarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.

Вложенные списки

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

ol> li>Очистите чеснок от кожуры и крупно нарежьте.li> li>Удалите стебель и семена у перца; крупно нарежьте перец.li> li>Добавьте все ингредиенты в пищевой комбайн.li> li>Измельчите все ингредиенты до состояния пасты.li> li>Если вы хотите "грубый" хумус, измельчайте пару минут.li> li>Если вам нужен гладкий хумус, измельчайте дольше.li> ol> 

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

ol> li>Очистите чеснок от кожуры и крупно нарежьте.li> li>Удалите стебель и семена у перца; крупно нарежьте перец.li> li>Добавьте все ингредиенты в пищевой комбайн.li> li> Измельчите все ингредиенты до состояния пасты. ul> li>Если вы хотите "грубый" хумус, измельчайте пару минут.li> li>Если вам нужен гладкий хумус, измельчайте дольше.li> ul> li> ol> 

Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.

Акцент и важность

В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространённых.

Акцент

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

Я рад, что ты не опоздал.

Я рад, что ты не опоздал.

В первом предложении звучит искреннее облегчение, что человек не опоздал. Во втором, напротив, звучит сарказм или пассивная агрессия: так выражена досада от того, что человек немного опоздал.

p>Я em>радem>, что ты не em>опоздалem>.p> 

Важное значение

Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и выделять жирным на письменном языке. Например:

Эта жидкость очень токсична.

Я рассчитываю на вас. Не опаздывай!

p>Эта жидкость strong>очень токсичнаstrong>.p> p>Я рассчитываю на тебя. strong>Не strong>опаздывай!p> 

При желании вы можете вложить важные и акцентированные слова друг в друга:

p> Эта жидкость strong>очень токсичнаstrong> — если ты выпьешь её, strong>то можешь em>умеретьem>strong >. p> 

Активное изучение: Давайте будем важны!

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 200px; width: 95%"> h1>Важное объявлениеh1> p>9 января 2010 года, в воскресенье, банда вандалов была обнаружена за кражей нескольких садовых гномов из торгового центра в центре Милуоки. На них были надеты зелёные спортивные костюмы и глупые шляпы, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть какая-либо информация об этом инциденте, пожалуйста, позвоните в полицию немедленно.p>textarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Show solution"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = "
Важное объявление
\n
9 января 2010 года, в воскресенье, банда вандалов была обнаружена за кражей нескольких садовых гномов торговом центре в центре Милуоки. На них были надеты зелёные спортивные костюмы и глупые шляпы, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть какая-либо информация об этом инциденте, пожалуйста, позвоните в полицию немедленно.
"; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Курсив, жирный шрифт, подчеркивание

Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике. Ситуация с , (en-US) и (en-US) несколько сложнее. Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчёркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.

HTML5 переопределил , и с новыми, несколько запутанными, семантическими ролями.

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

• (en-US) используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли .
• используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения .
• (en-US) используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка .

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

p> Колибри обыкновенный (i>архилоус обыкновенныйi>) — наиболее часто встречающийся вид колибри в северо-восточной Америке. p> p> Случился прилив иностранных слов, таких как i lang="uk-latn">vatrushkai>, i lang="id">nasi gorengi> и i lang="fr">soupe à l'oignoni>. p> p>Когда-нибудь я узнаю, как u>гаваритьu> без ошибок.p> ol> li>b>Отрежьтеb> два ломтика хлеба.li> li>b>Добавьтеb> кусочек помидора и лист латука между ломтями хлеба.li> ol> 

Заключение

Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете.

В этом модуле

• Начало работы с HTML
• Что такое заголовок? Метаданные в HTML
• Основы редактирования текста в HTML
• Создание гиперссылок
• Углублённое форматирование текста
• Структура документа и веб-сайта
• Отладка HTML
• Разметка письма
• Структурируем страницу

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как поместить текст в блок в html

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

Исходный HTML документ:

 class="textbox"> Пример текста в блочном элементе. 

.textbox  /* Добавим отступы от текста до краев блока */ padding: 20px; /* Изменим цвет фона */ background: cornsilk; /* Отобразим рамку блока */ border: 2px solid indigo ; > 

Результат: