Главная 20 Интернет новичку 20 Теги Font (Face, Size и Color), Blockquote и Pre

Теги Font (Face, Size и Color), Blockquote и Pre

>

Теги Font (Face, Size и Color), Blockquote и Pre — устаревшее форматирование текста в чистом HTML (без использования CSS)

Здравствуйте, уважаемые читатели блога Сегодня продолжим добавление новых материалов по тематике чистого Html. Чуть позже мы перейдем к изучению CSS, но сначала следует разобрать все нюансы, связанные с языком ХТМЛ. До этого уже успели рассмотреть директивы комментариев и doctype, а также теги H1-H6 (заголовки), Hr (линия), P (абзац), Br (перенос строки) и атрибуты Html тэгов (align, width).

Теги Font (Face, Size и Color), Blockquote и Pre

Мы узнали как добавить средствами таблицу, а также как вставить картинку в Html код через тег Img, создать веб форму или список через теги UL, OL, LI, DL, ну и еще, в свое время, мы успели затронуть основы популярной верстки сайтов. Сегодня продолжим рассмотрение различных тэгов, а именно Font, Blockquote, Pre, Strong, Em, B, I и других, позволяющих осуществлять форматирование текста.

Blockquote и Pre — форматирование в HTML

Раньше(еще до появления CSS) тег цитаты Blockquote в Html коде использовался довольно часто, потому что фрагмент текста, заключенный в него, получал горизонтальный отступ, что было не так-то просто сделать в то время в силу невозможности использования CSS свойств. Элемент Blockquote является парным и внутри него могут находиться как строчные теги, так и блочные (например, абзацы P).

Теги Font (Face, Size и Color), Blockquote и Pre



Сейчас тег Blockquote по-прежнему используется при оформлении текста, но внешний вид цитат в наше время уже обычно задается с помощью CSS свойств, прописанных именно для него в файле с таблицами стилей вашего шаблона оформления. Например, в случае моего блога, в style.css можно найти следующие строки:

Ну, а то, как будут при этом выглядеть цитататы, заключенные в Blockquote, вы можете увидеть в тексте статьи с интервью с руководителем биржи ГоГетЛинкс.

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

Сейчас этот тег Center не рекомендован валидатором WC3 для применения, но вполне может использоваться при форматирования, например, в почтовой рассылке на subscribe, когда стилевое оформление применять будет сложновато.

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

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



Т.е. все строки внутри элемента Pre будут считаться браузером неразрывными — как вы написали в коде, так и будет отображаться в браузере. Причем, в обозревателе для отображения участка текста, отформатированного с помощью тега Pre, будет использоваться моноширинный шрифт, типа Courier New или подобные ему.

Теги Font (Face, Size и Color), Blockquote и Pre

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

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

Font — работа с цветом и шрифтом текста в чистом Html

Помните, мы говорили про цвета в Html коде? Так вот, раньше в языке гипертекстовой разметки, когда еще и речи не шло про CSS, для задания цвета текста в документе использовали специальный атрибут Text, который прописывался в тэге Body (а через атрибут Bgcolor можно было задать цвет фона для документа):

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



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

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

Устаревшее форматирование — несколько слов, покрашенных в красный цвет с помощью Font и его атрибута Color. Но этот элемент может не только изменять цвет заключенного внутри него слова, но и изменять его размер (атрибут Size) и начертание шрифта (атрибут Face).

Задавая размер шрифта с помощью атрибута Size тега Font, вы могли использовать только семь значений (от 1 до 7 — это не пиксели, а относительные размеры). Причем, базовый размер шрифта, принятый в браузере по умолчанию, соответствовал значению Size равному трем, а шестерка соответствовала размеру заголовка H1, принятому в данном браузере. Все остальные цифры для Size отдавались на усмотрение данного конкретного обозревателя.

Теги Font (Face, Size и Color), Blockquote и Pre

Задаем тип шрифта в чистом Html с помощью Face для элемента Font

Теперь давайте рассмотрим задание начертания шрифта в чистом Html коде (без использования таблиц каскадных стилей) с помощью Face.



Вообще, все шрифты делятся на несколько больших групп:

  1. Серифные (serif) или же, по-другому, с засечками (засечки идут по верхнему и нижнему краю букв этих шрифтов). К этому типу относится Times New Roman.
  2. Рубленные(sans-serif) или, по-другому, без засечек, ярким представителем которых является Arial.
  3. Моноширинные (monospace) — все буквы в таких шрифтах имеют одинаковую ширину. Типичным представителем является все тот же Courier.

