Различия

Показаны различия между двумя версиями страницы.

--- software:development:ps_pycharm:html5:lesson:lesson.html_1 [2023/08/20 19:29] – [Охарактеризуем специфику HTML5:] vladpolskiy
+++ software:development:ps_pycharm:html5:lesson:lesson.html_1 [2023/08/20 20:05] (текущий) – vladpolskiy
@@ Строка 10: / Строка 10: @@
 <p>Моя кошка очень раздражена</p>
 </code>
 ===== Анатомия HTML элемента =====
 Давайте рассмотрим элемент абзаца более подробно.
 {{:software:development:ps_pycharm:html5:lesson:grumpy-cat-small.png?|grumpy-cat-small}}
+  - **Открывающий тег (Opening tag)**: Состоит из имени элемента (в данном случае, **<p>**), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
+  - **Закрывающий тег (Closing tag)**: Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
+  - **Контент (Content)**: Это контент элемента, который в данном случае является просто текстом.
+  - **Элемент(Element)**: Открывающий тег, закрывающий тег и контент вместе составляют элемент.
+Элементы также могут иметь атрибуты, которые выглядят так:
-==== Ключевые особенности стандарта XHTML: ====
+{{:software:development:ps_pycharm:html5:lesson:anatomy_of_an_html_element.png?|anatomy_of_an_html_element.png}}
-  * все элементы пишутся строго в нижнем регистре;
-  * закрываются даже одиночные теги (например, **<img />**);
-  * основная кодировка – **UTF-8**;
-  * все атрибуты записываются только в развернутом виде (например, если в **HTML5** отключить возможность выбора элемента из выпадающего списка можно указанием простого атрибута **disabled**, то в **XHTML** обязательно писать **disabled="disabled"**).
-Верстать код сайта на основании стандарта **XHTML** не обязательно, так как **HTML5** и современные браузеры не столь требовательны, но он может встретиться (и этого не нужно пугаться).
-===== Консорциум Всемирной сети =====
-Количество сайтов в сети настолько велико, что уже не хватает заложенного объема **IPv4-адресов** для их идентификации. С каждым годом число растет, что логично приводит к необходимости стандартизации их написания и отображения конечным пользователям.
-Некоммерческая организация **W3-Консорциум (www.w3.org)** разрабатывает единые принципы и рекомендации для производителей Интернет-контента, чтобы обеспечить максимальную совместимость между продуктами, платформами, программами. Это позволяет делать Всемирную сеть максимально удобной и универсальной.
-{{:software:development:ps_pycharm:html5:lesson:1_1.png?|W3-Консорциум}}
-\\
-Помимо непосредственно стандартов **HTML** компания занимается утверждением и других **связанных положений**:
-  - CSS (каскадные таблицы стилей),
-  - DOM (объектная модель документа),
-  - PNG (формат хранения растровых изображений),
-  - HTTP (протокол передачи данных),
-  - RDF (модель представления метаданных),
-  - XPath (язык для доступа к частям XML-документов) и др
-Важно и то, что вы всегда можете проверить соответствие вашего кода стандарту при помощи **валидаторов**. В сети их огромное множество и для разных целей: **HTML, CSS, JavaScript**. Сервисы позволяют валидировать свой или чужой код. Для этого требуется ввести в поисковике требуемый (например, **HTML5** валидатор), вставить туда код и произвести проверку. Все нарушения будут подсвечены соответствующим цветом и подсказками. Ими пользуются все разработчики для верификации качества работы программистов. Все современные **IDE** дают возможность валидировать код (в большинстве случаев для этого потребуется установка плагина).
-===== HTML теги. Структура тега =====
-<WRAP center round tip 100%>
-**Тег** – отдельный HTML элемент, позволяющий вкладывать или оборачивать части документа для определенного отображения или поведения.
-</WRAP>
-Говоря проще, при помощи тегов вы можете выделять текст, вставлять рисунки и видео, передавать служебную информацию, обозначать ссылки.
-Теги могут дополняться атрибутами, свойствами. С их помощью можно модифицировать содержимое элемента, уникализировать его.
-На текущий момент насчитывается около **120 тегов**, а если убрать устаревшие, то и того меньше. Их не так сложно запомнить, да и наиболее часто используемых несколько десятков.
-Рассмотрим **типичную структуру web-элемента**:
-  - **Открывающий тег** (все теги представляются в угловых скобках, в открывающем, если требуется, перечисляются атрибуты);
-  - **Закрывающий тег** (присутствует не во всех тегах, идентифицируется косой чертой);
-  - **Атрибут**, свойство (название свойства и его значение предпочтительно в двойных кавычках, возможно использовать и одинарные);
-  - **Содержимое** (внутреннее содержимое тега, обычно в виде текста либо других вложенных тегов).
-\\
-{{ :software:development:ps_pycharm:html5:lesson:2_2.2.svg |Структура web-элемента}}
-Подобным образом выглядит любой элемент web-страницы. При наличии нескольких атрибутов они разделяются пробелом. Теги не всегда могут иметь свойства или содержимое.
-Первичное знакомство с разнообразием html-элементов можно осуществить на любом сайте. Если вы находитесь в браузере Chrome, то прямо сейчас можно нажать сочетание клавиш **CTRL + U** (откроются **Инструменты разработчика**) и просмотреть код данной страницы . Фактически, весь этот набор тегов и свойств в сочетании с **JavaScript** обрабатывается браузером, чтобы вы смогли удобно пользоваться текущим сайтом.
-Сайт представляет собой совокупность таких страниц, связанных между собой внутренними и внешними гиперссылками.
-Далее поговорим о **классификации тегов и атрибутов**. Более детальное их описание и примеры будут представлены в следующем уроке.
-===== HTML теги. Парные и одиночные теги =====
-Как мы уже поняли выше, теги бывают парными или одиночными.
-==== Одиночные тэги ====
-Одиночных элементов насчитывается **16 штук**. Наиболее часто используемые:
-  - **<!doctype>** Некая инструкция браузерам для определения того, к какому типу относится документ, какую версию **HTML** использовать.
-  - **<meta>** Необходим для задания дополнительной информации о странице, указывается в заголовке **HTML-документа**. Как и вышеупомянутый тег, не влияет на внешний вид страницы, так как носит служебный характер.
-  - <hr> Задает горизонтальную линию для визуального отделения элементов страницы, применяется для отделения заголовка от основного текста, выделения логических блоков. По умолчанию представляет собой серую линию толщиной в 1 пиксель.
-  - **<br>** Перенос нижеидущего содержимого на новую строку. Может потребоваться для избегания длинных полотен текста. Небольшие куски информации воспринимаются лучше, чем огромный абзац.
-  - **<img>** Чтобы вставить на страницу графический элемент. Рисунки можно демонстрировать в одном из следующих форматов: **jpg, png, gif**. Само изображение в документ не вставляется непосредственно, указывается ссылка на него (локальная или из другого источника), а уже браузер загружает картинку и демонстрирует пользователю.
-  - **<input>** Применяется в формах и задает тип полей (могут быть текстовыми, числовыми, позволяют выбирать дату, файл, отмечать те или иные элементы списка и т.п.).
-{{ :software:development:ps_pycharm:html5:lesson:2_2.4.svg |}}
-==== Парные тэги ====
-Парные теги обязательно имеют **закрывающий тег** и содержимое (пусть даже и пустое). В **HTML** их больше всего (около **100**). В качестве примера приведем некоторые:
-  - **<p>Текст</p>** Представляет заключенный внутри текст в виде отдельного абзаца. По умолчанию он имеет отступ и отделяется от предыдущего и последующего элементов дополнительным разрывом (это поведение можно поменять).
-  - **<a href="#">Текст ссылки</a>** Используется для задания и представления в документе ссылки (она может вести на другую страницу сайта, определенный участок на самой странице или любой адрес в Интернете).
-  - **<small>Текст</small>** Делает текст меньшего масштаба по сравнению с основным.
-  - **<mark>Текст</mark>** Выделяет текст по подобию маркера (аналог того, как на листах бумаги подчеркивают самое важное фломастером) желтым цветом.
-<WRAP center round info 100%>
-С помощью CSS имеется возможность менять поведение практически всех тегов.
-</WRAP>
-===== HTML теги. Блочные и строчные теги =====
-Поведение любого тега сегодня (в стандарте **HTML5**) легко изменить по своему усмотрению. Деление элементов на блочные и строчные сложилось исторически (именно поэтому они изначально относятся к одному из этих типов). Сейчас таких типов больше, но их определение связано с каскадными таблицами стилей, о которых пойдет детальная речь в одном из последующих уроков.
-**Блочные теги** занимают всю ширину страницы или родительского элемента. Если вы зададите два таких тега подряд, то каждый из них будет начинаться как бы с новой строки, абзаца.
-**Строчные теги** не имеют строго размера. Он зависит от того, сколько символов в них содержится. Несколько подряд идущих строчных элементов не будут разделяться новыми строками, а будут выстраиваться друг за другом.
-<WRAP center round info 100%>
+Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, **class - имя атрибута**, а **nase - значение атрибута**. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
-В **CSS-свойствах** отображение тегов можно менять по следующим типам:
-  - **Блочные (display: block)** – получает свойство блочности, занимает всю ширину страницы;
+Атрибут всегда должен иметь:
-  - **Строчные (display: inline)** – тег становится строчным;
-  - **Флекс (display: flex)** – элемент приобретает свойство особого типа блоков – флекс (ведет себя как блок, но внутреннее содержимое гибко настраивается);
-  - **Грид (display: grid)** – еще один блочный тип с особенностями внутреннего поведения элементов (строятся на основании «сетки», состоящей из строк и колонок);
-  - **Таблица (display: table)** – тег и его содержимое будут наследовать свойства таблиц;
-  - **Строчный блок (display: inline-block)** – блочный элемент ведет себя как строка, но сохраняет часть свойств (можно задать размер, границы).
-  - **Спрятанный (display: none)** – делает элемент невидимым и полностью удаляет его отображение со страницы.
-Существуют и другие свойства отображения, многие из которых узконаправлены и зачастую экспериментальны.
+  - Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
-</WRAP>
+  - Имя атрибута, за которым следует знак равенства.
+  - Значение атрибута, заключённое с двух сторон в кавычки.
-**1. Блочный тэг <div>**
+===== Вложенные элементы =====
-Самый популярный блочный тег времен HTML 4. Основная его задача – отобразить содержимое как блок. Он и сегодня входит в список часто используемых. Достаточно открыть код любой страницы в сети и проанализировать его. Почти везде <div> применяется максимально широко. Посмотрим на простой пример.
+Вы также можете располагать элементы внутри других элементов — это называется **вложением**. Если мы хотим заявить, что наша **кошка** очень раздражена, мы можем заключить слово "очень" в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:
-<code html Пример - HTML>
-<div>Этот текст занимает всю ширину страницы</div>
-<div>Этот текст начнется с новой строки</div>
-</code>
-Если сохранить приведенный код в виде **html-файла** и открыть в браузере, то увидим, что куски текста начинаются с разных строк. Причина – в сути блочных элементов (они стремятся занять всю доступную ширину, которая им предоставлена).
-Другие блочные теги:
-  - **<table></table>** Позволяет рисовать таблицы
-  - **<p>Параграф</p>** Обозначает параграф текста
-  - **<h1>Большой заголовок</h1>** Для оформления заголовка самого верхнего уровня (в роли такового обычно выбирается основная статья страницы).
-  - **<form></form>** Отражает на сайте форму (авторизации, регистрации, опроса и др.)
-{{ :software:development:ps_pycharm:html5:lesson:2_2.5.svg |}}