Стандартні HTML елементи та структура сайту
Загальні вимоги
Існують базові вимоги (стандарти), і спеціальні вимоги або пояснення, які повинен надати (“зібрати” під час спілкування з клієнтом або на основі аналогічних проєктів, або на основі отриманого раніше власного досвіду) Project Manager (PM) під час постановки завдання.
Слідами статті Чистота і порядок – понад усе. Рекомендації до коду.
- Верстка має бути блоковою, таблиці можна використовувати тільки для надання табличних даних у контенті. Усі значки на кшталт копірайту, умляутів (німецькі літери з крапочками), куточки мають бути додані через спецсимволи (мнемоніки).
- Відповідність макету – найголовніший пункт, інакше не можна буде прийняти роботу. Ще називають PixelPerfect, допускається зсув на 1-2 пікселі. У разі зсуву більше, відмінності можуть бути незначними, оскільки кількість пікселів сумується по сторінці, і елемент знизу може з’їхати на досить велику відстань. Відмінності є обґрунтованою відмовою від наданої роботи. Робота вважається невиконаною.
- Заявлені вимоги до завдання, зазвичай це:
– кросбраузерність (список браузерів із версією “від”. Наприклад, вказується Internet Explorer 12+, Mozilla Firefox, Google Chrome, Apple Safari останніх версій. Іноді, до цього додається Opera)
– використання doctype (у 99% випадків це html5)
– проходження валідації на validator.w3.org
– використання css framework (bootstrap, skeleton, grid960 або ще що) чи ні
– препроцесорів (less, sass), якщо використовується
Пункти, що стосуються css фреймворку і препроцесорів, – це спеціальні параметри, без яких легко обходиться більшість проектів, і за їхнє використання платять окремі гроші. Якщо вимоги не пред’являються – запитайте, щоб не було сюрпризів і фраз наприкінці на кшталт “а я думав(ла), що ви професіонали”. Може, і професіонали, але не телепати 🙂.
Також робимо тільки те, що в параметрах і замовили. Будь-яка безкоштовно виконана робота може спричинити інші безкоштовні роботи.
Структура папок, файлів та їх найменування
Ніякої кирилиці, ні в назвах файлів, ні в папках, ні в коментарях у коді.
Звичайний набір файлів і папок має такий вигляд:
- Файли в корені
index.html – головна сторінка (завжди index)
catogory.html – сторінка категорії
blog.html – сторінка блогу
item.html – сторінка товару
contact.html – сторінка контактів
about.html – сторінка про компанію
і далі за змістом - Папки та файли в них
img – для картинок
Картинки .png і .svg – для елементів дизайну, у них бітрейт кращий, jpg – для фото, продуктів, наприклад.
js – для скриптів
Розміщуємо скрипт для ініціалізацій, зазвичай називається main.js – у ньому ініціалізуємо всі слайдери та інші скрипти.
Бібліотеки скриптів, як і бібібіліотеку jquery, підключаємо через cdn – тобто, з сервера (за можливості).
Обов’язково перевіряємо версії бібліотек і скриптів, підключаємо тільки останні.
css – для стилів
styles.css – загальний файл стилів
media.css – файл із медіа запитами
reset.css – файл з обнуленням стандартних властивостей тегів
Приклад базового набору (заготовки – HTML шаблон) файлів/папок знаходиться тут. Якщо немає окремих вимог – використовуємо своє.
Найменування зображень
logо – назва для лого, тільки так.
Для фонових зображень додаємо bg-, для іконок ico-
Наприклад, bg-top.png або ico-fb.png
Якщо є можливість, то краще давати тематичні назви, якщо це зробити не можна, то іменуємо ico-01.png, ico-02.png, bg-box.png і в такому стилі.
Основна структура сторінки
- Шапка (верхній колонтитул, він же хедер, header)
<header class="header">header</header>
Клас header додаємо завжди, ніколи не можна вішати клас просто на тег <header>, його можна використовувати в контенті, і застосувати для всього відразу - Контент (контентна частина, та частина, де розміщуються основний текст або елементи, форми)
приклад сторінки блогу
<div class="content">
<section class="blog">
<article class="item">article 1</article>
<article class="item">article 2</article>
<article class="item">article 3</article>
</section>
</div>
Тобто, <div> це структурний тег, використовується для побудови структури, як і інших елементів. Для контенту можна використовувати <section>, - Футер (він же нижній колонтитул, footer)
<footer class="footer">footer</footer>
Найменування класів
- header – назва для хедера і тільки так
- logo – назва для логотипу
- login, login-block, auth-block, user-block так може називатися блок з авторизацією
- menu, nav назва класу навігаційного меню
- content – назва класу для загального контенера, в якому знаходиться вся контентна частина
- container – назва контенера, який може використовуватися для органічення ширини, вирівнювання
- block – загальний клас, другорядного елемента
- box – клас для контейнера, часто для однотипних повторюваних елементів усередині одного блогу, як батьківського
- footer – клас для футера, тільки так
- socials – клас для блоку або списку, який містить соціальні іконки
Усі класи можуть повторюватися на сторінці безліч разів, якщо вказувати стилі щодо безпосереднього батька. Наприклад, якщо меню розташоване в хедері та футері, і вкажемо стилі для меню щодо хедера і футера, то цей стиль застосується тільки в одному місці, а назва класу буде кілька разів на сторінці. Так і потрібно чинити скрізь, щоб не ламати голову над унікальною назвою класу.
Основні елементи
Навігаційне меню / багаторівневе. Це найважливіший і найскладніший елемент будь-якого сайту.
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul>
<li class="active"><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Тільки чистий список. Ніяких класів ні на <li>, ні на <a>, і також не можна додавати класи на вкладені <ul>, усі класи додаються відносно батьківського <ul>. Іноді краще (гнучкіше) розташувати меню в блоці з класом menu, і не вішати його на батьківський <ul>, оскільки залежно від CMS назва може відрізнятися і так буде універсальніше. Єдиний клас можна додавати тільки на <li> – це клас активного стану- active, ось у такому вигляді <li class="active">.
Зазвичай у пункту автивного стану така ж поведінка, як у посилання меню за наведенням, тому, якщо дизайнер цього не показав, то необхідно прописати активний пукнт такий самий, як і за наведенням.
Приклад реалізації випадаючого навігаційного меню на HTML/CSS.
Списки
Оскільки у нас використовується і має використовуватися reset.css, який обнуляє всі стандартні відступи та інші властивості, то всі списки <ul>, <ol> будуть обнулені, не буде ні булетів, ні цифр. Їх потрібно буде окремо прописувати щодо тематичної області (текстової) і тільки там, оскільки списки в нас є в хедері щонайменше, а часто є ще окреме навігаційне меню у футері.
Кнопки
Зазвичай, це тег із class="btn". При цьому, розрізняємо кнопки для форм і кнопки взагалі. Для форм використовують <input> та <button>, для всього іншого – тег <a>. Ось у такому вигляді <a href="#" class="btn">Button</a>. Якщо кілька різних кнопок і вони схожі між собою, то потрібно робити гнучко, щоб можна було додавати додатковий клас, щоб змінювати розмір і/або колір кнопки <a href="#" class="btn small orange">Button</a> – у такому вигляді.
Картинки
Картинки, які використовуються в контенті, обертаються в тег <figure>, якщо у картинки є підпис, то обертається в figcaprion
<figure>
<img src="/images/img-01.jpg" alt="">
<figcaption>title</figcaption>
</figure>
Пагінація (розбивка на сторінки)
<ul class="pagin">
<li class="prev"><a href="#"><</a></li>
<li><a href="#">1</a></li>
<li><span>2</span></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="next"><a href="#">></a></li>
</ul>
Для поточної сторінки немає посилання, що логічно, її клікнути не можна. Для решти є посилання, перше й останнє посилання – вперед і назад, куточки вставляємо тільки як спецсимволи
Вас може зацікавити