WEB-технологии

Автор работы: Пользователь скрыл имя, 28 Января 2013 в 17:03, лекция

Описание

В 1962 г. Дж. Ликлайдером, руководителем исследовательского компьютерного проекта экспериментальной сети передачи пакетов в Управлении перспективных исследований и разработок Министерства обороны США (Defense Advanced Research Project Agency, DARPA), была опубликована серия заметок, в которых обсуждалась концепция "Галактической сети" ("Galactic Network"). "Галактическая сеть" представлялась как глобальная сеть взаимосвязанных компьютеров, позволяющая любому пользователю получить доступ к данным и программам на компьютерах, объединенных данной сетью. Можно сказать, что эта идея положила начало развитию сети Интернет.

Скачать (845.04 Кб) Сколько стоит заказать работу?

Работа состоит из 1 файл

Лекции_Web-тех.doc

— 1.76 Мб (Скачать документ)

Внутри элемента HTML располагается заголовок. Заголовок документа, создаваемый элементом <HEAD>…</HEAD>, содержит информацию об общих свойствах документа. Данный элемент в обязательном порядке должен содержать элемент TITLE и может содержать необязательные элементы BASE, SCRIPT, STYLE, META, LINK и OBJECT. Элемент HEAD имеет три необязательных атрибута: lang, dir и profile; последний указывает местонахождение словаря метаданных. Предполагается, что такой словарь должен содержать имена метапеременных, значения которых определяются элементами META и LINK в заголовке документа.

После элемента HEAD следует элемент <BODY>…</BODY>, который является оболочкой, содержащей реальный контент Web-страницы. Элемент BODY обязательно должен содержать хотя бы один блочный элемент: в данном случае это элемент P, создающий параграф, который содержит текст "Это самый простой HTML-документ.". Элемент BODY имеет довольно много атрибутов, однако рекомендуемыми к применению являются только id, class, style, title, lang и dir.

Редакторы для верстки Web-страниц

Редактор для верстки Web-страниц или HTML-редактор - это компьютерная программа, позволяющая составлять и изменять документы в формате HTML. Сегодня на запрос в сети Интернет по ключевому словосочетанию "HTML-редактор" можно получить перечень из сотни разнообразных программ. Однако все редакторы делятся на два класса: визуальные и текстовые.

Визуальные редакторы не требуют от разработчика знаний HTML, CSS и других технологий разметки документов. Пользователь просто располагает различные элементы будущей страницы в окне редактирования, а редактор сам генерирует соответствующий код. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами, что означает What You See Is What You Get - что видишь, то и получаешь.

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

К популярным визуальным редакторам относятся продукты компании Adobe - GoLive и Dreamweaver, а также Microsoft FrontPage и Microsoft Expression Web. Данные редакторы являются проприетарными, хотя производители предлагают всем желающим ознакомительные версии данных программ. Так, ознакомительную версию Microsoft Expression Web можно получить, перейдя по ссылке http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=0a73a3a7-3e06-4125-b3c6-f9c10387e9cc. Среди свободно распространяемых редакторов стоит выделить редактор Nvu, который хоть и уступает в функциональности упомянутым выше редакторам, однако бесплатное распространение делает его привлекательным для многих разработчиков.

Однако ни один визуальный редактор не совершенен, и все они так или иначе ограничены в своих возможностях. Поэтому профессиональные разработчики часто пользуются небольшими текстовыми редакторами. Текстовые редакторы, как правило, содержат набор функций, облегчающих разработчику написание кода. К наиболее распространенным функциям относятся подсветка кода, различные горячие клавиши и т.д. К наиболее популярным текстовым редакторам относятся Macromedia HomeSite и HTML Pad. Однако лидером среди текстовых редакторов является Notepad (он же Блокнот). В этой программе нет никаких специальных функций, но зато она есть у каждого пользователя Windows, т.к. входит в число стандартных. С нее можно начать свои первые шаги в написании кода, а затем уже сменить на более понравившийся редактор.

