Теги форматирования текста в HTML: как создать текст красиво и понятно. Форматирование текста в HTML

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Html-теги для текста – это теги, которые меняют оформление заключенного в них контента.

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

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

Теги и элементы

Каждый тег имеет вид:

<Название тега>

Элемент – это совокупность тега и его содержимого. Многие из них требуют закрывающего тега:

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

Header
Блок
курсив

Некоторые элементы не требуют закрытия

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

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

Парадигма оформления современных сайтов

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

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

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

Валидация страницы

При продвижении сайта важную роль играет его валидность: «правильность» кода и соответствие его стандартам. Так как в настоящее время распространены два стандарта HTML – 4 и 5, то используются различные виды объявления типа документа:

Strict. Не включает теги font, и пр. Это «строгий» набор правил для верстки на HTML 4.
Transitional. Используется для сайтов, которые были написаны до появления новых стандартов. Разрешены устаревшие теги.
HTML. Поддержка последнего стандарта.

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

Проверить валидность сайта можно на официальном сайте W3C – организации, где создаются стандарты.

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

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

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

- Жирное выделение.

- Установка цвета и шрифта по умолчанию для страницы. Не рекомендуется к использованию.

- Увеличивает размер шрифта на одну условную единицу. Всего их семь. Стандартный не оформленный символ имеет размер 3. Вложение тегов будет увеличить на дополнительную единицу на каждом уровне. В CSS аналогом является свойство font-size.

- Логическая метка текста как цитаты или сноски. Символы оформляются курсивом, но это можно изменить в таблице стилей.

