Программы для создания веб-страниц и поиска

Переход по странице:
Краткое описание
Загрузка программ и таблиц стилей
Инструкции к программам
Разбор HTML-кода одной из страниц нашего сайта
Дополнительные полезные фрагменты HTML-кода

Здравствуйте. Предлагаемые программы написаны на языке PHP. Работоспособность программ создания HTML-кода проверена при PHP версии 5.4 (Open Server, локальный компьютер). Поисковая программа успешно функционирует на сайте.

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

Программы sozdanie.php и sozdanie2.php создают страницы (HTML-код) со следующей информацией:
Заголовок.
Рисунки (фотографии и любые другие).
Текст.
Таблица расписания. Может использоваться для собственного графика движения, для расписания движения транспорта и подобной информации.
Меню (набор гиперссылок, включённый через HTML-тег iframe).

…Итак, мы создали страницу с рисунками и тестом. Даже несколько страниц; каждая из них посвящена одному событию. Теперь захотелось сделать тематическую подборку из фотографий, находящихся на разных страницах.
Для этого предназначена следующая программа (sozd-tablica.php).
С её помощью создаём таблицу и вставляем нужную информацию из существующего (ранее созданного) HTML-документа.

Поисковая программа (poisk.php) предназначена для посетителей сайта. Её задачи – поиск и вывод информации из базы данных.

Отвечу на возможный вопрос. Нужно создать страницу без рисунков и таблиц (или вставить таковые позже). Можно ли это сделать с помощью предлагаемых программ?
Ответ. Да. Укажите нулевое количество рисунков и остановок в соответствующих полях программы. Впоследствии можно вставить таблицы и рисунки из других файлов.

Загрузка

Загрузить ВСЁ. Программы, таблица стилей для их оформления и рисунок для поиска (7 файлов. ZIP-архив)

Раздельная загрузка. В этом случае переименуйте файлы после загрузки. Должно быть sozdanie.php, sozdanie2.php, poisk.php и sozd-tablica.php

Создание страницы (фотографии + текст), 1-й вариант программы
Элементы будут располагаться на странице в следующей последовательности: заголовок – таблица с фотографиями – график и описание – меню.

Та же программа. 2-й вариант предполагает другую последовательность элементов: заголовок – описание – фотографии – меню.

Создание таблицы

Поисковая программа

file1.css (таблица стилей для оформления программ)

poisk.css (таблица стилей для оформления вашей поисковой программы)

poisk.jpg (рисунок для поисковой программы)

Помимо программ, предлагается 16 (шестнадцать) CSS-файлов

CSS – это внешняя таблица стилей. Набор параметров оформления документа: шрифты, цвета, свойства таблиц, рисунков и многое другое. Они же используются для оформления «Мира Дальних Дорог».

Загрузить все 16 таблиц стилей. ZIP-архив

Загрузить отдельные файлы. И – для чего предназначены разные таблицы стилей

Восемь файлов предназначено для походных страниц.

pohod1.css, pohod3.css
Таблица с фотографиями состоит из 2 столбцов. Заголовки тёмных цветов на белом фоне

pohod2.css, pohod4.css
Таблица с фотографиями имеет 3 столбца. Заголовок: тёмный на белом фоне

pohod5.css, pohod7.css
Таблица с фотографиями имеет 2 столбца. Заголовок: белый или светлый на тёмном фоне

pohod6.css, pohod8.css
Таблица с фотографиями: 3 столбца. Заголовки: светлые на тёмном фоне

Примеры, показывающие, как будет выглядеть страница при использовании разных таблиц стилей. Номер примера равен номеру CSS-файла.
Пример 1. Пример 2. Пример 3. Пример 4
Пример 5. Пример 6. Пример 7. Пример 8

Следующие таблицы стилей предназначены для «непоходных» страниц (интересные / крупные фотографии).
stranica1.css
stranica2.css
stranica3.css

И, разумеется, примеры:
Страница интересных фотографий – пример 1
Страница интересных фотографий – пример 2
Страница интересных фотографий – пример 3

Следующие файлы используются страницами других типов
stili.css. Файл, предназначенный для главной страницы «Мира Дальних Дорог»
d-razdely.css. Таблица стилей для «Других разделов сайта». Особенность: больше вариантов оформления текстовых гиперссылок

Обратите внимание. Следующие файлы предназначены для страниц без графических элементов (и параметров рисунков не содержат).
Если желаете использовать для страницы с рисунками – скопируйте блок img из другого файла.
spisok.css отвечает за оформление списков «Все походы и путешествия» и «Что добавлено и дополнено за последнее время».
poisk.css. Как следует из названия, файл предназначен для оформления страниц поисковой системы.
dlya-sozdaniya.css. Файл оформления для страницы, которую вы сейчас читаете.

