Ознакомление с принципами, лежащими в основе языка разметки гипертекста HTML. Формирование навыков форматированиятекста и использования списков и таблиц.
Задание
1. Сделайте резервную копию полученной дискеты и особенно содержащихся в ней HTML-файлов, поскольку они в процессе выполнения лабораторной работы будут изменяться.
2. Изучите Методические указания или соответствующие разделы пособий [1,2].
3. Изучите структуру Web-страницы. (Файл strukt.htm). При нажатии на эту ссылку вы увидите шаблон простейшей Web-страницы. Проделайте следующие действия.
3.1. На вкладке Вид браузера Microsoft Internet Explorer укажите режим В виде HTML. Вы увидите страничку Блокнота, содержащую HTML-код рассматриваемой Web-страницы.
3.2. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в окне браузера
3.3. Используя Блокнот в качестве Редактора, внесите изменения в HTML-код страницы, изменив ее заголовок (Элемент <TITLE>), назвав ее Моя первая Web-страница. Сохраните файл strukt.htm, нажмите кнопку Обновить браузера и убедитесь, что строка заголовка окна браузера изменилась.
3.4. Укажите в элементе <META> свою фамилию и измените набор ключевых слов.
3.5. Измените цвет фона и содержание комментария.
3.6. Вместо заголовков 1,2,3,4,5,6 запишите соответственно ваши: 1. Фамилия, 2. Имя, 3. Отчество, 4. № учебной группы, 5. Название факультета, 6. Название специальности.
3.7. После Ссылки1 сообщите сведения о вашей работе.
3.8. Сохраните файл strukt.htm, нажмите кнопку Обновить браузера и убедитесь, что внесенные изменения нашли свое отражение в окне браузера.
3.9. Не пользуясь шаблоном (Файл strukt.htm), создайте самостоятельно подобную Web-страницу (Файл strukt1.htm).
3.9. Измененный файл strukt.htm и файл strukt1.htm включите в отчет по лабораторной работе.
4. Изучите и запомните элементы форматирования текста (Файл Text.htm). При нажатии на эту ссылку вы увидите Web-страницу, включающую различные элементы форматирования текста. Проделайте следующие действия.
4.1. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в окне браузера. Используя Методические указания или соответствующие разделы пособий [1,2], а также примеры, приведенные на странице, запомните основные элементы форматирования текста.
4.2. Используя Блокнот в качестве Редактора, внесите изменения в HTML-код страницы, изменив строку Форматирование текста на Мой первый опыт форматирования текста. В новой строке измените цвета, размеры и расположение букв. Сохраните файл Text.htm, нажмите кнопку Обновить браузера и убедитесь, что строка изменилась.
4.3. Замените тексты первого, второго, центрированного абзацев и, добавив четвертый центрированный абзац , напечатав соответственно свои данные:
1. Мой рост __ 1 м __см
2. Мой вес__кг
3. Цвет волос_____
4. Цвет глаз_____
Подберите при этом размер, жирность и цвет шрифта соответственно этим данным.
4.4. В первой бегущей строке укажите свои ФИО, домашние адрес и № телефона, а во второй место работы, должность и рабочий № телефона. Измените параметры шрифтов и фонов по своему усмотрению.
4.5. В каждой строке, иллюстрирующей применение элементов форматирования HTML, запишите свои оригинальные тексты.
4.6. Используя элементы форматирования текста, запишите копии первых двух страничек вашей зачетной книжки и студенческого билета.
4.7. Измененный файл Text.htm и файлы ZachetnKnizhka.htm, StudBilet.htm включите в отчет по лабораторной работе.
5. Изучите и запомните таблицы стилей (Файл style.htm). При нажатии на эту ссылку вы увидите Web-страницу, включающую примеры использования таблиц стилей. Проделайте следующие действия.
5.1. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в окне браузера. Используя Методические указания или соответствующие разделы пособий [1,2], а также примеры, приведенные на странице, запомните основные приемы использования таблиц стилей, применяемых дляформатирования текста.
5.2. В строке Заголовок 2 укажите свои ФИО, домашние адрес и № телефона, а в строке Заголовок 3 - место работы, должность и рабочий № телефона. Измените параметры шрифтов и фонов по своему усмотрению.
5.3. Внесите не менее пяти изменений, улучшающих дизайн страницы.
5.4. Измененный файл style.htm включите в отчет по лабораторной работе.
6. Изучите и запомните использование списков и таблиц (Файл ListTable.htm). При нажатии на эту ссылку вы увидите Web-страницу, включающую примеры использования списков и таблиц. Проделайте следующие действия.
6.1. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в окне браузера. Используя Методические указания или соответствующие разделы пособий [1,2], а также примеры, приведенные на странице, изучите и запомните основные приемы использования списков и таблиц.
6.2. По примеру вложенных списков отобразите сведения о вас и ваших товарищах:
1. Иванов И. И.
1. Рост 170 см.
2. Вес 63 кг.
3. Цвет глаз карие
2. Петров П. И.
1. Рост 160 см.
2. Вес 55 кг.
3. Цвет глаз голубые
3. Сидорова Ф. Ф.
1. Рост 180 см.
2. Вес 55 кг.
3. Цвет глаз голубые
Подберите при этом размер, жирность и цвет шрифта соответственно этим данным.
6.3 Аналогично отобразите сведения о вас и ваших товарищах в таблицах 1, 2, 3, скорректировав соответственно содержание заголовков и ячеек таблиц.
6.4. Внесите не менее пяти изменений, улучшающих дизайн таблиц (Цвета шрифтов, фона, границы и т. д.).
6.5. Измененный файл ListTable.htm включите в отчет по лабораторной работе.
