Отправляет email-рассылки с помощью сервиса Sendsay

Заработок в интернете.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Как заработать и сэкономить" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2010   →
 1
 2
 3
 4
04.03.2010
20:18:41
20:27:00
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
b0

Статистика

443 подписчиков
0 за неделю
←   Все выпуски   →

Заработок в интернете.


 Здравствуйте дорогие подписчики, перейдём сразу к делу:

 

Программы

Также AxeL прислал ссылки на несколько редакторов для разработчиков. Вот они:

Сам я эти программы не пробовал, если кто попробует, напишите. Также, сегодня или завтра я выложу на сайт еще несколько редакторов. Теория

Вступление закончено, приступаем к изучению веб-разработки. Сегодня у нас очень важный урок. Мы будем изучать таблицы. Вы конечно не раз видели, что практически любая веб-страница состоит из блоков, расположенных не один под другим. Например, вверху страницы находится заголовок, слева меню, а внизу информация об авторских правах, контакты и т.д. Каким же образом веб-мастер умудряется так сделать? Вообще существует по крайней мере два варианта. Одним из них является CSS. Его мы начнем изучать несколько позже, кроме того, он довольно сложный. Сегодня же мы изучим другой способ. Это таблицы. Без них вообще не обойтись, разве что изредка (в этой рассылке). Кроме блочного размещения элементов, с помощью таблиц можно сверстать дизайн сайта. Взгляните на сайт нашей рассылки. В модуле дизайна нет ни одной картинки, кроме счетчика подписчиков, предоставленного subscribe.ru. Все элементы дизайна - текстовые, либо представляют собой фоновой цвет таблиц. Таблицы задаются следующим тегом:

<table></table>

У тега таблицы существуют следующие параметры:
  • border - отвечает за толщину границы таблицы. Представляет собой число. По умолчанию равен 0, то есть таблица по умолчанию не видна. Если нужна видимая таблица, установите этот параметр больше нуля, например:
    <table border=1></table>
  • width - отвечает за длину таблицы. Указывает длину либо в пикселях (<table width=500...), либо в процентах от длины элемента (чаще всего другой таблицы), содержащего указанную таблицу (<table width=100%...). Например, таблица, которая растянется на всю страницу:
    <html>
        <body>
            <table width=100%></table>
        </body>
    </html>
  • cellspacing - размер промежутков между ячейками таблицы в пикселях. Представляет собой целое число. Один из самых главных параметров. Например: <table cellspacing=3...
  • cellpadding - отступ между содержимым ячейки и ее границей в пикселях. Целое число. Например: <table cellpadding=4...
  • bordercolor - цвет границы таблицы. Имеет смысл, если параметр border больше нуля. Значение цвета указывается также, как и для тега <font> (см. предыдущий выпуск). Например: <table border=1 bordercolor=#FF0000...
  • bgcolor - цвет фона таблицы. Например: <table bgcolor=#FF0000...
  • background - фоновой рисунок. Например: <table background="image.gif"...
  • align - выравнивание таблицы относительно документа. Например, эта таблица будет расположена в середине страницы:
    <html>
        <body>
            <table width=50% align=center></table>
        </body>
    </html>
Параметры, как и для других тегов, можно указывать в любом порядке через пробел. Параметры, имеющие в своем значении пробел, нужно заключать в кавычки (<table background="my picture.gif"...).

Немного о фоновых рисунках. Браузер не умеет растягивать картинки. Если рисунок больше размеров элемента - он будет выведен не полностью. Если меньше - он будет выведен столько раз, сколько требуется, чтобы заполнить таблицу полностью.

