Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:cms:ucms:sample_php_page_sample [2026/02/08 12:28] – [Дополнения и Файлы] VladPolskiy
+++ software:development:demo:cms:ucms:sample_php_page_sample [2026/02/08 18:48] (текущий) – [Файл sample.html] VladPolskiy
@@ Строка 4: / Строка 4: @@
 </note>
 ====== 4.3. Файл sample.html ======
   * [[software:development:demo:cms:ucms:sample_html5_and_dinamic_page|Глава 4.0. Шаблон HTML и динамические страницы]]
     * [[software:development:demo:cms:ucms:sample_html5_page|4.1 Шаблон HTML5]]
     * [[software:development:demo:cms:ucms:sample_php_page_and_dinamic_page|4.2 Шаблон PHP и динамические страницы]]
     * [[software:development:demo:cms:ucms:sample_php_page_sample|4.3. Файл sample.html]]
-    * [[software:development:demo:cms:ucms:sample_php_page_header|4.4. Файл header.php]]
+      * [[software:development:demo:cms:ucms:sample_php_page_style_css|4.3.1. Файл style.css]]
-      * [[software:development:demo:cms:ucms:sample_php_page_style_css|4.4.1. Файл style.css]]
+      * [[software:development:demo:cms:ucms:sample_php_page_scripts_js|4.3.2 Файл scripts.js]]
-    * [[software:development:demo:cms:ucms:sample_php_page_footer|4.5. Файл footer.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_index|4.4. Файл index.php часть 1]]
-      * [[software:development:demo:cms:ucms:sample_php_page_scripts_js|4.5.1 Файл scripts.js]]
+    * [[software:development:demo:cms:ucms:sample_php_page_header|4.5. Файл header.php]]
-    * [[software:development:demo:cms:ucms:sample_php_page_index|4.6. Файл index.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_footer|4.6. Файл footer.php]]
-    * [[software:development:demo:cms:ucms:sample_php_page|4.7. page.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_index_part_2|4.7. Файл index.php часть 2]]
       * [[software:development:demo:cms:ucms:sample_php_page_home.php|4.7.1 Файл home.php]]
       * [[software:development:demo:cms:ucms:sample_php_page_about.php|4.7.2 Файл about.php]]
       * [[software:development:demo:cms:ucms:sample_php_page_contact.php|4.7.3 Файл contact.php]]
 ===== Введение =====
+===== Пример sample.html =====
+Ниже приведен пример файла sample.html, который является единой статической страницей
+<note shadow>
+{{:software:development:demo:cms:ucms:sample_html_5.png|}}
+</note>
 ===== Файл sample.html =====
+Ниже приведен код страницы sample.html
-<code php sample.html>
+<code html sample.html [enable_line_numbers="true"]>
-<!DOCTYPE html>
+<!doctype html>
-<html lang="en">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
+  <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- запрет автоперевода перевода google translate -->
-    <title>Sample HTML5 Page</title>
+    <meta name="google" content="notranslate">
-	<!-- Optional: Link to a CSS file -->
+	<!-- отображение файктической ширины экрана для адаптивного дизайна -->
-    <link rel="stylesheet" href="styles.css">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
+    <title>sample.html</title>
-<body>
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
+      rel="stylesheet"
+      type="text/css" />
+    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+	<!-- блок стилей css -->
+<style>
+html {
+    width: 100%; /* Ширина 90% */
+    margin: 0;
+    padding: 0;
+}
+body {
+  width: 90%; /* Задает ширину 90% от вьюпорта */
+  margin: 0 auto; /* Центрирует контент */
+  box-sizing: border-box; /* Учитывает padding внутри ширины */
+}
+h, p {
+	margin: 10px;
+	padding: 0px 10px;              /* Убирает внутренние отступы */
+}
+.navbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #04aa6d;
+	color: white;
+	border: 1px solid black;
+	border-radius: 5px; /* Скругляет все углы на 5px */
+}
+ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	background-color: #04aa6d;
+	display: flex;
+}
+ul li {
+	float: left;
+	border-right:1px solid #025f3d;
+}
+ul li:last-child {
+	border-right: none;
+}
+ul li a {
+	display: block;
+	color: white;
+	text-align: center;
+    /* top, right, bottom, left */
+	padding: 10px 16px;
+	text-decoration: none;
+}
+ul li a:hover:not(.active) {
+	background-color: #03915d;
+}
+ul li a.active {
+	background-color: #04aa6d;
+}
+.search-form {
+	display: flex;
+}
+.search-form input {
+	background-color: #D3D3D3
+	border: 1px solid #025f3d;
+	border-radius: 5px; /* Скругляет все углы на 5px */
+    /* top, right, bottom, left */
+    margin: 3px 10px 3px 0; /* 10px отступ справа */
+	padding: 10px 10px;              /* Убирает внутренние отступы */
+	border: none;
+}
+.search-form-button {
+    /* top, right, bottom, left */
+    margin: 0 1px 0 0; /* 10px отступ справа */
+	padding: 10px 10px;              /* Убирает внутренние отступы */
+	border: none;             /* Убирает рамку (если есть) */
+	background: none;         /* Убирает фоновый цвет */
+    color: white;
+	font: inherit;            /* Наследует шрифт родителя */
+	cursor: pointer;          /* Возвращает курсор-ручку */
+}
+ul li .search-form-button:hover:not(.active) {
+	background-color: #03915d;
+}
+ul li .search-form-button.active {
+	background-color: #04aa6d;
+}
+</style>
+  </head>
+  <body>
+    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->
     <header>
