Создаем, программируем, шлифуем и раскручиваем web-caйт. Серия Быстро и легко - Алексеев Ю.М.
Скачать (прямая ссылка):
Сначала создадим структуру нового
* ¦
.> Перейдите к редактору Блокнот (Notepad). •
: :ч. f • „•... ¦¦
> Выберите команду меню Файл * Создать (Fil^ ¦ New), чтобы создать новый пустой документ. у '' ¦ . : ... :-. ¦-- , <• ¦ ¦ .--л-.г.-/-;
> Введите код, содержащий основные теги для определения структуры HTML-документа:
<head> /' I"'/,/Л; і У* - •
< tit 1а>Таблица< /tit!•>
</head> '"' ¦¦ 'IJi- .:' V -
: . ' . г-1*
<body> -г-;- ¦ . .-,V ,+/ - '*<....•.
</body> ' "' " " 1 ' ./ V."':. . '
</html>
Обратите внимание, что в заголовке документа между тегами <title> и </title> указано его название Таблица.
1
ГЛАВА 1. Первая Web-страница за несколько минут
31
Таблица в языке HTML начинается тегом <table> и заканчивается тегом </table>. Любая таблица состоит из одной или нескольких строк. Каждая строка заключена между тегами <tr> и </tr>. Строка таблица также может включать несколько ячеек. Ячейка строки обрамляется парой тегов <tdx/td>, между которыми, например, можно помещать фрагмент текста или код HTML, соответствующий рисунку ,Количество строк в,
таблице определяется числом тегов <tr>, а количество столбцов - максимальным числом тегов <td> в строке.
Теперь вставим в документ таблицу с информацией о фирме АТЛАНТ. ' г'--^ф > Ниже тега < /body> в документе введите следующий HTML-код таблицы: <table>
<trxtd>rnaBHaa c«rpaHM4a</td></tr> <trxtd>O кампании</іа></Ьг> <trxtd>ycflyrM</tdx/tr> .>'-"---' ; '• '
<tr><td>KoH"raKTw</tdx/tr> '.' «•*
<trxtd>fleaTtHibHOCTb</tdx/t:r> . . , <їгхеа>Прайс-лист< /tdx /tr> <trxtd>Pei4icTpaiWR</tdx/tr> <trxtd>rocTeBan Ktuira</tdx/tr>
<tr><td>riOneOHbie CCbUlKM</tdX/tr> '¦•}¦"¦
</table> ~-L •'• ¦Ki*" ¦ : '/'•'v-1
Созданный HTML- документ представлен на Рис. 1.24
: ..У.-г-.-уГ-.:Г
ї;г rv.v;
1 :.;f. Si'.
:•:...;,"¦.-?¦¦ ¦.J
Г"" і -if
BS E3
Ф>й> Правка Формат Bm Справ» :|
<htinl>
' :
<head>
< title>Ta6rama</title> '; 1 *
</head>
1 -'body>
'-::,?-''' е. I<ti)ble> • * •
¦ Л <!|Х((|>Глявная страннцз</((іх/(і>
<trxtd>0 камгампі<Лгі'><Лг>
- '
" ¦
<tr><td>KoHTaKTbi</td></ti>
<ігхігі>Деятельность<ЛсІхДі>
<tr><td>I5)aftc-rajrr</tdx/u>
--
<trxtd>PenicTpaiflM</tdx/h>
<й:><1(1>Г'остеваякнііга</1<ГХ%>
<(ГХІ(Г>ПОЛ«НЬІЄ CCbI.HMr'/tdX/tl'>
</tabIe>
</body> ¦ ' .
<Дйш1>
"7|
'.ii'Ct^
Рис. 124. HTML-документ с таблицей
Чтобы просмотреть таблицу в браузере, выполните следующие шаги. ¦ > Сохраните HTML-документ на диске под именем таблица.гпті.
'.'>Vy!'.
32
Быстро и легко создаем, программируем и раскручиваем Web-сайт
Перейдите к программе Microsoft Internet Explorer.
В поле ввода Адрес (Address) окна программы введите полный путь к файлу с HTML-кодом таблица.МтІ.
Нажмите клавишу pnteil. В окне браузера появится Web-страница с таблицей (Рис. 1.25).
ПІ ldOflHud - MigiuuuH urfcirilt eupluiei - |ao
IUHUMIian р judl dl
HnIx
Файл Правка Вна Избранное Сири
ыр Справка
Поиск Из-Зранкдая J ^
S- "
Апис |g С:МЁВЧтай|»и.г||>||
\г\ E) Перепад
Lrki "
главная страница о кампании
услуги контакты деятельность : прайс-лист регистрация гостевая книга полезные ссылки
Iполезны «Р[о»»....
[Tj MyCorrpulei
Рис. 1,25. Web-страница с таблицей
По умолчанию таблица отображается по левому краю окна. Для изменения горизон-' тального . положения . таблицы нужно воспользоваться атрибутом align тега <table>. Значение данного атрибута center обеспечит центрирование таблицы, а значение right - выравнивание по правому краю окна браузера.
По умолчанию линии сетки таблицы не отображаются. С помощью атрибута border тега <table> можно указать толщину рамки вокруг каждой ячейки и всей таблицы в пикселах.
Давайте центрируем таблицу, настроим ее линии сетки и посмотрим на результат в
браузере.
> Перейдите к редактору Блокнот (Notepad).
> В документе с таблицей замените тег <table> на HTML-код для центрирования таблицы и настройки ее линий сетки:
<table border 2 align center> ' -. ¦¦ '.
>• Сохраните HTML-документ на диске. 4V1 ...
> Перейдите к программе Microsoft Internet Explorer и перезагрузите файл таблица.Мт!.
На Web-странице таблица будет выровнена по центру, и у нее появятся линии сетки (Рис. 1.26). . <
По умолчанию при использовании пары тегов <tdx/td> текст в ячейках выравнивается по левому краю и представляется обычным начертанием. Другая пара тегов <tbx/tb> по умолчанию определяет полужирное начертание содержимого ячеек и
ГЛАВА 1. Первая Web-странйца - за несколько минут
33
центрирование данных. В то же время обе пары тегов имеют атрибуты для форматирования данных в ячейках. Атрибут align предназначен для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки. С помощью атрибута valign можно выровнять данные в ячейках по верхнему (top) и нижнему (bottom) краям, а также по вертикальной середине (middle) ячейки. Атрибуты width и height определяют ширину и высоту ячейки в пикселах.