- Вывод символов, которые помечаются как программный код. Оформляется моноширинным текстом уменьшенного размера (все символы имеют одинаковую ширину).
- Необходимо заключать в этот тег первое упоминание термина в статье. Отображается курсивом во всех браузерах. - Используется для привлечения внимания к фрагменту контента. Выделяется курсивом. Аналог CSS font-style. - Самый запрещенный тег для текста в современной разметке. Браузеры его еще поддерживают, так как многие встроенные редакторы используют его для указания размера и шрифта. Но при ручной верстке не рекомендуем применять такой способ форматирования. Лучше пользоваться свойствами CSS font-size и color – аналоги написания. - - Логическое выделение структуры заголовков контента. Текст между открывающим и закрывающим тегами помечается жирным и имеет нестандартный размер. Главный заголовок H1 имеет самый большой шрифт, h6 - самый маленький. - Курсив. Не осуждается последним стандартом, но рекомендуется использовать font-style. - Обозначает моноширинным шрифтом имитацию напечатанного на клавиатуре текста. - Логическое выделение контента. Дополнительно Chrome и FireFox подсвечивают его желтым фоном. Абзац. Контент, помеченный этим тегом начинается с новой строки. Между ними ставится отступ. Не требует закрывающего тега, новый абзац начинается при появлении любого блочного элемента. Используется для оформления текста так, как он был указан при верстке. По умолчанию в HTML любое количество подряд идущих пробелов трансформируются в один, а обычные переносы не учитываются. Элемент pre учитывает положение символов.> - Выделение цитат, текст отображается в кавычках. - Отображает символы как на результат выполнения программы на экран. Используется моноширинный шрифт. - Выполняет действия, обратные элементу big, уменьшая размер символов на условную единицу. - Зачеркивает текст. Аналог сокращенного элемента. Не рекомендуется использовать. Аналог CSS text-decoration со значением line-through. - Жирное начертание. Логически акцентирует текст. _{- Показывает символ в нижнем индексе. Размещается ниже стандартной базовой линии, на которой располагаются символы, и имеет уменьшенный размер. В CSS используется vertical-align.} - При выводе кода компьютерной программы все переменные заключаются в этот тег. Выделяет их курсивом. - Показывает текст так, как он записан в коде страницы. Аналогично pre.</li> </ul><h2>Специальные символы</h2> Помимо текста и медиа-контента, на страницу можно выводить небольшие изображения. Они выглядят как иконки, но вставляются в текст не картинками, а спецсимволами. Некоторые примеры приведены в таблице. Также в HTML 5 появились деньги, карточные масти и знаки гороскопа. Используйте в разметке Html текстовые теги, которые подчеркивают логическое значения текста. Не стоит оформлять каждый фрагмент контента отдельно. Это допустимо только в случае, если вы точно знаете, что такое форматирование больше нигде не повторяется. Для одинаковых стилей используйте классы CSS. В дальнейшем такой подход поможет сэкономить время на изменении дизайна, а также повысить шансы на попадание в ТОП поисковых систем. Указую господам сенаторам, чтобы речь держать не по-писаному, а своими словами, дабы дурь была видна каждого! Пётр Первый. В настоящее время, текст в HTML является основным способом подачи информации. Подавляющее большинство сайтов в Интернете состоят именно из текстового контента. Это означает, что можно при умении, как минимум, читать, а как максимум - писать (в каждой шутке есть доля правды). Д опустим, ты набрал текст в редакторе, произвел его форматирование (выделил какие-то слова жирным или курсивом ), либо сделал с ним что-то ещё. Затем скопировал и вставил текст в свой html-код. Открываешь html-страницу в , а всё твоё форматирование куда-то исчезло. Происходит это потому, что текстовый редактор для форматирования текста применяет свои спецсимволы (по сути те же теги, только используются в текстовых редакторах), которые ты по умолчанию не видишь. В окне редактора ты видишь только текст. А на самом деле там есть ещё управляющие спецсимволы, с помощью которых редактор «понимает», как ему отображать тот или иной кусок текста. Т. е., повторюсь, это то же самое, что и , только «заточенные» под использование в текстовых редакторах. Н о, не смотря на это, существует способ перенести текст из редактора и вставить его в html-код в исходном виде. И раз уж об этом зашла речь, то форматирование текста и начнем изучать с этого тега. Итак, приступим. <h2>§ 2. Сами теги для форматирования</h2> П редварительно отформатированный текст можно вставить в html-страницу с помощью тегов и . Браузер покажет текст, заключенный между этими тегами в том виде, в каком он был в текстовом редакторе. Я, если честно, ни разу не использовал этот тег на практике, поэтому что-то ещё про него сказать не могу. С амыми популярными тегами для форматирования текста являются: <ul><li> - используется для выделения текста полужирным .</li> <li> - используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег .</li> <li> - позволит подчеркнуть текст. Тут главное, чтобы пользователь не перепутал подчёркнутый текст с ссылкой.</li> <li> - делает текст перечёркнутым.</li> <li> - предназначен для выделения подстрочного текста (нижний индекс). Этот тег может быть полезен, например, для записи химических формул. Вот этот код H2 O Даст нам вот такую формулу </li> <li> - нужен для выделения надстрочного текста (верхнего индекса). Например, для записи возведения в степень: пишем (a+b)2 ,Получаем (a+b) 2 .</li> </ul>В се эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий html-код: H2O - это формула воды. при просмотре H 2 O - это формула воды. <h2>§ 3. Абзацы</h2> В HTML абзацы создаются с помощью тега . Использование этого тега приводит к вставке одной пустой строки и размещению находящегося за ним видимого элемента html-страницы в следующей строке. Например, если мы напишем: Т о выглядеть это будет так: И спользовать закрывающий тег не обязательно, т. к. браузер считает, что начало следующего абзаца означает конец предыдущего, но для избежания путаницы желательно. <h2>§ 4. Выравнивание текста</h2> Д ля того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify . Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код: align="center">Текст по центру выровняет текст по центру: Текст по центру А этот код: right"> выровняет текст по правому краю Выравнивание текста по правому краю Е сли атрибут align не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Пример, код: выровнит текст по левому краю По умолчанию текст выравнивается по левому краю <h2>§ 5. Перенос строки и горизонтальная черта</h2> Е сли нужно обеспечить переход на новую строку без вставки пустой строки (это происходит, когда ты в текстовом редакторе нажимаешь Enter), то используется тег . Например, html-код 1. Первая строка. 2. Вторая строка. в браузере будет выглядеть так: 1. Первая строка. 2. Вторая строка. У нет закрывающего тега. Ты уже наверное догадался, что для вставки нескольких пустых строк, нужно записать тег несколько раз подряд. В изуально разделить части текста можно ещё при помощи тега . Этот тег создает на странице разделительную полосу (например, как зелёная в начале этой статьи). Тег имеет следующие атрибуты: <ul><li>size - толщина полосы;</li> <li>width - ширина полосы;</li> <li>align - выравнивание;</li> <li>color - цвет полосы;</li> <li>noshade - атрибут, не имеющий значений. Если указан, то создается сплошная чёрная полоса без тени.</li> </ul>Н апример, html-код: align="center" size="5" width="50%" color="#3399ff"> в браузере примет вид Ш ирину и толщину можно указывать как в пикселах (тогда величина будет постоянной), так и в процентах (тогда величина будет меняться в зависимости от разрешения экрана). <h2>§ 6. Заголовки</h2> Д ля задания названий разделов и подразделов в HTML используются теги заголовков . Существуют шесть уровней заголовков и обозначаются они так: <ul><li> - заголовок первого уровня</li> <li> - заголовок второго уровня</li> <li> - заголовок третьего уровня</li> <li> - заголовок четвёртого уровня</li> <li> - заголовок пятого уровня</li> <li> - заголовок шестого уровня</li> </ul>З аголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок (им выделено название этого урока), а самый маленький . Теги заголовков имеют атрибуты: <ul><li>align - выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);</li> <li>title - всплывающая подсказка, которая появляется при наведении мыши на заголовок.</li> </ul>Н апример, код HTML: align="center" title="Всплывающая подсказка. Чтобы увидеть, наведи мышь на заголовок.">Заголовок 4 уровня в браузере будет выглядеть так: <h4>Заголовок 4 уровня</h4> <h2>§ 7. Работа со шрифтами</h2> Д ля форматирования непосредственно шрифтов, в HTML есть тег . У этого тега существуют следующие атрибуты: <ul><li>color - цвет текста шрифта;</li> <li>face - гарнитура шрифта;</li> <li>size - размер текста шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По-умолчанию, размер текста 3. Если указать size="+1" </li> </ul>>, то текст, размещённый между тегами и , будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1.<h2>§ 8. Создание списков в HTML</h2> В HTML списки создаются с помощью тегов и . В первом случае создается упорядоченный (нумерованный), во втором неупорядоченный (маркированный) списки. Каждый элемент списка выделяется тегом . Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type . В нумерованном списке маркеры (значения атрибута type) такие: <ul><li>1 - нумерация арабскими цифрами (по умолчанию);</li> <li>A - большими латинскими буквами по алфавиту;</li> <li>a - маленькими латинскими буквами;</li> <li>I - большими римскими цифрами;</li> <li>i - маленькими римскими цифрами.</li> </ul>Н апример, HTML-код Первый элемент. Второй элемент. Третий элемент. браузер покажет так. В этом разделе рассмотрим теги форматирования текста в HTML . Начнем освоение с методов создания заголовков и списков, а затем перейдем к приемам связывания текста ссылками. Вся эта информация позволит тебе создать приятный для чтения текст, имеющий правильный внешний вид. Ведь без правильно отформатированного текста и осмысленных связей любая попытка создать качественный сайт будет крайне сложной. Немного истории. Изначально Интернет состоял только из текста и ссылок, и когда он стал живой, красочной, визуальной средой (таким, каким является сейчас) , то для большинства его тогдашних пользователей это стало трагедией. Изобретение Тима Бернерса-Ли предназначалось для обмена информацией между его коллегами – учеными и не имело графического интерфейса. Но, несмотря на появление Интернета, насыщенного визуальным содержимым и современными средствами интерактивного общения, текст и ссылки остаются самой важной составляющей любого качественного сайта. Поэтому, при создании сайта, следует отнестись с особым вниманием к осмысленному использованию текста и ссылок. <h3>Заголовки</h3> Ну что, приступим? Заголовок – я думаю, нет необходимости объяснять, что это такое к тому же название говорит само за себя. В HTML заголовки обозначаются тегами . . . . . , всего их шесть. Посмотрим на примере – прописываем код. Самый крупный заголовок Заголовок среднего размера Самый маленький заголовок 27.11.14 88.7K В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство. <h2>Теги и атрибуты при роботе со шрифтами html</h2> Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html . Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами. Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта: <ul><li>color – устанавливает цвет текста;</li> <li>size – размер шрифта в условных единицах.</li> </ul>Поддерживается положительное значение атрибута от 1 до 7. <ul><li>face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.</li> </ul> Форматируется только тот текст, который расположен между частями парного тега font. Остальной текст отображается стандартным шрифтом, установленным по умолчанию. <img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201411/podderzhivaetsja-srazu-ne-271143.gif' height="556" width="500" loading=lazy> Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся: <ul><li> — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;</li> <li><big> — размер больше установленного по умолчанию;</li> <li> — меньший размер шрифта;</li> <li> — наклонный текст (курсив ). Аналогичный ему тег ;</li> <li><ins> — текст с подчеркиванием;</li> <li><del> — зачеркнутый;</li> <li> — отображение текста только в нижнем регистре;</li> <li> — в верхнем регистре.</li> </ul>Обычный текст Жирный текст Жирный текст <big>Больше обычного</big> Меньше обычного Курсив Курсив <ins>С подчеркиванием</ins> <del>Зачеркнутый</del> <img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201411/sushestvuet-rjad-parnih-t-271143.gif' width="100%" loading=lazy> <h3>Возможности атрибута style</h3> Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов: 1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений. Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя . Синтаксис написания: font-family: имя шрифта [, имя шрифта[, ...]] 2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт. Синтаксис написания: font-size: абсолютный размер | относительный размер | значение | проценты | inherit Размер шрифта можно также задать: <ul><li>В пикселях;</li> <li>В абсолютном значении (xx-small, x-small, small, medium, large );</li> <li>В процентах;</li> <li>В пунктах (pt ).</li> </ul>Font-size:7 Font-size:24px Font-size: x-large Font-size: 200% Font-size:24pt <img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201411/vozmozhnosti-atributa-sty-271144.gif' height="520" width="500" loading=lazy> 3) font-style – устанавливает стиль написания шрифта. Синтаксис: font-style: normal | italic | oblique | inherit Значения: <ul><li>normal –нормальное написание;</li> <li>italic – курсив;</li> <li>oblique – шрифт с наклоном вправо;</li> <li>inherit – наследует написание родительского элемента.</li> </ul>Пример того, как поменять шрифт в html с помощью этого свойства: font-style:inherit font-style:italic font-style:normal font-style:oblique <img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201411/primer-togo-kak-pomenjat-271144.gif' height="585" width="492" loading=lazy> 4) font-variant – переводит все прописные буквы в заглавные. Синтаксис: font-variant: normal | small-caps | inherit Пример того, как изменить шрифт в html этим свойством: font-variant:inherit font-variant:normal font-variant:small-caps <img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201411/primer-togo-kak-izmenit-271144.gif' width="100%" loading=lazy> 5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис: font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900 Значения: <ul><li>bold – устанавливает полужирный шрифт html;</li> <li>bolder – жирнее относительно normal;</li> <li>lighter –менее насыщенное относительно normal;</li> <li>normal – нормальное написание;</li> <li>100-900 – задается толщина шрифта в числовом эквиваленте.</li> </ul>font-weight:bold font-weight:bolder font-weight:lighter font-weight:normal font-weight:900 font-weight:100 <img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201411/pozvoljaet-ustanovit-tols-271145.gif' height="587" width="500" loading=lazy> <h3>Свойство font и цвет шрифта html</h3> Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font : font: font-size font-family | inherit Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления: <ul><li>caption – для кнопок;</li> <li>icon – для иконок;</li> <li>menu – меню;</li> <li>message-box –для диалоговых окон;</li> <li>small-caption – для небольших элементов управления;</li> <li>status-bar – шрифт строки состояния.</li> </ul>font:icon font:caption font:menu font:message-box small-caption font:status-bar font:italic 50px bold "Times New Roman", Times, serif Доброго времени суток, уважаемые подписчики. Этот урок мы посветим форматированию текста в html . Рассмотрим, какие теги для этого применяются. Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно "обойти", используя каскадные таблицы стилей (css). Поэтому заострять внимание на них мы не будем. Просто посмотрим их работу, чтобы Вы знали, что такие возможности в языке HTML присутствуют. Итак, начнем. Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: Возьмем из высланного Вам архива файл "Лис и лошадь.doc" и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм. Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока. Верю, что да. Теперь вернемся в word, скопируем весь наш текст из файла "сказка.doc" и вставим его между тегами <body> </body> нашей заготовки. Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera). Мы видим, что текст идет без заголовков, без абзацев, без отступов. Вот теперь и займемся непосредственным форматированием текста в языке HTML. Для выделения заголовков используются теги <H1> текст</H1> , <H2> текст</H2> и т.д. до <H6> текcт</H6> . Цифры после буквы H в теге применяются от 1 до 6. 1 – самый крупный заголовок, 6 – самый маленький заголовок. Давайте теперь найдем в нашем файле названия сказок и заключим их в теги <H1> …<H1> . XHTML <H1>Лис и лошадь</H1> <H1>Лис и кошка</H1> У тега <H1> есть параметр align со значением Left — по левому краю, right — по правому и center — по центру. Давайте выровняем заголовок по центру. Для этого пропишем: XHTML <H1 align="center"> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><H1 align = "center" > </td> </tr></table>Аналогично и второй заголовок. Сохраняем и смотрим в браузер. Заголовки стали по центру. Для упрощения работы можно одновременно держать открытыми код страницы в блокноте и браузере. А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5). Самостоятельно попробуйте разные значения тега <H> текст</H> . И разные значения align . Выберите любой Вам понравившейся. Теперь разобьем наш текст на абзацы. Тег, который это делает — текст абзаца . Для этого находим начало абзацев и ставим там тег , а в конце абзаца закрываем его . Сохраняем исходный файл с кодом (ctrl+s), в браузере жмем кнопку "обновить" и смотрим, что получилось. У тега есть параметр align с такими же значениями, что и у тегов <H> — left, right, center . Его работа абсолютно такая же как и у тега <H> . На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту. Текст можно сделать жирным. При помощи тега или (кстати, это закрывающиеся теги. Рекомендуется ). Курсив — или , подчеркнутый , моноширинный <tt> или <kbd> . Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать. Например: XHTML любой текст из сказки ………………………….. …………………………. <kbd>……………………..</kbd> Для изменения размера, цвета и шрифта отдельного участка текста используйте тег , его параметры: fаce="arial" – указывает названия шрифта. size="3" — размер (значения от 1 до 7). color="******" – цвет шрифта. ****** — определенный код шрифта (например, 000000 – это черный). Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом: XHTML фрагмент текста сказки <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"> фрагмент текста сказки </td> </tr></table>Еще один немаловажный тег применяется для принудительного перехода текста на новую строку. В использовании он прост, ставите его в том месте, начиная с которого текст должен отображаться с новой строки. В принципе по этому тегу добавить больше нечего, поэтому двигаемся дальше. Следующую группу тегов (исходя из своего опыта) используют довольно редко, поэтому подробно рассматривать их мы не будем. Включил я их в данный урок, чтобы показать возможности языка, и вдруг вам они когда-нибудь понадобятся. Чтобы вы знали, что такие возможности существуют. Работу этих тегов, предлагаю рассмотреть самостоятельно, как раз будет для вас полезное упражнение. Итак, теги: — подиндексы (H 2 O) — надиндекс (4 5) <big> — увеличивает шрифт на 1 — уменьшает шрифт на 1 <cite> — цитаты, отображаются курсивом <code> — программный код отображается моноширинным шрифтом — выделенный текст отображается курсивом — выделенный текст отображается жирным шрифтом, рекомендуется вместо <hr> — горизонтальная линия. У этого тэга есть такие параметры, как: align=center(left, right) -выравнивание, с этим параметром мы знакомы из других тегов width="число" — длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана size"число" — толщина линии (меньше 100 пикселей, т.е. если задать параметр size=99 , a параметр width=1 , то получим вертикальную линию, только с ограниченной высотой) color="цвет" -цвет линии noshade — отменяет рельефность Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем: XHTML <hr width="100%" color="red" > <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><hr width = "100%" color = "red" > </td> </tr></table>Поэкспериментируйте с набором и значениями параметров этого тега. Есть еще один интересный тег, но поддерживается он только браузером Internet Explorer. Честно говоря мне его на практике использовать не приходилось. <script type="text/javascript">  </script> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <footer class="entry-meta"> </footer> </div> </article> </main> </div> </div> <div id="secondary" class="widget-area col-sm-12 col-md-4" role="complementary"> <div class="well"> <aside id="search-2" class="widget widget_search"> <form method="get" class="form-search" action="/"> <div class="input-group"> <input type="text" class="form-control search-query" value="" name="s" id="s" placeholder="Поиск..."> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Search"></button> </div> </form> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> <h3 class="widget-title">Новые статьи</h3> <ul id="recentcomments"> <li class="recentcomments"><a href="/wi-fi-local-area-network/kak-vyzvat-klaviaturu-vo-vremya-igry-ne-rabotaet-klaviatura-chto-delat/">Не работает клавиатура, что делать?</a></li> <li class="recentcomments"><a href="/programs/mozhno-li-1s-ispolzovat-so-skanerom-podklyuchenie-skanera/">Подключение сканера штрихкода с помощью атол программы</a></li> <li class="recentcomments"><a href="/browsers/dlya-vypolneniya-komandy-trebuetsya-razblokirovat-vse-obekty/">Ошибка "Для выполнения команды требуется разблокировать все объекты" Загружаем конфигурацию из файла</a></li> <li class="recentcomments"><a href="/usb-flash-drive/kak-formatirovanie-diska-kak-polnostyu-formatirovat-zhestkii-disk-formatirovanie-hdd-v-partitionma/">Как полностью форматировать жесткий диск</a></li> <li class="recentcomments"><a href="/windows-7/ustanovit-programmy-na-vindovs-8-kak-ustanovit-obnovit-i/">Как установить, обновить и удалить приложения из Магазина Windows store</a></li> <li class="recentcomments"><a href="/vkontakte/postoyannye-zapominayushchie-ustroistva-zapominayushchie-ustroistva-i/">Запоминающие устройства и основные внешние устройства пк Постоянная память пзу служит для</a></li> <li class="recentcomments"><a href="/skype/router-ne-daet-zaiti-v-nastroiki-pochemu-ya-ne-mogu-voiti-v/">Почему я не могу войти в веб-интерфейс настройки устройства TP-Link?</a></li> <li class="recentcomments"><a href="/vkontakte/kak-mozhno-smotret-zakrytyi-profil-v-odnoklassnikah-tri-sposoba-kak/">Три способа, как просмотреть закрытый профиль в "одноклассниках"</a></li> <li class="recentcomments"><a href="/windows-7/fleshka-vnezapno-stala-zashchishchena-ot-zapisi-fleshka-zashchishchena-ot/">Флешка защищена от записи: Как снять защиту</a></li> <li class="recentcomments"><a href="/windows-7/otklyuchit-virtualnyi-disk-kak-udalyaetsya-virtualnyi-disk-i/">Как удаляется виртуальный диск и привод в Windows</a></li> </ul> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> <h3 class="widget-title">Последние статьи</h3> <ul id="recentcomments"> <li class="recentcomments"><a href="/usb-flash-drive/metall-delaem-v-fotoshop-metallicheskii-tekst-v-fotoshope/">Металл. Делаем в фотошоп. Металлический текст в фотошопе</a></li> <li class="recentcomments"><a href="/hard-disk/podklyuchenie-besprovodnogo-distancionnogo-pereklyuchatelya-sveta-distancionnyi/">Дистанционный пульт управления светом</a></li> <li class="recentcomments"><a href="/browsers/joomla-ochishcheny-kategorii-chto-delat-organizaciya-kontenta-v-joomla-udalenie-i/">Организация контента в Joomla — удаление и создание статей в админке, а так же настройка параметров для всех материалов</a></li> <li class="recentcomments"><a href="/browsers/kak-vyklyuchit-ogranicheniya-na-aifone-5-kakoi-standartnyi-kod-parol/">Какой стандартный код пароль ограничений в iPhone по умолчанию</a></li> <li class="recentcomments"><a href="/classmates/es-fail-eksplorer-provodnik-es-explorer-luchshii-failovyi-menedzher-dlya-android-glavnye/">Проводник ES Explorer – лучший файловый менеджер для Android</a></li> <li class="recentcomments"><a href="/windows-7/oshibka-scenariya-v-1s-kak-ubrat-kak-ubrat-oshibku-scenariya-v-windows-reshaem/">Как убрать ошибку сценария в Windows?</a></li> <li class="recentcomments"><a href="/skype/pechat-eksele-zagolovka-kazhdoi-stranice-sozdanie-skvoznyh/">Создание сквозных строк в Microsoft Excel</a></li> <li class="recentcomments"><a href="/classmates/l-10-e-mail-obyazatelno-ne-publikuetsya-obzor-stiralnoi-mashiny-vyazma-harakteristiki-i-instrukciya/">Обзор стиральной машины Вязьма: характеристики и инструкция</a></li> <li class="recentcomments"><a href="/audio/kak-sdelat-bekap-na-xiaomi-dlya-sozdaniya-rezervnoi-kopii-dannyh-vse-rabochie/">Все рабочие способы сделать бэкап на Xiaomi Где miui хранит бэкап</a></li> <li class="recentcomments"><a href="/audio/kolonka-jbl-charge-3-kitaiskaya-kopiya-obzor-kolonki-jbl-uchimsya/">Колонки JBL: учимся отличать подделку от оригинала</a></li> </ul> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> </aside> </div> </div> </div> <div id="yandex_rtb_R-A-202909-1"></div> </div> </div> </div> <div id="footer-area"> <div class="container footer-inner"> <div class="row"> </div> </div> <footer id="colophon" class="site-footer"> <div class="site-info container"> <div class="row"> lickeys.ru - Полезные советы по социальным сетям. Инструкции по настройке ПК </div> </div> <div class="scroll-to-top"></div> </footer> </div> <script type="text/javascript"> disableSelection(document.body) </script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.2'></script> <script type='text/javascript'> /* <![CDATA[ */ var cm_imgs = { "fileTypeError":"\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0435\u0432\u0435\u0440\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043e \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044e.","fileSizeError":"\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0430\u0439\u043b. \u041f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f, \u0444\u0430\u0439\u043b \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d! \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430:","limitFileSize":"2097152","fileCountError":"\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/strong> \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u043e\u0432. \u041f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u043a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f, \u0444\u0430\u0439\u043b\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: ","limitFileCount":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/comment-images-reloaded/js/cir.min.js?ver=4.9.1'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/themes/sparkling/inc/js/skip-link-focus-fix.js?ver=20140222'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <script type="text/javascript"> jQuery(document).on('ready post-load', function(){ jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]').addClass('nolightbox'); } ); jQuery(document).on('ready post-load',easy_fancybox_handler); jQuery(document).on('ready',easy_fancybox_auto);</script> </body> </html>

Теги и элементы

Header

Парадигма оформления современных сайтов

Валидация страницы

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

-