- •Лабораторная работа № 1 ВвЕдение в нtml Предисловие
- •Подготовительные операции.
- •Бегущая строка на html-странице
- •Заголовки в html-страницах
- •Горизонтальная линия
- •Изменение общего дизайна html-страницы
- •Форматирование абзацев
- •Вставка изображений
- •Таблицы
- •Гиперссылки
- •Приложение 1. Название и коды цветов
Подготовительные операции.
Создайте в папке «Диск С:» новую папку «web-страницы», в которой вы будете постепенно накапливать результаты экспериментов при выполнения представленных упражнений. Откройте папку «Мой компьютер». Откроите папку «Диск С:». Выполните на свободном месте в окне открытой папки «Диск С:» щелчок правой кнопкой мыши. В открывшемся контекстном меню выберите команду «Создать»», а в открывшемся подменю - команду «Папка». Введите с клавиатуры в поле ввода появившегося значка новой папки название папки «web-страницы» и нажмите клавишу Enter.
На рабочем столе и в папке «web-страницы» создайте графические файлы рисунка и фонового узора в формате .gif или .jpg.
Это, например, можно сделать так. Откройте редактор Word. Задайте в программном окне Word команду «Рисунок» из меню «Вставка», и в открывшемся подменю - команду «Из файла». В диалоговом окне «Вставка рисунка» выберите папку «Popular» (она находится в папке «Clipart»). В окне Popular выделите подсветкой один из представленных графических файлов (например, графический файл Agrce.wmf) и щелкните кнопку «Добавить». В итоге в окно документа Word вы вставите соответствующий рисунок. Сохраните теперь этот документ с вставленным рисунком в файле непосредственно на рабочем столе, задав тип файла «Документ HTML». Вы увидите, что наряду с созданным файлом в формате html редактор Word сформирует и графический файл вставленного рисунка в формате .gif присвоив ему имя image1. Выделите подсветкой значок этого файла и комбинацией клавиш Ctrl-C скопируйте этот файл в буфер обмена. Затем откройте созданную в предыдущем упражнении папку «web- страницы» и в окне этой папки задайте команду «Вставить»» из меню «Правка».
Точно такую же процедуру выполните и при создании графического файла для фонового узора. В окне Word задайте команду вставки рисунка из файла, но в данном случае укажите в диалоговом окне «Вставка рисунка» папку «windows’», а в ней - один из графических файлов фоновых уборов (например, файл «Орнамент.bmp»). И в этом случае, при сохранении документа в формате html, Word преобразует вставленный графический файл из формата .bmp в формат .gif, присвоив имя файлу image2. Скопируйте и этот файл в папку «web- страницы».
Примечание. Если на нашем компьютере установлен один из графических редакторов, поддерживающих формат .gif (например, PhotoFinish 3.0), то можно поступить еще проще - открыть в окне этого редактора рисунок или фоновый узор в одном формате, а затем его же сохранить в файле, но уже в формате jpg.
Бегущая строка на html-странице
Для создания бегущей строки щелкните правой кнопкой мыши на свободном месте рабочего стола, выберите в открывшемся контекстном меню команду «Создать», а в подменю - команду «Текстовый документ». На рабочем столе появится значок созданного файла с именем «Текстовый документ.txt». Откройте этот файл двойным щелчком мыши на созданном значке. В открывшемся окне текстового редактора «Блокнот» взведите текст html-страницы для формирования бегущей строки:
<html>
<head>
<title>Бегущая строка</title>
</head>
<body>
<marquee bgcolor=”green” height=50 align=”middle”>
Лабораторная работа
</marquee>
</body>
</html>
Сохраните набранный текст html-страницы, задав команду «Сохранить» из меню «Файл». Закройте окно Блокнота. Выполните щелчок правой кнопкой мыши на значке созданного файла. В открывшемся контекстном меню выберите команду «Переименовать». Вместо имени файла «Текстовый документ.txt» введите имя «бегущая строка.html» и нажмите клавишу Enter.
Появится диалоговое окно «Переименование» с предостережением:
«После смены расширения имени файла этот файл может оказаться недоступным. Изменить расширение?». Щелкните кнопку «Да» в этом диалоговом окне. Обратите внимание на изменение вида значка у созданного файла - это уже файл html-страницы. Для открытия созданного файла в браузере Internet Explorer выполните двойной щелчок на значке html-страницы.
По умолчанию для бегущей строки автоматически установлены следующие атрибуты: direction=”left” (направление движения справа налево) и behavior= “scroll” (дойдя до края окна бегущая строка уходит из поля зрения, а затем появляется с противоположной стороны) и 1оор= ? (бесконечное число раз прохождения бегущей строки).
Изменение параметров бегущей строки. Проведите эксперименты с бегущей строкой, задав в стартовом теге marquee следующие варианты атрибутов:
- смена направления движения строки Direction= “right”(не справа налево, а слева направо);
- смена поведения строки Behavior=“slide» (строка появляется из-за края окна, достигает противоположного и останавливается);
- behavior= “alternate” (строка движется вправо или влево, «отражаясь» от краев окна и меняя направление движения);
- сдвиг бегущей полосы по горизонтали вправо hspace= смещение в пикселах;
- изменение фонового цвета bgcolor= “цвет” (bgcolor=”yellow” – желтый цвет, bgcolor= “red” – красный цвет, bgcolor= “blue” – синий цвет и т.д.);
- ограничение количества проходов строки по экрану loop= число;
- изменение скорости движения строки scrollamount=число (1 - минимальная скорость, больше 10- максимальная) или scrolldelay= число (строка будет двигаться рывками).
Для проведения экспериментов поступайте так. В окне Internet Explorer задайте команду «Источник» из меню «Вид». Проведите корректировку текста html-страницы. Сохраните сделанные изменения в файле командой «Сохранить» из меню «Файл». Закройте окно источника командой «Выход» из меню «Файл». Наконец, в окне Internet Explorer задайте команду «Обновить» из меню «Вид».
Примечание.Указанную технологию создания файлов html— страниц и проведения с этими файлами экспериментов будем использовать и во всех других упражнениях.
Сохраните созданный файл в папке «web- страницы».