Отправляет 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 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<xhtml>
<xhead>
<xtitle>Untitled Document<x/title>
<xmeta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<x/head>

<xbody><table width=100% cellpadding=0 cellspacing=0 border=0>
<tr>
<td width=100%>
        <table cellpadding=0 cellspacing=0 border=0 width=100% bgcolor="#A9BFD4">
        <tr>
        <td width=130>
                <table cellpadding=0 cellspacing=0 border=0 width=120>
                <tr><td align="center"><b><a href="http://webcod.h10.ru">webcod.h10.ru</a></b></td></tr>;
                </table>
        </td>
        <td width=100% valign=top>
                <table cellpadding=0 cellspacing=0 border=0 width=100%>
                <tr><td bgcolor="#A9BFD4" height=19>
                        <table cellpadding=0 cellspacing=0 border=0>
                        <tr>
                        <td>&nbsp;&nbsp;Статьи&nbsp;&nbsp;::<a class=menusmall href="http://webcod.h10.ru/index.php?html/index.htm">HTML</a>;
<a class=menusmall href="http://webcod.h10.ru/index.php?php/index.htm">PHP</a>;
<a class=menusmall href="http://webcod.h10.ru/index.php?js/index.htm">JavaScript</a>;
<a class=menusmall href="http://webcod.h10.ru/index.php?des/index.htm">Web&nbsp;Design</a>;
<a class=menusmall href="http://webcod.h10.ru/index.php?ra/index.htm">Раскрутка</a>;
<a class=menusmall href="http://webcod.h10.ru/index.php?zar/index.htm">Заработок</a>;
<a class=menusmall href="http://webcod.h10.ru/index.php?raz/index.htm">Разработка</a>;
</td>
                        </tr>
                        </table>
        </td>
        </tr>
        </table>
</td>
</tr>
</table>
        <table><tr>
        <td valign="top"><font face="Times New Roman, Times, serif" style=""font-size:14px">"
          <br><div class=Section1>

<h3 align=center style='text-align:center'>Начинаем проект Web-мастер</h3>

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

<p>Но мне думается, что описывать общие принципы — это не совсем то, чего вы
от
меня ждете. Я предлагаю несколько иное. Давайте просто возьмем, да и напишем
вместе цельный web-сайт! По всем правилам. Да так, чтобы был он полезен многим,
да чтобы все у нас было как у взрослых: замысел, план и все остальное. А если
вдруг кого это не устраивает, <a href="mailto:monas3@yandex.ru">напишите мне</a>
и я, возможно, пересмотрю свое решение.</p>

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

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

<ol start=1 type=1>
 <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;
     mso-list:l0 level1 lfo1;tab-stops:list 36.0pt'>Разработка дизайна. </li>
 <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;
     mso-list:l0 level1 lfo1;tab-stops:list 36.0pt'>Наполнение сайта. </li>
 <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;
     mso-list:l0 level1 lfo1;tab-stops:list 36.0pt'>Соединение всех его
     составляющих и доработка дизайна по необходимости. </li>
 <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;
     mso-list:l0 level1 lfo1;tab-stops:list 36.0pt'>Раскрутка и попытка
     заработать на сайте.</li>
</ol>

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

<p><strong>Поехали.</strong></p>

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

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

<p><strong>Таблицы.</strong></p>

<p>Как т положено начнем с азов. Чтобы создать таблицу надо использовать тег
<code style=""color:blue"><span"
style='font-size:10.0pt;font-family:"Courier New"'>&lt;table&gt;</span></code>(соответственно
и закрывающийся <code style=""color:blue"><span" style='font-size:10.0pt;font-family:"Courier
New"'>&lt;/table&gt;</span></code>,
далее я не буду акцентировать на этом ваше внимание). Просто тег <code style=""color:blue"><span"
style='font-size:10.0pt;font-family:"Courier New"'>&lt;table&gt;</span></code>
нечего не даст, в нем необходимо указать количество столбцов и строк. Это
делается с помощью вложения в него тегов <code style=""color:blue"><span" style='font-size:10.0pt;
font-family:"Courier New"'>&lt;tr&gt;</span></code>(количество строк) и <code
style=""color:blue"><span"
style='font-size:10.0pt;font-family:"Courier New"'>&lt;td&gt;</span></code>(количество
столбцов)</p>

