Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Шрифт:
Листинг 4.12. Предварительная настройка таблицы
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br>
<table cellspacing="3" cellpadding="3">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
Полученные
</body>
</html>
Как видно в данном листинге, код таблицы требует доработки. Несмотря на то, что реализованный в программе механизм автоматического формирования таблицы очень удобен и прост, в нем есть один недостаток: не предусмотрено создание табличных рамок. Поэтому если вы хотите, чтобы содержимое таблицы не просто было представлено в столбцах и строках, но и была изображена сама таблица – нужно добавить соответствующей тег.
Как мы уже знаем, рамки таблицы задаются с помощью тега border. Следовательно, доработаем код нашей таблицы так, как показано в листинге 4.13.
Листинг 4.13. Начальный фрагмент табличного кода с добавленным тегом border
<table cellspacing="3" cellpadding="3" border="2">
В результате внесенных изменений наша таблица будет иметь рамку толщиной 2 пикселя.
Теперь нам нужно заполнить ячейки таблицы содержимым. Наша таблица содержит три строки и четыре столбца, соответственно – двенадцать ячеек. В эти ячейки мы внесем названия месяцев года. В результате исходный код нашей веб-страницы будет выглядеть так, как показано в листинге 4.14.
Листинг 4.14. Вставка таблицы на страницу
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br>
<table cellspacing="3" cellpadding="3" border="2">
<tr>
<td>
Январь
</td>
<td>
Февраль
</td>
<td>
Март
</td>
<td>
Апрель
</td>
</tr>
<tr>
<td>
Май
</td>
<td>
Июнь
</td>
<td>
Июль
</td>
<td>
Август
</td>
</tr>
<tr>
<td>
Сентябрь
</td>
<td>
Октябрь
</td>
<td>
Ноябрь
</td>
<td>
Декабрь
</td>
</tr>
</table>
Полученные
знания применим на практике.</body>
</html>
Теперь сохраним выполненные изменения и посмотрим, как выглядит страница в окне Интернет-обозревателя (рис. 5.37).
Рис. 5.37. Веб-страница с таблицей
Как видно на рисунке, мы получили таблицу из трех строк и четырех столбцов, обрамленную рамкой.
Создание форм и инструментов для ввода и отправки данных
С помощью программы NeonHtml вы можете создавать формы для отправки данных, и включать в них переключатели, флажки, кнопки и иные инструменты. Необходимые для этого действия выполняются на вкладке Форма, содержимое которой представлено на рис. 5.38.
Рис. 5.38. Вкладка Форма
Для примера создадим небольшую форму, которая будет включать в себя текстовое поле, поле выбора файла, флажок, а также кнопки отправки данных и очистки формы.
Напомним, что в первую очередь необходимо создать саму форму – в противном случае добавление флажков, кнопок и иных инструментов не будет иметь никакого смысла. Вставлять форму мы будем между двумя последними фразами веб-страницы, с которой работали и в предыдущих разделах. Чтобы добавить форму, нажмем на вкладке Форма кнопку с таким же названием (она является первой слева) – в результате на экране отобразится окно создания формы, изображенное на рис. 5.39.
Рис. 5.39. Создание формы
В данном окне в поле Адрес отправления данных необходимо указать, по какому адресу будут отправляться данные после заполнения всех параметров формы и нажатия в ней кнопки Отправить (или другой кнопки, предназначенной для отправки данных). Чтобы заполнить данное поле, нужно нажать расположенную справа от него кнопку и в открывшемся окне указать требуемый путь.
В поле Имя формы можно с клавиатуры ввести произвольное имя формы. Если внизу окна установить флажок Поддерживать отправление файлов, то в форме будет реализован механизм, позволяющий отправлять файлы.
Завершается процесс создания формы нажатием в данном окне кнопки ОК. В листинге 4.15 показан программный код веб-страницы после вставки в него формы в соответствии с настройками, представленными на рис. 5.39.
Листинг 4.15. Вставка формы в веб-документ
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>