Краткие теоретические сведения. Порядок выполнения лабораторной работы:

Создание WEB-сайта

Порядок выполнения лабораторной работы:

1. Разработать набор HTML-страниц в соответствии с вариантами заданий.

2. Первая страница (index.html) должна содержать ссылки на две другие страницы (page1.html и page2.html). Структура первой страницы:

- заголовком первого уровня – название курса

- заголовком второго уровня – название лабораторной работы

- горизонтальный разделитель

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

- горизонтальный разделитель

- строка с данными разработчика страницы, начинающаяся символом ©.

3. Страница page1.html должна использовать в виде фона рисунок и содержать два раздела:

1) раздел демонстрирующий возможности форматирования текста (включая оформление списков);

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

Внизу страницы должна быть внутренняя ссылка < К началу страницы >.

4. Страница page2.html должна иметь цветной фон. На странице поместить отформатированный текст и таблицу. Внизу страницы должна быть внутренняя ссылка < К началу таблицы >.

5. Страницы page1.html и page2.html должны иметь ссылки на главную страницу (index.html).

6. Оформить отчет о выполнении работы. Отчет должен содержать HTML-код разработанных страниц и их отображение в браузере.

Варианты заданий

Вариант 1

Сайт шейпинг-клуба: реклама; объявление о новом наборе; расписание занятий (в виде таблицы).

Вариант 2

Личный сайт: краткая информация о себе, увлечения (в виде маркированного списка); таблица, содержащая режим дня с использованием верхних индексов (примерный вид: 7 ⁰⁰ – подъем

7 ³⁰ – завтрак и т.д.)

Вариант 3

Сайт курсов иностранных языков: реклама; фотографии методических пособий и учебников, по которым ведутся занятия; описание программ изучения языка для слушателей с разным уровнем подготовки; расписание занятий (в виде таблицы).

Вариант 4

Сайт фирмы, реализующей компьютерные комплектующие: реклама; перечень комплектующих, на которые действуют скидки; прайс-лист (таблица с двумя столбцами: Наименование товара; Цена за единицу товара).

Вариант 5

Сайт нового развлекательного центра: объявление об открытии; перечень услуг; вакансии (в виде таблицы со столбцами Должность; Оклад).

Вариант 6

Сайт сети магазинов одежды: реклама; описание и фото новинок; информация о филиалах – таблица со столбцами: Номер филиала; Адрес; Режим работы (использовать верхний индекс, например, 9 ⁰⁰ – 18 ⁰⁰).

Вариант 7

Сайт нового книжного магазина: реклама; перечень отделов (художественная литература, техническая и т.д.); режим работы (использовать верхний индекс, например: 9 ⁰⁰ – 18 ⁰⁰ перерыв 13 ⁰⁰ – 14 ⁰⁰); объявление об акциях к открытию в каждом отделе (в виде таблицы); фотографии здания магазина и интерьера одного из отделов с подписями.

Вариант 8

Сайт театра: реклама, адрес, время начала спектаклей (использовать верхний индекс, например: 18 ⁰⁰); фотографии сцен из спектаклей с подписями; репертуар на текущий месяц в виде таблицы со столбцами Дата; Спектакль; Цена билета.

Вариант 9

Сайт компьютерных курсов: объявление об открытии курсов; перечень изучаемых предметов; время работы; таблица со столбцами Предмет; Продолжительность изучения; Стоимость.

Вариант 10

Сайт новой сети магазинов цветов: объявление об открытии сети магазинов и перечень адресов магазинов; фото нескольких реализуемых комнатных цветов с подписями справа от рисунка; прайс-лист (таблица с двумя столбцами: Наименование; Цена).

Вариант 11

Сайт сети аптек: реклама; перечень адресов аптек и фото нескольких аптек; объявление о скидках пенсионерам на некоторые лекарства и таблица со столбцами: Лекарство; Скидка.

Вариант 12

Сайт кинотеатра: реклама; информация о скидках на цены билетов для студентов; информация о фильме, демонстрируемом на текущей неделе и кадры из фильма; репертуар на текущий месяц в виде таблицы со столбцами Фильм; Страна; Сеансы.

Вариант 13

