<BODY BACKGROUND="имя файла. jpg">
Файл c фоновым изображением может быть задан в нескольких форматах, лучшие из которых: .gif и. jpg.
Надо предусмотреть случай просмотра HTML-документа с отключенными картинками (нередко пользователи в целях экономии трафика отключают опцию просмотра изображений) и задать фоновый рисунок и цвет фона:
<BODY BGCOLOR="#008000" BACKGROUND="fonoviy_risunok. jpg">
Кроме тэга <BODY> цвет текста в любом месте можно менять и с помощью тэгов <FONT> и </FONT>.
Пример. Чтобы в тексте «Сотрудники технического отдела:» слово «технического» выделить красным цветом, необходимо поставить следующие тэги: Сотрудники <FONT COLOR="#FF0000">технического </FONT> отдела: Одновременно можно изменять и размер, и цвет отдельного фрагмента текста: Сотрудники <FONT COLOR="#FF0000" SIZE=+4>технического </FONT> отдела: |
Упражнение. Откройте сохраненный в блокноте файл со структурой HTML-документа, задайте определенные цвета фона и текста документа, выделите отдельными цветами некоторые фрагменты текста.
1.5. Таблицы в HTML-документе
Таблицы разбивают пространство HTML-документа на строки и столбцы. С их помощью можно достигать сложной компоновки объектов, а можно использовать по прямому назначению: для разбивки текста на колонки. В любом случае, таблица — это один из способов визуализации текста. И от ее формата будет зависеть, какой именно информативный фрагмент будет прочтен первым, а какой последним.
Таблица задается открывающим тэгом <TABLE> и закрывающим тэгом </TABLE>. Между двумя этими тэгами помещаются тэги строк и их ячеек, а также текстовая и графическая информация, предназначенная для занесения в таблицу. Это важные тэги: если их не поставить, то другие табличные тэги работать не будут.
В таблице необходимо задать строки. Тэг <TR> открывает строку, </TR> — закрывает. Если в таблице присутствует два набора тэгов <TR> и </TR>, в ней будут две строки, и т. д. Текст, другие тэги и параметры, которые предназначены для данной строки, помещаются между тэгами <TR> и </TR>.
Внутри каждой строки задаются ячейки. Каждая ячейка, как содержащая текст или изображение, так и без него, должна быть окружена тэгами <TD> и </TD>. Количество пар этих тэгов в строке определяет число ячеек.
Среди табличных тэгов есть тэги, отвечающие за заголовок таблицы. Это тэги <TH> и </TH>. Текст, помещенный между двумя этими тэгами, по умолчанию помещается в центре ячейки и выделяется жирным шрифтом.
Таким образом, простейшая схема таблицы выглядит следующим образом:
<TABLE>
<TR>
<TD>Иванов</TD>
<TD>Петров</TD>
</TR>
<TR>
<TD>Сидоров</TD>
<TD>Моржов</TD>
</TR>
</TABLE>
Такой код задаст следующую таблицу без рамки:
Иванов Петров
Сидоров Моржов
Для того, чтобы создать вокруг таблицы рамку, используется параметр BORDER=i, где i задает толщину рамки вокруг таблицы в пикселях. Если не задавать этот параметр или поставить его равным нулю, то таблица будет без рамки.
Пример. Для того, чтобы создать таблицу с рамкой шириной в 10 пикселей, необходимо при задании таблицы поставить следующий тэг: <TABLE BORDER=15> |
Ширина и высота таблицы задается с помощью параметров WIDTH и HEIGHT. Эти параметры могут быть зафиксированы как в пикселях, так и в процентах от соответственно ширины и высоты экрана.
Пример. Для того, чтобы создать таблицу шириной в 800 пикселей, необходимо при задании таблицы поставить следующий тэг: <TABLE WIDTH=800> |
Пример. Для того, чтобы создать таблицу шириной в 50% экрана (независимо от разрешения экрана), необходимо при задании таблицы поставить следующий тэг: <TABLE WIDTH=50%> |
Пример. Для того, чтобы задать ширину таблицы и размер рамки вокруг нее, оба параметра, отвечающие за ширину, помещаются в тэг <TABLE> через пробел в любой последовательности: <TABLE WIDTH=800 BORDER=15> |
Существуют параметры, форматирующие поля в ячейках:
CELLSPACING — определяет в пикселях ширину промежутков между ячейками. Если этот параметр не задан, по умолчанию задается величина, равная двум пикселям.
CELLPADDING — определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
Эти параметры также помещаются в тэг <TABLE> через пробел в любой последовательности:
<TABLE WIDTH=800 CELLSPACING=5 CELLPADDING=7 BORDER=15>
Содержимое ячеек можно форматировать по ширине с помощью следующих параметров:
ALIGN=BLEEDLEFT — прижимает содержимое ячейки вплотную к левому краю;
ALIGN=LEFT — выравнивает содержимое ячейки по левому краю с учетом отступа, заданного параметром CELLPADDING;
ALIGN=CENTER — располагает содержимое ячейки по центру;
ALIGN=RIGHT — выравнивает содержимое ячейки по правому краю с учетом отступа, заданного параметром CELLPADDING.
Эти параметры вносятся в тэг ячейки:
<TD ALIGN=LEFT >
Для форматирования содержимого ячейки по вертикали существуют следующие параметры:
VALIGN=TOP — выравнивает содержимое ячейки по ее верхней границе;
VALIGN=MIDDLE — центрирует содержимое ячейки по вертикали;
VALIGN=BOTTOM — выравнивает содержимое ячейки по ее нижней границе.
Эти параметры также вносятся в тэг ячейки:
<TD VALIGN=MIDDLE>
Можно вносить оба параметра одновременно в любой последовательности:
<TD VALIGN=MIDDLE ALIGN=LEFT>
Любой таблице (как в целом, так и для каждой ячейки отдельно) можно присвоить свой цвет фона (он не будет зависеть от фона всей страницы) и свою «подложку».
Примеры. Чтобы задать цвет всей таблицы, например, черным, необходимо в тэг <TABLE> поместить следующее: <TABLE BGCOLOR="#000000"> Чтобы сделать фоновое изображение у таблицы, необходимо в тэг <TABLE> поместить следующее: <TABLE BACKGROUND="имя_файла. gif"> |
При этом фоновое изображение должно быть сохранено в той же папке, что и основной HTML-документ (иначе надо указывать путь к файлу с изображением). Файл c фоновым изображением может быть задан в нескольких форматах, лучшие из которых: .gif и. jpg.
Упражнение. Откройте сохраненный в блокноте файл со структурой HTML-документа. Продумайте, как разделить пространство экрана с помощью таблицы так, чтобы выделенные ячейки таблицы представляли собой функциональные области под рисунки и текст. Согласно продуманному плану, напишите HTML-код таблицы и занесите в ячейки отформатированный ранее текст. Сохраните файл для последующей работы.
1.6. Форматирование графических изображений в HTML-документе
Графические изображения — важный элемент дизайна сайта, поэтому им уделяется особое внимание. При этом зачастую они составляют значительную часть размера сайта по весу. Если графические изображения очень большие, просмотр HTML-документа может быть осложнен из-за длительной загрузки этих изображений. Поэтому вес графических файлов необходимо уменьшать.
За вывод изображения на экран отвечает следующий тэг:
<IMG SRC="имя файла. jpg">
Файл c изображением может быть задан в нескольких форматах, лучшие из которых: .gif и. jpg. Он должен быть сохранен в той же папке, что и основной HTML-документ (как и в случае загрузки графического файла фоновым изображением документа или таблицы), иначе надо указывать путь к файлу. Закрывающий тэг к тэгу <IMG SRC=…> не требуется.
Для уменьшения времени загрузки HTML-документа с графикой можно определить в HTML-коде размер изображений. Если размер графического изображения определен, то браузер резервирует для него место в виде ограничивающего прямоугольника. Пока загружается графика, можно начать читать текст. Для этого в тэге изображения задается ширина и высота картинки в пикселях следующим образом:
<IMG SRC="имя файла. jpg" WIDTH=… HEIGHT=…>
Пример. Если необходимо вставить рисунок logotip. gif размером 300х150 пикселей, в HTML-коде пишется следующее: <IMG SRC="logotip. gif" WIDTH=300 HEIGHT=150> |
Если не указать размеры графических изображений, то браузер будет загружать каждую картинку целиком и только после этого переходить к загрузке текста, что требует дополнительного времени. Если эти размеры заданы и на страничке есть другие графические объекты или текст, то браузер начертит ограничивающий прямоугольник (отведет на страничке место под графический файл) и продолжит работу с другими частями страницы, одновременно продолжая заполнять начерченный прямоугольник.
Нередко бывают случаи, когда картинке требуется дать название с целью раскрытия пользователю смысла представленного на ней изображения. Ее можно подписать текстом, как это делается в книгах или журналах. Для того, чтобы название картинки выводилось при наведении на нее мышкой, необходимо поставить соответствующий параметр ALT. Кроме смыслового дополнения к картинке этот параметр позволяет пользователям, отключающим в браузере режим просмотра графических изображений, получить информацию о том, что изображено на картинке и надо ли ее загружать.
Пример. Если необходимо вставить рисунок logotip. gif размером 300х150 пикселей и дать ему название «Наш логотип», ставятся следующие тэги: <IMG SRC="logotip. gif" WIDTH=300 HEIGHT=150 ALT="Наш логотип"> |
Иногда дизайн HTML-документа требует рамку вокруг изображения. Для этого существует параметр BORDER=i, где i — количество пикселей толщины рамки вокруг изображения. Если BORDER не указан или его значение равно нулю, то рамки вокруг изображения не будет.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 12 |