<p>создадим табличку, состоящую из трех строк, первая строка будет состоять из
двух столбцов, вторая из одного, третья из двух:<br>
<br>
<code style=""color:blue"><span" style='font-size:10.0pt;font-family:"Courier New"'>&lt;table
width=&quot;90%&quot; height=&quot;150&quot; border=&quot;2&quot;
align=&quot;center&quot; cellpadding=&quot;2&quot; cellspacing=&quot;5&quot;
bordercolor=&quot;#FF0000&quot; bgcolor=&quot;#FFFF00&quot;&gt;</span></code><span
style='font-size:10.0pt;font-family:"Courier New";mso-fareast-font-family:"Courier
New"'><br>
<code style=""color:blue">&lt;tr&gt;" </code><br>
<code style=""color:blue">&lt;td" bgcolor=&quot;#0000FF&quot;&gt;Первая ячейка
первой
строки&lt;/td&gt;</code><br>
<code style=""color:blue">&lt;td" align=&quot;right&quot;&gt;Вторая ячейка первой
строки&lt;/td&gt;</code><br>
<code style=""color:blue">&lt;/tr&gt;</code><br>"
<code style=""color:blue">&lt;tr&gt;" </code><br>
<code style=""color:blue">&lt;td" colspan=&quot;2&quot; align=&quot;center&quot;
valign=&quot;top&quot;&gt;Второй строки&lt;/td&gt;</code><br>
<code style=""color:blue">&lt;/tr&gt;</code><br>"
<code style=""color:blue">&lt;tr&gt;" </code><br>
<code style=""color:blue">&lt;td&gt;Первая" ячейка третьей строки&lt;/td&gt;</code><br>
<code style=""color:blue">&lt;td" align=&quot;right&quot;&gt;Вторая ячейка третьей
строки&lt;/td&gt;</code><br>
<code style=""color:blue">&lt;/tr&gt;</code><br>"
<code style=""color:blue">&lt;/table&gt;</code></span></p>"

<p>В итоге мы получаем: <o:p></o:p></p>

<div align=center>

<table border=1 cellspacing=5 cellpadding=0 width="90%" bgcolor=yellow
 style='width:90.0%;mso-cellspacing:3.7pt;background:yellow;border:outset red
1.5pt;
 mso-padding-alt:1.5pt 1.5pt 1.5pt 1.5pt' height=150>
 <tr>
  <td style='border:inset red .75pt;background:blue;padding:1.5pt 1.5pt 1.5pt
1.5pt'>
  <p class=MsoNormal>Первая ячейка первой строки</p>
  </td>
  <td style='border:inset red .75pt;padding:1.5pt 1.5pt 1.5pt 1.5pt'>
  <p class=MsoNormal align=right style='text-align:right'>Вторая ячейка первой
  строки</p>
  </td>
 </tr>
 <tr>
  <td colspan=2 valign=top style='border:inset red .75pt;padding:1.5pt 1.5pt
1.5pt 1.5pt'>
  <p class=MsoNormal align=center style='text-align:center'>Второй строки</p>
  </td>
 </tr>
 <tr>
  <td style='border:inset red .75pt;padding:1.5pt 1.5pt 1.5pt 1.5pt'>
  <p class=MsoNormal>Первая ячейка третьей строки</p>
  </td>
  <td style='border:inset red .75pt;padding:1.5pt 1.5pt 1.5pt 1.5pt'>
  <p class=MsoNormal align=right style='text-align:right'>Вторая ячейка третьей
  строки</p>
  </td>
 </tr>
</table>

</div>

