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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<TABLE BORDER BGCOLOR =RED> </ TABLE >

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

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

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

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

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

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

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

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

<IMG SRC=flower.jpg>

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

2. Задание альтернативного текста

Задание альтернативного текста, описывающего изображение домашней страницы, считается правилом вежливости. Альтернативный текст является частью тега <IMG>. Просто добавьте к тегу ключевое слово ALT и наберите текст в кавычках.

<IMG SRC=flower.jpg ALT = ‘Цветочек’>

Опишите изображение на вашей странице

3. Гиперссылки на изображениях

Совершенно иной способ заимствование изображений – размещение на вашей странице гиперссылок на другие Web-узлы. Для этого щелкните правой кнопкой мыши на изображении, на которое хотите сослаться, и выберите из раскрывающегося меню команду Copy Image Location (скопировать адрес изображения).

Теперь Вы можете перейти в Ваш редактор HTML и выбрать команду Правка/Вставить. URL изображение, которое Вы хотите вывести, появиться там, где Вы выполните операцию вставки. Убедитесь, что Вы правильно ввели тег <IMG>.

<IMG SRC=”http://toshs.ru/faceme.jpg”>

Создайте на своей странице гиперссылку на изображение в другом Web-узле.

4. Выравнивание изображений

Есть несколько способов выравнивания изображения на домашней странице по отношению к тексту. Ключевое слово ALIGN является частью тега <IMG>.

Опция	Действие
LEFT	Выравнивает изображение по левому краю страницы, строки текста выводятся справа от изображения
RIGHT	Выравнивает изображение по правому краю страницы, строки текста выводятся слева от изображения
TOP	Выравнивает изображение по самому высокому элементу в строке
MIDDLE	Выравнивает нижнюю границу строки по середине изображения
BOTTOM	Выравнивает нижнюю границу строки по нижней границе изображения

Выровняйте изображение на странице разными способами

5. Задание размера изображения

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

<IMG SRC=flower.gif ALT=”Цветочек” ALIGN=LEFT WIDHT=240 HEIGHT=260>

Теперь размер изображения на экране установлен равным 240 пиксель по горизонтали и 260 – по вертикали.

Измените высоту и ширину Вашего изображения

6. Пиктограммы

Кроме цветных изображений и рисунков на домашней странице могут присутствовать пиктограммы всех видов. С технической точки зрения пиктограммы попадают в категорию «изображения», но обычно очень малы (2—6 Кбайт) и применяются на домашних страницах из соображений дизайна, эстетики, а также для «перелистывания» страниц.

Существуют самые различные пиктограммы.

7. Линии и полосы

Очень часто вместо тега <HR> используют линейную графику (простую графику в виде линий и полос). Элементы линейной графики бывают различных форм, цветов и рисунков и существенно отличаются от результата работы тега <HR>.

<CENTER><IMG SRC=”BAR.GIF”></CENTER>

Нарисуйте несколько полос, используя тег <IMG>.

8. Маркеры

Маркеры обычно применяют для замены точек, которые отмечают пункты мар­кированного списка. Чтобы использовать маркер надо набирать каж­дый пункт, а затем — тег <BR>. В результате вместо маркированного списка с кру­жочками или квадратиками получается список с аккуратными пиктограммами в качестве маркеров. Вот пример HTML-кода для помещения на домашней странице графических маркеров:

<BR><IMG SRC=”REDBULL.GIF” ALIGN=CENTER>

Обратите внимание, что здесь не задан альтернативный текст – это не тот случай.

Откройте файл с маркированным списком и замените “точки ” на маркеры.

9. Фон Web-страницы

Одна из интересных возможностей HTML-это задание фона документа. Вместо того чтобы создавать страницы со стандартным серым фоном, вы можете задать любой другой цвет. Ели же вам не нравиться однотонный фон, вы можете задать фоновый узор.

1. Фоновые цвета

Менять фон страницы можно с помощью ключевого слова BGCOLOR, способного изменять цвет фона Web-страницы. У вас есть возможность выбора из 16 777 216 цветов. Гораздо быстрее можно задать один 16 «именных» цветов.

Ключевое слово BGCOLOR является частью стандартного тега HTML <BODY>, охватывающего большую часть текста домашней страницы.

<BODY BGCOLOR =RED>