![[Nevor.ru]](../images/logo.jpg){kind=logo}
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
CSS и PHP в структуре HTML. DOCTYPE.редакция 04.07.09 Структура документа HTML имеет следующий вид:  Во главе документа стоит DOCTYPE. Немного о том, для чего он нужен: DOCTYPE объявляет интернет-обозревателю тип документа, который предстоит обработать и определяет правила этой обработки. Не объявляя DOCTYPE, вы подвергаете свой html-документ (сайт) полной анархии со стороны обозревателей. Каждая программа будет трактовать написанное как ей вздумается, а это чревато большими проблемами. В HTML 4.01 присутствует три вида DOCTYPE. Выглядят они так (извините что мелко, иначе не уместить): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Также можно встретить такие неправильные варианты (спасибо Oldman'у c postroika.ru за замечание): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN> Вторая тройка doctyp'ов является урезанной и использовать её категорически нельзя, т.к. обозреватели с таким объявлением документа работают также, как если бы его не было вовсе. DOCTYPE Transitional объявляет переходной тип документа (переход к версии HTML 4.01 с более старой), тот, в котором в силу ряда причин присутствуют команды, не рекомендованные к использованию (например, осуществляется поддержка сайта, написанного на HTML 3.2). Про спецификацию HTML, рекомендации по использованию тегов и атрибутов я писал в главе, посвященной языку HTML. DOCTYPE Strict объявляет документ, полностью соответствующий стандарту HTML 4.01. Я бы советовал сразу начинать писать html-документы, объявляя "Strict". Таким образом вы обеспечите и лучшую совместимость с последующими версиями языка (HTML 5 готовится к выходу), будет полное соответствие стандарту и меньше проблем с кроссбраузерностью. DOCTYPE Frameset используется при создании документов на фреймах. Структура фреймового документа и его функционирование сильно отличается от стандартного html-документа. Так что о фреймах мы поговорим позже. html-документом является содержимое контейнера "<HTML>" с объявленным DOCTYPE. Состоит документ из двух частей - технической и пользовательской. В первой содержится информация для обозревателя, во второй - для пользователя. Техническая информация заключена в контейнер "<HEAD>, а пользовательская - в контейнер "<BODY>". Конструкция выглядит так: <!DOCTYPE HTML PUBLIC... > <HTML> Технически - это уже html-документ. ******* извините, что мелко, иначе не уместитьТеперь более подробно о блоках. Для представления информации, как впрочем и для всего остального, используются теги. Стоит отметить, что почти все теги <HEAD> не используются в <BODY> (теле) документа. Верно и обратное. Рассмотрим технические теги контейнера <HEAD>: <TITLE>заголовок страницы</TITLE> <BASE href="базовый url"> <META информация о странице> <LINK ссылка на файл (документ)> <STYLE> стиль </STYLE> <SCRIPT type="тип файла" "BASE", "LINK" и "META" являются непарными тегами и каждый из них имеет обязательные атрибуты, но обо всем по порядку. Контейнер <TITLE> содержит в себе заголовок страницы. Заголовок отображается в окне обозревателя в левом верхнем углу. Сейчас там написано "Структура документа HTML". <BASE href="http://www.mysite.ru"> Тег <BASE> позволяет расширять относительные пути в ссылках. Если в документе вы употребляете относительные ссылки <IMG src="images/image.jpg" alt=""> <A HREF="coder4.php">ссылка</A> вместо абсолютных, <IMG src="http://www.mysite.ru/ то при любом перемещении файлов ссылки на них станут "битыми", поскольку станут ссылаться на пустое место. Если в <BASE> прописан базовый url "http://www.mysite.ru", то относительные ссылки images/image.jpg независимо от местоположения документа, будет выглядеть так: http://www.mysite.ru/images/image.jpg Базовый url - это фактический адрес. Для данного документа базовым (полным или абсолютным) url является адрес: Тег <META> содержит информацию для обозревателей и поисковых роботов. У него два обязательных атрибута, первый из которых определяет тип информации, а второй ее содержит. Информацию содержит атрибут "content", а определяют тип информации атрибуты "name" и "http-equiv". Вариантов тега достаточно много, но на сегодняшний день большинство из них утратило актуальность и почти не используется. При желании можете набрать в поисковике "мета теги" и ознакомиться со всем их многообразием. Перечислю те, которые пока не сдают свои позиции и играют роль при верстке сайта: <META name="keywords" content="ключевые слова страницы"> Тут нужно указывать часто встречающиеся слова, которые характеризуют информационное наполнение страницы. В идеале эти слова должны присутствовать в контейнерах заголовков <TITLE> (HEAD), <H1> - <H6> (BODY) и в тексте страницы (желательно ближе к началу). При грамотном использовании это даст хороший результат при индексации страницы поисковым роботом. Для данной страницы я указал следующие ключевые слова: структура HTML, таблицы стилей, CSS, PHP, тип документа, DOCTYPE. Результативность выбора ключевых слов можно проверить с помощью этого скрипта. <META name="description" content="краткое описание страницы"> С помощью этого атрибута можно сделать краткое описание страницы. Оно обычно отображается под ссылками ресурсов при выдаче запроса в поисковике. Чем подробнее описание, тем лучше. Главное описывать по существу и помнить, что краткость сестра таланта. В сети можно встретить массу статей о том, что "description" и "keywords" утратили актуальность, однако игнорирует данные атрибуты пока только Рамблер, а Гугл напротив советует их использовать и делать качественное описание страниц для лучшей индексации своими поисковыми роботами. <META name="revisit" content="период индексации страницы"> Этот атрибут сообщает поисковому роботу с какой периодичностью обновляется сайт. Период индексации указывается числом (кол-во дней). Это конечно не заклинание и робот будет приходить когда ему вздумается, но все же возьмет этот срок на заметку. Так что если он будет соответствовать действительности, это положительно скажется на индексации. <META name="robots" content="команды для поискового робота"> Еще один инструмент влияния на поискового робота, уже больше напоминающий заклинание. Значений у атрибута "content" четыре: "index", "noindex", "follow", "nofollow". Первые два отвечают за индексацию страницы, вторые - за переход робота по ссылкам в документе. Указываются значения парами: <META name="robots" content="noindex, follow"> При таких значениях робот не проиндексирует страницу, то есть выдаваться в поисковике по запросу она не будет, но перейдет по ссылкам и проиндексирует остальную часть сайта. Полезно указывать подобные значения для страниц с ограниченным доступом (личные или запароленные). <META http-equiv="content-type" content="text/html;charset=windows-1251"> Эти атрибуты информируют обозреватель о кодировке документа. В примере указана стандартная windows-кодировка. Важно, чтобы она, во избежании проблем, совпадала с настройками кодировки на сервере. <LINK rel="stylesheet" href="style.css" С помощью тега <LINK> можно сделать ссылку на любые файлы (технические документы), которые могут потребоваться при обработке основного документа. При этом атрибут "rel" описывает сам файл, "href" указывает его местоположение, а "type" сообщает о типе файла. Первый пример делает ссылку на таблицу стилей (stylesheet), которая находится там же, где и обрабатываемый файл (имя файла style.css), представляя собой текстовой css-файл (text/css). Второй пример делает ссылку на фавикон страницы. Есть и другие варианты использования тега, но я использую только эти. <STYLE> Контейнер <STYLE> применяется для добавления стилей, использующихся только в данном документе, чтобы не увеличивать код лишними атрибутами, а обойтись атрибутом "class" и не увеличивать таблицу стилей лишней записью, использующейся лишь однажды. Последний тег списка - <SCRIPT>. Это контейнер для скриптов. Употребляется как в техническом, так и в пользовательском блоке. Можно либо указать путь к файлу скрипта, либо поместить код скрипта непосредственно в контейнер. Подробности этих манипуляций смотрите в спецификации. Есть еще не рекомендованные технические теги. Их описание можете посмотреть в спецификации. С контейнером <HEAD> все, переходим к контейнеру <BODY>. О контейнере <BODY> в этой главе я напишу совсем немного, поскольку работа с тегами в этом контейнере - это задача больше практическая. Поэтому информация по нему изложена в двух последующих практических главах. Весь материал, который был изложен выше я отнес к теоретическому, хотя создание шаблона документа и его правильное оформление - вещь, несомненно, практическая. Сделал я это потому, что стараний ваших потенциальный пользователь не оценит, поскольку техническую информацию он не увидит и разницы между объявлением разных DOCTYPE не уловит. А вот содержимое контейнера <BODY> он оценит более чем! А поскольку любой ресурс разрабатывается в первую очередь для пользователя (если, конечно эгоизм не зашкаливает, а так можно сваять и для себя, любимого), то практический интерес вызывает именно пользовательский блок. Упомяну пару теоретических моментов в заключение главы. Всем тегам и контейнерам можно присвоить стиль не только с помощью атрибута "class", ссылающегося на таблицу стилей или контейнер <STYLE>, но и написать стиль прямо внутри тега. Делается это с помощью атрибута "style". <P style="font-style: italic;">текст</P> C помощью другого атрибута "title" можно дать название (комментарий) любому тегу или контейнеру. Например, указать "title" в ссылке. <A href="адрес" title="поехали!">ссылка</A> При наведении курсора появится всплывающая подсказка. Попробуйте навести курсор на ссылку примера. Атрибут "title" можно использовать и как комментарий для поискового робота. Атрибут "id" позволяет присвоить тегу (контейнеру) уникальное имя и впоследствии использовать его для присвоения css-стилей. К "id" очень легко прикрепить несколько стилей из разных таблиц. Если вы применили "id" к <TABLE>, он автоматически применится к <TR> и <TD>. То есть вложениям контейнера присваивается "id" контейнера. Атрибут "id" - очень удобный инструмент при работе со стилями. html-код:
<P id="intro">текст абзаца</P>
css-код:
P#intro {font-style: italic;}
Это один из примеров употребления атрибута "id" для присвоения css-стиля, используя id-селектор языка CSS. И последнее. Код бывает очень сложным и объемным, тогда в его дебрях легко запутаться. Поэтому при написании кода часто применяют комментарии. Комментарий - это контейнер, который делает заключенную в нее часть кода неактивной, то есть программы при обработке кода эту часть игнорируют. Комментарии используют в качестве маркеров и подсказок при написании кода, чтобы лучше в нем разбираться впоследствии. Напишите сайт в десять страниц, отложите в дальний ящик на год, а потом откройте. Без комментариев, как говорится "сам черт ногу сломит". А с комментариями разберетесь за несколько минут. Очень помогает при поддержке чужого кода или при работе группы программистов над одним проектом. Также комментарии применяют для отладки. Поскольку программы комментарии игнорируют, часть кода с помощью них можно как бы отключать, поместив его в контейнер комментария. <!-- контейнер-комментарий HTML --> Символы-комментарии (php) действуют только до конца строки. То есть если поставить такой комментарий посредине строки, правая ее часть (после символа) закомментируется. Следующая строка закомментирована не будет. В контейнер можно без проблем заключить и несколько строк. Комментарии HTML применяются в html-документаx: .......... Комментарии CSS употребляются внутри таблиц стилей, контейнера <STYLE> и атрибута "style". P#intro {font-style: italic;} /* абзац курсив */
Комментарии PHP применяются либо внутри контейнера <?php ;> html-документа, либо в самостоятельном php-документе, например, скрипте. <?php //включение документа menu.html include "menu.html";> На этом все - бегом практиковаться! |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![[наверх]](../images/row.gif)
