Слепое следование рекомендациям приносит пользу примерно с той же вероятностью, с какой блондинка может встретиться с динозавром – 50/50, то ли встретит, то ли нет. Чтобы не повстречать динозавра, нужно включать мозг даже тогда, когда, казалось бы, все расписано по пунктам. Профессионал тем и отличается от ламера, что на слова « это сказано в инструкции » отвечает вопросом « а почему именно так? ».
Например, использовать вместо нужно вовсе не потому что « Яндекс так больше любит ». Тег в семантике разметки означает именно bold – жирное начертание шрифта. А вот – это смысловой акцент, тег сообщает роботу, что автор хотел подчеркнуть что-то важное.
Или такие простые теги:
И
.
- Заключение фрагмента текста в теги образует логическую единицу текста – абзац (paragraph). В тексте конец параграфа выглядит как обрыв строки (нажатие на Enter) – следующий параграф начинается с новой строки.
- Тег
– это конкретный символ «обрыв строки», он переносит следующий символ на новую строку. Но он никак не влияет на логическую структуру.
А со стороны результат действия обоих тегов может выглядеть одинаково . Опытный сеошник понимает, к чему все это – ключевые слова внутри одного параграфа рассматриваются вместе, а разделение между двумя параграфами нарушает связь между ними.
Очень наглядно разницу между тегами можно увидеть в любимом Ворде:
И кстати, этим можно пользоваться. Чтобы завершить абзац, вы нажимаете Enter. Чтобы оборвать строку, надо нажать Shift+Enter.
Об одном заклинании … простите, про один интересный тег пойдет речь в этой статье.
Этот тег позволяет вставлять заимствованный текст с указанием источника. Таким образом вы можете использовать чужие слова без последствий для оценки уникальности и добавлять тексту авторитетности.
Семантическое ядро определяет не характеристику, а смысловое значение текста. Подбирая ключевые слова, важно думать не только о релевантности, но и о технической возможности поисковой системы отнести текст к той или иной группе документов по его смысловому значению.
Семантика – это не только единицы языка в лингвистике, но и значения конструкций в программировании. Это гораздо важнее с точки зрения SEO, ведь поисковые системы – это программы, работающие в полном соответствии с реализованными алгоритмами.
Например: семантика HTML-документа определяется значением и иерархией его элементов. Так, тег определяет область данных HTML-документа, состоящую из описания (тег
) и содержания (тег ) документа. Уберите тег , и семантика документа будет нарушена.Ссылочное ранжирование до сих пор играет немаловажную роль в продвижении сайта, но его значение лежит именно в плоскости цитирования, непонимание которого и привело к санкциям со стороны поисковых систем.
Индекс цитирования (или ИЦ) - принятая в научном мире мера «значимости » трудов какого-либо учёного. Величина индекса определяется количеством ссылок на этот труд (или фамилию) в других источниках.
Есть и другие варианты определения смыслового значения (семантики) цитаты, где могут фигурировать теги
Подведём итоги
- Копирайтерам и сеошникам важно не только слепо следовать советам для веб-мастеров, но и понимать суть предлагаемых решений, определённых спецификациями.
- Семантика – это не только единицы языка в лингвистике, но и значения конструкций в программировании, что гораздо важнее в разрезе продвижения сайтов в поисковых системах, которые являются программами.
- Ссылочное ранжирование крепко завязано на смысловом значении цитирования.
- Новинкой HTML5 является расширение семантической составляющей HTML-документа вообще и тега
в частности - используйте генератор правильного HTML-кода цитат.
В данном уроке мы с вами поговорим о выделении цитат в тексте и о принудительном обрыве строки. В принципе, рассмотренные здесь теги не так часто используются в HTML-страницах, но все же иногда без них не обойтись. Итак, поехали.
Тег
или выделяем длинные цитаты
Тег используется в HTML для выделения так называемых «длинных цитат», например одного или нескольких параграфов. Этот тег является блочным и может содержать блочные теги, но не может содержать встроенные . Кроме этого он добавляет такие же как у параграфов внешние поля сверху и снизу, но еще добавляет и боковые поля, благодаря чему происходит визуальное выделение цитируемого текста.
Пример использования тега BLOCKQUOTE
Очень часто тег BLOCKQUOTE используют не по прямому назначению - выделение цитируемого текста. А только ради боковых отступов, которые он создает. В принципе, подобное применение этого тега не противоречит синтаксису HTML, главное чтобы BLOCKQUOTE содержал блочные теги. Но все же лучше подобным образом его не использовать, так как BLOCKQUOTE предназначен именно для выделения длинных цитат.
Результат в браузере
Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:
Очень часто тег BLOCKQUOTE используют не по прямому назначению - выделение цитируемого текста. А только ради боковых отступов, которые он создает. В принципе, подобное применение этого тега не противоречит синтаксису HTML, главное чтобы BLOCKQUOTE содержал блочные теги. Но все же лучше подобным образом его не использовать, так как BLOCKQUOTE предназначен именно для выделения длинных цитат.
Тег
или выделяем небольшие цитаты
А вот тег
...
используется для обозначения небольших цитат или слов в переносном смысле. Весь текст, который находится между тегов этого элемента, он ставит в кавычки. Кстати,
- это самый обычный встроенный (уровня строки)
тег, который может содержать только встроенные теги.
Пример выделения цитат
Для изучения языка гораздо важнее свободная любознательность,
чем грозная необходимость.
Августин Аврелий.
Чему бы ты ни учился, ты учишься для себя.
Петроний.
Результат в браузере
Для изучения языка гораздо важнее свободная любознательность, чем грозная необходимость. Августин Аврелий.
Чему бы ты ни учился, ты учишься для себя. Петроний.
Тег
или принудительный обрыв строки
Иногда требуется, чтобы строка текста не продолжалась во всю ширину доступного пространства, а оборвалась в нужном нам месте и продолжилась на следующей строке. Но как вы помните - браузеры игнорируют простые переводы строк в HTML-коде, как будто их нет. В таких случаях нам поможет тег
, который и осуществляет принудительный обрыв строки в месте его установки.
Тег
тоже является встроенным (inline) элементом
и пусть вас не запутает то, что он осуществляет перенос строки после себя, просто у него функция такая. Кроме этого, у элемента
нет закрывающего тега, то есть он является пустым
, потому что не может иметь содержимого.
Пример использования тега BR
Цель творчества - самоотдача,
А не шумиха, не успех.
Позорно, ничего не знача,
Выть притчей на устах у всех.
Б. Пастернак.
Результат в браузере
Цель творчества - самоотдача,
А не шумиха, не успех.
Позорно, ничего не знача,
Выть притчей на устах у всех.
Б. Пастернак.
Вы вполне можете спросить: «А зачем мне использовать тег
, если я могу просто написать текст в нескольких параграфах, он ведь тогда тоже будет указан на разных строках?» Все это так, но не забывайте, что тег
Создает сверху и снизу поля пустого пространства, а тег
этого не делает. Кроме этого параграфы на то и существуют, чтобы в каждом из них содержались осмысленные и законченные выражения, а не куски текста.
Кстати, довольно часто на сайтах можно увидеть, что
используют лишь для того, чтобы создать несколько пустых строк. Да, если его указать подряд несколько раз (
...), то можно сделать вертикальные отступы любых размеров. Но, хотя это и не противоречит синтаксису HTML, я не рекомендую вам так поступать, так как данный тег для этого не предназначен.
Домашнее задание.
- Сделайте так, чтобы фон страницы был черного цвета, а текст - белого.
- Создайте заголовок статьи и двух ее разделов. Укажите для них шрифт Verdana и пусть второй подзаголовок располагается по центру страницы.
- Напишите под первым и вторым заголовком по параграфу, а под третьим - цитату, состоящую из двух параграфов.
- Выделите в первом параграфе две цитаты и пусть одна будет написана жирным шрифтом, а вторая - курсивом.
- Сделайте в самом последнем параграфе пять обрывов строки и пусть текст в нем располагается по центру страницы.
На сегодняшний день являются неотъемлемой частью любого мало-мальски серьезного интернет проекта, да и одностраничные сайтики нет-нет да и вставят что нибудь этакое в форме .
Вставить, это мы все горазды, у многих же возникает проблема с оформлением цитат. В первую очередь цель цитирования — это привлечь внимание посетителя впечатав умную мысль, свою или чужую.
Кто-то обходится просто наклонным текстом, кто-то использует готовые шаблоны. Распространенный вид цитаты – это наклонный текст или фон в виде кавычки. Тут уж все зависит от неуемной фантазии «человеков».
В WordPress цитаты оформляются автоматом и обусловлены стилем Вашего шаблона. Или же с помощью отличного плагина: . Если у вас тематический блог и вы хотите подчеркнуть свою мысль в статье, то такое выделение слов c помощью этого плагина несомненно привлечет внимание читателя, да и смотрится это красиво.
С WordPress все понятно, нас интересует как оформить цитату на HTML-странице если нет возможности использования сторонних продуктов. Если вам не хочется возиться с картинками, то вполне можно обойтись оформлением с помошью CSS
: сделать рамочку или просто отделить текст пунктирной границей.
Давайте наконец рассмотрим несколько примеров, как оформить цитату с помощью CSS
кода.
Пример 1:
Цвет текста необязательно делать ярче, потому как 2 границы – верхняя и нижняя шириной в 3 пикселя заметно выделят цитату.
CSS код:
| blockquote { border: solid #999; border- width: 3px 0 ; margin: 10px 40px; padding: 15px; font- size: 14px; color: #999; } |
blockquote { border:solid #999; border-width:3px 0; margin:10px 40px; padding:15px; font-size:14px; color:#999; }
Изгаляясь над кодом стиля, можно экспериментировать с внешним видом до бесконечности.
Пример 2:
Блок сразу заметен в тексте благодаря яркой границе слева.
CSS код:
| blockquote { border: dotted #666 1px; border- left: solid #ff5a00 5px; margin: 10px 40px; padding: 15px; color: #333; font- style: italic; font- size: 14px; background: #fcfcfc; } |
blockquote { border: dotted #666 1px; border-left:solid #ff5a00 5px; margin:10px 40px; padding:15px; color:#333; font-style:italic; font-size:14px; background:#fcfcfc; }
Такой вариант хорошо подойдет не только для цитат, но и например, для выделения кода, ссылок для скачивания, и т.д...
Пример 3:
Рискованный вариант. Прекрасно подойдет для случаев, когда цитата должна обязательно привлечь внимание читателя, призывая его что-то делать, или наборот не делать.
CSS код:
| blockquote { border: 3px 0 solid #000; margin: 10px 40px; } blockquote p{ border: 10px 0 solid #eee; margin: 0 ; padding: 15px; color: #333333; font: 16px "Arial Black" ; } |
blockquote { border: 3px 0 solid #000; margin: 10px 40px; } blockquote p{ border: 10px 0 solid #eee; margin: 0; padding: 15px; color: #333333; font:16px "Arial Black"; }
Пример 4:
Довольно строгий, аскетичный вариант оформления. Подойдет для сайтов, где текст является основной частью дизайна, нежели красивые рисунки.
Раскаяться никогда не поздно, а согрешить можно и опоздать.
CSS код:
| blockquote { border- left: solid 3px #333; padding- left: 1px; margin: 10px 40px; } blockquote p{ border- left: solid #666 1px; margin: 0 ; padding: 15px; color: #333; font: 16px "Times New Roman" ; } |
blockquote { border-left: solid 3px #333; padding-left:1px; margin: 10px 40px; } blockquote p{ border-left: solid #666 1px; margin:0; padding:15px; color:#333; font:16px "Times New Roman"; }
Пример 5:
Ну уж совсем простенький способ оформления цитаты, только благодаря наклонному стилю шрифта Georgia , тексту придается некая стилизация и его наверняка захочется прочесть.
” Бог у всех один – провайдеры разные.“
CSS код:
| blockquote { margin: 10px 40px; padding: 15px; font: italic 14px Georgia; border: solid 1px #eee } |
blockquote { margin:10px 40px; padding:15px; font: italic 14px Georgia; border: solid 1px #eee }
Посмотрели примеры, теперь делайте выбор и вперед. Код CSS соответственно добавьте в свой файл стилей .css При написании какой-нибудь нетленной мысли, просто обнесите ее тегами blockquote и довольные собой любуйтесь результатом.
Расскажите, а как вы оформляете цитаты в блоге, или вам достаточно того, как они были оформлены изначально в шаблоне вашей темы?
С Уважением, Андрей
Цель
Представить (в типовом варианте - длинную) цитату, как блок цитирования (в противоположность коротким цитатам, вставленным в текст абзаца).
Типичное отображение
Как отдельный абзац (или последовательность абзацев). Часто с отступом (возможным как слева, так и справа). Часто - шрифтом, отличным от простого текста, обычно - курсивом.
Основной синтаксис
текст цитаты
Возможные атрибуты
Допустимый контекст
Содержимое
Примеры
The original context of the saying O tempora, o mores is the following:
O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum.
Cicero, Oratio in Catilinam Prima, 2
Примечания
Цитирование - это точное копирование чьих-то слов. Если Вы излагаете чью-то речь собственными словами - это уже не цитирование, и должно быть представлено как простой текст (без какой-либо специальной разметки).
Когда описывается человеко-машинное взаимодействие , используйте специальные элементы CODE , SAMP и KBD для цитирования программного кода, листингов программ или ввода с клавиатуры.
Не используйте BLOCKQUOTE, чтобы получить отступы . Броузер может и не показывать их при представлении текста.
Хорош тоном считается специфицировать источник цитирования, иногда это даже требуется законом (копирайт). Поэтому, если это возможно, обеспечьте связь к источнику документа на Web в добавление к спецификации источника в тексте.
Сам элемент BLOCKQUOTE не предоставляет структурированный способ задания источника информации. В представленном выше примере приведен один из способов, как можно это сделает.
Если Вам не нравится шрифт, используемый броузером для представления содержимого элемента BLOCKQUOTE, чтобы изменить его можно использовать таблицы стиля . Например, для усиления используйте I элемент , помня при этом, что как текстовый элемент , он не разрешает перевод абзаца в пределах BLOCKQUOTE, так что Вы должны использовать отдельный элемент I в каждом абзаце.
При цитировании Вам может понадобиться удалить некоторые слова из содержимого цитаты, тогда Вы должны четко обозначить опущенное (нотация вида - и... и - наиболее распространенный способ сделать это). Совершенно неуместно в таких случаях избирательно приводить чьи-то цитаты, так, что кому-то может показаться, что сказано нечто совершенно отличное от того, что в действительности имелось в виду, может быть даже совсем противоположное. Когда Вам требуется добавить к цитируемому тексту разъясняющие слова в качестве пояснений, наиболее применимо добавление таких разъяснений другим шрифтом, например, курсивом . Также Вы должны четко показать, что пояснения не являются частью оригинала, и лучший способ сделать это - разместить свой текст в квадратных скобках.
Для создания цитат в языке HTML используются два элемента: блочный элемент <Ыockquote>
и строчный элемент
.
Тег <Ыockquote>
используется для отображения длинных цитат, занимающих целый абзац и отображает его с отступами от левого и правого краев. Этот тег позволяет расположить текст компактно в центре страницы. Внутри него могут присутствовать другие элементы форматирования текста.
Элемент
используется для коротких цитат, являющихся частью текущего абзаца. Как правило, браузеры заключают содержимое элемента
в кавычки. Обычно в состав цитаты не входят символы разрыва строки, и цитата считается элементом текстового уровня.
Для обоих элементов может быть указан атрибут CITE , значением которого является URL-aдpec цитируемоrо фраrмента.
Пример: длинные и короткие цитаты
- Попробуй сам »
можно легко определить с помощью вертикального отвеса.
Как сказал А. А. Милн, некоторые люди говорят с животными.
Зенит — это наивысшая для наблюдателя точка на небосклоне
в вертикальном направлении, которую, как известно,
можно легко определить с помощью вертикального отвеса.
Как сказал А. А. Милн, некоторые люди говорят с животными.
Тег
Аббревиатура — принятое на письме сокращение слов или слово, составленное из нескольких частей друrих слов (ВУЗ, НИИ, исполком и др.). При употреблении в тексте какого-либо акронима или аббревиатуры следует воспользоваться тегом . С помощью атрибута «title» можно задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, определенный в атрибуте «title». Чтобы отличать аббревиатуры от обычноro текста, они подчеркиваются пунктирной линией.
Пример: Аббревиатура
- Попробуй сам »
NАSА проводит несколько невероятных космических экспериментов.
Пp. Стивен Хокинг — физик-теоретик и космолог.
NАSА проводит несколько невероятных
космических экспериментов.
Пp. Стивен Хокинг — физик-теоретик и космолог.
Тег
Тег используется для указания контактной информации, адреса и телефонов. Он может содержать почтовый адрес, а также адрес электронной почты или номер телефона. Большинство браузеров отображают содержимое элемента шрифтом с курсивным начертанием.Пример: Адрес
- Попробуй сам »
HTML- Учебный курс
Белый Максим Максимович
Северо-Западный институт технологий
Теплогорского государственного университета технологии и дизайна
[email protected]
Теги и
Тег используется при оформлении ссылки на какой-то первоисточник, например на книгу, веб-сайт или научную работу, для обозначения упоминаемого источника. Часто используется в списках литературы, при указании aвторских прав или упоминании имени владельца ресурса. Браузеры отображают содержимое элемента шрифтом с курсивным начертанием.
Тег используется для обозначения определения какого-либо нового термина. Объяснение нового термина (научного концепта или узкопрофильного названия) в тексте называется «определением». Элемент можно использовать, если новый термин встречается в тексте впервые и тут же дается его определение. Браузер отображает такой текст курсивом.
Пример: Источники и определения
- Попробуй сам »
на просмотр фильма Красный дракон Стивена Хопкинса.
Импульс тела — векторная величина, направление её вектора совпадает
с направлением скорости
Только за первый месяц было продано более десяти тысяч билетов
на просмотр фильма Красный дракон Стивена Хопкинса.
Импульс тела — векторная величина, направление её вектора совпадает
с направлением скорости
Тег
Тег управляет направлением отображаемого текста. Имеет обязательный атрибут dir, который принимает значения ltr (слева направо) и rtl (справа налево).
Пример: Направление текста
- Попробуй сам »
Если Ваш браузер поддерживает двунаправленный алгоритм (bdo),
следующая строка будет написана справа налево (rtl)
Этот текст написан справа налево.
Задачи
Итоговое задание
На этом уроке вы познакомились с еще с некоторыми логическими элементами форматирования, которые определяют не внешний вид текста, а его тип, и в зависимости от которого браузер применяет тот или иной вид внешнего форматирования. Все элементы, рассмотренные выше, являются контейнерами и требуют наличия закрывающего тега. Некоторые из этих элементов могут вообще не изменять отображение текста, поэтому при их рассмотрении был сделан упор на то, как они определяют значение текста, а не на то, как они его форматируют.
Пришло время повторить изученное и выполнить четыре несложных задания:
Короткая цитата
- Реши сам »
Используя логический элемент HTML, добавьте кавычки вокруг слова: "Теория".
Теория предсказывает новые явления и новые законы.
Теория
предсказывает новые явления и новые законы.
Длинная цитата
- Реши сам »
Поместите нижеприведенный текст внутрь такого элемента, который сделает его цитатой с отступом слева. Задайте URL ресурса, откуда взята эта цитата: "http://www.world.org".
