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

HTML для чаиников

Подписаться Бесплатная новостная рассылка Подписчиков 17 RSS
  Июль 2003   →
 1
 2
 3
 4
 5
 6
 7
07.07.2003
10:05:08
10:08:45
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
25.07.2003
19:13:46
19:30:30
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://webcod.h10.ru
Открыта: 05-07-2003

Автор
Danila

Статистика

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

HTML для чаиников


Информационный Канал Subscribe.Ru

Начинаем проект Web-мастер

Здравствуйте дорогие и уважаемые читатели. В прошлых номерах рассылок я очень подробно объяснил, как создавать новый HTML документ.

Но мне думается, что описывать общие принципы — это не совсем то, чего вы от меня ждете. Я предлагаю несколько иное. Давайте просто возьмем, да и напишем вместе цельный web-сайт! По всем правилам. Да так, чтобы был он полезен многим, да чтобы все у нас было как у взрослых: замысел, план и все остальное. А если вдруг кого это не устраивает, напишите мне и я, возможно, пересмотрю свое решение.

Но будем последовательны. Чтобы создать хороший сайт нам нужно определиться с темой. Я предлагаю создать сайт про HTML.

Далее нам необходим план создания нашего сайта:

  1. Разработка дизайна.
  2. Наполнение сайта.
  3. Соединение всех его составляющих и доработка дизайна по необходимости.
  4. Раскрутка и попытка заработать на сайте.

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

Поехали.

Есть несколько способов составления дизайна: динамический (с помощью скриптов, SSI и т.п.), CSS-дизайны (используется технология CSS) и статический (составление из отдельных HTML страничек). Так как мы изучаем HTML, то у нас (на первых порах) будет статический дизайн. По ходу нашего с вами взросления мы сделаем дизайн динамичным.

Как только я выучил все теги, я попытался создать подобие дизайна. Были выбраны тема, название, логотип, вводные слова, и пункты меню. И встал вопрос, а как их скомпоновать, чтобы это не была свалка слов и картинок. Ответ пришел не сразу, но пришел - таблицы. С помощью таблиц можно создать костяк сайта, чтобы не что не уползало. Но для того, что бы создать этот костяк, необходимо в совершенстве владеть их параметрами и всем что с ними связано.

Таблицы.

Как т положено начнем с азов. Чтобы создать таблицу надо использовать тег <table>(соответственно и закрывающийся </table>, далее я не буду акцентировать на этом ваше внимание). Просто тег <table> нечего не даст, в нем необходимо указать количество столбцов и строк. Это делается с помощью вложения в него тегов <tr>(количество строк) и <td>(количество столбцов)

создадим табличку, состоящую из трех строк, первая строка будет состоять из двух столбцов, вторая из одного, третья из двух:

<table width="90%" height="150" border="2" align="center" cellpadding="2" cellspacing="5" bordercolor="#FF0000" bgcolor="#FFFF00">
<tr>
<td bgcolor="#0000FF">Первая ячейка первой строки</td>
<td align="right">Вторая ячейка первой строки</td>
</tr>
<tr>
<td colspan="2" align="center" valign="top">Второй строки</td>
</tr>
<tr>
<td>Первая ячейка третьей строки</td>
<td align="right">Вторая ячейка третьей строки</td>
</tr>
</table>

В итоге мы получаем:

Первая ячейка первой строки

Вторая ячейка первой строки
Второй строки

Первая ячейка третьей строки

Вторая ячейка третьей строки

Как видно в этом примере я использовал много параметров, о которых я еще не рассказывал. Начнем с первой строчки <table width="90%" height="150" border="1" align="center" cellpadding="2" cellspacing="5" bordercolor="#FF0000" bgcolor="#FFFF00">. Параметры width и height задают ширину и высоту таблицы соответственно, их можно указывать в %, px. Border обозначает толщину края таблицы, при значение 0, краев у таблицы нет (на основе этого и делается дизайн из таблиц). Параметр align задает расположение таблицы на странице, его значениями могут быть: center (по центру), right (справа) и left (слева). Параметр внутренние поля в каждой ячейке, в пикселях. Очень похожий на него по названию параметр cellspacing задает просветы между ячейками, тоже в пикселях (px). Параметром bordercolor можно задать цвет рамки. Понятно, что при нулевом значение border этот параметр не действует. Параметр bgcolor задает цвет все таблицы. С первой строчкой покончено, переходим к третьей. В принципе это строчка ничем особым не отделяется от других подобных, только у нее задан свой параметр bgcolor, поэтому эта ячейка имеет свой собственный фон.

А вот седьмая (<td colspan="2" align="center" valign="top">Второй строки</td>) строчка нашего с вами кода запутаннее и интереснее. Что бы ячейка распространилась на две колонки, я использовал параметр colspan="2. По умолчанию текст в ячейке располагается справа по центу, чтобы изменить это я ввел дополнительные параметры, уже известный нам align и еще пока не известный valign. Параметр valign задает расположение текста по вертикали и имеет следующие значения: top(вверху), middle(по середине), bottom(снизу).

Мы полностью разобрали предложенный мною пример. На сегодня все, до новых встреч. Продолжение следует ...

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное