Это старая версия документа!
Содержание
4.3. Файл sample.html
Введение
Пример sample.html
Ниже приведен пример файла sample.html, который является единой статической страницей
Файл sample.html
Ниже приведен код страницы sample.html
- sample.html
<!doctype html> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <!-- запрет автоперевода перевода google translate --> <meta name="google" content="notranslate"> <!-- отображение файктической ширины экрана для адаптивного дизайна --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sample.html</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="style.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>Logo</h1> </header> <nav class="navbar"> <ul> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#/about">About</a></li> <li><a href="#/contact">Contact</a></li> </ul> </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>Article title</h2> <p> FishText will help designers, layout designers, and webmasters generate several paragraphs of more or less meaningful text in Russian, and will also help aspiring speakers hone their public speaking skills at home. 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>©2026 Sample HTML5 Page. All rights reserved.</p> </footer> <!-- Optional: Link to a JavaScript file --> <script> // Находим кнопку по ID const button = document.getElementById('searchButton'); // Добавляем обработчик события "click" button.addEventListener('click', function() { // Выводим alert alert('Ничего не найдено...!'); }); </script> </body> </html>
Большенство просто пролистает этот код, так как его очень не удобно читать. В примере все заключенно в тело одной страницы и для создания дополнительных страниц, необходимо полность копировать весь текст в создаваемые страницы, и уже там выискивать и менять текст в нужных блоках.
Это может быть приемлемо только для маленьких сайтов-визиток, где контент долгое время не меняется.
А если текст меняется постоянно? Если на страницах разные стили оформления? Если у гостей и зарегистрированных пользователей ограничения в отображаемых пунктах меню?
Тут на помощь приходят серверные языки программирования (PHP, Python, Ruby, Node.js), базы данных (MySQL, PostgreSQL) и клиентский JavaScript, которые совместно генерируют контент в реальном времени. Они позволяют обрабатывать запросы пользователей, взаимодействовать с сервером и изменять интерфейс без перезагрузки.
Но, все по порядку…
Для начала вынисем стили и скрипты в отденьные директории, далее разделим страницу на части и следом с помощью PHP подключим все это в единый динамический шаблон.
И начнем мы с файла header.php, описанного на следующей странице руководства
Дополнения и Файлы
см. также:
