Содержание и форма отчета по лабораторной работе.

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

1. Номер и название лабораторной работы;

2. Цели работы;

3. Оформление каждого задания:

   1. Постановка задачи;

   2. Код программы, реализующей решение поставленной задачи;

   3. Скриншоты, иллюстрирующие функционирование программы.

4. Вывод.

Лабораторная работа № 1, 2.

Разработка документов в формате HTML 4.0

Цель работы

1. Овладение навыками форматирования, выравнивания и графического сопровождения текста на языке HTML 4.0.

2. Овладение навыками связывания страниц.

3. Овладение навыками создания списков.

4. Овладение навыками создания таблиц и макетирования HTML документов с помощью страниц.

5. Овладение навыками макетирования HTML документов с помощью фреймовых структур.

6. Овладение навыками проектирования шаблона сайта.

Подготовка к работе

Повторить следующие понятия:

1) Дескрипторы !-- --, !DOCTYPE, META, HTML HEAD, TITLE, BODY, P, B, I, U, S, STRIKE, SMALL, BIG, SUB, SUP, BR, HR, Hn (n=1, 2, 3, 4, 5, 6), PRE, DL, DT, DD, OL, UL, LI, TABLE, TR TH, TD, IMG, MAP, AREA, A, FRAMESET, FRAME, IFRAME и их атрибуты.

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

Источник для изучения: конспект лекций предыдущего семестра, электронные справочники по языку HTML.

Задания для самостоятельного выполнения

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

Работа выполняется в блокноте.

Задание 1.

Создайте Web страницу, включающую в себя следующие элементы: заголовок самого большого размера и пять абзацев (каждый абзац должен включать в себя по 5-6 строк (перевод на следующую строку не использовать!)). Заголовок выровняйте по центру. Первый абзац оставить выровненным по умолчанию без закрывающего дескриптора. Остальные абзацы сделать с закрывающимся дескриптором и выровнять их следующим образом: второй – по левому краю, третий – по правому краю, четвертый – по центру, пятый – по ширине. В первом и втором абзацах части текста (отдельные слова или словосочетания) отформатировать следующими способами: полужирный текст, курсив, подчеркивание, зачеркивание, текст больше основного, текст меньше основного, текст нижний индекс, текст верхний индекс. В третий и четвертый абзацы включить использование следующих элементов: текст, заключенный в одинарные кавычки; текст, заключенный в двойные кавычки; амперсанд; знак параграфа; знак авторского права; знак конца абзаца; знак больше; знак меньше; знак градуса; знак плюс-минус; знак умножения; знак деления; несколько греческих букв. В пятом абзаце предусмотрите использование неразрывного пробела и принудительного переноса на следующую строку. После пятого абзаца вставьте разделительную линию толщиной 5 пиксель и после нее вставьте текст из нескольких строк, заключенный в дескриптор предварительного форматирования текста. Предусмотрите в этом тексте множественные пробелы и перевод на следующую строку. Далее сделайте отступ из нескольких строк и вставьте текст из нескольких строк с использованием нескольких дескрипторов форматирования (подчеркивание, зачеркивание и т.д.). Заключите в этом тексте какое-либо слово или словосочетание в кавычки. В конец документа добавьте гиперссылку с названием «К началу документа», при выборе которой должна осуществляться прокрутка документа к его началу (Весь документ необходимо сделать такого объема, чтобы для полного просмотра его требовалась прокрутка.). Документ разместите в файле exs1.html.

Задание 2.

Создайте Web страницу, включающую в себя следующие элементы: заголовок, 3-4 абзаца по 4-5 строк каждый, три рисунка. Заголовок должен быть расположен по центру. Первый рисунок должен быть протяженный и располагаться между заголовком и первым абзацем. Выровняйте его по правому краю и сделайте обрамленным в рамку. Второй и третий рисунки должны обтекаться текстом абзацев. Второй рисунок выровняйте по левому краю, а третий рисунок – по правому краю. Между текстом и вторым и третьим рисунками установите отступы по вертикали и горизонтали равные 10 пикселей. Оба рисунка не должны обрамляться рамкой. В тексте абзацев сделайте три гиперссылки. Первая гиперссылка должна переводить на HTML страницу первого задания (exs1.html), вторая гиперссылка – на конец HTML страницы первого задания, третья гиперссылка должна приводить к открытию HTML страницы первого задания в новом окне браузера. Добавьте в конец документа протяженный рисунок без рамки и свяжите его с HTML страницей первого задания. Ко всем рисункам добавьте описание (атрибут ALT). Установите цвет текста в документе по умолчанию красным, цвет фона – светло серым, цвет ссылки по умолчанию – оранжевым, цвет ссылки после ее посещения – светло-зеленым и цвет активной ссылки – светло-красным. Документ разместите в файле exs2.html.