2_Структура HTML. Теги, атрибуты

Август 23, 2022

Главная
Информатика
2_Структура HTML. Теги, атрибуты

Содержание

2. Теги Основной единицей в HTML являются теги. Теги записываются в угловых скобках . Тегам даётся имя
3. В XHTML был принят способ указания одиночных тегов в отличии от открывающих тегов - Однако в
4. Парные теги Парные теги подразумевают вложение. Вложением может быть как просто текст, так и другие теги.
5. Атрибуты тегов Атрибуты дают дополнительную информацию о теге, вносят корректировки в поведение тега и являются характеристикой
6. Иерархическая структура тегов Теги объединены в иерархию, то есть вложение тегов используется ПОСТОЯННО Для описания отношения
7. DOCTYPE Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа).
8. Вариации DOCTYPE до HTML5 HTML 4.01 Строгий синтаксис HTML. Переходный синтаксис HTML. В HTML-документе применяются фреймы.
9. DOCTYPE HTML5 Для всех документов
10. Тег Парный тег, используется для определения границ html кода Здесь весь код html
11. Тег head Тег предназначен для хранения других элементов, цель которых — помочь браузеру в работе с
12. Теги внутри head Моя страница Тег для отображения заголовка вкладки или окна Тег для записи дополнительной
13. Необходимые meta-теги Мета тег для указания кодировки текста. Указывайте UTF-8 для избежания проблем с кириллицей.
14. Необходимые meta-теги Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта),
15. Дополнительные meta-теги Meta-тег description Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега
16. Meta-тег keywords Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На
17. Тег Определяет содержимое страницы. Всё что будет в теге body, будет видно в браузере в окне
18. Итоговая заготовка страницы Моя страница
19. Теги заголовков Теги заголовков олицетворяют 6 уровней заголовков.
20. Ещё теги Представляет собой один абзац текста/ Представляет собой текст с сохранением всех пробельных символов/ Устанавливает
21. Больше тегов Попробуйте определить сами
22. Значение тега Является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или
23. ГЛОБАЛЬНОЕ НАЗНАЧЕНИЕ HTML Запомните!!! HTML определяет только содержимое страницы, то есть указывает, что где находится, но
24. Вывод символов в HTML Некоторые спецсимволы задаются с помощью набора кода Символы можно легко нагуглить
25. Первое задание Страница со шпаргалкой, все теги, которые вы прошли с описанием их назначения.
27. Скачать презентацию

Слайд 2

Теги
Основной единицей в HTML являются теги.
Теги записываются в угловых скобках <>.

Тегам даётся имя по тексту внутри скобок.
Теги бывают двух типов - парные и одиночные.
Парные теги имеют открывающий и закрывающий теги:
- открывающий, - закрывающий
Одиночные не имеют закрывающих тегов.

Слайд 3

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

открывающих тегов -
Однако в HTML5 такое требование не обязательно, поддерживаются оба способа указания одиночных тегов
равнозначно в случае, если тег одиночный

Слайд 4

Парные теги
Парные теги подразумевают вложение. Вложением может быть как просто текст,

так и другие теги.
Когда проговаривается “текст внутри тега” , подразумевается такая конструкция:
Текст
Когда говорится “один тег внутри другого”, то конструкция следующая:

Важно! Если парный тег открылся внутри другого тега, то он должен закрыться там же!

Слайд 5

Атрибуты тегов
Атрибуты дают дополнительную информацию о теге, вносят корректировки в поведение

тега и являются характеристикой тегов.
Атрибуты могут быть как специфическими для отдельных тегов, так и общими для всех. Атрибуты записываются после названия в открывающем теге до закрывающейся угловой скобки. Значение атрибута указывают после знака “=” в кавычках.

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

Слайд 6

Иерархическая структура тегов
Теги объединены в иерархию, то есть вложение тегов используется

ПОСТОЯННО
Для описания отношения тегов используют фразы родительский, дочерний и соседний.

Слайд 7

DOCTYPE
Элемент предназначен для указания типа текущего документа — DTD (document

type definition, описание типа документа).
Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях.

Слайд 8

Вариации DOCTYPE до HTML5
HTML 4.01

Строгий

синтаксис HTML.

Переходный синтаксис HTML.

В HTML-документе применяются фреймы.

Слайд 9

DOCTYPE HTML5

Для всех документов

Слайд 10

Тег
Парный тег, используется для определения границ html кода

Здесь

весь код html

Слайд 11

Тег head
Тег предназначен для хранения других элементов, цель которых —

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

