Сразу хочу сделать оговорку для тех, кто не правильно понял смысл происходящего. Здесь мы делаем сайт с ноля. ПОЛНОГО НОЛЯ. По этой причине все приведенные примеры просты. И не следует обсуждать прописные истины про иные методы разработки. То, что они существуют и так понятно. Наша задача научиться делать все и правильно.
Откройте Internet Explorer и в настройках поставьте About blank, т.е. что бы он стартовал с пустой страницы. Сделать это можно так:
Сервис / Свойства обозревателя / кнопка «С пустой».
Теперь мы можем создать первую страничку, и без помех посмотреть что получается. Итак. Мы подготовили рабочее место. Можно приступать к первым шагам в веб строительстве.
Начнем мы с таблиц.
Открываем Notepad++, который мы установили ранее. Новый документ уже открыт. Сохраните его, ну скажем на рабочий стол.
Внимание! Особенностью этого редактора является то, что расширение файла надо набирать в ручную.
Фаил / Сохранить как / index.html или file / save as / index.html у кого какой язык выбран. index.html пишем руками.
Сохранили. Теперь этот умный блокнот будет подсвечивать код, который мы будем писать. Приступим.
Таблицы состоят из столбиков идущих вертикально и с лева на право а также строчек идущих горизонтально и сверху в низ. Для примера начертите на бумаге табличку для игры в крестики нолики. Вот ее мы и воссоздадим в браузере.
Теги таблиц.
Пишем начиная с первой строчки открытого в Notepad++ файла index.html:<table>
<tr>
<td> </td>
</tr>
</table>
Делайте пропуски в коде. Так проще будет работать с таблицей. Убрать их можно потом.
Это пример простой таблички. Как если бы вы нарисовали на бумаге квадрат ( Можете нарисовать это облегчит дальнейшее понимание ). Далее я буду давать комментарии внутри кода. Они будут выделены зеленым цветом. Их можно не переписывать. Они не нужны для таблицы. Начали.
<table><!--Это открывающий тег таблицы--> <tr><!--Это открывающий тег столбца-->
<td> <!--Это открывающий тег строчки--> <!--Вот в этом месте распологается содержание таблицы--> <!--После чего таблицу надо закрыть в обратном порядке--> </td> <!--Закрыли строку--> </tr> <!--Закрыли столбик--></table><!--Закрыли таблицу--><!--Я буду писать друг за другом, повторяя пройденное вы дописывайте в свою таблицу недостающие эллементы--><!--У всех тегов есть атрибуты отвечающие за отображение в браузере сейчас мы начнем их использовать--><table width="50%" align="center" border="1"><!--width это ширина таблицы относительно ширины окна браузера. В данном случае половина.Задается или в процентах или в пикселах.--><!--align выравнивает таблицу относительно границ браузера может принимать значения left, right, center--><!--border это свойства самой границызадается в пикселах может придавать цвет или выделять какую либо одну сторону.Просто border выделяет всю таблицу или ячейку--> <tr valign="top"> <!--valign выравнивает столбцы по вертикали может иметь значения top, bottom, middle в теге <td> лучше не использовать так как часто вызывает ошибки. Потом эти приемы можно наверстать--> <td width="33%" border="1"> <!--Все аналогично как в <table> но 33% имеется ввиду от общей ширины ТАБЛИЦЫ а не браузера--> x </td> <td width="33%" border="1"> x </td> <td width="33%" border="1"> x </td> <!--При таком написании три ячеики пойдут вряд друг за другоми их общая ширина составит 99% от ширины таблицы. Поскольку мы пишем таблицу в 9 клеток то теперь можно закрыть первый ряд--> </tr> <!--Закрыли. Оставшиеся два ряда будут тупо повторять первый по этому я их дам без комментариев--> <tr valign="top"> <td width="33%" border="1"> 0 </td> <td width="33%" border="1"> 0 </td> <td width="33%" border="1"> 0 </td> </tr> <tr valign="top"> <td width="33%" border="1"> x </td> <td width="33%" border="1"> x </td> <td width="33%" border="1"> x </td> </tr> <!--Теперь, когда мы написали три ряда по три ячейки в каждом, мы можем закрыть таблицу--></table>В принципе если вы скопируете эту часть кода вместе с комментариями и сохраните, то в браузере вы увидите табличку 3х3. без каких либо пояснений. На то они и комментарии.
Идем дальше.
У таблиц есть еще атрибуты, которые призваны облагородить отображение таблички в браузере. Если умело ими пользоваться, то при использовании минимума средств можно сделать все что угодно. Мы начнем с того, что допишем нашу таблицу.
Вот эти атрибуты
Cellpadding - зазор между границами ячейки и ее содержимым в пикселах.
Cellspacing - зазор между ячейками таблицы в пикселах.
bgcolor – цвет фона таблицы в целом или ячейки в частности смотря где задан.
Пишется либо словами как-то: blue, black, white, silver… и т.д. либо шестнадцатиричным кодом, например #000000 будет черным, а #ffffff -белым.
Пока, что бы не перегружать мозг достаточно. Теперь применим все изученное к нашей таблице.
<!--Пишем--><table width="50%" align="center" cellpadding="0" cellspacing="1" bgcolor="black" border="0"><!--Начинаем верстку--> <tr valign="top"> <td width="33%" align="center" bgcolor="white">x</td> <td width="33%" align="center" bgcolor="white">x</td> <td width="33%" align="center" bgcolor="white">x</td> </tr> <tr valign="top"> <td width="33%" align="center" bgcolor="white">0</td> <td width="33%" align="center" bgcolor="white">0</td> <td width="33%" align="center" bgcolor="white">0</td> </tr> <tr valign="top"> <td width="33%" align="center" bgcolor="white">x</td> <td width="33%" align="center" bgcolor="white">x</td> <td width="33%" align="center" bgcolor="white">x</td> </tr> <!--Закончили и закрываем таблицу--></table>
Теперь наша таблица смотрится совершенно по другому. Если вы просматривали предыдущий код через браузер, то разница видна сразу.
Для закрепления материала попробуйте написать таблицы с разным количеством ячеек, разными значениями изученных параметров, разными цветами и т.д. В следующем уроке мы научимся объединять столбцы и ячейки, а также создадим скелет нашего будущего сайта. Не бойтесь эксперементировать и у вас обязательно все получится.