HTML (часть 2)
интернете.
Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.
Ссылкой на эти другие документы (части нашей страники) может быть текст (фраза,слово), а может быть и картинка. На этой ступеньке мы рассмотрим только текстовую ссылку.
Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточное знание. Пусть prf.html - документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:
<a href="prf.html">посмотреть мои фотографии</a> (прим.)
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же как в случае с картинками:
(1) - <a href="prf.html">мои фотографии</a>
(2) - <a href="photos/prf.html">мои фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Как видите все просто. Но есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать, а иначе по умолчанию он будет просто безобразным, поэтому вспомним об открывающем тэге боди:
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
Разберемся что к чему: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, также не карается законом, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой). Итак пропишем цвета для ссылки и саму ссылку в нашем документе:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html> (прим.)
Ничего хитрого. Тeперь нам следует запомнить то, что ссылка на ваш почтовый ящик прописывается так:
<a href="mailto:pochta@mail.ru"> pochta@mail.ru - пишите письма </a> (прим.)
Запомните это раз и навсегда и не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик - другое (да, но цвета всех ссылок в документе одинаковые:).
Как я уже упоминала, ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка:
<a href="prf.html"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> </a>
Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку pr1.png:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<a href="prf.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html> (прим.)
Теперь посмотрите в Explorer, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0"
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" border="0"> (прим.)
Если вы думаете, что на этом ваше мучение с изучением ссылок закончилось, то это зря вы так:) - у нас впереди еще целая ступенька.
Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) Как это делается? Да все по тому же принципу:
<a href="http://www.melody.ru/music.mp3"> скачать песню </a>
Если адрес указан таким способом:
<a href="http://www.melody.ru/"> музыкальный сайт </a>
То это означает, что в указаном каталоге есть файл вроде index.html, который загрузится по умолчанию.
Но поговорим особо о картинках, многие из вас, наверное, сталкивались с таким явлением: когда жмешь на маленькую картинку, то загружается большая в том же или в новом окне. Как это делается? Тут никаких хитростей: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg):
<a href="big.jpg"> <img src="small.jpg"> </a>
В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга <a></a> есть параметр target:
<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a>
Итак, target="_blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне броузера (Explorer`а). В наш большой пример я это вводить не буду. Т.к. не хочу заводить большие картинки на сайте, и т.к. вы должны уже сами все подставлять и сами эксперементировать:)
Вот мы уже почти одолели первый лестничный пролет. Осталось еще несколько ступенек, на которых мы ознакомимся с тэгами нужными, но менее часто употребляемыми, чем тэги, которые мы уже изучили.
Вот мы добрались и до не очень часто используемых тэгов. Как же так? - возмутится бедный мой спутник - А таблицы? А фреймы? - Ну, это темы других лестничных пролетов, а мы еще и первого не одолели:) Теперь, когда я вас порадовала этим фактом, продолжим обучение:)
Я думаю: самая пора поговорить о списках. Что такое списки? Это лучше демонстрировать на наглядном примере:
Текст один
Текст другой
Текст сякой
Текст эдакий
Скорее всего вы с этим сталкивались. Все это удобно в определенных ситуациях. В каких? Загляните, например, в раздел Оглавление и увидите:)
Теперь разберемся, какими же тэгами обозначаются списки:
<li>Текст один</li>
<li>Текст другой</li>
<li>Текст сякой</li>
<li>Текст эдакий</li>
Да-да, вcе опять оказалось очень простым:) Именно тэгом <li></li> они и задаются. Возникает вопрос: можно ли помимо закрашенного кружочка поописать еще чего-нибудь подобное?
По умолчанию - (1)
Полый кружок - (2)
Не будь таким квадратным - (3)
У тэга <li> есть параметр type:
В случае (1) - <li type="disk">,
в случае (2) - <li type="circle">,
в случае (3) - <li type="square">.
Это один из вариантов. Если вы пользовались текстовыми редакторами (допустим Вордом), то бы знаете, что такое Табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается в право). Похожая фунция есть и в хтмл:
<ul>Ваш текст</ul>
Чтобы отступ (табуляция) был больше надо вкладывать тэг <ul> в самого себя:
<ul><ul>Два отступа</ul></ul>
<ul><ul><ul>Три отступа</ul></ul></ul>
Зачем я завела разговор об этом тэге, вместо того, чтобы рассказать о том, что еще можно сделать со списками? Хм:) ну, у меня все со злым умыслом:
Сдвиг один
Сдвиг другой
Сдвиг сякой
Хочу обратить ваше внимание, что это прописано без параметра type, но при помощи тэга <ul>:
<ul><li>Сдвиг один</li></ul>
<ul><ul><li>Сдвиг другой</li></ul></ul>
<ul><ul><ul><li>Сдвиг сякой</li></ul></ul></ul>
Я думала, что глава о списках получится короткой, но как видите ошиблась:). Если не устали, то переходите к следущей ступеньке, если устали, то отдохните чуток.
- Списки (от Manual.ru)
- Списки (от Html - Начальный курс)
В последнее время я все реже и реже встречаю такой элемент, как линии. Теперь их увидишь разве что в гостевых книгах, или на форумах. Линия задается тэгом <Hr> и не требует закрывающего тэга:
Вот такая она, в форме канавочки. У линии есть много разных параметров:
(1) <Hr align="right"> (center или left)
(2) <Hr width="30%"> (ширина линии в процентах/пикселях)
(3) <Hr size="6"> (толщина линии)
(4) <Hr NoShade> (отмена объемности)
(5) <Hr color="cc0000"> (цвет линии, только в IE)
Вот и вся премудрость с линиями. Естественно, эти параметры могут употребляться одновременно.
Не злоупотребляейте параметром Color, т.к. он действует только в Интернет Иксплорер (если вам так хочется все же цветную линию, то сделайте, допустим красную картинку 1x1 пиксель и вставьте ее в свой документ. Тут вам приходятся параметры картинок height и width. Пусть height=1, а width=500 - вот вам и линия:). О параметрах картинок говорится в главе 10).
Не считайте линию изжившей себя, я думаю как элемент дизайна она может быть вполне полезной.
У нас осталась еще одна главка, после которой мы перейдем к таблицам.
Эта глава о спецсимволах. Они не так часто употребляются, но тем не менее они необходимы:
(1) - < - <
(2) - > - >
(3) - " - "
(4) - - пробел
(5) - & - &
Т.к. все заключенное между < и > броузер воспринимает как тэг, то , чтобы ввести символ скобки в текст для него придумали спецсимвол (1 или 2). Теперь вы знаете на какой мучение я была обречена, когда начала писать это руководство, ох уж эти примеры:)
Кавычка (3). В принципе не обязательно ее так прописывать, броузеры понимают этот значок прекрасно, но кто знает: береженного - бережет.
Символ пробела (4). Зачем он нужен? Ну, допустим вам понадобилось пять пробелов подряд, а тэг <pre> с его принудительным переносом строки вам вовсе не нужен, вот тогда поймете, ведь спецсимвол пробела можно написать хоть тысячу раз:).
Но тут существует одно но:
слово1 слово2 слово3 = слово1 слово2 слово3
Ни одно из этих слов не перенесется на другую строку без двух других, и хотя посетитель увидит обычную фразу, где между словами стоит пробел, но по идее это же одно длинное слово, а не три, т.к. - неделимый символ пробела:) - учтите и используйте с умом.
И последний символ &, т.к. он несчастный используется для написания спецсимволов, то для него добрые люди тоже придумали спецсимвол & (бр..:).
Спецсимволы не надо включать ни в какие тэги, надеюсь вы это поняли, считайте их просто текстом.
Вот такая это сложная штука жизнь %)
Долго ли, коротко ли, но мы добрались до таблиц. При создании сайтов таблицы используются очень часто. Например, Постройка.ру (родной сайт учебника) не обошлась бы в своем оформлении без таблиц никак. Или вот еще пример, сайта, оформление которого тоже не обошлось бы без таблиц (заметьте, ни одной картинки, когда пройдете главы о таблицах без труда сможете сверстать подобное).
Таблица задается тэгом:
<table></table>
Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их.
<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы
Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделила ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук:
<table>
<tr></tr>
<tr></tr>
</table>
Сначала задаем строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Мой вам совет, для начала рисуйте таблицу на листе бумаге, чтобы все наглядно видеть.
Итак, теперь нам надо заполнить получившийся каркас:
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>
Надеюсь мы поняли, что первая цифра в загадочных надписях - это номер ряда, а вторая номер столбца (1х2 - первый ряд, второй столбец и т.д). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так:
Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В нашем случае мы задаем фон для каждого столбца.
<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>
Попробуйте задать фон для таблицы и для ряда (это для усвоения материала). Когда все усвоится переходите к следущей ступеньке, и мы продолжим разговор о таблицах.
В чем же дело? А в том, что мы не задали высоту и ширину ячейкам таблицы нашей:) Вспомним о параметрах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2 </td>
<td width="50" bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699"> 2x3 </td>
</tr>
</table>
Сразу предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длинну, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).
Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
И... готово!:)
В каждой ячейке (столбце) могут находится и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы). И тэги, которые мы применяем для форматирования текста - все те же.
Поскольку содержимое каждой ячейки как бы обстановка отдельной комнаты, то и тэги для центрирования текста пришлось прописать в нашем примере в каждой ячейке.
Давайте шагнем на следующую ступеньку и продолжим разговор о таблицах.
В чем же дело? А в том, что мы не задали высоту и ширину ячейкам таблицы нашей:) Вспомним о параметрах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2 </td>
<td width="50" bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699"> 2x3 </td>
</tr>
</table>
Сразу предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длинну, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).
Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
Вернемся к нашему примеру: теперь мы почти получили то, что хотели:)
В предыдущих главах мы научились создавать таблицы на конкретном примере, а в этой главе я хотела разом вывалить все оставшиеся возможности и аттрибуиы на ваши головы, но потом решила, что раз уж я пишу подробный учебник, то надо быть стойкой до конца:).
Вернемся к нашему примеру, и поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим аттрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу):
Вот вам и наглядный пример, а теперь как это пишется:
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>1x3</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699" valign="top"> <center>2x3</center> </td>
</tr>
</table>
Я прописала valign не для всех ячеек, только для тех, где я захотела чтобы текст располагался сверху или снизу, чтобы зря не тратить время и усилия. Существование параметра valign значительно облегчает нашу с вами жизнь, страшно даже подумать, как пришлось бы мучиться, если бы его не было:).
А теперь перейдем к следующей ступеньке, чтобы узнать о других аттрибутах, облегчающих нашу трудную жизнь.
В этой главе мы поговорим о параметрах colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)). Теперь чтобы было все понятно обратимся к примерам.
В этом примере мы использовали параметр colspan=2, прописав его для ячейки 1х1. Код будет выглядеть следующим образом:
<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699"> <center>2x3</center> </td>
</tr>
</table>
Прошу вас обратить внимание, на то, что параметр width для ячейки 1х1 в нашем примере не указан, если вас так тянет задавать этот параметр, то в нашем примере для ячейки 1х1 его надо было бы прописать равным 100 пикселям, т.к. все-таки ячейка 1х1 длинее других в два раза.
И второе на что прошу вас обратить внимание, в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, т.к. ячейка 1х1 равна сама по себе двум ячейкам по длинне (что мы и указали параметром colspan). Если бы мы прописали ячейку 1х3, тогда у нас получилась бы такая ерунда:
Теперь, когда мы разбрались с параметром colspan, разберемся с параметром rowspan. Принцип действия тут тот же:
Попробуйте сами написать код для такой таблицы (подсказываю, тут у нас должна исчезнуть ячейка 2х3). А для полного закрепления полученных знаний можете написать еще и код для такой таблицы (я не издеваюсь, просто вы так лучше усвоите):
Если ничего не получится, то вы можете посмотреть ответы здесь, а кто все понял, тот молодец и может подняться на следущую ступеньку.
Итак, мы остановились на такой таблице:
Давайте, подумаем, что же еще можно сделать с ней... хм... ну, например можно избавиться от пространства между ячейками таблицы:
Такая красота достигается с помощью атрибута cellspacing, равного нулю:
<table cellspacing=0>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
Можно наооборот увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое:
Как видите, и то, и другое мы можем использовать как дизайнерский прием, т.к. даже уже на наших примерах это смотриться не стандартно.
Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добаляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее я для начала прижму текст ячеек первого ряда к верху, в нижнего - к низу, используя атрибут valign:
Теперь зададим атрибут cellpadding=5:
Вот теперь всем должно стать понятно, что такое пространство между содержимым ячейки и ее границами, и что делает тэг cellpadding. Сравним получившееся с предыдущей таблицей: мы прекрасненько видим, что у нас добавилось пространство по бокам, снизу и сверху, причем это пространство никакими картинками и текстом заполнено быть не может, как и пространство между ячейками, когда мы задаем cellspacing.
Для тех, кто все еще не может составить код сам - вот он (для последнего варианта таблицы):
<table cellpadding=5>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2" valign="top"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>2x2</center> </td>
</tr>
</table>
Теперь я могу с чистой совестью завершить этот урок и перейти к следующему, в котором мы узнаем о вложенных таблицах.
Когда мы учились делать таблицы, то я упоминала о вложенных таблицах. Что же это такое и в чем их особенность? - это обычные таблицы, которые располагаются в ячейках другой таблицы, и больше ничего особенного в них нет... почти.
Допустим у нас уже есть большая таблица, две колонки которой забиты текстом какого-то отчета, а третья между ними для красоты:
Итак, перед нами таблица из одного ряда, с тремя ячейками (столбцами), в третьей ячейке нельзя не заметить вложенную таблицу. Теперь код: <table>
<tr>
<td width="200" valign="top" background="blue.gif" align="center">С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.</td>
<td width="10" background="white.gif"> </td>
<td width="200" valign="top" background="blue.gif" align="center">Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете:
<br><br>
<table cellspacing="3">
<tr>
<td width="50" background="white.gif">буки</td><td background="white.gif">65% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">бяки</td><td background="white.gif">20% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">др.</td><td background="white.gif">15% населения</td>
</tr>
</table>
<br><br>
За сим все</td>
</tr>
</table>
Увы, код получился объемный, но зато в нем нет ничего сложного: вложенная таблица от обычной ничем не отличается.
Но все же здесь есть некоторые нюансы, на которые следует обратить внимание: background="картинка.gif" - раньше мы говорили о параметре bgcolor, который задает цвет фона для таблицы (ряда, ячейки), а параметр background задает фоновую картинку для таблицы (ряда, ячейки).
А теперь сам нюанс: вроде было бы логичнее прописать просто белый фон для вложенной таблицы (bgcolor="#ffffff"), а не мучаться, создавая просто белую картинку и делая ее фоном (background="white.gif"), ведь так оно быстрее. Да, быстрее, но дело в том, что если IE (Internet Explorer) отображает параметр bgcolor для вложенных таблиц, то NN (Netscape Navigator) этот параметр для вложенных таблиц отказывается отображать, поэтому приходиться идти обходным путем, используя background.
Вот так мы и убили двух зайцев сразу: узнали, что можно задать background для таблиц, да при этом ознакомились с некоторыми тонкостями ремесла :). Теперь будем добивать оставшихся заек:
<td width="10" background="white.gif"> </td>
Давайте обратимся к коду нашей таблицы и вспомним, что эту ячейку мы ввели для красоты. Чтобы ячейка не пустовала, в нее введен (символ неразрывного пробела). Это не просто так. Дело в том, что есть любители использовать конструкцию типа: <td></td>. Вот такую конструкцию NN просто напросто игнорирует, т.к. не любит пустых ячеек, поэтому для корректного отображения вашей таблицы везде вставляйте в пустые ячейки или , или мелкую картинку 1х1 пикселов.
И последняя зайка: align="center" (right, left). Помните, мы уже говорили о параметре align, так вот, как видите, его можно задать для содержимого ячейки (см. наш пример), только вот удобного align="justify" тут нет.
Вот, пожалуй, и все. Охота за зайками переноситься в следующие главы.
В этой последней главе, посвященной таблицам, мы поговорим о рамках. Рамка вводится параметром border. Зададим рамку равную 3 пикселям:
<table border="3">
Остальную таблицу допишете сами.
Нашей рамке мы можем задать цвет. Пусть он будет черный в нашем примере:
<table border="3" bordercolor="#000000">
Вот и вся премудрость. В руководствах и справочниках вы можете встретить параметры bordercolorlight и bordercolordark - эти параметры понимает только ИЕ (Internet Explorer), поэтому не рекомендую их употреблять. Вобще-то не так трудно создать таблицу, гораздо труднее, чтобы это выглядело под разными броузерами одинаково. Возьмем те же рамки:
Я советую по возможности проверять, как выглядит ваш документ под разными броузерами и разрешениями, т.к. при этом могут проявиться такие дефекты, о которых вам доселе было неведомо. Конечно, можно махнуть рукой на пользователей NN (и прочих подобных), и радоваться тому, что в ИЕ выглядит все как надо, но это лишь свидетельствует о невысоком уровне кодера (верстальщика).
Ну, уж если вы можете махнуть рукой на тех, кто не желает использовать ИЕ, то вот на то, что у разных пользователей разное разрешение экрана вы не должны забивать. Для тех кто не знал: два самых используемых разрешения - 800x600 и 1024x768.
Никогда не стоит забывать о том, что вашу страницу могут смотреть под бОльшим или меньшим разрешением, и что нет абсолютной гарантии, что вы настолько мастерский верстальщик и в этом случае ваши таблицы не поедут куда-нибудь, например, к бабушке черта (да-да, сколько раз говорилось, сколько написано об этом, а толку практически никакого, интересно почему многие не желают этого понимать).
Собственно это все о таблицах. Напоследок несколько полезных ссылочек:
- Опыты с табличными рамками
- Специфические таблицы
- Какой ширины можно делать таблицу
Вот мы добрались и до фреймов (frames). Что же это такое и чем они замечательны? Фреймы позволяют нам
Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.
Ссылкой на эти другие документы (части нашей страники) может быть текст (фраза,слово), а может быть и картинка. На этой ступеньке мы рассмотрим только текстовую ссылку.
Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточное знание. Пусть prf.html - документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:
<a href="prf.html">посмотреть мои фотографии</a> (прим.)
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же как в случае с картинками:
(1) - <a href="prf.html">мои фотографии</a>
(2) - <a href="photos/prf.html">мои фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Как видите все просто. Но есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать, а иначе по умолчанию он будет просто безобразным, поэтому вспомним об открывающем тэге боди:
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
Разберемся что к чему: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, также не карается законом, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой). Итак пропишем цвета для ссылки и саму ссылку в нашем документе:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html> (прим.)
Ничего хитрого. Тeперь нам следует запомнить то, что ссылка на ваш почтовый ящик прописывается так:
<a href="mailto:pochta@mail.ru"> pochta@mail.ru - пишите письма </a> (прим.)
Запомните это раз и навсегда и не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик - другое (да, но цвета всех ссылок в документе одинаковые:).
Как я уже упоминала, ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка:
<a href="prf.html"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> </a>
Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку pr1.png:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<a href="prf.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html> (прим.)
Теперь посмотрите в Explorer, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0"
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" border="0"> (прим.)
Если вы думаете, что на этом ваше мучение с изучением ссылок закончилось, то это зря вы так:) - у нас впереди еще целая ступенька.
Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) Как это делается? Да все по тому же принципу:
<a href="http://www.melody.ru/music.mp3"> скачать песню </a>
Если адрес указан таким способом:
<a href="http://www.melody.ru/"> музыкальный сайт </a>
То это означает, что в указаном каталоге есть файл вроде index.html, который загрузится по умолчанию.
Но поговорим особо о картинках, многие из вас, наверное, сталкивались с таким явлением: когда жмешь на маленькую картинку, то загружается большая в том же или в новом окне. Как это делается? Тут никаких хитростей: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg):
<a href="big.jpg"> <img src="small.jpg"> </a>
В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга <a></a> есть параметр target:
<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a>
Итак, target="_blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне броузера (Explorer`а). В наш большой пример я это вводить не буду. Т.к. не хочу заводить большие картинки на сайте, и т.к. вы должны уже сами все подставлять и сами эксперементировать:)
Вот мы уже почти одолели первый лестничный пролет. Осталось еще несколько ступенек, на которых мы ознакомимся с тэгами нужными, но менее часто употребляемыми, чем тэги, которые мы уже изучили.
Вот мы добрались и до не очень часто используемых тэгов. Как же так? - возмутится бедный мой спутник - А таблицы? А фреймы? - Ну, это темы других лестничных пролетов, а мы еще и первого не одолели:) Теперь, когда я вас порадовала этим фактом, продолжим обучение:)
Я думаю: самая пора поговорить о списках. Что такое списки? Это лучше демонстрировать на наглядном примере:
Текст один
Текст другой
Текст сякой
Текст эдакий
Скорее всего вы с этим сталкивались. Все это удобно в определенных ситуациях. В каких? Загляните, например, в раздел Оглавление и увидите:)
Теперь разберемся, какими же тэгами обозначаются списки:
<li>Текст один</li>
<li>Текст другой</li>
<li>Текст сякой</li>
<li>Текст эдакий</li>
Да-да, вcе опять оказалось очень простым:) Именно тэгом <li></li> они и задаются. Возникает вопрос: можно ли помимо закрашенного кружочка поописать еще чего-нибудь подобное?
По умолчанию - (1)
Полый кружок - (2)
Не будь таким квадратным - (3)
У тэга <li> есть параметр type:
В случае (1) - <li type="disk">,
в случае (2) - <li type="circle">,
в случае (3) - <li type="square">.
Это один из вариантов. Если вы пользовались текстовыми редакторами (допустим Вордом), то бы знаете, что такое Табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается в право). Похожая фунция есть и в хтмл:
<ul>Ваш текст</ul>
Чтобы отступ (табуляция) был больше надо вкладывать тэг <ul> в самого себя:
<ul><ul>Два отступа</ul></ul>
<ul><ul><ul>Три отступа</ul></ul></ul>
Зачем я завела разговор об этом тэге, вместо того, чтобы рассказать о том, что еще можно сделать со списками? Хм:) ну, у меня все со злым умыслом:
Сдвиг один
Сдвиг другой
Сдвиг сякой
Хочу обратить ваше внимание, что это прописано без параметра type, но при помощи тэга <ul>:
<ul><li>Сдвиг один</li></ul>
<ul><ul><li>Сдвиг другой</li></ul></ul>
<ul><ul><ul><li>Сдвиг сякой</li></ul></ul></ul>
Я думала, что глава о списках получится короткой, но как видите ошиблась:). Если не устали, то переходите к следущей ступеньке, если устали, то отдохните чуток.
- Списки (от Manual.ru)
- Списки (от Html - Начальный курс)
В последнее время я все реже и реже встречаю такой элемент, как линии. Теперь их увидишь разве что в гостевых книгах, или на форумах. Линия задается тэгом <Hr> и не требует закрывающего тэга:
Вот такая она, в форме канавочки. У линии есть много разных параметров:
(1) <Hr align="right"> (center или left)
(2) <Hr width="30%"> (ширина линии в процентах/пикселях)
(3) <Hr size="6"> (толщина линии)
(4) <Hr NoShade> (отмена объемности)
(5) <Hr color="cc0000"> (цвет линии, только в IE)
Вот и вся премудрость с линиями. Естественно, эти параметры могут употребляться одновременно.
Не злоупотребляейте параметром Color, т.к. он действует только в Интернет Иксплорер (если вам так хочется все же цветную линию, то сделайте, допустим красную картинку 1x1 пиксель и вставьте ее в свой документ. Тут вам приходятся параметры картинок height и width. Пусть height=1, а width=500 - вот вам и линия:). О параметрах картинок говорится в главе 10).
Не считайте линию изжившей себя, я думаю как элемент дизайна она может быть вполне полезной.
У нас осталась еще одна главка, после которой мы перейдем к таблицам.
Эта глава о спецсимволах. Они не так часто употребляются, но тем не менее они необходимы:
(1) - < - <
(2) - > - >
(3) - " - "
(4) - - пробел
(5) - & - &
Т.к. все заключенное между < и > броузер воспринимает как тэг, то , чтобы ввести символ скобки в текст для него придумали спецсимвол (1 или 2). Теперь вы знаете на какой мучение я была обречена, когда начала писать это руководство, ох уж эти примеры:)
Кавычка (3). В принципе не обязательно ее так прописывать, броузеры понимают этот значок прекрасно, но кто знает: береженного - бережет.
Символ пробела (4). Зачем он нужен? Ну, допустим вам понадобилось пять пробелов подряд, а тэг <pre> с его принудительным переносом строки вам вовсе не нужен, вот тогда поймете, ведь спецсимвол пробела можно написать хоть тысячу раз:).
Но тут существует одно но:
слово1 слово2 слово3 = слово1 слово2 слово3
Ни одно из этих слов не перенесется на другую строку без двух других, и хотя посетитель увидит обычную фразу, где между словами стоит пробел, но по идее это же одно длинное слово, а не три, т.к. - неделимый символ пробела:) - учтите и используйте с умом.
И последний символ &, т.к. он несчастный используется для написания спецсимволов, то для него добрые люди тоже придумали спецсимвол & (бр..:).
Спецсимволы не надо включать ни в какие тэги, надеюсь вы это поняли, считайте их просто текстом.
Вот такая это сложная штука жизнь %)
Долго ли, коротко ли, но мы добрались до таблиц. При создании сайтов таблицы используются очень часто. Например, Постройка.ру (родной сайт учебника) не обошлась бы в своем оформлении без таблиц никак. Или вот еще пример, сайта, оформление которого тоже не обошлось бы без таблиц (заметьте, ни одной картинки, когда пройдете главы о таблицах без труда сможете сверстать подобное).
Таблица задается тэгом:
<table></table>
Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их.
<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы
Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделила ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук:
<table>
<tr></tr>
<tr></tr>
</table>
Сначала задаем строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Мой вам совет, для начала рисуйте таблицу на листе бумаге, чтобы все наглядно видеть.
Итак, теперь нам надо заполнить получившийся каркас:
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>
Надеюсь мы поняли, что первая цифра в загадочных надписях - это номер ряда, а вторая номер столбца (1х2 - первый ряд, второй столбец и т.д). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так:
Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В нашем случае мы задаем фон для каждого столбца.
<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>
Попробуйте задать фон для таблицы и для ряда (это для усвоения материала). Когда все усвоится переходите к следущей ступеньке, и мы продолжим разговор о таблицах.
В чем же дело? А в том, что мы не задали высоту и ширину ячейкам таблицы нашей:) Вспомним о параметрах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2 </td>
<td width="50" bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699"> 2x3 </td>
</tr>
</table>
Сразу предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длинну, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).
Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
И... готово!:)
В каждой ячейке (столбце) могут находится и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы). И тэги, которые мы применяем для форматирования текста - все те же.
Поскольку содержимое каждой ячейки как бы обстановка отдельной комнаты, то и тэги для центрирования текста пришлось прописать в нашем примере в каждой ячейке.
Давайте шагнем на следующую ступеньку и продолжим разговор о таблицах.
В чем же дело? А в том, что мы не задали высоту и ширину ячейкам таблицы нашей:) Вспомним о параметрах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2 </td>
<td width="50" bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699"> 2x3 </td>
</tr>
</table>
Сразу предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длинну, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).
Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
Вернемся к нашему примеру: теперь мы почти получили то, что хотели:)
В предыдущих главах мы научились создавать таблицы на конкретном примере, а в этой главе я хотела разом вывалить все оставшиеся возможности и аттрибуиы на ваши головы, но потом решила, что раз уж я пишу подробный учебник, то надо быть стойкой до конца:).
Вернемся к нашему примеру, и поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим аттрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу):
Вот вам и наглядный пример, а теперь как это пишется:
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>1x3</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699" valign="top"> <center>2x3</center> </td>
</tr>
</table>
Я прописала valign не для всех ячеек, только для тех, где я захотела чтобы текст располагался сверху или снизу, чтобы зря не тратить время и усилия. Существование параметра valign значительно облегчает нашу с вами жизнь, страшно даже подумать, как пришлось бы мучиться, если бы его не было:).
А теперь перейдем к следующей ступеньке, чтобы узнать о других аттрибутах, облегчающих нашу трудную жизнь.
В этой главе мы поговорим о параметрах colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)). Теперь чтобы было все понятно обратимся к примерам.
В этом примере мы использовали параметр colspan=2, прописав его для ячейки 1х1. Код будет выглядеть следующим образом:
<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699"> <center>2x3</center> </td>
</tr>
</table>
Прошу вас обратить внимание, на то, что параметр width для ячейки 1х1 в нашем примере не указан, если вас так тянет задавать этот параметр, то в нашем примере для ячейки 1х1 его надо было бы прописать равным 100 пикселям, т.к. все-таки ячейка 1х1 длинее других в два раза.
И второе на что прошу вас обратить внимание, в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, т.к. ячейка 1х1 равна сама по себе двум ячейкам по длинне (что мы и указали параметром colspan). Если бы мы прописали ячейку 1х3, тогда у нас получилась бы такая ерунда:
Теперь, когда мы разбрались с параметром colspan, разберемся с параметром rowspan. Принцип действия тут тот же:
Попробуйте сами написать код для такой таблицы (подсказываю, тут у нас должна исчезнуть ячейка 2х3). А для полного закрепления полученных знаний можете написать еще и код для такой таблицы (я не издеваюсь, просто вы так лучше усвоите):
Если ничего не получится, то вы можете посмотреть ответы здесь, а кто все понял, тот молодец и может подняться на следущую ступеньку.
Итак, мы остановились на такой таблице:
Давайте, подумаем, что же еще можно сделать с ней... хм... ну, например можно избавиться от пространства между ячейками таблицы:
Такая красота достигается с помощью атрибута cellspacing, равного нулю:
<table cellspacing=0>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
Можно наооборот увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое:
Как видите, и то, и другое мы можем использовать как дизайнерский прием, т.к. даже уже на наших примерах это смотриться не стандартно.
Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добаляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее я для начала прижму текст ячеек первого ряда к верху, в нижнего - к низу, используя атрибут valign:
Теперь зададим атрибут cellpadding=5:
Вот теперь всем должно стать понятно, что такое пространство между содержимым ячейки и ее границами, и что делает тэг cellpadding. Сравним получившееся с предыдущей таблицей: мы прекрасненько видим, что у нас добавилось пространство по бокам, снизу и сверху, причем это пространство никакими картинками и текстом заполнено быть не может, как и пространство между ячейками, когда мы задаем cellspacing.
Для тех, кто все еще не может составить код сам - вот он (для последнего варианта таблицы):
<table cellpadding=5>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2" valign="top"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>2x2</center> </td>
</tr>
</table>
Теперь я могу с чистой совестью завершить этот урок и перейти к следующему, в котором мы узнаем о вложенных таблицах.
Когда мы учились делать таблицы, то я упоминала о вложенных таблицах. Что же это такое и в чем их особенность? - это обычные таблицы, которые располагаются в ячейках другой таблицы, и больше ничего особенного в них нет... почти.
Допустим у нас уже есть большая таблица, две колонки которой забиты текстом какого-то отчета, а третья между ними для красоты:
Итак, перед нами таблица из одного ряда, с тремя ячейками (столбцами), в третьей ячейке нельзя не заметить вложенную таблицу. Теперь код: <table>
<tr>
<td width="200" valign="top" background="blue.gif" align="center">С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.</td>
<td width="10" background="white.gif"> </td>
<td width="200" valign="top" background="blue.gif" align="center">Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете:
<br><br>
<table cellspacing="3">
<tr>
<td width="50" background="white.gif">буки</td><td background="white.gif">65% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">бяки</td><td background="white.gif">20% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">др.</td><td background="white.gif">15% населения</td>
</tr>
</table>
<br><br>
За сим все</td>
</tr>
</table>
Увы, код получился объемный, но зато в нем нет ничего сложного: вложенная таблица от обычной ничем не отличается.
Но все же здесь есть некоторые нюансы, на которые следует обратить внимание: background="картинка.gif" - раньше мы говорили о параметре bgcolor, который задает цвет фона для таблицы (ряда, ячейки), а параметр background задает фоновую картинку для таблицы (ряда, ячейки).
А теперь сам нюанс: вроде было бы логичнее прописать просто белый фон для вложенной таблицы (bgcolor="#ffffff"), а не мучаться, создавая просто белую картинку и делая ее фоном (background="white.gif"), ведь так оно быстрее. Да, быстрее, но дело в том, что если IE (Internet Explorer) отображает параметр bgcolor для вложенных таблиц, то NN (Netscape Navigator) этот параметр для вложенных таблиц отказывается отображать, поэтому приходиться идти обходным путем, используя background.
Вот так мы и убили двух зайцев сразу: узнали, что можно задать background для таблиц, да при этом ознакомились с некоторыми тонкостями ремесла :). Теперь будем добивать оставшихся заек:
<td width="10" background="white.gif"> </td>
Давайте обратимся к коду нашей таблицы и вспомним, что эту ячейку мы ввели для красоты. Чтобы ячейка не пустовала, в нее введен (символ неразрывного пробела). Это не просто так. Дело в том, что есть любители использовать конструкцию типа: <td></td>. Вот такую конструкцию NN просто напросто игнорирует, т.к. не любит пустых ячеек, поэтому для корректного отображения вашей таблицы везде вставляйте в пустые ячейки или , или мелкую картинку 1х1 пикселов.
И последняя зайка: align="center" (right, left). Помните, мы уже говорили о параметре align, так вот, как видите, его можно задать для содержимого ячейки (см. наш пример), только вот удобного align="justify" тут нет.
Вот, пожалуй, и все. Охота за зайками переноситься в следующие главы.
В этой последней главе, посвященной таблицам, мы поговорим о рамках. Рамка вводится параметром border. Зададим рамку равную 3 пикселям:
<table border="3">
Остальную таблицу допишете сами.
Нашей рамке мы можем задать цвет. Пусть он будет черный в нашем примере:
<table border="3" bordercolor="#000000">
Вот и вся премудрость. В руководствах и справочниках вы можете встретить параметры bordercolorlight и bordercolordark - эти параметры понимает только ИЕ (Internet Explorer), поэтому не рекомендую их употреблять. Вобще-то не так трудно создать таблицу, гораздо труднее, чтобы это выглядело под разными броузерами одинаково. Возьмем те же рамки:
Я советую по возможности проверять, как выглядит ваш документ под разными броузерами и разрешениями, т.к. при этом могут проявиться такие дефекты, о которых вам доселе было неведомо. Конечно, можно махнуть рукой на пользователей NN (и прочих подобных), и радоваться тому, что в ИЕ выглядит все как надо, но это лишь свидетельствует о невысоком уровне кодера (верстальщика).
Ну, уж если вы можете махнуть рукой на тех, кто не желает использовать ИЕ, то вот на то, что у разных пользователей разное разрешение экрана вы не должны забивать. Для тех кто не знал: два самых используемых разрешения - 800x600 и 1024x768.
Никогда не стоит забывать о том, что вашу страницу могут смотреть под бОльшим или меньшим разрешением, и что нет абсолютной гарантии, что вы настолько мастерский верстальщик и в этом случае ваши таблицы не поедут куда-нибудь, например, к бабушке черта (да-да, сколько раз говорилось, сколько написано об этом, а толку практически никакого, интересно почему многие не желают этого понимать).
Собственно это все о таблицах. Напоследок несколько полезных ссылочек:
- Опыты с табличными рамками
- Специфические таблицы
- Какой ширины можно делать таблицу
Вот мы добрались и до фреймов (frames). Что же это такое и чем они замечательны? Фреймы позволяют нам
