LAB6 Захаров А.Е. (Лабораторная работа 6)

МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ (ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)

ИНСТИТУТ АВТОМАТИКИ И ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ

КАФЕДРА ПРИКЛАДНОЙ МАТЕМАТИКИ

Лабораторная работа № 6.

Разработка web-страниц,

содержащих таблицы и списки.

Выполнил

студент группы А-13-08

каф. Прикладной Математики

Захаров Антон

Преподаватель

Куриленко Иван Евгеньевич

Москва, 2012

Цель работы

Научиться оформлять таблицы на WEB-страницах. Получить навыки оформления маркированных и нумерованных списков на WEB-страницах.

Подготовка к работе

1. Ознакомиться с тегами HTML, отвечающими за разметку таблиц.

2. Ознакомиться со стилями таблиц в HTML.

3. Ознакомиться со способом разметки маркированных списков.

4. Ознакомиться со способом разметки нумерованных списков.

Порядок выполнения работы

1. Добавить на одну из страниц разработанного ресурса таблицу из списка ниже (9 вариант).

2. Создать информационную таблицу с объединением ячеек, выделением ячеек цветом, границей.

3. Разработать страницу, содержащую несколько маркированных списков с различными типами маркеров.

4. Разработать страницу, содержащую несколько нумерованных списков с различными типами нумерации.

5. Разработать страницу, содержащую маркированный список нумерованных списков.

Подготовка к работе.

1. Знакомство с тегами HTML, отвечающими за разметку таблиц.

Тег предназначен для создания заголовка к таблице и может размещаться только внутри контейнера

, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.

Атрибуты: align, valign.

Элемент

служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов и

. Внутри допустимо использовать следующие элементы: , , , , , и . , ,

Таблицы с невидимой границей долгое время использовались для вёрстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашёл воплощение на многих сайтах, пока ему на смену не пришёл более современный способ вёрстки с помощью слоёв.

Атрибуты: align, background, bgcolor, border, bordercolor, cellpadding, cellspacing, cols, frame, height, rules, summary, width.

Элемент предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.

Допускается применять несколько тегов внутри контейнера

. Доступны и другие виды группировок строк — и , ни один из них не должен перекрываться с элементом .

Атрибуты: align, char, charoff, bgcolor, valign,

Предназначен для создания одной ячейки таблицы. Тег должен размещаться внутри контейнера , который в свою очередь располагается внутри тега

.

Атрибуты: abbr, align, axis, background, bgcolor, bordercolor, char, charoff, colspan, headers, height, nowrap, rowspan, scope, valign, width.

Элемент предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег в исходном коде должен быть определён до тега , браузеры отображают его в самом низу таблицы. В пределах таблицы разрешается использовать только один элемент .

Атрибуты: align, bgcolor, char, charoff, valign.

Тег предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег должен размещаться внутри контейнера , который в свою очередь располагается внутри тега

.

Атрибуты: abbr, align, axis, background, bgcolor, bordercolor, char, charoff, colspan, headers, height, nowrap, rowspan, scope, valign, width.

Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.

Тег служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега или .

Атрибуты: align, bgcolor, bordercolor, char, charoff, valign.

1. Стили таблиц в HTML.

• border-collapse устанавливает, как отображать границы вокруг ячеек таблицы.

• border-spacing задаёт расстояние между границами ячеек в таблице.

• caption-side определяет положение заголовка таблицы, который задаётся с помощью тега

• empty-cells задаёт отображение границ и фона в ячейке, если она пустая.

• table-layout определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.

1. Способы разметки списков.

Тег входит в тройку элементов , , , предназначенных для создания списка определений. Каждый такой список начинается с контейнера , куда входит тег создающий термин и тег задающий определение этого термина. Закрывающий тег не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.

Тег входит в тройку элементов , , , предназначенных для создания списка определений. Каждый такой список начинается с контейнера , куда входит тег создающий термин и тег задающий определение этого термина.

Тег входит в тройку элементов , , , предназначенных для создания списка определений. Каждый такой список начинается с контейнера , куда входит тег создающий термин и тег задающий определение этого термина. Закрывающий тег не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.

Тег

определяет отдельный элемент списка. Внешний тег

или
устанавливает тип списка — маркированный или нумерованный.

Атрибуты: type, value.

Тег

устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега
1. . Если к тегу
   применяется таблица стилей, то элементы
   1. наследуют эти свойства.

Атрибуты: type, reversed, start.

Тег

устанавливает маркированный список. Каждый элемент списка должен начинаться с тега
• . Если к тегу
  применяется таблица стилей, то элементы
  • наследуют эти свойства.

Атрибуты: type.

Выполнение работы.

В данной лабораторной работе был модифицирован сайт, разработанный в лабораторных работах № 3 – 5. Были добавлены страницы с требуемыми таблицами и списками.

Сайт доступен по адресу: http://a1308.ru/tmp/vmss/lab6

Таблицы.

HTML [tables.html]

• Обо мне
• Бакалаврская работа
• Формула
• Таблицы
• Списки

Преподаватель: Куриленко Иван Евгеньевич

Выполнил: Захаров Антон

CSS [css/tables.css]

.b-tables

{

text-align: center;

}

 

#table1, #table1 tbody

{

display: inline-block;

width: 262px;

height: 262px;

}

 

#table1 tr

{

float: left;

clear: left;

}

 

#table1 td

{

float: left;

width: 60px;

height: 60px;

}

 

/* cells special classes */

 

#table1 td { border: 2px transparent solid; }

 

#table1 .solid {border: 2px black solid; }

#table1 .dashed {border: 2px black dashed; }

 

#table1 .top { border-top: 4px black solid !important; }

#table1 .left { border-left: 4px black solid !important; }

#table1 .right { border-right: 4px black solid !important; }

#table1 .bottom { border-bottom: 4px black solid !important; }

 

#table1 .t-solid, #table1 .tb-solid { border-top: 2px black solid; }

#table1 .l-solid, #table1 .lr-solid { border-left: 2px black solid; }

#table1 .r-solid, #table1 .lr-solid { border-right: 2px black solid; }

#table1 .b-solid, #table1 .tb-solid { border-bottom: 2px black solid; }