Создай сайт своими силами! Глава 3 (inet.webbuild.sozdaisait) : Рассылка : Subscribe.Ru

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

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

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

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

Ноябрь 2009 →
	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

Автор

Александр

Статистика

524 подписчиков
-2 за неделю

← Все выпуски →

Создай сайт своими силами! Глава 3

Глава 3. ОСНОВЫ HTML, СОЗДАНИЕ ГЛАВНОЙ СТРАНИЦЫ САЙТА

3.1. НАЧИНАЕМ СОЗДАВАТЬ ГЛАВНУЮ СТРАНИЦУ САЙТА

Прежде чем приступить к строительству нашего сайта и изучению РНР, немного повторим основы языка HTML (повторим вкратце, поскольку, я надеюсь, вы язык HTML хоть немного знаете). Это будет несложно. В этой главе мы рассмотрим только основные понятия HTML и РНР. В последующих главах, по мере надобности, мы рассмотрим множество других возможностей данных языков в сайтостроении. Для начала в PHP-редакторе создайте новый РНР-документ, как написано в конце предыдущей главы. Самая верхняя строка (то, что заключено между знаками «<» и «>»):
<!doctype html public "-//W3C//DTD HTML 4.0//EN"> - объявляет формат и тип содержимого документа. Он указывает на тип документа, соответствующий стандарту HTML 4.0 и ориентированный на англоязычные документы. Вообще современные WEB-браузеры обходятся без этого тега, поэтому мы и не будем заострять на нем внимание.
Парный тег в начале <html> и </html> в конце документа указывает, собственно, на начало и конец данного HTML-документа. Объяснения здесь излишни.
Далее идет парный тег заголовка документа <head> и </head>. Между ними мы видим другой парный тег <title> и </title>. Текст, написанный между этой парой, будет отображаться в заголовке окна браузера, при загрузке данного документа. Это может быть, например, название вашей WEB-страницы.
В парном теге <body> и </body> отображается основная часть или тело документа. Это могут быть созданные вами текст, картинки, кнопки, баннеры и т. д.. Теги <?php и ?>, между которыми заключается РНР-код, разберем позже. Уберем их пока из документа, чтобы они нам не мешали .
Сохраним документ под названием index.php. Обратите внимание, чтобы этот файл имел расширение именно php, поскольку потом мы будем вставлять сюда РНР-код (по умолчанию, редактором будет предложено сохранить файл с расширением html). РНР-код нам здесь потом понадобится для создания счетчика посещаемости на этой странице. Если вы сохраните этот файл с расширением html, то использовать в этом документе РНР-код будет уже нельзя!

Запомните правило размещения одних тегов внутри других: Тег, который открывается раньше других, закрывается позже других. В нашем случае сначала открывается тег <h2>, а затем </>. После текста нужно закрыть сначала тег <//>, а потом </h2>. To есть тег </> открылся внутри <И2>, следовательно, и закрываться <//> должен внутри </hT>.

3.2. КОНТЕЙНЕР МЕЖДУ <DIV> И </DIV>
Теги <div> и </div> используются для выделения какого-либо раздела, который можно разместить в любом месте страницы. Разместим, например, между ними текст (листинг 3.1):
«Это учебный сайт. Он позволит быстро и наглядно изучить основные принципы программирования на РНР. Вы научитесь составлять скрипты для сайта любой сложности. Эти скрипты помогут вам автоматизировать добавление разнообразного материала на ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение посетителей о вашем сайте при помощи гостевой книги или системы оценки материалов».
Сохранив страницу и запустив браузер, вы увидите там набранный текст. Он будет располагаться ниже фразы «Добро пожаловать на мой сайт» и занимать всю ширину браузера.
Листинг 3.1 (файл index.php) <html> <head>
<Ш1е>Главная страница</1Ше> </head>
<body bgcolor="silver">
<h2 align="CENTER"><I^o6po пожаловать на мой сайт</1></Ь2> <div>3T0 учебный сайт. Он позволит быстро и наглядно изучить основные принципы программирования на РНР. Вы научитесь составлять скрипты для сайта любой сложности. Эти скрипты помогут вам автоматизировать добавление разнообразного материала на ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение посетителей о вашем сайте при помощи гостевой книги или системы оценки материалов<М1у> </body> </html>
Давайте теперь сделаем так, чтобы контейнер <div> занимал бы не более 25 % окна браузера, а текст был бы выровнен по всей ширине этого контейнера. Здесь нам помогут листы стилей.

