5.1. Семантические элементы. Структурные разделы

5.1. Семантические элементы. Структурные разделы. Пример

1.39M

Category:

internet

Интернет-технологии_лекция6 [l4QpBk]

1. Интернет-технологии_6

Плахотникова Мария Александровна, к.э.н., доцент, доцент
Академического департамента
1

2. Лекция 6. Блочная модель

6.1. Семантические элементы. Структурные
разделы
6.2. Блочные и строчные элементы
6.3. Работа с блочной моделью
2

3. 5.1. Семантические элементы. Структурные разделы

Семантические элементы нужны для:
• структурирования;
• группировки контента;
• разметки текстового содержимого.
3

4. 5.1. Семантические элементы. Структурные разделы

Структурные разделы
Теги семантической разметки
• <article> - статья, произведение
• <section> - раздел документа
• <nav> - раздел страницы с навигационными ссылками
4

5. 5.1. Семантические элементы. Структурные разделы

5
Элемент <article>
Элемент <article> - это законченное или автономное произведение (статья) в документе,
странице, приложении или сайте.
Структура элемента:
• Заголовок
• Текст
• Имя автора
• Дата публикации
• Метки, рейтинг и т.п.
Особенности:
Внутри элемента <article> запрещено использовать элемент <main>

6. 5.1. Семантические элементы. Структурные разделы

<title>article</title>
</head>
<body>
<article>
<header>
<h1>Следы невиданных зверей</h1>
</header>
<p>История о том, как возле столовой появились загадочные розовые
следы с шестью пальцами, и почему это случилось.</p>
</article>
</body>
6

7. 5.1. Семантические элементы. Структурные разделы

Элемент <section>
Элемент <section> - это общий раздел документа или приложения.
Примеры разделов:
• главы
• вкладки
• пронумерованные параграфы
7

8. 5.1. Семантические элементы. Структурные разделы

Пример
<article>
<h1>Яблоко - плод яблони</h1>
<section aria-label="Красные яблоки">
<h3>Ред Делишес</h3>
<p>Эти яблоки часто встречаются в магазинах</p>
</section>
<section aria-label=“Желтые яблоки">
<h3>Грушовка</h3>
<p>Это старинный сорт яблок</p>
</section>
</article>
8

9. 5.1. Семантические элементы. Структурные разделы

aria-label - это атрибут который предоставляет текстовую метку
элементу <section>
Пример использования:
<section aria-label="Метка для этого раздела"><p>Содержимое этого
раздела</p></section>
Скринридер — это программа, которая преобразует текстовую
информацию на экране в речь или в тактильные сигналы, позволяя
людям с нарушениями зрения взаимодействовать с компьютером или
мобильным устройством.
9

10. 5.1. Семантические элементы. Структурные разделы

10
Элемент <nav>
Элемент <nav> - это раздел страницы с навигационными ссылками, который
ссылается на другие страницы или части внутри страниц.
Особенности: используется для основной навигации

11. 5.1. Семантические элементы. Структурные разделы

<head>
<meta charset="utf-8">
<title>nav</title>
</head>
<body>
<h1>Чебурашка и крокодил Гена</h1>
<nav>
<a href="page/1.html">Чебурашка</a> |
<a href="page/2.html">Гена</a> |
<a href="page/3.html">Шапокляк</a>
</nav>
<section>
<h2>Добро пожаловать!</h2>
</section>
</body>
11

12. 5.1. Семантические элементы. Структурные разделы

Элемент <main>
Тэг <main> - это основное содержание страницы, которое не
повторяется на других страницах.
Особенности:
• должен быть один на странице
• содержимое должно быть уникальным для документа
• элемент не должен быть вложен в теги <article>, <aside>, <footer>, <header>
или <nav>
• для элемента <main> доступны глобальные атрибуты и события
Нельзя: включать в него то, что повторяется на других страницах
(навигация, копирайт и т.п.)
12

13. 5.1. Семантические элементы. Структурные разделы

Преимущества <main>
• Семантическая структура
• Улучшенная доступность
• Структурирование контента
• Понимание поисковыми системами
• Локализация
• SEO (поисковая оптимизация)
13

14. 5.1. Семантические элементы. Структурные разделы

Элемент <main> используется для
Элемент <main> НЕ используется для
Статей
Шапки сайта (header)
Блогов
Футера (footer)
Продуктов
Навигационной панели (nav)
Новостей
Боковых панелей (aside)
Контента, который пользователь видит
сразу после загрузки страницы
Фрагменты контента, которые не
представляют собой основной части
страницы
14

15. 5.1. Семантические элементы. Структурные разделы. Пример

