HTML & CSS
Семантика в верстке
Семантическая верстка, это такой способ верстки, когда первоочередной задачей становится создание такой структуры документа, которая максимально упрощает алгоритмам машинного анализа работу по определению смысла, назначения контента и степени его значимости.
Принципи семантики:
- Формирование структури
- Визуальное представление
Шапка сайтА
Карточка товара/услуги
Футер сайтА
<header> группирует контент, который не нужен для раскрытия основного контента секции, но при этом прямо с ним связан.
Типичные представители такого контента это:
заголовок, навигация по материалу - содержание, рейтинг и т.д.
В некоторых случаях, когда контент прямо связан с личностью автора, например блог пост, имя автора также может быть в <header>
<footer> - эквивалентен header стой разницей, что группирует контент, который не имеет прямого отношения к основному в секции.
Примеры такого контента:
Лицензионное соглашение, контактные данные, автор, дата написания материала, диаграммы, примечания и т.д.
<nav> - секция которая должна группировать только элементы навигации
<article> представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.
<section> представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа.
<address> указывает, что вложенный в него HTML-код предоставляет контактную информацию для человека или людей или для организации.
Муки вибора тега
- <article> vs <section>
- <ul> vs <ol>
- <b> vs <strong>
- <i> vs <em>
Проверка HTML рАзмЕтки
Проверка вложенности
Генератор HTML-дерева
Q & A
CSS (каскадные таблицы стилей) — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего html или xhtml). также может применяться к любым xml-доументам.
Reset.css vs Normalize.css
Перебивание стилей интерактивных элементов
Именования в CSS и читаемость кода
специфичность
1-0-0-0
0-1-0-0
0-0-1-0
0-0-0-1
!important
Калькулятор специфичности
излишяя Вложеность
Q & A
Сетки
Табличная верстка
<table cellpadding="0" cellspacing="0" width="860" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Содержание</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">© Все права защищены</td>
</tr>
</table>
HTML element: table suport
float
inline-block
inline-block in 2020+
flex
flex
flex
flex
flex
grid
grid
grid
grid
Q & A
Copy of HTML / CSS
By Anton Chyvikov
Copy of HTML / CSS
Slides for Kottans course 2020/2021