3.3. ЛИСТЫ СТИЛЕЙ
С помощью листов стилей можно форматировать текст, определять его шрифт, цвет, размер и многое другое. Задается стиль с помощью ключевого слова style. Для какого-либо отдельного элемента стиль определяется так:
style- "свойство: значение; свойство .значение; ...свойство: значение".
Style имеет свойства и значения этих свойств. Рассмотрим некоторые из этих свойств:
color определяет цвет текста, а его значения - названия этих цветов или их шестнадцатеричные коды. Свойство от значения отделяется двоеточием (color.yellow или color:#ffffDO). Пары свойства .значение отделяются друг от друга точкой с запятой;
font-size задает размер шрифта, например font-size: 12pt задает шрифт размером в 12 питов;
font-family задает название шрифта, например font-family:serif
font-style задает вид шрифта, например font-style:italic задает наклонный шрифт, 'di font-style:bold- жирный шрифт;
background задает цвет фона, на котором будет находиться текст или другой объект. Например, background: peachpuffзадает светло-оранжевый цвет фона элемента;
width задает ширину текста. Ее можно задать как в единицах длины, гак и в процентах от общей ширины браузера, например width:50%;
text-align задает выравнивание текста, например text-align:left выравнивает текст по левому краю, text-align:right - по правому краю, text-align:justify -по ширине.
Другие свойства будут рассмотрены далее, в процессе строения сайта. Зададим стиль для текста в контейнере <div>, как показано в листинге 3.2.
Листинг 3.2 (файл index.php) <html> <head>
<Ш1е>Главная страница</Ш1е> </head>
<body bgcolor="silver">
<h2 align=MCENTER"xI>Ao6po пожаловать на мой сайт</[></п2> <div style=""coIor:red;" font-family:Comic Sans MS; width:25%; font-size: 14pt; text-align:justify ">

Это учебный сайт. Он позволит быстро и наглядно изучить
основные принципы программирования на РНР. Вы научитесь
составлять скрипты для сайта любой сложности. Эти скрипты
помогут вам автоматизировать добавление разнообразного материала на
ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение посетителей
о вашем сайте при помощи гостевой книги или системы оценки материалов
</div>
</body>
</html>
Сохраните страницу и запустите браузер. Набранный текст отображен в виде столбика (контейнера) слева, занимающего 25 % от общей ширины браузера, так как мы задали свойству width значение 25 %. Цвет текста (свойство color) задан красным, размер шрифта 14pt, название шрифта задано Comic Sans MS. Если вы предпочитаете другой шрифт, например стандартный Times New Roman, то можете установить его. Свойству text-align (выравнивание текста) я присвоил одно из значений justify (выравнивание по ширине). Если вы поставите другое значение, например left, то текст будет выровнен по левому краю.
Теперь представьте, что у нас несколько текстовых разделов, каждый из которых заключен между парными тегами <div> и </div>. Причем формат, размер, цвет текста мы хотим оставить такими же. Нам нужно будет каждый раз расписывать стиль для каждого тега. Чтобы этого не делать, применим специальный контейнер или парный тег <style>. Он вставляется в заголовочную часть документа, например после закрывающего тега </title>, но до закрывающего тега </head>. Посмотрите на листинг 3.3.
Листинг 3.3 (файл index.php) <html> <head>
<Ш1е>Главная страница</Ш1е> <style type="text/css">
div {color:red; font-famiIy:Comic Sans MS; font-size: 14pt; text-align:justify}
body {background:silver}
</style> </head>
<body>
<h2 align="CENTERM><I>4o6po пожаловать на мой сайт</1></п2>
<div style=""width:25%">"
Это учебный сайт. Он позволит быстро и наглядно изучить основные принципы программирования на РНР. Вы научитесь составлять скрипты для сайта любой сложности. Эти скрипты

помогут вам автоматизировать добавление разнообразного материала на ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение посетителей о вашем сайте при помощи гостевой книги или системы оценки материалов </div>
</body> </html>
В теге <style type= "text/ess "> значение text/ess атрибута type сообщает браузеру, что применяется текст на языке CSS. CSS - набор правил, которые задают форматирование документа. Далее дается указание браузеру, что все элементы <div> должны оформляться так, как указано в фигурных скобках. Как вы заметили далее, в основной части документа (после тега <body>). в теге <div style-"width: 2 5%"> в элементе style мы уже не указываем многих свойств, как в листинге 3.2, так как эти свойства уже указаны в головной части документа, в контейнере <style> </style>. Ширину же контейнера <div> задаем индивидуально - width:25%, хотя, если вы хстите, чтобы все текстовые разделы в контейнерах <div> имели ширину в 25 % от ширины браузера, то и это свойство элемента style можно перенести в фигурную скобку.
Также мы указали браузеру, что для элемента <body> фоновый цвет документа silver. Обратите внимание, что задний фон в этом случае определяет свойство background.
Наш сайт будет состоять из многих страниц. Ecjh вы хотите, чтобы вес страницы сайта были оформлены однотипно, то удобнее установить стиль сразу для всех страниц, т. с. создать один внешний файл листа стилей. В папке, где у вас находится наша главная страница index.php, создайте текстовый файл и вставьте в него строки:
div {color.red; font-family.Comic Sans MS; font-size: 14pt; text-align:justify} body {background:silver}
Мы записали то, что находится у нас между тегами <style type= "text/ess"> и </style> (листинг 3.3). Сохраните этот файл как stil.css. Расширение ess показывает, что созданный файл является именно файлом внешнего листа стилей. Теперь удалите из кода страницы index.php (листинг 3.3) контейнер <style Jype="text/css">...</style> и все, что в нем находится. Вместо этого запишите <link type= "text/ess" rel="stylesheet" href="stil.css">, и теперь у вас код будет выглядеть так, как в листинге 3.4.
Листинг 3.4 (файл index.php) <html>

<head> <тМе>Главная страница</Ш1е>
<link type="text/cssM гег^" stylesheet" href="stil.css">

</head>

<body>
<h2 align=MCENTER"xI>Ao6po пожаловать на мой сайт</1х/п2>
<div style="Mwidth:25%M>"

Это учебный сайт. Он позволит быстро и наглядно изучить
основные принципы программирования на РНР. Вы научитесь
составлять скрипты для сайта любой сложности. Эти скрипты
помогут вам автоматизировать добавление разнообразного материала
на ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение
посетителей о вашем сайте при помощи гостевой книги или системы оценки материалов
</div>
</body> </html>
При помощи одиночного тега <Ппк> внешний лист стилей (файл stil.css) подключается к нашему файлу index.php. Указанные атрибуты этого тега являются обязательными:
type= "text/ess " - указываем браузеру, что применяем текст формата CSS.
href="stil.css" - путь к файлу внешнего листа стилей. У нас этот файл находится в том же каталоге hdocs, что и index.php. Если каталог другой (например, вы решили сохранить лист стилей в подкаталоге stili каталога hdocs), то необходимо его указать (href="stili/stil.css").
rel=''stylesheet" - указываем браузеру, что элемент <Нпк> устанавливает связь с внешним листом стилей.
Теперь мы можем применить внешний лист стилей stil.css к любому числу страниц сайта. Достаточно в головную часть каждой страницы (между тегами <head> и </head>) вставить указанную выше строку: <link type-"text/ess" rel= "stylesheet" href= "stil. ess ">.
Несмотря на то, что мы подключили внешний файл стилей, для каждого элемента (тега для оформления текста) на странице index.php (да и на других страницах сайта) можнэ установить свой индивидуальный стиль. Если мы в основной части документа (после тега <hody>) в тег <div style=""width:25%">" добавим, например, цвет yellow (<div style=""width:25%;" color :yellow">), то текст станет желтым. Это несмотря на то, что во внешнем листе стилей stil.css цвет текста в теге <div> указан красным. Мы как бы «перебили» красный цвет желтым. Для каждого элемента, если это необходимо, можно задать свой индивидуальный стиль.
Итак, слева мы разместили текст, занимающий 25 % ширины браузера. Далее на 50% ширины разместим картинку, а на остальных 25 % будут располагаться ссылки на другие страницы нашего сайта.

3.4. ВСТАВКА КАРТИНКИ
Вставка картинки в документ осуществляется при помощи одиночного тега <img>. Скопируйте в папку, с которой мы работаем (в папку htdocs, где находится главная страница сайта index.php), какую-нибудь картинку с вашего компьютера. Я, например, скопировал в рабочую папку файл salut.gif, где изображен салют. Далее в коде после закрывающего тега </div>, но до закрывающегося тега </body> вставим строчку:
<img src= "salut.gif width= "50%">.
В данном теге мы указываем при помощи обязательного атрибута sre название файла вставляемой картинки, а при помощи необязательного атрибута width указываем ширину картинки. Она должна занимать 50 % ширины браузера. Сохраним страницу и запустим браузер. Наша картинка расположилась внизу, после колонки с текстом. Но нам нужно, чтобы изображение находилось на уровне текстового блока. Сам текстовый блок желательно было бы расположить справа от изображения, а не слева. Слева от картинки на оставшиеся 25 % окна браузера можно было бы расположить наши ссылки на другие страницы, которые мы создадим потом. Как это сделать? Здесь нам поможет таблица.
3.5. ВСТАВКА ТАБЛИЦЫ
Любая таблица в HTML начинается тегом <table> и заканчивается </table>. Внутри этих тегов располагаются парные теги, формирующие строки и столбцы. После откравающего тега <table> следует парный тег <tr>...</tr>, формирующий строку таблицы. Внутри этих тегов могут располагаться парные теги <td>...</td>, формирующие ячейки в данной строке. Вот, собственно, вся теория.. Например, код для таблицы с двумя строками и двумя столбцами (всего 4 ячейки) будет такой:
<table> - начало таблицы;
<tr><td>Содержимое первой ячейки<^> - начинаем первую строку и вставляем туда первую ячейку;
<td>Содержимое второй ячейки</td></tr> - вставляем вторую ячейку и заканчиваем первую строку;
<tr><td>Содержимое третьей ячейки<№> - начинаем вторую строку и вставляем туда третью ячейку;
<td>Содержимое четвертой ячейки<М><Нг> - вставляем четвертую ячейку и заканчиваем вторую строку;
</table> - окончание таблицы.

<tdwidth="25%">
<div>
Это учебный сайт. Он позволит быстро и наглядно изучить
основные принципы программирования на РНР. Вы научитесь
составлять скрипты для сайта любой сложности. Эти скрипты
помогут вам автоматизировать добавление разнообразного материала
на ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение
посетителей о вашем сайте при помощи гостевой книги или системы оценки материалов
</div></td>
</tr></table>
</body>
</html>
Разберем некоторые строчки кода:
<table width-" 100%"><tr> - мы задаем таблицу без рамок, общей шириной в 100 %, т. е. она будет занимать всю ширину браузера. Далее тег <tr> указывает на начало строки таблицы;
<td width="25%"></td> - создаем внутри строки первую левую ячейку таблицы шириной в 25 %. Эта ячейка пока пуста (между тегами <td> и </td> ничего нет). Здесь мы потом разместим ссылки в виде кнопок на другие страницы;
<td width="50%" valign="top">
<img src="salut.gif ></td> - создаем вторую ячейку <td>, шириной в 50 % от общей ширины браузера. Атрибут valign задает выравнивание картинки в ячейке по высоте. Этому атрибуту присвоено значение top, т. е. картинка выравнивается по верхней границе данной ячейки. Внутрь ячейки помещаем нашу картинку и закрываем тег этой ячейки </td>\
<tdwidth="25%">
<div>
Это учебный сайт. Он позволит быстро и наглядно изучить основные принципы программирования на РНР. Вы научитесь составлять скрипты для сайта любой сложности. Эти скрипты помогут вам автоматизировать добавление разнообразного материала на ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение посетителей о вашем сайте при помощи гостевой книги или системы оценки материалов<Шу><^>
</tr></table> - задаем третью, правую ячейку, шириной в 25 % от ширины окна браузера. Помещаем туда контейнер <div>...</div> вместе с текстом. Далее закрываем ячейку </td>, закрываем пока единственную строку этой таблицы </tr>, закрываем тег самой таблицы </table>.

Простая ссылка создается следующим образом: <А href= "адрес страницы, куда переходим">текст ссылки</А>
<А> - элемент привязки, который отображает текст ссылки на экране и указывает браузеру, на какую страницу необходимо перейти. При щелчке по тексту ссылки происходит переход на страницу, указанную в атрибуте href. В качестве текста ссылки может быть краткая информация о странице, на которую мы переходим.
Создадим 6 ссылок на шесть страниц нашего сайта. Соответственно, у нас в левой ячейке таблицы появятся названия этих шести ссылок. Назовем их следующим образом:
∙   новости сайта,
∙   гостевая книга,
∙   музыка, фото,
∙   статьи, магазин:
<А href="novosti/newl.php">Новости сайта</А>
<А href="gostevaja/gostevl.php"> Г остевая книга</А>
<А href= "muzic/muzic.php">Музыка</А >
<А href- "risynki/kartinki.php "> Фото </А >
<А href="statji.php">Статьи </А>
<А href="magazin/magazin.php">Магазин </А>
Пока наш сайт состоит только из одной страницы index.php, с которой мы сейчас и работаем. Других страниц пока нет, поэтому, естественно, ссылки срабатывать не будут. Шаг за шагом мы будем создавать эти шесть страниц. В конце концов, мы создадим полноценный сайт со множеством страниц, число которых может быть и тысячу, но они благодаря скриптам на РНР на тех шести страницах будут уже создаваться автоматически, без вашего участия. Но об этом позже. Итак, вставим приведенные выше ссылки в наш код. Вставить их надо в пустую первую ячейку таблицы после тега <tr> между тегами <td width="25%"> и </td> (см. листинг 3.5 выше).
В листинге 3.6 приведен код с уже вставленными ссылками.
Листинг 3.6 <html> <head>
<Ш1е>Главная страница</Ш1е> <link type="text/css" rel="stylesheet" href="stil.css"> </head> <body>
<h2 align="CENTER"xI>4o6po пожаловать на мой сайт</1х/п2> <table width="100%"xtr>

<td width="25%" valign='*top">
<A href="novosti/newl.php">Новости сайта</A href>
<A href="gostevaja/gostevl.php">Гостевая книга</A href>
<A href="muzic/muzic.php ">Музыка</A href>
<A href="risynki/kartinki.php">OoTO </A href>
<A href="statji/statji.php">Статьи </AA href>
<A href="magazin/magazin.php">]VIara3HH </A>
</td>
<td width="50%" valign="top">
<img src="salut.gif *><^>
<tdwidth="25%">
<div>
Это учебный сайт. Он позволит быстро и наглядно изучить
основные принципы программирования на РНР. Вы научитесь
составлять скрипты для сайта любой сложности. Эти скрипты
помогут вам автоматизировать добавление разнообразного материала
на ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение
посетителей о вашем сайте при помощи гостевой книги или системы оценки материалов
</div></td>
</trx/table>
</body>
</html>
Перед ссылками, в теге <td width="25%" valign="top"> мы используем уже знакомый нам атрибут valign со значением top, т. е. выравниваем блок ссылок по верхнему краю таблицы. После каждой ссылки (после закрывающего тега </А>) ставим 2 одиночных тега <br>. Этот тег означает пропуск строки, т. е. мы делаем расстояние по вертикали между ссылками в две строки. Вообще это дело вкуса. Можно поставить после каждой ссылки и 5 тегов <br>, увеличив еще больше расстояние между ними.
Сохраните страницу и запустите браузер. В левой части окна браузера появятся ваши 6 ссылок. При нажатии на любую из них, появится сообщение, что невозможно найти страницу, поскольку эти страницы мы еще не создали.
Если вас не устраивает формат текста ссылок, то вы можете его изменить. Откройте созданный нами раньше внешний файл таблиц стилей stilcss. У нас там пока две строчки. Их трогать не нужно. Запишите внизу следующие строчки:
A {font-family:Comic Sans MS; font-size: 14pt; colonblack}
A:active{color:yellow}
A:hover{color:red}

Автор Строганов А. С.

В избранное