Лабораторная работа №1. Создание простейших HTML-страниц.
1) Попутешествовать в Интернете, посмотреть на различные примеры веб-страниц
2) Придумать название и содержание своего собственного небольшого сайта
(собственная домашняя страница, сайт какой-либо вымышленной организации,
небольшой интернет-магазин и т.д.).
3) Создать первую пустую веб-страницу данного сайта. Она должна быть корректной
HTML страницей, содеражащей теги html, head, title, body. Тег title должен
содержать придуманное название сайта.
4) Придумать содержание данной страницы. Содержание должно включать в себя
некоторое приветственное слово посетителям, текст-описание данного ресурса, e-
mail адрес (возможно вымышленный) разработчика сайта, небольшое меню сайта,
ведущее на страницы разделов сайта (два-три раздела; страницы самих разделов
сайта можно оставить пустыми). В тексте необходимо использвать теги h1, b, i,
center.
Спецификацию языка HTML можно найти по адресу:
[Link]
Справочная информация:
[Link]
[Link]
Результаты работы необходимо сохранить до следующего практического занятия!
Лабораторная работа №2. Создание списков и таблиц.
5) Продолжить разработку идеи небольшого интернет-проекта.
6) Создать новую html страницу, ссылку на которую необходимо включить в меню,
находящееся на главной странице сайта, которая была создана вами в лабораторной
работе №1. Страницу и ссылку назвать произвольно.
7) На вновь созданной странице разместить содержимое, включающее в себя:
a. Комбинированный список (т.е. содержащий как нумерованные, так и
ненумерованные подсписки), содержащий 3 уровня вложенности и не менее
10 – 15 пунктов (суммарно на всех уровнях вложенности). Списки должны
отличаться по типу – нумерованные, ненумерованные и
нумерованные/ненумерованные (по выбору).
b. Таблицу размером n столбца на m строк (n >= 3, m >= 4) с двумя
«большими» ячейками (ячейками, являющимися результатом объединения
нескольких ячеек – используются атрибуты colspan и rowspan тега td). Для
создания первой «большой» ячейки необходимо объединить несколько
подряд идущих ячеек в какой-либо строке, для создания второй «большой»
ячейки – несколько подряд идущих ячеек в каком-либо столбце.
Спецификацию языка HTML можно найти по адресу:
[Link]
Справочная информация:
[Link]
[Link]
Данная лабораторная работа делается с использованием результатов лабораторной
работы №1. Результаты работы необходимо сохранить до следующего практического
занятия.
Лабораторная работа №3. Создание форм.
8) Продолжить разработку идеи небольшого интернет-проекта.
9) Создать новую html страницу, ссылку на которую необходимо включить в меню,
находящееся на главной странице сайта, которая была создана вами в лабораторной
работе №1. Страницу и ссылку назвать произвольно. (Можно вместо новой
страницы использовать уже существующую.)
10) На вновь созданной странице разместить содержимое, включающее в себя
небольшую форму со следующими элементами:
a. Поле/поля для ввода одной строчки текста
b. Поле/поля для ввода пароля
c. Поле/поля для ввода текста произвольной длины (textarea)
d. Поля-флажки и поля-радиокнопки
e. Раскрывающийся список произвольной длины
f. Скрытые поля (<input type=”hidden” name=”имя” value=”значение”/>)
g. Кнопка для очистки формы
h. Кнопка для отправки формы
Спецификацию языка HTML можно найти по адресу:
[Link]
Справочная информация:
[Link]
[Link]
Данная лабораторная работа делается с использованием результатов лабораторных
работ №1 и №2. Результаты работы необходимо сохранить до следующего
практического занятия.
Лабораторная работа №4. Применений каскадных таблиц стилей CSS.
11) Продолжить разработку идеи небольшого интернет-проекта.
12) Для работы использовать те html страницы, которые были созданы вами в
предыдущих лабораторных работах.
13) Наложить на эти страницы следующие стили:
a. На теги body, td – шрифт Arial, размера 12 px
b. На теги h1, h2, h3, h4, h5, h6 – отступы спереди в 20 px и после – в 10 px
c. Все ссылки сделать “мигающими” – то есть, чтобы при наведении на них
курсором мышки, подчеркивание исчезало (использовать псевдокласс hover)
d. Определить три своих собственных класса для оформления абзацев –
назвать произвольно. В каждом классе определяются отступы спереди и
сзади текста – в трех соответствующих классах определяются отступы
разной величины. Использовать все данные классы для оформления разных
абзацев текста
e. На одной из страниц все вышеприведенные стили включить в сам файл, на
другой – вынести во внешний файл
Справочная информация:
[Link]
Данная лабораторная работа делается с использованием результатов прежних
лабораторных работ. Результаты работы необходимо сохранить до следующего
практического занятия.