Сайт ресторана быстрого обслуживания: информация о времени работы ресторана (использовать верхний индекс, например: 8⁰⁰ - 22⁰⁰); перечень имеющихся вакансий в ресторане; меню льготного бизнес-ланча в виде таблицы со столбцами Блюдо; Вес; Цена. Последняя строка таблицы должна объединять все ячейки строки в одну ячейку, в которой указать общую цену бизнес-ланча.

Вариант 14

Сайт сети магазинов канцтоваров: объявление об открытии сети магазинов канцтоваров; перечень адресов магазинов и их фото; информация о товарах, предлагаемых в магазинах сети в виде таблицы со столбцами Товар; Страна - производитель; Цена.

Вариант 15

Сайт сети магазинов мобильных телефонов: реклама; перечень адресов магазинов сети; объявление о скидках на некоторые модели телефонов; таблица, в одном столбце которой будут названия моделей телефонов, в другом – их фото, в третьем – скидки на них.

Вариант 16

Сайт салона красоты: реклама салона; перечень предлагаемых услуг; таблица (без границы), в одном столбце которой поместить фотографии интерьеров кабинетов визажа, массажа, бассейна и холла, в другом столбце – пояснения к ним.

Вариант 17

Сайт магазина стройматериалов: реклама; режим работы; перечень предлагаемых товаров; информация о поступлении новых видов кафельной плитки для стен и для пола в виде таблицы со столбцами Назначение плитки, Название модели, Фото, Цена за 1 кв.м. В таблице представить не менее трех моделей каждого вида (стена/пол). В первом столбце должны быть объединенные ячейки, которые один раз сообщают назначение плитки для нескольких моделей.

Вариант 18

Сайт сети автосервиса: реклама; перечень комплектующих, пользующихся наибольшим спросом с их описанием и фото; прайс-лист предоставляемых услуг (таблица со столбцами Вид работы/услуги, Цена).

Вариант 19

Сайт факультета экономики и менеджмента: реклама; перечень специальностей; фото студентов факультета; таблица групп первого курса со столбцами Название группы, Количество студентов, Количество контрактных студентов, Количество золотых медалистов. Последняя строка таблицы должна объединять все ячейки строки в одну ячейку, в которой указать общее количество студентов первого курса.

Вариант 20

Сайт вашей группы: реклама; фото студентов с подписями; список студентов с указанием родного города; расписание занятий на неделю в виде таблицы.

Вариант 21

Сайт автосалона: реклама; режим работы; перечень новинок с их описанием и фото; прайс-лист (таблица со столбцами Модель автомобиля, Компания - производитель, Цена).

Вариант 22

Сайт передвижного зоопарка: реклама; перечень имеющихся животных и их фото; план передвижения на текущий месяц в виде таблицы со столбцами Дата, Город, Адрес, Время посещения, Стоимость входного билета.

Вариант 23

Сайт центра дошкольного обучения: реклама; перечень профильных групп с описанием программ обучения и фото детей на занятиях; информация о наборах детей в профильные группы с указанием возраста, времени занятий, стоимости занятий в виде таблицы.

Вариант 24

Сайт городского культурного центра: реклама; отчет о прошедшей в центре выставке молодых художников (перечень участвовавших в выставке художников, краткая справка об их творчестве, отзывы, фото картин); информация о планируемых мероприятиях на ближайшие три месяца в виде таблицы (мероприятие, даты проведения, время).

Вариант 25

Сайт фирмы по обслуживанию компьютерной оргтехники: реклама; адрес и режим работы; фото обслуживаемой оргтехники; перечень предоставляемых услуг; прайс-лист обслуживания принтеров (таблица со столбцами Принтер, Модель картриджа, Стоимость заправки, Стоимость нового картриджа).

Краткие теоретические сведения

World Wide Web, которую для краткости часто называют просто Web или WWW, является наиболее быстро развивающейся частью Internet.

Службу WWW отличают великолепный графический интерфейс и развитый механизм ссылок. Принципы предоставления материала пользователям одинаковы и в Интернете, и в интрасетях — вы размещаете свои файлы в папках на Web-узле, где они доступны всем желающим (например, средствами обозревателя Microsoft Internet Explorer).

Документы публикуются в формате языка разметки гипертекстовых документов (Hypertext Markup Language, HTML), который позволяет снабдить текстовый документ графикой, имитацией и видеоматериалами.

