ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА

На большинстве сайтов информация представлена в форме текста. Даже на сайтах, посвященных музыке, фото или живописи, текст присутствует в виде всякого рода пояснений. А текст мы привыкли видеть оформленным так, чтобы его было удобно читать: с полями, абзацами, заголовками и пр., т.е. отформатированным. Но, дело в том, что если мы поместим в тело HTML-документа прекрасно оформленный текст (например, скопируем готовый документ из Word-a), и посмотрим это творение в окне браузера, то увидим просто набор предложений, довольно неудобных для чтения. Объяснить браузеру, как он должен показывать людям наш текст, нужно при помощи тегов.
Начнем с того, о чем я уже упоминал. Предположим, что у нас есть прекрасно оформленный в каком-либо текстовом редакторе документ, и мы хотим в таком виде его показать. Для этого существует тег-контейнер 

...
. Весь текст, помещенный в этот тег, выводится браузером "как есть", со всеми элементами форматирования. Казалось бы, что еще нужно? Но не все так просто. Во-первых, сохраняются только признаки форматирования: пробелы, перенос строки, табуляция и т.д. А если у нас в документе красивые заголовки, выделенные особо значимые куски текста и пр.? И, во-вторых, браузер не сможет оптимизировать преформатированный текст под разрешение экрана нашего читателя, т.к. будет поставлен в жесткие условия тега 
...
, а это доставит неудобства этому самому читателю. А мы этого не хотим, потому что и писали то все это именно для этого конкретного человека. Так, что одним тегом не обойтись, нужно идти дальше.
Из всех элементов, применяемых для форматирования текста, браузеры безо всяких подсказок понимают только один: пробел. Причем, только один пробел. Поэтому, если Вы хотите написать что-то с красной строки, Вам придется употребить специальный, так называемый, символьный объект или, по другому, эскейп-последовательность: знак неразрывного пробела . Сколько таких последовательностей поставите, столько пробелов сделает браузер. Еще этот знак удобно употреблять в случаях, когда нужно обозначить, что в этом месте рвать строку нежелательно. Браузер ведь сам определяет, в зависимости от разрешения экрана и шрифтов, применяемых хозяином, где заканчивается одна строка и начинается другая. И если, например, фраза "Мой вес 73 кг" будет выглядеть таким образом: "Мой вес 73
кг" - это будет как-то не очень... Поэтому в окне редактора ее стоит написать так "Мой вес 73 кг". Эскейп-последовытельности существуют для всех символов из второй половины ASCII-таблицы, и при желании Вы их найдете в спецификации HTML-4, которую я Вам советовал скачать. Но все нам употреблять не придется, а вот некоторые, например, заменяющие угловые скобки < и > (< и >), иногда приходится.
Тег-контейнер - тег параграфа. Закрывающий элемент не обязателен, но если он отсутствует, браузер не оставляет после абзаца пустую строку. Браузеры выделяют текст, помещенный в этот тег, пустыми строчками. Имеет один параметр: ALIGN= , который может принимать значения:

  • LEFT - выравнивание по левому краю,
  • CENTER - выравнивание по центру,
  • RIGHT - выравнивание по правому краю и
  • JUSTIFY - выравнивание по ширине

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

Тег принудительного перевода строки
. Говорит браузеру, в каком месте необходимо прервать строку и начать новую. Закрывающей части не имеет. Используется, как и тег , для разделения абзацев, но в отличие от него не оставляет пустой строки. Использование этого тега в HTML аналогично использованию клавиши ENTER в Word-e. Имеет один параметр CLEAR, прекращающий обтекание рисунка. О его использовании - в статье о применении графики.

Тег, запрещающий перевод строки - ... . Весь текст, помещенный внутри этого тега, будет выведен браузером в одну строчку. Что Вы и наблюдаете на примере этой строки. Можно все же разрешить браузеру перевести строку в определенном месте текста внутри этого тега, если поставить в соответствующем месте тег . После этого тега, как видите, браузер начал новую строчку.
Теги заголовков

-
. Теги контейнеры. Текст, помещенный в них, выводится как заголовок. Имеет параметр выравнивания по горизонтали, аналогичный с тегом

