5.0. Методические рекомендации

Наименование файлов

Традиционное название файла, который используется для индексации в каталогах веб-страниц - index.html, index.php или иные index.* На каждую страницу должен быть собственный файл индексации

example.com/pages/profile/index.html
example.com/pages/blog/index.html
example.com/styles/stylesheet.css
example.com/index.html

Данное правило не будет работать, только в случае использования Template Engines (Twig или иные). В Template Engines, можно использовать любое название, так-как индексацию страниц вы задаёт в ручную.

Почему именно index.html ?

Это стандарт, который используется веб-серверами для автоматической индексации страниц. Данная автоматизация создана для быстрых URL-ссылок, в которых не указан определённый файл - https://1163.ru, вместо строго указанного https://1163.ru/index.php

Объявление типа документа

Первая строка документа (файла), должна содержать объявление типа документа для индексации Веб-обозревателем (Браузером)

<!DOCTYPE html>

Объявление локализации и кодировки документа

Всегда объявляйте локализацию документа путём добавления атрибута lang, а также после его кодировку через атрибут charset (доступные кодировки, доступные локализации)

<html lang="ru-RU" charset="utf-8">
    <!-- Контент сайта -->
</html>

Нижний регистр

Всегда объявляйте названия атрибутов и элементов только в нижнем регистре!

<div class="container">  
    <p>Правильно</p>  
</div>

и неправильный вариант

<DIV CLASS="container">  
    <P>Неправильно</P>  
</DIV>

Каждый элемент должен закрываться, если он содержит в себе данные

Каждый элемент должен где-то начинаться и где-то заканчиваться, как в любом языке программирования или-же разметки

<div class="wrap">
    <section class="titles">
        <h1>Везде есть BEGIN и везде есть END</h1>
    </section>
</div>

Пример неправильного объявления элементов

<div class="wrap">
    <section class="titles">
        <h1>H1 начался, но не закончился
    </section>
</div>

Почему важно всегда закрывать элементы? Закрытие дескрипторов сигнализирует Веб-обозревателю (Браузеру) о завершении блока, что важно для правильного отображения данных, так-как не завершенный блок, может паразитировать на остальных блоках, которые идут после него или вовсе сломать отображение страницы

Все значения атрибутов должны находиться в кавычках

Все данные, которые вы добавляете в атрибут должны находится в едином блоке ограничения, как тут

<div class="useless other" id="itm_2">...</div>

<div class=useless "other" id=itm_3> Так не работает </div>

Наименование классов и идентификаторов

При создании наименований классов и идентификаторов, которые содержат в себе несколько слов, используйте метод kebab case (Если условно - стиль шпажки)

<div class="kebab-case" id="object-name"> Kebab case </div>

Не используйте метод camel case (UpperCamelCase и lowerCamelCase), так-как он неудобен в чтении

<div class="camelCase" id="objectName"> Camel case </div>

Boolean атрибуты

Не используйте значения в boolean атрибутах, HTML позволяет просто объявлять атрибут без значения

<input required />

<input required="required" />

Не пропускайте важные элементы

Не допускайте пропуска элементов <html>, <head> и <body>

<!DOCTYPE html>
<html lang="ru-RU" charset="utf-8">
    <head>
        <title>Мой сайт</title>
        ...
    </head>
    <body>
        ...
    </body>
</html>

Метаданные

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

Тег <head> служит контейнером для метаданных и размещается между тегами <html> и <body>. Он содержит различные элементы, такие как <title>, <style>, <meta>, <link>, <script> и <base>, каждый из которых предназначен для описания определенной части метаданных.

Например, элемент <title> определяет заголовок документа, который отображается в заголовке вкладки браузера и в результатах поиска. Элемент <meta> используется для указания набора символов, описания страницы, ключевых слов, автора и другой метаинформации.

Элементы <style> и <script> позволяют определять стили и скрипты соответственно, которые применяются к документу. Элемент <link> используется для связывания с внешними таблицами стилей, а <base> указывает базовый URL-адрес и целевой объект для всех относительных URL-адресов на странице.

