- •Пояснительная записка
- •Введение html редакторы
- •Что такое html?
- •Кто создал html?
- •При помощи чего создаются html-страницы?
- •Визуальные редакторы или wysiwyg (What You See Is What You Get — Что видишь, то и получаешь)
- •Текстовые html-редакторы
- •Урок 1. Как устроен сайт. Делаем первую страницу.
- •Урок 2. Оформляем html-страницу и форматируем текст.
- •Шаг 1. Меняем фон html-страницы и цвет текста
- •Шаг 2. Форматируем текст
- •Урок 3. Располагаем элементы на странице.
- •Урок 4. Соединяем html-страницы между собой.
- •Урок 5. Структура html документа
- •Заголовок документа - тег head и его элементы
- •Тело документа - тег body
- •Урок 6. Форматирование текста
- •Теги разделения на абзацы и переноса строки
- •Теги, выделяющие текст курсивом
- •Теги, выделяющие текст полужирным шрифтом
- •Теги, выделяющие текст подчеркиванием
- •Теги, выводящие текст моноширинным шрифтом
- •Теги, выводящие текст в верхнем и нижнем индексах
- •Тег font и его параметры
- •Совместное использование тегов
- •Урок 7. Форматирование текста (продолжение).
- •Теги, делающие текст заголовками
- •Теги разделения на абзацы и переноса строки
- •Теги, выделяющие текст курсивом
- •Теги, выделяющие текст полужирным шрифтом
- •Теги, выделяющие текст подчеркиванием
- •Теги, выводящие текст моноширинным шрифтом
- •Теги, выводящие текст в верхнем и нижнем индексах
- •Тег font и его параметры
- •Совместное использование тегов
- •Урок 8. Специальные символы.
- •Урок 9. Ссылки в html.
- •Ссылка - тег a
- •Урок 10. Создание списков.
- •Нумерованные списки
- •Маркированные списки
- •Списки определений
- •Вложенные списки
- •Списки списков
- •Урок 11. Работа с изображениями.
- •Размеры изображений
- •Отделение изображения от текста
- •Альтернативный текст
- •Изображение в качестве ссылки
- •Урок 12. Работа с таблицами - тег table.
- •Создаем таблицу
- •Оформляем строки (tr) и ячейки (td)
- •Атрибуты таблиц
- •Атрибуты ячеек
- •Урок 13. Работа с таблицами сложной структуры.
- •Тег colspan - объединение столбцов
- •Вложенные таблицы
- •Специальные символы
- •Домашнее задание №1.
- •Домашнее задание №2.
- •Домашнее задание №3.
- •Домашнее задание №4.
- •Домашнее задание №5.
- •Домашнее задание №6.
- •Домашнее задание №7.
- •Домашнее задание №8.
- •Домашнее задание №9.
- •Домашнее задание №10.
- •Домашнее задание №11.
- •Домашнее задание №12.
- •Домашнее задание №13.
- •Домашнее задание №14.
- •Домашнее задание №15.
- •Домашнее задание №16.
- •Домашнее задание №17.
- •Домашнее задание №18.
- •Домашнее задание №19.
- •Домашнее задание №20.
- •Домашнее задание №21.
Атрибуты ячеек
Итак, мы научились с вами строить таблицы практически любой сложности. И это важно. Возможно, многие из вас будут удивлены и разочарованы, типа зачем вообще нужны эти таблицы, зачем им уделять так много времени? Типа, мы хотим делать веб-странички, а не строить разные там графики и таблицы. И вот что я на это вам скажу.
Конечно, поначалу таблицы и предназначались только для того, чтобы заполнять их скучными цифрами, сводками и никому не нужными процентами. Но нашелся вот один хороший человек (к сожалению, это была не я), который догадался, что раз в каждую ячейку можно поместить цифирьку, значит можно очень даже здорово запихнуть туда чего-то еще интересненькое и красивенькое... И пошло и поехало...
Что тут началось! Все дизайнеры просто с ума посходили! Начали пихать в ячейки кто текст, кто графику, а кто и то и другое вместе, и чего только они туда не пихали и не засовывали! Дай вот им волю, сами бы туда залезли! А один умник (к счастью, это была тоже не я) даже до того свихнулся, что засунул в ячейку целую таблицу, в ячейку новой таблицы - еще одну таблицу, и так он этим делом увлекся, что его до сих пор оттудова вытащить не могут! Вот ей богу, не вру! Н-да...завралась совсем.
В общем, вы поняли, что можно вытворять с обыкновенными ячейками, да? Теперь перед вами - безграничные возможности! Это вам не left или right, тут - полет фантазии!
Но сначала... я перечислю все атрибуты, которые можно использовать в ячейках. Очень во многом они совпадают с атрибутами таблицы, перечисленными выше, но есть некоторые отличия.
align выравнивает содержимое ячеек по центру center, левомуleft или правому rightкраю |
<TABLE border=1 width=200 bgcolor=aqua> <TR> <TD align=left> содержимое ячейки выровнено по левому краю </TD> </TR> <TR> <TD align=center> содержимое ячейки выровнено по центру </TD> </TR> <TR> <TD align=right> содержимое ячейки выровнено по правому краю </TD> </TR> </TABLE> |
|
||||
background указывает изображение, которым заполнится фон ячейки |
<TABLE border=1> <TR> <TD background="fon.jpg"> Ячейка с фоном </TD> </TR> <TR> <TD> Ячейка без фона </TD> </TR> <TR> <TD background="fon.jpg> а эта тоже с фоном </TD> </TR> </TABLE> |
|
||||
bgcolor цвет фона ячейки |
<TABLE border=0> <TR> <TD bgcolor=red> красный </TD> </TR> <TR> <TD bgcolor=yellow> желтый… </TD> </TR> <TR> <TD bgcolor=green> зеленый! </TD> </TR> </TABLE> |
|
||||
(*) bordercolor цвет рамки для ячейки |
<TABLE border=1> <TR> <TD bordercolor=red> красная рамка </TD> </TR> <TR> <TD bordercolor=yellow> желтая рамка... </TD> </TR> <TR> <TD bordercolor=green> зеленая рамка! </TD> </TR> </TABLE> |
|
||||
(*) height высота ячейки в пикселах |
<TABLE border=1 bgcolor=#cccccc> <TR> <TD height=20> высота 20 пикселов! </TD> </TR> <TR> <TD height=40> высота - 40 пикселов! </TD> </TR> <TR> <TD height=60> высота - 60 пикселов! </TD> </TR> </TABLE> |
|
||||
width ширина ячейки в пикселах или в процентах (Однако, если содержимое ячейки больше указанной ширины, то ячейка расширяется) |
<TABLE border=1 bgcolor=#cccccc> <TR> <TD width=100% colspan=2> ширина ячейки - 100% </TD> </TR> <TR> <TD width=20%> ширина ячейки - 20% </TD> <TD width=80%> ширина ячейки - 80% </TD> </TR> </TABLE> |
|
||||
(*) valign выравнивание содержимого ячейки по вертикали |
<TABLE border=1 bgcolor=#cccccc> <TR> <TD valign=top height=150> содержимое ячейки выравнено по верхнему краю </TD> <TD valign=middle> содержимое выравнено по середине ячейки </TD> </TR> <TR> <TD valign=bottom> содержимое ячейки выравнено по нижнему краю </TD> <TD valign=baseline> ну, а тут - по базовой линии, только не спрашивайте меня, что это такое </TD> </TR> </TABLE> |
|
||||
|
|
|
||||
Это самые необходимые атрибуты, которые вам нужны будут постоянно, есть еще и другие, не столь важные и которые вы можете прочитать в любом справочнике. А мы, наконец-то займемся делом. Будем впихивать и засовывать.