Различия

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

--- software:development:ps_pycharm:html5:lesson:lesson.html_1 [2023/08/20 17:45] – [Оглавление] 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 =====
+<code>
-**HTML (HyperText Markup Language)** – это не язык программирования (как, например, Python), а так называемый язык разметки. Он необходим для сообщения браузеру способа отображения посещаемой вами веб-страницы. Вместо того, чтобы показывать сплошной текст, **HTML** позволяет обернуть его в специальные элементы **(теги)**. Это обеспечивает особое поведение передаваемой информации: она может выделяться курсивом, жирным текстом, транслироваться в виде таблиц, списков, рисунков и иных мультимедиа-данных.
+Моя кошка очень раздражена
-\\
+</code>
-Теги способны нести как **структурный смысл** (например, показать, что перед нами таблица некоторой размерности с заголовком), так и **семантический** (выделить информацию определенным образом для поисковых роботов, чтобы те лучше индексировали ваш сайт, или браузеров).
+Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
+<code html>
-<WRAP center round info 100%>
+<p>Моя кошка очень раздражена</p>
-Полезно знать
-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>**) разработчик вполне может написать по своему усмотрению:
+===== Анатомия HTML элемента =====
+Давайте рассмотрим элемент абзаца более подробно.
+{{:software:development:ps_pycharm:html5:lesson:grumpy-cat-small.png?|grumpy-cat-small}}
-  * **<p>Абзац<\p>** (написание в соответствии со стандартом);
+  - **Открывающий тег (Opening tag)**: Состоит из имени элемента (в данном случае, **<p>**), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
-  * **<P>Абзац<\P>** (браузеры редко учитывают регистр тегов);
+  - **Закрывающий тег (Closing tag)**: Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
-  * **<p>Абзац** (некоторые верстальщики могут забыть поставить закрывающий тег, что никак не смутит новую версию практически любого браузера).
+  - **Контент (Content)**: Это контент элемента, который в данном случае является просто текстом.
+  - **Элемент(Element)**: Открывающий тег, закрывающий тег и контент вместе составляют элемент.
-Хорошая практика показывает, что нужно придерживаться некоего единого стиля. Чтобы как-то ограничить вольности программистов, внедрили стандарт **XHTML**. Он сочетает в себе **HTML** и **XML** форматы. Первоочередная задача данного стандарта – замена **HTML 4**. Однако после появления **HTML5** эта потребность несколько снизилась. Тем не менее, многие разработчики используют его и сегодня, чтобы гарантировать отсутствие ошибок в написании кода.
+Элементы также могут иметь атрибуты, которые выглядят так:
-==== Ключевые особенности стандарта 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** и современные браузеры не столь требовательны, но он может встретиться (и этого не нужно пугаться).
+Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, **class - имя атрибута**, а **nase - значение атрибута**. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
-==== Охарактеризуем специфику HTML5: ====
+Атрибут всегда должен иметь:
-  * добавлены семантические элементы (**<nav>, <section>, <article> и др.**), которые облегчают чтение структуры страницы как разработчикам, так и поисковым машинам;
-  * внедрена поддержка векторной графики и специальных форматов **(svg, canvas, MathML)**;
-  * представлены новые элементы управления **(dates, email, tel)**;
-  * удалены устаревшие теги **(big, center, isindex)**.
-<WRAP center round info 100%>
+  - Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
-**Итог**
+  - Имя атрибута, за которым следует знак равенства.
-\\
+  - Значение атрибута, заключённое с двух сторон в кавычки.
-Таким образом, базис современной разработки – стандарт HTML5.
-</WRAP>
+===== Вложенные элементы =====
+Вы также можете располагать элементы внутри других элементов — это называется **вложением**. Если мы хотим заявить, что наша **кошка** очень раздражена, мы можем заключить слово "очень" в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:
-===== Консорциум Всемирной сети =====
-Количество сайтов в сети настолько велико, что уже не хватает заложенного объема **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%>
-В **CSS-свойствах** отображение тегов можно менять по следующим типам:
-  - **Блочные (display: block)** – получает свойство блочности, занимает всю ширину страницы;
-  - **Строчные (display: inline)** – тег становится строчным;
-  - **Флекс (display: flex)** – элемент приобретает свойство особого типа блоков – флекс (ведет себя как блок, но внутреннее содержимое гибко настраивается);
-  - **Грид (display: grid)** – еще один блочный тип с особенностями внутреннего поведения элементов (строятся на основании «сетки», состоящей из строк и колонок);
-  - **Таблица (display: table)** – тег и его содержимое будут наследовать свойства таблиц;
-  - **Строчный блок (display: inline-block)** – блочный элемент ведет себя как строка, но сохраняет часть свойств (можно задать размер, границы).
-  - **Спрятанный (display: none)** – делает элемент невидимым и полностью удаляет его отображение со страницы.
-Существуют и другие свойства отображения, многие из которых узконаправлены и зачастую экспериментальны.
-</WRAP>
-**1. Блочный тэг <div>**
-Самый популярный блочный тег времен HTML 4. Основная его задача – отобразить содержимое как блок. Он и сегодня входит в список часто используемых. Достаточно открыть код любой страницы в сети и проанализировать его. Почти везде <div> применяется максимально широко. Посмотрим на простой пример.
-<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 |}}