| webitproff |
|
|---|---|
#45757 Gruzin: здесь основы по шаблонам, статьи и другие мануалы Кроме того, чисто для примера с небольшими пояснениями собрал для Вас "болванку" с пояснениями ниже, может еще кому пригодится. Семантическая разметка для HTML5/CSS3 кодировка файлов везде UTF-8 (без BOM)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<!-- масштабируем отображение страницы по экрану устройства-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Семантическая разметка</title>
<!-- подключаем стили фронтэнд фреймворка, который будем использовать,
например bootstrap 5 https://getbootstrap.com/) -->
<link href="мойпутькфайлу/css/bootstrap.min.css">
<!-- собственные стили (после стилей используемого фронтэнд фреймворка)-->
<link rel="stylesheet" type="text/css" href="мойпутькфайлу/style.css">
</head>
<!-- тело страницы -->
<body>
<!-- хэдер -->
<!-- Верхний колонтитул веб-страницы.
вместо <div id="header"> лучше использовать <header>
так поисковому роботу мы сообщаем, что это не какой-то безликий блок,
а блок конкретного содержимого
и в данном случае несет навигационную смысловую нагрузку) -->
<header>
<nav>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- (пример) класс подтягиваем из bootstrap.min.css -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#1">Link-1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#2">Link-2</a>
</li>
</ul>
</nav>
</header>
<!-- Код от " <!DOCTYPE html>" и до
</header> размещаем НАПРИМЕР header.tpl или же Всё что между
<header> и </header> в отдельный файл шаблона inc.my.header.tpl
и подключаем его здесь(в header.tpl), используя оператор "FILE" таким образом
{FILE "{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/inc/inc.my.header.tpl"} -->
<!-- Всё что между <main> и </main> размещаем НАПРИМЕР для страницы полной новости в page.tpl -->
<main class="мойкласс-ххх">
<!-- <main> - блок основного содержимого страницы,
и мы можем сделать разными, например для index.tpl и page.tpl или page.list.tpl и т. д. -->
<!-- "мойкласс-ххх" - если нужно задаем его в файле собственных стилей "style.css" -->
<section>
<h1>Основной Заголовок страницы</h1>
<!-- (например "Новости нашего сайта") -->
<p>Вступительное или пояснительное содержимое</p>
<!-- Какая-то статья или публикация и вместо <div id="article"> лучше использовать <article>
так поисковому роботу мы сообщаем, что это не какой-то безликий блок,
а блок конкретного содержимого
и в данном случае несет смысловую нагрузку полезного контента: текст, картинки, видео ...) -->
<article>
<h3>Заголовок статьи</h3>
<p>Текст статьи. <mark>Важный фрагмент текста</mark>
</p>
<figure>
<p>
<img class="мойкласс-хyq" src="мойпутькфайлу/photo.jpg" alt="">
</p>
<figcaption>Иллюстрация</figcaption>
</figure>
<aside>
<p>Примечание к статье</p>
</aside>
</article>
</section>
<section>
<h3>Заголовок</h3>
<p>Какой второстепенный контент</p>
</section>
</main>
<!-- Всё что между <footer> и </footer> размещаем в footer.tpl -->
<footer>
<!-- футер -->
<p>Подвал страницы </p>
</footer>
<!-- подключаем скрипты фронтэнд фреймворка, который будем использовать,
у нас bootstrap 5 -->
<!-- JavaScript Bundle with Popper -->
<script src="мойпутькфайлу/js/bootstrap.bundle.min.js"></script>
<!-- уже после подключаем свои скрипты -->
<script src="мойпутькфайлу/js/script.js"></script>
</body>
<!-- конец тела страницы -->
</html>
надеюсь помог
ps. дополнительно по теме
аккаунт удален - не срослось с разработчиками
ушел на другой движок |
|
Відредаговано: webitproff (12.12.2022 08:24, 2 року тому) |
