§ 6. Веб-конструирование. Основные понятия

6.1.    Веб-сайт

Веб-сайт представляет собой группу веб-страниц, связанных между собой гиперссылками и объединенных общей темой и оформлением.
В зависимости от содержания веб-сайты могут быть:

  1. Презентационные (сайты-визитки) — реклама определенных акций, мероприятий, событий, продвижение конкретных технологий, сервисов или услуг (пример 6.1).
  2. Корпоративные — представляют компанию, предприятие, организацию. Задача таких сайтов — создание положительного имиджа, а также продвижение товаров или услуг (пример 6.2).
  3. Онлайн-сервисы — направлены на удовлетворение повседневных и бытовых нужд обычного пользователя: поиск информации, работа с электронной почтой и др. (пример 6.3).
  4. Электронные магазины — ориентированы на получение прибыли от продажи товаров (пример 6.4).

Типы веб-сайтов в зависимости от технологии создания:

  1. Статические — хранятся на сервере и отображаются в браузере в одном и том же виде (пример 6.5).
  2. Динамические — полностью или частично генерируются на сервере или в браузере в процессе исполнения запроса пользователя (пример 6.6).

По взаимодействию пользователя с ресурсами веб-страниц веб-сайты можно разделить на:

  1. Пассивные — информацию на таких сайтах можно только просматривать (пример 6.5).
  2. Интерактивные — пользователь имеет возможность обмениваться данными с сервером, участвовать в интерактивном диалоге (пример 6.6).

6.2. Язык гипертекстовой разметки документа HTML. Структура HTML-документа. Теги и атрибуты. Гиперссылки

Веб-страница представляет собой гипертекстовый документ, созданный на языке HTML (HyperText Markup Language — язык разметки гипертекста).

Язык HTML описывает структуру html-документа, позволяет задать базовые параметры веб-страницы, свой-ства и местоположение объектов веб-страницы.

Html-документ — файл с расширением .html. Такой файл может быть открыт в браузере как веб-страница.

Основные компоненты языка HTML — теги, атрибуты и их значения.

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

Обычно тег — это контейнер из пары тегов (открывающего и закрывающего). Записываются теги в треугольных скобках: <>. Закрывающий тег отличается от открывающего только наличием символа /.
Код веб-страницы имеет определенную структуру:

  1. Контейнер <html> </html> идентифицирует код как html-документ. В него вкладываются контейнеры <head> </head> и <body> </body>.
  2. Контейнер <head> содержит не отображаемую на веб-странице информацию — название html-документа, теги для поисковых машин и др.
  3. Контейнер <body> определяет содержание веб-страницы (контент), отображаемое браузером.

(Рассмотрите пример 6.7.)

Часто при написании html-кода возникает необходимость вставки поясняющих комментариев. Начинаются они с <!– и заканчиваются –>. Все, что находится внутри этого тега, отображаться на веб-странице не будет.

В заголовке html-документа размещаются:

  1. Обязательный контейнер <title> </title>, который определяет название веб-страницы и отображается на вкладке браузера (пример 6.8).
  2. Тег <meta>, устанавливающий кодировку документа.

Атрибуты расширяют возможности тегов, задают свойства объектов на веб-странице. Например, можно выровнять абзац или задать размер изображения.

Значение атрибута определяет конкретные свойства объектов на вебстранице. Например, если для тега используется атрибут выравнивания, то он может иметь значение left или right.

Атрибуты и их значения записываются внутри открывающего тега (пример 6.9).

Основным свойством гипертекста является способность соединять в единое целое информацию, представленную в цифровой форме (текст, аудио- и видеофайлы, графику, анимацию, html-документы).

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

Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки — это то, что мы видим на веб-странице (текст или рисунок). Текстовый указатель обычно выделяется синим цветом и подчеркиванием.
Язык HTML постоянно развивается. C 2014 г. рекомендуется использовать версию HTML5. Эта версия содержит теги canvas, audio и video, позволяющие добавлять графические, звуковые и видеоматериалы.
Пример 6.7. Структура HTML- документа.
<html>
<head>< ! — Заголовок –><title> Название страницы </title>
 <meta charset = «utf-8»><! — установка кодовой таблицы utf-8–>
</head>
<body> <! — тело –>
<h1>Заголовок статьи</h1>
<р>Абзац статьи</р>
 </body>
</html>

Пример 6.8. Написание и отображение в браузере тега <title>.

<head>
<title>Примep веб-страницы</title>
</head>

Для повышения качества html-кода и обеспечения совместной работы над веб-сайтами принято руководствовать­ся определенными правилами оформ­ления и форматирования:

  1. Использовать нижний регистр, не­смотря на то что язык html нечувстви­телен к регистру.
  2. Записывать код так, чтобы строки полностью помещались на экране.
  3. Выделять новую строку для каж­дого открывающего тега и ставить от­ступы для каждого дочернего (вложен­ного) элемента.
  4. При создании веб-страниц учиты­вать разницу в отображении html-кода в различных браузерах.

Пример 6.9. Синтаксис языка HTML.

body bgcolor = ”gray” text = ”white”>
Содержимое
</body>


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

  1. Ссылка должна быть легко узнаваема.
  2. Ссылка не должна нарушать целостность текста. Лишние ссылки мешают чтению.
  3. По текстовому указателю ссылки должно быть понятно, куда она ведет.
  4. Текст под ссылкой не должен быть длинным.
 
  1. По каким принципам можно разделить сайты на группы?
  2. На какие группы можно разделить сайты в зависимости от их содержания?
  3. Какой язык используется при создании веб-страниц?
  4. Какую структуру имеет html-документ?
  5. Что такое тег, атрибут?
  6. Для чего служат гиперссылки?

Упражнения

  1. Откройте в браузере указанные сайты.

    1. edu.gov.by

    2. camelotmebel.by

    3. careers.epam.by

    4. calc.by

К какому типу можно отнести каждый из сайтов в зависимости от их содержания?

  1. Откройте страницы веб-сайтов, воспользовавшись ссылками:
    1. http://testy.by/quiz
    2. https://stellarium-web.org

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

  1. Выполните указанные действия.  Каким  цветом при просмотре кода страницы в браузере выделяются теги, атрибуты, значения атрибутов, содержимое тегов?
Действие Результат
Откройте файл в редак­торе кода(например,
Notepad++)
Сохраните этот файл как html-документ и откройте его в брау­зере

В контекстном меню открытой в браузере веб-страницы выберите

Просмотр кода страницы или воспользуйтесь комбинацией клавиш Ctrl + U
  1. Выпишите в тетрадь теги, определяющие структуру html-документа из упражнения 3.

Проверь себя 

Выбор тем