Инструкции к программам

Предлагаемые программы рассчитаны на пользователей, обладающих (помимо общей компьютерной грамотности) хотя бы минимальным знанием HTML.

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

Создание страницы с рисунками, текстом и таблицами (sozdanie.php, sozdanie2.php)

Программа создаёт заготовку страницы для последующей творческой работы. Результат зависит не только от программы, но и от ваших действий; редактирование HTML-кода требует большего внимания, нежели работа с текстовым или графическим редактором.
Но «ручная» работа предоставляет наибольшие возможности для создания и оформления страниц. Составленный код полностью контролируется вами и не содержит ничего лишнего. И… ручное создание – возможность быть художником (если такое слово применимо к созданию веб-страниц).
В готовом файле указываются классы заголовка, таблицы, ячеек, рисунков. Поэтому рекомендуем использовать программу совместно с нашими CSS-файлами. Если какие-то параметры (например, ширина таблицы или стандартные размеры рисунка) отличаются, отредактируйте CSS- файл для себя.
В готовом HTML-коде не упоминается программа или наш сайт. Если понравилось – можете добавить ссылку на «Мир Дальних Дорог», но исключительно по вашему усмотрению.

Варианты использования программы
1) На вашем интернет-сайте. Полагаю, что PHP (серверный язык веб-программирования) поддерживается всеми хостинг-провайдерами.
2) На вашем компьютере. Однако: операционная система Windows сама по себе не работает с PHP-скриптами (программами, написанными на языке PHP). Установите сервер для выполнения этой и других программ на PHP. Автор пользуется свободной (бесплатной) программой Open Server; можете посмотреть другие варианты.
Важно: на время работы программы поместите (скопируйте) рисунки в папку, где находится PHP-файл. После создания кода их можно оттуда удалить.

Возможности программы:
Автоматически создаются все основные элементы – заголовок, таблицы, ключевые слова, рисунки, гиперссылки, параграфы…
Имена рисунков (больших и малых) генерируются по принципу: «Шаблон(1).расширение», «Шаблон(2).расширение» и так далее – с каждым рисунком число увеличивается на 1.
В соответствии со свойствами рисунка в HTML-код автоматически включается его класс и – при необходимости – другие параметры.

Что остаётся сделать нам?
Скопировать готовый код и сохранить его в файле с расширением .htm или .html. Обратите внимание: программа выводит код в «закомментированном» виде. Исключите самую первую строку (перед !DOCTYPE html) и самую последнюю (после /html).
Удалить лишние теги начала и конца строки.
Добавить в HTML-код подписи к фотографиям (и замещающие тексты рисунков) – если часть их отличается от введённых в поля программы.
Составить описание того, о чём рассказывает страница. Выполнить другие творческие работы.
Сохранить и скопировать файл на свой сайт.

На «Мире Дальних Дорог» подписи к фотографиям располагаются снизу. Подпись, относящаяся к нескольким фотографиям – сверху. Для неё вставляем дополнительную строку перед группой фотографий.

Расположение файлов на сервере
Создайте папки для меню и CSS-файлов (можно поместить их в 1 папку). Скопируйте и вставьте их имена в соответствующие поля программы. Также создаём папку для файлов (рисунков) создаваемой страницы. Целесообразно поместить в ту же папку HTML-документ (после его окончательного создания).

Фильтрация вводимой информации
Вводите HTML-теги только в поле описания. Из других полей формы они будут удалены (PHP-функция strip_tags). Также автоматически удаляются лишние пробелы в начале и конце введённой строки (но не внутри строки). К тексту, введённому в поле описания, автоматически добавляются переносы строк (PHP-функция nl2br).

Как переименовать сразу большое количество файлов (в Windows)?
Выделите все файлы, которые нужно переименовать. На имени первого из них щёлкните правой кнопкой мыши, выберите «Переименовать» и введите шаблон имени. Выделенные файлы тут же приобретут имена вида «Имя (1)», «Имя (2)» и так далее. Затем повторяем 1 раз процедуру – удаляем образовавшийся пробел перед скобкой.
Файловые менеджеры также позволяют выполнить групповое переименование.

Создание страницы интересных фотографий (или сборного путешествия)

Создаём таблицу с помощью программы sozd-tablica.php. Вставляем в таблицу нужные куски HTML-кода из ранее созданной походной страницы.
«Нужные куски HTML-кода» – это:
Гиперссылки (включающие коды рисунков – img); вставляются в ячейку класса F (фото).
Текст (вставляется в ячейку класса T). Текст может быть отредактирован в соответствии с тематикой страницы.

По традиции «Мира Дальних Дорог» такие страницы имеют другую структуру, нежели походные. Подписи к фотографиям (и другой текст) располагаются правее, в другой ячейке таблицы. Сами рисунки (и большие, и малые) находятся в других папках нашего сайта. Копировать их не надо, нужно только вставить ссылки.

