, чтобы элементы отображались с использованием специального набора правил стиля (CSS).

Пример с тегом

Получим следующий результат:

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

Пример с тегом

Группировки элементов с помощью тега span.

Получим следующий результат:

Эти теги обычно используются с CSS , чтобы Вы могли задать стиль к секции страницы.

Доброго времени суток, уважаемые подписчики.

Этот урок мы посветим форматированию текста в html . Рассмотрим, какие теги для этого применяются.

Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно "обойти", используя каскадные таблицы стилей (css).

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

Итак, начнем.

Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке:

Возьмем из высланного Вам архива файл "Лис и лошадь.doc" и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм.

Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока.

Верю, что да.

Теперь вернемся в word, скопируем весь наш текст из файла "сказка.doc" и вставим его между тегами нашей заготовки.

Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).

Мы видим, что текст идет без заголовков, без абзацев, без отступов.

Вот теперь и займемся непосредственным форматированием текста в языке HTML.

Для выделения заголовков используются теги

текст

,

текст

и т.д. до

текcт

.

Цифры после буквы H в теге применяются от 1 до 6.

1 – самый крупный заголовок, 6 – самый маленький заголовок.

Давайте теперь найдем в нашем файле названия сказок и заключим их в теги

…

.

XHTML

Лис и лошадь

Лис и кошка

У тега

есть параметр align со значением Left — по левому краю, right — по правому и center — по центру.

Давайте выровняем заголовок по центру. Для этого пропишем:

XHTML

Аналогично и второй заголовок.

Сохраняем и смотрим в браузер.

Заголовки стали по центру.

Для упрощения работы можно одновременно держать открытыми код страницы в блокноте и браузере.

А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5).

Самостоятельно попробуйте разные значения тега текст . И разные значения align . Выберите любой Вам понравившейся.

Теперь разобьем наш текст на абзацы.

Тег, который это делает —

текст абзаца

.

Для этого находим начало абзацев и ставим там тег

, а в конце абзаца закрываем его

.

Сохраняем исходный файл с кодом (ctrl+s), в браузере жмем кнопку "обновить" и смотрим, что получилось.

У тега

есть параметр align с такими же значениями, что и у тегов — left, right, center . Его работа абсолютно такая же как и у тега .

На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.

Текст можно сделать жирным. При помощи тега или (кстати, это закрывающиеся теги. Рекомендуется ).

Курсив — или , подчеркнутый , моноширинный или .

Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать.

Например:

XHTML

любой текст из сказки ………………………….. …………………………. ……………………..

Для изменения размера, цвета и шрифта отдельного участка текста используйте тег , его параметры:

fаce="arial" – указывает названия шрифта.

size="3" — размер (значения от 1 до 7).

color="******" – цвет шрифта.

****** — определенный код шрифта (например, 000000 – это черный).

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

XHTML

фрагмент текста сказки

фрагмент текста сказки

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

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

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

Итак, теги:

— подиндексы (H 2 O)

— надиндекс (4 5)

— увеличивает шрифт на 1

— уменьшает шрифт на 1

— цитаты, отображаются курсивом

— программный код отображается моноширинным шрифтом

— выделенный текст отображается курсивом

— выделенный текст отображается жирным шрифтом, рекомендуется вместо

---

— горизонтальная линия. У этого тэга есть такие параметры, как:

align=center(left, right) -выравнивание, с этим параметром мы знакомы из других тегов

width="число" — длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана

size"число" — толщина линии (меньше 100 пикселей, т.е. если задать параметр size=99 , a параметр width=1 , то получим вертикальную линию, только с ограниченной высотой)

color="цвет" -цвет линии

noshade — отменяет рельефность

Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:

XHTML

---

Поэкспериментируйте с набором и значениями параметров этого тега.

Есть еще один интересный тег, но поддерживается он только браузером Internet Explorer. Честно говоря мне его на практике использовать не приходилось.

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

Подписаться

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

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

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

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

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

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

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

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

