book51.ru

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
{{description>Основы HTML HTML-элементы}}
======Руководство по HTML5======
{{: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]]

=====Основы 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>
<!DOCTYPE html>  
<html>
    <head>       
        <meta charset="utf-8">
        <title>Документ HTML5</title>
        <link rel="stylesheet" type="text/css" href="style.css"> 
        <script src="script.js"></script> 
    </head>
    <body>
        <div>Содержание документа HTML5</div>
    </body>
</html>
</file>
 


{{tablelayout?colwidth="200px"}}


^  Структура 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=====
Элементы для заголовков
Элементы для форматирования текста
Элементы для ввода «компьютерного» текста
Элементы для оформления цитат и определений
Абзацы, средства переноса текста
=====HTML-ссылки1.5=====
Структура ссылки
Абсолютный и относительный путь
Якорь
Как сделать изображение-ссылку
Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
Атрибуты ссылок
=====HTML-изображения1.6=====
Элемент <img>
Адрес изображения
Размеры изображения
Форматы графических файлов
Элемент <map>
Элемент <area>
Пример создания карты-изображения
=====HTML-таблицы1.7=====
Как создать таблицу
Как создать строки (ряды) таблицы
Как сделать ячейку заголовка столбца таблицы
Как сделать ячейку тела таблицы
Как добавить подпись (заголовок) к таблице
Группирование строк и столбцов таблицы <colgroup> и <col>
Группировка разделов таблицы <thead>, <tbody> и <tfoot>
Как объединить ячейки таблицы
Атрибуты элементов таблицы
Пример создания таблицы
=====HTML-списки1.8=====
Маркированный список <ul>
Нумерованный список <ol>
Список определений <dl>
Вложенный список
Многоуровневый нумерованный список
=====Спецсимволы HTML1.9=====
Полезные знаки и символы
Знаки пунктуации
Стрелки
Карточные масти
Деньги
Знаки зодиака
=====HTML-генераторы=====
<code>
<details>
<summary>Summary Text</summary>
Details Text
</details>
</code>


<details>
<summary>Summary Text</summary>
Details Text
</details>

=====Семантические элементы HTML51.11=====
=====Элемент документа1.11.1=====
=====Метаданные документа1.11.2=====
Элемент <head>
Элемент <title>
Элемент <base>
Элемент <link>
Элемент <meta>
Элемент <style>
=====Разделы документа1.11.3=====
Элемент <body>
Элемент <article>
Элемент <section>
Элемент <nav>
Элемент <aside>
Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6>
Элемент <header>
Элемент <footer>
=====Группировка содержимого1.11.4=====
Элемент <p>
Элемент <address>
Элемент <hr>
Элемент <pre>
Элемент <blockquote>
Элемент <ol>
Элемент <ul>
Элемент <li>
Элемент <dl>
Элемент <dt>
Элемент <dd>
Элемент <figure>
Элемент <figcaption>
Элемент <main>
Элемент <div>
=====Семантика уровня текста1.11.5=====
Элемент <a>
Элемент <em>
Элемент <strong>
Элемент <small>
Элемент <s>
Элемент <cite>
Элемент <q>
Элемент <dfn>
Элемент <abbr>
Элемент <ruby>
Элемент <rb>
Элемент <rt>
Элемент <rtc>
Элемент <rp>
Элемент <data>
Элемент <time>
Элемент <code>
Элемент <var>
Элемент <samp>
Элемент <kbd>
Элементы <sub> и <sup>
Элемент <i>
Элемент <b>
Элемент <u>
Элемент <mark>
Элемент <bdi>
Элемент <bdo>
Элемент <span>
Элемент <br>
Элемент <wbr>
=====Правки документа1.11.6=====
Элемент <ins>
Элемент <del>
Атрибуты, общие для элементов <ins> и <del>
=====Встраиваемое содержимое1.11.7=====
Элемент <picture>
Элемент <source>
Элемент <img>
Элемент <iframe>
Элемент <embed>
Элемент <object>
Элемент <param>
Элемент <video>
Элемент <audio>
Элемент <track>
Элемент <map>
Элемент <area>
=====Ссылки1.11.8=====
Ссылки, созданные элементами <a> и <area>
Типы ссылок
Примеры ссылок
=====Табличные данные1.11.9=====
Элемент <table>
Элемент <caption>
Элемент <colgroup>
Элемент <col>
Элемент <tbody>
Элемент <thead>
Элемент <tfoot>
Элемент <tr>
Элемент <td>
Элемент <th>
=====Формы1.11.10=====
Элемент <form>
Элемент <label>
Элемент <input>
Элемент <button>
Элемент <select>
Элемент <datalist>
Элемент <optgroup>
Элемент <option>
Элемент <textarea>
Элемент <output>
Элемент <progress>
Элемент <meter>
Элемент <fieldset>
Элемент <legend>
Атрибут autocomplete
=====Интерактивные элементы1.11.11=====
Элемент <details>
Элемент <summary>
Элемент <dialog>
Скрипты1.11.12
Элемент <script>
Элемент <noscript>
Элемент <template>
Элемент <slot>
Элемент <canvas>
====HTML5-аудио1.12====
Элемент <audio>
Аудио кодеки
Альтернативные медиа-ресурсы <source>
Добавление субтитров и заголовков <track>
Стилизованный пример аудио плеера
====HTML5-видео1.13====
Элемент <video>
Встраиваемый интерактивный контент <embed>
Видеокодеки
Видеоконтейнеры
Альтернативные медиа-ресурсы <source>
Добавление субтитров и заголовков <track>
Пример: размещаем видео на сайте
Видеоконвертеры
Необязательные теги HTML5-разметки1.14
=====HTML5-формы1.15=====
Элемент <form>
Группировка элементов формы <fieldset>
Создание полей формы <input>
Текстовые поля ввода <textarea>
Раскрывающийся список <select>
Надписи к полям формы <label>
Кнопки <button>
Флажки и переключатели в формах
=====Контентная модель HTML51.16=====
Мета содержимое
Потоковое содержимое
Секционное содержимое
Заголовочное содержимое
Текстовое содержимое
Встроенное содержимое
Интерактивное содержимое
Явное содержимое
Элементы, поддерживающие скрипт
Корневое секционное содержимое
Прозрачная модель содержимого
\\  

:!: 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>