Стандарт Web-дизайна лекция 13. Содержание: Почему мы говорим о head? Задание основного языка документа Суждение о документе по его title Добавление ключевых. - презентация

1 Стандарт Web-дизайна лекция 13

2 Содержание: Почему мы говорим о head? Задание основного языка документа Суждение о документе по его title Добавление ключевых слов и описания Что насчет внешнего вида? Добавление стилей Добавление динамических свойств с помощью JavaScript Остановитесь здесь! Строковые CSS и JavaScript не слишком удобны! Заключение Контрольные вопросы

3 Почему мы говорим о head? Действительный документ HTML должен иметь doctype doctype указывает, какой тип HTML должен ожидаться, и дает указание браузерам на соответствующий вывод документа. Doctype определяет, что документ должен иметь элемент html с элементами head и body внутри себя. Элемент body определяет область, где вы проводите большую часть времени, так как здесь находится весь контент документа.

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

5 Один из фрагментов информации о документе распространяется на предка элемента head, на элемент html. Речь идет об определении основного естественного языка документа. Под естественным языком понимается человеческий язык. Это помогает считывателям экрана, так как слово "шесть" произносится совершенно различно на французском и на английском языке, и может также помочь машинам поиска.

6 Задание основного языка документа Атрибуты, которые используются для задания языка, зависят от DOCTYPE документа. Консорциум W3C ( lang/#ri ) говорит: lang/#ri Для HTML используйте только атрибут lang, для XHTML 1.0, используемого как text/html, используйте атрибуты lang и xml:lang, и для XHTML, используемого как XML, используйте только атрибут xml:lang.

7 Задание основного языка документа Коды языка могут быть двухбуквенными кодами, такими как en для английского языка, четырехбуквенными кодами, такими как en-US для американского английского, или другие, менее распространенные, коды. Двухбуквенные коды определяются в ISO (

8 Суждение о документе по его title Одним из наиболее важных элементов в head является title. Текст, содержащийся в title, выводится почти всеми агентами пользователей/браузерами в панели заголовка приложения браузера (панели, окаймляющей верх окна браузера). Это первый фрагмент контента, который увидят пользователи Web при посещении сайта, и поэтому он является очень важным

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

10 Давайте возьмем следующий документHTML (headexample.html в указанном выше загружаемом zip-файле) и откроем его в браузере.headexample.html I am a title example

11 Мы увидим, что текст из title будет выведен в панели заголовка выше средств навигации браузера, как показано на рис 1.

12 Существует множество руководств в Web о том, как создавать хорошие title документа, большинство которых связано с оптимизацией поисковых систем (SEO). Не стоит слишком увлекаться и пытаться обмануть системы поиска, чтобы она создавала большое число результатов поиска. Напишите конкретную короткую информацию о содержании документа. "Разведение собак - рекомендации для восточно-европейской овчарки" является значительно более понятной людям, чем "Собаки, восточно-европейская овчарка, разведение, собака, советы, бесплатно, домашний питомец".

13 Добавление ключевых слов и описания Описание и ключевые слова добавляются в элементе head внутри элементов meta, как показано в следующем примере, взятом с сайта Yahoo! Eurosport (headwithmeta.html):headwithmeta.html Yahoo! UK & Ireland Eurosport'Sports News | Live Scores | Sport

14

15 Однако, если открыть этот документ в браузере, то вы ничего не увидите в теле документа, но если поместить этот документ в сеть, и поисковые системы проиндексируют его, описание будет выводиться как текст ниже ссылки в результатах поиска системы, как показано на рис.2 рис.2

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

17 Рис.3. Опи сания выводятся в некоторых браузерах, когда документ добавляют в каталог избранных ссылок

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

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

20 Что насчет внешнего вида? Добавление стилей В элемент head документа можно добавить правила стилевого оформления, определенные в CSS. Можно вставить их непосредственно в элемент head с помощью элемента style, например (headinlinestyles.html): Breeding Dogs'Tips about Alsatians

21 body{ background: #000; color: #ccc; font-family: helvetica, arial, sans-serif; } Test!

22 Если открыть этот документ в браузере, он покажет текст "Test!" серым цветом на черном фоне, а шрифт будет Helvetica или Arial, в зависимости от того, что установлено в системе. Элемент style может содержать также атрибут с именем media, который определяет, какой вид среды будут использовать эти стили, т.е. хотите ли вы, чтобы эти стили использовались при просмотре документа на экране компьютера, на карманном устройстве, или во время печати? Существует несколько типов среды для выбора, наиболее полезными из них являются:

23 типы среды для выбора, наиболее полезные: screen - для вывода на мониторах. print - для определения, как должна выглядеть печатная копия документа. handheld - для определения представления документа на мобильных и других компактных устройствах. projection - для представлений, сделанных в HTML, например, поддерживаемых средством Opera Show ( rashow/). rashow/

24 Если вы, например, хотите переопределить используемые на экране цвета, и используете больший размер шрифта, чтобы страница лучше выглядела при печати, можно добавить другой блок style ниже первого, с атрибутом media со значением print, как показано ниже (посмотрите весь код в headinlinestylesmedia.html):

25 body{ background: #fff; color: #000; font-family: helvetica, arial, sans-serif; font-size: 300%; }

26 Теперь, когда вы перейдете к печати этой Web-страницы, браузер будет использовать таблицу стилей print для печати документа, а не стили экрана. Проверьте это, загружая страницу headinlinestylesmedia.html и выбирая предпросмотр печати, как показано на рис.4.рис.4.

27 Рис.4. Таблица стилей для экрана и печати

28 Добавление динамических свойств с помощью JavaScript В элемент head можно добавлять еще сценарии, которые выполняются браузером так называемые "клиентские сценарии" написанные на JavaScript, добавляет динамическое поведение в статические документы HTML, например, эффекты анимации, или проверку данных формы, или другие функции, которые запускаются, когда пользователь выполняет определенные действия.

29 JavaScript добавляют с помощью тега script. Когда браузер встречает такой сценарий, он бросает все остальное и прекращает разбор оставшегося документа, пока не попытается выполнить в нем код. Это означает, что, когда вы захотите гарантировать, чтобы код JavaScript был доступен до загрузки основного документа, необходимо будет добавить его в элемент head. Например, можно предупредить посетителя с помощью следующего сценария (headscript.html), что определенная ссылка отправит его на другой сервер:

30 Breeding Dogs'Tips about Alsatians

31 body{ background: #000; color: #ccc; font-family: helvetica, arial, sans-serif; } a {color:#fff} body{

32 background: #fff; color: #000; font-family: helvetica, arial, sans-serif; font-size: 300%; } function leave(){ return confirm("Вы перейдете на другой сайт, \n вы уверены, что хотите это сделать?") }

33 Test! The Daily Puppy Если открыть этот пример в браузере Web и щелкнуть на ссылке, то код попросит подтвердить ваше действие. Это просто небольшой пример использования сценария.

34 Остановитесь здесь! Строковые CSS и JavaScript не слишком удобны! При создании Web-сайтов необходимо помнить, что самым лучшим подходом является максимально возможное повторное использование кода. Добавление предназначенных для всего сайта стилей и сценариев на каждую страницу не имеет большого смысла, наоборот, это существенно затрудняет поддержку всего сайта и ненужным образом увеличивает отдельные документы.

35 Значительно лучше поместить стили и сценарии во внешние файлы, и импортировать их в файлы HTML, где потребуется, поэтому, если потребуется сделать какие-то изменения, их нужно будет обновить только в одном месте. Для сценария JavaScript это делают с помощью элементов script, которые не содержат внутри себя никакого сценария, но вместо этого соединяются с внешним файлом с помощью атрибута src, как показано в коде ниже (externaljs.html):

36 Breeding Dogs'Tips about Alsatians

37 body{ background: #000; color: #ccc; font-family: helvetica, arial, sans-serif; } a {color:#fff}

38 body{ background: #fff; color: #000; font-family: helvetica, arial, sans-serif; font-size: 300%; }

39 Test! The Daily Puppy

40 Это не так просто с CSS. Элемент style не имеет атрибута src, поэтому необходимо вместо этого использовать элемент link он имеет атрибут href, который определяет внешний файл CSS для импорта, и атрибут media для определения, что эти стили должны использоваться для экрана, печати. и т.д., аналогично тому, что мы видели ранее. Помещая код CSS и JavaScript в свои собственные файлы, можно существенно уменьшить длину элемента head, как показано ниже (externalall.html):

41 Breeding Dogs'Tips about Alsatians ">

42 Test! The Daily Puppy

43 Существуют и другие преимущества хранения стилей и сценариев в своих собственных файлах: Сайт будет работать для посетителей быстрее и проще, так как хотя загружается несколько дополнительных файлов, информацию о стиле и сценарии не требуется повторять в каждом файле Web-страницы (она загружается только один раз, в отдельных файлах сценария/стиля), поэтому каждый загружаемый файл будет меньше. Кроме того, файлы CSS и JavaScript будут кэшироваться (временно храниться на локальной машине), чтобы при следующем обращении к сайту, файлы уже находились в компьютере, т.е. их не придется снова загружать.

44 Кроме того облегчается обслуживание. Стиль и сценарий для всего сайта - который может состоять из тысяч документов - находятся в одном единственном месте, поэтому, если потребуется что-то изменить, нужно будет изменить только один файл, а не тысячи.

45 Заключение В разделе head документов HTML имеются следующие элементы: Элемент title, который представляет документ. Элементы meta, которые содержат описание содержимого документа и ключевые слова, предназначенные для облегчения индексации этого содержимого. Элементы link, которые указывают на внешние файлы CSS. Элементы script, которые указывают на внешние файлы JavaScript. Правильное задание всех этих элементов создает быстро загружающийся документ, который легко найти и понять.

46 Контрольные вопросы Почему имеет смысл добавлять описание в элемент meta, если он не выводится на экране? В чем выгода добавления JavaScript в разделе head документа, а не в раздел body? Как можно использовать кэширование браузера, и что нужно сделать, чтобы заставить его работать? Так как поисковые системы уделяют особое внимание элементу title документа, не будет ли полезно напичкать его с избытком подходящими ключевыми словами? В чем недостаток такой практики? Так как вывод элемента title будет несколько невзрачен, то не будет ли иметь смысл выделить некоторые слова жирным текстом с помощью элемента b? Возможно ли это?

47 Спасибо за внимание!