Новости звезд
Все об html описание и использование. Мета-тег Description - разбор с примерами. Пример использования мета тега кодировки charset
Мета тег HTML определяет информацию о веб странице. Теги группы meta называют мета тегами, а содержимое мета тега - метаданными. Метаданные указывают различную техническую информацию о документе, в основном для браузеров и поисковых систем и не видны пользователю на сайте.
Часто используются meta-теги: author , description , keywords , viewport , charset .
Мета теги находятся в области HTML документа (). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.
Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description , viewport , charset . Это будет плюсом для внутренней оптимизации сайта.
Синтаксис Примеры использования в HTML кодеОсновные мета теги
Ниже приведены несколько основных тегов с комментариями по применению и примерами использования.
Meta-тег descriptionКраткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи.
Пример использования мета тега description Meta-тег keywordsКлючевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords .
Пример заполнения мета тега keywords Meta-тег viewportЗадает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale - коэффициент масштабирования при первом открытии страницы.
Пример использования мета тега viewportМета тег для адаптивного сайта: указывает, что ширина вьюпорта подгоняется под размеры устройства:
Meta-тег charset
Кодировка веб страницы. Наиболее частое значение: "UTF-8".
Пример использования мета тега кодировки charset Meta тег refreshМета тег с атрибутом указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.
Пример использования meta http refresh Поддержка браузерами| Тег | |||||
| Да | Да | Да | Да | Да |
| charset |
character_set |
Указывает кодировку HTML документа. |
| content |
тестовое значение |
Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name . |
| http-equiv |
content-type |
Устанавливает HTTP заголовок для атрибута content . Сontent-type
- Кодировка. Устаревшее значение, в HTML5 используйте charset
(см. пример выше). |
| name |
application-name |
Имя мета тега. Как и http-equiv определяет суть мета тега. Application-name
- имя веб приложения, которое представляет страница. |
Давайте согласимся иметь разногласия.
Роберт Льюис Стивенсон.
Э то урок, в котором мы поговорим о том, что такое мета-теги , для чего и как они используются при и как их правильно заполнить.
К ак я уже говорил в , мета-теги располагаются в заголовке html-страницы, между тегами и, и никак не отображаются браузером (за исключением содержимого тега «title»). Тем не менее, мета-теги для сайта играют очень важную роль. Их добавление и оптимизация могут существенно помочь сайту в его жизни.
Р екомендую использовать только те метатеги, которые реально нужны для работы сайта. Не загромождай область «head» лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям. Если знать, что делаешь, то мета-теги будут только на пользу, если же сваливать сюда всё подряд, то можно получить трудно диагностируемые проблемы.
ервый мета-тег очень важен. Причём этот мета-тег одинаково важен и для поисковых систем, и для посетителей. Первые в ранжировании результатов поиска придают большое значение ключевым словам, которые содержатся в теге «title», вторые видят его содержимое в виде ссылки на сайт в тех же результатах поиска:
С одержимое этого же мета-тега отображается и в заголовке окна :
В HTML мета-тег «title» добавляется следующим образом:
Содержимое мета-тега «title»
Основное содержимое страницы
К роме того, как я уже сказал ранее, ключевые слова , которые ты добавишь в мета-тег «title», крайне положительно воспримутся поисковиками. Поэтому, заполняя этот тег, постарайся включить в него правильные ключевые слова. О них, кстати, и пойдёт речь дальше.
§ 2. Мета-тег «keywords» (ключевые слова)С начала вкратце о том, а что, собственно, такое эти самые «ключевые слова».
Т е слова, которые наиболее полно характеризуют содержимое html-страницы и будут для нее ключевыми. Это могут быть как отдельные слова, так и словосочетания, но они обязательно должны встречаться в тексте на странице. По ним поисковики определяют релевантность страницы тому или иному запросу.
Н апример, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «мета-тег keywords» и т.д.
Б олее подробно о ключевых словах, в частности, и об оптимизации сайта, вообще, мы поговорим в .
Ч тобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:
Перечень ключевых слов">
Содержимое мета-тега «title»
Основное содержимое страницы
К лючевые слова нужно добавлять по одному, через запятую, в единственном числе. Например, не «ключевые слова», а «ключевой, слово». К тому же, безответственное поведение вебмастеров, которые в целях получения более высоких позиций в поисковиках забивали мета-тег «keywords» не только ключевыми словами, но и многочисленными производными от них, привело к тому, что поисковые системы практически перестали обращать внимания на этот тег. В настоящее время правильно заполненный мета-тег «keywords» используется поисковиками лишь как один из многих факторов ранжирования (далеко не главный). Если же они видят перед собой «keywords», в который запихнули все возможные вариации ключевиков, то это становится для них первым сигналом о неблагонадёжности данной страницы.
§ 3. Мета-тег «description» (описание страницы)С ледующим важным мета-тегом является тег «description», в котором должно содержаться краткое описание страницы. Именно «краткое» и именно «описание страницы». Достаточно добавить одно-два небольших предложения, в которых указать о чём и для кого эта страница.
В ажной особенностью мета-тега «description» является то обстоятельство, что в случае его правильного заполнения поисковые системы именно на его основе формируют сниппет страницы в выдаче (краткое описание под ссылкой на страницу):
Е сли поисковикам не нравится то, как заполнен мета-тег «description», то сниппет формируется из кусочков фраз (надёрганных со всей страницы), которые релевантны запросу.
Т аким образом, правильный мета-тег «description» обязательно содержит ключевое слово (фразу) и коротко и точно описывает то, о чём и для кого страница. «Description» вместе с «title» образуют пару очень важных мета-тегов, от которых зависит то, перейдёт пользователь из поисковой выдачи на сайт или нет! Поэтому его, как и «title», нужно прописывать для каждой страницы!
H TML-код для создания мета-тега «description» будет следующим:
Содержимое мета-тега «description»">
Содержимое мета-тега «title»
Основное содержимое страницы
Т еперь перейдём к описанию основных технических мета-тегов из группы «HTTP-EQUIV» (HTTP-эквиваленты).
§ 4. Технические мета-тегиТ ехнические мета-теги, для сайта, значат очень много. С их помощью можно управлять отображением страницы, настройками индексирования и т.д. В этом уроке мы рассмотрим основные технические мета-теги.
- content-type
- тип документа и его кодировка. Этот мета-тег нужен для правильного отображения символов браузером.
Кодировок существует много. Большинство из них тебе даже никогда не встретится. Не говоря уже про то, что ты будешь их использовать сам. Современные браузеры определяют тип кодировки атоматически, но для большей уверенности можно указать его и самостоятельно. Если ты создаёшь html-документ в операционной системе Windows, языком которой является русский, то кодировка будет «windows-1251», а код для вставки мета-тега такой:Содержимое мета-тега «title»
Основное содержимое страницы
- content-language
- указание языка документа. Значение этого необязательного мета-тега используется как поисковыми роботами, так и web-серверами. Код для вставки:
Содержимое мета-тега «title»
Основное содержимое страницы
- refresh
- время (в секундах), через которое произойдет автоматическая перезагрузка документа или переход на другую html-страницу с заданным адресом (url). Например, чтобы производить атоматическую перезагрузку документа каждые 30 секунд, нужно вставить этот мета-тег так:
Содержимое мета-тега «title»
Основное содержимое страницы
А, чтобы, спустя 5 секунд, перейти на страницу по адресу http://www.сайт/, нужно записать так:
Содержимое мета-тега «title»
Основное содержимое страницы
- robots
- мета-тег, который отвечает за настройки индексирования страницы. У мета-тега «robots» могут быть следующие значения:
- index - страница индексируется;
- noindex - страница не индексируется;
- follow - гиперссылки на странице учитываются;
- nofollow - гиперссылки на странице не учитываются
- all - заменяет «index» и «follow», т.е. страница индексируется и гиперссылки на ней учитываются (действует по умолчанию);
- none - заменяет «noindex» и «nofollow», т.е. страница не индексируется и гиперссылки на ней не учитываются.
Код для вставки мета-тега «robots»:
Содержимое мета-тега «title»
Основное содержимое страницы
author и copyright - мета-теги, которые позволяют указать авторство и владельца контента на странице. HTML-код для вставки:
Содержимое мета-тега «title»
Основное содержимое страницы
Э то все метатеги в HTML, которые будут нужны новичку. Остальные специфичны и могут понадобиться тебе после того, как наберешься опыта и будешь точно знать, что делаешь. Из всех же вышеперечисленных мной настоятельно рекомендую использовать на каждой странице твоего сайта следующие:
Заголовок страницы
О стальные применяй по мере необходимости, но особо не заморачивайся. Помни, что мета-теги не сделают твой сайт интересным, они могут лишь помочь браузеру и web-серверу правильно отобразить страницы сайта, а поисковой системе их найти.
Н а этом раздел моего сайта окончательно закончен и дальше речь пойдёт о том, с чего начать раскрутку и продвижение своего сайта в Интернете. Там же парочка моих советов из личного опыта по оптимизации страниц сайта. Жми на «Дальше».
Без преувеличения можно сказать, что получение информации посредством Интернет-страниц(WEB-pages,html-pages) наиболее популярен.Для создания подобных документов необходимо иметь хотя бы общее представление о структуре html - файла.HTML (HyperText Makeup Language - язык создания гипертекстовых документов) - стандарный сервис сети Интернет, принятый WWW- консорциумом (W3C).На сегодняшний день последней является 4-я версия стандарта(подробнее - http://www.w3c.org/),переработанная и до полненая по сравнению с версией 3.2
Данный документ не является ни переводом какого-либо стандарта, ни сопутствующим комментарием, его цель - предоставление общих знаний о формате HTML и путях его создания.
2.1 Что такое HTML ?
На самом деле,если вы
откроете файл с расширением htm (или html) в любом текстовом редакторе, вы
увидите,что это не что иное, как... обычный текст, правда "испорченный"
какими-то словами в угловых скобках.Эти "ненужные" слова и представляют
собой средства разметки текста, которые понимает программа, работающая с
html-файлами(такую программу называют браузер).Похожий принцип построения
докуметов не нов, и встречается,например, в текстовом процессоре TeX.
То есть html - это обычный текст (информация) плюс управляющие элем
енты - тэги (удобное представление этой самой информации).
Одсюда
следует, что для того, чтобы создать гипертекст,нужно всего лишь знать
как, куда и в каком количестве "вносить" эти управляющие элементы.
2.2 Тэги.
Тэги - (от англ. tag) это средство,
позволяюшее браузеру предоста вить имеющуюся у вас информацию в виде,
удобном для восприятия, пои ска, чтения.Это в своем роде язык
программирования, определяющий,как будет выглядеть на экране следующая
строка, что нужно выделить, а что - наоборот - столь очевидно,что нет
необходимости это подчеркивать.
Тэгом считается определенное выражение,
помещенное в скобки вида . Весьма условно тэги можно разделить на
граничные и унарные.Унарные тэги представляют собой очевидные операции,
предписывающие браузеру совершить определенное действие по постижению
данного тэга при обра ботке html - документа.Пример - наиболее часто
употребляемый тэг
- переход на другую строку, весь следующий за
ним гипертекст браузер будет представлять, начиная с новой строки.Унарные
тэги не относятся к определенным участкам текста,а,скорее всего, к всей
последующей части документа.С граничными тегами сложнее, но надо
учитывать, что их много больше, нежели унарных.Граничные тэги определяют,
как будет выглядеть на экране пользователя часть текста,определеная этими
элементами, причем в начальном тэге можно указывать различные
параметры,опреде ленные данному тэгу, в конечном тэге эти параметры
присутствовать не должны(браузером они игнорируются).
- Здесь
- a - управляющее слово, показывающие, что текст вплоть до тега ,будет являться гипертекстовой ссылкой (то есть указнием браузеру просмотреть определенный html - документ при совершении управляющего действия (шелчка мыши) над "ограниченным" текстом)
- href="..." - параметр, определяющий,какой документ будет просмотрен (это может быть как файл на локальной или удаленной машинах,так и просто IP-адрес удаленной(с условием,что эта машина предоставляет http - сервис))
Некоторые параметры определены по умолчанию браузером, некоторые- пользователем браузера,но есть и такие,определять которые необходимо при создании страницы(пример - тотже параметр href тэга ).
Из всего вышесказанного следует, что,зная наиболее употребляемые тэги и их параметры, любой пользователь легко может редактировать и создавать гипертекст.При этом необходимо учитывать, что тэги могут включать в себя другие тэги, а так же необходимо иметь представление о структуре html - документов.
2.3 Структура HTML - документов. Структура гипертекстовых файлов черезвычайно проста.HTML-документ должен начинаться тэгом и заканчиваться .Информация вне этих тэгов игнорируется,либо выдается в нелицеприятном виде. Помимо этого все, огражденное тегами и делится на две части:
- заголовок
(меньшая часть)
Ограничивается тэгами и .Содежит, как правило мета-информацию,то есть дополнительные данные о странице, и заголовок страницы,выносимый как правило в заголовок окна браузера(в оконной графической системе).
Рассматривать представление мета-информации в данном тексте не имеет смысла,поскольку она не играет никакой роли при визуализации страницы.Заголовок определяется тэгами и ,эго присутствие необязательно,но желательно.Тэги и параметров не имеют.Эта часть документа может отсутствовать.
- основная часть документа
(тело)
Ограничивается тэгами и .Определяет то,что выводится в главном окне браузера.Здесь сосредотачивается вся несомая страницей информация.Так же может отсутствовать при использовании фреймов.- Тэг имеет следующие (необязательные) параметры:
- background="img.gif" - на задний план документа помещается изображение из файла img.gif
- bgcolor="RED" - цвет заднего плана, если преведущий параметр не определен(о представлении цвета в HTML смотрите следующую часть главы)
- text="BLACK" - цвет текста документа
- link="RED" - цвет гиперссылок документа
- vlink="WHITE" - цвет гиперссылок,уже посещенных пользователем
и другие.
Заголовок . . Тело документа. .
Области и не пересекаются.Любая информация вне них,но внутри -области инорируется, если не несет с собой управляющий характер(например, является java-скриптом).2.4 Представление цвета в HTML. Цвет в гипердокументах представляется в виде трех двухбайтных составляющих, записанных в шестнадцатиричной системе счисления.Каждая сотавляющаая определяет количество базисного цвета (по системе RGB) в данном.То есть вы можете в одном из параметров тэга вместо "WHITE" указать "#ffffff", где # указывает,что следующее число шестнадцатиричное, а каждая из световых компонент (напомню, здесь используется аддитивная модель цветопередачи) имеет значение ff, то есть участвует в формировании цвета полностью.Соответствено базисные цвета могут быть представлены: #ff0000 RED красный #00ff00 GREEN зеленй #0000ff BLUE синий Наиболее часто используемые сочетания трех компонент занесены в таблицу, имеющуюся в любом справочнике по HTML.Каждая из комбинаций имеет определенное название, распознаваемое браузером.Именно в таком виде определялись цвета в примере с тэгом .
2.5 Основные тэги HTML. В этой части главы будут кратко описаны наиболее часто встречаемые тэги гипертекстового языка.Более подробно они описаны в спецификации и разного рода справочной и учебной литературе.
- Тэги, оределяющие отображение текста
- размер шрифта - определяет следующий до закрывающего тэга текст как заголовок первого уровня (размер букв - максимально допустимый) - .. - .. размер букв изменяется пропорционально - .. в сторону допустимого минимума - .. - размер букв -минимально допустимый - максимально допустимый шрифт - минимально допустимый шрифт (Границы допустимости шрифтов задаются браузером, используя среднее значение, определяемое,как правило, пользователем)
- вид надписи - (italic
) наклонный шрифт
- (bold
) шрифт с выделением толщиной символов
- (underline
) подчеркнутый текст
- (teletype) a-la телетайпное сообщение
- мигающая надпись
Форматированный вывод текста (широко использует MS Word 8)
Кроме того существует тэг, определяющий тип шрифта, размер и цвет -- где
face - тип шрифта (не стоит увлекаться экзотическими шрифтами, поскольку они могут отсутствовать в системе клиента)
size - размер (варьируется от 1 до 6) в относительных единицах.Его также можно задавать относительно,например: size=+1 (увеличить текущее логическое значение на 1)
color - задает цвет шрифта. - форматирование текста (и других элементов) - выравнивание по центру - выравнивание по левой границе - выравнивание по правой границе
- Теги,отвечающие за формирование списков -
-
- - Эти два тэга определяют ограничиваемую область как
список с соответствующим отступом от левой границы
документа
-
- - определяет следующую информацию как новый элемент списка.
Выделяется различными фигурками (пунктами)
Списки могут быть вложенными, то есть элементом одного из списков может быть другой список. - Тэги общего характера
- Вставка в документ графической информации.(Злоупотребление этим тэгом снижает посещаемость страницы!)
- Параметры:
- src="имя-файла" - указание, какой файл будет включен. Современные нетекстовые браузеры опрерируют изображениями в форматах GIF89, JPEG, animated GIF, реже - PNG и XPM.
- alt="текстовой-аналог" - применяется в случае, если у клиента отключена загрузка графических изображений.
- width - Ширина изображения в пикселах (может не соответствовать реальному).
- height - Высота изображения в пикселах.
- - разделяющая части документа линия.Параметр width определяет длину как в абсолютных(пикселах), так и в относительных единицах(процентах).
- тэг начала новой строки.- code>.
- - тэг гипертекстовых
ссылок.Может адресовать документы в:
- глобальной сети
Параметр href содержит полный (с адресои ЭВМ, содержащий данный файл) путь и имя файла. - файл на данной машине
(необязательно html-документ)
Параметр href содержит путь к файлу относительно текущего каталога и имя файла. - метку в текущем документе
Параметр href содержит символ # и имя метки.Например, для метки 001 ссылка выглядит как .Метки задаются тем же тэгом, но с другим параметром , где name - имя метки (# - не используется!).Примет для 001 -
- глобальной сети
2.6 Работа с таблицами в HTML. Таблицы в HTML - это один из мощных инструментов представления информа ции.Они описываются набором тегов, почти каждый из которых имеет свои параметры.Рассмотрим основные:
- - определяет следующую информацию как новый элемент списка.
Выделяется различными фигурками (пунктами)