Служба WWW использует протокол HTTP (Hypertext Transfer Protocol) — протокол передачи гипертекстовой информации. С технической точки зрения HTTP – универсальный объектно-ориентированный протокол без постоянного соединения, работающий на прикладном уровне стека IP.

ОСНОВНЫЕ ТЕРМИНЫ

Web-сервер (Web Server). Программа, которой браузер посылает запросы об определенных Web-страницах (или компьютер, на котором подобная программа запущена). Сервер предоставляет запрашиваемую страницу и ожидает дальнейших запросов. Если сервер не может найти запрашиваемую страницу, он посылает сообщение об ошибке – ” not found ” (не найдена) или что-либо подобное.

Web-узел (сайт) (Website). Набор разных Web-страниц. Каждый Web-узел имеет свой уникальный Интернет-адрес, который определяет его местоположение. Большинство Web-узлов содержат десятки, сотни, тысячи Web-страниц.

Web-страница (Web page) — отдельный Web-документ. По своему размеру она может быть короче обычной, а может быть и во много раз длиннее. Большинство Web-страниц имеют длину примерно в два экрана.

Домашняя страница (Home page).Это название используется в нескольких значениях. Главное значение – «основная». Этим термином называется обычно первая страница на Web-узле, с которой можно попасть на все остальные страницы. А также ваша личная страница или страница первоначально загружаемая в браузер.

Браузер (browser) — программа для просмотра Web-страниц.

Пользовательский агент (user agent) — браузер или другая программа, работающая на компьютере клиента

Загрузка (downloading) — копирование файлов с сервера на компьютер-клиент.

Указатель URL (Uniform Resource Locator) — универсальный указатель локатора ресурсов — адрес некоторого объекта в Internet. Типичный URL для WWW имеет вид:

https://www.название.домен/имя файла

где: протокол домен ресурс

Название — часть адреса, который часто употребляется для обозначения владельца сайта.

Домен — обозначение крупного раздела Internet-строки, области длительности и т.д.

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

Базовый URL — часть адреса, которая является общей для всех ссылок текущей Web-страницы.

Гиперссылка (hyperlink) — фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.

HTML-файл или HTML-страница — документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют, как правило, расширение. htm или. html. В гипертекстовых редакторах и браузерах эти файлы имеют общее название “документ”

Элемент (element) — конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов.

Тэг (teg) — стартовый или конечный маркер элемента. Тэги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страниц тэги заключаются в угловые скобки, а конечный тэг всегда снабжается косой чертой.

Атрибут (attribute) — параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута известен заранее. Атрибуты располагаются внутри стартового тела и отделяются друг от друга пробелами.

Фрейм (frame) — область гипертекстовых документов со своими полосами прокрутки.

Апплет (applet) — программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

Сценарий (скрипт) (script) — программа, включенная в состав Web-страницы для расширения ее возможностей.

Расширение (extension) — элемент, не входящий в официальную спецификацию языка, но часто использующийся на практике, способ задания нового эффекта форматирования.

CGI (Common Gateway Interface) — общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц.

Код — аналог понятия текст программы.

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

Конечный тэг имеет то же имя, что и начальный, с той разницей, что перед именем конечного тэга ставится косая черта (/). Одним из принципов языка является многоуровневое вложение элементов.

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

Несмотря на то, что спецификация HTML является стандартом, язык постоянно дополняется новыми элементами (расширениями). Поэтому некоторые Web-страницы удобнее просматривать при помощи определенных браузеров.

Структура документа. Основной набор тэгов.

В любом HTML-документе присутствуют тэги, которые идентифицируют документ как HTML-документ (тэг < HTML>), а также определяют основные части этого документа — заголовок и тело (содержимое). Текст документа заключается в тэги < HTML>. Заголовок и тело выделяются тэгами < HEAD> и < BODY> соответственно.

Пример:

< HTML>

< HEAD>

< TITLE> Структура Web-страницы < /TITLE>

< STYLE> H2{ font-family: Arbat; }

CODE { font-family: Arval; } < /STYLE>

< META name = “Author” content = “ RAA”

< META name = “Keywords” content = “ WWW, HTML”>

< /HEAD>

< BODY bgcolor = “ #0000FF” text = “#FFFFFF” >

< P> < HR>

< H1> Структура HTML-документа < /H1>

< /BODY>

< /HTML>

Таблица 1. Основной набор тэгов.

Форматирование текста