Размещение изображения на Web-странице

Цвета в таблице

Как построить на странице таблицу

Списки в списках

Списки определений

Нумерованный список

Маркированный список

Как создать на странице список

Существует три основных типа списков: маркированные, нумерованные и списки определений. Главное различие перечисленных типов состоит в способе нумерации и структуре.

Наиболее часто используется ненумерованный, или маркированный список. Маркированный список задается тегами <UL> и </UL>, а пункты списка между этими тегами — с помощью тега <LI>.

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

Нумерованный список задается с помощью тегов <OL> и </OL>. Как и в маркированном списке, каждый пункт задается тегом <LI>. По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр – 1,2,3 и т.д. Можно задать другой способ нумерации. Чтобы изменить стандартный тип нумерации, добавьте в тег <OL> ключевое слово TAPE.

TAPE=1 – Стандартная нумерация(1,2,3,4,5, …)

TAPE=A – Прописные буквы(A, B, C, D, …)

TAPE=a – Срочные буквы(a, b, c, d, …)

TAPE=I – Римские цифры(I, II, III, IV, …)

TAPE=i – Строчные римские цифры(i, ii, iii, iv, …)

Списки определений выглядят несколько иначе, чем другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег <LI>. Тег <DT> задает отдельный элемент, то есть определяемый термин, а тег <DD> — остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением. Задается список определений так же, как и другие списки. Единственное отличие — для каждого элемента требуется два тега.

Одно из замечательных свойств списков — это возможность вкладывать их друг в друга. Вложение списка в список производится так же, как простое создание списка. Для этого не существует специальных тегов HTML. Чтобы не запутать браузер, убедитесь, что вы закрыли каждый внутренний список с помощью тега </UL>. Вкладывать друг в друга можно даже различные типы списков.

Воспроизведите все вышеперечисленные списки

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

Для задания таблиц используется целый ряд тегов. Теги <TABLE> и </TABLE> обрамляют таблицу целиком, а ряд других тегов определяют, каким образом будет выводиться информация. В табли­це приведено полное описание тегов таблиц.

Теги HTML для построения таблиц:

Теги Описание

<TABLE> и Эти теги охватывают таблицу. Тег

</TABLE> <TABLE> сообщает браузерам, что далее следует описание таблицы. Если вы хотите, чтобы была видна сетка, разделяющая строки и столбцы, добавьте ключевое слово BORDER.

<CAPTION> и Текст, отмеченный этими тегами,

</CAPTION> выводится в виде заголовка. Для задания заголовка можно также применять теги <TC> и </TC>.

<TH>и</TH> Теги отображают текст заголовками строки или столбца немного более крупным полужирным шрифтом.

<TR>и</TR> Теги определяют каждую строку таблицы. Тег </TR> необязателен, но он делает Ваш HTML-код более полным и понятным.

<TD>и</TD> Эта пара тегов отделяет текст каждой ячейки таблицы.

Создайте файл, в котором постройте таблицу из пяти строк и пяти столбцов.

Существует ряд тегов, позволяющих задавать цвета фона и сетки таблицы. В первом случае ключевое слово BGCOLOR вставляется в тег <TABLE> следующим образов:

<TABLE BORDER BGCOLOR =RED> </ TABLE >

Кроме ключевого слова BGCOLOR, существуют и другие способы управлять цветом:

BORDERCOLOR Изменят цвет сетки таблицы

BORDERCOLORDARK/ Используется для изменения сетки с

BORDERCOLORLIGHT дополнительным эффектом трехмерности

Измените цвет сетки таблицы с эффектом трехмерности.

Урок 12-13. Использование графики

Рисунки и графика очень важны для WWW. Это единственное средство Интернета, позволяющее просматривать на экране одновременно изображения и текст.

Чтобы поместить изображение на Web-странице, нужно знать, как применять тег <IMG>. Введите тег <IMG> и ключевое слово SRC= для указания, какую графику загрузить.

<IMG SRC=flower.jpg>

Вводя этот тег, обратите внимание, что файл должен находиться в той же папке, что и Ваш HTML-файл.

Дата добавления: 2015-05-29