• Header

• Блок
• курсив

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

• 

• ---

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

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

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

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

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

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

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

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

1. Strict. Не включает теги font, и пр. Это «строгий» набор правил для верстки на HTML 4.
2. Transitional. Используется для сайтов, которые были написаны до появления новых стандартов. Разрешены устаревшие теги.
3. 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> <p>Помимо текста и медиа-контента, на страницу можно выводить небольшие изображения. Они выглядят как иконки, но вставляются в текст не картинками, а спецсимволами. Некоторые примеры приведены в таблице.</p> <p>Также в HTML 5 появились деньги, карточные масти и знаки гороскопа.</p> <p>Используйте в разметке Html текстовые теги, которые подчеркивают логическое значения текста. Не стоит оформлять каждый фрагмент контента отдельно. Это допустимо только в случае, если вы точно знаете, что такое форматирование больше нигде не повторяется. Для одинаковых стилей используйте классы CSS.</p> <p>В дальнейшем такой подход поможет сэкономить время на изменении дизайна, а также повысить шансы на попадание в ТОП поисковых систем.</p> <p>Основным средством передачи информации в интернете является безусловно текст. В предыдущих статьях я про атрибуты тега BODY, а также показал как на практике изменять цвета фона, текста, ссылок и т.п., соответственно ты уже умеешь вставить текст на html-страницу (если забыл, то он вставляется между тегами <BODY> и </BODY>).</p> <p>Однако, просто вставить текст на страницу бывает мало, надо его правильно разместить согласно цветовой схеме сайта и смысловой нагрузке (абзацы, отступы и т.д.). Но тут главное не переборщить, делать все правильно и в меру, чтобы наши будущие посетители чувствовали себя комфортно.</p> <p>Я постараюсь написать самое главное, покажу какие теги используются для <i>форматирования текста и их атрибуты </i>, чтобы достигнуть максимального результата.</p> <h4>С чего начинать форматирование в HTML</h4> <p>Для начала, я хотел бы вам рассказать о том, что такое вообще текст и как представляется. Я не буду вам рассказывать много непонятных терминов и понятий. Скажу, как взаимосвязаны <i>форматирование текста в html </i>и его редактирование в текстовых редакторах.</p> <p>И так, представим ты открыл текстовый редактор и набераешь в нем свой текст, сделал все необходимые форматирования (выделил что-то жирным или курсивом), или что-то другое, потом берешь и копируешь полученный результат в код html. После, ты открываешь html-документ в браузере, но не видишь всего того форматирования, что делал до копирования и сохранения. Куда же оно все исчезло? Ответ простой: текстовый редактор для форматирования текста использует собственные спецсимволы-теги, которые попросту скрыты от глаз.</p> <p>Однако не пугайся, перенести твой красиво оформленный текст из текстового редактора в html можно. В общем, дальше я постараюсь подробно расписать, как это сделать.</p> <h4>Теги форматирования в HTML</h4> <p>Если отформатировал текст, то его можно быстро вставить в html-страницу при помощи тегов <i><pre> </i> и <i></pre> </i>. Твой браузер выведит на страницу текст в том виде, в каком он был в текстовом редакторе, если ты его поместишь в эти теги. Но данный тэг ялвяется малоиспользуемым, так как у него мало возможностей. Например, я, его не разу не использовал, но рассказать о нем я бы не посмел:)</p> <ul><li><i> </i> (или <strong></strong>) — тег, для выделения текста <i>жирным </i></li> <li><i><I></I> </i> (или <em></em>) — тег, для получения <i>курсивного </i> текста</li> <li><i><U></U> </i> — тег, для <u>подчеркнивания </u> текста (кстати, перечекрнутые слова часто путают с ссылками)</li> <li><i><STRIKE></STRIKE> </i> — тег, для зачеркивания текста</li> <li><i><SUB></SUB> </i> — тег, для выделения подстрочного текста, или попросту говоря — нижний индекс. Очень помогает, например, для форматирования химических элементов</li> <li><i><SUP></SUP> </i> — тег, для выделения надстрочного текста, или попросту говоря — верхний индекс (10 м 2)</li> </ul><p>Теги можно использовать не только один, а сколько угодно, где-то даже дополняя друг друга. Можно просто вкладывать один тег в другой. Приведу пример:</p><p>10 м² — это <strong><em>площадь</em> мой комнаты.</strong> </p><p>результат будет выглядеть следующим образом:</p> <blockquote> <p>10 м 2 — это <i><i>площадь </i> мой комнаты. </i></p> </blockquote> <p>Для выделения обзаца, или располодить текст блоком, используют тег <P>Данный тег отделяет обзац небольшим отступом снизу от другого обзаца или объекта. На примере это будет выглядеть так:</p><p> <p>Создаем свой абзац.</p> <p>Создаем второй абзац.</p> </p><p>Данный код на html-странице будет выглядеть следующим образом:</p> <blockquote> <p>Создаем свой абзац.</p><p>Создаем второй абзац.</p> </blockquote> <p>Кстати, закрывать абзац тегом </p> необязательно, если хотите начать следующий абзац, просто напишите снова <p>В данном теге есть важный атрибут align, у которого можно выставлять следующие значения: center, left, right и justify. Атрибут помогает выровнить наш текст в теге <p>Из названий атрибутов, тебе уже наверное понятно, что выравнивание будет по центру, по левому краю, по правому и по всей ширине соответственно. Дальше я приведу простой пример:</p><p> <p align="center">Текст по центру</p> </p><p>расположит наш текст по центру, на выходе получится следующее:</p> <blockquote> <p>Текст по центру</p> </blockquote> <p>Кстате, по умолчанию, текст расположен по левому краю, поэтому атрибут left можно не использовать для этих целей:</p><p>на html-странице это будет выглядеть вот так:выровнит текст по левому краю</p> <blockquote> <p>Выравнивание текста по левому краю (по умолчанию)</p> </blockquote> <p>Парой встает возможно без отступа абзаца сделать простой переход на новую строку, и можно это сделать тегом <BR>. html-код в данном случае будет следующим:</p><p>Наша первая строка. <br> Наша вторая строка. </p><p>на странице будет следующий вид:</p> <blockquote> <p>Наша первая строка.<br> Наша вторая строка.</p> </blockquote> <p>У <br> отсутствует закрывающийся тег. Кстати, если ты хочешь больше одного отступа, можно написать <br> подряд.</p> <p>Существует еще тег <HR>, благодаря которому тоже можно разделить текст. При помощи него создается полоса, и в котором тоже есть свои атрибуты:</p> <ul><li>width — ширина полосы;</li> <li>align — выравнивание;</li> <li>size — толщина полосы;</li> <li>color — цвет полосы;</li> <li>noshade — атрибут без значений для создания черной полосы без тени.</li> </ul><p>html-код на примере будет следующим (попробуй сами на примере узнать что получится):</p><p> <hr align="center" size="3" width="300" color="red"> </p><p>Ширина и толщина задается как в пикселях, так и в процентах, кому как удобнее и для какой цели нужно.</p> <p> <H1></H1> <H2></H2> <H3></H3> <H4></H4> <H5></H5> <H6></H6> </p><p>Заголовки выделяются жирным шрифтом, а также отступом снизу. Самый большой и главный заголовок на странице это <H1></H1>, ну а самый маленький <H6></H6>. У данные тегов заголовков есть атрибуты:</p> <ul><li>align — выравнивание заголовка;</li> <li>title — всплывающая подсказка заголовка (когда наведешь курсор на него).</li> </ul><p>Приведу просто пример HTML-кода заголовков:</p><p> <h4 align="center" title="Заголовок 4 размера">Заголовок 4 размера</h6> </p><p>на странице мы увидем следующее:</p> <blockquote> <h4>Заголовок 4 размера</h4> </blockquote> <p>Если вы хотите изменять шрифт текста и его размер, в HTML-коде применяется тег <FONT></FONT>. У данного тега имеются следующие атрибуты:</p> <ul><li>color — цвет шрифта;</li> <li>face — гарнитура шрифта;</li> <li>size — размер шрифта. Может иметь значения от 1 до 6, а также от +1 до +6 и от -1 до -6. По умолчанию размер шрифта установлен 3. Если указать <font size="+1"></font>, то текст, находящийся между данным тегом, будет выводится увеличенным на 1, относительно другого текста. Ну и наоборот - при -1 уменьшенным на 1.</li> </ul><p>Создать список в HTML можно используя теги (список с нумерацией) и (список с маркировкой). Элементы в списке должны выделяться . Как элемент списка начинается с новой строки. В тегах списках есть свой атрибут type. Для начала разберем значения этого атрибта в теге :</p> <ul><li>1 — нумерация арабскими цифрами (по умолчанию);</li> <li>A — большими латинскими буквами по алфавиту;</li> <li>a — маленькими латинскими буквами;</li> <li>I — большими римскими цифрами;</li> <li>i — маленькими римскими цифрами.</li> </ul><p>Приведу HTML-код для примера:</p> <p> <ol type="I"> <li>Элемент 1.</li> <li>Элемент 2.</li> <li>Элемент 3.</li> </ol> </p><p>на странице будет вот так:</p> <p>Тег <UL> имеет атрибут type вот с такими значениями:</p> <ul><li>disc — закрашенный кружок (по умолчанию);</li> <li>circle — незакрашенный кружок;</li> <li>square — закрашенный квадратик.</li> </ul><p>HTML-код тега <UL> на примере:</p> <p> <ul type="circle"> <li>Элемент 1.</li> <li>Элемент 2.</li> <li>Элемент 3.</li> </ul> </p><p>На странице мы увидим следующие:</p> <p>Показав основные теги для форматирования текста на html-странице нельзя забыть и о спецсимволах. Спецсимволы — это символы, которых, как показывает практика, нет на клавиатуре, но которые браузер преобразует в код, принимая за управляющий. Полный список я привел на отдельной странице Спецсимволы HTML. Кстате, для форматирования текста очень важно знать правила грамматики русского языка, ведь грамотно написанный текст уже наполовину отформатирован.</p> <p>Давай, для закрепления данного материала я приведу тебе пример html-кода, и ты сам разберись, что он означает:</p><p> <font color="green" size="-2"><U> B</U></font> </p><p>Пожалуй, я закончил данный материал о HTML тегах для форматирования текста. Я постарался упомянуть самое основное что тебе следует знать. Постарайся запомнить данные уроки, они тебе еще не раз пригодятся. Далее я расскажу тебе, как вставить картинку в html-страницу и какие атрибуты можно при этом использовать.</p> <span>Дата публикации: 15 мая, 2012 </span> <p><b>ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА </b></p> <p>На большинстве сайтов информация представлена в форме текста. Даже на сайтах, посвященных музыке, фото или живописи, текст присутствует в виде всякого рода пояснений. А текст мы привыкли видеть оформленным так, чтобы его было удобно читать: с полями, абзацами, заголовками и пр., т.е. отформатированным. Но, дело в том, что если мы поместим в тело HTML-документа прекрасно оформленный текст (например, скопируем готовый документ из Word-a), и посмотрим это творение в окне браузера, то увидим просто набор предложений, довольно неудобных для чтения. Объяснить браузеру, как он должен показывать людям наш текст, нужно при помощи тегов.<br> Начнем с того, о чем я уже упоминал. Предположим, что у нас есть прекрасно оформленный в каком-либо текстовом редакторе документ, и мы хотим в таком виде его показать. Для этого существует тег-контейнер <b><PRE>...</PRE> </b>. Весь текст, помещенный в этот тег, выводится браузером "как есть", со всеми элементами форматирования. Казалось бы, что еще нужно? Но не все так просто. Во-первых, сохраняются только признаки форматирования: пробелы, перенос строки, табуляция и т.д. А если у нас в документе красивые заголовки, выделенные особо значимые куски текста и пр.? И, во-вторых, браузер не сможет оптимизировать преформатированный текст под разрешение экрана нашего читателя, т.к. будет поставлен в жесткие условия тега <PRE>...</PRE>, а это доставит неудобства этому самому читателю. А мы этого не хотим, потому что и писали то все это именно для этого конкретного человека. Так, что одним тегом не обойтись, нужно идти дальше.<br> Из всех элементов, применяемых для форматирования текста, браузеры безо всяких подсказок понимают только один: пробел. Причем, только один пробел. Поэтому, если Вы хотите написать что-то с красной строки, Вам придется употребить специальный, так называемый, символьный объект или, по другому, эскейп-последовательность: знак неразрывного пробела . Сколько таких последовательностей поставите, столько пробелов сделает браузер. Еще этот знак удобно употреблять в случаях, когда нужно обозначить, что в этом месте рвать строку нежелательно. Браузер ведь сам определяет, в зависимости от разрешения экрана и шрифтов, применяемых хозяином, где заканчивается одна строка и начинается другая. И если, например, фраза "Мой вес 73 кг" будет выглядеть таким образом: "Мой вес 73<br> кг" - это будет как-то не очень... Поэтому в окне редактора ее стоит написать так "Мой вес 73 кг". Эскейп-последовытельности существуют для всех символов из второй половины ASCII-таблицы, и при желании Вы их найдете в спецификации HTML-4, которую я Вам советовал скачать. Но все нам употреблять не придется, а вот некоторые, например, заменяющие угловые скобки < и > (< и >), иногда приходится.<br> Тег-контейнер - тег параграфа. Закрывающий элемент не обязателен, но если он отсутствует, браузер не оставляет после абзаца пустую строку. Браузеры выделяют текст, помещенный в этот тег, пустыми строчками. Имеет один параметр: ALIGN= , который может принимать значения:</p> <ul><li>LEFT - выравнивание по левому краю,</li> <li>CENTER - выравнивание по центру,</li> <li>RIGHT - выравнивание по правому краю и</li> <li>JUSTIFY - выравнивание по ширине</li> </ul><p>По умолчанию принимается выравнивание по левому краю. Пример использования этого тега - следующий абзац. Он написан внутри тега :</p> <p>Тег принудительного перевода строки <b><BR> </b>. Говорит браузеру, в каком месте необходимо прервать строку и начать новую. Закрывающей части не имеет. Используется, как и тег , для разделения абзацев, но в отличие от него не оставляет пустой строки. Использование этого тега в HTML аналогично использованию клавиши ENTER в Word-e. Имеет один параметр CLEAR, прекращающий обтекание рисунка. О его использовании - в статье о применении графики.</p> <p>Тег, запрещающий перевод строки - <b><NOBR>...</NOBR> </b>. Весь текст, помещенный внутри этого тега, будет выведен браузером в одну строчку. Что Вы и наблюдаете на примере этой строки. Можно все же разрешить браузеру перевести строку в определенном месте текста внутри этого тега, если поставить в соответствующем месте тег <b><WBR> </b>. После этого тега, как видите, браузер начал новую строчку.<br> Теги заголовков <b><H1> - <H6> </b>. Теги контейнеры. Текст, помещенный в них, выводится как заголовок. Имеет параметр выравнивания по горизонтали, аналогичный с тегом <P>Закрывающая часть обязательна. Примеры:</p> <p><b>Заголовок первого уровня. </b></p> <p><b>Заголовок второго уровня с выравниванием по центру. </b></p> <p><b>Заголовок шестого уровня с выравниванием по правому краю. </b></p> <p>Тег горизонтальной линии <b><HR> </b>. Рисует горизонтальную линию. Имеет параметры</p> <ul><li>ALIGN - выравнивания со значениями LEFT, RIGHT или CENTER.</li> <li>WIDTH - устанавливает длину линии в пикселях или процентах от окна браузера.</li> <li>SIZE - устанавливает ширину линии в пикселях.</li> <li>NOSHADE - отменяет рельефность линии.</li> <li>COLOR - указывает цвет линии в формате RGB или стандартном имени.</li> </ul><p>Ну, например:</p> <p>Эта линия нарисована тегом с такими параметрами: <HR ALIGN=RIGHT WIDTH=25% SIZE=20 COLOR=F74C80>.<br> Тегов, которые употребляются для форматирования текста, довольно много. Часть из них рекомендовано употреблять в таблицах стилей, другая часть отмечены в спецификации HTML-4.0, как устаревшие и их не рекомендуют применять, т.к. браузеры новых версий могут прекратить их поддержку. Рассмотренных нами достаточно, чтобы оформить документ довольно симпатично. В следующей статье я расскажу о применении тегов форматирования шрифтов, а пока у Вас есть время потренироваться в употреблении того, о чем шла речь в этой статье.</p> <p><b>ТЕГИ, ПРИМЕНЯЕМЫЕ ДЛЯ ФОРМАТИРОВАНИЯ ШРИФТА. </b></p> <p>Для правильного и симпатичного отображения информации на Вашей страничке Вам потребуется не только правильно расставить абзацы, в нужном месте перевести строку, и пр., но и расставить акценты внутри текста, т.е., что-то выделить жирным шрифтом, что-то написать другим цветом, что-то подчеркнуть и т.д. На все эти случаи в языке HTML существуют соответствующие теги. Рассмотрим некоторые из них, наиболее часто употребляемые. Нет необходимости описывать здесь все теги подряд, т.к. освоив употребление нескольких, Вы без труда сможете пользоваться остальными.</p> <ul><li><b><B>...</B> </b> - выделяет текст, помещенный внутрь, жирным шрифтом.</li> <li><b><i><I>...</I> </i> </b><i> - выделяет текст, помещенный внутрь, наклонным шрифтом. </i></li> <li><b><u><U>...</U> </u> </b><u> - выделяет текст, помещенный внутрь, подчеркиванием. </u></li> <li><b><BIG>...</BIG> </b> - более крупный шрифт.</li> <li><b><SMALL>...</SMALL> </b> - более мелкий шрифт.<br><b>Небольшой комментарий </b>- Для форматирования шрифтов можно применять теги физического форматирования и теги логического форматирования. Их отличие в том, что теги физического форматирования дают браузеру конкретное указание, каким шрифтом печатать текст, а теги логического форматирования указывают ему лишь на то, что текст должен отличаться от обычного в ту или иную сторону. Например, вместо тегов <BIG>...</BIG> и <SMALL>...</SMALL> можно употребить тег</li> <li><b><FONT></FONT> </b>, который имеет параметры <br> FACE - задает тип шрифта,<br> SIZE - задает размер шрифта,<br> COLOR - задает цвет шрифта. <br> Например, эта фраза написана внутри тега: <FONT FACE="Comic Sans MS " SIZE=6 COLOR=red></FONT>. <br> Спецификация HTML-4.0 рекомендует употреблять теги логического форматирования, как более лояльные к пользователю. В некоторых случаях употребление тегов физического форматирования может не привести к желаемому результату. Например, в случае с вышеприведенной фразой, браузер покажет ее шрифтом, установленным по умолчанию, если на машине пользователя нет шрифта Comic Sans MS. В редакторе SNK Visual HTML Workshop теги логического форматирования Вы найдете нажав кнопку "Стили", а теги физического форматирования - нажав кнопку "Шрифт".</li> <li><b><STRONG>...</STRONG> - сильно выделенный текст. </b></li> </ul><p>· <РRE>...</PRE> - уже знакомый нам тег.</p> <p>· Все, помещенное в него, сохраняет форматирование на уровне</p> <p>· текста, но выводится моноширинным текстом (Что это такое,</p> <p>· Вы видите на этом примере).</p> <p>Этого, наверно, достаточно. Как видите, особого разнообразия не наблюдается (мой браузер, например, показывает текст, помещенный в теги <SMALL>...</SMALL>, <РRE>...</PRE>, <TT>...</TT> совершенно одинаково), но вполне достаточно, чтобы выполнить страничку в соответствии с Вашим вкусом.</p> <p><b>ТЕГИ СПИСКОВ </b></p> <p>Для предоставления информации на страницах сайтов в виде списков в языке HTML предусмотрен специальный набор тегов. Они дают возможность составлять:</p> <p>a. Нумерованые или упорядоченные списки.</p> <p>b. Компактные или маркированные списки.</p> <p>c. Списки определений.</p> <p>d. Списки меню.</p> <p>a.<b>Нумерованные списки </b> <b><i> </i> </b>. Пример применения этого тега у Вас перед глазами. <br> Тег имеет параметры:</p> <ul> <ul><li>A - задает маркеры в виде заглавных латинских букв.</li> <li>a - задает маркеры в виде строчных латинских букв.</li> <li>I - задает маркеры в виде больших римских цифр.</li> <li>i - задает маркеры в виде маленьких римских цифр.</li> <li>1 - задает маркеры в виде арабских цифр.</li> </ul></ul><p>По умолчанию принимается значение 1, т. е. нумерация ведется арабскими цифрами.</p> <ul><li>COMPACT - в настоящее время не рекомендуется к употреблению.</li> <li>START - позволяет начать нумерацию списка не с единицы. Принимает значение порядкового номера элемента, с которого Вы хотите начать нумерацию.</li> </ul><p>Синтаксис записи: <br> <b><i><LI> . . .</LI> </i> </b><br> В качестве примера составим еще один нумерованный список. HTML-код его выглядит так: <OL type=I start=6>Летние месяцы года: <LI>Июнь <LI>Июль <LI>Август </OL><br> На странице сайта это будет выглядеть так:</p> <p>Летние месяцы года:</p> <p>VIII. Август</p> <p>b.<b>Маркированные списки </b> создаются при помощи тега-контейнера <b><i> </i> </b>. Тег имеет параметры:</p> <ul><li>TYPE - задает тип маркера, которым отмечается список. Этот параметр может принимать значения:</li> <ul><li>= disc - маркеры отображаются закрашенными кружками.</li> <li>= circle - маркеры отображаются не закрашенными кружками.</li> <li>= square - маркеры отображаются закрашенными квадратами.</li> </ul></ul><p>Параметр type можно употреблять как для всего списка, так и для каждого элемента в отдельности.</p> <ul><li>Парметр COMPACT - в настоящее время не рекомендуется к употреблению.</li> </ul><p>Каждый элемент списка внутри этого тега помещается в тег-контейнер <b><i><LI> . . .</LI> </i> </b>. Закрывающий элемент тега LI может быть опущен.<br> Кроме того есть недокументированная возможность выводить в качестве маркеров выводить всяческие симпатичные штучки.</p><p> </UL><br> Замечу попутно, что язак HTML имеет еще множество неизученных возможностей и комбинаций кодов. Так что экспериментируйте, фантазируйте, дерзайте, одним словом - и у Вас могут получиться уникальные вещи!<br> c.<b>Списки определений </b> создаются при помощи тега-контейнера <b><i><DL> . . .</DL> </i> </b>. Внутри контейнера определяемый термин помечается тегом <DT>, а абзац с его определением - тегом <DD>. Для тегов DT и DD закрывающие элементы не обязательны. Пример такого списка.</p> <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 style="font-size:0px;height:0px;line-height:0px;margin:0;padding:0;clear:both"></div> </article> <div class='yarpp-related'> <div class="related-posts-title">Похожие публикации:</div> <ul class="related-items"> <li> <img src="/uploads/12dcc9c433a4bc7277bd5423d9533b34.jpg" width="180" height="160" alt="Простой способ набрать читателей в Twitter" loading=lazy> <a href='/browsers/kak-privlech-folloverov-v-tvittere-prostoi-sposob-nabrat-chitatelei-v-twitter/' class='related-item__title'>Простой способ набрать читателей в Twitter</a> </li> <li> <img src="/uploads/5731d40273aada1e913a26c35486ac19.jpg" width="180" height="160" alt="Почему аватария не грузится в вконтакте и как это исправить Не работает аватария вконтакте" loading=lazy> <a href='/good-to-know/chto-delat-esli-avatariya-ne-zagruzhaetsya-pochemu-avatariya-ne/' class='related-item__title'>Почему аватария не грузится в вконтакте и как это исправить Не работает аватария вконтакте</a> </li> <li> <img src="/uploads/0f9343325ad9412c6ff7df81371a9fb7.jpg" width="180" height="160" alt="Необходимость использования брандмауэра или фаервола Назначение брандмауэра" loading=lazy> <a href='/excel/chto-takoe-brandmauer-windows-i-kak-s-nim-rabotat-neobhodimost/' class='related-item__title'>Необходимость использования брандмауэра или фаервола Назначение брандмауэра</a> </li> <li> <img src="/uploads/3d74c4e4f7b69ad56d10afcdb0d3b21d.jpg" width="180" height="160" alt="Руководство по программированию в Windows Forms" loading=lazy> <a href='/excel/kak-napisat-programmu-windows-forms-na-c-rukovodstvo-po-programmirovaniyu-v-windows-forms-tipichnaya/' class='related-item__title'>Руководство по программированию в Windows Forms</a> </li> </ul> </div> <style> .nafAdaptMedia { width: 100%; height: 300px; } @media(min-width: 500px) { .nafAdaptMedia { width: 100%; height: 300px; } } @media(min-width: 800px) { .nafAdaptMedia { width: 100%; height: 300px; } } </style> <style> .nafAdaptText { width: 100%; height: 300px; } @media(min-width: 500px) { .nafAdaptText { width: 100%; height: 300px; } } @media(min-width: 800px) { .nafAdaptText { width: 100%; height: 300px; } } </style> </div>  <div id="rightColomn"> <div class="title">Категории</div> <aside> <ul id="asidemenu" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/programs/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Программы</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/windows/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Windows</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/browsers/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Браузеры</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/word/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Word</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/excel/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Excel</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/payment-systems/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Платежные системы</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/download-software/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Скачать софт</span></a></li> </ul> </aside> <div class="banner" id="text-4"> <div class="textwidget"> </div> </div> </div> </div> </div> <div class="hfooter"></div> </div> <footer> <div class="container"> <ul> <li><a href='/sitemap.xml'>Карта сайта</a></li> </ul> <div class="copy"> <a href='https://play.google.com/store/apps/details?id=org.planetsapp.pdfreader' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=leally.ru&sub2=org.planetsapp.pdfreader&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a>&copy; 2024, leally.ru - Твой гид в мире компьютера и интернета </div> </div> </footer> <script type="text/javascript"> jQuery(document).ready(function(){ var q2w3_sidebar_1_options = { "sidebar" : "banner", "margin_top" : 10, "margin_bottom" : 0, "screen_max_width" : 0, "width_inherit" : false, "widgets" : ['text-4'] } ; q2w3_sidebar(q2w3_sidebar_1_options); setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); } , 1500); } ); </script> <script type='text/javascript' src='https://leally.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.1.10'></script> <script type='text/javascript' src='https://leally.ru/wp-content/plugins/fitvids-for-wordpress/jquery.fitvids.js?ver=1.1'></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery('body').fitVids(); } ); </script><script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> </body> </html>