В любом браузере есть настройки, где можно задать используемый по умолчанию шрифт и его размер для каждого из приведенных выше семейств. Например, в Firefox добраться до этих настроек можно, выбрав из меню пункты и вкладки «Настройки» — «Настройки» — «Содержимое» — «Дополнительно»:

Теги Font (Face, Size и Color), Blockquote и Pre

Т.е. в любом браузере будет задан шрифт и его размер для любого из трех основных семейств (serif, sans-serif и monospace). Если в Html коде начертание и размер будут явно заданы, то они и будут использоваться браузером для отображения.

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

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



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

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

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

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

Теги Font (Face, Size и Color), Blockquote и Pre

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

Но тем не менее есть набор шрифтов, которые с большой долей вероятности найдутся на компьютерах с ОС Windows, а также и на Линуксе, и Макинтоше, и которые будут входить в базовую поставку всех этих операционных систем.



Теги Font (Face, Size и Color), Blockquote и Pre

Т.е. без особых проблем можно использовать на своем сайте Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS. Одно из возможных решений проблемы скудности шрифтов я подробно описал в статье Красивые шрифты для сайта в онлайн сервисе Google Font.

Strong, Em — тэги логических и визуальных выделений в тексте

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

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

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

Если вы помните, то не так уж давно оптимизаторам советовали выделять значимые места с ключевыми словами (как нужно выделять ключевые слова в тексте) тегами логического форматирования Strong и EM, которые для пользователя будут выглядеть как обычное выделение жирным и курсивом.



А вот для выделений без ключевых слов советовали использовать Html элементы «B» и «I», которые для пользователей опять же выглядели бы тоже как выделение жирным и курсивом, но уже поисковыми машинами не учитывались, т.к. они не являются тэгами логического форматирования.

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

Хотя, кто их знает, может быть мало-мальское влияние Strong и EM на оптимизацию текста еще осталось (читайте про продвижение сайтов своими силами).

Итак, кроме уже упомянутых «B» и «I» (выделение жирным и курсивом) к разряду визуального форматирования можно отнести уже рассмотренные в начале статьи Font, Pre, а также теги:

Теги Font (Face, Size и Color), Blockquote и Pre

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

  1. «Em» — логическое выделение важных фрагментов курсивом
  2. «Strong» — то же самое, но только выделяться будет жирным
  3. «Cite» — выделение цитат курсивом
  4. «Code» — предназначен для отображения разнообразных кодов моноширинным фонтом
  5. «Samp» — для выделения нескольких символов моноширинным фонтом
  6. «Abbr» — в атрибуте Title этого тэга прописывается расшифровка какой-либо аббревиатуры (типа, CSS или Html, которые читаются по буквам, а не как единое слово). Прописанные в Title слова будут всплывать при подведении к этой аббревиатуре курсора мыши.
  7. «Acronym» — то же самое, но используется для акронимов, т.е. сокращений, которые читаются не по буквам, а как слово (например, МКАД или Гаи)
  8. «Kbd» — используется для отображения моноширинным шрифтом текста, вводимого пользователем сайта с клавиатуры
  9. «Var» — используется для выделения курсивом переменных в каком-либо коде
  10. «Del» — выделение перечеркиванием, когда требуется показать, что какой-то фрагмент был удален после опубликования Html документа
  11. «Ins» — выделение подчеркиванием, когда нужно показать, что какой-то кусок был вставлен после публикации Html документа



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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

Font-face штука мошная и достойная внимания, сайт так и изменяется сразу на глазах.

Помоему заголовок перегружен, а так как всегда — супер инфо

Отличный пост, как всегда! Буду использовать как шпаргалку)

Здравствуйте. У меня вопрос: когда я пишу описание товара в админке, а потом проверяю на сайте текст — вижу, что текст обрезан (//bp.kh.ua/katalog/product/view/188/1975.html)

Где и как мне нужно отредактировать ширину поля? — к сожалению не запомнила как я это делала, создатели магазина когда то рассказывали, но сейчас связь с ними сложно установить.Помню только, что нажимала кнопочку HTML, а где там цифры меняла. не помню. Подскажите, пожалуйста))) Заранее БОЛЬШОЕ СПАСИБО. )))

