HTML, Excel, Word, SEOСайт от А до Я ⇒ Подготовка главной страницы сайта - файл index.html

Практические примеры

Примеры веб-программирования
· Интернет-платежи
· Авторизация клиентской оплаты
· Защита от уязвимости sql-injection
· Как пользоваться Google Analytics
· Электронная коммерция в Google Analytics
· Использование Google Analitycs для split тестирования
Сайт от А до Я
· С чего начать
· ПО для сайта
· Домен и хостинг
· Структура сайта
· Главная страница
· Фон страницы
· Анализ главной стр
· Регистрация сайта
· Веб-графика



Подготовка главной страницы сайта - файл index.html

Всю работу по рождению нового сайта мы уже проделали - сайт зарегистрирован и выложен в сети. Набрав в адресной строке браузера URL сайта, мы увидим содержимое главной страницы сайта (в нашем случае - это http://v-mire-givotnyh.ru). Пришло время заняться главной страницей, и привести ее в надлежащий вид. Напомним, что содержание нашей главной страницы пока следующее:



Заголовок страницы TITLE

Это очень важный тег, т.к. в нем отражается суть всей страницы, а в нашем случае, поскольку речь идет о главной странице ВСЕГО САЙТА, то заголовок должен, ни много, ни мало, - отражать суть ВСЕГО САЙТА! То что написано в тайтле страницы индексируется поисковиками в первую очередь и имеет очень важный вес при ранжировании страницы. Поэтому, в теге TITLE надо в краткой форме (50-60 символов) отразить всю суть содержимого страницы, при этом обязательно надо использовать ключевые слова и фразы, которые встречаются в тексте самой страницы.


Здесь сделаю небольшое отступление. Зачем делаются сайты? В общем-то, для разных целей. Но, возьмем "нормальную" цель создания сайта - сайты делаются для людей. Т.е., для нас с вами - рядовых пользователей Интернета. Сайты несут определенную информацию, которую мы ищем в сети. А как мы ищем информацию в подавляющем большинстве случаев? Конечно же, через запрос в поисковой системе (обычно Яндекс или Google). Поисковая система получает запрос и выдает результат поиска по многим сайтам. При этом на первые места ставятся сайты, информация на которых (по мнению поисковика) наиболее полно удовлетворяет введенному нами запросу. Задача вебмастера сделать свой сайт таким, чтобы по профилирующим запросам сайт находился как можно выше в выдаче поисковой системы. Чем выше сайт, тем больше посетителей мы получим на свой сайт (т.к., львиная доля посетителей на сайт приходит именно с поисковых систем). Такие вот профилирующие запросы и составляют ключевые слова и фразы, по которым наш сайт должен быть как можно выше в результатах поиска. Чтобы более полно уловить суть вышесказанного, рекомендую ознакомиться с разделом Оптимизация сайта.


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

Мета-теги

Далее, за тайтлом следует расположить основные мета-теги. Их не очень много, но пренебрегать ими не следует.



Итого мы вписали 4 мета-тега:

  1. определение кодировки html-страницы;
  2. заголовок страницы;
  3. описание страницы;
  4. ключевые слова страницы.

Внешний лист стилей

После мета-тегов, в самом конце тега HEAD пропишем следующую строку:

<link rel="stylesheet" href="style.css" type="text/css">

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


Теперь html-код главной страницы имеет следующий вид:



Оформление страницы

Пришло время подумать КАК будет выглядеть наш сайт. Вариантов множество. Остановимся на следующем:

Верстать сайт будем с помощью таблиц, причем ширину таблиц сделаем фиксированной, таким образом, мы обезопасим себя от всяких неприятных сюрпризов верстки при смене разрешения экрана монитора. Поскольку 15 дюймовые мониторы практически уже вышли из употребления, то за минимальный размер экрана монитора возьмем стандартное разрешение 17 дюймового монитора - 1024*768. Исходя из этого, максимальная ширина таблицы при верстке не должна превышать 1024 пиксела. Ниже приведен код страницы с комментариями, для наглядности различные части страницы окрашены в разные цвета.




А вот как выглядит страница в браузере IE 8:


Содержание страницы

Теперь самое время наполнить страницу содержимым (контентом). При подготовке информационного материала следует придерживаться следующих "правил":



В начало страницы



В начало страницы