|
|
|
Урок
1 "Создание шаблона".
Для того, чтобы создать сайт, необходимо создать шаблон, в этом нет ничего
плохого и это делают даже спецы в web-дизайне. В html документе, если
Вы поcмотрите его код, можно выделить две части: заголовок документа и
тело. В чем разница между этими понятиями? В заголовок html документа
включена информация, которая не будет отображена на экране компьютера,
ну разве что дескриптор <title>, но об этом позже. В заголовке указывается
системная информация о документе для браузера и поисковых систем. В теле
же документа, указывается информация непосредственно отображаемая на экран,
но не только. Давайте рассмотрим простейший пример:
<html>
<head>
<title>Наша первая страница</title>
</head>
<body>Мы только что создали c Вами шаблон первой страницы</body>
</html>
В данном примере, дескрипторы <html> и закрывающий дескриптор </html>
указывают браузеру, что этот документ является html-страницей. Внутри
дескрипторов <head></head> находится заголовок документа.
А уже в внутри дескриптора <body></body> находится само тело
нашего документа, или правильнее сказать сайта. Вы можете написать этот
код или посмотреть работу этой страницы здесь.
Теперь остановимся поподробнее на дескрипторах: с <html> и </html>
все ясно, что же находится в заголовке документа, то есть внутри дескрипторов
<head></head>? Дескриптор <title> это единственный обязательный
элемент заголовка, он должен быть всегда и используется для присвоения
имени документу. В окне браузера вверху будет написано "Наша первая
страница". И если бы мы захотели добавить эту страницу в Избранное
(Favorites) в браузере это название и отображалась бы записях. Из этого
вытекает, что следует использовать уникальное название документа, а не
названия наподобие "Лучший, index, Домашняя страничка, Home Page
и подобные". Ну вот, теперь имея этот шаблон, Вы можете создавать
страницу. Написав свой текст между <body></body> Только запомните
одно небольшое правило. Стартовая страница, то есть та, которая будет
запускаться автоматически, если не были указаны другие, должна называться
index.html и никак не иначе. Для примера, для того, чтобы попасть на этот
сервер достаточно будет набрать http://sitemake.boom.ru, согласитесь,
это намного проще, чем набирать что-нибудь наподобие http://sitemake.boom.ru/moyapervayastranica.html.
Урок 2 "Форматирование текста с
помощью абзаца"
Если вы вставите текст из любого тестового редактора, как то word или
блокнот, то если там уже было произведено форматирование, оно пропадет,
например:
- Моя первая страница, это очень очень круто.превратится у вас при просмотре
в браузере в:
- Моя первая страница, это очень очень круто.
Более одного пробела не поддерживается в html документе, но этого можно
избежать, имеется специальный символ и если ввести его, то
получите желаемый пробел, повторяя этот спецсимвол многократно можно
получить желаемое форматирование.
Разбиение текста на абзацы делается специальным дескриптором <p>,
закрывающий дескриптор </p> надо поставить в конце абзаца. Но
допустим, вы захотите закончить строку где нибудь посреди абзаца, как
это сделать? Тут вам поможет дескриптор <br> он не имеет своего
закрывающего дескриптора </br> так как в нем нет необходимости.
Для закрепления новых знаний попробуйте составить html документ используя
предыдущий шаблон, но дополнив его текстом, и вставте несколько параграфов
и разрывов с помощью дескрипторов <p></p> и <br>.
Для простоты вы можете загрузить шаблон в txt формате нажав сюда.
Одним из способов структурирования текста, является использование заголовков.
Заголовки помогают читателям лучше сориентироваться в документе, наподобие
как вы по заголовкам просматриваете книгу. Создать заголовок совсем
просто. На этот случай имеется ряд специальных дескрипторов.
<h1></h1> Заголовок первого уровня
<h2></h2> Заголовок второго уровня
....
<h6></h6> Заголовок шестого уровня.
Необходимо помнить, что заголовки, как и все дескрипторы разметки должны
находится в теле документа, то есть между дескрипторами <body></body>
Кроме того, можно подчеркнуть смысловую нагрузку текста горизонтальной
линией, вы наверное часто видели ее на различных сайтах, ставится она
с помощью дескриптора <hr>, этот дескриптор не является контейнером,
поэтому закрывающий дескриптор </hr> здесь не нужен.
Пример кода можно посмотреть здесь, а непосредственно саму страницу
с образцом отображения браузером различных заголовков и дескриптора
<hr> можно посмотреть здесь. Но допустим, что для подчеркивания
смысловой нагрузки текста, вам будет необходимо выравнить различные
абзацы, по левому края, по центру, и по правому краю, как это сделать?
В html имеется специальный контейнер, <div></div>, который
используется для выравнивания целого блока элементов страницы. Пишется
код таким образом:
<div align="left">Текст будет выравнен по левому краю</div>
<div align="center">Текст будет выравнен по центру</div>
<div align="right">Текст будет выравнен по правому краю</div>,
точно также текст можно выравнять с помощью дескриптора абзаца <p>
пример:
<p align="left">Тест будет выравнен по левому краю</p>.
Дескриптор <div> дает больше возможностей, чем дескриптор абзаца
<p>, например, мы можем поменять цвет текста в конкретном блоке
страницы:
<div style="color: blue">данный текст будет отображен,
синим цветом,
<h2>этот заголовок тоже синего цвета</h2></div>
<div style="color: green">А этот текст зеленый</div>
Посмотрите код и пример исполнения кода браузером.
Урок 3 "Структурирование текста"
Одним из способов структурирования текста, является использование заголовков.
Заголовки помогают читателям лучше сориентироваться в документе, наподобие
как вы по заголовкам просматриваете книгу. Создать заголовок совсем
просто. На этот случай имеется ряд специальных дескрипторов.
<h1></h1> Заголовок первого уровня
<h2></h2> Заголовок второго уровня
....
<h6></h6> Заголовок шестого уровня.
Необходимо помнить, что заголовки, как и все дескрипторы разметки должны
находится в теле документа, то есть между дескрипторами <body></body>
Кроме того, можно подчеркнуть смысловую нагрузку текста горизонтальной
линией, вы наверное часто видели ее на различных сайтах, ставится она
с помощью дескриптора <hr>, этот дескриптор не является контейнером,
поэтому закрывающий дескриптор </hr> здесь не нужен.
Пример кода можно посмотреть здесь, а непосредственно саму страницу
с образцом отображения браузером различных заголовков и дескриптора
<hr> можно посмотреть здесь. Но допустим, что для подчеркивания
смысловой нагрузки текста, вам будет необходимо выравнить различные
абзацы, по левому края, по центру, и по правому краю, как это сделать?
В html имеется специальный контейнер, <div></div>, который
используется для выравнивания целого блока элементов страницы. Пишется
код таким образом:
<div align="left">Текст будет выравнен по левому краю</div>
<div align="center">Текст будет выравнен по центру</div>
<div align="right">Текст будет выравнен по правому краю</div>,
точно также текст можно выравнять с помощью дескриптора абзаца <p>
пример:
<p align="left">Тест будет выравнен по левому краю</p>.
Дескриптор <div> дает больше возможностей, чем дескриптор абзаца
<p>, например, мы можем поменять цвет текста в конкретном блоке
страницы:
<div style="color: blue">данный текст будет отображен,
синим цветом,
<h2>этот заголовок тоже синего цвета</h2></div>
<div style="color: green">А этот текст зеленый</div>
Посмотрите код и пример исполнения кода браузером.
Урок 4 "Физическое форматирование"
Мы научились создавать простейшую страничку, и можем наполнить ее информацией.
То есть по аналогии с Word, мы уже можем печатать текст, но что делать,
если допустим, захотим подчеркнуть текст, сделать его пожирнее или отобразить
курсивом? Для этого, впрочем, как и практически для всего в html есть
соответствующие дескрипторы, вот их список на примере:
дескриптор пример использования
<u>подчеркнутый</u>текст подчеркнутый текст
<b>жирный</b>текст жирный текст
<i>курсивом</i> текст курсивом текст
<big>крупный</big> текст крупный текст
<small>мелкий</small> текст мелкий текст
<sup>верхний</sup> индекс верхний индекс
<sub>нижний</sub> индекс нижний индекс
Как вы поняли из примера, для того, чтобы применить выбранный вами
тип форматирования текста, необходимо разместить текст между контейнером
<дескриптор></дескриптор>. Данные дескрипторы можно обьеденять,
и если вам будет необходимо набрать жирный, подчеркнутый текст курсивом,
то надо использовать такую конструкцию <дескриптор1><дескриптор2><дескриптор3>наш
текст</дескриптор3></дескриптор2></дескриптор1> Именно
в таком порядке, а конкретно в нашем примере <b><u><i>текст</i></u></b>
Результат будет: текст.
Урок 5 "Управление внешним видом
текста c помощью дескрипторов <font>, <basefont> и атрибутов."
Для управления внешним видом (изменение цвета, размера, вида шрифта)
в html служит дескриптор <font>, он является контейнером, а следовательно,
имеет закрывающий дескриптор </font>. Этот элемент имеет атрибуты,
и если их не указывать, до конструкция <font></font> не
будет иметь никакого воздействия.
Выбор шрифта:
Для выбора шрифта в дескрипторе <font> имеется атрибут face, листинг
будет представлять собой такой вид:
<font face="Times New Roman">текст</font> В данном
случае текст внутри контейнера <font></font> будет набран
шрифтом под названием Times New Roman. Если вы хотите указать другой
шрифт, но не знаете, будет ли он отображаться на других компьютерах
то можно, а даже и нужно подстраховаться, и указать несколько подходящих
шрифтов, например:
<font face="Times New Roman", "Arial", "Verdana"></font>
Во всех случаях, когда шрифтов указано более чем один, браузер просматривает
их с слева направо. В нашем примере, вначале будет установлен шрифт
"Times New Roman", если его нет на компьютере, то "Arial",
и в крайнем случае шрифт под названием "Verdana".
Для указания размера шрифта имеется специальный атрибут size, этот атрибут
позволяет указывать конкретную высоту знаков текста. Градация размеров
находится в промежутке от 1 до 7, нормальным размером, считающимся по
умалчиванию является размер которому соответствует значение 3. Можно
указать относительный размер, size=+3 эта конструкция особенно часто
употребляется, если ранее применялся дескриптор <basefont> о чем
пойдет речь ниже. Помимо вида шрифта, его размера, можно управлять и
цветом шрифта. Для этого в дескрипторе <font> есть соответствующий
атрибут color.
Пример: <font color="red>это красный текст</font>
<font color="green">это зеленый текст</font>
Применение дескриптора <basefont>.
Дескриптор <basefont> служит для применения атрибутов размера
шрифта, вида и цвета на весь документ. Все параметры, указанные в <basefont>
действуют до закрытия его </basefont>, но могут и перекрываться
другими значениями, если внутри этого дескриптора будет текст ограниченный
<font></font> с другими атрибутами. После закрытия </font>
действия дескриптора <basefont> вновь вступают в силу.
Урок 6 "Использование графики.
Часть 1"
Для того, чтобы вставить графический файл в html-код существует дескриптор
<img>. Пишется это так <img src="picture.gif">
Этот дескриптор не является контейнером, поэтому закрывающий дескриптор
</img> не нужен.
Выбор графического формата. В настоящее время стандартом де-факто серди
всех графических форматов, является GIF и JPEG. В чем их различие? При
сжатии в GIF формате потерь в деталях не происходит, но количество цветов
ограничено 256 цветами. То есть для сжатия фотографий этот формат не
подходит. В GIF-формате возможно использование анимации, то есть последовательная
смена кадров. Все эти кадры (фреймы) хранятся в одном файле. JPEG (JPG),
при сжатии в этом формате происходят потери деталей изображения, но
степень этих потерь можно регулировать, правда это влияет на конечный
размер изображения.
Дескриптор <img> имеет атрибуты, необходимые для выравнивания
изображения, изменения его размеров, отступов и т.п.
Атрибуты дескриптора <img>: 1) атрибут align и его значения. Существует
три значения атрибута align, это top (выравнивание текста по верхнему
краю), middle (выравнивание текста по средней части изображения), bottom
(выравнивание текста по нижнему краю изображения). 2) значения left
(показывает изображение слева, текст обтекает рисунок, right (показывает
изображение справа, текст обтекает рисунок). Пишется это так <img
src="ваш файл" align="атрибут">
Примеры:
1) применен атрибут bottom,
2) применен атрибут middle,
3) применен атрибут top,
4) применен атрибут left применен атрибут left применен атрибут left
применен атрибут left применен атрибут left применен атрибут left применен
атрибут left применен атрибут left применен атрибут left применен атрибут
left применен атрибут left применен атрибут left применен атрибут left
применен атрибут left применен атрибут left
5) применен атрибут rightприменен атрибут right применен атрибут right
применен атрибут right применен атрибут right применен атрибут right
применен атрибут right применен атрибут right применен атрибут right
применен атрибут right применен атрибут right применен атрибут right
применен атрибут right применен атрибут right
6) Увеличение изображение, для этого будет необходимо изменить атрубут
размера изображения, в нашем случае <img src="picture.gif"
width="100" height="100"> на <img src="picture.gif"
width="200" height="200"> Значения в пикселах,
а посему получаем изображение в два раза большее:
Можно увеличить только высоту, или ширину, либо уменьшить, например,
уменьшим оригинал в длину на 50%, то есть сделаем его в длину 50 пикселов:
Но запомните, что изменять размеры изображения и его пропорции лучше
всего в специализированных графических редакторах. Дело в том, что если
уменьшать размер изображения в браузере, то размер графического файла
не меняется, а в графических файлах для Интернет главное не только качество,
но и размер. Ведь Вы не обьясните своему посетителю, что вон та финтифлюшка,
на самом деле красивая, хоть и весит 200Кб, и для скачивания понадобится
несколько минут, а то, что она могла бы быть размером 2Кб, посетителю
знать не обязательно, за него все знает горе дизайнер.
Урок 7 "Использование графики. Часть
2"
Задание определенного размера для изображения. Всегда задавайте размеры
рисунка, это делается атрибутами width и height таким образом, <img
src="pic.gif" width=100 height=140> В данном случае устанавливаем
ширину картинки равную 140 пикселов, а высоту 100 пикселов. Для чего
это необходимо? Дело в том, что графика начинает отображаться только
после окончания загрузки html-кода, что естественно. И если не задавать
заранее размеры будущего изображения в коде, то вначале, до загрузки
картинки пользователи будут наблюдать нечто эфемерное, размером с копейку.
Это дает такой "великолепный" эффект, как прыжки текста по
мере загрузки графики, я думаю, вы это достаточно часто видели. Кроме
того, необходимо помнить, что ряд пользователей наблюдают Интернет без
графики, и нарушенное форматирование текста не будет вам в плюс.
Подписывайте альтернативный текст. Если браузер не отображает графику,
что встречается очень часто, либо процесс загрузки остановили на середине,
то графика может не успеть загрузиться полностью. Как тогда скажите
догадываться пользователям, что третий квадрат справа, это вход в прайс-лист,
а по нажатию на седьмой квадрат пользователи попадут на ваш фотоальбом?
Для этого существует специальный атрибут alt, который служит для этих
целей. Пример: <img src="pic.gif" widtg=100 heigh=100 alt="просто
квадрат"> В данном случае, если графика не была загружена, то
получаем пустое место 100х100, с надписью "просто квадрат".
Кроме того, если у вас используется очень много графических изображений
в качестве навигации, то она будет затруднительна, а порой и невозможна,
без использования этого атрибута.
Контроль границ вокруг изображения. Если вам не нравится манера браузера
размещать текст слишком близко к изображению, то вам необходимо использовать
специальные атрибуты vspace и hspace. Пример: <img src="pic.gif"
vspace=10 hspace=20 align=left> В данном случае, текст будет обтекать
изображение справа, границей 10 и 20 пикселов.
Использование графики в качестве гиперcсылки. Здесь я забегаю немного
вперед, в следующем уроке графические ссылки будут разобраны подробно.
Если вы захотите использовать картинки в виде ссылок, то делается это
таким образом:
<a href="http://sitemake.narod.ru"><img src="picture.gif></a>
Как результат, данная картинка, при нажатии на которую, вы перейдете
на заглавную страницу
Урок 8 "Ссылки, что это такое,
и как их создавать"
Если охарактеризовать одним словом все то, что является для большинства
людей web, то это слово будет гипертекст. Если вам покажется новым принцип
гипертекста, то хочу вас обрадовать, основные принципы гипертекстовых
связей применялись еще в Старом Завете. Принцип гипертекста достаточно
прост, имеется документ, в котором содержатся ссылки на другие документы.
Часто в отношении web говорят не гипертекст, а гипермедиа. Это обьясняется
тем, что Интернет давно уже вышел из возраста текстовых ссылок, сейчас
в качестве ссылок и ссылаемых документов являются графические, видео
и аудио фрагменты.
Чтобы создавать ссылки, необходимо знать, из чего они состоят. Фактически,
любая ссылка состоит из двух частей. Первая часть, это то место в документе,
которое помечено как ссылка. Эта часть называется якорем, или по другому,
элементом привязки. Вторая часть, подводная часть нашего айсберга, это
часть, которая сообщает браузеру, какие ему действия следует совершить
при щелчке на ссылку.
Элемент привязки:
При всем кажущемся многообразии элементов привязки, что мы видим на
сайте, их всего два типа: текстовый и графический, а также их комбинации.
Текстовый элемент привязки. Допустим, мы хотим создать надпись "Домой",
чтобы по щелчку на этой надписи загружалась начальная страница. Конструкция
будет иметь следующий вид:
<a href="index.htm">Домой</a>, а результатом ее
выполнения будет следующий обьект Домой, если кликнуть мышкой на данную
ссылку, то вы перейдете на стартовую страницу моего сайта.
Графический элемент привязки. Все действия, которые будет выполнять
браузер ни отличаются от типа элемента привязки, поэтому все то, что
было и будет сказано о текстовом элементе, справедливо и для графического
элемента привязки, а также наоборот. Общий вид кода будет таким: <a
href="имя файла"><img src="файл картинки"></a>.
Пример использования графического элемента привязки был показан в предыдущем
уроке, но теперь мы разберем его подробно. Давайте создадим элемент
привязки следующим образом:
<a href="index.htm"><img src="picture.gif"></a>
В итоге, получим следующую картинку если нажать на нее, то вы получите
результат аналогичный предыдущему примеру.
Ввиды ссылок: ссылки бывают двух типов, абсолютные и относительные.
В чем же их различие? Относительные ссылки применяют тогда, когда требуется
указать на файл находящийся на том же компьютере, как и ссылающийся
документ. Именно относительные ссылки мы и использовали в наших примерах.
Абсолютная ссылка точно указывает компьютер, каталог и требуемый файл.
Следовательно надо помнить две вещи, если вы ссылаетесь на документы
находящимися на одном компьютере с ссылаемым документом, то используете
относительные ссылки, в обратном случае используете абсолютные ссылки.
Для примера, вот абсолютная ссылка на стартовую страницу моего сайта:
<a href="http://sitemake.narod.ru/index.htm">Домой</a>
Результатом будет такая ссылка Домой, нажав на нее, вы всегда зайдете
на мой сайт, если бы мы использовали относительную ссылку, то скопировав
страницу себе на компьютер, вы не смогли бы попасть на стартовую страницу.
Абсолютная ссылка снимает эту проблему. Существует еще одно решения
недостатка относительных ссылок, а недостаток, повторюсь, заключается
в том, что при копировании страницы на жесткий диск своего компьютера
вы не получите доступ к тем страницам, которые скачать не успели. Так
вот, решение этой проблемы выглядит в виде применеия специального дескриптора
base, он указывает браузеру, по какому адресу находится страница, скажу
проще, он указывает каталог хранения файлов. Для примера, если бы мы
разместили в заголовке html-файла (между дескрипторами <head></head>)
строку <base href="http://sitemake.narod.ru">, то при
нажатии отностительной ссылки <a href="index.htm">Домой</a>
загружался бы файл, http://sitemake.narod.ru/index.htm
На какие же файлы и объекты можно ссылаться? Если вы будете ссылаться
на файлы, которые известны браузеру, то он откроет их в своем окне,
но как быть, если файл браузеру не известен. Его действия будут следующими,
запустит файл в приложении, которое соответствует данному файлу. Либо
предложит сохранить файл на жестком диске.
Значит так, файлы открывать в окнах мы уже умеем, а как сделать, чтобы
по щелчку на ваше имя открывалась почтовая программа, чтобы посетитель
мог легко и непринужденно написать вам негативный отзыв на вашу работу.
Для этого надо указать следующее:
<a href="mailto:ваш ящик@сервер.ru">Вася Пупкин</a>
То есть я пишу следующее на своей странице
<a href="mailto:sitemake@tbstudio.ru">Отправьте сообщение
мне</a> Результат будет таким Отправьте сообщение мне. При нажатии
откроется почтовый клиент, в поле "Кому" которого будет стоять
мой адрес, прошу не понимать буквально слова про негативные отзывы :ф)
Можно пойти дальше и автоматически подставлять в почтового клиента и
тему сообщения, делается это таким образом:
<a href="mailto:sitemake@tbstudio.ru?subject=Письмо которое
вы ждали">Отправьте сообщение мне</a>, результатом будет
ссылка Отправьте сообщение мне если вы нажмете на нее, то поле "тема"
заполнится автоматически. Ну и напоследок, все ссылки, которые мы упоминали
были внешними, то есть они ссылались на другие документы, а как быть,
если документ у вас длинный, а заставлять посетителя прокручивать его
до конца вы не хотите. В таких случаях применяют внутренние ссылки,
а вот и их синтаксис.
Вначале надо указать элемент привязки, для примера, создадим элемент
привязки, для верха нашей страницы, пропишем следующие параметры <a
name=top>здесь элемент привязки</a> элементом привязки может
быть как графическое изображение, так и текст, в моем случае было прописан
заголовок <h2>Урок 8 "Ссылки, что это такое, и как их создавать"</h2>,
теперь на него можно ссылаться, что мы и сделаем, в том месте, где хотим
добавить возможность перехода на указанный участок пишем <a href="#top">на
начало</a> В итоге получаем надпись на начало, нажав на которую
вы перейдете на верх страницы, точно таким же образом можно ссылаться
на любую часть страницы, только не забудьте изменить атрибут name.
Урок 9 "Форматирование с помощью
таблиц"
Вы уже изучили простейшее форматирование текста абзацем и т.п., но как
быть, если надо совершить более сложное форматирование, хотя-бы такое,
как на моем сайте? Подобное форматирование, и форматирование более высокого
уровня почти всегда создается с помощью таблиц. Понятие таблица, солбец,
ячейка знакомые вам, применимы и в отношении таблиц создаваемых в html.
Для того чтобы понять, как создается таблица, необходимо узнать дескрипторы
выполняющие эту работу, вот они:
<table></table> Этот контейнер помещает начало и конец таблицы.
<tr></tr> В этих дескрипторах помещается строка таблицы.
<td></td> Это дескрипторы определяющие ячейку таблицы.
Давайте рассмотрим простейший пример, допустим, создадим таблицу, в
которой будет две строки и три ячейки:
первая ячейка вторая ячейка третья ячейка
четвертая ячейка пятая ячейка шестая ячейка
а вот код этой таблицы
<table>
<tr>
<td>первая ячейка</td>
<td>вторая ячейка</td>
<td>третья ячейка</td>
</tr>
<tr>
<td>четвертая ячейка</td>
<td>пятая ячейка</td>
<td>шестая ячейка</td>
</tr>
</table>
Атрибуты элементов таблицы:
1) атрибут border, используется следующим образом:
<table border="1">xxxxxxx</table> Если бы мы применили
значение раное 0 для верхней таблицы, то получили бы следующий результат,
первая ячейка вторая ячейка третья ячейка
четвертая ячейка пятая ячейка шестая ячейка
а если бы граница была равна 10, то
первая ячейка вторая ячейка третья ячейка
четвертая ячейка пятая ячейка шестая ячейка
2) атрибут align, имеет следующие значения: left, right, center, по
умалчиванию, если этот атрибут не определен, таблица выравнена по левому
краю:
применен атрибут left, код : <table align="left>xxxxxxxxx
первая ячейка вторая ячейка третья ячейка
четвертая ячейка пятая ячейка шестая ячейка
применен атрибут center, код : <table align="center">xxxxxx
первая ячейка вторая ячейка третья ячейка
четвертая ячейка пятая ячейка шестая ячейка
применен атрибут right, код : <table align="right">xxxxxxx
первая ячейка вторая ячейка третья ячейка
четвертая ячейка пятая ячейка шестая ячейка
Выравнивание элементов таблицы:
Для выравнивания данный в ячейке или строке, используются атрибут align,
давайте создадим таблицу, 1 на 3, и выравним данные строки по правому,
левому краю и центру.
left center right
Посмотрите теперь на код этой страницы:
<table>
<tr>
<td align="left">left</td>
<td align="center">center</td>
<td align="right">right</td>
</tr>
</table>
По моему все просто. Теперь для тренировки создайте таблицу пять столбцов
на три строки, и попробуйте отформатировать данные используя атрибуты
дескриптора <td>. Если у вас не будет получаться, то можете смело
задавать вопросы по адресу e-mail: sitemake@tbstudio.ru.
Урок 10 "Форматирование с помощью
таблиц часть II"
Объединение строк и столбцов.
Как строки, так и столбцы можно объединять, создавая из соседних ячеек
более крупные, объединенные. Для объединения ячеек существуют специальные
атрибуты:
для обьединения двух смежных ячеек используется атрибут colspan, пример
использования:
<td colspan=3> как Вы понимаете, данный код обьединяет три соседние
ячейки, давайте создадим таблицу из четырех ячеек и объеденим три из
них:
<table>
<tr>
<td colspan=3>обьеденены три ячейки</td>
<td>просто ячейка</td>
</tr>
</table>
NB! Все примеры кода подразумевают, что Вы размещаете его в шаблоне
подготовленном заранее (под шаблоном понимается html-файл, а все примеры
вы размещаете между контейнером <body></body>)
Результат предыдущего примера:
обьеденены три ячейки просто ячейка
Для обьединения колонок используется атрибут rowspan, пример кода для
таблицы из двух строк и двух колонок, из которых две первые ячейки в
столбце обьеденены:
<table>
<tr>
<td rowspan=2>две ячейки обьеденены</td>
<td>одна ячейка</td>
</tr>
<tr>
<td>вторая ячейка</td>
</tr>
</table>
Результат примера: две ячейки обьеденены одна ячейка вторая ячейка
|
|
|
|
|
|
|
|
web
мастеру
