Упражнения

1. Создайте простой HTML документ «Привет, Мир!». Убедитесь в том, что он отображается верно. Проверьте код документа, используя справочник.

2. На основе предыдущего задание создайте себе шаблон HTML для использования.

3. Изучите действия тегов разметки текстовых блоков

4. Изучите действия тегов форматирования текста

5. Создайте упорядоченный и несортированный списки и продемонстрируйте действие изученных атрибутов

Задание: Подготовка документов, составляющих сайт

1. Создайте файлы веб страниц сайта.

2. Наполните веб страницы содержанием.

3. Начните реализацию веб дизайна страниц с применением известных вам средст HTML.

Занятие 3. Html как язык гипермедиа разметки Упражнения к занятию 3

1. Создайте две страницы, ссылающиеся друг на друга с помощью относительных ссылок. Используя абсолютные значения URL, установите ссылки на внешние ресурсы, например, сайт НГУЭУ.

2. Вставьте на странице рисунки:

   1. Небольшие рисунки в строке текста.

   2. Рисунки, обтекаемые текстом у правой и левой границ документа. Продемонстрируйте действие тега BR с различными значениями атрибута CLEAR.

   3. Сделайте один из рисунков источником гиперссылки. Установите рамку этого рисунка.

3. Создайте страницу с фотографией группы. Информацию о членах группы разместите под фотографией. Отделяйте информацию о каждом из членов группы горизонтальной чертой.

4. Наложите на фотографию группы навигационную карту, ведущую к различным частям того же документа. Установите переходы к фотографии группы из всех частей документа.

Задание к занятию 3. Создание сайта

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

2. Вставьте на сайт рисунки для графического оформления и изображения товаров. С помощью атрибута ALT создайте ярлычки изображений с названиями товаров.

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

Занятие 4. Таблицы и фреймы Упражнения к занятию 4

1. Создайте HTML документ с таблицей товаров. Определите следующие столбцы: артикул, название товара, цена. Вставьте заголовок таблицы и заголовки столбцов. Введите данные по трем товарам. Задайте рамку таблицы.

2. Создайте HTML документ с таблицей, организующей верстку. Задайте ячейку заголовка, подвала, информационных блоков. Задайте фоновые цвета и картинки для различных блоков документа. Сделайте границы таблицы невидимыми.

3. Разделите окно браузера на два фрейма, расположенных горизонтально (в одной строке). Загрузите в левый фрейм содержание книги. Используйте правый фрейм для отображения частей документа.

4. Создайте в документе плавающий фрейм. Подгружайте в него изображения из списка, организованного в основном документе.

Задание к занятию 4. Таблицы и фреймы

1. Выполните верстку страниц сайта с помощью таблиц. Пользуйтесь следующими правилами:

   1. На каждой странице присутствуют заголовок (header). Заголовок имеет единый дизайн для всех страниц сайта, кроме, возможно, «домашней». Заголовок обеспечивает единообразный переход на домашнюю страницу с любой другой страницы сайта.

   2. На каждой странице присутствуют подвал (footer). Разместите в подвале логотип и название фирмы – разработчика сайта и копирайт владельца сайта.

   3. Слева организована навигационная панель, задающая навигацию по сайту

   4. Задайте оформление фоновыми цветами и рисунками, скройте границы.

2. Вставьте на страницу «Контакты» плавающий фрейм. Содержимое фрейма должно загружаться по одной из двух ссылок: «как нас найти в городе» и «как нас найти в здании». Первая загружает карту Google, на которой изображен план части города, где расположен магазин. Вторая – план здания (нарисуйте план здания в одном из графических редакторов). Наложите на план здания навигационную карту, обеспечивающую комментарий по различным участкам плана в соседнем плавающем фрейме. Например, «у двери позвоните в звонок три раза».

Занятие 5. URL+HTTP