-        <h1>Welcome to my website</h1>
+      <h1>Logo</h1>
     </header>
+<nav class="navbar">
-    <nav>
+		<ul>
-        <ul>
+			<ul>
-            <li><a href="/">Home</a></li>
+				<li><a class="active" href="#home">Home</a></li>
-            <li><a href="/about">About</a></li>
+				<li><a href="#/about">About</a></li>
-            <li><a href="/contact">Contact</a></li>
+				<li><a href="#/contact">Contact</a></li>
-        </ul>
+			</ul>
-    </nav>
+		</ul>
+	<!-- Форма поиска. -->
+    <form class="search-form">
+	<ul>
+        <li><input type="search" placeholder="Search..."></li>
+		<li><button class = "search-form-button" type="submit"  id="searchButton" value="Go!">Go!</button></li>
+	</ul>
+    </form>
+</nav>
+    <!-- Здесь основное содержимое нашей страницы -->
     <main>
-        <article>
+      <!-- Она содержит статью -->
-            <h2>An Article Title</h2>
+      <article>
-            <p>This paragraph is nested inside an article. It contains <strong>strong text</strong> and <em>emphasized text</em>.</p>
+        <h2>Article title</h2>
-            <section>
+        <p>
-                <h3>A sub-section</h3>
+			FishText will help designers, layout designers, and webmasters generate
-                <p>More content can go here.</p>
+			several paragraphs of more or less meaningful text in Russian, and will
-            </section>
+			also help aspiring speakers hone their public speaking skills at home.
-        </article>
+			We used the well-known universal speech code to create the generator.
+			The text is generated randomly in paragraphs, with two to ten sentences
+			per paragraph, making it more engaging and lively for both visual and
+			auditory perception.
+        </p>
+        <h3>Subsection</h3>
+        <p>
+			Essentially, fish text is an alternative to traditional lorem ipsum,
+			which can be confusing for some people when trying to read fish text.
+			Unlike lorem ipsum, fish text in Russian will imbue any layout with a
+			perplexing meaning and impart a unique Soviet-era flavor.
+        </p>
+      </article>
+      <!-- Дополнительный контент также может быть вложен в основной контент -->
+      <aside>
+        <h2>See also</h2>
+			<li><a href="#">I like to travel alone</a></li>
+			<li><a href="#">I'm glad for this opportunity</a></li>
+			<li><a href="#">Even in Norway</a></li>
+			<li><a href="#">It never stops raining there</a></li>
+			<li><a href="#">Oh, come on...</a></li>
+      </aside>
     </main>
+    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->
     <footer>
-        <p>&copy; 2026 Sample HTML5 Page. All rights reserved.</p>
+      <p>©2026 Sample HTML5 Page. All rights reserved.</p>
     </footer>
     <!-- Optional: Link to a JavaScript file -->
-    <script src="scripts.js"></script>
+    <script>
-</body>
+	// Находим кнопку по ID
+	const button = document.getElementById('searchButton');
+	// Добавляем обработчик события "click"
+	button.addEventListener('click', function() {
+	// Выводим alert
+    alert('Ничего не найдено...!');
+	});
+	</script>
+  </body>
 </html>
 </code>
+Не стоит пугаться, так как данная страница просто пример HTML страницы со стилями и небольшим примером работы языка JavaScript для кнопки поиска "Go!"
+<note shadow>{{:software:development:demo:cms:ucms:sample_html_6.png|переход страниц}}</note>
+Хотя, нет, стоит...\\
+Большенство просто пролистает этот код, так как его очень не удобно читать. В примере все заключенно в тело одной страницы и для создания дополнительных страниц, необходимо полность копировать весь текст в создаваемые страницы, и уже там выискивать и менять текст в нужных блоках.
+\\
+Это может быть приемлемо только для маленьких сайтов-визиток, где контент долгое время не меняется.
+\\
+А если текст меняется постоянно? Если на страницах разные стили оформления? Если у гостей и зарегистрированных пользователей ограничения в отображаемых пунктах меню?
+\\
+Тут на помощь приходят серверные языки программирования (PHP, Python, Ruby, Node.js), базы данных (MySQL, PostgreSQL) и клиентский JavaScript, которые совместно генерируют контент в реальном времени. Они позволяют обрабатывать запросы пользователей, взаимодействовать с сервером и изменять интерфейс без перезагрузки.
+\\
+Но, все по порядку...
+\\
+Для начала вынисем стили и скрипты в отденьные директории и файлы, далее разделим страницу на части и следом с помощью PHP подключим все это в единый динамический шаблон.
+\\
+И начнем мы с файла **style.css**, описанного на следующей странице руководства
@@ Строка 82: / Строка 232: @@
 </wrap>
 <wrap right>
-[[software:development:demo:cms:ucms:sample_php_page_header|4.4. Файл header.php]]
+[[software:development:demo:cms:ucms:sample_php_page_style_css|4.3.1. Файл style.css]]
  {{:icons:16:arrow-transition.png?|}}</wrap>
 </note>