Закрывающая часть обязательна. Примеры:

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

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

Заголовок шестого уровня с выравниванием по правому краю.

Тег горизонтальной линии

. Рисует горизонтальную линию. Имеет параметры

  • ALIGN - выравнивания со значениями LEFT, RIGHT или CENTER.
  • WIDTH - устанавливает длину линии в пикселях или процентах от окна браузера.
  • SIZE - устанавливает ширину линии в пикселях.
  • NOSHADE - отменяет рельефность линии.
  • COLOR - указывает цвет линии в формате RGB или стандартном имени.

Ну, например:

Эта линия нарисована тегом с такими параметрами:

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

ТЕГИ, ПРИМЕНЯЕМЫЕ ДЛЯ ФОРМАТИРОВАНИЯ ШРИФТА.

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

  • ... - выделяет текст, помещенный внутрь, жирным шрифтом.
  • ... - выделяет текст, помещенный внутрь, наклонным шрифтом.
  • ... - выделяет текст, помещенный внутрь, подчеркиванием.
  • ... - более крупный шрифт.
  • ... - более мелкий шрифт.
    Небольшой комментарий - Для форматирования шрифтов можно применять теги физического форматирования и теги логического форматирования. Их отличие в том, что теги физического форматирования дают браузеру конкретное указание, каким шрифтом печатать текст, а теги логического форматирования указывают ему лишь на то, что текст должен отличаться от обычного в ту или иную сторону. Например, вместо тегов ... и ... можно употребить тег
  • , который имеет параметры
    FACE - задает тип шрифта,
    SIZE - задает размер шрифта,
    COLOR - задает цвет шрифта.
    Например, эта фраза написана внутри тега: .
    Спецификация HTML-4.0 рекомендует употреблять теги логического форматирования, как более лояльные к пользователю. В некоторых случаях употребление тегов физического форматирования может не привести к желаемому результату. Например, в случае с вышеприведенной фразой, браузер покажет ее шрифтом, установленным по умолчанию, если на машине пользователя нет шрифта Comic Sans MS. В редакторе SNK Visual HTML Workshop теги логического форматирования Вы найдете нажав кнопку "Стили", а теги физического форматирования - нажав кнопку "Шрифт".
  • ... - сильно выделенный текст.

· <РRE>... - уже знакомый нам тег.

· Все, помещенное в него, сохраняет форматирование на уровне

· текста, но выводится моноширинным текстом (Что это такое,

· Вы видите на этом примере).

Этого, наверно, достаточно. Как видите, особого разнообразия не наблюдается (мой браузер, например, показывает текст, помещенный в теги ..., <РRE>..., ... совершенно одинаково), но вполне достаточно, чтобы выполнить страничку в соответствии с Вашим вкусом.

ТЕГИ СПИСКОВ

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

a. Нумерованые или упорядоченные списки.

b. Компактные или маркированные списки.

c. Списки определений.

d. Списки меню.

a.Нумерованные списки . Пример применения этого тега у Вас перед глазами.
Тег имеет параметры:

    • A - задает маркеры в виде заглавных латинских букв.
    • a - задает маркеры в виде строчных латинских букв.
    • I - задает маркеры в виде больших римских цифр.
    • i - задает маркеры в виде маленьких римских цифр.
    • 1 - задает маркеры в виде арабских цифр.

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

  • COMPACT - в настоящее время не рекомендуется к употреблению.
  • START - позволяет начать нумерацию списка не с единицы. Принимает значение порядкового номера элемента, с которого Вы хотите начать нумерацию.

