Динамический HTML. Размещение веб-сайтов

25-26 урок, 11 класс – теория

Учитель: Брух Т.В.

Дата: _____________

Тема урока: «Динамический HTML. Размещение веб-сайтов»

Цель урока:

Обучающие

- раскрыть назначение веб-сайтов и смысл их использования

- обобщить и систематизировать знания о структуре веб-страницы, веб-сайта, языка

разметки гипертекста HTML

- вспомнить с учащимися основные теги и атрибуты для создания гиперссылок

Развивающие

- применение методов построения структуры страницы на основе изученных тегов

- развитие умения, используя язык разметки гипертекста, создать веб-страницу

- актуализация сведений из полученного ранее опыта

- развитие процессов мышления и познавательных интересов

- развитие грамотной речи

Воспитательные

- формирование навыков самоорганизации

- способствовать воспитанию информационной культуры учащихся

- формирование настойчивости в достижении поставленной цели, умения работать

- воспитывать аккуратность, внимательность.

1. Организационный момент

2. Изучение нового материала

По мере развития индустрии создания веб-сайтов возникла потребность расширить возможности использовать мультимедиа как инструмента дизайнера для создания интерактивных страниц. Эта возможность появилась с внедрением технологии, получившей название Dynamic HTML (DHTML).

Dynamic HTML (DHTML) — это обобщающий термин для набора технологий, используемых совместно для создания интерактивных и анимированных веб-сайтов. Обычно под DHTML подразумевается комбинация из статического языка разметки, клиентского языка сценариев, языка описания представлений и объектной модели документа. Т.е., DHTML — не особый язык, а cовокупность клиентских технологий веб-разработки, которую можно представить в виде такой условной «формулы»:

DHTML = HTML + CSS + DOM + JavaScript.

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

Document Object Model (DOM)

В браузере дерево элементов разметки преобразуется в структуру данных. Это представление основывается на спецификации Объектной Модели Документа (DOM), разработанной и поддерживаемой W3C. DOM описывает веб-страницу в виде иерархии объектов, наделенных набором обязательных и опциональных свойств и методов. В нотации DOM эти объекты, представляющие теги разметки, называются узлами.

Архитектура модели DOM состоит из трех частей: ядра (Core)​​, HTML и XML. Ядро DOM обеспечивает низкоуровневый набор объектов, которые могут представлять любой структурированный документ. Однако, непосредственное обращение к объектам ядра не всегда оправданно. Спецификации HTML и XML обеспечивают дополнительные, более удобные интерфейсы верхнего уровня, которые представляют более простой и прямой доступ к документам определенного типа.

Каждый узел DOM имеет, по меньшей мере, следующие свойства:

• nodeName - имя узла в соответствии со спецификацией: тег разметки HTML или XML в заданном пространстве имен, предопределенное имя в нотации DOM (#text, #comment и т.д.);

• localName - локальное имя узла (если не переопределено, то соответствует nodeName);

• prefix - имя (не адрес) пространства имен, описывающего узел (см. лекциюРасширяемый язык разметки XML);

• namespaceURI - адрес файла описания спецификации (например, http://www.w3.org/1999/xhtml);

• nodeType - целочисленный идентификатор типа узла (1 - элемент; 3,8 - содержимое, 9 - документ, 10 - тип документа и т.п.);

• nodeValue - содержимое элемента (непосредственно данные);

• id - уникальный в пределах документа идентификатор узла;

class - имя класса CSS.

API DOM

Для обращения к DOM из скриптов и внешних программ используется стандартизованный объектно-ориентированный интерфейс (API), в котором каждый узел представлен в виде объекта с набором публичных свойств, методов и событий.

В этом определении DHTML, данном Консорциумом W3C не указывается, какой именно скриптовый язык должен быть использован в качестве инструмента доступа к DOM при разработке динамических страниц. В общем смысле, для управления поведением веб-страницы может быть использован любой код, который позволяет изменять содержание и внешний вид документа, или иным образом взаимодействовать с пользователем через веб-браузер. Тем не менее, исторически сложилось так, что основным языком разработки динамических страниц стал JavaScript и многое из того, что относится к DHTML вращается вокруг этого скриптового языка. В результате, браузерные плагины для веб-разработки (например, DOM Inspector для FireFox) представляют узлы DOM не иначе, как в виде объектов JavaScript.

Правила CSS

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

 Как разместить сайт в сети интернет?

·     Что такое хостинг?

·     В чем разница между платным и бесплатным хостингом?

Допустим, вы создали свой сайт, который уже находится на жёстком диске компьютера. Вы проверили его структуру, он работает и все тексты хорошо читаются. Но как сделать, что бы он был доступен в сети «Интернет»? Ведь ресурсы компьютера доступны другим пользователям, только пока он подключён к сети, а для сайта нужно доменное имя. Чтобы сделать сайт доступным в сети «Интернет», нужно воспользоваться услугой хостинга – это размещение сайта на сервере, который всегда подключён к сети «Интернет» с присвоением ему доменного имени. Услуги хостинга предоставляют компании, которые называются хост-провайдерами.

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

Хостинг может быть платным и бесплатным.

При использовании платного хостинга за размещение сайта нужно платить. Хост-провайдер несет ответственность за доступ к сайту, то есть он не может быть просто удалён. Без ведома клиента на сайт не могут добавить рекламу или какие-либо другие материалы. Дисковое пространство для сайта будет измерятся в гигабайтах, также можно использовать любые технологии. Сайту будет присвоено доменное имя второго уровня, например mysite.ru. Как правило, услугами платного хостинга пользуются для размещения серьезных и больших проектов.

Для размещения домашних веб-страниц обычно достаточно услуг бесплатного хостинга. Бесплатный хостинг чаще всего предоставляет вашему сайту доменное имя третьего уровня, на пример mysite.narod.ru. Хост-провайдер не несет ответственности за сайт –  он может быть просто удален. Также при использовании бесплатного хостинга ограничены:

·     системные и сетевые ресурсы, например дисковое пространство и скорость доступа к данным;

·     размер и расширения отдельных файлов;

·     информация, размещаемая на сайте;

·     использование определённых технологий и подпрограмм на сайте.

У вас может возникнуть логичный вопрос: «А в чем выгода бесплатного хост-провайдера от предоставления услуг?». В этом заключается главное отличие бесплатного хостинга от платного. Бесплатный хост-провайдер, получив доменное имя второго уровня, может создавать на нём сколько угодно имён третьего уровня и добавлять на них рекламу. Именно на размещении рекламы на сайтах зарабатывают бесплатные хост-провайдеры.

Платный хостинг, в зависимости от предоставляемых услуг, делится на несколько групп:

·     это виртуальный хостинг;

·     выделенный виртуальный сервер;

·     выделенный сервер;

·     колокация.

Рассмотрим подробнее каждую из них.

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

При предоставлении выделенного виртуального сервера на одном компьютере может быть несколько виртуальных серверов. Каждый из них будет иметь свой ip-адрес, и на каждом будет по одному сайту. В этом случае системные ресурсы разделены между виртуальными серверами, и каждый из них использует свою часть. Этот вид хостинга дороже виртуального. При этом он имеет свои преимущества. Например более высокую стабильность работы, так как для работы одного сайта выделяется определённое количество системных ресурсов, например оперативной памяти, и более широкий спектр доступных для использования технологий. Например, можно размещать базы данных или использовать различные подпрограммы.

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

Колокация – от английского слова colocation, «сожительство». Используется редко. В этом случае клиент предоставляет своё оборудование для размещения сайта, а хост-провайдер размещает его в своём дата-центре. Как правило, клиент отвечает и за настройку, безопасность и поддержание оборудования в рабочем состоянии. Хост-провайдер отвечает за обеспечение связи с сайтом, электропитание оборудования, обеспечение климатического режима для оборудования, физическую охрану оборудования и проверку его состояния.

Платный хостинг выбирают по следующим критериям:

·     цена;

·     надёжность, так как сайт должен быть всегда доступен;

·     объем дискового пространства – он должен быть не меньше необходимого для сайта;

·     скорость доступа к данным, чтобы пользователям не приходилось долго ждать загрузки страниц;

·     поддерживаемые технологии, хостинг должен поддерживать все технологии, необходимые для сайта, например базы данных;

·     техническая поддержка – она должна иметь оптимальный режим работы и высокое качество обслуживания.

Важно запомнить:

·     Для размещения сайта нужно воспользоваться услугой Хостинга, размещением сайта на сервере, который всегда подключён к сети «Интернет» с присвоением ему домена.

·     Хостинг бывает платным и бесплатным.

·     Бесплатный хостпровайдер не несет ответственности за сайт, размещает на нём рекламу и чаще всего предоставляет доменное имя третьего уровня.

·     Платный хостпровайдер отвечает за доступность сайта и предоставляет доменное имя второго уровня.

3. Подведение итогов

Домашнее задание - теория