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

Учимся программировать на HTML

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

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

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

←   Июнь 2005   →
 1
 2
 3
 4
 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
Автор
Сергей

Статистика

2.157 подписчиков
-16 за неделю
←   Все выпуски   →

Учимся программировать на HTML СОЗДАЕМ СОБСТВЕННУЮ СТРАНИЧКУ


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

Доброго времени суток всем подписчикам!

---
Рассылка выходит при поддержке сайта www.twa.nm.ru, там же находятся выпуски рассылки которые можно посмотреть и прочитать, так же на сайте имеются готовые шаблоны и скрипты.
---

С этого выпуска по мы начнем создавать собственную страничку

 

Для начала нам понадобятся некоторые программы:

Cyщecтвyeт двa типa peдaктopoв:

WYSIWYG (What-You- See-Is What-You-Get Что-ты-видишь-то-и-получаешь)  и peдaктopы, paбoтaющиe нaпpямyю c HTML-кoдoм.
Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала вaм пoдoйдyт peдaктopы пepвoй гpyппы, нaпpимep:

Front Page, Word , притом последний лучше не использовать, так как он записывает в исходный код много мусора

Для тех кто хорошо знает HTML подойдут программы HTMLPad2000, Notepad, Bred2.

Мы для начала будем пользоваться Front Page (входит в комплект Office,лучше всего взять 2003 офис): думаю не стоит описывать назначение кнопок, описания есть в стандартном хелпе, отмечу лишь 4 закладки на мой взгляд наиболее интересные: располагаются они в нижней строке редактора:

конструктор  собственно окно в котором мы и будет творить ручками, а точнее мышками свой сайт

с разделением в нижней части располагается собственно тот же конструктор, а в верхней располагается код странички

код вся страничка отдана под отображение исходного кода странички

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

При запуске программы автоматически создается пустая страничка (чистый белый фон), она имеет исходный код:

<html>
<head>

<!--Следующая строчка - кодировка.-->

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>            ВАШ ЗАГОЛОВОК СТРАНИЦЫ       </title>
</head>
<body>
</body>
</html>

Как видим довольно скучно и пустынно )):

переходим на закладку код и набираем там такой код:

<font face="Verdana,Sans-serif" size="2" color="#000000">
<b>Название Вашего раздела</b><p>
Здесь Ваш текст.
<p>
 

добавляем этот текст сразу после <body>

собственно здесь мы вывели 2 предложения написанные разными стилями, один обычным другим жирным шрифтом (так же это можно было сделать в окне КОНСТРУКТОР, установив в нужное место курсор и напечатать нужное нам предложение, и отформатировать его как в Ворде, но это было бы слишком легко, правда?). команды форматирования я уже описывал в одной из рассылок, так что думаю редактирование текста проблем ни у кого  не создаст, но если что к этой теме можно будет вернуться.

Далее добавим к нашим надписям табличку, просто для примера:

<table border="1" width="100%" id="table1">
<tr>
<td>&nbsp;</td>
</tr>
</table>


вставляем в код после текста, например как тут, в коде вам попадутся строки <p>&nbsp;</p>, не пугайтесь, они означают перевод каретки а если по русски то появляются при нажатии на Enter и переходе на новую строку в РЕДАКТОРе :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница</title>
</head>
<body>
<font face="Verdana,Sans-serif" size="2" color="#000000">
<b>Название Вашего раздела</b><p>
Здесь Ваш текст.
<center>
<p>


<p>&nbsp;</p>
<p>&nbsp;</p>


<table border="1" width="100%" id="table1">
<tr>
<td>&nbsp;</td>
</tr>
</table>

</body>
</html>

В результате получим табличку с одной ячейкой.

Таблица начинается открывающимся тегом <TABLE> и завершается закрывающимся </TABLE>

<TABLE BORDER="2" WIDTH="200"
BGCOLOR="#00FF00">
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</TABLE>

Получиться таблица 2 на 2 ячейки зеленого цвета

где <TR> начало таблички (строка)

<TD> - ячейка в этой строке, </TD> - конец ячейки, между ними собственно код. количество строк <TD> ваш текст </TD> на ваше усмотрение, это влияет только на количество столбцов. чтобы получить вторую строку таблицы закрываем сначала первую - команда </TR>, и открываем новую - <TR>, и так до бесконечности, главное не забываете всегда закрывать Теги. Командой BGCOLOR="#00FF00" задаем цвет.

 Экспериментируйте смелее и тогда все получиться.

А теперь небольшой бонус, на мое предложение делиться интересными скриптами или примерами откликнулся за целую неделю только один человек, Светлана, она прислала симпатичную реализацию ответа на загадку, вот ее код:

<table style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma" cellSpacing="0" cellPadding="15" width="97%" bgColor="white" border="0" id="table1">
<tr>
<td style="border-left: 1px solid #006699; border-right: 1px solid #006699; border-bottom: 1px solid #006699" vAlign="top" align="middle" bgColor="#ffffd6">
&nbsp; <b><font color="red">&#1047;&#1072;&#1075;&#1072;&#1076;&#1082;&#1072;:</font> <font color="green">&#1044;&#1074;&#1072; &#1073;&#1088;&#1072;&#1090;&#1094;&#1072;
&#1095;&#1077;&#1088;&#1077;&#1079; &#1076;&#1086;&#1088;&#1086;&#1075;&#1091; &#1078;&#1080;&#1074;&#1091;&#1090;, &#1076;&#1088;&#1091;&#1075; &#1076;&#1088;&#1091;&#1078;&#1082;&#1091; &#1085;&#1077; &#1074;&#1080;&#1076;&#1103;&#1090;? </font>[<font color="#ffffd6">&#1075;&#1083;&#1072;&#1079;&#1072;</font>]</b></td>
</tr>
</table>
 

куда вставлять таблицу вы уже знаете, в результате мы получим табличку с загадкой внутри, и при двойном нажатии на квадратные скобки [ ] увидим правильный ответ.

Светлана, спасибо огромное за пример, интересно, можно будет применить и в своих сайтах.

На этом закончим, продолжим на следующей неделе, а я пошел отмечать праздники, всем пока пока, жду писем с интересными примерами.

Отдельное спасибо Маркину Александру, письма которого убедили меня в мыслях что надо начинать наконец то писать именно о создании сайта.

 

TWA admin™          вопросы и пожелания присылайте сюда, а интересные примеры сюда

Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора 		Подписан адрес:
Код этой рассылки: inet.webbuild.724990 		Отписаться
Вспомнить пароль
В избранное