- •Лабораторная работа №1
- •Задания
- •Тема. Оформление страницы.
- •Контрольные вопросы
- •Лабораторная работа №2
- •Задания
- •Контрольные вопросы
- •Лабораторная работа №3
- •Задания
- •Контрольные вопросы
- •Лабораторная работа №4
- •Задания
- •Контрольные вопросы
- •Лабораторная работа №5
- •Задания
- •Контрольные вопросы
- •Лабораторная работа №6
- •Задания
- •Контрольные вопросы
Лабораторная работа №1
Тема. Оформление страницы
Цель. Создание простейшего документа HTML. Особенности оформления текстовой информации.
Задания
-
Запустите текстовый редактор Блокнот (ПускПрограммыСтандартныеБлокнот).
-
Введите следующий документ:
<HTML>
<HEAD>
<TITLE>Оформление страницы </TITLE>
</HEAD>
<BODY>
Тема. Оформление страницы.
Первый лист
</BODY>
</HTML>
Сохранить документ в рабочем каталоге под именем index.htm. Не забудьте дать файлу расширение (.htm). Не закрывая редактор Блокнота выполните остальные пункты лабораторной работы.
-
Запустите программу Internet Explorer. Дайте команду (ФайлОткрыть). Щелкните на кнопке Обзор и откройте файл index.htm. На экране отобразиться содержимое вашей первой страницы.
-
Вернитесь к тексту в Блокноте. Добавьте после тега <BODY> заголовок первого уровня, заключив его между тегами <H1></H1>.
-
Сохраните изменения в блокноте и для обновления страницы в Internet Explorer (Вид Обновить).
-
Введите заголовок второго и третьего и четвертого уровня. Примените атрибут центрирования к первому заголовку, выравнивание вправо и влево к третьему четвертому заголовку соответственно.
-
Введите текст стихотворения, начав его с тега <P>.
-
Используя, теги изменения начертания текста (курсив, полужирный, подчеркнутый, зачеркнутый) преобразуйте информацию на вашей странице.
-
Отобразите на вашей странице слово цветными буквами (каждая буква своим цветом).
-
Отобразите на вашей странице слово с различной высотой букв (каждая последующая бука больше предыдущей).
-
Замените тег <P> на <PRE>, затем на тег <NOBR>.
-
Измените цвет фона страницы с белого на любой другой тон.
-
Измените цвет фона на фоновый рисунок.
-
Используя тег <HR> нарисуйте в нижней части вашей страницы линия светло голубого цвета, толщиной в 20 пунктов, длинной в половину окна браузера, расположенную но центру экрана (горизонтальное выравнивание).
Контрольные вопросы
-
Где отображается содержимое тега <TITLE>?
-
Как и где отображается содержимое тега<BODY>?
-
Что происходит с содержимым окна при уменьшении ширины?
-
Сколько строк на экране занял текст помещенный в тег <BODY>? Почему?
-
Что отобразиться на экране при выполнении команды Internet Explorer (ВидВ виде HTML)?
-
Как измениться отображаемый фрагмент текста при использовании тега <P> или тега <NOBR>?
-
Что понимается под термином «Атрибут»?
-
В каком теге и какой атрибут можно изменить цвет текста во всем документе, в абзаце?
Лабораторная работа №2
Тема. Стилевое оформление текста
Цель. Создание и применение стилей для оформления текста.
Задания
-
Запустите текстовый редактор Блокнот. Создайте HTML файл, содержащий в заголовке окна наименование темы лабораторной работы. Задайте файлу имя 2.htm.
-
Создайте стиль для тега <BODY>. Задайте цвет фона – темно синий.
-
Введите абзац текста. Измените цвет и размер букв в веденном абзаце, используя тег <FONT>.
-
Создайте стиль для тега <P> с именем Paragraph1. Задав цвет и размер букв, стиль шрифта.
-
Введите еще один абзац текста. Примените к нему созданный вами стиль Paragraph.
-
Установите синий цвет для трех типов заголовков, используя возможность присвоения свойства нескольким тегам.
-
Наберите строку текста, задав размер шрифта 250 пикселей, цвет букв - белый.
-
Наберите строку текста, задав размер шрифта 65 пикселей, цвет букв – красный. Отобразите текст этой строки таким образом, чтобы он накладывался на текст первой строки, а не располагался ниже.
-
Создайте стиль:
.second {color: #FF00FF}
-
Примените созданный в пункте 9 стиль к двум заголовкам:
<H3 class= second> Стильный заголовок </H3>
<H3> Простой заголовок </H3>
Проанализируете, какой вид имеет текст заголовков.
-
Создайте CSS – файл для хранения таблицы стилей. Перенесите все стили в этот файл. Подключите этот файл к вашей странице используя тег <LINK>. Примените созданные вами стили на странице.