 |
|
|
Архитектура Астрономия Аудит Биология Ботаника Бухгалтерский учёт Войное дело Генетика География Геология Дизайн Искусство История Кино Кулинария Культура Литература Математика Медицина Металлургия Мифология Музыка Психология Религия Спорт Строительство Техника Транспорт Туризм Усадьба Физика Фотография Химия Экология Электричество Электроника Энергетика |
Задание 4. Создание рисунка и использование его на Web-странице
Оценка лабораторной работы Максимально за выполнение лабораторной работы можно получить 5 баллов.
Начало работы Элементы Web-странички, создаваемые в процессе заданий, должны соответствовать заданной теме (по вариантам):
Задания Задание 1. Создание простейшей Web-страницы. Порядок выполнения: 1. Запустите текстовый редактор Блокнот (Пуск ► Программы ► Стандартные ► Блокнот). 2. Введите следующий документ: <НТМL> <HEAD> <ТITLE>Заголовок документа соответствующий вашей теме</TITLE> </HEAD> <BODY BGCOLOR ="любой цвет фона[1]" TEXT="любой цвет текста"> Содержание документа </BODY> </HTML> 3. Сохраните этот документ под именем first.htm. Примечание. Обратите внимание, чтобы редактор Блокнот автоматически не сохранил Ваш файл с расширением .TXT. 4. Откройте созданный документ с помощью любого браузера. 5. Посмотрите, как отображается этот файл – простейший корректный документ HTML.
Задание 2. Изучение приемов форматирования абзацев. Порядок выполнения: 1. Если это упражнение выполняется не сразу после предыдущего, откройте документ first.html в программе Блокнот. 2. Перед выполнением задания 2 введите текст «Задание 2». Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после текста «Задание 2», а его конкретное содержание должно соответствовать вашей теме. 3. Введите заголовок первого уровня, заключив его между тегами <Н1> и </Н1>. 4. Введите заголовок второго уровня, заключив его между тегами <Н2> и </Н2>. 5. Введите отдельный абзац текста, начав его с тега <Р>. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно. 6. Введите тег горизонтальной линейки <HR>. 7. Введите еще один абзац текста, начав его с тега <Р>. 8. Сохраните этот документ под именем Ваша фамилия.html 9. Откройте ваш файл в любом браузере. 10. Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране.
Задание 3. Создание гиперссылок. Порядок выполнения: 1. Если это упражнение выполняется не сразу после предыдущего, откройте документ Ваша фамилия.html в программе Блокнот. 2. Укажите в тексте номер задания – текст «Задание 3». 3. Введите текст ссылки, соответствующий вашей теме. 4. Введите тег: <А HREF="http:///www.site.ru">. 5. Введите фразу: Ссылка. 6. Введите закрывающий тег </A>. 7. Введите после ссылки другой текст. 8. Сохраните Ваш документ. 9. Откройте ваш файл в браузере. 10. Убедитесь в том, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием). 11. Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка. 12. Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.
Задание 4. Создание рисунка и использование его на Web-странице Порядок выполнения: 1. Откройте программу Paint (Пуск ► Программы ► Стандартные ► Paint). 2. Нарисуйте произвольный рисунок. 3. Сохраните рисунок под именем Ваша фамилия.gif (в формате GIF). 4. Откройте документ Ваша фамилия.html в программе Блокнот. 5. Укажите в тексте номер задания – текст «Задание 4». 6. Введите тег <IMG SRC ="Ваша фамилия.gif" ALIGN="LEFT">. 7. Сохраните Ваш документ. 8. Откройте Ваш файл. Посмотрите на получившийся документ, обращая особое внимание на изображение. 9. Вернитесь в программу Блокнот и, измените значение атрибуту: ALIGN="RIGHT". Сохраните файл под тем же именем. 10. Вернитесь в браузер и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов. 11. Вернитесь в программу Блокнот и добавьте в тег <IMG> атрибуты: HSPACE=40 VSPACE=20. Добавьте текст, длина которого позволит заполнить пространство вокруг рисунка. Сохраните файл под тем же именем. 12. Вернитесь в браузер и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
Поиск по сайту: |