Синтаксис записи:

  • . . .

    • В качестве примера составим еще один нумерованный список. HTML-код его выглядит так:
      Летние месяцы года:
    1. Июнь
    2. Июль
    3. Август

    На странице сайта это будет выглядеть так:

    Летние месяцы года:

    VIII. Август

    b.Маркированные списки создаются при помощи тега-контейнера . Тег имеет параметры:

    • TYPE - задает тип маркера, которым отмечается список. Этот параметр может принимать значения:
      • = disc - маркеры отображаются закрашенными кружками.
      • = circle - маркеры отображаются не закрашенными кружками.
      • = square - маркеры отображаются закрашенными квадратами.

    Параметр type можно употреблять как для всего списка, так и для каждого элемента в отдельности.

    • Парметр COMPACT - в настоящее время не рекомендуется к употреблению.

    Каждый элемент списка внутри этого тега помещается в тег-контейнер

  • . . .
    • . Закрывающий элемент тега LI может быть опущен.
    Кроме того есть недокументированная возможность выводить в качестве маркеров выводить всяческие симпатичные штучки.


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

    . . .
    . Внутри контейнера определяемый термин помечается тегом
    , а абзац с его определением - тегом
    . Для тегов DT и DD закрывающие элементы не обязательны. Пример такого списка.

    Здравствуйте, уважаемые друзья! Ну, что вы готовы продолжать изучение нелегкого с первого взгляда языка HTML. Думаю, что «да».

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

    Материал сегодняшней темы я посвятил очень важному элементу оформлению текстов — html теги форматирования текста.

    Совсем недавно мы познакомились с тем, как при создании сайта необходимо использовать . Cегодня мы подробно рассмотрим, каким образом нужно проводить форматирование и редактирование текста в html.

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

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

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

    Элементы html документа могут не содержать никакого текста, в этом случае применяется, например, тег перевода строк
    , без указания закрывающего тега. Либо элементы html документа, могут содержать атрибуты, которые указывают на какое-либо свойство текста, например, теги html font, указывают на размеры шрифта.

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

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

    HTML теги разделения на абзац и переноса строк

    HTML теги абзаца в тексте парные , но закрывающий тег не является обязательным. Для того, чтобы сделать в html новый абзац, достаточно поместить перед началом абзаца

    В этом случае абзацы текста будут разделены между собой пустой строкой.

    Тег принудительного перевода строк
    . После него текст начинается с новой строки.

    Посмотрим пример html кода форматирования текста по абзацам и выравнивания по сторонам.


    А вот так, этот html документ будет выглядеть в браузере

    HTML теги для выделения текста курсивом

    Эта группа тегов является парной.

    Теги применяются при логическом выделении названий: книги, статьи, цитирование.

    Тегами выделяются какие-либо определения. Тегами и , как правило, выделяются наиболее важные фрагменты в тексте.

    Пример html кода для выделения текстов курсивом

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

    Теги, отвечающие за жирный шрифт html

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

    В html документе это будет выглядеть следующим образом

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

    Теги, отвечающие за подчеркивание текста html

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

    Пример html кода для подчеркнутого текста

    Вот, как выглядит конечный результат в браузере.

    HTML теги для создания моноширного шрифта

    Напомню вам, что моноширный шрифт - это вид шрифта, у которого все знаки одинаковой ширины.

    Для форматирования в html документе моноширного шрифта применяются парные теги: ; и

    Рассмотрим форматирование моноширного текста на примере:

    И, соответственно в вашем браузере будет наблюдаться следующая картинка

    Теги для вывода индексов (верхних и нижних) в тексте

    Для вывода различных математических, физических или химических значений и формул, очень часто мы сталкиваемся с необходимостью указания индекса, например, формула воды H 2 O. И, если в редакторе Word нам в помощь панель инструментов, то при составлении текстового html документа потребуются теги форматирования.

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

    Например, код:

    Вывод на экране браузера

    Тег html font и его основные параметры

    Теги являются парными и в них заключаются основные параметры html шрифта текста:

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

    Размер шрифта : size. Указывается от одного до 7-ми в условных единицах. HTML шрифт текста по умолчанию равен 3.

    Цвет шрифта в html : color. По умолчанию всегда чёрный. Для ввода цвета шрифта в html документ, существует два варианта:

    • По имени (названию) цвета. Например: color=»blaсk» - черный цвет.
    • По коду (шестнадцатеричный код цвета). Код начинается с символа «#» и включает в себя шесть цифр, например: #000000 - черный цвет.

    Таблица цветов html и кодов, как пример, вот здесь: goo.gl/1i4vZ. Вы можете набрать в поисковике запрос «таблицы цветов html» и выбрать таблицу, которая вам понравится.

    Пример применения тега html font

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

    Как совместно использовать html теги форматирования текста

    Ну, вот, например, понадобилось вам создать текст жирным красным курсивом . Для этой операции мы должны попробовать применить теги форматирования: strong, font и em.

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

    Пример последовательности:

    • Текст выделяем красным
    • Помещаем текст в тег html курсива
    • И, наконец, всё заключаем в теги жирного шрифта

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

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

    Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.

    Табл. 1. Теги для форматирования текста
    Код HTML Описание Пример
    Текст Жирное начертание текста Текст
    Текст Курсивное начертание текста Текст
    Текст Верхний индекс e=mc 2
    Текст Нижний индекс H 2 O 
    Текст
    		 Текст пишется как есть, включая все пробелы Текст
    Текст Курсивный текст Текст
    Текст Жирное начертание текста Текст

    Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.

    Пример 1. Жирный курсивный текст

    Текст

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

    Результат данного примера показан на рис. 1.

    Рис. 1. Вид курсивного жирного начертания текста

    Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

    Пример 2. Создание нижнего индекса

    Текст

    Формула изумруда: Be3Al2(SiO3)6

    Результат данного примера показан на рис. 2.

    Рис. 2. Нижний индекс в тексте

    Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.

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

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

    Изменение стилей шрифтов

    Изменять стили написания шрифтов в HTML можно далеко не одним способом:

    ... и ... - выделяют текст полужирным шрифтом.

    ... и ... - выделяют текст курсивом .

    ... - выводит текст в верхнем индексе, например E = mc 2 .

    ... - выводит текст в нижнем индексе, например H 2 SO 4 .

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

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

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

    <тег style="text-decoration:underline">... - подчеркивает текст.

    <тег style="text-decoration:overline">... - надчеркивает текст.

    <тег style="text-decoration:line-through">... - зачеркивает текст.

    Пример изменения стилей шрифтов

    Изменение стилей шрифтов

    Жирный шрифт.Курсив.

    Жирный курсив.

    H2SO4 - формула серной кислоты написанная курсивом.

    Подчеркнутый параграф текста.

    Обычный текст,

    зачеркнутый жирный.

    Результат в браузере

    Style - это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CS S). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. есть. Общий синтаксис атрибута style следующий:

    <тег style="свойство CSS:значение">...

    Тег или что делать, когда нет нужных тегов

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

    Использование тега SPAN

    Обычный текст без изменений.

    Еще обычный текст.

    Подчеркнутый.

    Зачеркнутый.

    Результат в браузере

    Меняем имя (гарнитуру) шрифта

    Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:

    По умолчанию практически все браузеры используют шрифт "Times New Roman", а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

    <тег style="font-family:имя шрифта, семейство">...

    Если имя шрифта состоит из нескольких слов, то его необходимо закрывать в одинарные кавычки. Допускается указывать не одно, а несколько имен шрифтов через запятую и тогда, если первого шрифта на компьютере нет - будет использован второй, третий и т.д.

    Чтобы изменить шрифт на всей странице - достаточно указать атрибут style в теге . А если необходимо изменить шрифт для отдельной части текста, то заключите его втег и примените атрибут к нему.

    Пример изменения имени шрифтов

    Изменение имени шрифтов

    Это шрифт Arial, если его нет, то Verdana, а если

    и его нет, то любой другой из sans-serif.

    Это Comic Sans MS илилюбой cursive.

    Этоопять Arial, Verdana илилюбой sans-serif.

    А это Courier или любой monospace.

    Результат в браузере

    Меняем размер шрифта

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

    В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных - это пункты (pt), пиксели (px) и проценты (%). Итак:

      pt - Пункты. Один пункт равен 1/72 дюйма, а один дюйм - 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.

      px - Пиксели. Измеряется в пикселях монитора компьютера. Пиксель - это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.

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

    Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

    <тег style="font-size:размер">...

    Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице - достаточно указать атрибут style в теге . А если необходимо изменить шрифт для фрагмента текста, то заключите его втег и примените атрибут к нему.

    Пример изменения размера шрифтов

    Изменение размера шрифта

    Этот размер шрифта составляет 90% от размера

    в браузере по умолчанию.

    Этот размер составляет 90% уже от размера в теге BODY.

    Размер шрифта заголовка составляет 120% от размера в BODY.

    Это опять 90% от размера в браузере по умолчанию.

    Размер этого шрифта 15 пунктов.

    Результат в браузере

    Если для всего параграфа нужен шрифт Arial с размером в 80%, то надо написать так:

    Текст параграфа.

    Текст параграфа.

    Или вообще вот так.

    Текст параграфа.

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

    Текст параграфа.

    Гораздо проще. Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (" "), иначе применится только первый стиль, а остальные браузер проигнорирует.

    Цвет шрифта и цвет знакоместа

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

    Нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

    Как можно указывать цвет?

    Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

      Имя цвета - В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.

      HEX-код цвета - Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета - красный, зеленый и синий. HEX-код - это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

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

    Как изменить цвет текста?

    Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

    <тег style="color:имя цвета">... - указание цвета текста по имени.

    <тег style="color:#HEX-код">... - указание цвета текста по коду.

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

    Пример изменения цвета текста

    Изменение цвета текста

    Красный текст заголовка

    Синий текст параграфа.

    Зеленыйкурсив.

    Красныйтекст.

    Результат в браузере

    Как изменить цвет фона?

    Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

    <тег style="background:имя цвета">... - указание цвета фона по имени.

    <тег style="background:#HEX-код">... - указание цвета фона по коду.

    Пример изменения цвета фона

    Изменение цвета фона

    Заголовок.

    Параграф.

    Жирныйтекст.

    Обычныйтекст.

    Результат в браузере

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

    Теги выравнивания содержимого теста относительно страницы

    Для того, чтобы выровнять содержимое HTML-элемента, необходимо атрибуту style присвоить одно из следующих значений:

      text-align:center - Выравнивание каждой строки по центру элемента, например параграфа.

      text-align:left - Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).

      text-align:right - Каждая строка прижимается к правой стороне.

      text-align:justify - Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая - «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify, то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.

    Пример выравнивания содержимого тегов

    Выравнивание содержимого тегов

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

    Текстпараграфаприжимаетсявправо.

    Параграфпоцентру.

    Результат в браузере

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

    Теги, выделяюцие цитаты

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

    Тег

    или выделяем длинные цитаты

    Тег используется в HTML для выделения так называемых «длинных цитат», например одного или нескольких параграфов. Этот тег является блочным и может содержать блочные теги, но не может содержать встроенные. Кроме этого он добавляет такие же как у параграфов внешние поля сверху и снизу, но еще добавляет и боковые поля, благодаря чему происходит визуальное выделение цитируемого текста.

    Пример использования тега BLOCKQUOTE

    Использование тега BLOCKQUOTE

    Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:

    Очень часто тег BLOCKQUOTE используют не по прямому назначению -

    выделение цитируемого текста. А только ради боковых отступов, которые

    он создает. В принципе, подобное применение этого тега не противоречит

    синтаксису HTML, главное чтобы BLOCKQUOTE содержал блочные теги. Но все

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

    предназначен именно для выделения длинных цитат.

    Результат в браузере

    Тег или выделяем небольшие цитаты

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

    Пример выделения цитат

    Выделяем цитаты в тексте

    Для изучения языка гораздо важнее свободная любознательность,

    чем грозная необходимость. Августин Аврелий.

    Чему бы ты ни учился, ты учишься для себя. Петроний.

    Результат в браузере

    Тег
    или принудительный обрыв строки

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

    Тег
    тоже является встроенным (inline) элементом и пусть вас не запутает то, что он осуществляет перенос строки после себя, просто у него функция такая. Кроме этого, у элемента
    нет закрывающего тега, то есть он является пустым , потому что не может иметь содержимого.

    Пример использования тега BR

    Тег BR, обрывстроки

    Цель творчества - самоотдача,
    А не шумиха, не успех.

    Позорно, ничего не знача,
    Выть притчей на устах у всех.

    Б. Пастернак.

    Результат в браузере

    Зачем использовать тег
    , если можно просто написать текст в нескольких параграфах, он ведь тогда тоже будет указан на разных строках?» Все это так, но не забывайте, что тег

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

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


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

    Спецсимволы HTML

    С пецсимволы HTML - это условные кодовые обозначения, которые преобразуются браузером в различные текстовые знаки: буквы, цифры, знаки препинания, стрелки и так далее. Например, если мы напишем в HTML-странице вот такой код:

    То браузер нам его не покажет, а отобразит в параграфе знак плюс-минус:

    Спецсимволы HTML можно указывать двумя способами:

      Код символа - В этом случае ставится амперсанд (&), за ним решетка (#), потом идут цифры и в конце ставится точка с запятой (;), как показано выше.

      Мнемоника - Сначала также идет амперсанд, потом пишется ключевое слово и тоже в конце точка с запятой, например: ©

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

    Обратите особое внимание на то, что спецсимволы-мнемоники чувствительны к регистру, то есть © и © - не одно и то же.

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

    Для чего нужны спецсимволы HTML?

    Спецсимволы HTML используются для совершенно разных целей. Я думаю, вы уже догадались, что их применяют, когда нужно вставить на страницу символ, которого нет в стандартной компьютерной клавиатуре. Но это далеко не все. Кроме этого они указываются, когда кодировка страницы не поддерживает какие-то символы в «готовом» виде (к этому мы еще вернемся).

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

    Довольно часто спецсимволы используются для отображения на странице HTML-разметки. И правда, ведь если мы захотим отобразить на странице какой-нибудь тег, то просто так у нас это сделать не получится, так как браузер его скроет, посчитав за разметку. Поэтому придется использовать спецсимволы заменяющие угловые скобки тегов (< и >) и кавычки атрибутов (")

    Пример использования спецсимволов HTML

    Использование спецсимволов HTML

    Тег для создания параграфов.

    ® - Знак зарегистрированной торговой марки.

    При написании статьи лучший вариант - это использование

    между словами длинного тире и дефиса, а не только дефиса во всех случаях.

    Результат в браузере

    Создание горизонтальных линий в HTML

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

    Как нарисовать горизонтальную линию?

    Для создания горизонтальных линий в HTML существует специальный тег

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

    Пример рисования горизонтальных линий в HTML

    Рисуем горизонтальные линии

    Параграф.

    Параграф.

    Параграф.

    Результат в браузере

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

    Как изменить цвет, толщину и ширину горизонтальных линий?

    В старых версиях HTML у тега

    существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color, size и width, соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style. Общий синтаксис такой:

    - цвет линии (вернее ее фон).

    - толщина линии.

    - ширина линии.

    - а можно указать сразу все параметры, только не забываем про точку с запятой (;).

    Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#).

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

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

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

    . В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег
    внутри элемента
    , то как бы мы ни изменяли размеры окна браузера или разрешение монитора - ширина линии всегда будет составлять половину ширины блока
    .

    Пример изменения цвета, толщины и ширины горизонтальных линий.

    Меняем цвет, толщину и ширину горизонтальных линий.

    Результат в браузере

    Изменение положения горизонтальных линий

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

    атрибут style со значениями для выравнивания содержимого тегов .

    Как убрать рамку вокруг линии?

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

    Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style. А пишется это так:

    Группирование элементов

    Группирование элементов HTML-страницы является одним из самых мощных, удобных и одновременно простых инструментов для создания качественного сайта.

    Тег

    или сгруппированный блок

    До сих пор все изученные нами элементы HTML могли содержать только один из типов тегов - либо встроенные (inline, уровня строки), либо блочные (block). А теперь позвольте вам представить тег

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

    Пример использования тега DIV

    Использование тега DIV

    Менюсайта

    Дополнительные разделы

    Параграф.

    Параграф.

    Параграф.

    Параграф.

    Параграф.

    Параграф.

    Результат в браузере

    Тег или сгруппированная строка

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

    Пример использования тега SPAN

    Использование тега SPAN

    Обычный текст.

    Жирный.

    Курсив.

    Результат в браузере

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

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

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

    Заголовки

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

    Самый крупный заголовок
    Заголовок среднего размера
    Самый маленький заголовок