Сама таблица не самодостаточна. Она должна включать в себя строки и ячейки. Строки задаются тегом <tr></tr>. Ячейки - <td></td> Разобраться очень просто - сначала пишем тег таблицы, затем внутри него пишем столько тегов строк, сколько нужно, а затем, внутри тегов строк пишем столько тегов ячеек, сколько должно быть в каждой строке. Например, следующий код
<html>
    <body>
        <table border=1><!--создаем таблицу-->
            <tr><!--создаем первую строку таблицы-->
                <td bgcolor=blue>1*1</td><!--создаем первую ячейку в первой строке-->
                <td bgcolor=yellow>1*2</td><!--создаем вторую ячейку в первой строке-->
                <td bgcolor=blue>1*3</td><!--создаем третью ячейку в первой строке-->
            </tr><!--закрываем первую строку таблицы-->
            <tr><!--создаем вторую строку таблицы-->
                <td bgcolor=yellow>2*1</td><!--создаем первую ячейку во второй строке-->
                <td bgcolor=blue>2*2</td><!--создаем вторую ячейку во второй строке-->
                <td bgcolor=yellow>2*3</td><!--создаем третью ячейку во второй строке-->
            </tr><!--закрываем вторую строку таблицы-->
        </table><!--закрываем таблицу-->
    </body>
</html>
даст нам такую таблицу:
1*1 1*2 1*3
2*1 2*2 2*3
Я выделил ячейки таблицы разным цветом для наглядности. Кстати, <!--таким образом--> в документ можно добавить комментарий. Текст комментария игнорируется браузером при обработке документа.

Тег ячейки имеет следующие параметры:
  • width - задает длину ячейки в пикселях или процентах от длины таблицы. Аналогичен соответствующему параметру тега таблицы.
  • height - задает высоту ячейки в пикселях. Таблица не имеет аналогичного параметра.
  • align - выравнивание текста (вообще-то содержимого, ведь внутри ячейки может находиться не только текст, но и картинки). Может принимать значение left, center, right. По умолчанию равен left.
  • valign - выравнивание по вертикали. Может принимать следующие значения: top, middle, bottom. По умолчанию - middle (это самое неприятное - постоянно забываю об этом. Приходится потом искать, почему у меня на странице текст не там, где должен быть).
  • bgcolor, background - аналогичны соответствующим параметрам тега таблицы.
Также, параметры align, valign, bgcolor, background можно задать для тега <tr> По матрешкам!!!

Откуда матрешки? Элементарно, Ватсон! Таблицы могут быть вложенными. То есть в любую ячейку можно всунуть другую таблицу. Пишем следующий код:

<html>
    <body>
        <table border=1 width=100%><!--создаем таблицу-->
            <tr><!--создаем первую строку таблицы-->
                <td bgcolor=blue><!--создаем первую ячейку в первой строке-->
                    <table border=1 bordercolor=#FF0000 bgcolor=white><!--создаем вложенную таблицу-->
                        <tr><!--строка таблицы-->
                            <td><!--первая ячейка-->
                                Первая ячейка
                            </td>
                            <td><!--вторая ячейка-->
                                Вторая ячейка
                            </td>
                            <td><!--третья ячейка-->
                                Третья ячейка
                            </td>
                        </tr>
                    </table>
                </td><!--создаем первую ячейку в первой строке-->
                <td bgcolor=yellow>1*2</td><!--создаем вторую ячейку в первой строке-->
                <td bgcolor=blue>1*3</td><!--создаем третью ячейку в первой строке-->
            </tr><!--закрываем первую строку таблицы-->
            <tr><!--создаем вторую строку таблицы-->
                <td bgcolor=yellow>2*1</td><!--создаем первую ячейку во второй строке-->
                <td bgcolor=blue>2*2</td><!--создаем вторую ячейку во второй строке-->
                <td bgcolor=yellow>2*3</td><!--создаем третью ячейку во второй строке-->
            </tr><!--закрываем вторую строку таблицы-->
        </table><!--закрываем таблицу-->
    </body>
