Создаем свой первый сайт

на страницах сайта

www.electrosad.ru

Шаг третий

 

 

Немного о странице и тегах

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

Улучшить работу браузеров при просмотре вашего сайта и ускорить загрузку.

 

 

Заголовок файла

Если Вы посмотрите страницу сайта с помощью простейшего текстового редактора (Блокнот) то увидите в ее начале следующий текст:

 

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2. <html>

3. <head>

4. <meta http-equiv=Content-Type content="text/html; charset=windows-1251">

5. <meta http-equiv=Content-Language content=ru>

6. <meta http-equiv="expires" content="24 Jan 2008">

7. <meta name=robots content="index, follow">

8. <title>"Компьютер ...."</title>

9. <meta name="keywords" content="процессор генератор охлаждение электроника вентиляция корпус ПК">

10. <meta name=description content="Простой и сложный компьютер. Проблемы охлаждения ПК, ......">

11. <meta name=name content="Pupkin P.P.">

12. <meta name=copyright content="Pupkin P.P.">

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

14. <link rel="SHORTCUT ICON" href="Favicon.ico" type="image/x-icon">

15. </head>

16. <body ........

 

Строка 1 — объявление для браузеров, что в него загружается документ в HTML формате, присутствует в начале каждой страницы.

Строка 2 — открывающий тег начала HTML кода. Закрывающий тег </html> заканчивает страницу.

Далее идет заголовок страницы.

Строка 3 — тег открывает заголовок страницы.

Это очень важный для документа тег.

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

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

Строка 4 — тег определяющий кодировку содержимого страницы.

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

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

Строка 7 содержит указание роботу поисковой машины на индексирование прохождение дальше по ссылкам со страницы. Значение атрибута CONTENT мета-тега robots управляет способом индексации страницы поисковыми системами. Возможны следующие значения атрибута CONTENT:
ALL - разрешена индексация всех страниц;
NONE - запрещена индексация всех страниц;
INDEX - разрешена индексация индексных страниц;
NOINDEX - запрещена индексация индексных страниц;
FOLLOW - разрешено следовать по ссылкам данной страницы;
NOFOLLOW - запрещено следовать по ссылкам данной страницы.

Строка 8 — заголовок сайта, страницы используется поисковыми машинами для индексирования, а браузер выводит заголовок в название окна с открытой страницей.

Строка 9 содержит ключевые слова сайта, страницы которые индексируются поисковой машиной и используются когда Вы вводите в поисковую машину слова для поиска. Обратите внимание, ключевые слова нужны не для привлечения посетителей, а для поиска! Поэтому они должны наиболее полно отражать содержимое страницы. Не стремитесь применять слова с наибольшим индексом повторяемости, как советуют некоторые. Пришедший к Вам на сайт посетитель, видя, что введенное им поисковое слово не соответствует содержимому сайта может больше никогда не появиться у Вас на странице.

Строка 10 содержит краткое описание страницы. Это описание используется поисковыми машинами, каталогами как краткое содержание страницы. Поскольку некоторые поисковые машины не проверяют содержимое сайта, а используют только содержимое тега <meta name=description content= ...» рекомендую обратить особое внимание на краткую и понятную формулировку описания содержания страницы.

Строка 11 и 12 содержат имя автора и знак копирайта соответственно.

Строка 13 подключает к сайту внешнюю таблицу стилей расположенную в том же каталоге где находится страница.

Строка 14 показывает в браузере иконку (файл faviсon.ico), логотип сайта рядом с его названием. Иконка должна быть размером 16х16 точек 256 цветов. (можно иметь в файле две иконки 16х16 и 32х32 точек).

Файл иконки faviсon.ico рекомендуется подключаеть двумя строками вида:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

У меня как Вы видите подключено одной.

На этом заголовок оканчивается, а со строки 16 начинается тело страницы.

 

Таблица стилей

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

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

Таблица стилей это сведенные в один файл стилей настройки шрифтов, их цветовых оформлений для заголовков, абзацев, гиперссылок и других форматов текстов. Посмотрим для сравнения два фрагмента html файла.

 

Размер (одного) исходного файла в формате OpenOffice – 10886 байт, в формате MS Word – 65024 байт.

Размер html файла из Word – 11819 байт

Размер html файла из OpenOffice – 1949 байт

Фрагмент сохраненный из Word -> html

Тот же фрагмент сохранение из OpenOffice -> html

<body lang=RU style='tab-interval:2.0cm;line-break:strict'>

<div class=Section1>

<h1 style='margin-left:0cm;text-indent:0cm;tab-stops:0cm'><span style='mso-ansi-language:RU'>Время.<o:p></o:p></span></h1>

<p class=MsoBodyText><b><span style='mso-ansi-language:RU'>Закон тождественности.<o:p></o:p></span></b></p>

