- •«Мурманский государственный технический университет»
- •Методические указания к лабораторным работам Основы создания Web-документа Мурманск
- •Введение
- •Лабораторная работа №1 Основы html
- •Раздел 1. Структура документа
- •Раздел 2. Обязательные метки
- •Раздел 3. Непарные метки
- •Раздел 4. Форматирование шрифта
- •Раздел 5. Списки
- •5.4. Вложенные списки
- •Лабораторная работа №2 Создание гиперссылок, работа с изображениями
- •Раздел 1. Гиперссылки
- •1.1. Локальные ссылки
- •1.2. Ссылки на ресурсы
- •Раздел 2. Цветовая гамма html-документа
- •Раздел 3. Бегущая строка Задание. Бегущая строка
- •Раздел 4. Изображения в html-документе
- •4.1. Обтекание графики текстом в документе html
- •4.2. Выравнивание текста html-страницы
- •4.3. Пустая область вокруг изображения html-страницы
- •4.4. Списки с графическими маркерами html-страницы
- •4.5. Задание размеров изображения html-документа
- •Лабораторная работа №3 Работа с таблицами.
- •Раздел 1. Создание таблиц
- •1.1. Фон таблицы
- •1.2. Задание высоты и ширины ячеек
- •1.3. Задание выравнивния в ячейке. Объединение ячеек
- •Раздел 2. Вложенные таблицы
- •Раздел 3. Границы таблицы.
- •Лабораторная работа №4 Работа с формами
- •Раздел 1. Форма.
- •Тип элемента radio
- •Тип элемента checkbox
- •Тип элемента text
- •Тип элемента password
- •Тип элемента reset
- •Тип элемента submit
- •Тип элемента image
- •Элемент select
- •Элемент textarea
- •Лабораторная работа №5
- •Раздел 1. Работа с фреймами
- •Задания для самостоятельного выполнения:
- •Раздел 3. Зарезервированные имена фреймов
- •Лабораторная работа №6 Работа с картой изображений
- •Раздел 1. Карта-изображение
- •1.1. Основные теги для создания карты
- •Лабораторная работа №7 Заголовок html-документа
- •Раздел 1. Заголовок html-документа
- •Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. Цвет и фон
- •Раздел 1. Способы применения правила css к Html-документу
- •Метод 1: Инлайн/In-line (атрибут style)
- •Метод 2: Внутренний (тэг style)
- •Метод 3: Внешний (ссылка на таблицу стилей)
- •Раздел 2. Цвет и фон
- •2.1. Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Лабораторная работа №9 Шрифты. Ссылки
- •Раздел 1. Свойства шрифтов
- •Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Сокращенная запись font
- •Раздел 2. Текст
- •Свойство text-indent
- •Раздел 3. Ссылки
- •Лабораторная работа№10 Идентификация и группирование элементов (class и id) Группирование элементов (span и div)
- •Раздел 1. Группирование элементов с помощью class
- •Раздел 2. Идентификация элемента с помощью id
- •Лабораторная работа№11 Боксовая модель
- •Раздел 1. Боксовая модель
- •Заполнение элемента
- •Установка ширины блока[width]
- •Установка высоты блока[height]
- •Размещение элементов на странице
- •Всплывающие элементы (поплавки)
- •Свойство float
- •Свойство clear
- •Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Раздел 3. Работа со слоями
- •Рекомендуемая литература
Раздел 2. Вложенные таблицы
Задание 3.10
Наберите в редакторе «блокнот» текст следующего HTML-документа. Данный пример иллюстрирует использование вложенных таблиц.
<html>
<head>
<title> вложенные таблицы </title></head>
<table>
<tr>
<td width="200" valign="top" bgcolor= "#00FF00" align="center" >
C каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутствие заметно.
Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.
</td>
<td width="20" bgcolor= "yellow"> </td>
<td width="200" valign="top" bgcolor= "#00FF00" align="center">
Boт таблица, которая показывает сколько бук, бяк и других обитает в интернете: <br><br>
<table cellspacing="3">
<tr>
<td width="50" bgcolor= "yellow">буки</td>
<td bgcolor= "yellow">65% населения</td>
</tr>
<tr>
<td width="50" bgcolor= "yellow">бяки</td>
<td bgcolor= "yellow">20% населения</td>
</tr>
<tr>
<td width="50" bgcolor= "yellow">др.</td>
<td bgcolor= "yellow">15% нaceлeния</td>
</tr>
</table>
</table>
Сохраните документ с именем пример3_10.htm, откройте в браузере.
Раздел 3. Границы таблицы.
Теперь поэкспериментируем с границами таблиц.
Для этого воспользуемся тегами:
bgcolor - цвет фона в таблице или ячейке;
border - толщина рамки таблицы;
cellspaсing - расстояние между ячейками;
cellpadding - расстояния от рамки до содержимого ячейки.
Начнем с обычной таблицы.
Задание 3.11
Наберите в редакторе «блокнот» текст следующего HTML-документа.
<html>
<head>
<title>пример 3_11 Границы</title>
</head>
<caption> Границы </caption>
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
</tr>
<tr>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
</tr>
<tr>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
</tr>
</table>
</html>
Сохраните документ с именем пример3_11.htm, откройте в браузере.
Устанавливая атрибут border равным единице, мы не получаем рамку толщиной в один пиксель. Это происходит из-за того, что при отрисовке таблицы используются псевдотрехмерные границы и реальная толщина рамки всегда больше указанной.
Есть другой способ, позволяющий делать красивые таблички с тонкими рамками. И этот способ - вложенные таблицы. В этом случае во внутренней таблице устанавливается ненулевое расстояние между ячейками, а во внешней прописывается цвет фона равный цвету рамки. Благодаря этому в зазоры ячеек становится видно фон внешней таблицы. И если мы закрасим ячейки внутренней таблицы цветом фона страницы, то нашему взору предстанет красивая табличка с тонкими рамками.
Задание 3.12
Скопируйте пример3_11 и внесите указанные изменения:
<html>
<head>
<title>пример 3_12 Границы</title>
</head>
<caption> тонкие границы </caption>
<table width="368" cellpadding="0" cellspacing="0" border="0"
bgcolor="#000000"><tr><td>
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr>
<td bgcolor="#ffffff"> </td>
<td bgcolor="#ffffff"> </td>
<td bgcolor="#ffffff"> </td>
<td bgcolor="#ffffff"> </td>
</tr>
<tr>
<td bgcolor="#ffffff">  </td>
<td bgcolor="#ffffff"> </td>
<td bgcolor="#ffffff"> </td>
<td bgcolor="#ffffff"> </td>
</tr>
<tr>
<td bgcolor="#ffffff">  </td>
<td bgcolor="#ffffff">  </td>
<td bgcolor="#ffffff"> </td>
<td bgcolor="#ffffff"> </td>
</tr>
</table>
</td></tr></table>
</html>
Сохраните документ с именем пример3_12.htm, откройте в браузере.
Задания для самостоятельного выполнения:
Создайте документы, выводящие следующие виды таблиц:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1-1 |
1-2 |
1-3 |
1-4 |
2-1 |
2-2 |
2-3 |
2-4 |
3-1 |
3-2 |
3-3 |
3-4 |
4-1 |
4-2 |
4-3 |
4-4 |
Контрольные вопросы:
Как создать простую таблицу?
Как объединить ячейки?
Как изменить толщину рамки таблицы?
Как закрасить определенную ячейку?
Как создать вложенную таблицу?