Лекция 7. Cтруктура HTML—документа, элементы блокового и текстового уровня, списки, цвет, шрифт)

Объявление DOCTYPE

Согласно Спецификации HTML 4.01, директива DOCTYPE предназначена для объявления типа документа - так называемого DTD (Document Type Definition, определение типа документа). DTD представляет собой формальную конструкцию, в которой выражена вся специфика HTML как одного из приложений языка SGML. Определение типа документа представляет собой перечень различных конструкций SGML, которые определяют, например, какие элементы в каком порядке могут встречаться внутри каждого из элементов; полный список допустимых элементов с указанием на обязательность для каждого из них начального и конечного тегов; полный список атрибутов для каждого элемента и значениями по умолчанию и другие правила синтаксиса.

Объявление DOCTYPE выглядит следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Наиболее важной частью DOCTYPE являются две строки, взятые в кавычки. Первая строка "-//W3C//DTD HTML 4.01//EN" утверждает, что данный документ является документом DTD, использует английский язык текста для описания объекта, описывает HTML версии 4.01 и опубликован организацией W3C. Вторая строка "http://www.w3.org/TR/html4/strict.dtd" указывает на размещение самого документа DTD, используемого для этого DOCTYPE.

Режимы представления

Все современные браузеры ориентируются на DOCTYPE (или его отсутствие) в начале страницы, выбирая режим отображения для HTML-документов. В Internet Explorer версии 8 режим определяется также и другими факторами, например, HTTP-заголовком, периодически получаемыми от Microsoft данными, пользовательскими настройками и др. Но по умолчанию даже в Internet Explorer 8 режим зависит от DOCTYPE.

Основными режимами современных браузеров являются режим обратной совместимости, стандартный режим и почти стандартный режим. Приведем некоторые характеристики названных режимов.

При режиме обратной совместимости (Quirks Mode) в браузерах нарушаются рекомендации W3C для обеспечения нормального отображения страниц. Если в коде HTML-документа используется неполный или устаревший вид DOCTYPE или DOCTYPE вообще отсутствует, то браузер перейдет в данный режим и будет исходить из предположения, что код страницы написан с ошибками, не соответствует принятым стандартам или документ написан для "старых" браузеров. В этом режиме браузер пытается разобрать страницу по правилам обратной совместимости и выводит ее на экран так, как вывел бы ее браузер более ранней версии. Для разных браузеров существуют различные варианты совместимости с предыдущими версиями. Так, Internet Explorer версий 6, 7 и 8 в режиме обратной совместимости фактически воспроизводят установки, типичные для Internet Explorer 5. У других браузеров режим обратной совместимости представляет собой набор отклонений от почти стандартного режима. К сожалению, режим обратной совместимости лидирует с большим отрывом. Статистика использования типов DTD от 10 апреля 2008 г., опубликованная на сайте Qindex.info (www.qindex.info/Q_get.php?g_clss=forum&g_prcss=thrd&g_tmplt=&g_brd=5&g_thrd=128) показывает, что более 50% сайтов работают в режиме обратной совместимости.

В стандартном режиме (Standards Mode) браузеры пытаются обращаться с правильно составленными документами в полном соответствии со спецификацией CSS, настолько, насколько конкретный браузер поддерживает стандарты. Поскольку уровень поддержки стандартов разными браузерами различен, то даже стандартный режим пока не может гарантировать полностью одинакового отображения и поведения страниц.

Некоторые браузеры, такие как Firefox, Safari, Opera (начиная с 7.5) и Internet Explorer 8 поддерживают и третий режим - почти стандартный (Almost Standards Mode), который не достаточно строго следует рекомендациям W3C. Internet Explorer 6 и 7 для Windows, Opera ниже версии 7.5 и некоторые другие браузеры не нуждаются в таком режиме, поскольку даже в своих стандартных режимах не соблюдают все спецификации CSS.

