Уроки_по_созданию

Как создать страницу HTML
Откройте программу "блокнот", скопируйте или перепишите код красного цвета, для более успешного запоминания, лучше заполнять код вручную. Заполняйте очень внимательно,важен каждый знак, каждая запятая,каждая ковычка, иначе может не получиться. В меню файл нажмите "Сохранить как..", в открывшемся окне дайте имя файлу, например: primer.html и нажмите "сохранить". Код можно писать как заглавными, так и маленькими буквами.
<HTML>
<HEAD>
<TITLE>Наша пробная страница</TITLE>
</HEAD>
<BODY BGCOLOR="#CCCCFF">Наша пробная страница </BODY>
</HTML>
Этим кодом мы создали страницу сайта. Сайты создаются с помощью тегов. Открывает и закрывает страницу теги <HTML>и </HTML>, они ставятся в начале и конце страницы. Затем идут теги <HEAD> и </HEAD>,это служебные теги,между ними пишутся команды для браузера.Например теги <TITLE> и </TITLE>, все что написано межу этими тегами будет отображаться при открытии страницы в самом верху браузера. Между тегами <BODY> и </BODY> помещается все содержимое страницы сайта, таблицы, тексты,картинки, в общем все из чего состоит сайт.
Цвет страницы прописывается в теге <BODY> атрибутом bgcolor="#CCCCFF". В ковычках обозначается код цвета, может быть любым, на Ваше усмотрение. Таблицу со цветовой гаммой,а также картинки,которые мы будем применять для нашего сайта, можете скачать ЗДЕСЬ <http://www.beluys.com/yrok.rar>
Созданная нами страница выглядит ТАК <http://www.beluys.com/primer/primer.html> Теперь можно форматировать страницу, заполнять ее текстом, менять цвет. Так же фоном страницы можно сделать картинку. Для этого в теге <BODY> вместо атрибута BGCOLOR, применим атрибутBACKGROUND="images/имя картинки". Код будет таким:
<HTML>
<HEAD>
<TITLE>Наша пробная страница</TITLE>
</HEAD>
<BODY BACKGROUND="images/texture1.gif" >Наша пробная страница </BODY>
</HTML>
Страница будет выглядеть ТАК <http://www.beluys.com/primer/primer1-1.html>
Построение таблиц
Для форматирования сайтов применяются таблицы.Таблицы оформляются тегами<TABLE> и </TABLE> Между ними теги <TR> и </TR>, а между тегами TR теги<TD> и </TD>. Между тегами <TD> и </TD>, помещается текст, вставляются картинки и все что будет видно на странице сайта.
Теги <TR> и </TR>, обозначают горизонтальную строку таблицы,а теги <TD> и</TD> - вертикальную колонку или ячейку.
Ниже показана строка таблицы, которая состоит из одной ячейки,в коде она будет располагаться так: <TR><TD>Строка из одной ячейки</TD></TR>
Строка из одной ячейки
Разделим эту строку на четыре ячейки и код будет таким:
1- ячейка 2- ячейка 3- ячейка 4- ячейка
<TR>
<TD>1- ячейка</TD>
<TD>2- ячейка</TD>
<TD>3- ячейка</TD>
<TD>4-ячейка</TD>
</TR>
Внутри тега <TABLE> прописываются атрибуты; BORDER, CELLPADDING, CELLSPACING. В коде это будет так:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
Рассмотрим значение этих атрибутов: BORDER - указывает будет ли рамка вокруг таблицы и ее размеры.
Если поставить BORDER=0, то таблица будет выгляветь так:
Если поставить BORDER=1, то таблица будет выгляветь так:
Рамки можно задать любой цвет, делается это значениемBORDERCOLOR="#CC6666", это будет выглядеть так:
CELLSPACING - указывает будет ли пространство между ячейками таблицы и размеры этого пространства, или ячейки будут плотно прилегать друг к другу.

Поставим CELLSPACING=0, будет так:
1- ячейка 2- ячейка 3- ячейка 4- ячейка
Поставим, допустим CELLSPACING=6, будет так:
1- ячейка 2- ячейка 3- ячейка 4- ячейка
CELLPADDING - указывает какой будет отступ от краев ячеек, для содержимого этих ячеек.
Если поставить CELLPADDING=0,текст в ячейках будет распологаться так:
1- ячейка 2- ячейка 3- ячейка 4- ячейка
Как видите, текст прижат к краям ячейки и слева и сверху.
Если поставим CELLPADDING=10 то будет так:
1- ячейка 2- ячейка 3- ячейка 4- ячейка
Таблице нужно указать размеры, ширину - WIDTH="" и высоту - HEIGHT="", а также цвет - BGCOLOR="#". Для каждой ячейки, можно задавать свой размер и цвет. Все эти значения прописываются внутри тега <TD>, так:
<TD width= 650 height=550 bgcolor="#00FFCC">
Вот общий вид кода для простейшей таблицы из 3 строк по одной ячейки в каждой.
<HTML>
<HEAD>
<TITLE>Изучение таблиц</TITLE>
</HEAD>
<BODY>

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>
<TD WIDTH=300 HEIGHT=80 BGCOLOR="#"></TD>
</TR>

<TR>
<TD WIDTH=300 HEIGHT=25 BGCOLOR="#"></TD>
</TR>

<TR>
<TD WIDTH=300 HEIGHT=250 BGCOLOR="#"></TD>
</TR>

</TABLE>

</BODY>
</HTML>
Попробуйте сами написать этот код,цвета проставте свои, размеры можете тоже проставить свои. А в следующем уроке, мы продолжим построение таблиц на конкретных примерах создания страниц сайта.