- •Лабораторная работа № 1 ВвЕдение в нtml Предисловие
- •Подготовительные операции.
- •Бегущая строка на html-странице
- •Заголовки в html-страницах
- •Горизонтальная линия
- •Изменение общего дизайна html-страницы
- •Форматирование абзацев
- •Вставка изображений
- •Таблицы
- •Гиперссылки
- •Приложение 1. Название и коды цветов
Заголовки в html-страницах
Создайте html-страницу следующего вида:
<html>
<head>
<title>Заголовки</title>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
</body>
</html>
Откройте эту web-страницу в браузере Internet Explorer. Обратите внимание, что по умолчанию представленные заголовки выровнены по левой границе. Заголовок 1 выполнен стилем Н1 (размер шрифта 24 пункта), Заголовок 2 - стилем Н2 (размер шрифта 18 пунктов), Заголовок 3- стилем НЗ (14 пунктов), Заголовок 4- стилем Н4 (12 пунктов), Заголовок 5 - стилем Н5 (10 пунктов) и Заголовок 6 - стилем Н6 (8 пунктов).
В окне браузера откройте окно источника и видоизмените текст html-документа следующим образом:
дополните стартовый тег элемента Н2 атрибутом align=“center” (выравнивание по центру), а стартовый тег элемента Н3 - атрибутом align=“right” (выравнивание по правой границе). Сохраните сделанные изменения и просмотрите обновленный вариант html- документа.
Горизонтальная линия
Вставьте в текст html-документа «Заголовки» после стартового тега body элемент <hr>. Сохраните сделанное изменение в файле и просмотрите обновленный вид html-страницы. Обратите внимание на белый цвет построенной горизонтальной линии.
Добавьте в элемент hr атрибут color= “red” для преобразования этой горизонтальной линии в красный цвет. Проверьте, так ли это на самом деле или нет. Вставьте перед конечным тегом body элемент <hr color= “olive”> для обрамления списка заголовков снизу горизонтальной линией оливкового цвета.
Измените толщину нижней горизонтальной линии, включив в состав нижнего тега hr атрибут size=50.
Измените длину нижней горизонтальной линии, включив в состав нижнего тега hr атрибут width=200. В результате у вас на странице появится прямоугольник пурпурного цвета.
Выровняйте полученный в предыдущем упражнении прямоугольник по правой границе страницы, добавив в тот же тег hr атрибут align=”right”.
Создайте из горизонтальной линии вертикальную, задав для нее атрибуты size=100 и width=2.
Создайте горизонтальную линию, задав для нее ширину в процентном отношении
<hr width=25%>
Примечание.Подобную черту часто ставят в конце html- документа.
Изменение общего дизайна html-страницы
Оформите фон страницы синим цветом, а цвет букв в строках заголовков оформите желтым цветом. Для этого в состав стартового тега body включите атрибуты bgcolor= “#0000ff” (синий фон страницы) и text=”#ffff00’’ (желтый цвет букв текста):
<body bgcolor= “#0000ff” text= “#ffff00”>
Проведите соответствующие эксперименты с html-страницей «Заголовки».
Задание для html-страницы фонового узора.Воспользуйтесь графическим файлом image2.gif (орнамент) из папки Internet для создания орнамента для всего html-документа. Для этого в состав стартового тега body включите атрибут
background= “file://C:\Internet\image2.gif”.
Форматирование абзацев
Создайте новый файл html-страницы. В этот файл введите отрывок из рассказа М.Зощенко «Собачий нюх»:
<html>
<head>
<title>Форматирование абзацев</title>
</head>
<body bgcolor= “#ffff00”>
<h1 align= “center”>М.Зощенко</h1>
<h2 align= “center”>Собачий нюх (отрывок)</h2>
<р>У купца Еремея Бабкина сперли енотовую шубу. Взвыл купец Еремей Бабкин. Жалко ему, видите ли, шубы.
<p>Шуба то, говорит, больно хороша, граждане. Жалко. Денег не пожалею, а уж найду преступника. Плюну ему в морду.
<р>И вот вызвал Еремей Бабкин уголовную собаку- ищейку. Является этакий человек в кепочке, в обмотках,, а при нем собака. Этакая сабочища – коричневая, морда острая и несимпатичная.</р>
</body>
</html>
Откройте созданный html- документ в браузере Internet Explorer.
Выравните первый абзац но правому краю, второй по центру, а третий абзац - по ширине. Для этого к соответствующим .элементам <p> добавьте соответствующие атрибуты align: <p align=“right”>, <p align= “center”>, <p align=“justify”>.
Выделите в первом абзаце с помощью элемента <b> полужирным шрифтом словосочетание «Еремея Бабкина» (<b>Еремея Бабкина</b>), а с помощью элемента <u> подчеркиванием словосочетание «енотовую шубу» (<u>енотовую шу6у</u>).
Во втором абзаце словосочетание «денег не пожалею» выделите одновременно и полужирным шрифтом, и с помощью элемента <big> увеличенным размером шрифта (<b><big> денег не пожалею </big></b>).
В третьем абзаце с помощью элемента <small> выделите уменьшенным размером шрифта словосочетание «уголовную собаку-ищейку» и с помощью элемента <strike> перечеркиванием - словосочетание «в обмотках».
Дополните hlml- окумент «Абзацы» строкой:
<blockquote>М.Зощенко – мастер короткого рассказа.</blockquote>
Обратите внимание, что текст, помеченный элементом blockquote, располагается на странице с отступом. Этим пользуются для обозначения цитат.
Дополните html-документ «Абзацы» строкой:
<p><font size=7>А.П. Чехов, Марк Твен и М. Зощенко – мастера короткого рассказа!</font>
Примечание.Атрибут size может принимать значение от 7 (максимальный размер шрифта), до 1 (минимальный размер шрифта).
Дополните стартовый тег элемента font атрибутом color=”red” для задания красного цвета шрифта.
Установите в стартовом теге элемента font в атрибуте size не абсолютное значение размера шрифта, а относительное (размер по отношению к базовому значению): size=+Число или size=-Число.
Примечание.При назначении величины для size необходимо учитывать величину базового размера. Обе они в сумме должны соответствовать одному из абсолютных размеров. По умолчанию задан размер шрифта size=3.