Понимание и правильное использование метаданных и тега <head> критически важно для создания качественных и функциональных веб-страниц, которые будут хорошо отображаться в различных браузерах, индексироваться поисковыми системами и обеспечивать удобство использования для пользователей.

<head>
    <title>Страница студента - ГБПОУ СО "ТПК"</title>
    <link href="../styles/stylesheets.css" rel="stylesheet">
    <script src="../scripts/invoke.js"></scripts>
    ...
</head>

Основные типы мета-данных и их важность

Мета-тег для описания страницы (description)
<meta name="description" content="Краткое описание страницы для поисковых систем.">
Зачем нужен:
Этот тег содержит краткое описание страницы, которое поисковые системы (Google, Bing) могут использовать в результатах поиска. Хорошее описание увеличивает вероятность того, что пользователи кликнут на сайт. Оно должно быть уникальным для каждой страницы, кратко объяснять её содержание и содержать ключевые слова.
Мета-тег для ключевых слов (keywords)
<meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3">
Зачем нужен:
Раньше этот тег использовался для указания ключевых слов для поисковых систем, но сейчас он потерял свою важность, так как большинство современных поисковых систем (например, Google) больше не обращают на него внимания из-за злоупотребления им. Однако в некоторых специфических поисковых системах он может иметь значение.
Мета-тег для установки кодировки (charset)
<meta charset="UTF-8">
Зачем нужен:
Этот тег указывает кодировку символов для страницы, чаще всего используется UTF-8, которая поддерживает большинство языков. Без этого тега некоторые символы могут отображаться неправильно, особенно если на сайте используется более одного языка.
Мета-тег для мобильных устройств (viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Зачем нужен:
Этот мета-тег особенно важен для адаптивности сайта. Он сообщает браузеру, как отображать страницу на мобильных устройствах. Без него сайт может некорректно масштабироваться на смартфонах и планшетах, что ухудшит пользовательский опыт.
Мета-тег для авторства
<meta name="author" content="Имя автора">
Зачем нужен:
Этот тег позволяет указать автора страницы или сайта. Он может быть полезен для документов или страниц, где важно указать, кто их создал.
Open Graph (для VKontakte.):
```
<meta property="og:title" content="Заголовок для социальных сетей">
<meta property="og:description" content="Описание для социальных сетей">
<meta property="og:image" content="URL изображения для превью">
<meta property="og:url" content="URL страницы">
```
Зачем нужны:
Эти теги важны для того, чтобы ваша страница отображалась красиво и правильно, когда кто-то делится ею в социальных сетях. Они определяют, какой заголовок, описание и изображение будет использоваться для превью вашей страницы в постах.
Мета-тег для управления индексированием (robots)
<meta name="robots" content="index, follow">
Зачем нужен:
Этот тег указывает поисковым системам, как индексировать страницу. Вы можете разрешить или запретить индексацию страницы и следование ссылкам на ней. Например:
- index, follow: Разрешает индексацию страницы и следование ссылкам.
- noindex, nofollow: Запрещает индексацию страницы и следование ссылкам.
Мета-тег для настройки favicon (иконка сайта)
<link rel="icon" href="favicon.ico" type="image/x-icon">
Зачем нужен:
Этот тег определяет иконку, которая отображается в заголовке вкладки браузера. Он повышает узнаваемость сайта и улучшает пользовательский опыт.
Мета-тег для обновления страницы
<meta http-equiv="refresh" content="30">
Зачем нужен:
Этот тег автоматически обновляет страницу через заданный интервал времени (в данном случае, через 30 секунд). Иногда используется для страниц с динамическим контентом, но злоупотреблять этим не рекомендуется, так как это может раздражать пользователей.

Почему мета-данные важны?

SEO (поисковая оптимизация): Мета-данные помогают поисковым системам лучше понять содержание страницы и определить её релевантность для конкретных запросов. Это может влиять на ранжирование сайта в результатах поиска.
Улучшение отображения в социальных сетях: Мета-теги Open Graph и Twitter Cards позволяют управлять тем, как ваша страница будет выглядеть при расшаривании в социальных сетях, что повышает вовлеченность пользователей.
Адаптивность и удобство для пользователей: Тег viewport помогает правильно отображать страницу на мобильных устройствах, что важно для современных сайтов, так как большая часть трафика приходит с мобильных устройств.
Управление кэшированием и обновлением: Некоторые мета-теги могут управлять кэшированием страницы или автоматически обновлять её, что важно для страниц с динамическим контентом.
Определение и улучшение работы браузеров: Теги, такие как charset, помогают браузеру корректно отображать страницу, особенно для многоязычных сайтов.

Семантические дескрипторы HTML

Семантические дескрипторы (Далее - теги) HTML используются для обозначения структуры и смысла контента на веб-странице. Они помогают браузерам, поисковым системам и другим технологиям (например, экранным читалкам) лучше понимать содержание сайта. Семантические теги дают представление о роли различных блоков контента, что улучшает доступность и SEO (поисковую оптимизацию).

Как работают семантические теги:

1. Улучшение читабельности и структурирования

Семантические теги обозначают не только внешний вид элементов, но и их смысловое предназначение. Это облегчает понимание кода как для разработчиков, так и для поисковых систем.

Пример:

Вместо использования простого div для обозначения различных разделов сайта, можно использовать теги, которые описывают их смысл:

Без семантики:

<div>
    <div>Главная</div>
    <div>О нас</div>
    <div>Контакты</div>
</div>

С семантикой:

<nav>
    <ul>
        <li>Главная</li>
        <li>О нас</li>
        <li>Контакты</li>
    </ul>
</nav>

Во втором случае код более читабельный и понятный: nav указывает, что это навигация, а ul — это список навигационных ссылок.

2. Повышение SEO

Поисковые системы, такие как Google, уделяют больше внимания семантической разметке, поскольку это помогает им лучше интерпретировать содержание страницы. Семантические теги указывают на важные элементы страницы, такие как заголовки, основной контент, боковые панели, что помогает поисковым роботам точнее индексировать сайт.

Пример:

<article>
    <h2>Заголовок статьи</h2>
    <p>Текст статьи.</p>
</article>

Поисковая система поймёт, что это важная статья, благодаря тегу <article>.

3. Доступность для вспомогательных технологий

Для пользователей с ограниченными возможностями, которые используют экранные читалки, семантические теги важны для корректного восприятия структуры страницы. Например, <nav> помогает таким технологиям сразу определить область навигации, а <footer> — область с контактной информацией или копирайтом.

Пример:

<nav>
    <a href="#home">Главная</a>
    <a href="#about">О нас</a>
</nav>

Экранная читалка может сразу сообщить пользователю, что это блок навигации, и озвучить его содержание.

Основные семантические теги HTML:

<header> — определяет шапку страницы или раздела. Обычно содержит логотип, заголовок или навигацию.
```
<header>
   <h1>Мой блог</h1>
   <nav>...</nav>
</header>
```
<nav> — обозначает блок навигации, где содержатся ссылки для перемещения по сайту.
```
<nav>
   <a href="#home">Главная</a>
   <a href="#services">Услуги</a>
</nav>
```
<article> — используется для самостоятельного, независимого контента, например, статьи, блога или новости.
```
<article>
   <h2>Заголовок статьи</h2>
   <p>Содержимое статьи.</p>
</article>
```
<section> — определяет логический раздел на странице. Используется для объединения контента, связанного одной темой.
```
<section>
   <h2>О нас</h2>
   <p>Информация о компании.</p>
</section>
```
<aside> — содержит дополнительную информацию или боковые панели, которые могут быть связаны с основным контентом, но не являются его центральной частью.
```
<aside>
   <h3>Связанные статьи</h3>
   <ul>
       <li>Ссылка 1</li>
       <li>Ссылка 2</li>
   </ul>
</aside>
```
<footer> — используется для размещения нижнего колонтитула страницы или раздела. Обычно содержит копирайты, ссылки на политику конфиденциальности и контактную информацию.
```
<footer>
   <p>&copy; 2024 Все права защищены.</p>
</footer>
```
<main> — представляет основной контент страницы, который является уникальным и наиболее важным для данной страницы.
```
<main>
   <h2>Основной контент</h2>
   <p>Текст основной части страницы.</p>
</main>
```

Преимущества использования семантических тегов:

Улучшение читабельности кода: Разработчики и другие члены команды могут легко понять структуру страницы.
SEO: Семантические теги помогают поисковым системам лучше индексировать страницы.
Доступность: Семантические теги обеспечивают лучшую поддержку вспомогательных технологий для людей с ограниченными возможностями.
Будущая поддержка: Современные браузеры лучше оптимизированы для работы с семантическими тегами, что способствует лучшей совместимости с будущими обновлениями.

Таким образом, использование семантических тегов делает веб-страницы более организованными, понятными и доступными для всех категорий пользователей и устройств.

Задание

Задание №1:

Разработайте сайт-автобиографию, который будет состоять из следующих разделов:

Главная страница с кратким приветствием и фото.
О себе — раздел с основными данными о вас: биография, образование, достижения.
Навыки — раздел с перечислением ваших профессиональных навыков.
Контакты — раздел с контактной информацией и формой обратной связи.

Требования:

Используйте семантические HTML5 теги.
Примените CSS для стилизации каждого раздела, уделив внимание структуре, цветам, шрифтам и адаптивности (используйте медиа-запросы).
Сайт должен корректно отображаться на мобильных устройствах.
Используйте изображения, шрифты и цвета для создания визуально приятного интерфейса.

Пример решения

HTML (index.html)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Автобиография</title>
    <meta name="description" content="Автобиография и достижения">
    <link rel="stylesheet" href="styles.css">
</head>

Пример внутренней структуры

<body>
    <main>
        <!-- Главная -->
        <section id="home">
            <h1>Добро пожаловать!</h1>
            <p>Это моя личная страница автобиографии.</p>
            <img src="profile.jpg" alt="Мое фото" class="profile-pic">
        </section>
    </main>
</body>

Описание решения:

HTML структура:
- Весь контент должен быть разбит на логические разделы: Главная, О себе, Навыки и Контакты.
- Используются семантические теги (header, nav, section, footer) для повышения доступности и улучшения SEO.
- В разделе "Контакты" добавлена форма для связи с использованием тегов label и input, что делает её удобной для пользователей и доступной для читалок.

Изображение - Пример главной страницы сайта

Задание №2:

Разработайте сайт-портфолио с использованием CSS Grid Layout. На сайте должно быть четыре основных раздела:

Главная страница с приветственным сообщением и навигацией.
Обо мне — раздел с кратким описанием вас.
Проекты — раздел с карточками проектов (минимум 6 проектов).
Контакты — раздел с контактной информацией.

Требования:

Используйте CSS Grid для расположения контента.
Для навигации и главного контента примените сетку из колонок и строк.
Стилизация проекта должна быть минималистичной и профессиональной.
Описание решения:

HTML структура:
- Сайт разделен на основные секции: Главная, Обо мне, Проекты, Контакты.
- Проекты оформлены в виде карточек, каждая из которых содержит заголовок и описание проекта.
- Форма обратной связи используется в разделе "Контакты" для сбора информации от пользователей.
CSS Grid:
- Grid Layout используется для создания основной сетки страницы. Например, сетка на 12 колонок для основного контента.
- В разделе с проектами используется CSS Grid для построения карточек проектов в виде сетки, адаптирующейся под размер экрана.
Дизайн:
- Сайт оформлен в минималистичном стиле с акцентом на контент.
- Стилизация формы и карточек проектов создает приятный для восприятия интерфейс.

Важные моменты:

CSS Grid делает разметку адаптивной и удобной для изменения при различных размерах экрана.
Адаптивная сетка помогает расположить контент в зависимости от устройства.
Семантические HTML-теги делают сайт более структурированным и доступным.