- •Лабораторная работа № 1 ВвЕдение в нtml Предисловие
- •Подготовительные операции.
- •Бегущая строка на html-странице
- •Заголовки в html-страницах
- •Горизонтальная линия
- •Изменение общего дизайна html-страницы
- •Форматирование абзацев
- •Вставка изображений
- •Таблицы
- •Гиперссылки
- •Приложение 1. Название и коды цветов
Гиперссылки
Создайте новый файл html-документа следующего вида:
<html>
<head>
<title>Лабораторная работа по WWW</title>
</head>
<body>
<h1> ЛАБОРАТОРНАЯ РАБОТА</h1>
<h2><u>СОДЕРЖАНИЕ:</u></h2>
<A href= “file://c:\windows\Рабочий стол\Бегущая строка.html”>
Бегущая строка</A>
<A href= “file://c:\windows\Рабочий стол\Заголовки.html”>
Заголовки </A>
<A href= “file://c:\windows\Рабочий стол\абзац.html”>
Абзац</A>
<A href= “file://c:\windows\Рабочий стол\списки.html”>
Списки</A>
<A href= “file://c:\windows\Рабочий стол\таблицы.html”>
Таблицы</A>
</body>
</html>
Откройте этот документ в браузере. Выполните переход к выбранному разделу щелчком мышью по соответствующему разделу (пусть это будет раздел «Бегущая строка»).
Видоизмените html-страницу:
<html>
<head>
<title> ЛАБОРАТОРНАЯ РАБОТА ПО WWW</title>
</head>
<body>
<h1> ЛАБОРАТОРНАЯ РАБОТА </h1>
<h2><u>СОДЕРЖАНИЕ:</u></h2>
<p>Перейти к разделу
<A href= “file://c:\windows\Рабочий стол\Бегущая строка.html”>
Бегущая строка</A>
<p>Перейти к разделу
<A href= “file://c:\windows\Рабочий стол\Заголовки.html”>
Заголовки </A>
<p>Перейти к разделу
<A href= “file://c:\windows\Рабочий стол\абзац.html”>
Абзац</A>
<p>Перейти к разделу
<A href= “file://c:\windows\Рабочий стол\списки.html”>
Списки</A>
<p>Перейти к разделу
<A href= “file://c:\windows\Рабочий стол\таблицы.html”>
Таблицы</A>
</body>
</html>
В режиме «Источник» добавьте в текст html-страницы «Бегущая строка» перед конечным тегом </body> следующие строки:
<A href= “file://c:\windows\Рабочий стол\Лабораторная работа.html”>
<img src= “file://c:\windows\Рабочий стол\Image2.gif”></A>
В обновленной странице щелкните мышью на появившемся рисунке, и вы опять вернетесь на страницу с оглавлением работы.
Аналогичным образом создайте рисунки для гиперссылок и в других разделах выпускной работы для возвращения в оглавление из любого раздела.
В режиме источника в html-странице «Таблицы» сразу после стартового тега <body> вставьте метку переходи вида:
<a name= “Метка1”></a>
Перед конечным тегом </body> той же страницы введите следующую конструкцию для перехода к установленной метке:
<a href= “Метка1”>Переход в начало страницы</a>
Создайте на html-странице «Таблицы» описанным выше способом несколько меток (“”Метка2", «Метка3» и так далее) для организации переходов внутри этого документа. Сам переход к различным частям документа оформите в виде следующего «оглавления»:
<p>Переход к<a href= “#Метка2”>разделу А</a></p>
<p>Переход к<a href= “#Метка3”>разделу Б</a></p>,
где «Раздел А» и «Раздел Б» - названия соответствующий разделов страницы.
Карты
На рабочем столе Windows находится созданный заранее графический файл Fish.jpg с изображением золотой рыбки. У этой рыбки глаз имеет координаты 269, 119. Сделаем глаз этой рыбки (круг радиуса R=20 с координатами центра 269, 119) в качестве гиперссылки для перехода к файлу та6лицы.html.
Откройте html-страницу с оглавлением выпускной работы (выпускная работа.html) и в режиме источника дополните эту страницу следующим фрагментом:
<map name= “karta”>
<area alt= “круг” shape= “circle”
coords= “269,119,20” href= “file://c:\windows\Рабочий стол\таблицы.html”>
</map>
<img src= “file://c:\windows\Рабочий стол\Fish.jpg” usemap= “#karta” alt= “karta”>
Сохраните сделанные изменения в файле и просмотрите обновленный вид html-страницы. Подведите указатель мыши к глазу рыбки, и вы увидите, что указатель мыши превратится в указующий перст, а в строке состояния браузера полный путь для перехода. Щелкните мышью по глазу рыбки, и вы перейдете к разделу «Таблицы». Для возвращения в оглавление щелкните кнопку «Назад» на панели инструментов браузера.
Воспользуемся другими частями изображения рыбки для организации переходов к различным разделам лабораторной работы. Так, например, область нижнего плавничка (прямоугольник с координатами 163,121,220,155) можно использовать для перехода к файлу списки.html, а хвост рыбки, описываемый многоугольником с координатами вершин 23,44,146,37,174,63,174,89,96,124,31,53, - для перехода к файлу абзац.html. В итоге, фрагмент страницы с переходами к трем разделам выпускной работы будет иметь вид:
<map name= “karta”>
<area alt= “круг” shape= “circle”
coords= “269,119,20” href= “file://c:\windows\Рабочий стол\таблицы.html”>
<area alt= “прямоугольник” shape= “rect”
coords= “163,121,220,155” href= “file://c:\windows\Рабочий стол\списки.html”>
<area alt= “многоугольник” shape= “poly”
coords= “23,44,146,37,174,89,96,124,31,53” href= “file://c:\windows\Рабочий стол\абзац.html”>
</map>
<img src= “file://c:\windows\Рабочий стол\Fish.jpg” usemap= “#karta” alt= “karta”>
Проведите соответствующие эксперименты с обновленным вариантом html-страницы.
Использование карты дня организация переходов внутри страницы. Вставьте сразу же после стартового тега <body> метку для перехода:
<a name= “verh”></a>
В фрагменте:
<area alt= “прямоугольник” shape= “rect”
coords= “163,121,220,155” href= “file://c:\windows\Рабочий стол\списки.html”>
затем в атрибуте href измените ссылку - не на файл, а на метку. Поэкспериментируйте и с этим вариантом html-страницы.
Формы
Создание полей ввода. Создайте новый файл html-страницы следующего вида:
<html>
<head>
<title>Формы</title>
</head>
<body>
<h2>Формы</h2>
<h3>Поля ввода</h3>
<p><b><u>Фамилия</u></b>
<input type= “text”>
</body>
</html>
Откройте созданный файл в окне браузера.
Модернизируйте созданную html-страницу, включив в тег input атрибут value=”Фамилия И.О.” Просмотрите обновленный вариант страницы.
Флажки.Дополните созданную в предыдущем упражнении страницу «Формы» следующим фрагментом:
<hr>
<h3>Флажки</h3>
<p><b><u>Пол:<input type= “checkbox”> «Мужской»
<input type= “checkbox”> «Женский»
и проведите эксперименты с дополненной страницей.
Переключатели. Добавьте в html-страницу «Формы» следующий фрагмент:
<hr>
<h3>Переключатели</h3>
<p><b><u>Варианты действий:</u></b>
<p><input type= “radio” name= “s001”>
<input type= “text” value= “Сходить в театр”>
<p><input type= “radio” name= “s001”>
<input type= “text” value= “Сходить на рынок”>
<p><input type= “radio” name= “s001”>
<input type= “text” value= “Переписать лекцию”>
<p><input type= “radio” name= “s001” checked>
<input type= “text” value= “Лечь спать”>
Просмотрите обновленный вариант страницы.
Создание отдельных кнопок.Добавьте на страницу «Формы» фрагмент для построения трех типов кнопок - кнопки с рисунком, кнопки Enter для подтверждения ввода информации в форму и кнопки Reset для отмены ввода данных в форму.
<hr>
<h3>Отдельные кнопки</h3>
<input type= “image” src= “file://c:\windows\Рабочий стол\Image3.gif”>
<hr>
<input type= “submit” value= “Enter”>
<input type= “reset”>
Создание элемента «Список”. Дополните страницу «Формы» следующим фрагментом:
<hr>
<h3>Списки</h3>
<h3>Ваша профессия:
<select>
<option value=a>Инженер
<option value=b>Учитель
<option value=c>Врач
<option value=d>Ученый
</select></h3>
Создание областей для ввода текста. Дополните страницу «Формы» следующим фрагментом:
<hr>
<h2>Область ввода</h2>
<h3>Примечание:
<textareaname= “text001”rows=5cols=30>
Область для ввода текста.
</textarea>
</h3>
Здесь экономится место на странице за счет того, что сколь угодно большой текст будет прокручиваться в окне фиксированного размера.
Фреймы
Деление области просмотра по вертикали пополам. Создайте новый файл с именем Фреймы.html следующего содержания:
<html>
<head>
<title>Фреймы</title>
</head>
<body>
<frameset cols=50%,50%>
<frame src= “file://c:\windows\Рабочий стол\Формы.html”>
<frame src= “file://c:\windows\Рабочий стол\Таблицы.html”>
</frameset>
</body></html>
Деление области просмотра по горизонтали. Видоизмените файл Фреймы.html к следующему виду:
<html>
<head>
<title>Фреймы</title>
</head>
<body>
<frameset rows=150,30%,*>
<framesrc= “file://c:\windows\Рабочий стол\Лабораторная работа.html”>
<frame src= “file://c:\windows\Рабочий стол\Формы.html”>
<frame src= “file://c:\windows\Рабочий стол\Таблицы.html”>
</firameset>
</body></html>
Примечание.В данном примере для верхней горизонтальной области отведено 150 пикселов, для средней- тридцать процентов, а для нижней - все, что останется.
Деление области просмотра и по горизонтали, и по вертикали. Еще раз видоизмените файл Фреймы.html:
<html>
<head>
<title>Фреймы</title>
</head>
<body bgcolor= “white”>
<center><font size=6>ФРЕЙМЫ</font></center>
<hr color= “blue”>
<frameset rows=20%,60%,20%>
<frame src= “file://c:\windows\Рабочий стол\Бегущая строка.html” noresize>
<frame src= “file://c:\windows\Рабочий стол\Таблицы.html”>
<frame src= “file://c:\windows\Рабочий стол\Заголовки.html”scrolling= “yes”>
</frameset>
<frame src= “file://c:\windows\Рабочий стол\Абзац.html”>
</frameset>
</body>
</html>