Файл: Основы программирования на языке HTML (Синтаксис и теги HTML).pdf

Специальные средства для создания таблиц, впрочем, не отменяют возможности использования переформатированного текста. Использование таблиц не ограничивается только данными, состоящими из рядов и колонок. Одним из применений является организация расположения разнообразных данных на странице, которые могут состоять из простого текста, изображений, других таблиц и т. д. Для понимания как создаётся таблица в HTML, разберём основы и уясним общую схему создания.

Любая таблица создается по следующей схеме:

<ОТКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ>
<ОТКРЫВАЮЩИЙ ТЕГ РЯДА>
<ОТКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ>
Текст, картинки или таблицы
<ЗАКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ>
<ЗАКРЫВАЮЩИЙ ТЕГ РЯДА>
</ЗАКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ>

Любая таблица состоит из рядов, которые состоят из ячеек (столбцов). Внутри ячеек содержится информация, выводимая внутри таблицы. Как видно из приведенной схемы для создания простой таблицы, состоящей из одного ряда и одной ячейки нужно открыть таблицу, открыть ряд, открыть ячейку, а затем закрыть ячейку, закрыть ряд и закрыть таблицу. Чтобы создать таблицу, состоящую из одного ряда, в котором находятся две ячейки, нужно просто между открывающим и закрывающим тегами ряда таблицы вставить два тега ячеек (открывающий и закрывающий) вместо одного.

10.1 Правила создания таблиц

Рассмотрим обязательные правила создания таблиц.

• Соблюдение порядка тегов <TABLE>, <TR> и <TD> Сначала открываем таблицу, затем открываем ряд, затем открываем и закрываем несколько ячеек, затем закрываем ряд и в конце закрываем таблицу. Несоблюдение этой последовательности может привести к непредсказуемым результатам.

• Всегда закрываем тег <TABLE> в конце таблицы

Если не закрыть тег <TABLE> в конце таблицы, то в большинстве браузеров это приведет к непредсказуемым результатам и некоторые браузеры и обозреватели вообще не отобразят содержимое таблицы на экране.

• Количество ячеек во всех рядах таблицы должно быть одинаковым.

Даже если вы не хотите ничего писать в одной из ячеек ряда таблицы, просто вставьте ячейку без содержимого вот так <TD> </TD>. Комбинация символов ' ' означает пустой символ. Если не вставить абсолютно ничего в ячейку, то в браузере Internet Explorer не будет этой ячейки и, например, при использовании параметра BGCOLOR тега <TD>, не увидим фона ячейки.

• Писать каждый тег таблицы с новой строки.

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

10.2 Простая таблица

Наименование	Цвет	Количество
Фломастер	Зелёный	5
Карандаш	Жёлтый	7

Посмотрим на прокомментированный HTML код, который создает эту таблицу:

<TABLE> открывающий тег таблицы
<TR> открывающий тег ряда 1
<TD> Наименование </TD> открывающий и закрывающий теги ячейки 1
<TD>Цвет</TD> открывающий и закрывающий теги ячейки 2
<TD> Количество </TD> открывающий и закрывающий теги ячейки 3
</TR> закрывающий тег ряда 1
<TR>
<TD> Фломастер </TD>
<TD> Зелёный </TD>
<TD>5</TD>
</TR>
<TR>
<TD> Карандаш </TD>
<TD> Жёлтый </TD>
<TD>7</TD>
</TR>
</TABLE> закрывающий тег таблицы

Открывающим и закрывающим тегами таблицы являются теги <TABLE> и </TABLE>, открывающим и закрывающим тегами ряда являются теги <TR> и </TR>, а открывающим и закрывающим тегами ячейки (колонки) таблицы являются теги <TD> и </TD> Как видно из комментария к примеру в первой строке открывается таблица, а во второй строке открывается первый ряд таблицы. Далее идут три строки, представляющие три ячейки таблицы. В каждой строке открывается ячейка таблицы, затем идет содержание этой ячейки и в конце ячейка закрывается. В шестой строке HTML кода закрывается первый ряд таблицы. Затем все повторяется еще два раза - открытие ряда (7 строка), три ячейки с содержимым (8-10 строки), закрытие ряда (11 строка) и т.д. В последней строке HTML кода таблица закрывается.

11. HTML- редакторы

Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).

Текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует "подсветка" текста., в общем, работать крайне неудобно.

Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое. Странички получаются какими-то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.

Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области.

DreamWeaver 3.0

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" (записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

HomeSite 4.0

Следующий редактор - HomeSite 4 - для создания страниц вручную, т.е. для знатоков HTML. Получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, Google Phrome, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если загрузить чужой HTML-код, то HomeSite все перепишет по-своему.

Еще одна отличительная особенность HomeSite - это его "склейка" с Dreamweaver. HomeSite обладает кнопкой "Dreamweaver", а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для корректировки HTML-кода.

Одним из последних HTML-редакторов является EVR Soft 1st Page v2.

Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть можно выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.