<p>Как видно в этом примере я использовал много параметров, о которых я еще не
рассказывал.
Начнем<span style='mso-ansi-language:EN-US'> </span>с<span style='mso-ansi-language:
EN-US'> </span>первой<span style='mso-ansi-language:EN-US'> </span>строчки<span
style='mso-ansi-language:EN-US'> </span><code style=""color:blue"><span" lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";mso-ansi-language:EN-US'>&lt;table
width=&quot;90%&quot; height=&quot;150&quot; border=&quot;1&quot;
align=&quot;center&quot; cellpadding=&quot;2&quot; cellspacing=&quot;5&quot;
bordercolor=&quot;#FF0000&quot; bgcolor=&quot;#FFFF00&quot;&gt;</span></code><span
lang=EN-US style='mso-ansi-language:EN-US'>. </span>Параметры width и height
задают ширину и высоту таблицы соответственно, их можно указывать в %, px.
Border обозначает толщину края таблицы, при значение 0, краев у таблицы нет (на
основе этого и делается дизайн из таблиц). Параметр align задает расположение
таблицы на странице, его значениями могут быть: <code style=""color:blue"><span"
style='font-size:
10.0pt;font-family:"Courier New"'>center </span></code>(по центру), <code style=""color:blue"><span"
style='font-size:10.0pt;font-family:"Courier New"'>right </span></code>(справа)
и <code style=""color:blue"><span" style='font-size:10.0pt;font-family:"Courier
New"'>left </span></code>(слева).
Параметр внутренние поля в каждой ячейке, в пикселях. Очень похожий на него по
названию параметр <code style=""color:blue"><span" style='font-size:10.0pt;font-family:"Courier
New"'>cellspacing</span></code>
задает просветы между ячейками, тоже в пикселях (px). Параметром <code style=""color:blue"><span"
style='font-size:10.0pt;font-family:"Courier New"'>bordercolor</span></code>
можно задать цвет рамки. Понятно, что при нулевом значение <code style=""color:blue"><span"
style='font-size:10.0pt;font-family:"Courier New"'>border</span></code> этот
параметр не действует. Параметр <code style=""color:blue"><span" style='font-size:10.0pt;font-family:
"Courier New"'>bgcolor</span></code> задает цвет все таблицы. С первой строчкой
покончено, переходим к третьей. В принципе это строчка ничем особым не
отделяется от других подобных, только у нее задан свой параметр <code style=""color:blue"><span"
style='font-size:10.0pt;font-family:"Courier New"'>bgcolor</span></code>,
поэтому эта ячейка имеет свой собственный фон.</p>

<p>А вот седьмая (<code style=""color:blue"><span" style='font-size:10.0pt;font-family:"Courier
New"'>&lt;td
colspan=&quot;2&quot; align=&quot;center&quot; valign=&quot;top&quot;&gt;Второй
строки&lt;/td&gt;</span></code>) строчка нашего с вами кода запутаннее и
интереснее. Что бы ячейка распространилась на две колонки, я использовал
параметр <code style=""color:blue"><span" style='font-size:10.0pt;font-family:"Courier
New"'>colspan=&quot;2</span></code>.
По умолчанию текст в ячейке располагается справа по центу, чтобы изменить это
я
ввел дополнительные параметры, уже известный нам <code style=""color:blue"><span"
style='font-size:
10.0pt;font-family:"Courier New"'>align</span></code> и еще пока не известный
<code style=""color:blue"><span"
style='font-size:10.0pt;font-family:"Courier New"'>valign</span></code>. Параметр
<code style=""color:blue"><span" style='font-size:10.0pt;font-family:"Courier New"'>valign</span></code>
задает расположение текста по вертикали и имеет следующие значения: <code style=""color:blue"><span"
style='font-size:10.0pt;font-family:"Courier New"'>top</span></code>(вверху),
<code style=""color:blue"><span"
style='font-size:10.0pt;font-family:"Courier New"'>middle</span></code>(по
середине), <code style=""color:blue"><span" style='font-size:10.0pt;font-family:"Courier
New"'>bottom</span></code>(снизу).</p>

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

</div><br><br>
        </font></td>
      </tr>
      <tr> 
        <td width="100%" colspan="3">
          <table width="100%" bgcolor="#A9BFD4" style=""font-size:85%"><tr><td>Copyright"
© 2003-****. <b><a href="http:\\webcod.h10.ru">webcod.h10.ru</a></b>;. Администратор
<a href="mailto:monas3@yandex.ru"><b>Ткачев Данила</b></a><br>
          Авторские права на всю информацию и графику принадлежат администрации

          сайта или авторам. При использовании или цитировании любого материала

          ссылка на сайт или автора обязательна.</A></td>
          </tr></table></td></tr>
    </table>
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное