Урок 12. Веб-технологии
Предмет: Информатика, 11 класс

Конспект урока

Информатика, 11 класс. Урок № 12.

Тема — Веб-технологии

Урок посвящен знакомству с веб-технологиями. В ходе урока школьники научатся характеризовать структуру веб-страницы. Описывать взаимодействие веб-страницы с сервером. Разрабатывать веб-страницу.

Веб-сайт, веб-страница, веб-браузер, гиперссылка, язык HTML.

Рассмотрим более подробно, что же такое World Wide Web (WWW) или Всемирная паутина. Всемирная паутина (World Wide Web, WWW) — это система связанных между собой документов. Каждый отдельный документ, имеющий собственный адрес, называется Web-страницей.

Web-страница (документ) может содержать самую разную информацию: текст, рисунок, звукозапись. Каждая страница хранится в отдельном файле, имя которого имеет расширение htm или html.

Каждая Web-страница может иметь множество связей с другими страницами, которые хранятся как на том же самом компьютере, так и на других компьютерах сети. Связи между страницами осуществляют гиперссылки.

Гиперссылка — это некоторое ключевое слово или объект в документе, с которым связан указатель для перехода на другую страницу в «паутине». Обычно изображение гиперссылки каким-то образом выделяется на странице, например цветом или подчеркиванием. При подведении к гиперссылке указателя мыши он принимает вид руки с указывающим пальцем. Если при этом щелкнуть левой кнопкой мыши, то произойдет переход по указателю к связанному документу. Текст, в котором используются гиперссылки, называется гипертекстом.

Несколько веб-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками и обычно находящихся на одном сервере, образуют Web-сайт.

Сайт принадлежит некоторому лицу или учреждению. Web-сайт организуется на Web-сервере провайдера сетевых услуг.

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

Взаимодействие клиент-сервер происходит по протоколу HTTP (англ. HyperText Transfer Protocol — протокол передачи гипертекста). Принцип взаимодействия WWW-клиента и WWW-сервера на основе протокола HTTP предполагает следующую последовательность действий:

— клиент формирует сообщение-запрос и передает серверу;

— сервер получает сообщение, анализирует и обрабатывает запрос, формирует сообщение-ответ и направляет его клиенту.

Возникает вопрос: как сконструировать Web-страницу с ее текстами, рисунками, шрифтовым, цветовым и звуковым оформлением? Надо создать текстовый файл, содержащий описание страницы на языке HTML — языке разметки гипертекста. Вообще говоря, HTML-документ может быть создан при помощи любого текстового редактора, хотя нередко используются специализированные HTML-редакторы и так называемые конвертеры. Выбор редактора, который будет применяться для создания HTML-документов, зависит исключительно от личных пристрастий автора. Для этих целей можно использовать стандартное приложение Блокнот.

А теперь давайте проанализируем самую простую страницу, описанную с помощью этого языка.

<НТМL_>

<HEAD_>

<TITLE> Это моя страница </TITLE>

</HEAD>

<BODY BGCOLOR="YELLOW" TEXT="BLACK" LINK="RED" ALINK='BLUE">

<CENTER>

<FONT SIZE=5>

Добро пожаловать на мою страничку

<BR>

</FONT>

<IMG SRC="animal.jpg">

</CENTER>

</BODY>

</HTML>

Мы встречаем слова, взятые в своеобразные скобки из знаков <и>. На самом деле эти скобки сигнализируют программе просмотра, что внутри их стоят так называемые теги — управляющие словосочетания, указывающие браузеру на то, как надо оформлять ваш электронный документ.

Рассмотрим, к примеру, тег <CENTER>. Он означает, что все дальнейшие элементы оформления документа будут расположены строго по центру окна, выделенного программе просмотра. А отменяется это центрирование с помощью другого тега </CENTER>. Вообще косая палочка в теге означает отмену какого-либо элемента оформления. Тег <НЗ> заставляет программу просмотра весь дальнейший текст писать крупными буквами, так называемым заголовочным шрифтом третьего уровня. Всего существует шесть уровней шрифтов. Им соответствуют теги <Н1>, <Н2>, <НЗ>, <Н4>, <Н5> и <Н6>. Первый уровень самый крупный.

Каждая пара тегов <CENTER> и </CENTER>, <H1> и </Н1> и т. п. образует так называемый контейнер, придающий новые свойства тексту, который в него попадает.

Познакомимся с другими тегами, присутствующими на странице.

<BR> — текст будет располагаться на новой строке (но без отступа, известного вам как «красная строка»). Такой тег не имеет отмены </BR>, а значит, и не образует контейнера.

<HTML> — указатель начала описания электронного документа на языке HTML.

<HEAD> — тег, располагающийся еще до описания самой страницы документа, в его заголовке. Текст внутри контейнера <TITLE> ... </TITLE> выводится программой просмотра страниц в верхней заголовочной части уже готового экрана с документом и помогает ориентироваться при поиске нужных документов.

<BODY> — указатель начала описания собственно странички документа. В нем присутствуют достаточно важные атрибуты. И один из них — BGCOLOR — определяет фон нашей странички.

Фоном может быть не просто цвет, но и любая картинка, которая сохранена в формате JPG или GIF. Для создания такого фона нужно использовать атрибут BACKGROUND (например, BACKGROUND="klen.gif").

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

<CENTER> ….

<H1> …

……….

</Н1> …

</CENTER>

И пример записи неверной:

<CENTER> ….

<H1> …

……….

</CENTER> …

</Н1> …

Рассмотрены только некоторые элементы языка HTML. Подробное описание этих и других тэгов легко найти в любом справочнике по HTML.

HTML — один из так называемых «веб-стандартов» («стандартов Web»), предназначен, прежде всего, для логической разметки документа. Оформление современных веб-сайтов задаётся с помощью стилевых файлов. Ещё одним из «веб-стандартов» является технология CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, составленного с использованием языка разметки. Каскадные таблицы стилей предназначены для облегчения оформления веб-страниц. Вынесение оформления в отдельную структуру позволяет накладывать его на различные веб-страницы и легко менять весь дизайн, редактируя только стили и не затрагивая сам документ. Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле.

Эта технология позволяет принципиально разделить содержание и представление документа:

— описание содержания и логической структуры веб-страницы производится с помощью HTML или других языков разметки;

— описание внешнего вида веб-страницы производится с помощью CSS.

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

Заключительный и очень важный этап в создании сайтов — это размещение сайта в Интернете, или публикация Web-сайта. Для того чтобы разместить сайт в Интернете, необходимо найти подходящее место на одном из его серверов. Размещение сайта в Интернете может быть как платным, так и бесплатным. Крупные компании обычно размещают свои сайты на платных хостингах. В этом случае они получают удобный для запоминания и прочтения домен второго уровня и, как правило, обслуживание размещенного сайта, то есть техническую поддержку. Однако в Интернете существует множество провайдеров, которые позволяют своим клиентам размещать Web-сайты бесплатно (бесплатный хостинг). Например, к ним относятся многие почтовые сервера.

Когда вы выбрали сервер, на котором будете размещать свой сайт, вам необходимо от провайдера Интернет-услуг получить следующие сведения:

URL-адрес сервера, на котором будет размещен сайт.
Имя пользователя и пароль для доступа к серверу (обычно они те
же, что и для подключения к Интернету).
Имя каталога сервера для размещения вашего сайта.

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