Данная лекция рассматривает часть документа . К концу этой лекции вы узнаете о различных частях этого раздела, и для чего они предназначены, включая doctype, элемент title, ключевые слова и описание (которое управляется с помощью мета элементов). Вы узнаете также о JavaScript и .
Постарайтесь познакомиться со всем материалом от начала и до конца, так как он представляет ряд проверенных методов, которых стоит придерживаться при работе с элементом . Хотя каждая часть справедлива сама по себе, но в конце имеется заключение о лучших методах, которое может заставить вас пересмотреть некоторые из предыдущих рекомендаций. Лекция имеет следующее содержание:
head ?titleРанее в этом курсе вы узнали, что действительный документ doctype — doctype указывает, какой тип doctype рассматривается в лекции 14, но пока давайте просто скажем, что doctype определяет, что документ должен иметь элемент html с элементами и body внутри себя. Элемент body определяет область, где вы проводите большую часть времени, так как здесь находится весь контент документа. Элемент играет, кажется, менее важную роль, так как за исключением элемента title, посетители сайта не видят непосредственно
ничего из того, что помещают в этот раздел. Наоборот, элемент является местом, где находится большая часть инструкций для браузера, и где хранится дополнительная информация о документе — так называемая мета-информация.
Один из фрагментов информации о документе распространяется на предка элемента , на элемент html. Речь идет об определении основного естественного
Атрибуты, которые используются для задания языка, зависят от ) говорит:
Для
HTML используйте только атрибутlang, для XHTML 1.0, используемого какtext/html, используйте атрибутыlangиxml:lang, и для XHTML, используемого как XML, используйте только атрибутxml:lang.
Коды языка могут быть двухбуквенными кодами, такими как en для английского языка, четырехбуквенными кодами, такими как en-US для американского английского, или другие, менее распространенные, коды. Двухбуквенные коды определяются в ISO 639-1 (http://en.wikipedia.org/wiki/ISO_639-1).
Одним из наиболее важных элементов в является title. Текст, содержащийся в title, выводится почти всеми агентами пользователей/браузерами в панели заголовка приложения браузера (панели, окаймляющей верх окна браузера). Это первый фрагмент контента, который увидят пользователи Web при посещении сайта, и поэтому он является очень важным. Кроме того, вспомогательные технологии, такие как считыватели экрана (программное обеспечение, которое читает вслух Web-страницы для пользователей с недостатками зрения), выдают его в качестве первой подсказки, что посетители могут ожидать от документа, и множество поисковых систем работают таким же образом, поэтому шансы, что страница будет найдена в Web существенно возрастают, когда используется хороший title, который могут прочитать люди, и который содержит правильные ключевые слова. Давайте возьмем следующий документ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>I am a title example</title> </head> <body> </body> </html>
Мы увидим, что текст из title будет выведен в панели заголовка выше средств навигации браузера, как показано на рисунке13.1.
(рис 13.1) Вывод title в окне браузераСуществует множество руководств в Web о том, как создавать хорошие title документа, большинство которых связано с оптимизацией поисковых систем (
Не стоит слишком увлекаться и пытаться обмануть системы поиска, чтобы она создавала большое число результатов поиска. Напишите конкретную короткую информацию о содержании документа. "Разведение собак - рекомендации для восточно-европейской овчарки" является значительно более понятной людям, чем "Собаки, восточно-европейская овчарка, разведение, собака, советы, бесплатно, домашний питомец".
Следующее, что нужно сделать, может показаться сначала чрезмерным, так как никогда не будет напрямую видно посетителям страницы: надо добавить описание и ключевые слова. Они добавляются в элементе внутри элементов meta, как показано в следующем примере, взятом с сайта Yahoo! Eurosport headwithmeta.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Yahoo! UK Ireland Eurosport'Sports News | Live Scores | Sport</title> <meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more."> <meta name="keywords" content="eurosport,sports,sport,sports news, live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo"> </head> <body> </body> </html>
Однако, если открыть этот документ в браузере, то вы ничего не увидите в теле документа, но если поместить этот документ в сеть, и поисковые системы проиндексируют его, описание будет выводиться как текст ниже ссылки в результатах поиска системы, как показано на рисунке 13.2.
(рис 13.2) Описания, выводимые на страницах результатов поисковых системЭто может быть критически важный фрагмент информации, которую может искать возможный посетитель вашего сайта, что заставит его щелкнуть на ссылке. Описания имеют также другое применение — некоторые браузеры показывают описание как дополнительную информацию, когда документ добавляют в каталог избранных ссылок, как показано на рисунке 13.3:
(рис 13.3) Описания выводятся в некоторых браузерах, когда документ добавляют в каталог избранных ссылокПоэтому, хотя нет очевидной непосредственной выгоды добавления мета-описаний, они играют важную роль в успехе документа. То же самое — в меньшей степени — применимо к добавленным ключевым словам.
Хотя годы злоумышленного использования спамерами заставили системы поиска не принимать больше ключевые слова всерьез, они могут, тем не менее, быть хорошим инструментом для применения, если вы хотите быстро проиндексировать множество документов, не просматривая и не анализируя содержимое. Мета-ключевые слова можно использовать, например, в системе управления контентом, создавая
Будет нелишним предоставить способ поиска документов, не требующий анализа их содержимого. Добавляя некоторые ключевые слова в элемент meta, вы оставляете себе возможность иметь хороший и быстрый поиск для своих сайтов, если захотите создать что-то подобное в будущем. Считайте ключевые слова небольшими закладками, которые вы оставляете в массивной книге, чтобы облегчить себе поиск определенного раздела, который не требует просмотра целых глав.
Затем в элемент документа можно добавить правила стилевого оформления, определенные в CSS. Можно вставить их непосредственно в элемент с помощью элемента style, например (headinlinestyles.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breeding Dogs'Tips about Alsatians</title>
<meta name="description" content="How to breed Alsatians,
tips on proper breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
<style type="text/css">
body{
background: #000;
color: #ccc;
font-family: helvetica, arial, sans-serif;
}
</style>
</head>
<body>
<p>Test!</p>
</body>
</html>
Если открыть этот документ в браузере, он покажет текст "Test!" серым цветом на черном фоне, а шрифт будет Helvetica или Arial, в зависимости от того, что установлено в системе. Элемент style может содержать также атрибут с именем media, который определяет, какой вид среды будет использовать эти
screen - для вывода на мониторах.print - для определения, как должна выглядеть печатная копия документа.handheld Если вы, например, хотите переопределить используемые на экране цвета, и используете больший размер шрифта, чтобы страница лучше выглядела при печати, можно добавить другой блок style ниже первого, с атрибутом media со значением print, как показано ниже (посмотрите весь код в headinlinestylesmedia.html):
<style type="text/css" media="print">
body{
background: #fff;
color: #000;
font-family: helvetica, arial, sans-serif;
font-size: 300%;
}
</style>
Теперь, когда вы перейдете к печати этой Web-страницы, браузер будет использовать таблицу print для печати документа, а не
(рис 13.4) Таблица стилей для экрана и печатиВ элемент можно добавлять еще
JavaScript добавляют с помощью тега script. Когда браузер встречает такой . Например, можно предупредить посетителя с помощью следующего
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breeding Dogs'Tips about Alsatians</title>
<meta name="description" content="How to breed Alsatians,
tips on proper breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
<style type="text/css" media="screen">
body{
background: #000;
color: #ccc;
font-family: helvetica, arial, sans-serif;
}
a {color:#fff}
</style>
<style type="text/css" media="print">
body{
background: #fff;
color: #000;
font-family: helvetica, arial, sans-serif;
font-size: 300%;
}
</style>
<script>
function leave(){
return confirm("Вы перейдете на другой сайт,\n вы уверены, что хотите это сделать?")
}
</script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>
Если открыть этот пример в браузере Web и щелкнуть на ссылке, то код попросит подтвердить ваше действие. Это просто небольшой пример использования
Я понимаю, что это смелое заявление, но при создании Web-сайтов необходимо помнить, что самым лучшим подходом является максимально возможное повторное использование кода. Добавление предназначенных для всего сайта
Значительно лучше поместить script, которые не содержат внутри себя никакого src, как показано в коде ниже (externaljs.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breeding Dogs'Tips about Alsatians</title>
<meta name="description" content="How to breed Alsatians,
tips on proper breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
<style type="text/css" media="screen">
body{
background: #000;
color: #ccc;
font-family: helvetica, arial, sans-serif;
}
a {color:#fff}
</style>
<style type="text/css" media="print">
body{
background: #fff;
color: #000;
font-family: helvetica, arial, sans-serif;
font-size: 300%;
}
</style>
<script src="leaving.js"></script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>
Это не так просто с CSS. Элемент style не имеет атрибута src, поэтому необходимо вместо этого использовать элемент link — он имеет атрибут href, который определяет media для определения, что эти , как показано ниже (externalall.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breeding Dogs'Tips about Alsatians</title>
<meta name="description" content="How to breed Alsatians,
tips on proper breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
<link rel="stylesheet" type="text/css" media="print" href="printstyles.css">
<script src="leaving.js"></script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>
Существуют и другие преимущества хранения
Вот и вся информация для данной лекции. Вы узнали обо всех различных частях, которые могут находиться в разделе документов
title, который представляет документ.meta, которые содержат описание содержимого документа и ключевые слова, предназначенные для облегчения индексации этого содержимого.link, которые указывают на script, которые указывают на Правильное задание всех этих элементов создает быстро загружающийся документ, который легко найти и понять.
Как обычно, несколько контрольных вопросов, чтобы проверить, как была понята рассматриваемая предметная область.
meta, если он не выводится на экране? head документа, а не в раздел body?title документа, не будет ли полезно напичкать его с избытком подходящими ключевыми словами? В чем недостаток такой практики?title будет несколько невзрачен, то не будет ли иметь смысл выделить некоторые слова жирным текстом с помощью элемента b? Возможно ли это?Крис Хайлман проработал Web-разработчиком в течение десяти лет, после того как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода
Крис поддерживает блог на сайте Wait till I come (http://wait-till-i.com/) и доступен во многих социальных сетях под ником "codepo8".
Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474/)
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.