HTML — это просто 5
HTML - это просто Основные принципы работы с таблицами. Вложенные таблицы. Что такое фреймы. Горизонтальные и вертикальные фреймы. Специфика создания страниц для Netscape Navigator и MS Internet Explorer. Все гениальное просто.
Ох, нелегко быть хакером... Погони, перестрелки... Забудьте. Все это голливудская ерунда. Настоящие хакеры работают мозгами — иначе в этом деле невозможно, ведь основные сложности, с которыми приходится сталкиваться при взломе компьютерных сетей,— это необходимость сделать что-либо с помощью средств, которыми это сделать, казалось бы, невозможно, а других способов выполнить задачу просто нет. Вот и приходится думать. А помогают в этом знания. Почему я все это говорю? Дело в том, что, как это ни грустно, но проблемы, с которыми сталкивается Web-дизайнер, зачастую имеют много общего со спецификой работы хакеров. К сожалению, HTML — очень "негибкий" язык, и существует множество вещей, сделать которые с помощью стандартных средств этого языка казалось бы нельзя. Но делать приходится. Поэтому при создании неординарных Web-страниц стоит руководствоваться замечательным принципом — "Think as a hacker", т.е. "Думайте как хакер" — и, обладая глубокими знаниями, вы наверняка найдете решение проблемы.
Один из основных недостатков классического HTML — отсутствие возможности абсолютного позиционирования элементов Web-страницы, т.е. вы не можете расположить что-либо в точно указанном вами месте страницы. Вместо этого HTML предлагает относительное позиционирование, при котором расположение элемента описывается только относительно другого элемента, предшествующего ему.
Например, вы не можете расположить рисунок не по центру страницы и поместить под него подпись, точно позиционированную относительно центра рисунка.
Сделать это можно, только выровняв и рисунок, и подпись относительно центра страницы, используя тег <CENTER> .
В то же время решение этой проблемы существует, и причем целых два варианта. Один из них — разместить элементы страницы с использованием CSS (Cascading Style Sheets) — нового стандартного языка расширения HTML, который в ближайшем будущем в корне изменит приемы создания Web-страниц, сделает их более привлекательными и упростит разработку.
CSS обладает громадным потенциалом возможностей по позиционированию и оформлению элементов Web-страниц, недавно стандарт на него был утвержден WWW-консорциумом, и в скорем времени я посвящу несколько статей изучению именно этого языка. Но у CSS есть один недостаток: его поддерживают только последние версии браузеров.
Второй, классический вариант решения этой проблемы заключается в применении таблиц для позиционирования элементов страницы. Это не слишком просто, но это единственный универсальный путь. Именно так в настоящее время и устроено большинство сложных Web-страниц.
Суть метода заключается в следующем: на страничке создается таблица с невидимыми границами ячеек, и элементы, требующие точного позиционирования, располагаются в ячейках таблицы. Для каждой из ячеек вы можете указать собственные параметры форматирования, соответственно команды форматирования действуют только в пределах ячейки.
Создав на странице однострочную таблицу, состоящую из трех ячеек, и расположив в левой ячейке, внутри тега <CENTER> </CENTER>, наш рисунок и подпись к нему, мы получим искомый вариант. Рассмотрим подробнее теги, применяющиеся для создания таблиц. В HTML любая таблица состоит из строк, разделенных на ячейки. Минимальное их количество — одна строка, содержащая одну ячейку. Максимальное количество не ограничено.
Каждая строка и ячейка описываются отдельными тегами. Все теги, применяющиеся для описания таблиц, требуют ограничения действия, т.е. закрытия. Структура HTML-таблицы выглядит так:
Рассмотрим синтаксис этих тегов:
<TABLE> </TABLE> — главный тег, применяющийся для описания начала и конца таблицы, а также параметров отображения таблицы, таких, как ее размеры, оформление границ ячеек и т.п.
<TR></TR> — тег, описывающий начало и конец строки таблицы.
<TD></TD> — тег, описывающий начало и конец ячейки.
Каждый из этих тегов имеет набор параметров, служащих для управления отображением таблицы, установки размеров, выравнивания и т.д.
Каждая таблица и ячейки, составляющие ее, имеют такие свойства, как ширина и высота, выравнивание по ширине и высоте, толщина границы, цвет фона. Эти свойства присваиваются элементам таблицы с помощью параметров WIDTH, HEIGHT, ALIGN, VALIGN, BORDER, BGCOLOR, BACKGROUND, CELLSPACING, CELLPADDING, COLSPAN и ROWSPAN.
Давайте поэкспериментируем с ними.
Параметр WIDTH управляет шириной таблицы и ячейки. В случае, если этот параметр не указан, ширина таблицы/ячейки будет зависеть от ширины ее содержимого. Ширина может указываться в процентах относительно ширины окна (для ячейки — относительно ширины таблицы) или в пикселях.
HEIGHT — то же самое, но для управления высотой таблицы.
Вот исходный код первой таблицы (Пример 1):
А вот второй (Пример 2):
И третьей (Пример 3):
Для управления размещением таблицы на Web-странице и для форматирования данных внутри таблицы служат параметры ALIGN и VALIGN .
Параметр ALIGN может иметь значения LEFT, RIGHT и CENTER .
VALIGN может принимать значения TOP, MIDDLE и BOTTOM .
При отсутствии этих параметров таблица всегда будет выравниваться относительно левого края страницы, а содержимое ячеек — по горизонтали относительно левого края ячейки и по вертикали относительно ее центра. При употреблении в теге <TABLE> параметр ALIGN управляет выравниванием таблицы относительно окна браузера, а при употреблении в тегах <TD> и <TR> — выравниванием содержимого относительно границ ячейки.
Параметр VALIGN применяется только внутри тегов <TR> и <TD> . При употреблении параметров ALIGN и VALIGN внутри тега <TR> выравнивание задается сразу для всех ячеек, содержащихся в этой строке.
Вот исходный код этих таблиц (Пример 4. Пример 5):
4.
5.
Параметры CELLSPACING служат для управления количеством свободного пространства между ячейками таблицы, а CELLPADDING — между границами ячейки и ее содержанием. Употребляются они так же только в теге <TABLE> .
Для создания "невидимой" таблицы необходимо установить параметры BORDER=0 CELLSPACING=0 CELLPADDING=0. Исходный код таблицы 1 (Пример 6):
И таблицы 2:
Это все тэги, которые мы с вами рассмотрели в этой статье. В следующем номере мы рассмотрим тэги, отвечающие за цветовую гамму, размеры таблиц и т.д.
Евгений Пивнев
(c) компьютерная газета
Ох, нелегко быть хакером... Погони, перестрелки... Забудьте. Все это голливудская ерунда. Настоящие хакеры работают мозгами — иначе в этом деле невозможно, ведь основные сложности, с которыми приходится сталкиваться при взломе компьютерных сетей,— это необходимость сделать что-либо с помощью средств, которыми это сделать, казалось бы, невозможно, а других способов выполнить задачу просто нет. Вот и приходится думать. А помогают в этом знания. Почему я все это говорю? Дело в том, что, как это ни грустно, но проблемы, с которыми сталкивается Web-дизайнер, зачастую имеют много общего со спецификой работы хакеров. К сожалению, HTML — очень "негибкий" язык, и существует множество вещей, сделать которые с помощью стандартных средств этого языка казалось бы нельзя. Но делать приходится. Поэтому при создании неординарных Web-страниц стоит руководствоваться замечательным принципом — "Think as a hacker", т.е. "Думайте как хакер" — и, обладая глубокими знаниями, вы наверняка найдете решение проблемы.
Один из основных недостатков классического HTML — отсутствие возможности абсолютного позиционирования элементов Web-страницы, т.е. вы не можете расположить что-либо в точно указанном вами месте страницы. Вместо этого HTML предлагает относительное позиционирование, при котором расположение элемента описывается только относительно другого элемента, предшествующего ему.
Например, вы не можете расположить рисунок не по центру страницы и поместить под него подпись, точно позиционированную относительно центра рисунка.
Сделать это можно, только выровняв и рисунок, и подпись относительно центра страницы, используя тег <CENTER> .
В то же время решение этой проблемы существует, и причем целых два варианта. Один из них — разместить элементы страницы с использованием CSS (Cascading Style Sheets) — нового стандартного языка расширения HTML, который в ближайшем будущем в корне изменит приемы создания Web-страниц, сделает их более привлекательными и упростит разработку.
CSS обладает громадным потенциалом возможностей по позиционированию и оформлению элементов Web-страниц, недавно стандарт на него был утвержден WWW-консорциумом, и в скорем времени я посвящу несколько статей изучению именно этого языка. Но у CSS есть один недостаток: его поддерживают только последние версии браузеров.
Второй, классический вариант решения этой проблемы заключается в применении таблиц для позиционирования элементов страницы. Это не слишком просто, но это единственный универсальный путь. Именно так в настоящее время и устроено большинство сложных Web-страниц.
Суть метода заключается в следующем: на страничке создается таблица с невидимыми границами ячеек, и элементы, требующие точного позиционирования, располагаются в ячейках таблицы. Для каждой из ячеек вы можете указать собственные параметры форматирования, соответственно команды форматирования действуют только в пределах ячейки.
Создав на странице однострочную таблицу, состоящую из трех ячеек, и расположив в левой ячейке, внутри тега <CENTER> </CENTER>, наш рисунок и подпись к нему, мы получим искомый вариант. Рассмотрим подробнее теги, применяющиеся для создания таблиц. В HTML любая таблица состоит из строк, разделенных на ячейки. Минимальное их количество — одна строка, содержащая одну ячейку. Максимальное количество не ограничено.
Каждая строка и ячейка описываются отдельными тегами. Все теги, применяющиеся для описания таблиц, требуют ограничения действия, т.е. закрытия. Структура HTML-таблицы выглядит так:
| <ОПИСАНИЕ ТАБЛИЦЫ> <ОПИСАНИЕ СТРОКИ> <ОПИСАНИЕ ЯЧЕЙКИ> содержание </ОПИСАНИЕ ЯЧЕЙКИ> <ОПИСАНИЕ ЯЧЕЙКИ> содержание </ОПИСАНИЕ ЯЧЕЙКИ> <ОПИСАНИЕ ЯЧЕЙКИ> содержание </ОПИСАНИЕ ЯЧЕЙКИ> </ОПИСАНИЕ СТРОКИ> </ОПИСАНИЕ ТАБЛИЦЫ> |
<TABLE> </TABLE> — главный тег, применяющийся для описания начала и конца таблицы, а также параметров отображения таблицы, таких, как ее размеры, оформление границ ячеек и т.п.
<TR></TR> — тег, описывающий начало и конец строки таблицы.
<TD></TD> — тег, описывающий начало и конец ячейки.
Каждый из этих тегов имеет набор параметров, служащих для управления отображением таблицы, установки размеров, выравнивания и т.д.
Каждая таблица и ячейки, составляющие ее, имеют такие свойства, как ширина и высота, выравнивание по ширине и высоте, толщина границы, цвет фона. Эти свойства присваиваются элементам таблицы с помощью параметров WIDTH, HEIGHT, ALIGN, VALIGN, BORDER, BGCOLOR, BACKGROUND, CELLSPACING, CELLPADDING, COLSPAN и ROWSPAN.
Давайте поэкспериментируем с ними.
Параметр WIDTH управляет шириной таблицы и ячейки. В случае, если этот параметр не указан, ширина таблицы/ячейки будет зависеть от ширины ее содержимого. Ширина может указываться в процентах относительно ширины окна (для ячейки — относительно ширины таблицы) или в пикселях.
HEIGHT — то же самое, но для управления высотой таблицы.
Вот исходный код первой таблицы (Пример 1):
| <TABLE> <TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек.</TD> </TR> </TABLE> |
| Таблица из одной строки | из трех столбцов | без указания ширины таблицы и ячеек. |
| <TABLE BORDER WIDTH=100%> <TR> <TD>Таблица из одной строки</TD> <TD>и трех столбцов</TD> <TD>c указанием ширины таблицы, равной 100% ширины окна браузера.</TD> </TR> </TABLE> |
| Таблица из одной строки | и трех столбцов | c указанием ширины таблицы, равной 100% ширины окна браузера. |
| <TABLE BORDER> <TR> <TD WIDTH=75> Ячейка с указанием ширины в 75 пикселей</TD> <TD WIDTH=100> Ячейка с указанием ширины в 100 пикселей</TD> <TD WIDTH=150> Ячейка с указанием ширины в 150 пикселей</TD> </TR> </TABLE> |
| Ячейка с указанием ширины в 75 пикселей | Ячейка с указанием ширины в 100 пикселей | Ячейка с указанием ширины в 150 пикселей |
Параметр ALIGN может иметь значения LEFT, RIGHT и CENTER .
VALIGN может принимать значения TOP, MIDDLE и BOTTOM .
При отсутствии этих параметров таблица всегда будет выравниваться относительно левого края страницы, а содержимое ячеек — по горизонтали относительно левого края ячейки и по вертикали относительно ее центра. При употреблении в теге <TABLE> параметр ALIGN управляет выравниванием таблицы относительно окна браузера, а при употреблении в тегах <TD> и <TR> — выравниванием содержимого относительно границ ячейки.
Параметр VALIGN применяется только внутри тегов <TR> и <TD> . При употреблении параметров ALIGN и VALIGN внутри тега <TR> выравнивание задается сразу для всех ячеек, содержащихся в этой строке.
Вот исходный код этих таблиц (Пример 4. Пример 5):
4.
| <TABLE BORDER WIDTH=400 HEIGHT=150> <TR> <TD VALIGN=TOP>VALIGN=TOP</TD> <TD VALIGN=MIDDLE ALIGN=CENTER>ALIGN=CENTER VALIGN=MIDDLE</TD> <TD VALIGN=BOTTOM ALIGN=RIGHT>ALIGN=RIGHT VALIGN=BOTTOM</TD> </TR> </TABLE> |
| VALIGN=TOP | ALIGN=CENTER VALIGN=MIDDLE | ALIGN=RIGHT VALIGN=BOTTOM |
| <TABLE BORDER WIDTH=400 HEIGHT=150 ALIGN=CENTER> <TR VALIGN=BOTTOM ALIGN=CENTER> <TD>Для этой строки задан параметр VALIGN=BOTTOM и ALIGN=CENTER</TD> </TR> <TR VALIGN=TOP ALIGN=CENTER> <TD>А для этой — VALIGN=TOP и ALIGN=CENTER</TD> </TR> </TABLE> |
Для этой строки задан параметр VALIGN=BOTTOM и ALIGN=CENTER |
А для этой — VALIGN=TOP и ALIGN=CENTER |
Параметры CELLSPACING служат для управления количеством свободного пространства между ячейками таблицы, а CELLPADDING — между границами ячейки и ее содержанием. Употребляются они так же только в теге <TABLE> .
Для создания "невидимой" таблицы необходимо установить параметры BORDER=0 CELLSPACING=0 CELLPADDING=0. Исходный код таблицы 1 (Пример 6):
| <TABLE BORDER=15 WIDTH=400 HEIGHT=150 ALIGN=CENTER> <TR> <TD>Для этой таблицы задан параметр BORDER=15</TD> </TR> </TABLE> |
| Для этой таблицы задан параметр BORDER=15 |
И таблицы 2:
| <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=25 WIDTH=600 HEIGHT=150 ALIGN=CENTER> <TR> <TD>Для этой таблицы заданы параметры BORDER=5 CELLSPACING=5 CELLPADDING=25</TD> </TR> </TABLE> |
| Для этой таблицы заданы параметры BORDER=5 CELLSPACING=5 CELLPADDING=25 |
Это все тэги, которые мы с вами рассмотрели в этой статье. В следующем номере мы рассмотрим тэги, отвечающие за цветовую гамму, размеры таблиц и т.д.
Евгений Пивнев
(c) компьютерная газета
Компьютерная газета. Статья была опубликована в номере 47 за 2000 год в рубрике soft :: интернет
