Различия

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

--- software:development:ps_pycharm:html5:html5 [2023/08/08 18:11] – [Основы HTML1.1] vladpolskiy
+++ software:development:ps_pycharm:html5:html5 [2024/02/04 11:28] (текущий) – vladpolskiy
@@ Строка 1: / Строка 1: @@
+{{description>Основы HTML HTML-элементы}}
 ======Руководство по HTML5======
-{{:software:development:ps_pycharm:html5:html_original_logo_icon.png?100|}}
+{{:software:development:ps_pycharm:html5:html_original_logo_icon.png?100 |}}HTML  — «язык гипертекстовой разметки» — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора. В HTML можно встроить программный код на языке программирования JavaScript, для управления поведением и содержанием веб-страниц. Также включение CSS в HTML позволяет задавать внешний вид и макет страницы.[[https://ru.wikipedia.org/wiki/HTML|Wikipedia]]
-=====Основы HTML1.1=====
+=====Основы HTML=====
+HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег (например, тег переноса строки <br> — одиночный и закрывать его не нужно) . Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, атрибут href=" у ссылки). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:
+  * ''<strong>Текст между двумя тегами — открывающим и закрывающим.</strong>''
+  * ''<a href="http://www.example.com">Здесь элемент содержит атрибут href, то есть гиперссылку.</a>''
+  * ''А вот пример пустого элемента: <br>''
+Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML).
+=====HTML-элементы=====
+Элементы HTML являются строительными блоками HTML страниц. С помощью HTML разные конструкции, изображения и другие объекты, такие как интерактивная веб-форма, могут быть встроены в отображаемую страницу. HTML предоставляет средства для создания заголовков, абзацев, списков, ссылок, цитат и других элементов. Элементы HTML выделяются тегами, записанными с использованием угловых скобок. Такие теги, как <img /> и <input />, напрямую вводят контент на страницу. Другие теги, такие как <p>, окружают и оформляют текст внутри себя и могут включать другие теги в качестве подэлементов. Браузеры не отображают HTML-теги, но используют их для интерпретации содержимого страницы.
 <file html index.html>
@@ Строка 18: / Строка 28: @@
 </html>
 </file>
-<html><!DOCTYPE html></html>   <!-- Объявление формата документа -->
-Элемент <html>    <!-- Является корневым элементом документа -->
-Элемент <head>   <!-- Техническая информация о документе -->
-Элемент <title>  <!-- Наименование документа -->
-Элемент <meta>
-Элемент <style><!-- Подключаем внешнюю таблицу стилей -->
-Элемент <link>
-Элемент <script><!-- Подключаем сценарии -->
-Элемент <body>
-<file php myexample.php>
-<?php echo "hello world!"; ?>
-</file>
-:!: Read the [[wiki:syntax#embedding_html_and_php|syntax]] page((This section has been removed from the page and is only accessible through the page history.)) again: //"You can embed raw HTML code into your documents by using the HTML tags."//
+{{tablelayout?colwidth="200px"}}
-So to embed HTML you need to enclose the HTML with ''%%<html></html>%%'' (for inline HTML) or ''%%<HTML></HTML>%%'' (for block HTML). A little example: <del>The [[:wiki:syntax#embedding_html_and_php|above syntax page]] has examples of what block vs inline look like.</del>((This section has been removed from the page and is only accessible through the page history.))
-  <html><strong>This is my bold text</strong></html>
-=====HTML-элементы1.2=====
+^  Структура HTML -документа                                                                                                                                                                                                                                                              ||
+| Элемент                                |  Описание                                                                                                                                                                                                                                       |
+| ''%% <!DOCTYPE html> %%''              | Объявление формата документа (это документ html с использованием HTML5)                                                                                                                                                                         |
+| ''%% <html> %%''  ''%% </html> %%''    | Является корневым элементом документа (между <html> и </html> находиться все содержимое документа, выводимое в окне браузера)                                                                                                                   |
+| ''%% <head> %%''  ''%% </head> %%''    | Техническая информация о документе (заголовок, описание, кодировку и т.д.). Введенная  информация не отображается в браузере, но содержит данные, указывающие браузеру, как обрабатывать страницу.                                              |
+| ''%% <title> %%''  ''%% </title> %%''  | Наименование документа, которое отображается в строке заголовка веб-браузера                                                                                                                                                                    |
+| ''%% <meta> %%''                       | Определяет метаинформацию страницы. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8.                                                                                                                               |
+| ''%% <style> %%''                      | Задает стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS.                                                                                                                                      |
+| ''%% <link> %%''                       | Определяет взаимосвязь между текущей страницей и другими документами.                                                                                                                                                                           |
+| ''%% <script> %%''                     | Позволяет присоединять к документу различные сценарии. Текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента.  |
+| ''%% <body> %%''                       | Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>                                              |
+| ''%% <div> %%''                        | Блок, предназначенный для группировки контента.                                                                                                                                                                                                 |
+<details>
+<summary>Элемент <meta></summary>
+<code>
+<meta name="description" content="Описание содержимого страницы">
+<meta name="keywords" content="Ключевые слова через запятую">
+</code>
+<code>
+<meta name="description" lang="ru" content="Описание содержимого страницы на русском">
+<meta name="description" lang="en" content="Description">
+<meta name="keywords" lang="ru" content="Ключевые слова через запятую">
+<meta name="keywords" lang="en" content="Keywords">
+</code>
+  * **Поисковые машины**
+Индексация и переход по ссылкам разрешены:
+<code>
+<meta name="robots" content="index, follow">
+</code>
+Индексация разрешена, переход по ссылкам запрещен:
+<code>
+<meta name="robots" content="index, nofollow">
+</code>
+Индексация и переход по ссылкам запрещены:
+<code>
+<meta name="robots" content="noindex, nofollow">
+</code>
+я автоматической перезагрузки страницы через заданный промежуток времени (например, через 30 секунд) нужно воспользоваться значением refresh:
+<code>
+<meta http-equiv="refresh" content="30">
+</code>
+Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
+<code>
+<meta http-equiv="refresh" content="0; url=http://yandex.ru/">
+</code>
+{{tablelayout?colwidth="200px"}}
+^   ^   ^
+| charset  | Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8"> |
+| content  | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения. |
+| http-equiv  | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы". Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<meta http-equiv="refresh" content="30"> Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: <meta http-equiv="refresh" content="0; url=http://mail.ru/"> |
+| name  | Ассоциируется со значением, содержащемся в атрибуте content. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop. application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: <meta name="description" content="Описание содержимого страницы"> generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: <meta name="generator" content="WordPress 4.0">. keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: <meta name="keywords" content="Ключевые слова через запятую">. Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator, googlebot, publisher, robots, slurp, viewport, хотя ни одно из них еще не было официально принято. |
+</details>
 =====HTML-атрибуты1.3=====
 =====HTML-текст1.4=====
@@ Строка 84: / Строка 138: @@
 Деньги
 Знаки зодиака
-=====HTML-генераторы1.10=====
+=====HTML-генераторы=====
+<code>
+<details>
+<summary>Summary Text</summary>
+Details Text
+</details>
+</code>
+<details>
+<summary>Summary Text</summary>
+Details Text
+</details>
 =====Семантические элементы HTML51.11=====
 =====Элемент документа1.11.1=====
@@ Строка 247: / Строка 314: @@
 \\
+:!: Read the [[wiki:syntax#embedding_html_and_php|syntax]] page((This section has been removed from the page and is only accessible through the page history.)) again: //"You can embed raw HTML code into your documents by using the HTML tags."//
+So to embed HTML you need to enclose the HTML with ''%%<html></html>%%'' (for inline HTML) or ''%%<HTML></HTML>%%'' (for block HTML). A little example: <del>The [[:wiki:syntax#embedding_html_and_php|above syntax page]] has examples of what block vs inline look like.</del>((This section has been removed from the page and is only accessible through the page history.))
+  <html><strong>This is my bold text</strong></html>