Ваш первый Сайт С использованием РНР-скриптов
НАЧИНАЕМ СОЗДАВАТЬ ГЛАВНУЮ СТРАНИЦУ САЙТА
Прежде чем приступить к строительству нашего сайта и изучению РНР, немного повторим основы языка HTML (повторим вкратце, поскольку, я надеюсь, вы язык HTML хоть немного знаете). Это будет несложно. В этой главе мы рассмотрим только основные понятия HTML и РНР. В последующих главах, по мере надобности, мы рассмотрим множество других возможностей данных языков в сайтостроении. Для начала в PHP-редакторе создайте новый PHP-документ, как написано в конце предыдущей главы. Самая верхняя строка (то, что заключено между знаками «<» и «>»):
<Idoctype html public "-//W3C//DTD HTML 4.0//EN"> - объявляет формат и тип содержимого документа. Он указывает на тип документа, соответствующий стандарту HTML 4.0 и ориентированный на англоязычные документы. Вообще современные WEB-браузеры обходятся без этого тега, поэтому мы и не будем заострять на нем внимание.
Парный тег в начале <html> и </html> в конце документа указывает, собственно, на начало и конец данного HTML-документа. Объяснения здесь излишни.
Далее идет парный тег заголовка документа <head> и </head>. Между ними мы видим другой парный тег <title> и </title>. Текст, написанный между этой парой, будет отображаться в заголовке окна браузера, при загрузке данного документа. Это может быть, например, название вашей WEB - страницы.
В парном теге <body> и </body> отображается основная часть или тело документа. Это могут быть созданные вами текст, картинки, кнопки, баннеры и т. д.. Теги <?php и?>, между которыми заключается PHP-код, разберем позже. Уберем их пока из документа, чтобы они нам не мешали (рис. 3.1).
|
21 |
Сохраним документ под названием index.php. Обратите внимание, чтобы этот файл имел расширение именно php, поскольку потом мы будем вставлять сюда PHP-код (по умолчанию, редактором будет предложено сохранить файл с расширением html). PHP-код нам здесь потом понадобится для создания счетчика посещаемости на этой странице. Если вы сохраните этот файл с расширением html, то использовать в этом документе РНР-Код будет уже нельзя!
|
T?* Svoi. NET : РНР Edit [Untitled!] * |
||
|
U Файл Редактор Вид Пуск Подсветка Закладки Вставка Помощь | Язык ЗФавсрсаеП*!®»! к |
Плагины |
$4 |
|
О UntiHedl " |
||
|
1 cldoctype html public "-//W3C//DTD HTML |
4.0/ /EW> |
|
|
2 <html> |
||
|
3 <head> |
||
|
4 <title>Untitled web-page</title> |
||
|
5 </head> |
||
|
Б <body> |
||
|
' 1 8 </body> |
||
|
9 </html> |
|
Рис. 3.1 |
Итак, перед нами «скелет» главной страницы нашего сайта. Теперь мы начнем шаг за шагом наращивать «мышечную массу» этой страницы.
Для начала напишите между тегами <Body> и </Bodv> фразу: Добро пожаловать на мой сайт. Запустите браузер (нажмите на изображение маленького зеленого треугольника с надписью РНР под основным меню редактора). В левом верхнем углу появится написанная вами фраза (рис. 3.2). Конечно, посетитель, зайдя на эту страницу, долго здесь не задержится, поскольку ничего привлекательного здесь еще нет. Поэтому в этой главе мы рассмотрим некоторые основные HTML-теги для украшения нашей главной страницы.
Svoi. NET : PHP Edit fC:Home_serverApache2htdocsMyBookindex. php] ]
Jg Файл Редактор Вид Пуск Подсветка Закладки Вставка Помощь ; Язык Плагины
. п¥1'ш ЙР 3- ^ ^ у у Jt u _ 3* Z Ь Ц -
Ф Q Address: jhKp//locai^......................................................... Q ^ ^ ^
Добро пожаловать на мой сайт
Рис. 3.2
Теги <Hl>...<И6> и, соответственно, закрывающие их теги </Hl>...</И6> Указывают на размер шрифта. Чем больше цифра после буквы /7, тем мельче шрифт. Теги могут содержать в себе дополнительные элементы или атрибуты с определенными значениями. Например, элемент Align указывает на расположение объекта на странице по горизонтали. Он может принимать значения: Center - по центру, Left - слева, Right - справа. В нашем случае объектом является написанный нами текст. Мы его можем заключить в теги, например, расположить его между <h2> и </И2>. а чтобы этот текст располагался по центру страницы, в теге <И2> укажем атрибут align со значением center, т. е.:
<И2 align="center"> Добро пожаловать на мой сайт</И2>.
Закрывающийся тег </H2> обязателен, гак как он указывает на то, что форматирование применено нами только к этому тексту. В теге <Body> можно тоже указывать атрибуты, но они будут применены ко всему документу, i. e. к тому, что будет располагаться между <body> и </body>. Значение элемента Bgcolor задает цвет фона. Например, запись <Body Bgcolor^"Silver"> Задает светло-серый фоновый цвет всего документа. Или можно записать так: <Body Bgcolor-"IkOcOcO ">. Здесь цвет указан в виде шестнадцатеричного кода.
В табл. 3.1 указаны основные цвета и их шесгнадцатеричный код. Вы можете установить любой цвет фона на ваш вкус. Вместо однотонного цвета, на задний фон можно поместить картинку. Делается это при помощи атрибута Background, значение которого - путь к данной картинке, например:
<body background= "fon. gif>.
В этом случае на заднем фоне страницы будет изображено содержимое файла Fon.Gif, который должен быть расположен в той же папке нашего сайта, где находится главная страница Index.Php (в корневой папке нашего сервера Htdocs). Если картинка расположена в другой папке, например в папке Image, Которая, естественно, должна быть вложена в главную папку сайта Htdocs, Го нужно записать так:
<body background= "image/fon. gif >.
Вообще использовать картинку в качестве фона нецелесообразно, так как некоторые web-посетители отключают загрузку картинок в браузере для экономии времени, и поэтому вместо картинки они увидят белый фон. В качестве фона страницы лучше все-таки задавать цвет.
|
Таблица 3.1
|
Между тегами <И2> и </H2> можно вложить теги, задающие начертания шрифта:
• <B>...</Ь> - текст будет полужирным;
• </>...<//> - текст будет задан курсивом;
• <U>...<U> - текст будет подчеркнут.
Я специально написал буквы в разных регистрах, так как не имеет значения, как вы напишите <Ь> или <В>. Результат будет один и тот же.
Итак, запишем в редакторе следующий код (рис. 3.3). Между тегами <Title> и </Title> пишем заголовок: «Главная страница». В теге <Body> задаем цвет фона Silver. Наш объект, т. е. текст «Добро пожаловать на мой сайт» Заключаем в тег <H2 Align="Center">, который задает размер шрифта текста и помещает его в центре страницы. Внутри тегов <И2> и </Ъ2> вставляем теги начертания шрифта, а именно, задающие курсивный текст </> и <//>.
|
Svoi. NET : РНР Edit - [C:Home__serverApache7htdocsMy6ookindex. php] 1 |
||
|
|Ц Файл Редактор Вид Пуск Подсветка Закладки Вставка Помощь Язык |
Плагины I |
|
|
„ J, u S S J* < 3 |
% |
A k П U] |
|
& index php. |
||
|
J. < idoctype html public "-/ /W3C//DTD HTML |
~T |
.0//EN"> |
|
Г <html> |
||
|
З <head> |
||
|
4 <title>r^aBHaH cTpaHmj, a</title> |
||
|
S </head> |
||
|
Ecbody bgcolor="silver"> |
||
|
<h2 align="CENTER"><1>Добро пожаловать |
На |
Ной сайте/ IX / h2> |
|
S </body> э </html> |
|
Рис. 3.3 |
Сохраните страницу нажатием на картинку, изображающую одиночную дискетку (которая побольше) под главным меню PHP-редактора. Запустите браузер (зеленый треугольник с надписью РНР под основным меню). Результат показан на рис. 3.4.
Svoi. NI I : РНР I tin | C:Hornc_serverMpache2htdocsWyBookindex. php]
Jj Файл Редактор Вид Пуск Подсветка Закладки Вставка Помощь Язьг Плагины
Ij Я я 0 J ti * * Г / у а % H К ч
^ Q Addiss»- ;Wtp.//localhosl/MvBook/indexphp ЈJ ф '$
Ш __
Рис. 3.4
Запомните правило размещения одних тегов внутри других: Тег, который открывается раньше других, закрывается позже других. В нашем случае сначала открывается тег <h2>, а затем </>. После текста нужно закрыть сначала тег <//>, а потом </h2>. То есть тег </> открылся внутри </?2>, следовательно, и закрываться <//> должен внутри </hZ>.