Internet Explorer 8 также поддерживает режим, в основном воспроизводящий стандартный режим Internet Explorer 7. У других браузеров подобных режимов нет.

Выбор DOCTYPE

Спецификация допускает использование трех различных версий DTD, которые отличаются друг от друга поддержкой различных элементов и атрибутов. Опубликованный W3C список DTD, рекомендованных для использования в Web-документах, представлен на официальном сайте Консорциума (http://www.w3.org/QA/2002/04/valid-dtd-list.html).

Любое из перечисленных ниже объявлений DOCTYPE гарантированно включает браузеры в стандартный режим.

Объявление строгого DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Строгое DTD (строгий синтаксис) не допускает использования в документе различных не рекомендуемых элементов и атрибутов, большинство из которых предназначаются не для логической разметки, а для визуального форматирования. Данный DOCTYPE гарантирует, что при работе с данным HTML документом браузер будет использовать свой стандартный режим. Наиболее заметный эффект состоит в том, что будут получены более согласованные результаты при оформлении документа с помощью CSS.

Объявление переходного DTD:

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

"http://www.w3.org/TR/html4/loose.dtd">

Переходное DTD (переходный синтаксис) включает в себя все элементы и атрибуты строгого DTD в совокупности с не рекомендуемыми элементами и атрибутами.

Объявление DTD "Набор фреймов":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

Объявление DTD "Набор фреймов" аналогично переходному синтаксису, но содержит также элементы для создания фреймов.

Раздел документа HEAD

Раздел документа HEAD определяет его заголовок и не является обязательным элементом, однако правильно составленный заголовок может быть очень полезен. Элементы, находящиеся в разделеHEAD , определяют большую часть инструкций для браузера, а также дополнительную информацию о HTML-документе. Содержимое элемента HEAD не отображается напрямую на Web-странице, за исключением элемента TITLE, устанавливающего заголовок Web-страницы. Раздел HEAD может содержать в себе следующие элементы: TITLE, META, BASE, LINK, STYLE, SCRIPT и OBJECT. В лекции мы дадим лишь основные подходы к работе с перечисленными элементами. Более подробно ознакомиться с ними можно в Спецификации HTML.

Элемент TITLE

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD> <TITLE>Пример использования элемента TITLE</TITLE></HEAD>

<BODY> <P>Обратите внимание на панель заголовков!</P></BODY>

</HTML>

Результат выполнения данного кода представлен на рисунке 5.1. Текст из элемента TITLE выведен в панели заголовка выше средств навигации браузера.

Рис. 5.1. Пример использования элемента TITLE

Элемент META

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

Количество доступных свойств приближается к нескольким десяткам, но все они делятся на две группы: NAME и HTTP-EQUIV. Элементы группы NAME содержат текстовую информацию о документе, его авторе и некоторые рекомендации для поисковых машин (например, Robots, Description, Keywords, Author, Copyright и др.). Элементы группы HTTP-EQUIV влияют на формирование HTML-заголовка и определяют режим его обработки (Content-Language, Content-Type, Refresh и др.).

Следует отметить, что Спецификация HTML 4.01 не содержит стандартного списка этих свойств, поэтому авторы пока свободны в их определении. Мы рассмотрим лишь несколько свойств.

Каждый элемент META содержит в себе пару атрибутов: для указания названия свойства используются атрибуты name или http-equiv (в зависимости от используемого свойства), а значение этого свойства устанавливается атрибутом content. Например, следующий метаописатель задает имя автора документа:

Дополнительно он может содержать атрибут lang, указывающий язык, на котором написано значение свойства:

Наибольший интерес из группы свойств NAME представляют свойства Description и Keywords. Эти свойства, наряду с элементом TITLE, широко используются для оптимизации и продвижения сайтов.

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

Информация о работе WEB-технологии