<!DOCTYPE html>
<html>
<head>
<title>Моя
страница</title>
</head>
<body>
<header>
<h1>Заголовок</h1>
</header>
<nav>
<ul>
<li><a
href="#">Ссылка
1</a></li>
</ul>
</nav>
<main>
<article>
<h2>Основной заголовок</h2>
<p>Основной текст статьи.</p>
</article>
</main>
<footer>
<p>Авторские права</p>
</footer>
</body>
15

16. 5.1. Семантические элементы. Структурные разделы

Элемент <footer>
Тэг <footer> - заключительная часть смыслового раздела или
всего сайта («подвал»)
Особенности:
• таких элементов на станице может быть несколько
• к этому элементу применимы только глобальные атрибуты
• не создаёт новый раздел в структуре HTML-документа
• тег <footer> всегда находится внутри контейнера <body>
16

17. 5.1. Семантические элементы. Структурные разделы

Синтаксис: Тег <footer> парный, должен всегда закрываться
</footer>
Важно:
• у <footer> по умолчанию блочные стили
• нельзя вкладывать в <address>, <header> или другой <footer>.
• контакты и информацию об авторе желательно поместить в
контейнер <address>, а его добавить в <footer>.
17

18. 5.1. Семантические элементы. Структурные разделы

Чем заменить тег <footer>
Проблема
Решение
Нужно создать колонтитул для
элемента
тег <div> или <section>
Нужно указать контактную
информацию автора или ссылки
на связанные документы
тег <address>
18

19. 5.1. Семантические элементы. Структурные разделы. Пример

<footer>
<nav>
<ul>
<li><a href='#'>О нас</a></li> <li><a href='#'>Контакты</a>
</li> <li><a href='#'>Правила</a></li>
</ul>
</nav>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Email: info@htmlacademy.ru</p>
</footer>
19

20. 5.2. Блочные и строчные элементы в HTML

Поток документа в HTML — это порядок вывода
элементов на страницу.
Поток документа в HTML можно изменить с помощью CSSправил (свойство position: absolute).
Выделяют два вида HTML-элементов:
• Блочные (теги <div>, <h>, <p>)
• Строчные (<span>, <a>, <b>, <br>, <code>)
20

21. 5.2. Блочные и строчные элементы в HTML

Блочные элементы – это большие строительные блоки вебстраницы.
Особенности:
• до и после блочного элемента существует перенос строки
• блочным элементам можно задавать ширину, высоту
• по умолчанию блоки занимают всё доступное пространство по
горизонтали
• текст в блочных элементах по умолчанию выравнивается по
левому краю.
21

22. 5.2. Блочные и строчные элементы в HTML

Строчные элементы используются для разметки частей
содержимого элементов.
Особенности:
• занимают только то пространство, которое ограничено
тегами.
• браузер не добавляет перенос строки
• для строчных элементов нельзя задать высоту и ширину.
• по умолчанию блочные элементы располагаются сверху
вниз, а строчные — слева направо.
• внутрь строчных элементов допустимо помещать другие
строчные элементы, вставлять блочные элементы внутрь
строчных запрещено.
22

23. 5.2. Блочные и строчные элементы в HTML

23
Свойство display определяет тип отображения элемента на вебстранице
Особенности:
• не наследуется
• с помощью свойства display можно изменить тип генерируемого
контейнера

24. 5.2. Блочные и строчные элементы в HTML

Значения свойства display
Значение
Пояснение
block
элемент отображается как блок и занимает всю доступную
ширину
inline
элемент отображается как строчный элемент и не создаёт
новый блок
inline-block
элемент отображается как строчный элемент, но его
содержимое может быть отформатировано как блок
none
элемент не отображается на веб-странице и его содержимое
не занимает места
24

25. 5.3. Работа с блочной моделью

Блочная модель - это способ, которым браузеры отображают
HTML-элементы
Ключевое понятие – блочный уровень.
Основные принципы блочной модели:
• занимает всю доступную ширину;
• вертикальное размещение;
• автоматическое создание блоков.
25

26.

26
Примеры блочных элементов:
<h1> - <h6>
<p>
<div>
<article>
<aside>
<section>
<header>
<footer>
<nav>
<img> (в контексте контейнера)

27. 5.3. Работа с блочной моделью

27
Свойства блочной модели:
<div> {
1. Высока и ширина блока устанавливаются свойствами width: 400px;// ширина
height: 100px;//высота
height и width;
margin: 20px;// внешние отступы
2. Внутренние отступы. В CSS их устанавливает свойство padding: 20px;//внутренние
padding;
отступы
border: 6px solid #949599; //
3. Границы устанавливаются свойством border;
границы
4. Внешние отступы устанавливаются свойством margin. }

28. 5.3. Работа с блочной моделью