</html>
Получаем:
Первая ячейка Вторая ячейка Третья ячейка
1*2 1*3
2*1 2*2 2*3
Видите, что получилось? Первая ячейка в первой строке содержит вложенную таблицу. При этом ее граница имеет красный (#FF0000 - см. предыдущий номер) цвет. Цвет фона таблицы - белый. Для ячеек можно прописть другой цвет, и он перекроет исходный цвет таблицы. Например:
<html>
    <body>
        <table border=1 width=100%><!--создаем таблицу-->
            <tr><!--создаем первую строку таблицы-->
                <td bgcolor=blue><!--создаем первую ячейку в первой строке-->
                    <table border=1 bordercolor=#FF0000 bgcolor=white><!--создаем вложенную таблицу-->
                        <tr><!--строка таблицы-->
                            <td bgcolor=blue><!--первая ячейка-->
                                Первая ячейка
                            </td>
                            <td bgcolor=yellow><!--вторая ячейка-->
                                Вторая ячейка
                            </td>
                            <td bgcolor=red><!--третья ячейка-->
                                Третья ячейка
                            </td>
                        </tr>
                    </table>
                </td><!--создаем первую ячейку в первой строке-->
                <td bgcolor=yellow>1*2</td><!--создаем вторую ячейку в первой строке-->
                <td bgcolor=blue>1*3</td><!--создаем третью ячейку в первой строке-->
            </tr><!--закрываем первую строку таблицы-->
            <tr><!--создаем вторую строку таблицы-->
                <td bgcolor=yellow>2*1</td><!--создаем первую ячейку во второй строке-->
                <td bgcolor=blue>2*2</td><!--создаем вторую ячейку во второй строке-->
                <td bgcolor=yellow>2*3</td><!--создаем третью ячейку во второй строке-->
            </tr><!--закрываем вторую строку таблицы-->
        </table><!--закрываем таблицу-->
    </body>
</html>
Результат:
Первая ячейка Вторая ячейка Третья ячейка
1*2 1*3
2*1 2*2 2*3
Вложенная таблица является полностью самостоятельной полноправной таблицей. Width'n'Height

Поговорим о длине и ширине. Напишем следующий код:

<html>
    <body>
        <table border=1><!--создаем таблицу-->
            <tr><!--создаем первую строку таблицы-->
                <td bgcolor=blue width=50>1*1</td><!--создаем первую ячейку в первой строке, длина 50 пикселей-->
                <td bgcolor=yellow>1*2</td><!--создаем вторую ячейку в первой строке-->
                <td bgcolor=blue>1*3</td><!--создаем третью ячейку в первой строке-->
            </tr><!--закрываем первую строку таблицы-->
            <tr><!--создаем вторую строку таблицы-->
                <td bgcolor=yellow width=400>2*1</td><!--создаем первую ячейку во второй строке, длина 400 пикселей-->
                <td bgcolor=blue>2*2</td><!--создаем вторую ячейку во второй строке-->
                <td bgcolor=yellow>2*3</td><!--создаем третью ячейку во второй строке-->
            </tr><!--закрываем вторую строку таблицы-->
        </table><!--закрываем таблицу-->
    </body>
</html>
Получаем:
1*1 1*2 1*3
2*1 2*2 2*3
Что случилось? Левая верхняя ячейка явно не 50 пикселей в длину. Все очень просто. Все ячейки в одной колонке должны быть одной длины. Тоже самое касается высоты ячеек, находящихся в одном ряду. Максимум, что мы можем сделать - это растянуть одну ячейку на длину двух (трех, четырех...) нижележащих/вышележащих. Напишите:
<html>
    <body>
        <table border=1><!--создаем таблицу-->
            <tr><!--создаем первую строку таблицы-->
                <td bgcolor=blue width=400 colspan=2>1*1</td><!--создаем первую ячейку в первой строке, она растянута на две колонки-->
                <td bgcolor=blue>1*2</td><!--создаем вторую ячейку в первой строке-->
            </tr><!--закрываем первую строку таблицы-->
            <tr><!--создаем вторую строку таблицы-->
                <td bgcolor=yellow>2*1</td><!--создаем первую ячейку во второй строке, длина 400 пикселей-->
                <td bgcolor=blue>2*2</td><!--создаем вторую ячейку во второй строке-->
                <td bgcolor=yellow>2*3</td><!--создаем третью ячейку во второй строке-->
            </tr><!--закрываем вторую строку таблицы-->
        </table><!--закрываем таблицу-->
    </body>
</html>
Получаем:
1*1 1*2
2*1 2*2 2*3
Параметр colspan указывает браузеру, что ячейку нужно растянуть на указанное количество колонок. Точно также можно растянуть ячейку на несколько строк, используя параметр rowspan. Правда rowspan используется редко, я за свою практику использовал его всего два-три раза. Практика

Итак, применим полученные знания на практике. Попробуем создать полноценную страницу с шапкой, меню и контактной информацией. Создаем html-файл, внутри пишем:

<html>
    <head>
        <title>Полноценная веб-страница</title>
    </head>
    <body bgcolor=#FFFFCC>
        <table width=100%>
            <tr><!--шапка страницы-->
                <td width=100%>
                    <font color=blue size=6>Полноценная веб-страница</font>
                </td>
            </tr>
        </table>
            <tr><td width=100% height=10 bgcolor=#FFCA40><!--разделитель-->
                <hr><!--горизонтальная линия-->
            </td></tr>
            <tr>
                <td>
                    <table width=100%>
                        <tr>
                            <td width=150 valign=top><!--Меню-->
                            <a href=index.php>Главная</a><br>
                            <a href=news/index.php>Новости</a><br>
                            <a href=guestbook/index.php>Гостевая книга</a><br>
                            <a href=mail/index.php>Обратная связь</a><br>
                            </td>
                            <td width=10>
                            <td valign=top>
Вступление закончено, приступаем к изучению веб-разработки. Сегодня у нас очень важный урок. Мы будем изучать таблицы. Вы конечно не раз видели, что практически любая веб-страница состоит из блоков, расположенных не один под другим. Например, вверху страницы находится заголовок, слева меню, а внизу информация об авторских правах, контакты и т.д. Каким же образом веб-мастер умудряется так сделать? Вообще существует по крайней мере два варианта. Одним из них является CSS. Его мы начнем изучать несколько позже, кроме того, он довольно сложный. Сегодня же мы изучим другой способ. Это таблицы. Без них вообще не обойтись, разве что изредка (в этой рассылке). Кроме блочного размещения элементов, с помощью таблиц можно сверстать дизайн сайта. Взгляните на сайт нашей рассылки. В модуле дизайна нет ни одной картинки, кроме счетчика подписчиков, предоставленного subscribe.ru. Все элементы дизайна - текстовые, либо представляют собой фоновой цвет таблиц. Таблицы задаются следующим тегом:                             </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr><td width=100% height=10 bgcolor=#FFCA40><!--разделитель-->
                <hr><!--горизонтальная линия-->
            </td></tr>
            <tr>
                <td width=100%>
                    <font color=blue size=2>
                        Авторские права<sup>&copy;</sup> 2009, Commander.<br>
                        Электронная почта: <a href="mailto:author@itml.su">author@itml.su</a>
                    </font>
                </td>
            </tr>
    </body>
</html>
Конечно, то, что мы написали шедевром не является, но этого уже достаточно, чтобы почувствовать могущество таблиц. Более простого способа разделить страницу на блоки не существует. Есть, правда более элегантный, но и куда более сложный способ - использовать CSS. Но это, как говорится, уже совсем другая история, и мы ей займемся тогда, когда наберемся опыта в HTML. Звонок с урока

Уххх! Наш пятый номер дописан. Сегодня мы изучили то, что нам потребуется при верстке практически любой веб-страницы. Тема действительно сложная. В следующем выпуске будет попроще. Мы научимся создавать списки (именно с помощью списков я вывожу новости) упорядоченные и неупорядоченные. Также мы продолжим изучение таблиц, немного коснемся CSS (я прекрано понимаю, что заинтриговал вас упоминанием о CSS чуть выше), а также приступим к тому, без чего мы не сможем обойтись, когда начнем изучать программирование для web - к формам (одна из них находится чуть ниже - да, да, голосование). Для наиболее любознательных подскажу:

  • тег <ul></ul> указывает браузеру на начало и конец неупорядоченного списка
  • тег <li>очередной пункт списка
Кстати, это был именно неупорядочеенный список. Поэкспериментируйте. Один совет. Когда пишете код, делайте отступы от левого края. Также, как в примерах кода. Для этого очень удобно использовать клавишу <Tab>. Если не делать отступов, длинный код теряет читабельность, и вы рискуете запутаться в собственном коде. Так что отступы делайте всегда.
В избранное