Вставка гиперссылок и графических изображений

Выше мы уже неоднократно отмечали, что одним из главных элементов любой веб-страницы является гиперссылка. В программе HtmlPad процесс создания гиперссылок автоматизирован: для этого нужно на вкладке HTML/Текствоспользоваться кнопкой Ссылка на документ.

Чтобы вставить гиперссылку, нужно выделить слово или текстовый фрагмент, который будет являться ссылкой, и нажать кнопку Ссылка на документ. В листинге 3.3 показан фрагмент программного кода, когда перед нажатием данной кнопки был выделено слово страница.

Листинг 3.3. Вставка гиперссылки

Учимся работать в программе HtmlPad

Итак, приступаем

Эта страница создана для примера

В сформированном коде остается лишь ввести вручную адрес гиперссылки, являющийся значением атрибута href.

Чтобы вставить в документ изображение, нужно нажать на данной вкладке кнопку Рисунок, предварительно поместив курсор в то место программного кода, где должна находиться картинка. При нажатии кнопки в программный код добавляется соответствующий фрагмент (листинг 3.4).

Листинг 3.4. Вставка изображения

Учимся работать в программе HtmlPad

Итак, приступаем

Эта страница создана для примера

В данном листинге остается лишь указать путь к файлу рисунка или просто имя этого рисунка (если он находится в том же каталоге, что и файл данной веб-страницы), а также задать при необходимости его дополнительные параметры. В листинге 3.5 представлен программный код, согласно которому на веб-странице будет отображаться рисунок с именем Образец.jpgразмером 150x150 пикселей, и заключенный в рамку толщиной 10 пикселей.

Листинг 3.5. Вставка изображения с заданными параметрами

Учимся работать в программе HtmlPad

Итак, приступаем

Эта страница создана для примера

Результат вставки изображения в соответствии с этим программным кодом представлен на рис. 4.23.

Рис. 4.24. Содержимое вкладки JavaScript

Принцип действия здесь примерно такой же, как и на остальных вкладках программы: после нажатия кнопки инструментальной панели в программный код веб-страницы добавляется соответствующий фрагмент, который при необходимости можно дополнить и конкретизировать. Вы можете вставлять следующие объекты JavaScript: код JavaScript, тело функции, название функции, текст и переменную. Например, после нажатия в инструментальной панели кнопки Вставка кода JavaScriptв программный код добавляется фрагмент , после нажатия кнопки Вставка текста– фрагмент document.write("");, после нажатия кнопки Вставка переменной– фрагмент document.write();, и т. д.

Если начинающие веб-разработчики занимаются созданием и администрированием сайтов преимущественно с помощью языка HTML, то их более «продвинутые» коллеги вовсю используют более сложный и функциональный язык – РНР.

Характерной особенностью языка РНР является то, что он был создан и разработан специально для написания web-приложений (сценариев), исполняющихся на удаленном веб-сервере. Несомненное преимущество РНР по сравнению с тем же JavaScript состоит в том, что скрипты, написанные на языке РНР, выполняются на стороне удаленного сервера. Следовательно, их работоспособность и скорость исполнения не зависит от скоростных характеристик и прочих аппаратных особенностей компьютера, а также от используемого Интернет-обозревателя. Отметим, что зачастую посетители сайтов не могут определить, что они видят на экране – статичный HTML-код или динамичную информацию, полученную в результате выполнения РНР-скрипта.

В программе HtmlPad работа с РНР-технологиями ведется на трех вкладках: РНР, РНР/Файлыи РНР/FTP. Поскольку наша книга адресована в первую очередь начинающим веб-разработчикам, мы не будем подробно рассматривать порядок использования РНР-технологий, а расскажем лишь об общих принципах работы с ними в программе HtmlPad.

Первое, что нужно сделать, если вы намереваетесь интегрировать в программный код веб-страницы фрагмент PHP-кода – это нажать в инструментальной панели вкладки РНР кнопку Вставка куска кода РНР. В результате в программный код будет добавлен соответствующий фрагмент. В листинге 3.6 этот фрагмент находится после текстовой части контента.

Листинг 3.6. Вставка в программный код фрагмента, обозначающего код РНР

Итак, приступаем

Эта страница создана для примера

Как видно в листинге, вставленный фрагмент представляет собой контейнер, внутри которого должен находиться собственно РНР-код. Этот код формируется по обычным правилам работы в программе HtmlPad: с помощью кнопок инструментальной панели в программный код добавляются соответствующие фрагменты, которые при необходимости нужно дополнить и конкретизировать (ввести функцию, указать исполняемый файл, и т.д.).

Возможности РНР предусматривают использование SQL-данных. Например, чтобы соединиться с хостом SQL, нужно в инструментальной панели нажать кнопку Соединение с хостом SQL. При этом в программный код веб-страницы будет добавлен соответствующий фрагмент (листинг 3.7).

Листинг 3.7. Настройка соединения с хостом SQL

Итак, приступаем

Эта страница создана для примера

Для выбора базы данных SQL следует добавить в код веб-страницы соответствующий фрагмент, для чего в инструментальной панели предназначена кнопка Выбор базы данных SQL. После ее нажатия программный код в нашем примере будет выглядеть так, как показано в листинге 3.8 (добавленный фрагмент начинается с новой строки).

Листинг 3.8. Настройка выбора базы данных SQL

Итак, приступаем

Эта страница создана для примера

Очевидно, что приведенные в листингах 3.7 и 3.8 РНР-коды необходимо дополнить (указать данные для доступа, и др.). Если соединение с хостом наладить по каким-то причинам не удалось, то пользователь получит информационное сообщение Нет соединения с хостом, а при отсутствии соединения с базой на экране отобразится сообщение Нет соединения с базой.

Чтобы настроить соединение с SQL-таблицей, нужно в инструментальной панели нажать кнопку Соединение с таблицей SQL. В результате в программный код будет добавлен соответствующий фрагмент (листинг 3.9).

Листинг 3.9. Настройка соединения с таблицей

Итак, приступаем

Эта страница создана для примера

Если соединение с таблицей установить не получится, то пользователь увидит на экране информационное сообщение Нет такой таблицы.

В процессе работы может возникать необходимость вывода таблицы базы данных на страницу. В программе HtmlPad реализована возможность автоматического формирования и вставки соответствующего кода. Для этого в инструментальной панели предназначена кнопка Вывод таблицы БД на страницу. Установим в нашем примере курсор на новую строку, и нажмем данную кнопку – в результате код страницы будет выглядеть так, как показано в листинге 3.10.