HTML
Web-страницы
Web-страницы — это обычные текстовые файлы, в которых с помощью специальных команд задается оформление страницы и расположение материала. Все рисунки, анимация, апплеты Java и т.п. должны быть записаны в виде отдельных файлов.
Web-страницы можно разделить на две группы:
статические (они чаще всего имеют расширения *.htm или *.html) — те страницы, которые записаны на диск в готовом виде и не меняются;
динамические (с расширениями *.shtml, *.asp, *.php, *.pl) — полностью или частично создаются на сервере в момент запроса (например, выбирают нужную информацию из базы данных и передают ее по каналам Интернет в виде Web-страницы).
Для просмотра Web-страниц на экране нужна специальная программа — браузер. Со всеми современными версиями Windows поставляется браузер Internet Explorer. Многие пользователи выбирают Mozilla Firefox, а также очень компактный и быстрый браузер Opera.
Язык HTML
Мы будем рассматривать только статические Web-страницы, которые создаются на языке HTML (Hypertext Markup Language — язык разметки гипертекста). Напомним, что гипертекстом называется документ, содержащий гиперссылки — активные ссылки на другие документы на локальном компьютере или в Интернете, щелкнув по которым можно перейти к связанному документу.
Язык HTML использует специальные команды (они называются тэги) для разметки Web-страницы, то есть для размещения на ней текста, таблиц, рисунков, списков и т.п. Браузер, читая такой файл, обрабатывает эти команды и выводит страницы на экран. Поэтому одну и ту же Web-страницу разные браузеры могут выводить на экран по-разному.
В следующем разделе вы узнаете о том, как построить простейшую Web-страницу.
Начало
С чего начать?
Создание Web-страницы можно разбить на несколько этапов.
С помощью любого текстового редактора создаем текстовый файл, содержащий команды языка HTML. Здесь можно использовать Блокнот или WordPad из стандартных программ, а также любой другой текстовый редактор, например, встроенный редактор оболочки FAR. Обратите внимание, что файл должен быть сохранен в виде простого текстового документа (без оформления) и иметь расширение *.htm или *.html. Русские буквы должны быть набраны в кодировке Windows.
Открыть файл в браузере. Для этого можно использовать два способа
Открыть браузер, выбрать пункт меню Файл-Открыть и найти файл на диске.
Найти файл в Проводнике (или через Мой компьютер) и «открыть» его, щелкнув дважды по значку. При этом запускается браузер, установленный по умолчанию. В оболочке FAR можно выделить файл курсором и нажать клавишу Enter.
Чтобы внести изменения в страницу, можно выбрать команду Просмотр источника (или Просмотр в виде HTML) из меню Вид или контекстного меню, которое появляется при нажатии на правую кнопку мыши. При этом исходный файл откроется в Блокноте или WordPad-е (для браузера Opera). После изменения файл необходимо сохранить, перейти в окно браузера (с помощью панели задач) и обновить документ (нажав на F5 или кнопку обновления).
А проше всего — взять на этом сайте бесплатный HTML-редактор HEFS, в котором вы сможете редактировать текст Web-страницы и сразу посмотреть ее в«рабочем» виде.
Тэги
Размещение информации на Web-странице задается с помощью специальных команд — тэгов. Тэг — это команда, которую понимает браузер. Тэги заключаются в угловые скобки < и >. Можно записывать тэги как маленькими, так и большими буквами (и даже вперемежку).
Тэги бывают парные и непарные. Непарный тэг говорит о том, что в этом месте надо вставить какой-то элемент, например, рисунок или разделительную линию. Например, тэг
<BR>
означает переход на новую строку в тексте (без абзацного отступа).
Парный тэг состоит из двух частей — открывающего и закрывающего тэгов. Закрывающий тэг имеет то же самое имя, чтои открывающий, но перед именем ставится знак / (слэш). Действие парного тэга распространяется на всё, что находится между ними. Например, парный тэг
<CENTER> ... </CENTER>
выравнивает по центру страницы всю информацию, расположенную на месте многоточия.
Простейшая страница
Вот текст простейшей Web-страницы на языке HTML:
<HTML> <HEAD> <TITLE>Моя первая Web-страница</TITLE> </HEAD> <BODY> Привет! </BODY> </HTML>
А вот как выглядит окно браузера, если открыть эту страницу:
Попробуем разобраться. Страница начинается с тэга <HTML> и заканчивается закрывающим тэгом </HTML>. Содержимое страницы находится между ними и делится на две части, которые заключаются в парные тэги <HEAD> и <BODY>.
Тэг <HEAD> (от английского head — голова) содержит заголовок страницы, записанный внутри тэга <TITLE>, и, возможно, другую служебную информацию, например, ключевые слова для поисковых машин.
В рабочую область браузера выводится все, что находится внутри тэга <BODY> (от английского body — тело). Именно внутри этого блока надо размещать текст, рисунки, таблицы и т.п.
В следующем разделе вы узнаете о том, как кодировать цвета в языке HTML.
19 февраля 2010
Цвета
Названия цветов
Цвет в языке HTML задается двумя способами: по имени и в виде шестнадцатеричного кода.
Многие цвета имеют (английские) имена и эти названия понимают браузеры. Например,
white — белый
black — черный
red — красный
green — зеленый
blue — синий
Полная таблица цветов приведена в таблице внизу страницы.
Шестнадцатеричные коды
Другой способ задать цвет — указать его код в формате RGB. Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится символ #. Каждая пара цифр может принимать значения в интервале от 00 до FF (или от 0 до 255 в десятичной записи). Первая пара обозначает яркость красного (R — red), вторая и третья - яркости зеленого (G — green) и синего (B — blue) в этом цвете. Всего такая форма записи позволяет задать более 16 миллионов разных цветов (режим True Color — истинный цвет), однако возможно, что не все они могут быть реализованы на экране монитора. Примеры цветов в шестнадцатеричном формате:
#FFFFFF — белый
#000000 — черный
#FF0000 — красный
#00FF00 — зеленый
#0000FF — синий
В следующем разделе оба способа определения цвета используются для оформления текста Web-страницы.
Таблица цветов
Название цвета |
Red |
Green |
Blue |
Цвет |
alicemblue |
F0 |
F8 |
FF |
образец |
antiquewhite |
FA |
EB |
D7 |
образец |
aqua |
00 |
FF |
FF |
образец |
aquamarine |
7F |
FF |
D4 |
образец |
azure |
F0 |
FF |
FF |
образец |
beige |
F5 |
F5 |
DC |
образец |
bisque |
FF |
E4 |
C4 |
образец |
black |
00 |
00 |
00 |
образец |
blanchedalmond |
FF |
EB |
CD |
образец |
blue |
00 |
00 |
FF |
образец |
blueviolet |
8A |
2B |
E2 |
образец |
brown |
A5 |
2A |
2A |
образец |
burlywood |
DE |
B8 |
87 |
образец |
cadetblue |
5F |
9E |
A0 |
образец |
chartreuse |
7F |
FF |
00 |
образец |
chocolate |
D2 |
69 |
1E |
образец |
coral |
FF |
7F |
50 |
образец |
cornflowerblue |
64 |
95 |
ED |
образец |
cornsilk |
FF |
F8 |
DC |
образец |
crimson |
DC |
14 |
3C |
образец |
cyan |
00 |
FF |
FF |
образец |
darkblue |
00 |
00 |
8B |
образец |
darkcyan |
00 |
8B |
8B |
образец |
darkgoldenrod |
B8 |
86 |
0B |
образец |
darkgray |
A9 |
A9 |
A9 |
образец |
darkgreen |
00 |
64 |
00 |
образец |
darkkhaki |
BD |
B7 |
6B |
образец |
darkmagenta |
8B |
00 |
8b |
образец |
darkolivegreen |
55 |
6B |
2F |
образец |
darkorange |
FF |
8C |
00 |
образец |
darkochid |
99 |
32 |
CC |
образец |
darkred |
8B |
00 |
00 |
образец |
darksalmon |
E9 |
96 |
7A |
образец |
darkseagreen |
8F |
BC |
8F |
образец |
darkslateblue |
48 |
3D |
8B |
образец |
darkslategray |
2F |
4F |
4F |
образец |
darkturquoise |
00 |
CE |
D1 |
образец |
darkviolet |
94 |
00 |
D3 |
образец |
deeppink |
FF |
14 |
93 |
образец |
deepskyblue |
00 |
BF |
FF |
образец |
dimgray |
69 |
69 |
69 |
образец |
dodgerblue |
1E |
90 |
FF |
образец |
firebrick |
B2 |
22 |
22 |
образец |
floralwhite |
FF |
FA |
F0 |
образец |
forestgreen |
22 |
8B |
22 |
образец |
fushsia |
FF |
00 |
FF |
образец |
gainsboro |
DC |
DC |
DC |
образец |
ghostwhite |
F8 |
F8 |
FF |
образец |
gold |
FF |
D7 |
00 |
образец |
goldenrod |
DA |
A5 |
20 |
образец |
gray |
80 |
80 |
80 |
образец |
green |
00 |
80 |
00 |
образец |
greenyellow |
AD |
FF |
2F |
образец |
honeydew |
F0 |
FF |
F0 |
образец |
hotpink |
FF |
69 |
B4 |
образец |
indiandred |
CD |
5C |
5C |
образец |
indigo |
4B |
00 |
82 |
образец |
ivory |
FF |
FF |
F0 |
образец |
khaki |
F0 |
E6 |
8C |
образец |
lavender |
E6 |
E6 |
FA |
образец |
lavenderblush |
FF |
F0 |
F5 |
образец |
lawngreen |
7C |
FC |
00 |
образец |
lemonchiffon |
FF |
FA |
CD |
образец |
ligtblue |
AD |
D8 |
E6 |
образец |
lightcoral |
F0 |
80 |
80 |
образец |
lightcyan |
E0 |
FF |
FF |
образец |
lightgoldenrodyellow |
FA |
FA |
D2 |
образец |
lightpink |
FF |
B6 |
C1 |
образец |
lightsalmon |
FF |
A0 |
7A |
образец |
lightseagreen |
20 |
B2 |
AA |
образец |
lightscyblue |
87 |
CE |
FA |
образец |
lightslategray |
77 |
88 |
99 |
образец |
lightsteelblue |
B0 |
C4 |
DE |
образец |
lightyellow |
FF |
FF |
E0 |
образец |
lime |
00 |
FF |
00 |
образец |
limegreen |
32 |
CD |
32 |
образец |
linen |
FA |
F0 |
E6 |
образец |
magenta |
FF |
00 |
FF |
образец |
maroon |
80 |
00 |
00 |
образец |
mediumaquamarine |
66 |
CD |
AA |
образец |
mediumblue |
00 |
00 |
CD |
образец |
mediumorchid |
BA |
55 |
D3 |
образец |
mediumpurple |
93 |
70 |
DB |
образец |
mediumseagreen |
3C |
B3 |
71 |
образец |
mediumslateblue |
7B |
68 |
EE |
образец |
mediumspringgreen |
00 |
FA |
9A |
образец |
mediumturquoise |
48 |
D1 |
CC |
образец |
medium violetred |
C7 |
15 |
85 |
образец |
midnightblue |
19 |
19 |
70 |
образец |
mintcream |
F5 |
FF |
FA |
образец |
mistyrose |
FF |
E4 |
E1 |
образец |
moccasin |
FF |
E4 |
B5 |
образец |
navajowhite |
FF |
DE |
AD |
образец |
navy |
00 |
00 |
80 |
образец |
oldlace |
FD |
F5 |
E6 |
образец |
olive |
80 |
80 |
00 |
образец |
olivedrab |
6B |
8E |
23 |
образец |
orange |
FF |
A5 |
00 |
образец |
orengered |
FF |
45 |
00 |
образец |
orchid |
DA |
70 |
D6 |
образец |
palegoldenrod |
EE |
E8 |
AA |
образец |
palegreen |
98 |
FB |
98 |
образец |
paleturquose |
AF |
EE |
EE |
образец |
palevioletred |
DB |
70 |
93 |
образец |
papayawhop |
FF |
EF |
D5 |
образец |
peachpuff |
FF |
DA |
B9 |
образец |
peru |
CD |
85 |
3F |
образец |
pink |
FF |
C0 |
CB |
образец |
plum |
DD |
A0 |
DD |
образец |
powderblue |
B0 |
E0 |
E6 |
образец |
purple |
80 |
00 |
80 |
образец |
red |
FF |
00 |
00 |
образец |
rosybrown |
BC |
8F |
8F |
образец |
royalblue |
41 |
69 |
E1 |
образец |
saddlebrown |
8B |
45 |
13 |
образец |
salmon |
FA |
80 |
72 |
образец |
sandybrown |
F4 |
A4 |
60 |
образец |
seagreen |
2E |
8B |
57 |
образец |
seashell |
FF |
F5 |
EE |
образец |
sienna |
A0 |
52 |
2D |
образец |
silver |
C0 |
C0 |
C0 |
образец |
skyblue |
87 |
CE |
EB |
образец |
slateblue |
6A |
5A |
CD |
образец |
slategray |
70 |
80 |
80 |
образец |
snow |
FF |
FA |
FA |
образец |
springgreen |
00 |
FF |
7F |
образец |
steelblue |
46 |
82 |
B4 |
образец |
tan |
D2 |
B4 |
8C |
образец |
teal |
00 |
80 |
80 |
образец |
thistle |
D8 |
BF |
D8 |
образец |
tomato |
FF |
63 |
47 |
образец |
turquose |
40 |
E0 |
D0 |
образец |
violet |
EE |
82 |
EE |
образец |
wheat |
F5 |
DE |
B3 |
образец |
white |
FF |
FF |
FF |
образец |
whitesmoke |
F5 |
F5 |
F5 |
образец |
yellow |
FF |
FF |
00 |
образец |
yellowgreen |
9A |
CD |
32 |
образец |
Текст
Web-страницы
Свойства текста задаются в виде параметров различных тэгов. Параметры записываются в открывающем тэге внутри скобок. Ниже объясняется использование основных тэгов для оформления текста.
Тэг <BODY>
Тэг <BODY> позволяет задать общие свойства для всей страницы. В параметрах открывающего тэга <BODY> можно задать цвет текста (параметр TEXT) и цвет фона (параметр BGCOLOR). Например, тэг
<BODY TEXT="#000000" BGCOLOR="yellow"> ... </BODY>
определяет черный цвет текста на желтом фоне для всей страницы.
Тэг <BODY> позволяет изменять также и цвет ссылок, которые в языке HTML называются anchors - якоря. Для этого используют параметры
LINK — цвет обычных ссылок
ALINK — цвет активной ссылки, на которой щелкнули мышью
VLINK — цвет посещенных ссылок
Например, тэг
<BODY LINK="yellow" ALINK="red" VLINK="blue"> ... </BODY>
устанавливает желтый цвет для обычных ссылок, красный — для активных и синий — для посещенных.
Тэг <FONT>
Для того, чтобы изменить цвет, размер и стиль шрифта для части текста, используют тэг <FONT>. Он имеет три основных параметра:
COLOR — цвет текста
FACE — начертание (название) шрифта
SIZE — размер шрифта (принимает целые значения от 1 до 7)
Например, тэг
<FONT COLOR="yellow" FACE="Courier" SIZE="2"> ... </FONT>
устанавливает для текста внутри области действия тэга шрифт Courier желтого цвета размера 2. А вот как выглядят все возможные размеры шрифта Arial:
size=1 size=2 size=3 size=4 size=5 size=6 size=7
Стили оформления
Существует несколько стандартных стилей оформления текста: жирный, курсив, зачеркнутый, подчеркнутый, верхний индекс и нижний индекс. Вот тэги, которые отвечают за это:
<B>...</B> (от английского bold), а так же <STRONG> — это жирный текст
<I>...</I> (от английского italic), а так же <EM> — это курсив
<S>...</S> (от английского strike out) —
это зачеркнутый текст<U>...</U> (от английского underline) — это подчеркнутый текст
<SUP>...</SUP> (от английского superscript) — это верхний индекс
<SUB>...</SUB> (от английского subscript) — это нижний индекс
<PRE>...</PRE> (от английского preformatted) — это специальный стиль для оформления текстов программ (моноширинный шрифт, остаются все пробелы и переходы на новую строку).
Стиль относится к тексту, заключенному между открывающим и закрывающим тэгами.
Заголовки
Заголовки в тексте рекомендуется оформлять стандартными стилями. Текст будет выглядеть более красиво, если в оформлении его использовать заголовки. Для выделения заголовков используются парные тэги от <H1> до <H6> (от английского header), то есть, уровень заголовка изменяется от от 1 до 6. Страница с кодом
<BODY> <H1> Заголовок документа</H1> <H2> Заголовок раздела</H2> <H3> Заголовок подраздела</H3> <H4> Заголовок параграфа</H4> <H5> Комментарий</H5> <H6> Авторские пометки</H6> </BODY>
будет показана так:
В заголовках тоже можно указывать тип выравнивания, так же, как для абзацев.
Специальные символы
Существуют некоторые специальные символы, для добавления которых надо использовать их числовой код или условное обозначение, перед которым ставится знак &. В таблице ниже даны самые распространенные специальные символы.
Символ |
HTML-код |
Название |
|
¡ или |
неразрывный пробел |
¢ |
¢ |
значок цента |
£ |
£ |
значок фунта стерлингов |
¤ |
¤ |
|
¥ |
¥ |
значок японской йены |
§ |
§ |
параграф |
© |
© или © |
символ авторского права |
« |
« или « |
левая русская кавычка |
® |
® или ® |
зарегистрированная торговая марка |
° |
° |
градус |
± |
± |
плюс-минус |
² |
² |
квадрат |
³ |
³ |
куб |
» |
» или » |
правая русская кавычка |
¼ |
¼ |
четверть |
½ |
½ |
половина |
¾ |
¾ |
три четверти |
× |
× |
знак умножения |
÷ |
÷ |
знак деления |
Следующий раздел рассказывает об оформлении абзацев.
Абзацы
Переход на новую строку Для того, чтобы начать новый абзац, можно использовать простейший тэг <BR> который заставляет браузер начать вывод текста с новой строки. Страница с кодом <BODY> Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. <BR> До самого вечера тело с варежками ... </BODY> будет показана на экране так:
Абзацы В языке HTML есть специальный парный тэг <P> (от английского paragraph — абзац), позволяющий ограничить абзац. При этом каждый абзац отделяется от другого некоторым интервалом, который облегчает чтение текста страницы. Открывающий тэг <P> обозначает начало абзаца, а соответствующий ему закрывающий — конец абзаца. Страница с кодом <BODY> <P> Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. </P> <P> До самого вечера тело с варежками ... </P> </BODY> будет показана на экране так:
Выравнивание абзацев У тэга <P> есть параметр ALIGN, который может принимать значения:
По умолчанию абзац выравнивается по левой границе. Ниже показано, как использовать этот параметр: <P ALIGN="center"> Этот текст выровнен по центру. </P> <P ALIGN="justify"> Этот текст выровнен по ширине. </P> В заголовках тоже можно указывать тип выравнивания, например так: <H1 ALIGN="center"> Заголовок, выровненный по центру </H1> Линия-разделитель Чтобы отделить одну часть документа от другой можно использовать специальную линию-разделитель, которая вставляется командой Такая команда вставляет разделительную линию толщиной 1 пиксель во всю ширину окна браузера. Можно использовать параметры этой команды:
Например, код <HR WIDTH="60%" SIZE="3" ALIGN="right"> дает линию-разделитель
На профессиональных сайтах линии-разделители практически не используются, поскольку материал на странице должен разделяться заголовками разделов и подразделов. Следующий раздел рассказывает о том, как создать гипертекстовые ссылки. 19 февраля 2010 |
HTML-редактор «HEFS» — удобное средство ручного создания Web-страниц для начинающих.
Сайт дизайн-студии Артемия Лебедева. Один из лучших разделов — «Ководство» (дизайн для умных).
Сайт Дмитрия Кирсанова — автора первого курса Web-дизайна на русском языке.
Стива Круга — специалиста по «юзабилити», автора книги «Не заставляйте меня думать!». |
||
|
|
||
|
|
Списки
Маркированные списки
Каждый элемент маркированного списка имеет маркер — специальный значок слева. Список ограничен парным тэгом <UL> (от английского unordered list — неупорядоченный список). Каждый элемент списка начинается с непарного тэга <LI>, после которого можно располагать текст, рисунки, таблицы и т.п. Список заканчивается закрывающим тэгом </UL>.
Ниже приведен пример простейшего маркированного списка — слева HTML-код, а справа — изображение в окне браузера.
<BODY> <UL> <LI>Вася <LI>Петя <LI>Коля </UL> </BODY> |
|
|
В команде <UL> можно задавать тип маркера, например, для того, чтобы установить в качестве маркера кружок, надо написать
<UL TYPE="disk">
Кроме этого типа можно также использовать значения circle (окружность) и square (квадрат).
Нумерованные списки
Каждый элемент такого списка имеет номер. Нумерация может быть числовой или буквенной. Список ограничен парным тэгом <OL> (от английского ordered list — упорядоченный список). Каждый элемент списка начинается с непарного тэга <LI>, после которого можно располагать текст, рисунки, таблицы и т.п. Список заканчивается закрывающим тэгом </OL>.
Ниже приведен пример простейшего нумерованного списка — слева HTML-код, а справа — изображение в окне браузера.
<BODY> <OL> <LI>Вася <LI>Петя <LI>Коля </OL> </BODY> |
|
|
В команде <OL> можно задавать тип нумерации (в параметре TYPE) и начальное значение номера (в параметре START). Так в следующем примере задается нумерация маленькими римскими цифрами начиная с iii.
<BODY> <OL TYPE="i" START="3"> <LI>Вася <LI>Петя <LI>Коля </OL> </BODY> |
|
|
Кроме этого типа можно также использовать значения A (заглавные латинские буквы), a (строчные латинские буквы), I (большие римские цифры), и 1 (арабские цифры). (квадрат).
Cписки определений
Так называются списки-словари, в которых приводятся определения понятий и терминов. Каждый элемент такого списка содержит две записи — сам термин и его толкование. Нумерация отсутствует.
Список ограничен парным тэгом <DL> (от английского definition list — список определений). Каждый термин списка начинается с непарного тэга <DT> (от английского definition term — определяемый термин), после которого записывают его название. Вслед за термином записывают его определение, которое начинается с непарного тэга <DD> (от английского definition description — описание определения). Список заканчивается закрывающим тэгом </DL>.
Ниже приведен пример простейшего списка определений — слева HTML-код, а справа — изображение в окне браузера.
<BODY> <DL> <DT>компьютер <DD>устройство для обработки информации <DT>дискета <DD>гибкий магнитный диск <DT>винчестер <DD>жесткий магнитный диск </DL> </BODY> |
|
|
Вложенные списки
Списки могут быть вложенными, то есть, внутри элемента списка может быть еще один список (любого типа). На каждом уровне могут быть списки любых типов (нумерованные, маркированные, определения). так
Ниже приведен пример простейшего вложенного списка — слева HTML-код, а справа — изображение в окне браузера.
<BODY> <UL> <LI>Города России <OL> <LI>Москва <LI>Санкт-Петерург </OL> <LI>Города Украины <OL> <LI>Киев <LI>Одесса </OL> </UL> </BODY> |
|
|
Следующий раздел рассказывает о вставке рисунков
Рисунки
Рисунки в Интернете
На Web-страницах можно использовать только те типы рисунков, которые могут выводить на экран браузеры. Рисунки Web-страниц обычно занимают намного больше места, чем текст, поэтому в сети Интернет используют такие способы кодирования, при которых информация находится в сжатом виде и расраковывается браузером в момент вывода рисунка на экран. В настоящее время поддерживаются следующие три формата: GIF, JPEG и PNG. Более подробно об этих форматах рассказано на врезках в правой части страницы.
На больших сайтах может использоваться очень много рисунков. Чтобы легче было разбираться в файлах, все рисунки обычно размещаются в отдельном подкаталоге, который часто называют IMAGES.
Фон страницы
Рисунок можно установить в качестве фона страницы. Для этого используется параметр BACKGROUND тэга BODY. Если указано только имя файла, рисунок должен находиться в том же каталоге, что и сама Web-страница.
<BODY BACKGROUND="lake.jpg">
Можно указать также относительный адрес файла (так же, как в ссылках) или URL (см. раздел Ссылки).
Если рисунок меньше, чем размер окна браузера, фон будем вымощен рисунками-прямоугольниками как плиткой. Поэтому для фона используют специальные рисунки, которые не дают швов при стыковке. Для сравнения ниже показаны примеры фонов с хорошей и плохой стыковкой.
|
|
|
Вообще нежелательно использовать рисунок в качестве фона, потому что он отвлекает от чтения текста и рассеивает внимание. Поэтому для сайтов, в которых важнее всего — текст, рекомендуется использовать только одноцветный фон.
Если же по каким-то причинам надо сделать фон-рисунок, он не должен мешать чтению текста, как в приведенном ниже примере:
Обычно фоновый рисунок прокручивается вместе с текстом, однако можно запретить прокрутку фона, задав параметр BGPROPERTIES="fixed" тэга BODY:
<BODY BACKGROUND="lake.jpg" BGPROPERTIES="fixed">
Рисунки в документе
Для вставки рисунка в Web-документ используется тэг <IMG> (от английского image — изображение). Этот тэг имеет несколько параметров, из которых обязателен лишь SRC (от английского source — источник), который указывает, где находится рисунок. Если рисунок надо искать в том же каталоге, что и сама страница, надо просто написать имя файла. Можно указать также относительный адрес файла (так же, как в ссылках) или URL. Например:
<IMG SRC="image1.jpg"> <IMG SRC="images/image2.jpg"> <IMG SRC="http://server/images/image3.jpg">
Рисунок image1.jpg находится в текущем каталоге, рисунок image2.jpg — в соседнем каталоге IMAGES, а image3.jpg — на сервере в Интернете.
Выравнивание
Рисунок воспринимается браузером как «большая буква» в тексте. Поэтому важно указать правильное выравнивание в параметре ALIGN тэга IMG. Например:
<IMG SRC="image.jpg" ALIGN="left">
Существует следующие варианта выравнивания:
top — по верхней границе текущей строки
bottom — по нижней границе текущей строки (такой тип выравнивания устанавливается по умолчанию)
middle — по середине текущей строки
left — по левой границе абзаца с обтеканием текстом
right — по правой границе абзаца с обтеканием текстом
top |
|
bottom |
|
|
|
middle |
|
left |
|
|
|
right |
|
|
|
|
|
Чтобы начать новую строку после рисунка, для которого установлено обтекание текстом, используется специальный вариант команды <BR> с параметром CLEAR, который показывает способ выравнивания рисунка (left или right). В следующем примере слева приведен HTML-код, а справа — изображение в окне браузера.
<BODY> <IMG SRC="web.jpg" ALIGN="left"> Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. <BR CLEAR="left"> До самого вечера тело с варежками то меняло направление своего движения, то останавливалось, то снова приходило в движение. </BODY> |
|
Отступы
Если рисунки прилегают вплотную к тексту, это мешает читать. Поэтому рекомендуется делать отступы, отделяющие рисунок от текста. Вертикальные и горизонтальные отступы задаются в параметрах VSPACE (от английского vertical space - вертикальный отступ) и HSPACE (от английского horizontal space - горизонтальный отступ) тэга IMG.
|
|
|
Рисунок в первом примере вставлен без указания отступов
<IMG SRC="image.jpg" ALIGN="left">
а рисунок справа — с отступами в 10 пикселов:
<IMG SRC="image.jpg" ALIGN="left" VSPACE="10" HSPACE="10">
Другие параметры
Тэг IMG имеет и другие параметры, наиболее важные из которых следующие:
WIDTH — ширина рисунка в пикселах
HEIGHT — высота рисунка в пикселах
ALT — текстовое описание
BORDER — ширина рамки вокруг рисунка
Если размеры рисунка не указаны, они определяются из файла (для этого, естественно, надо загрузить файл из Интернета). Если указанные размеры не совпадают с размерами рисунка в файле, он будет сжат или растянут. Рекомендуется всегда указывать размеры рисунка, поскольку это позволяет браузеру сразу определить размеры области, не скачивая рисунок.
Описание рисунка в параметре ALT появляется в виде всплывающей подсказки при наведении курсора мыши на этот рисунок. Кроме того, если у пользователя отключен вывод рисунков (для ускорения работы), на месте рисунка выводится текст, заданный в параметре ALT. Этот параметр, так же, как и размеры рисунка, обязательно указывается на всех серьезных сайтах.
Вот пример использования этих параметров:
<IMG SRC="photo.jpg" ALT="Моя фотография" WIDTH="50" height="80" BORDER="0">
Рисунки-ссылки
Рисунки очень часто являются гиперссылками. Если вы хотите сделать рисунок ссылкой, надо заключить соответствующий ему тэг <IMG> внутрь тэга <A> (см. раздел Ссылки). Например сылка на сайт www.mail.ru описывается так:
<A HREF="http://www.mail.ru"> <IMG SRC="mailru.jpg" BORDER="0"> </A>
При этом на экране
браузера вы увидите значок
,
который и будет ссылкой. Нулевое значение
параметра BORDER
тэга <IMG>
служит для того, чтобы избавиться от
синей границы вокруг рисунка-ссылки.
Следующий раздел посвящен описанию таблиц в языке HTML.
Таблицы
Простейшая таблица
Таблицы на Web-страницах используются не только для представления табличного материала, но и для того, чтобы выровнять текст и рисунки. Например, с помощью таблиц (без рамки) можно расположить текст и рисунки в несколько колонок.
Ниже приведен код простейшей таблицы
<BODY> <TABLE BORDER="1"> <TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек.</TD> </TR> </TABLE> </BODY>
и вид окна браузера
Таблица начинается тэгом <TABLE> (от английского table — таблица) и заканчивается парным ему тэгом </TABLE>. Параметр BORDER тэга <TABLE> обозначает ширину рамки таблицы.
Содержимое таблицы описывается по строкам сверху вниз (начиная с верхней строки). Каждая строка начинается тэгом <TR> (от английского table row — строка таблицы) и заканчивается парным ему тэгом </TR>.
Ячейки в строке описываются слева направо. Каждая ячейка начинается тэгом <TD> (от английского table data — данные таблицы) и заканчивается парным ему тэгом </TD>. В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы).
Отступы
Тэг <TABLE> позволяет задать два вида отступов:
CELLSPACING — расстояние между границами соседних ячейками
CELLPADDING — расстояние между границами ячейки и ее содержимом
Например:
<TABLE CELLSPACING="5" CELLPADDING="10">
Размеры
Каждый из тэгов <TABLE>, <TR> и <TD> имеет параметры, задающие размеры в пикселях или в процентах от общей высоты или ширины. По умолчанию каждой ячейке отводится минимальное место, необходимое для размещения всей информации.
Параметры WIDTH и HEIGHT тэга <TABLE> обозначают общую ширину и высоту таблицы. Например таблица:
<TABLE WIDTH="50%" HEIGHT="300">
должна занимать 50 процентов ширины окна браузера и иметь высоту 300 пикселов. Однако если вся нужная информация не поместится в эту область, таблица будет расширена (чаще всего увеличивается ее высота).
Параметр HEIGHT тэга <TR> задает высоту строки таблицы в пикселах или в процентах от общей высоты таблицы. Например строка:
<TR HEIGHT="30">
должна иметь высоту 30 пикселов. Однако если вся нужная информация не поместится в эту область, ее высота будет увеличена.
Параметры WIDTH и HEIGHT тэга <TD> обозначают ширину и высоту ячейки таблицы. Например ячейка:
<TD WIDTH="50" HEIGHT="30">
должна иметь ширину 50 и высоту 30 пикселов. Однако если вся нужная информация не поместится в эту область или эти размеры не стыкуются с другими, эти команды не выполняются.
Выравнивание
Для строки или для отдельной ячейки можно задать два параметра, которые обеспечивают выравнивание информации в ячейках по горизонтали (параметр ALIGN) и по вертикали (VALIGN). Параметр ALIGN может принимать значения
left — по левой границе
right — по правой границе
center — по центру
Параметр VALIGN может принимать значения
top — по верхней границе
bottom — по нижней границе
middle — по середиен
Например:
<TR ALIGN="center" VALIGN="top"> <TD>По центру, по верхней границе</TD> <TD ALIGN="right" VALIGN="middle">По правой границе, по середине</TD> </TR>
Фон и текст
Для того, чтобы задать фон таблицы, строки или даже отдельной ячейки, тэги <TABLE>, <TR> и <TD> имеют параметры
BGCOLOR - задает цвет фона в виде названия или шестнадцатеричного кода (см. раздел Цвета)
BACKGROUND - задает фон-рисунок, можно указать имя файла, путь к нему или URL (см. раздел Рисунки)
Для того, чтобы изменить цвет текста в ячейке, используют тэг <FONT> (см. раздел Текст). Например, код
<TABLE BORDER="1" BGCOLOR="green"> <TR HEIGHT="30" BGCOLOR="blue"> <TD><FONT COLOR="white">Привет!</FONT></TD> <TD BGCOLOR="red"></TD> </TR> <TR> <TD BACKGROUND="web.jpg">Таблица из двух строк</TD> <TD>и двух столбцов</TD> </TR> </TABLE>
дает такую таблицу:
Объединение ячеек
Соседние ячейки внутри одной строки или столбца можно объединять. Тэг <TD> имеет параметры COLSPAN (от английского column span — охват столбцов) и ROWSPAN (от английского row span — охват строк), которые показывают, сколько столбцов и строк объединяет ячейка. Первый пример показывает объединение столбцов одной строки
<TABLE BORDER="1"> <TR> <TD COLSPAN="3">Привет!</TD> </TR> <TR> <TD>Вася,</TD> <TD>Петя,</TD> <TD>Маша!</TD> </TR> </TABLE> |
|
|
Во втором примере объединяются строки одного столбца:
<TABLE BORDER="1"> <TR> <TD ROWSPAN="3">Привет!</TD> <TD>Вася,</TD> </TR> <TR> <TD>Петя,</TD> </TR> <TR> <TD>Маша!</TD> </TR> </TABLE> |
|
|
Вложенные таблицы
В ячейки таблицы можно вставлять другие (вложенные) таблицы. Например, чтобы разместить две таблицы рядом, используют трюк, при котором они «вкладываются» в ячейки другой таблицы со скрытой рамкой. Так код
<TABLE BORDER="0" CELLSPACING=10> <TR><TD> <TABLE BORDER="1"> <TR><TD>Вася</TD><TD>Петя</TD></TR> <TR><TD>Маша</TD><TD>Даша</TD></TR> </TABLE> </TD> <TD> <TABLE BORDER="1"> <TR><TD>1</TD><TD>22</TD></TR> <TR><TD>333</TD><TD>4444</TD></TR> </TABLE> </TD></TR> </TABLE>
дает изображение
Внешняя таблица имеет одну строку и два столбца, ее рамка скрыта.
Следующий раздел описывает сложные структуры — фреймы.
Каскадные таблицы стилей, или css для начинающих (практикум "правильного" html)
#10 (49) октябрь 2000 Журнал "Мир Internet"; www.iworld.ru
Русская часть Интернета растет день ото дня. За последние год-два суммарный объем русскоязычных страниц увеличился более чем в два раза. Сегодня в России уже никого не удивишь словосочетанием <домашняя страничка> или английским словом <homepage>. Если раньше создание web-страниц было уделом избранных и на просторах Рунета царили лишь признанные <киты> web-дизайна, то теперь даже мой десятилетний сынишка в свободное от учебы время мастерит потихонечку собственную страницу, собираясь разместить ее на каком-нибудь бесплатном сервере (вроде narod.ru или boom.ru), которых за последний год тоже развелось в Рунете множество. Web-конструированием сегодня не занимается, наверное, только не подключенный к Сети или ленивый. Множество людей, поблуждав по просторам Интернета, рано или поздно задумываются о создании собственной странички. Для них-то и написана эта статья.
Речь здесь пойдет о <правильном> HTML для новичков, а именно - о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (http://www.w3.org/). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее - о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством <классического> HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.
Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad'ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: <Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - тексты я создаю в MS Word, презентации - в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу - MS FrontPage...> Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.
Первый раз - в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы <отсебятину> - множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален - любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.
Из этого следует, что второй раз новичок обкрадывает себя именно в части гибкости и полноты управления создаваемым содержимым страницы - визуальные редакторы не предоставляют такой свободы творчества, какую предоставит вам работа непосредственно с исходным кодом создаваемой страницы.
Ну, а теперь перейдем непосредственно к делу - к созданию красивых и небольших web-страниц с помощью каскадных таблиц стилей (в дальнейшем тексте я буду употреблять их сокращенное название - CSS). Предполагается, что вы, дорогие читатели, прочтя вступление, согласились со мной, отказались от визуальных редакторов, добыли книгу по HTML, изучили хотя бы небольшое количество основных тегов и атрибутов и горите желанием узнать, что же такое CSS и с чем его едят.