Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий
Шрифт:
Интервал:
Закладка:
Листинг 3.3. Вставка гиперссылки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак, приступаем</h1>
Эта <a href="">страница</a> создана для примера<br>
</body>
В сформированном коде остается лишь ввести вручную адрес гиперссылки, являющийся значением атрибута href.
Чтобы вставить в документ изображение, нужно нажать на данной вкладке кнопку Рисунок, предварительно поместив курсор в то место программного кода, где должна находиться картинка. При нажатии кнопки в программный код добавляется соответствующий фрагмент (листинг 3.4).
Листинг 3.4. Вставка изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак, приступаем</h1>
Эта страница создана для примера<br>
<img src="" width="" height="" border="0">
</body>
В данном листинге остается лишь указать путь к файлу рисунка или просто имя этого рисунка (если он находится в том же каталоге, что и файл данной веб-страницы), а также задать при необходимости его дополнительные параметры. В листинге 3.5 представлен программный код, согласно которому на веб-странице будет отображаться рисунок с именем Образец.jpg размером 150x150 пикселей, и заключенный в рамку толщиной 10 пикселей.
Листинг 3.5. Вставка изображения с заданными параметрами
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак, приступаем</h1>
Эта страница создана для примера<br>
<img src="Образец.jpg" width="150" height="150" border="10">
</body>
Результат вставки изображения в соответствии с этим программным кодом представлен на рис. 4.23.
Рис. 4.23. Вставка изображения с заданными параметрами
Подобным образом можно вставлять в документ любые графические объекты, при необходимости корректируя в программном коде их размеры и наличие рамки.
Вставка объектов JavaScript
В программе реализована возможность работы с объектами JavaScript. Соответствующие инструменты расположены на вкладке JavaScript, содержимое которой представлено на рис. 4.24.
Рис. 4.24. Содержимое вкладки JavaScript
Принцип действия здесь примерно такой же, как и на остальных вкладках программы: после нажатия кнопки инструментальной панели в программный код веб-страницы добавляется соответствующий фрагмент, который при необходимости можно дополнить и конкретизировать. Вы можете вставлять следующие объекты JavaScript: код JavaScript, тело функции, название функции, текст и переменную. Например, после нажатия в инструментальной панели кнопки Вставка кода JavaScript в программный код добавляется фрагмент <script language="javascript"> </script>, после нажатия кнопки Вставка текста – фрагмент document.write("");, после нажатия кнопки Вставка переменной – фрагмент document.write();, и т. д.
Применение PHP-технологий в программе HtmlPad
Если начинающие веб-разработчики занимаются созданием и администрированием сайтов преимущественно с помощью языка HTML, то их более «продвинутые» коллеги вовсю используют более сложный и функциональный язык – РНР.
Характерной особенностью языка РНР является то, что он был создан и разработан специально для написания web-приложений (сценариев), исполняющихся на удаленном веб-сервере. Несомненное преимущество РНР по сравнению с тем же JavaScript состоит в том, что скрипты, написанные на языке РНР, выполняются на стороне удаленного сервера. Следовательно, их работоспособность и скорость исполнения не зависит от скоростных характеристик и прочих аппаратных особенностей компьютера, а также от используемого Интернет-обозревателя. Отметим, что зачастую посетители сайтов не могут определить, что они видят на экране – статичный HTML-код или динамичную информацию, полученную в результате выполнения РНР-скрипта.
В программе HtmlPad работа с РНР-технологиями ведется на трех вкладках: РНР, РНР/Файлы и РНР/FTP. Поскольку наша книга адресована в первую очередь начинающим веб-разработчикам, мы не будем подробно рассматривать порядок использования РНР-технологий, а расскажем лишь об общих принципах работы с ними в программе HtmlPad.
Первое, что нужно сделать, если вы намереваетесь интегрировать в программный код веб-страницы фрагмент PHP-кода – это нажать в инструментальной панели вкладки РНР кнопку Вставка куска кода РНР. В результате в программный код будет добавлен соответствующий фрагмент. В листинге 3.6 этот фрагмент находится после текстовой части контента.
Листинг 3.6. Вставка в программный код фрагмента, обозначающего код РНР
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак, приступаем</h1>
Эта страница создана для примера<br>
<?php
?>
</body>
Как видно в листинге, вставленный фрагмент представляет собой контейнер, внутри которого должен находиться собственно РНР-код. Этот код формируется по обычным правилам работы в программе HtmlPad: с помощью кнопок инструментальной панели в программный код добавляются соответствующие фрагменты, которые при необходимости нужно дополнить и конкретизировать (ввести функцию, указать исполняемый файл, и т.д.).
Возможности РНР предусматривают использование SQL-данных. Например, чтобы соединиться с хостом SQL, нужно в инструментальной панели нажать кнопку Соединение с хостом SQL. При этом в программный код веб-страницы будет добавлен соответствующий фрагмент (листинг 3.7).
Листинг 3.7. Настройка соединения с хостом SQL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак, приступаем</h1>
Эта страница создана для примера<br>
<?php
$link = mysql_connect("mysql_host", "mysql_login", "mysql_password") or die ("Нет соединения с хостом");
?>
</body>
Для выбора базы данных SQL следует добавить в код веб-страницы соответствующий фрагмент, для чего в инструментальной панели предназначена кнопка Выбор базы данных SQL. После ее нажатия программный код в нашем примере будет выглядеть так, как показано в листинге 3.8 (добавленный фрагмент начинается с новой строки).
Листинг 3.8. Настройка выбора базы данных SQL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак, приступаем</h1>
Эта страница создана для примера<br>
<?php
$link = mysql_connect("mysql_host", "mysql_login", "mysql_password") or die ("Нет соединения с хостом");
mysql_select_db ("my_database") or die ("Нет соединения с базой");
?>
</body>
Очевидно, что приведенные в листингах 3.7 и 3.8 РНР-коды необходимо дополнить (указать данные для доступа, и др.). Если соединение с хостом наладить по каким-то причинам не удалось, то пользователь получит информационное сообщение Нет соединения с хостом, а при отсутствии соединения с базой на экране отобразится сообщение Нет соединения с базой.
Чтобы настроить соединение с SQL-таблицей, нужно в инструментальной панели нажать кнопку Соединение с таблицей SQL. В результате в программный код будет добавлен соответствующий фрагмент (листинг 3.9).
Листинг 3.9. Настройка соединения с таблицей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак, приступаем</h1>
Эта страница создана для примера<br>
<?php
$link = mysql_connect("mysql_host", "mysql_login", "mysql_password") or die ("Нет соединения с хостом");
mysql_select_db ("my_database") or die ("Нет соединения с базой");
$query = "SELECT * FROM table";
$result = mysql_query ($query) or die ("Нет такой таблицы");
?>
</body>
Если соединение с таблицей установить не получится, то пользователь увидит на экране информационное сообщение Нет такой таблицы.
В процессе работы может возникать необходимость вывода таблицы базы данных на страницу. В программе HtmlPad реализована возможность автоматического формирования и вставки соответствующего кода. Для этого в инструментальной панели предназначена кнопка Вывод таблицы БД на страницу. Установим в нашем примере курсор на новую строку, и нажмем данную кнопку – в результате код страницы будет выглядеть так, как показано в листинге 3.10.
