Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Шрифт:
Для вставки комментария в инструментальной панели данной вкладки предназначена кнопка Комментарий HTML. При ее нажатии в программный код добавляется фрагмент <!–>, и комментарий следует писать после знака !. В листинге 3.2 показан код с комментарием относительно того, как мы учились вставлять дополнительные пробелы.
Листинг 3.2. Вставка комментариев
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак,
Эта страница создана для примера<br>
<! В предыдущей строке показано, как вставлять дополнительные пробелы>
</body>
Если вы сохраните изменения и просмотрите страницу в окне Интернет-обозревателя – вы увидите, что комментарии отображаться не будут.
Вставка гиперссылок и графических изображений
Выше мы уже неоднократно отмечали, что одним из главных элементов любой веб-страницы является гиперссылка. В программе HtmlPad процесс создания гиперссылок автоматизирован: для этого нужно на вкладке HTML/Текст воспользоваться кнопкой Ссылка на документ.
Чтобы вставить гиперссылку, нужно выделить слово или текстовый фрагмент, который будет являться ссылкой, и нажать кнопку Ссылка на документ. В листинге 3.3 показан фрагмент программного кода, когда перед нажатием данной кнопки был выделено слово страница.
Листинг 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-код или динамичную информацию, полученную в результате выполнения РНР-скрипта.