Цветовая гамма HTML-документа. Рисунки в HTML-документе. Таблицы в HTM-документе

Поможем в ✍️ написании учебной работы

Имя

Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

Нажимая кнопку "Продолжить", я принимаю политику конфиденциальности

Изображения в HTML-документе

Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.

Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая: <IMG SRC=«picture.gif»>

Метка <IMG SRC=«[имя файла]»> может также включать атрибут ALT=«[текст]», например: <IMG SRC=«picture.gif» ALT=«Картинка»>

Встретив такую метку, браузер покажет на экране текстКартинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении кИнтернет это делается для экономии времени).

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

<HTML>

<HEAD> <TITLE>Пример 8</TITLE> </HEAD>

<BODY>

<H1> Изображения </H1>

<P> Изображение можно встроить очень просто: </P>

<P> Кроме того, изображение можно сделать «горячим», то есть осуществлять переход при нажатии на изображение:</P>

</BODY>

</HTML>

Цветовая гамма HTML-документа

Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список этих атрибутов:

- bgcolor определяет цвет фона документа;

- text определяет цвет текста документа;

- link определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке;

- vlink определяет цвет ссылки на документ, который уже был просмотрен ранее;

- alink определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.

Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Разберем несколько примеров.

bgcolor=#FFFFFF

Цвет фона. Насыщенность красным, зеленым и синим одинакова — FF (это шестнадцатиричное представление числа 255). Результат — белый цвет.

text=#000000

Цвет текста. Насыщенность красным, зеленым и синим одинакова — 00 (ноль). Результат — черный цвет.

link=#FF0000

Цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль). Результат — красный цвет.

Кроме того, метка <BODY> может включать атрибут background=«[имя файла]», который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением*.jpg или *.jpeg).

Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.

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

<HTML><HEAD><TITLE>Пример 9</TITLE></HEAD><BODY bgcolor=#FFFFFF text=#000000 link=#FF0000><H1>Слайд-демонстрация цветовых гамм </H1><P>Черный текст на белом фоне </P></BODY></HTML>

Таблицы

До настоящего времени мы имели дело с документами, в которых существовал только один «поток» текста. На практике иногда очень хочется расположить текст в несколько колонок. Таблица может в этом помочь.

Таблицы обеспечивают важную часть в представлении информации. Разделение данных на столбцы и строки имеет широкое применение в практике оформления текстовых документов. Не являются исключением из этого правила и HTML-документы, которые имеют специальный тег <table> для создания таблиц.

В HTML-документах таблицы применяют не только для представления табличных данных, но и для создания разметки HTML-страницы. Например, многие страницы сайта имеют «шапку» (верхняя часть страницы), непосредственно информацию и «подвал» (нижняя часть страницы). Для разбивки HTML-документа на эти составные части хорошо подходят таблицы, у которых скрывается рамка и визуально создается впечатление единства всех составляющих частей. Таблицы удобны для создания разнообразного разбиения, т.к. ячейки таблицы могут содержать в себе и другие таблицы. В результате Web-мастеру не составляет большого труда организовать требуемую структуру документа и, затем, наполнить ее необходимым содержимым.

Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Метка <TABLE> может включать несколько атрибутов:

ALIGN

Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER(выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).

WIDTH

Ширина таблицы. Ее можно задать в пикселах (например, или в процентах от ширины страницы (например, WIDTH=80%).

BORDER

Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.

CELLSPACING

Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, CELLSPACING=2).

CELLPADDING

Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, CELLPADDING=10).

Таблица может иметь заголовок (<CAPTION> ...</CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибутALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).

Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:

ALIGN

Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).

VALIGN

Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: (выравнивание по верхнему краю),(выравнивание по центру), (выравнивание по нижнему краю).

Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD> (или <th>, описывающий ячейку-заголовок таблицы). Метка <TD> может включать следующие атрибуты:

NOWRAP

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

COLSPAN

Устанавливает «размах» ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.

ROWSPAN

Устанавливает «размах» ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.

ALIGN

Устанавливает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).

VALIGN

Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: (выравнивание по верхнему краю), (выравнивание по центру), (выравнивание по нижнему краю).

WIDTH

Устанавливает ширину ячейки в пикселах (например, WIDTH=200).

HEIGHT

Устанавливает высоту ячейки в пикселах (например, HEIGHT=40).

Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект   (non-breaking space — неразрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет.

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

Вопросы для самоконтроля:

1. С помощью какого тега вставляются изображения в HTML –документ?

2. Как получить в качестве гиперссылки изображение?

3. Какие атрибуты используются для изменения размеров изображения?

4. Как изображение сделать фоновым рисунком для документа?

5. С помощью какого тега вставляются таблицы в HTML –документ?

6. Назовите тег строки, тег ячейки.

7. С помощью какого тега можно изменить цвет текста в HTML –документе?

8. Сколько цветов существует для работы в документе?

Дата: 2019-05-28, просмотров: 205.

⇐ Предыдущая 21 22 23 24 252627 28 29 30 Следующая ⇒