Различия

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

--- software:development:ps_pycharm:html5:lesson:lesson.html_1 [2023/08/19 18:35] – [HTML теги. Структура тега] vladpolskiy
+++ software:development:ps_pycharm:html5:lesson:lesson.html_1 [2023/08/20 20:05] (текущий) – vladpolskiy
@@ Строка 1: / Строка 1: @@
-====== 2. HTML: Понятие, стандарты, тэги и атрибуты ======
+====== Основы HTML ======
-Понятие языка разметки гипертекста. Современные HTML-стандарты: HTML4 / 5, XHTML. Элементы HTML и их разновидности, структура тегов. Основные атрибуты тегов, классификация.
+**HTML (Hypertext Markup Language)** - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.
-====== HTML: Понятие, стандарты, тэги и атрибуты ======
+===== Что такое HTML на самом деле? =====
-===== Оглавление =====
+HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда [[software:development:ps_pycharm:html5:glossary:void_element|элементов]], которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
-  * [[#Понятие языка разметки HTML|Понятие языка разметки HTML]]
+<code>
-  * [[#Современные стандарты HTML:|Современные стандарты HTML:]]
+Моя кошка очень раздражена
-     * [[#Современные стандарты HTML|HTML4]]
+</code>
-     * [[#Ключевые особенности стандарта XHTML:|XHTML]]
+Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
-     * [[#Охарактеризуем специфику HTML5:|HTML5]]
+<code html>
-  * [[#Консорциум Всемирной сети.|Консорциум Всемирной сети.]]
+<p>Моя кошка очень раздражена</p>
-  * [[#HTML теги. Структура тега.|HTML теги. Структура тега.]]
-  * [[#HTML теги. Парные и одиночные теги.|HTML теги. Парные и одиночные теги.]]
-  * HTML теги. Блочные и строчные теги.
-  * HTML теги. Семантические теги.
-  * HTML теги. Классификация атрибутов:
-    - Универсальные атрибуты
-    - Уникальные атрибуты
-    - Специфические атрибуты
-    - Событийные атрибуты
-===== Понятие языка разметки HTML =====
-**HTML (HyperText Markup Language)** – это не язык программирования (как, например, Python), а так называемый язык разметки. Он необходим для сообщения браузеру способа отображения посещаемой вами веб-страницы. Вместо того, чтобы показывать сплошной текст, **HTML** позволяет обернуть его в специальные элементы **(теги)**. Это обеспечивает особое поведение передаваемой информации: она может выделяться курсивом, жирным текстом, транслироваться в виде таблиц, списков, рисунков и иных мультимедиа-данных.
-\\
-Теги способны нести как **структурный смысл** (например, показать, что перед нами таблица некоторой размерности с заголовком), так и **семантический** (выделить информацию определенным образом для поисковых роботов, чтобы те лучше индексировали ваш сайт, или браузеров).
-<WRAP center round info 100%>
-Полезно знать
-HTML разработал британец Тим Бернес-Ли в конце 1980-х годов, а как официальный стандарт HTML функционирует с 1993 года. Им же опубликован первый в мире сайт – http://info.cern.ch/hypertext/WWW/TheProject.html - работающий по сей день. На нем содержится информация о технологии World Wide Web, базирующейся на протоколе HTTP, адресации URI, разметке HTML.
-Сегодня Тим Бернес-Ли возглавляет W3-Консорциум (World Wide Web Consortium), основная задача которого: разработка и внедрение стандартов Интернета с учетом современных потребностей.
-</WRAP>
-Изначально HTML был кроссплатформенным, что создавало определенные трудности. Разные браузеры отображали теги по-своему, некоторые элементы могли восприниматься не всеми программами. Причина: отсутствие единого стандарта, поддерживаемого разработчиками. Особую проблему доставлял Internet Explorer (Microsoft долгое время следовала своим наработкам в понимании HTML), что требовало от сайтостроителей учета разных видов браузеров, чтобы содержимое страниц выглядело более-менее одинаковым у пользователей.
-\\
-В последние годы данная проблема фактически решена, так как крупные игроки на рынке браузеров пришли к соглашению. На просторах Интернета еще можно встретить сайты, учитывающие старые браузеры, но это уже не обязательное требование к верстальщикам. Чаще всего вас просто попросят обновить свой браузер, чтобы вы смогли увидеть сайт в задуманном виде (для эксперимента попробуйте зайти в любую социальную сеть с очень старого браузера).
-===== Современные стандарты HTML =====
-На протяжении курса мы будем придерживаться актуального стандарта **HTML5**. Он завершен в 2014 году и рекомендован для использования в современной веб-разработке. В него добавлены новые элементы, учитывающие специфику нынешнего сайтостроения и потребность в мультимедийных компонентах (аудио, видео, интерактивность).
-До этого 17 лет главенствующим стандартом являлся **HTML 4** (с 1997 года). Он встречается и сегодня на ряде сайтов. Определить его можно на основании так называемого доктайпа.
-<code html  Доктайп HTML4>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 </code>
-Это первая строка любого **HTML-документа**, позволяющего браузерам понять способ работы с содержимым страницы. Хоть стандарт и является устаревшим, в нем содержится основной набор тегов, которыми пользуются при создании сайтов. Важно учесть, что часть элементов уже не рекомендована к применению и со временем будет убрана.
-Несмотря на строгую типизацию в языке **HTML**, ряд браузеров достаточно лояльно относится к документам. Так, тег абзаца (обозначается **<p><\p>**) разработчик вполне может написать по своему усмотрению:
-  * **<p>Абзац<\p>** (написание в соответствии со стандартом);
-  * **<P>Абзац<\P>** (браузеры редко учитывают регистр тегов);
-  * **<p>Абзац** (некоторые верстальщики могут забыть поставить закрывающий тег, что никак не смутит новую версию практически любого браузера).
-Хорошая практика показывает, что нужно придерживаться некоего единого стиля. Чтобы как-то ограничить вольности программистов, внедрили стандарт **XHTML**. Он сочетает в себе **HTML** и **XML** форматы. Первоочередная задача данного стандарта – замена **HTML 4**. Однако после появления **HTML5** эта потребность несколько снизилась. Тем не менее, многие разработчики используют его и сегодня, чтобы гарантировать отсутствие ошибок в написании кода.
-==== Ключевые особенности стандарта XHTML: ====
-  * все элементы пишутся строго в нижнем регистре;
-  * закрываются даже одиночные теги (например, **<img />**);
-  * основная кодировка – **UTF-8**;
-  * все атрибуты записываются только в развернутом виде (например, если в **HTML5** отключить возможность выбора элемента из выпадающего списка можно указанием простого атрибута **disabled**, то в **XHTML** обязательно писать **disabled="disabled"**).
-Верстать код сайта на основании стандарта **XHTML** не обязательно, так как **HTML5** и современные браузеры не столь требовательны, но он может встретиться (и этого не нужно пугаться).
-==== Охарактеризуем специфику HTML5: ====
-  * добавлены семантические элементы (**<nav>, <section>, <article> и др.**), которые облегчают чтение структуры страницы как разработчикам, так и поисковым машинам;
-  * внедрена поддержка векторной графики и специальных форматов **(svg, canvas, MathML)**;
-  * представлены новые элементы управления **(dates, email, tel)**;
-  * удалены устаревшие теги **(big, center, isindex)**.
-<WRAP center round info 100%>
-**Итог**
-\\
-Таким образом, базис современной разработки – стандарт HTML5.
-</WRAP>
-===== Консорциум Всемирной сети =====
-Количество сайтов в сети настолько велико, что уже не хватает заложенного объема **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>
-Говоря проще, при помощи тегов вы можете выделять текст, вставлять рисунки и видео, передавать служебную информацию, обозначать ссылки.
-Теги могут дополняться атрибутами, свойствами. С их помощью можно модифицировать содержимое элемента, уникализировать его.
+===== Анатомия HTML элемента =====
+Давайте рассмотрим элемент абзаца более подробно.
+{{:software:development:ps_pycharm:html5:lesson:grumpy-cat-small.png?|grumpy-cat-small}}
-На текущий момент насчитывается около **120 тегов**, а если убрать устаревшие, то и того меньше. Их не так сложно запомнить, да и наиболее часто используемых несколько десятков.
+  - **Открывающий тег (Opening tag)**: Состоит из имени элемента (в данном случае, **<p>**), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
+  - **Закрывающий тег (Closing tag)**: Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
+  - **Контент (Content)**: Это контент элемента, который в данном случае является просто текстом.
+  - **Элемент(Element)**: Открывающий тег, закрывающий тег и контент вместе составляют элемент.
-Рассмотрим **типичную структуру web-элемента**:
+Элементы также могут иметь атрибуты, которые выглядят так:
-  - **Открывающий тег** (все теги представляются в угловых скобках, в открывающем, если требуется, перечисляются атрибуты);
+{{:software:development:ps_pycharm:html5:lesson:anatomy_of_an_html_element.png?|anatomy_of_an_html_element.png}}
-  - **Закрывающий тег** (присутствует не во всех тегах, идентифицируется косой чертой);
-  - **Атрибут**, свойство (название свойства и его значение предпочтительно в двойных кавычках, возможно использовать и одинарные);
-  - **Содержимое** (внутреннее содержимое тега, обычно в виде текста либо других вложенных тегов).
-\\
+Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, **class - имя атрибута**, а **nase - значение атрибута**. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
-{{ :software:development:ps_pycharm:html5:lesson:2_2.2.svg |Структура web-элемента}}
-Подобным образом выглядит любой элемент web-страницы. При наличии нескольких атрибутов они разделяются пробелом. Теги не всегда могут иметь свойства или содержимое.
-Первичное знакомство с разнообразием html-элементов можно осуществить на любом сайте. Если вы находитесь в браузере Chrome, то прямо сейчас можно нажать сочетание клавиш **CTRL + U** (откроются **Инструменты разработчика**) и просмотреть код данной страницы . Фактически, весь этот набор тегов и свойств в сочетании с **JavaScript** обрабатывается браузером, чтобы вы смогли удобно пользоваться текущим сайтом.
+Атрибут всегда должен иметь:
-Сайт представляет собой совокупность таких страниц, связанных между собой внутренними и внешними гиперссылками.
+  - Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
+  - Имя атрибута, за которым следует знак равенства.
+  - Значение атрибута, заключённое с двух сторон в кавычки.
-Далее поговорим о **классификации тегов и атрибутов**. Более детальное их описание и примеры будут представлены в следующем уроке.
+===== Вложенные элементы =====
+Вы также можете располагать элементы внутри других элементов — это называется **вложением**. Если мы хотим заявить, что наша **кошка** очень раздражена, мы можем заключить слово "очень" в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:
-===== HTML теги. Парные и одиночные теги =====
-Как мы уже поняли выше, теги бывают парными или одиночными.
-==== Одиночные тэги ====
-Одиночных элементов насчитывается **16 штук**. Наиболее часто используемые:
-  - **<!doctype>** Некая инструкция браузерам для определения того, к какому типу относится документ, какую версию **HTML** использовать.
-  - **<meta>** Необходим для задания дополнительной информации о странице, указывается в заголовке **HTML-документа**. Как и вышеупомянутый тег, не влияет на внешний вид страницы, так как носит служебный характер.
-  - <hr> Задает горизонтальную линию для визуального отделения элементов страницы, применяется для отделения заголовка от основного текста, выделения логических блоков. По умолчанию представляет собой серую линию толщиной в 1 пиксель.
-  - **<br>** Перенос нижеидущего содержимого на новую строку. Может потребоваться для избегания длинных полотен текста. Небольшие куски информации воспринимаются лучше, чем огромный абзац.
-  - **<img>** Чтобы вставить на страницу графический элемент. Рисунки можно демонстрировать в одном из следующих форматов: **jpg, png, gif**. Само изображение в документ не вставляется непосредственно, указывается ссылка на него (локальная или из другого источника), а уже браузер загружает картинку и демонстрирует пользователю.
-  - **<input>** Применяется в формах и задает тип полей (могут быть текстовыми, числовыми, позволяют выбирать дату, файл, отмечать те или иные элементы списка и т.п.).