Можно ли вставлять в таблицу другое содержимое? Да, конечно. Можно вставить и рисунок в ячейку класса T (от «F» она отличается лишь шириной), и текст в обе ячейки.

Обратите внимание. За оформление походных и других страниц отвечают разные таблицы стилей (CSS). Если рисунок находится на «походной» странице, к нему применяются параметры из файла pohod?.css. Если он же размещён на другой странице, будут применены параметры из файла stranica?.css.

В CSS-файлах «Мира Дальних Дорог» заданы одинаковые свойства рисунков (отличаются классы и параметры других элементов – таблиц, заголовков). Но: если таблица стилей отредактирована (или используется другой CSS-файл) – обратите внимание на свойства рисунков.

Самостоятельное изучение HTML

Понимая, что предложенный ниже разбор HTML-кода не заменит учебник, рекомендую воспользоваться справочником или самоучителем по HTML. Можно посетить:
WebReference – справочник HTML и CSS

Следующая полезная ссылка. Можно проверить ваш HTML-код и убедиться, что он написан правильно
(можно проверить по адресу в Интернете; можно загрузить и изучить файл до его размещения).

Как пользоваться поисковой программой (poisk.php)?

Перед её использованием вставьте индивидуальные параметры: имена базы данных и таблицы, имя пользователя, пароль и другое. Нужные свойства заключены в [квадратные скобки] с пояснениями. Вписав нужное значение, удалите [ и ].

Уделите внимание защите от взлома. SQL-инъекции (включение в запрос «лишней» информации, приводящее к печальному результату) – распространённый способ взлома сайтов.
Что могу посоветовать?
Настройка прав пользователей производится через панель управления (доступ в неё предоставляется хостинг-провайдером). При создании пользователя указываются права доступа к базе данных – разрешённые запросы. Пользователь, указанный в поисковой программе, имеет полномочия только на запрос SELECT.
Пароль администратора не встречается ни в одном из файлов сайта.
Кроме того: в нашей базе данных нет информации, которая должна быть скрыта от посторонних глаз.

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

Другие особенности
Если кнопка нажата случайно (при пустой поисковой строке), подключение к базе данных не выполняется. Программа попросит ввести хотя бы 2 буквы.
При положительном результате указывается количество найденных страниц.

Разбор HTML-кода

(небольшой подмосковный поход Раменское – р. Дорка – Радуга)

Код одной из страниц нашего сайта (полностью). Сам разбор будет ниже.

«Что есть что» в HTML-коде?

Примечание: все HTML-теги заключаются в угловые скобки.
В таблице скобки убраны (чтобы обозреватель НЕ воспринимал написанное как HTML). Не удаляйте скобки в своём HTML-документе!


!DOCTYPE html

Стандартное и обязательное начало HTML-документа

html lang="ru"

html – обязательный элемент. lang="ru" указывает язык документа (русский).

head

Обязательный элемент.

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

Кодировка документа
charset=UTF-8 указывает, что это UTF-8

meta name="keywords" content="Природа, Подмосковье, Раменское, речка Дорка, платформа Радуга, платформа Совхоз, Загорново, станция Бронницы"

keywords – ключевые слова. Укажите их, чтобы пользователям (посетителям) было легче найти вашу страницу в интернете.
Сюда вставляются слова, которые вы ввели в соответствующее поле.

title
Поход: Раменское – р. Дорка – Радуга
/title

title – заголовок окна обозревателя

base href="http://www.levinnic.ru" target="_blank"

Для краткости указан базовый адрес сайта. Браузер (интернет-обозреватель) автоматически добавит его к имеющимся на странице гиперссылкам.
target="_blank" означает, что ссылки открываются в новом окне.
При стандартных настройках большинства обозревателей вместо новых окон открываются новые вкладки.
Если вы хотите, чтобы ссылки открывались в текущем окне, удалите target… blank.

link rel="stylesheet" type="text/css" href="../pohod4.css"

Важный элемент: задаёт связь с внешней таблицей стилей (CSS) и путь к CSS-файлу.
Параметры оформления страницы будут взяты из указанного файла

/head

Закрывающий тег.

body

Начало основной (видимой) части документа.

h1 class=D
Поход: Раменское – р. Дорка – Радуга
/h1

Заголовок 1-го уровня (заголовок страницы)
class – это и есть класс; параметры заголовка берутся из соответствующей строки таблицы стилей (CSS).
Заголовок обязательно сопровождается закрывающим тегом; за ним начинается другое содержимое.

table class=foto

Начало таблицы и её класс
class=foto означает таблицу с фотографиями.

tr