* Нажимая на кнопку «Добавить комментарий» или «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

О admin

x

Check Also

Что такое Емайл (E-mail) и почему это называют электронной почтой, создание, продвижение и заработок на сайте

> Что такое Емайл (E-mail) и почему это называют электронной почтой Здравствуйте, уважаемые читатели блога ...

Что такое дроп, дропнутый или освобождающийся домен, создание, продвижение и заработок на сайте

> Что такое дроп, дропнутый или освобождающийся домен Здравствуйте, уважаемые читатели блога Термин Дроп происходит ...

Что такое домены, хостинг, DNS сервера и IP адреса, создание, продвижение и заработок на сайте

> Что такое домены, хостинг, DNS сервера и IP адреса Домены, Ip адреса и связывающие ...

Что такое девайс и чем он отличается от гаджета, создание, продвижение и заработок на сайте

> Что такое девайс и чем он отличается от гаджета Здравствуйте, уважаемые читатели блога В ...

Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок на своем интернет-дневнике, создание, продвижение и заработок на сайте

> Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок ...

Что такое анонимайзеры (Хамелеон, Spools) или как скрыть IP адрес для входа в ВКонтакте, Одноклассники, Ютуб и другие сайты, создание, продвижение и заработок на сайте

> Что такое анонимайзеры (Хамелеон, Spools) или как скрыть IP адрес для входа в ВКонтакте, ...

Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта, создание, продвижение и заработок на сайте

> Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта Здравствуйте, уважаемые ...

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

> Что такое RSS, где скачать иконки и какая читалка самая лучшая Здравствуйте, уважаемые читатели ...

Что такое Rookee и как продвигать сайт в этой системе, создание, продвижение и заработок на сайте

> Что такое Rookee и как продвигать сайт в этой системе? Здравствуйте, уважаемые читатели блога ...

Что такое Joomla, создание, продвижение и заработок на сайте

> Что такое Joomla Свое изучение сайтостроения я начал именно с выяснения вопроса: Что такое ...

Что такое ICQ, как его установить и пользоваться, создание, продвижение и заработок на сайте

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

Что такое DNS и как ДНС-сервера обеспечивают работу интернета, создание, продвижение и заработок на сайте

> Что такое DNS и как ДНС-сервера обеспечивают работу интернета Здравствуйте, уважаемые читатели блога О ...

Что такое cookie и как почистить куки в современных браузерах, создание, продвижение и заработок на сайте

> Что такое cookie и как почистить куки в современных браузерах Здравствуйте, уважаемые читатели блога ...

Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP, создание, продвижение и заработок на сайте

> Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и ...

Что мешает SEO-продвижению вашего сайта и как это исправить

> Что мешает SEO-продвижению вашего сайта и как это исправить — 10 основных ошибок и ...

Что значит смайлик написанный символами

> Что значит смайлик написанный символами — значения обозначений и расшифровка текстовых смайлов Здравствуйте, уважаемые ...

Что главное в блоге? Фото, создание, продвижение и заработок на сайте

> Что главное в блоге? Фото! Здравствуйте, уважаемые читатели блога Итак, у вас есть блог, ...

Целесообразно ли автоматизировать SEO продвижение, создание, продвижение и заработок на сайте

> Интересно ваше мнение. Здравствуйте, уважаемые читатели блога Целесообразно ли автоматизировать SEO продвижение? Я решил ...

Хроники первого года «бессылочной» эпопеи Яндекса, создание, продвижение и заработок на сайте

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

Хостинг и все что с ним связано, работа с cPanel, создание, продвижение и заработок на сайте

> Хостинг и все что с ним связано, работа с cPanel Хотел в этом посте ...

Хостинг и VPS в InDeepSky

> Хостинг и VPS в InDeepSky — гарантированный аптайм 99,98%, установка CMS в один клик, ...

Хороший и стабильный хостинг от WebStix

> Хороший и стабильный хостинг от WebStix — без ограничений на количество сайтов, с SSD ...

Хлебные крошки в Вордпресс без плагинов, создание, продвижение и заработок на сайте

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

Хлебные крошки в WordPress средствами плагина Breadcrumb NavXT (усиливаем перелинковку), создание, продвижение и заработок на сайте

> Хлебные крошки в WordPress средствами плагина Breadcrumb NavXT (усиливаем перелинковку) Здравствуйте, уважаемые читатели блога ...

Рейтинг@Mail.ru