Лабораторная работа №23 «Web-страницы. Создание гиперссылок. Стили.»
Цель работы: получить навыки создания гиперссылок, а также навыки оформления HTML страниц с помощью стилей, закрепить полученные навыки создания и редактирования страниц с использованием языка HTML.
Порядок выполнения работы:
Задание 1
Используя внутренние ссылки создать словарь терминов, переход к терминам должен осуществляться нажатием соответствующей буквы. В конце терминов по каждой букве должна стоять ссылка «В начало»
Задание 2
Примечание (в качестве основы для выполнения заданий 2-4 берем html страницу из лаб.Работы №23)
Создайте каталог /css/
Создайте в нем файл main.css
Подключите его ко всем страницам сайта с помощью тега <LINK>.
Задайте по умолчанию следующие параметры для всех страниц (переопределив, тег <body>): - цвет фона - размер шрифта - цвет шрифта - семейство шрифта (например, Arial)
Проверьте работоспособность на сервере.
В комментариях (в файле main.css) поясните эти параметры.
Задание 3
Задайте по умолчанию следующие параметры для всех абзацев (переопределив, тег <p> и псевдоклассы тега <p>): - выравнивание абзаца - отступ красной строки - размер и цвет первой буквы
Проверьте работоспособность на сервере.
В комментариях (в файле main.css) поясните эти параметры.
Задание 4
Задайте по умолчанию следующие свойства ссылок для всех страниц: - цвет и оформление ссылки - цвет и оформление посещенной ссылки - цвет и оформление активной ссылки - цвет и оформление ссылки, в момент нахождения курсора мыши над ней
Проверьте работоспособность на сервере.
Лабораторная работа №24 «Web-страницы. Создание фреймов. Вставка таблиц.»
Цель работы: получить навыки создания фреймов, добавления и редактирования таблиц на HTML страницы, закрепить полученные навыки создания и редактирования страниц с использованием языка HTML.
Порядок выполнения работы:
Задание 1.Создание таблиц.
Если это упражнение выполняется не сразу после предыдущего, откройте документ <Ваша фамилия>.htmв программеБлокнот.
Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить между тегами <BODY>и</BODY>. В данном упражнении используется список номеров телефонов.
Введите тег <TABLE BORDER="10" WIDTH="100%">.
Введите строку <CAPTION АLIGN="TOP">Список телефонов</САРТION>.
Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:
<TR BGCOLOR="YELLOW" ALIGN="CENTER">
<ТН>Фамилия<ТН>Номер телефона
Определите последующие строки таблицы, предваряя каждую из их тегом <TR>и помещая содержимое каждой ячейки после тега<TD>.
Последнюю строку таблицы задайте следующим образом:
<TR><TD ALIGN="CENTER" COLSPAN="2">Ha первом этаже здания
имеется бесплатный телефон-автомат.
Завершите таблицу тегом </TABLE>.
Сохраните Ваш документ.
Запустите обозреватель Internet Explorerоткройте Ваш файл. Изучите, как созданная таблица отображается в программеInternet Explorer, обращая особое внимание на влияние заданных атрибутов.
Задание 2 Создание фреймов
Создайте html-файл (frame.htm), состоящий из трех фреймов (см. рисунок справа). Для создания фрейма необходимо после раздела заголовка документа указать структуру фреймов: два фрейма вертикальный, а во втором вертикальном еще два горизонтальных фрейма…
<frameset cols="20, *">
<frame src="file.htm">
<frameset rows="100, *">
<frame src="file.htm">
<frame src="file.htm">
</frameset>
</frameset>
Присвойте каждому фрейму уникальное имя: значение атрибута nameдля тега<frame>.
Задайте левому фрейму фиксированную ширину в 234 пикселя с запретом изменять ширину фрейма (атрибут noresize).
В левый фрейм поместите файл меню (menu.htm), который будет состоять из списка лабораторных работ. Меню разместите в таблице, состоящей из 3-х строк (в каждую строку фоном поместите рисунок).
Задайте для каждой лабораторной работы ссылку на соответствующий документ, который будет открыт в правом нижнем фрейме. Для открытия ссылки в другом фрейме используйте атрибут targetтега<a>, в качестве значения атрибутаtargetукажите имя фрейма в котором необходимо открыть файл.
В верхний фрейм поместите в качестве источника поисковую систему google.com. Значение атрибута srcдля второго тега<frame>.
Создайте в папке своего домена файла map.htm, содержащий карту изображений.
Поместите в файл map.htm изображение-карту с геометрическими фигурами: <img src="figure_1.png" border="0" usemap="#navigation">
Дополните файл обработкой карты изображений
<map name="navigation">
<area shape="circle" coords="72,93,40" href="krug.html" title="Круг">
<area shape="rect" coords="129,129,268,194" href="pryam.html" title="Прямоугольник">
<area shape="poly" coords="168,108,221,15,279,108" href="triangle.html" title="Треугольник">
</map>
Проверьте работу карты изображений. Обратите внимание на всплывающие подсказки и ссылки.