Здесь дополнительная информация

Слайд 12

Теги внутри head
Моя страница
Тег для отображения заголовка вкладки или окна

Тег для

записи дополнительной информации.
Есть очень много различных вариаций тегов , но мы рассмотрим только важнейшие из них.

Слайд 13

Необходимые meta-теги

Мета тег для указания кодировки текста.
Указывайте UTF-8

для избежания проблем с кириллицей.

Слайд 14

Необходимые meta-теги

Задает некоторые параметры окна просмотра в браузере.

Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale - коэффициент масштабирования при первом открытии страницы.
Мета тег для адаптивного сайта: указывает, что ширина вьюпорта подгоняется под размеры устройства:

Слайд 15

Дополнительные meta-теги
Meta-тег description
Краткое описание документа (страницы сайта). Поисковые системы могут использовать

содержимое мета тега description для вывода в сниппете поисковой выдачи.

Слайд 16

Meta-тег keywords
Ключевые слова страницы. Ранее использовался для указания поисковым системам основные

смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords.

Дополнительные meta-теги

Слайд 17

Тег
Определяет содержимое страницы.
Всё что будет в теге body, будет видно

в браузере в окне сайта.

Слайд 18

Итоговая заготовка страницы

Моя</div></h2><div class="slides-content">страница

Слайд 19

Теги заголовков

Теги заголовков олицетворяют 6 уровней заголовков.

Слайд 20

Ещё теги

Представляет собой один абзац текста/

Представляет собой текст с сохранением всех

пробельных символов/

Устанавливает перевод строки в тексте (возврат каретки)

Слайд 21

Больше тегов
Попробуйте определить сами

Слайд 22

Значение тега
Является частью текста стилистически отличающейся от нормального текста, не

носящий какого-либо специального значения или важности.
https://developer.mozilla.org/ru/docs/Web/HTML/Element/b

Слайд 23

ГЛОБАЛЬНОЕ НАЗНАЧЕНИЕ HTML
Запомните!!!
HTML определяет только содержимое страницы, то есть указывает, что

где находится, но не определяет как это будет выглядеть.
CSS определяет то, как будет выглядеть сайт.

Слайд 24

Вывод символов в HTML
Некоторые спецсимволы задаются с помощью набора кода
Символы можно

легко нагуглить

Слайд 25

Первое задание
Страница со шпаргалкой, все теги, которые вы прошли с описанием

их назначения.

2_Структура HTML. Теги, атрибуты

Содержание

ТегиОсновной единицей в HTML являются теги.Теги записываются в угловых скобках <>.

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

Парные тегиПарные теги подразумевают вложение. Вложением может быть как просто текст,

Атрибуты теговАтрибуты дают дополнительную информацию о теге, вносят корректировки в поведение

Иерархическая структура теговТеги объединены в иерархию, то есть вложение тегов используется

DOCTYPEЭлемент предназначен для указания типа текущего документа — DTD (document

Вариации DOCTYPE до HTML5HTML 4.01Строгий

DOCTYPE HTML5Для всех документов

Тег Парный тег, используется для определения границ html кода Здесь

Тег headТег предназначен для хранения других элементов, цель которых —

Теги внутри headМоя страницаТег для отображения заголовка вкладки или окнаТег для

Необходимые meta-теги Мета тег для указания кодировки текста. Указывайте UTF-8

Необходимые meta-тегиЗадает некоторые параметры окна просмотра в браузере.

Дополнительные meta-тегиMeta-тег descriptionКраткое описание документа (страницы сайта). Поисковые системы могут использовать

Meta-тег keywordsКлючевые слова страницы. Ранее использовался для указания поисковым системам основные

Тег Определяет содержимое страницы.Всё что будет в теге body, будет видно

Итоговая заготовка страницы Моя</div></h2><div class="slides-content">страница

Теги заголовковТеги заголовков олицетворяют 6 уровней заголовков.

Ещё тегиПредставляет собой один абзац текста/Представляет собой текст с сохранением всех

Больше теговПопробуйте определить сами

Значение тега Является частью текста стилистически отличающейся от нормального текста, не

ГЛОБАЛЬНОЕ НАЗНАЧЕНИЕ HTMLЗапомните!!!HTML определяет только содержимое страницы, то есть указывает, что

Вывод символов в HTMLНекоторые спецсимволы задаются с помощью набора кодаСимволы можно

Первое заданиеСтраница со шпаргалкой, все теги, которые вы прошли с описанием

Похожие презентации