HTML+CSS Работа с текстом

Уроки HTML+CSS: Работа с текстом в HTML

HTML- текст представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения.

Теги заголовков

Тег <h1>

Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег <h1> должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.

<h1>Заголовок 1 уровня</h1>

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

1.2. Тег <h2>

Им обозначаются подзаголовки тега <h1>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

<h2>Заголовок 2 уровня</h2>

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

1.3. Тег <h3>

Показывает подзаголовки тега <h2>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

<h3>Заголовок 3 уровня</h3>

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

1.4. Теги <h3>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em2.33em соответственно.

<h3>Заголовок 4 уровня</h3>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>

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

Заголовок 5 уровня
Заголовок 6 уровня

Для всех тегов доступны ‎глобальные атрибуты.

Теги для форматирования текста

Тег <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.

<b>Полужирный текст</b>
Полужирный текст

Тег <em>

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

<em>Пример текста</em>
Пример текста

Тег <i>

Отображает текст курсивом.

<i>Отображает текст курсивом</i>
Отображает текст курсивом

Тег <small>

Уменьшает размер шрифта на единицу по отношению к обычному тексту.

<small>Уменьшенный текст</small>
Уменьшенный текст

Тег <strong>

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

<strong>Полужирный текст</strong>
Полужирный текст

Тег <sub>

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

<sub>Нижний индекс</sub>
Нижний индекс

Тег <sup>

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

<sup>Степень</sup>
Степень

Тег <ins>

Выделяет текст в новой версии документа, подчёркивая его.
Для тега доступны следующие атрибуты: citedatetime.

<ins>Подчеркнутый текст</ins>
Подчеркнутый текст

Тег <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для тега доступны следующие атрибуты: citedatetime.

<del>Перечеркнутый текст</del>
Полужирный текст

Теги для ввода «компьютерного» текста

Тег <code>

Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.

<code>Программный код</code>
Программный код

Тег <kbd>

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

<kbd>Вводимый текст</kbd>
Вводимый текст

Тег <samp>

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

<samp>Пример текста</samp>
Пример текста

Тег <var>

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

<var>Пример текста</var>
Пример текста

Тег <pre>

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

<pre>Пример текста</pre>
Пример текста

Теги для оформления цитат и определений

Тег <abbr>

Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.

<abbr>Аббревиатура</abbr>
Аббревиатура

Тег <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для тега доступен атрибут cite.

<blockquote>Пример текста</blockquote>

Пример текста

Тег <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для тега доступен атрибут cite.

<q>Пример текста</q>
Пример текста

Тег <cite>

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

<city>Пример текста</city>
Пример текста

Тег <dfn>

Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
Для тега доступен атрибут title.

<dfn>Пример текста</dfn>
Пример текста

Абзацы, средства переноса текста

Тег <p>

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

<p>Пример текста</p>

Пример текста

Тег <br>

Переносит текст на следующую строку, создавая разрыв строки.

<p>Пример <br>текста</p>
Пример
текста

Тег <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.

<p>Пример текста</p>
<hr>
<p>Текст за чертой</p>
Пример текста
<hr/ style=”border:1px solid #000;”> Текст за чертой
После ознакомления, вам нужно закрепить полученную информацию. Для этого:
  1. Создайте новый документ. Назовите его index.html
  2. Во внутрь документа пропишите базовый шаблон HTML. Его вы можете найти в этой записи http://prog-time.ru/bazovyj-kod-html/
  3. Внутри тега body пропишите теги которые были показаны в данном уроке.
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

18
Оставить комментарий

avatar
17 Цепочка комментария
1 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
14 Авторы комментариев
vikaduribruguuhttps://z-game.xyzLines98treantinc Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
VLnalty
Гость

Предоставляем полный комплекс услуг по декларированию товаров поставляемых из Азии на территорию РФ через морские порты Владивостока и Восточного порта.


