Сегодня: 27 марта 2017 года, понедельник

Поиск по сайту


Дизайнерский форум

Рассылка

Наша кнопка

Мы рекомендуем

Работа с тегами или 5 полезных мелочей для сайта

Теги: теория

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

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

<Тег>... текст </Тег> (упрощенный вариант), где <Тег> является «открывающим» тегом, а </Тег> - «закрывающим». Закрывающие и открывающие теги также называют контейнерами.

Или <Тег атрибут1="значение" атрибут2="значение".. атрибутN="значение">текст</Тег> (более сложный код с использованием атрибута – набор символов, соответствующий какому-либо английскому слову, дающему понять предназначение атрибута).


Практическая часть.

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

1. Мета-теги

С помощью этого вида тегов в HTML-код вводится информация о содержании сайта, его владельце, авторе дизайна. Данные отображаются в разделе «description», являющегося объектом пристального внимания поисковых роботов. Да, не стоит удивляться, именно на данные мета-тегов в первую очередь ориентируются роботы и на основании полученной информации отображают сайт в результатах поиска. Поэтому так важно добавлять в исходный код не только описание ресурса, но и ключевые слова: <meta name="keywords" content="дизайн, веб-дизайн, программирование" />

Также возможны и более сложные манипуляции. Например, для обеспечения регулярного просмотра поисковыми роботами вашей веб-страницы необходимо ввести следующий текст: <meta name="document-state" content="dynamic" />

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

Тег Описание
Owner владелец ресурса
Author автор и разработчик ресурса
Description краткое описание сайта
Copyright авторские права
Generator программное обеспечение, с помощью которого создавался сайт
Keywords ключевые слова



2. Добавление страницы в избранное

Чтобы пользователь одним нажатием на кнопку смог добавить понравившийся веб-ресурс в папку «Избранное» веб-браузера, примените следующий код:

<a href="javascript:window.external.AddFavorite ('http://адрес страницы', 'описание страницы')">Добавить в избранное</A>

3. Установка домашней страницы

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

<head>
<title>JavaScript. Установление страницы стартовой</title>
</head>
<body>
<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://); return false;">Сделать стартовой</a>
</body>
</html>


4. Перенаправление страниц

С перенаправлением пользователя по истечению определенного количества времени на другую страницу, вы наверняка не раз встречались при загрузке контента. Для использования на сайте подобного метода введите код: <meta http-equiv="refresh" content="время в секундах; url=адрес">.

5. Значок сайта

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

Код значка выглядит так: <link rel="shortcut icon" href="favicon.ico">

Теперь ваш сайт полностью готов. Удачной раскрутки!
Дизайн навигатор - Photoshop, уроки фотошоп, шаблоны сайтов