Начало строки таблицы.

td class=F

td – начало ячейки таблицы
class=F – ячейки с фотографией (F = фото).

a href="../raduga/2.JPG"
img src="../raduga/mal(2).JPG" class=abc width=205 height=146 alt="Переход через Дорку"
/a
br
Переход через Дорку (Литвиново – Загорново)
br
br

Ниже рассмотрим содержимое ячейки…

a href="../raduga/1.JPG"

Гиперссылка (ссылка на другую страницу, рисунок или другой объект)

img src="../raduga/mal(9).JPG" class=standart alt="Лесная дорога"

img src="../raduga/mal(1).JPG" class=vertical alt="Летний пейзаж с берёзами"

img src="../raduga/mal(2).JPG" class=abc width=205 height=146 alt="Переход через Дорку"

Тег img вставляет рисунок на страницу. Рисунок находится не в HTML-коде, а в отдельном файле.
src – путь к рисунку (папка и файл).
alt – замещающий текст. Учитывается поисковыми системами, используется для поиска рисунков в интернете.
Закрывающий тег не нужен; рисунок вставляется однократно.

class=…
Класс рисунка. Зачем он нужен?

Как правило, цифровой фотоаппарат «выдаёт» снимок с соотношением сторон 4:3; он может быть горизонтальным или вертикальным.

class=standart предназначен для малых рисунков со стандартным соотношением сторон (4:3). Размер такого рисунка (на «Мире Дальних Дорог») – 200 х 150 точек. Вы можете задать другие значения, введя их в соответствующие поля программы. Обратите внимание, что они должны быть указаны в таблице стилей (CSS).

class=vertical предназначен для вертикальных малых фотографий (на «Мире Дальних Дорог» – 150 х 200 точек; вы можете указать другие размеры)

Многие фотографии мы обрабатываем, обрезая лишнее и оставляя лишь «смысловую часть» (например, живность или капельки росы). Тогда соотношение сторон будет отличаться от 3:4

class=abc предназначен для малых фотографий с другим соотношением сторон (размеры отличаются от перечисленных выше). Видим новые свойства: width – это ширина, height – высота. Для рисунков standart и vertical они прописаны в CSS-файле; для рисунков класса abc указываются непосредственно в коде страницы.

Теперь мы поняли, для чего предназначены разные классы рисунков.

/a

Закрывающий тег гиперссылки.

br
Летний пейзаж с берёзами. Видна железная дорога и мост через Гжелку…

br – перенос строки.
Далее идёт текст (подпись к фотографии) и – опять – перенос строки (чтобы отделить текст от следующего рисунка)

/td

Закрывающий тег ячейки таблицы.

td class=F

/td

Одна строка таблицы содержит 2 или 3 ячейки (они начинаются и заканчиваются так же)

/tr

Окончание строки таблицы (закрывающий тег)

/table

Окончание таблицы. Закрывающий тег

p
Здравствуйте. Поход
b
Раменское – р. Дорка – Радуга
/b
пройден в 2016 году.
/p

p и /p – начало и окончание текстового параграфа.
Между параграфами текста вставляется пустая строка.

b (bold) – выделение текста жирным.
/b – закрывающий тег (окончание «жирного» фрагмента).

Если «bold» указан в таблице стилей (заголовки, гиперссылки), в тексте тег не ставим!

a href="../dorka2016/dorka2016.htm"
Раменское, речка Дорка
/a

В следующем параграфе также имеется текстовая ссылка.

p
А больше всего понравилась Дорка (выше Загорнова) и последующий лесной участок. И, разумеется, окончание похода!
/p

Последний параграф описания похода.

iframe src="../standartnoe/podmoskow.htm"

iframe – включаемая область. Предназначена для включения содержимого из другого источника (файла). На «Мире Дальних Дорог» используется для меню.

После src… указываем путь к файлу (в данном случае – папка standartnoe, файл podmoskow.htm)

/iframe

Закрывающий тег.

/body

Обязательный закрывающий тег для видимой части документа.

/html

Обязательный закрывающий тег в самом конце документа. После ничего быть не должно.

Дополнение
В предлагаемом примере не было графика похода
График является таблицей следующего вида…

table class=rasp

Начало таблицы. Обратите внимание, что она имеет другой класс.
Соответственно, будут применены другие параметры оформления.

tr

Строки начинается так же.
А ячейки имеют другие классы. На одной строке – 4 ячейки…

td class=punkt

Раздельный пункт

td class=vremya

Время прибытия, стоянки и отправления (эти 3 ячейки имеют одинаковую ширину)

/tr
/table

Окончание строки и таблицы.

Дополнительные полезные фрагменты HTML-кода

(объединение нескольких столбцов или строк в 1 ячейке)


Главная страница / Все походы / Другие разделы