Kind regards,
Yulia | International freight forwarding and customs clearance
MAESTRO SHIPPING COMPANY | MSC
Russia, 692918, Primorsky Krai, Nakhodka, street. Michurina 11a, floor 3, office 36
p. 8 800 600-58-54 | m. +7 914 338-28-01 (viber, wechat, telegram, whatsapp)
e. mtmd2-nhk@msc.com.ru | w. [url=http://www.msc.com.ru]www.msc.com.ru[/url]

JanleF
Гость

Zithromax Syrup Dose [url=http://apcialisle.com/#]cialis without prescription[/url] Proscar Y Propecia Drug Buy Cialis Can You Buy Cialis Online

JanleF
Гость

Buy Cytotec [url=https://buyciallisonline.com/#]buy cialis online uk[/url] Il Viagra Scade Buy Cialis Compulsive Disorder Canada

546356
Гость

Предлагаем Вам несложную работу на дому.

Работа не требует начальных вложений.
Полностью легально и честно, напрямую с поставщиками многоразовых защитных масок.
Начальная настройка займет менее 2 часов.
Для работы нужен только ноутбук или компьютер с выходом в интернет.

Ознакомьтесь с условиями, а так же подробной информацией на нашем сайте: https://v.ht/zarabotok_mask

615838
Гость

Заработок на просмотре фильмов.

Бeз влoжeний!
Бeз свoeгo вебсайта!
Бeз тeхничeских знaний!
Бeз вoзрaстных oгрaничeний!
Рaбoтaя несколько часов в дeнь!

Более подробная информация на нашем сайте: http://v.ht/dengy_na_video

783571
Гость

Заработок за просмотры фильмов – без продаж и вложений.

Бeз влoжeний!
Бeз свoeгo вебсайта!
Бeз тeхничeских знaний!
Бeз вoзрaстных oгрaничeний!
Рaбoтaя несколько часов в дeнь!

Ознакомтесь с условиями у нас на сайте: http://v.ht/money_na_video

679626
Гость

Предлагаем Вам несложную работу в домашних условиях.

Работа не требует вложений.
Полностью легально и честно, напрямую с поставщиками многоразовых защитных масок.
Начальная настройка займет менее 2 часов.
Для работы необходим только ноутбук или компьютер с выходом в интернет.

Ознакомьтесь с условиями, а так же подробной информацией у нас на сайте: https://v.ht/zarabotok_mask

499691
Гость

Простая методика заработка для новичков. Даже во время кризиса и карантина.

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

Более подробная информация на нашем сайте. https://v.ht/money_portal

164828
Гость

БОГАТЫЙ КОПИПАСТЕР – Простейшая методика заработка от Ольги Арининой

Умеете копировать-вставлять текст, значит сможете зарабатывать от 1000 руб за 5 минут работы уже сегодня!

80% людей, которые хотят зарабатывать в Интернете, не умеют уверенно пользоваться компьютером! И только методика “Богатый копипастер” приносит им денежный результат!

Абсолютно без вложений денег
Без партнерок и рассылок
Не надо настраивать сайты и рекламу
Уже через час вы сможете получить свои первые деньги
Просто и быстро!

Более подробная информация у нас на сайте: https://v.ht/kopipaster_vip

547813
Гость

Умеете копировать текст? Сможете нажать на кнопку «загрузить» и «отправить»? Тогда у вас всё получится! Получится зарабатывать по системе «Родник После настройки система работает сама около месяца. Вы день тратите на настройку, а потом получаете доход весь месяц. Все материалы готовы и ждут вас. Вам нужно только скопировать их на сервис и запустить. Делать самому их уже не нужно! Я сделал специальный сервис,который поможет вам зарабатывать. Доступ к нему будет только у моих учеников. А ПОЛУЧИТЬСЯ ЛИ? ПОЛУЧИТСЯ! И ВОТ ПОЧЕМУ: 1. Созданная мною платформа ЛидоСфера существенно облегчает работу! 2. За вас все уже сделано. Всё готово и осталось только… Подробнее »

896158
Гость

КАК ВЫБРАТЬ ОНЛАЙН ШКОЛУ И ПРОФЕССИЮ ДЛЯ УДАЛЕННОЙ РАБОТЫ? Сейчас на рынке более 1000 предложений обучиться онлайн-профессиям! Но никто не говорит, как правильно ее выбрать, чтобы не потерять деньги и время на обучение, а также, чтобы работа приносила радость и удовольствие! Так узнайте как подобрать удалённую работу. Получаете доступ к личному кабинету и бонусы! – Список проверенных онлайн-школ, в которых дают качественные знания, применимые для зарабатывания денег. – Шаблоны, резюме и портфолио, которые сможете скорректировать для себя и отправить клиентам и работодателям. – Техники, как убрать страх, который может начать вас сдерживать во время того, как вы начнете искать работу… Подробнее »

482888
Гость

Пройдите 1 регистрацию, сделайте 2 действия
и получайте от 8950 рублей каждые сутки в автоматическом режиме.

Мы гарантируем:
– Первый заработок в течении 60 минут.
– Стабильный доход 24 часа в сутки.
– Поступление денег без задержек.
– Для России, стран СНГ и Европы.
– Без вложений и установки ПО.
– Специально для новичков и людей без опыта.

Ознакомтесь с условиями на нашем блоге: https://v.ht/prosto_money

Ваша активация:
Ваш ID: E78BNN5MN9

treantinc
Гость
treantinc

Propecia E Impotencia Efecto Secundario Fepuri [url=https://acialisd.com/#]Cialis[/url] poopapsima about levitra reviews soogma Cialis fenInverne is cialis stronger than viagra

Lines98
Гость
Lines98

Играю в логические игры онлайн на З-Гэйм, и човетую вам всем делать тоже самое. Вот лучший бесплатный маджонг – http://www.z-game.xyz/madzhong-igrat-onlajn-besplatno или лайнс 98 просто супер вариант. Доля моя улыбчивая Прошлое не принадлежит уже мне, Я понимаю: – это промежуточное состояние. Стираются из памяти знакомые лица, События утеряны, нечем гордиться. Мало помню от того, что много повидала, Меня доброта по частям собирала. Память, ослеплённая от любви, кусками выпадала, А улыбчивая доля зачем-то её поднимала. Не потому ли она искалечена, Что ни богом, ни чёртом она не замечена, Кем-то на алтарь незаметно заброшена, В пальтишке поношенном, и навеки подкошена. Ночью слезами она… Подробнее »

https://z-game.xyz
Гость

Абсолютно согласен с вами.

bruguu
Гость

Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b]Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
[url=http://seoprofisional.ru/]настройка контекстной рекламы[/url]

bruguu
Гость

Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b]Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
[url=http://seoprofisional.ru/bazy]база для хрумера скачать[/url]

vikaduri
Гость

Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин [b]pokras7777[/b]Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
[url=http://seoprofisional.ru/bazy/baza-profilej-dlya-hrumera]скачать базы для хрумера 2020[/url]