- •Лабораторная работа № 1 ВвЕдение в нtml Предисловие
- •Подготовительные операции.
- •Бегущая строка на html-странице
- •Заголовки в html-страницах
- •Горизонтальная линия
- •Изменение общего дизайна html-страницы
- •Форматирование абзацев
- •Вставка изображений
- •Таблицы
- •Гиперссылки
- •Приложение 1. Название и коды цветов
Вставка изображений
Вставьте в html-документ «Абзацы» графический файл Image1.gif из папки «Internet». Для этого перед конечным тегом </body> этого документа вставьте строку
<imgsrc= “file:c:\Internet|Image.gif”>.
Списки
Маркированные списки.Создайте новыйhtml-файл следующего содержания:
<html>
<head>
<title>СПИСКИ</title>
</head>
<body>
<h2>МАРКИРОВАННЫЙ СПИСОК</h2>
<h3>На нашем огороде росли:</h3>
<ul>
<li>огурцы;
<li>помидоры;
<li>укроп.
</ul>
</body>
</html>
Откройте этот документ в окне браузера.
Нумерованные списки. В режиме «Источник» дополните предыдущий html- документ фрагментом:
<h2>Нумерованный список</h2>
<h3>Мои ближайшие планы:</h3>
<ol type= “1”>
<li>Написать статью в журнал;
<li>Посетить художественный музей;
<li>Подготовить к изданию сборник упражнений.
</ol>
Этот фрагмент должен находиться между конечными тегами </ul> и <body>. Просмотрите обновленный вариант документа.
Проведите эксперименты с нумерованным списком, задав разные способы нумерации при помощи атрибута type: type=“i” (нумерация римскими строчными символами), tуре=“I” (нумерация римскими прописными символами), type=“a” (нумерация латинскими строчными буквами) и type=“А” (нумерация латинскими прописными буквами).
Вложенные списки.Дополните html-документ еще одним фрагментом:
<h2>Вложенные списки</h2>
<h3>Мои планы на 2001 год:</h3>
<ul>
<li>В первом полугодии:
<oltype= “I”>
<li> Прочитать рассказ И.С. Тургенева «Му-Му»;
<li>Сходить с женой на рынок.
</ol>
<li>Во втором полугодии:
<oltype= “I”>
<li>Прочитать поэму Н.А. Некрасова «Мороз – красный нос»;
<li>Сходить в кинотеатр.
</ol>
<ul>
Таблицы
Создайте еще один файл под общим названием «Таблицы.html». Создайте в этом файле следующую html- страницу:
<html>
<head>
<title>ТАБЛИЦЫ</title>
</head>
<body>
<table border=4 cellspacing=3 cellpadding=10>
<tr><td bgcolor= “yellow”>Фамилия И.О.
<caption align= “top”>Таблица из одной ячейки</caption>
</table>
</body>
</html>
Просмотрите созданную страницу в браузере.
Проведите следующие эксперименты с созданным документом: задайте для стартового тега caption атрибут align= “bottom”, чтобы заголовок был не над таблицей, а под таблицей.
Задайте у стартового тега значение атрибута border=0, чтобы рамка у ячейки исчезла совсем.
Восстановите прежнее значение ширины боковой грани border=4 и увеличьте ширину фронтальной грани атрибутом cellspacing=30.
Измените размер пустого пространства, окружающие данные в ячейке атрибутом cellpadding=30.
Дополните предыдущую html-страницу следующим фрагментом:
<table border=4 cellspacing=3>
<caption>Сотрудники кафедры:</caption>
<tr><th bgcolor= “yellow”>Ф.И.О.
<th bgcolor= “yellow”>Должность
<tr><td>Иванов Н.И.
<td>Зав. Кафедрой
<tr><td>Чубайс А.Б.
<td>Доцент
</table>
Дополните html страницу еще одним вариантом таблицы:
<table border=4 cellspacing=3>
<caption>Продано книг:</caption>
<tr><th bgcolor= “yellow”>
<th bgcolor= “yellow”>2000 г.
<th bgcolor= “yellow”>2001 г.
<tr><th bgcolor= “yellow”>Художественных
<td>12500
<td>7500
<tr><th bgcolor= “yellow”>Научных
<td>250
<td>750
</table>
Обратите внимание: несмотря на то, что левая верхняя ячейка не используется, для нее задан цвет фона так же, как и для других ячеек заголовков. Это сделано для того, чтобы рамка таблицы в этом месте была правильно прорисована.
Добавьте в html-страницу «Таблицы» следующий фрагмент с примерами подбора оранжевых оттенков:
<table border=3 width=200>
<tr>
<td align= “center” bgcolor= “white”><b>Код</b>
<td align= “center” bgcolor= “white”><b>Цвет</b>
<tr><td>#ffb000<td bgcolor=#ffb000>1
<tr><td>#ffa800<td bgcolor=#ffa800>2
<tr><td>#ffa000<td bgcolor=#ffa000>3
<tr><td>#ff9800<td bgcolor=#ff9800>4
<tr><td>#ff9000<td bgcolor=#ff9000>5
<tr><td>#ff8800<td bgcolor=#ff8800>6
<tr><td>#ff8000<td bgcolor=#ff8000>7
<tr><td>#ff7800<td bgcolor=#ff7800>8
<tr><td>#ff7000<td bgcolor=#ff7000>9
<tr><td>#ff6800<td bgcolor=#ff6800>10
<tr><td>#ff6000<td bgcolor=#ff6000>11
<tr><td>#ff5800<td bgcolor=#ff5800>12
</table>
Примечание.Палитра оформлена в виде таблицы, часть ячеек которой раскрашена при помощи атрибута задания фона:
bgcolor=”#RRGGBB”.
Из примера видно, что задача подбора оранжевого оттенка сводится к подбору зеленой составляющей при максимальном значении красной.
Пример разрисовки радуги на web-странице:
<table border=0 width=100>
<tr><td bgcolor=#ff0000>к
<tr><td bgcolor=#ff7800>о
<tr><td bgcolor=#ffff00>ж
<tr><td bgcolor=#00ff00>з
<tr><td bgcolor=#43d8fb>г
<tr><td bgcolor=#0000ff>с
<tr><td bgcolor=#8000c0>ф
</table>
Использование таблицы для размещения рядом заголовка и рисунка. Для этого вставьте в html-страницу «Таблицы» такой фрагмент:
<table border=0>
<tr><td><h1>Кафедра<i>ФВТ</i></h1>
<td><img src= “file://c:\Internet\image1.gif”>
</table>
Объединение ячеек таблицы. Вставьте в html-страницу «Таблицы» следующий фрагмент:
<table border=4 cellspacing=0 width=70%>
<tr><td><b>Кафедра</b>
<td><b>Состав кафедры</b>
<tr><tdrowspan=3>Факультет
<td>Научная лаборатория
<tr><td>Методический кабинет
<tr><td>Компьютерный класс
<tr><td colspan=2 align= “center”>РГРТА
</table>
Примечание.Для того чтобы объединить ячейки столбца, необходимо использовать атрибут rowspan для элемента td, соответствующего верхней из объединяемых ячеек. Значение атрибута представляет собой количество объединяемых ячеек. Аналогичным образом объединяются ячейки в строке. Для этого используется атрибут colspan.
Объединение в одну ячейку ячеек из нескольких столбцов и нескольких строк. Дополните html- страницу еще одним фрагментом построения таблицы:
<tableborder=4cellspacing=0width=70%>
<tr><td><b>Заголовок 1</b>
<td><b>Заголовок 2</b>
<td><b>Заголовок 3</b>
<tr><td rowspan=4 colspan=2>Ячейка 1
<tr><td>Ячейка 2
<tr><td> Ячейка 3
<tr><td> Ячейка 4
<tr><td colspan=3 align= “center”> Ячейка 5
</table>