Общая ширина элемента может быть рассчитана по формуле:
margin-right + border-right + padding-right + width + padding-left +
border-left + margin-left
Общая высота элемента может быть рассчитана по формуле:
margin-top + border-top + padding-top + height + padding-bottom +
border-bottom + margin-bottom
28

29. 5.3. Работа с блочной моделью

<div> - универсальный контейнер без собственного значения.
Особенности:
1. Используется в паре с атрибутом class, который придает ему
смысл.
2. Слишком много тэгов <div> использовать нельзя.
29

30. 5.3. Работа с блочной моделью. Примеры

30
<div>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</div>
<div style="width: 200px; background-color:
lightgray;">
<p style="margin-top: 20px;">Первый абзац.</p>
<p style="margin-bottom: 20px;">Второй абзац.</p>
</div>

31. 5.3. Работа с блочной моделью

Свойство margin
• устанавливает
пустое
пространство
от
внешнего
края border, padding или содержимого блока
• под margin нет своего фона и он принимает фон родительского
элемента
• используется для создания вертикальных и горизонтальных
отступов между элементами
• свойство margin может быть отрицательным (например: -10px),
а также принимать значение auto
• у него может быть от одного до четырёх значений
• Применяется, как к блочным, так и к строчным элементам
31

32. 5.3. Работа с блочной моделью

Свойство margin применяется к
• блочным элементам (вертикально);
• строчно-блочным элементам (вертикально и горизонтально);
• строчным элементам (только горизонтально)
32

33. 5.3. Работа с блочной моделью

У margin есть свойства для каждой стороны
Свойства
Пояснения
margin-top
отступ сверху
margin-right
отступ справа
margin-bottom
отступ снизу
margin-left
отступ слева
Вместо четырех свойств можно задать одно.
Синтаксис:
margin: отступ_сверху отступ_слева отступ_снизу отступ_справа;
Пример: margin: 5px 10px 15px 20px;
33

34. 5.3. Работа с блочной моделью. Пример

35. 5.3. Работа с блочной моделью

Единицы измерения в HTML
px -пиксели
em –размер относительно шрифта родителя
rem –размер относительно шрифта <html>
% –размер относительно свойства родителя
nw, vh, vmin, vmax –размер относительно экрана
35

36. 5.3. Работа с блочной моделью

Значения margin
36

37. 5.3. Работа с блочной моделью

Значение auto
• Свойство margin позволяет выравнивать
элемент по центру горизонтали, если
использовать значение auto и задать ширину
элемента через width.
• Выравнивание блока по центру через значение
auto работает только в сочетании с width.
37

38. 5.3. Работа с блочной моделью

39. 5.3. Работа с блочной моделью

39
Отрицательное значение margin
Пример:
margin-top:-10px - поднимает блок вверх на 10 пикселей,
margin-left:-10px - сдвигает блок влево.
Значения по умолчанию для margin
Условие
для <body>
Значение
margin = 8px
для списков <ul>, <ol>, <dl>
margin-top и margin-bottom =1em
для <blockquote> и <figure>
margin-left и margin-right = 40px

40. 5.3. Работа с блочной моделью. Пример

Обнуление margin
40

41. 5.3. Работа с блочной моделью

Схлопывание margin у соседних элементов
• Используется для корректного отображения текста в абзацах
41

42. 5.3. Работа с блочной моделью. Пример

43. 5.3. Работа с блочной моделью. Пример

44. 5.3. Работа с блочной моделью

44
Свойство padding
• используется для того, чтобы задать расстояние от границы элемента
до внутреннего содержимого;
• работает на всех четырех сторонах строчных элементов;
• вертикальные поля (сверху и снизу) могут выходить за пределы
строки;
• применяется для ячеек таблицы td, th { padding: 3px; };
• не допускает отрицательного значения;

45. 5.3. Работа с блочной моделью

Для пустых элементов должен соблюдаться ряд условий:
• для элемента не должен быть задан padding сверху или снизу;
• для элемента не должен быть задан border сверху или снизу;
• высота элемента не должна быть указана через свойство height
или min-height.
45

46. 5.3. Работа с блочной моделью

Значения padding
46

47. 5.3. Работа с блочной моделью

47
Свойства padding
Свойства
Пояснения
padding-top
значение сверху
padding-right
значение справа
padding-bottom
значение снизу
padding-left
значение слева
Вместо четырех свойств можно задать одно.
Синтаксис:
padding: отступ_сверху отступ_слева отступ_снизу отступ_справа;
Пример: padding : 5px 10px 15px 20px;

48. 5.3. Работа с блочной моделью. Пример

49. 5.3. Работа с блочной моделью. Пример

50. 5.3. Работа с блочной моделью. Пример

English Русский Rules