<p class=MsoBodyText><i><span style='mso-ansi-language:RU'>Любое действие вызывает равное ему противодействие.<o:p></o:p></span></i></p>

<p class=MsoBodyText><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

<p class=MsoBodyText><span style='mso-ansi-language:RU'>Сила: действие —

противодействие.<o:p></o:p></span></p>

<p class=MsoBodyText><span style='mso-ansi-language:RU'>Работа и энергия:

затраченная — приобретенная.<o:p></o:p></span></p>

<p class=MsoBodyText><span style='mso-ansi-language:RU'>Смысл перемещения во

времени имеет два <o:p></o:p></span></p>

<BODY LANG="en-US" LINK="#000080" VLINK="#800000" DIR="LTR">

<H1 LANG="ru-RU" CLASS="western">Время.</H1>

<P LANG="ru-RU"><B>Закон тождественности.</B></P>

<P LANG="ru-RU"><I>Любое действие вызывает равное ему противодействие.</I></P>

<P STYLE="font-style: normal"><BR><BR>

</P>

<P LANG="ru-RU" STYLE="font-style: normal">Сила: действие &mdash;

противодействие.</P>

<P LANG="ru-RU" STYLE="font-style: normal">Работа и энергия: затраченная &mdash; приобретенная.</P>

<P LANG="ru-RU" STYLE="font-style: normal">Смысл перемещения во времени имеет два

 

После введение в заголовок html файла тегов:

<meta http-equiv=Content-Language content=ru>

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

 

Которые подключают к файлу таблицу стилей и определяют язык файла — русский (отсутствующие в коде после конвертации), получаем html файл размером 1225 байт, файл таблицы стилей 378 байт — общим размером 1603 байт.

Это на 20% меньше чем исходный (табл.1 левый столбец).

И это в 27 строках кода!

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

 

В преобразования результате получен следующий код:

Файл Время.html

Файл таблицы стилей OO.css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1251">

<meta http-equiv=Content-Language content=ru>

<TITLE></TITLE>

<META NAME="GENERATOR" CONTENT="OpenOffice.org 2.3 (Win32)">

<META NAME="CREATED" CONTENT="0;0">

<META NAME="CHANGED" CONTENT="20080129;14421900">

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

 

</HEAD>

<BODY>

<H1 CLASS="western">Время.</H1>

<P><B>Закон тождественности.</B></P>

<P><I>Любое действие вызывает равное ему противодействие.</I></P>

<P><BR><BR></P>

<P>Сила: действие &mdash;противодействие.</P>

<P>Работа и энергия: затраченная &mdash; приобретенная.</P>

<P>Смысл перемещения во времени имеет два </P>

<OL>

<LI><P>Переместить предмет во времени &mdash; эквивалентен &mdash; переместить окружающее предмет пространство во времени.</P>

</OL>

<P>На первый взгляд, перемещение предмета во времени не имеет сложности даже в части энергетических затрат. Даже если для этого требуются

большие энергетические затраты. Т.е. это только вопрос энергетических возможностей, а значит и времени.</P>

<P>Но если рассмотреть эквивалентное решение</P>

</BODY>

</HTML>

P

{

margin-bottom: 0.21cm

}

H1

{

margin-bottom: 0.21cm;

page-break-after: avoid

}

H1.western

{

font-family: "Arial", sans-serif;

font-size: 16pt;

font-weight: bold }

H1.cjk

{

font-family: "Arial Unicode MS";

font-size: 16pt;

font-weight: bold

}

H1.ctl

{

font-family: "Tahoma";

font-size: 16pt;

font-weight: bold

}

 

Самым главным достоинством таблицы стилей, одну и ту же таблицу можно подключать к неограниченному числу страниц.

Как я уже писал подготовить таблицу стилей можно с помощью программы TopStyle Lite сайт которой находится по адресу: http://topstyle4.com/

 

Ну а тем у кого неограниченный трафик, уйма времени и нет отвращения к стандарту можно попытаться создать сайт из шаблонов. Как это предлагает http://www.ucoz.ru. Правда, на мой взгляд, из всего набора шаблонов имеется только несколько различающихся типов. Да и по отзыву некоторых авторов потрудиться придется изрядно.

 

  Часть 1 - Часть 2 - Часть 3 - Часть 4- Часть 5 - Часть 6 - Часть 7

 

Ссылки по статьям "создаем свой первый сайт":

февраль - март 2008 

Яндекс.Метрика

<<назад>> <<в начало>> <<на главную>>

Попасть прямо в разделы сайта можно здесь:

/Неизвестный процессор/Охлаждение ПК/Электроника для ПК/Linux/Проекты, идеи/Полезные советы/Разное/
/
Карта сайта/Скачать/Ссылки/Обои/Форум/Каталог/

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

Copyright © Sorokin A.D.

2002-2013