Уроки html для начинающих: HTML уроки с нуля — учебник для начинающих

<Видео> Видеоэлемент

Элемент

Заказанный список
. div> Элемент Div

Структура HTML

Подробнее

HTML

HTML (язык гипертекстовой разметки) используется для добавления содержимого на веб-страницу и указывает веб-браузерам, как структурировать это содержимое.

1. 1

   Введение в HTML

   Добро пожаловать в мир кода! В прошлом году миллионы учащихся нашего сообщества начали с HTML. Почему? HTML — это скелет всех веб-страниц. Часто это первый язык, который изучают разработчики, …

   Start

2. 2

   Анатомия HTML

   HTML состоит из элементов. Эти элементы структурируют веб-страницу и определяют ее содержимое. Давайте посмотрим, как они…

   Старт

3. 3

   Тело

   Одним из ключевых элементов HTML, которые мы используем для создания веб-страницы, является элемент body . На экран может быть выведено только содержимое открывающего и закрывающего тегов body. Вот что открывает и закрывает б…

   Начало

4. 4

   Структура HTML

   HTML организован как набор взаимосвязей генеалогического древа. Как вы видели в предыдущем упражнении, мы разместили теги внутри тегов. Когда элемент содержится внутри другого элемента, считается…

   Start

5. 5

   Заголовки

   Заголовки в HTML похожи на заголовки в других типах медиа. Например, в газетах большие заголовки обычно используются для привлечения внимания читателя. В других случаях заголовки используются для обозначения…

   Start

6. 6

   Divs

   Один из самых популярных элементов HTML — это element. сокращение от «разделение» или контейнер, который делит …

   Start

7. 7

   Атрибуты

   Если мы хотим расширить тег элемента, мы можем сделать это с помощью атрибута. Атрибуты — это содержимое, добавленное к открывающему тегу…

   Start

8. 8

   Отображение текста

   Если вы хотите отобразить текст в HTML, вы можете использовать абзац или span : —

   63 содержать блок простого текста

   Start

9. 9

   Styling Text

   Вы также можете стилизовать текст с помощью тегов HTML. Тег выделяет текст, а тег выделяет важный текст. Позже, когда вы начнете стилизовать веб-сайты, вы решите, как вы хотите, чтобы браузеры…

   Начало

10. 10

    Разрывы строк

    Интервал между кодом в HTML-файле не влияет на расположение элементов в нем. браузер. Если вы заинтересованы в изменении интервала в браузере, вы можете использовать разрыв строки HTML el…

    Start

11. 11

    Ненумерованные списки

    Помимо организации текста в виде абзацев, вы также можете отображать содержимое в виде легко читаемого списка. В HTML вы можете использовать тег ненумерованный список ( ) для создания списка элементов без каких-либо конкретных… что каждый элемент списка пронумерован. Они полезны, когда вам нужно…

    Start

12. 13

    Изображения

    Все элементы, о которых вы уже узнали (заголовки, абзацы, списки и интервалы), имеют одну общую черту: они полностью состоят из текста! Что, если вы хотите добавить контент в свой веб-па…

    Start

13. 14

    Image Alts

    Чтобы быть выдающимся веб-разработчиком, вы должны сделать свой сайт доступным для пользователей любого происхождения. Чтобы сделать Интернет более инклюзивным, нам необходимо рассмотреть, что происходит, когда вспомогательные технологии…

    Старт

14. 15

    Видео

    Помимо изображений HTML также поддерживает отображение видео. Как и для элемента, для элемента требуется атрибут src с…

    Начало

15. 16

    Обзор

    Поздравляем с окончанием первого урока HTML! Вы уже на пути к тому, чтобы стать опытным веб-разработчиком. Давайте повторим, что вы уже узнали: HTML означает H yper T …

    Start

• Пришло время овладеть основами HTML. В следующем проекте мы будем практиковать структуру в HTML, чтобы вы могли отточить свои навыки и чувствовать себя уверенно, применяя их в реальном мире. Почему? Этот проект поможет вам понять и освоить строительные блоки веб-страницы. Все это будет строиться на этих основаниях. Что дальше? Блогер, разработчик, стильный сайт. Ты получил это!

• Введение в HTML

  Какие из следующих тегов будут содержать HTML для видимого содержимого веб-страницы?

• Стандарты документов HTML

  Предполагается, что следующий код создает ссылку на другую веб-страницу, но не делает этого. Почему?

Формы | Codecademy

: Тип флажка

</code> Element </p> <p> <code> <form> </code> Element </p> <p> <code> <Ввод> </code>: Тип числа </p> <p> <code> <Ввод> </code> Элемент </p> <p> <code> <Ввод> </code>: Тип диапазона </p> <p> <code> <Выберите> </code> Элемент </p> <p> Отправка </p> <p data-readability-styled="true"> См. Больше </p> <h4/> </h4><p> </h2> <Вход </p> <p data-readability-styled="true">. > </code> : Введите флажок </p><pre> <p> <input type="checkbox" name="breakfast" value="bacon">Бекон 🥓<br> <input type="checkbox" name="breakfast" value="eggs">Яйца 🍳<br> <input type="checkbox" name="завтрак" value="pancakes">Блины 🥞<br> </p> </pre><p> При использовании элемента ввода </code> HTML <code> атрибут <code> type="checkbox" </code> будет отображать один элемент флажка.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/c/f/b/cfba53ce0f7186250d4e63db746dc1c0.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/c/f/b/cfba53ce0f7186250d4e63db746dc1c0.jpeg' /></noscript> Чтобы создать группу флажков, связанных с одной и той же темой, все они должны использовать один и тот же атрибут <code> name </code>. Поскольку это флажок, для одной и той же темы можно установить несколько флажков. </p> <ol> <li> <p> 1 </p> <p> Введение в HTML-формы </p> <p data-readability-styled="true"> Формы являются частью повседневной жизни. Когда мы используем физическую форму в реальной жизни, мы записываем информацию и отдаем ее кому-то для обработки. Вспомните, сколько раз вам приходилось заполнять информацию для v… </p> <p> Начало </p> </li> <li> <p> 2 </p> <p> Как работает форма </p> <p data-readability-styled="true"> Интернет можно представить как сеть компьютеров, которые отправляют и получают информацию. Компьютерам нужен <em> HTTP-запрос </em>, чтобы знать, как общаться. HTTP-запрос инструктирует принимающую комп… </p> <p> Start </p> </li> <li> <p> 3 </p> <p> Ввод текста </p> <p data-readability-styled="true"> Если мы хотим создать поле ввода в нашем , нам понадобится помощь элемента.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/e/f/5/ef50f860af02a07f45091a7cf15f0f28.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/e/f/5/ef50f860af02a07f45091a7cf15f0f28.jpeg' /></noscript> Элемент имеет атрибут типа, который определяет, как он отображается на веб-странице и какие данные он может… </p> <p> Start </p> </li> <li> <p> 4 </p> <p> Добавление метки </p> <p data-readability-styled="true"> В предыдущем упражнении мы создали элемент, но не добавили ничего, объясняющего, для чего он используется. Чтобы пользователь мог правильно идентифицировать элемент, мы используем элемент с соответствующим названием. T… </p> <p> Старт </p> </li> <li> <p> 5 </p> <p> Ввод пароля </p> <p data-readability-styled="true"> Подумайте о тех случаях, когда нам приходится помещать конфиденциальную информацию, такую ​​как пароль или PIN-код, в файл . Мы бы не хотели, чтобы нашу информацию увидел кто-то, кто заглядывает к нам через плечо! К счастью, у нас есть… </p> <p> Start </p> </li> <li> <p> 6 </p> <p> Ввод числа </p> <p data-readability-styled="true"> Мы рассмотрели два атрибута типа, относящиеся к тексту. Но мы можем захотеть, чтобы наши пользователи вводили число — в этом случае мы можем установить для атрибута type значение… (как вы уже догадались)… «число»!… </p> <p> Start </p> </li> <li> <p> 7 </p> <p> Range Input </p> <p data-readability-styled="true"> Использование an отлично подходит, если мы хотим, чтобы пользователи могли вводить любое число по своему выбору.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/7/c/6/7c6d36c3c2ac671790f5ad2c7dc3a427.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/7/c/6/7c6d36c3c2ac671790f5ad2c7dc3a427.jpeg' /></noscript> Но если бы мы хотели ограничить число, которое могут вводить наши пользователи, мы могли бы рассмотреть возможность использования другого значения типа. … </p> <p> Старт </p> </li> <li> <p> 8 </p> <p> Ввод флажка </p> <p data-readability-styled="true"> До сих пор все типы ввода, которые мы разрешали, были единственным выбором. Но что, если мы предоставим пользователям несколько вариантов и позволим им выбрать любое количество вариантов? Похоже, мы могли бы использовать checkb… </p> <p> Start </p> </li> <li> <p> 9 </p> <p> Radio Button Input </p> <p data-readability-styled="true"> Флажки хорошо работают, если мы хотим предоставить пользователям несколько вариантов и позволить им выбрать один или несколько вариантов. Однако бывают случаи, когда мы хотим представить несколько вариантов и только все… </p> <p> Старт </p> </li> <li> <p> 10 </p> <p> Выпадающий список </p> <p data-readability-styled="true"> Радиокнопки отлично подходят, если мы хотим, чтобы наши пользователи выбирали один вариант из нескольких видимых вариантов, но представьте, если бы у нас был целый список вариантов! Эта ситуация может быстро привести к большому количеству радио, но… </p> <p> Старт </p> </li> <li> <p> 11 </p> <p> Ввод списка данных </p> <p data-readability-styled="true"> , чтобы прокрутить весь список, чтобы найти один вариант.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.ytimg.com/vi/A3J2T8A5Kp8/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/A3J2T8A5Kp8/hqdefault.jpg' /></noscript> Вот где используется элемент … </p> <p> Start </p> </li> <li> <p> 12 </p> <p> Элемент Textarea </p> <p data-readability-styled="true"> Элемент с type="text" создает поле ввода с одной строкой для ввода информации пользователями. Однако бывают случаи, когда пользователям необходимо написать больше информации, например, в блоге. В таком ca… </p> <p> Start </p> </li> <li> <p> 13 </p> <p> Отправить форму </p> <p data-readability-styled="true"> Помните, что цель формы — собрать информацию, которая будет отправлена. Это роль кнопки отправки — пользователи нажимают на нее, когда заканчивают заполнение информации… </p> <p> Старт </p> </li> <li> <p> 14 </p> <p> Обзор </p> <p data-readability-styled="true"> Приятно работать с чрезвычайно распространенным и полезным элементом! В этом уроке мы рассмотрели: * Цель a — позволить пользователям вводить информацию и отправлять ее. * Атрибут действия… </p> <p> Start </p> </li> </ol> <ul> <li> <p> Используйте свои знания HTML-форм, чтобы собрать пользователей, вводящих информацию, и придайте новый смысл классической истории! </p> </li> </ul> <ul> <li> <h4><span class="ez-toc-section" id="HTML-2"> HTML-формы </span></h4> <p> В чем преимущество использования <code> <метка> </code> элемент? </p> </li> </ul> <h2><span class="ez-toc-section" id="_HTML_2022"> Руководство по HTML для начинающих 2022 (бесплатное руководство) </span></h2> <p> Если вы хотите стать веб-мастером и научиться создавать веб-сайты, перспектива освоить HTML может показаться вам пугающей.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/0/2/0/020b1cbd38a39112862197045cba7ff4.jpeg' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/0/2/0/020b1cbd38a39112862197045cba7ff4.jpeg' /></noscript> </p> <p> Это то, чего нельзя избежать, поскольку подавляющее большинство целевых страниц веб-сайтов, которые вы посещаете, будут написаны и структурированы с использованием элементов HTML. Фактически, в настоящее время HTML используется более чем 74% всех известных веб-сайтов, в то время как этот язык также помогает улучшить все, от дизайна вашего сайта до качества контента, который он содержит. </p> <p> В этом руководстве мы рассмотрим основные принципы HTML и его возможные применения, а затем рассмотрим примеры отдельных элементов, которые вы используете при кодировании своего веб-сайта. </p> <h3><span class="ez-toc-section" id="_HTML-3"> Что такое HTML? </span></h3> <p> Проще говоря, HTML представляет собой стандартный язык разметки для создания веб-страниц в Интернете. Он расшифровывается как язык гипертекстовой разметки, и его основная функция заключается в установлении структуры, макета и представления отдельных целевых страниц. Хотя веб-браузеры не отображают язык HTML напрямую, он играет ключевую роль в создании видимого, доступного и простого в использовании сайта.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/lawyers-age.ru/wp-content/uploads/2/6/b/26b6a547257c9a2531e42825f1eb0341.jpeg' /><noscript><img loading='lazy' src='/800/600/http/lawyers-age.ru/wp-content/uploads/2/6/b/26b6a547257c9a2531e42825f1eb0341.jpeg' /></noscript> </p> <p> HTML также поддерживается рядом отдельных элементов, которые постепенно создают веб-страницы, структурируют представление контента и оживляют ваш веб-сайт. Эти элементы создаются и содержатся в «тегах», которые определяют альтернативные части контента, такие как заголовки, абзацы и подобные примеры. </p> <p> Ниже мы более подробно рассмотрим эти элементы и их структуру, а также посмотрим, как их можно персонализировать, чтобы добавить на ваш веб-сайт цвет, ссылки и вариативную типографику. </p> <p> <strong> The Timeline of Web Technologies </strong> : </p> <ul> <li> 1991 – HTML </li> <li> 1994 – HTML2 </li> <li> 1996 – CSS1 + JavaScript </li> <li> 1997 – HTML4 </li> <li> 1998 – CSS2 </li> <li> 2000 – XHTML1 </li> <li> 2002 – Tableless Web Design </li> <li> 2005 – AJAX </li> <li> 2009 – HTML5 </li> </ul> <h3><span class="ez-toc-section" id="_HTML-4"> Где используется HTML? </span></h3> <p> <strong> Популярные веб-сайты, использующие HTML </strong> : </p> <ul> <li> Wikipedia.org </li> <li> Google.com </li> <li> YouTube.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/7/8/9/789c195c1e702dd6219c5248b98ea8cb.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/7/8/9/789c195c1e702dd6219c5248b98ea8cb.jpeg' /></noscript> com </li> <li> Facebook.com </li> <li> Yahoo.com </li> <li> Baidu.com </li> <li> Reddit.com </li> </ul> <p> Как мы видим, наиболее распространенным применением HTML является дизайн отдельных целевых страниц, составляющих ваш веб-сайт. Это не единственное применение популярного инструмента кодирования, однако понимание его дополнительных применений поможет вам получить максимальную отдачу от языка в качестве нового веб-мастера. <em> Итак, вот еще несколько способов применения HTML: </em> </p> <ul> <li> <strong> Создание настраиваемых элементов на существующей странице </strong> . Если вы намерены разрешить комментарии к сообщениям блога или публикацию пользовательского контента на своем веб-сайте, вы можете использовать фрагменты HTML-кода, чтобы включить это. Эти элементы позволят пользователям выделять ключевые слова, вставлять ссылки и форматировать комментарии в зависимости от ограничений, установленных вами как модератором. </li> <li> <strong> Создать дополнительный контент для электронной почты </strong> .<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/technical-tips.com/assets/images/photos/1559478781.jpg' /><noscript><img loading='lazy' src='/800/600/http/technical-tips.com/assets/images/photos/1559478781.jpg' /></noscript> Электронная почта также использует HTML в качестве языка для форматированных текстовых сообщений, которые содержат ссылки, текст и множество других элементов, которые не могут быть представлены только в виде простого текста. Итак, если вы хотите поделиться электронной книгой, связанной с вашим веб-сайтом, по электронной почте, вы можете использовать HTML для оптимизации воздействия вашего сообщения. </li> <li> <strong> Понимать автономные справочные документы, установленные на вашем компьютере </strong> . Интересно, что HTML используется в качестве формата компьютерных справочных документов, доступных в автономном режиме. Таким образом, базовые знания HTML могут помочь вам понять проблемы с вашим оборудованием и решить их быстрее, что, в свою очередь, может гарантировать, что вы сможете быстрее восстановить свой веб-сайт в случаях, когда он отключился. </li> </ul> <p> Подробнее: </p> <p> Просмотр HTML и CSS [Шпаргалка] </p> <h3><span class="ez-toc-section" id="_HTML-5"> Структура HTML-страницы </span></h3> <p> Прежде чем вы сможете создать HTML-страницу, вам необходимо иметь основы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.ytimg.com/vi/74_nbxorvXI/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/74_nbxorvXI/hqdefault.jpg' /></noscript> </p> <p> Как правило, страница состоит из трех структурных элементов: </p> <ol> <li> <strong> Заголовок: </strong> Заголовок содержит контент, относящийся ко всем страницам вашего сайта, например, логотип или название веб-сайта, а также систему навигации. Заголовок виден на каждой странице. </li> <li> <strong> Основная часть: </strong> Занимает самую большую площадь на веб-странице. Он содержит контент, относящийся к просматриваемой странице. </li> <li> <strong> Нижний колонтитул: </strong> Содержимое нижнего колонтитула обычно включает контактную информацию, адрес доставки или юридические уведомления. Как и верхний колонтитул, нижний колонтитул появляется на каждой странице, но располагается внизу. </li> </ol> <p> Вот как эти основные структурные элементы выглядят вместе: </p> <p> <html> </p> <p> <head> </p> <p> Сюда можно поместить текст или код, например, <br/> код отслеживания Google Analytics для <br/>. </p> <p> </head> </p> <p> <body> </p> <p> Основная часть вашей страницы идет <br/> здесь.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/639326/slide_6.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/639326/slide_6.jpg' /></noscript> Заполните его текстом и изображениями! </p> <p> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_3dfba26c5363b847889b262ed1fbc24d.js"></script></body> </p> <p> </html> </p> <p> Вот еще один пример использования тегов заголовка и тега абзаца для эстетической структуризации контента. Кроме того, мы добавили тег нижнего колонтитула для контента под основной частью страницы: </p> <p> <html> </p> <p> <head> </p> <p> Здесь можно поместить текст или код, например, <br/> код отслеживания Google Analytics для примера <br/>. . </p> <p> </head> </p> <p> <body> </p> <p> <h2><span class="ez-toc-section" id="i-21">Мой первый заголовок</span></h2> </p> <p> <p>Добро пожаловать на мой сайт!</p> </p> <p> <footer> </p> <p> <p>Контактная информация может идти здесь</p> </p> <p> </footer> </p> <p> </body> </p> <p> </html> </p> <h3><span class="ez-toc-section" id="_HTML-6"> Теги HTML </span></h3> <p> Отправной точкой для любого кода HTML являются отдельные теги, которые можно использовать для создания всех важных элементов и помочь структурировать веб-страницы. </p> <p> <strong> Ведущие технологии HTML Tags Technologies Share на веб -интерфейсе </strong> </p> <ul> <li> HTML5 Canvas Tag - 0,27% </li> <li> HTML5 Audio Tag - 0,29% </li> <li> VIDEML5 - 0,69% </li> <li> HTM -tag <li>77777777777777777777777777777777777777777777777777777 HTG.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/c/6/3/c63fa9a4051e47d619685d4ea4fd0d4c.jpeg' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/c/6/3/c63fa9a4051e47d619685d4ea4fd0d4c.jpeg' /></noscript> – 6,54%   </li> </ul> <p> Ниже мы рассмотрим наиболее распространенные теги, прежде чем исследовать, как их можно использовать для создания определенных элементов на странице: </p> <h4><span class="ez-toc-section" id="i-22"> Теги заголовков </span></h4> <p> Все онлайн-документы, включая веб-страницы, начинаются с заголовком. Они создаются с использованием тегов HTML, а язык в настоящее время позволяет использовать до шести элементов переменного размера, которые также позволяют структурировать контент с помощью дополнительных заголовков, подзаголовков и выделенных строк полужирного текста. Чтобы начать заголовок, вы просто добавляете к соответствующему тексту префикс <h2><span class="ez-toc-section" id="i-23">, </span></h2><h3><span class="ez-toc-section" id="i-24">, </span></h3><h4><span class="ez-toc-section" id="i-25">, </span></h4><h5><span class="ez-toc-section" id="i-26">, </span></h5><h5><span class="ez-toc-section" id="_HTML_1_2_3_4"> или <h6> в зависимости от желаемого размера. </h6></p> <p> Затем вы должны применить закрывающий тег в конце заголовка, чтобы инкапсулировать текст, и он будет отображаться в формате HTML следующим образом: </p> <p> <code> <h2>Это заголовок 1</h2> </code> </p> <p> <code> <h3 >Это заголовок 2</h3> </code> </p> <p> <code> <h4>Это заголовок 3</h4> </code> </p> <p> <code> <h5><span class="ez-toc-section" id="_HTML_1_2_3_4">Это заголовок 4</span></h5> </code> </p> <p> <code> <h5><span class="ez-toc-section" id="_5">Это заголовок 5 </span></h5> </code> </p> <p> <code> <h6><span class="ez-toc-section" id="_6">Это заголовок 6</span></h6> </code> </p> <p> После подтверждения это будет выглядеть следующим образом на целевой странице вашего веб-сайта: </p> <p> <h3><span class="ez-toc-section" id="_2"> Это заголовок 2 </span></h3> <h4><span class="ez-toc-section" id="_3"> Это заголовок 3 </span></h4> <h5><span class="ez-toc-section" id="_4"> Это заголовок 4 </span></h5> <h5><span class="ez-toc-section" id="_5-2"> Это заголовок 5 </span></h5> <p data-readability-styled="true">5 <h6><span class="ez-toc-section" id="6"> 6 </span></h6></strong> </h6> </p> <p> Здесь хорошо видны различные размеры переменных заголовков, а также тот факт, что браузер добавляет строку до и после заголовка.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/d/9/c/d9c8bcdb276ac92a0bdb9cb28d8d01c3.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/d/9/c/d9c8bcdb276ac92a0bdb9cb28d8d01c3.jpeg' /></noscript> Вы также заметите, что закрывающий тег в конце текста заголовка имеет немного другую эстетику, но мы рассмотрим это в следующей главе, поскольку мы рассмотрим использование тегов для определения конкретных элементов. </p> <h4><span class="ez-toc-section" id="i-27"> Теги абзаца </span></h4> <p> Аналогичный принцип применяется к начальным тегам абзаца, которые обозначаются <p>. Это позволяет вам структурировать ваш контент и разделить его на соответствующие абзацы, что, в свою очередь, упрощает и упрощает чтение. Еще раз, тег <p> должен быть помещен в начале соответствующего текста до того, как в конце будет применен альтернативный закрывающий тег для завершения эффекта. Однако, в отличие от тегов заголовков, здесь нет числовых переменных, которые могут изменить размер текста в абзаце. </p> <p> <em> Например: </em> </p> <p> <code> <p>Ваш первый абзац</p> </code> </p> <p> <code> <p>Ваш второй абзац</p> </code> </p> <p> <code> <03 <code> <p>Третий абзац</p> </code> </code> <p> Вне формата HTML текст будет разбит на готовую веб-страницу следующим образом: </p> <p> Ваш первый абзац </p> <p> Ваш второй абзац </p> <p> Ваш третий абзац </p> <h4><span class="ez-toc-section" id="i-28"> Теги разрыва строки </span></h4> <p> Первые примеры представляют самые основные HTML-теги, но есть и другие, которые используют другой формат и альтернативные заключительные дубли.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/c/4/5/c45d3653e0461fabb83b3243f740183c.jpeg' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/c/4/5/c45d3653e0461fabb83b3243f740183c.jpeg' /></noscript> Возьмем, к примеру, разрывы строк, которые создают различие, в котором строки текста разрываются и продолжаются на следующей строке. Существует основное различие между разрывами строк и абзацами в области HTML, так как последние являются стандартными блочными элементами, содержащими текст, а первые создают разделение внутри существующего элемента <p>. </p> <p> Из-за этого разрывы строк представляют собой пустой элемент в HTML и поэтому не определяются ни открывающими, ни закрывающими тегами. Вместо этого они обозначаются тегом <br />, который можно вставить в существующие элементы <p>, чтобы разбить текст и потенциально выделить важные фрагменты информации. Одиночный пробел между символом <be> и косой чертой имеет решающее значение, иначе тег не распознается в формате HTML. </p> <p> <em> Вот пример: </em>   </p> <p> <p>Доброе утро<br/> <br/> Большое спасибо за ваш запрос, мы свяжемся с вами, если нам потребуется что-то еще. <br /> <br/> С наилучшими пожеланиями<br /> <br/> Mr. Jones</p> </p> <p> После применения текст разбивается на следующие части: </p> <p> Доброе утро, </p> <p> Большое спасибо за ваш запрос, мы свяжемся с вами вы, если нам потребуется что-нибудь еще.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/0/2/3/023cc9653c835f2c2ffc602a75dfe3cc.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/0/2/3/023cc9653c835f2c2ffc602a75dfe3cc.jpeg' /></noscript> </p> <p> С наилучшими пожеланиями </p> <p> Мистер Джонс </p> <p> Как видите, вы можете применять разрывы строк в существующем элементе абзаца так часто, как вам нравится, до тех пор, пока они добавляют ценность и облегчают усвоение информации. Вы также увидите, что открывающие и закрывающие теги абзаца остаются неизменными, а теги разрыва строки используются для изменения макета текста, включенного в них. </p> <p> Это один из примеров того, как теги HTML можно использовать для изменения существующих элементов, что играет ключевую роль в определении визуального макета ваших веб-страниц и контента. </p> <h4><span class="ez-toc-section" id="i-29"> Горизонтальные линии </span></h4> <p> Точно так же существуют и другие теги, которые можно использовать внутри элемента <p> или для дальнейшего разделения текста на веб-странице. Одним из наиболее широко используемых является тег <hr>, который помогает создать пустой элемент, который рисует визуальную горизонтальную линию между чередующимися разделами онлайн-документа. Например, вы можете поместить линию между двумя частями текста, чтобы переориентировать читателя или просто ввести новый визуальный элемент.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.ytimg.com/vi/U01MTZaGntI/0.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/U01MTZaGntI/0.jpg' /></noscript> Вот как вы создаете такой разрыв в HTML: </p> <p> <code> <p>Ваш первый абзац</p> </code> </p> <p> <code> <hr /> </code> </p> <p> <code> <p>Ваш второй абзац</p> </code> </p> <p> Здесь разрыв между символами hr и косой чертой выделить конструкцию из пустого элемента, при этом для завершения эффекта снова не требуется закрывающий тег. <em> Будет создан следующий визуальный элемент: </em> </p> <p> Ваш первый абзац </p> <p> ________________________________________ </p> <p> Ваш второй абзац <br/> </p> <h4><span class="ez-toc-section" id="i-30"> Теги изображений </span></h4> <p> Теги изображений также представляют собой пустые элементы в HTML, что еще раз означает, что они не имеют закрывающего тега. Поскольку они содержат только атрибуты, относящиеся к URL-адресу изображения, которое вы встраиваете на сайт, они определяются просто тегом <img> в начале элемента. Они могут быть размещены в любом месте на вашем веб-сайте, хотя необычно включать их в существующие элементы, такие как абзацы или заголовки. Вот как выглядит типичный HTML-тег изображения: </p> <p> <img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src=”url” alt=”some_text” style=”width:width;height:height;”><noscript><img src=”url” alt=”some_text” style=”width:width;height:height;”></noscript> </p> <p> Вы также должны указать альтернативный текст для вашего изображения, который поможет людям просматривать его в случае медленного время загрузки или использование программы чтения с экрана.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/4/d/1/4d10771f5a6c93f45739027f546bdc12.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/4/d/1/4d10771f5a6c93f45739027f546bdc12.jpeg' /></noscript> Таким образом, если браузер не может найти изображение, он будет отображать для зрителей значение альтернативного атрибута. Это снова использует тег изображения, но включает в себя другой набор атрибутов: </p> <p> <noscript><img class="lazy lazy-hidden" src = «неправильное имя.gif» alt = «Иконка HTML5» стиль =» ширина: 128 пикселей; высота: 128 пикселей; ” ></noscript><img class="lazyload lazy lazy-hidden" src = «неправильное имя.gif» alt = «Иконка HTML5» стиль =» ширина: 128 пикселей; высота: 128 пикселей; ” ><noscript><img src = «неправильное имя.gif» alt = «Иконка HTML5» стиль =» ширина: 128 пикселей; высота: 128 пикселей; ” ></noscript> </p> <h3><span class="ez-toc-section" id="HTML-3"> HTML-элементы </span></h3> <p> Ранее мы рассмотрели, как простые HTML-теги используются для определения элементов на странице, а также рассмотрели, как их можно дополнительно настроить с помощью пустых элементов, содержащих изображения и теги разрыва строки. Это помогает нам понять отношения, существующие между тегами и элементами, и то, как их можно использовать для определения различных типов контента на вашем веб-сайте. </p> <p> Хотя все аспекты языка HTML представлены тегом, например, определенный элемент, включающий содержимое, должен иметь как начальный, так и закрывающий тег. Таким образом, заголовки и абзацы являются элементами HTML, потому что они используют начальный и закрывающий теги для инкапсуляции и дополнения соответствующего текста.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.ytimg.com/vi/_hGNFdU-bVo/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/_hGNFdU-bVo/hqdefault.jpg' /></noscript> Напротив, пустые элементы либо содержат атрибуты, либо вообще не содержат содержимого, что позволяет использовать их в существующих элементах без необходимости закрывающего тега. </p> <h4><span class="ez-toc-section" id="_HTML-7"> Определение элементов HTML </span></h4> <p> При использовании таких примеров, как заголовки и абзацы, правильное применение открывающих и закрывающих тегов имеет решающее значение. Это начальный тег (такой как <h2><span class="ez-toc-section" id="i-31"> или </span></h2><p>), который определяет рассматриваемый элемент, например, в то время как закрывающий тег гарантирует, что этот элемент не будет продолжаться на оставшейся части веб-страницы. Например, если вы не используете закрывающий тег </ p> в конце нужного абзаца, текст будет отображаться в виде единого блока, что будет неприглядно и чрезвычайно трудно читать. </p> <p> Все закрывающие теги идентичны начальным, за исключением того факта, что первые содержат косую черту перед соответствующими символами. Таким образом, в случае заголовка <h2><span class="ez-toc-section" id="i-32"> закрывающим тегом будет </span></h2></ h2> , а для абзацев вы всегда будете использовать </ p> для определения разрыва текста.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/5/9/2/5928d21c35602b72093e1300099632b3.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/5/9/2/5928d21c35602b72093e1300099632b3.jpeg' /></noscript> Это требует внимания к деталям при написании кода, и при программировании заголовков важно помнить, что число, которое вы используете (например, h2 или h3), применяется как в начальном, так и в закрывающем тегах. </p> <h4><span class="ez-toc-section" id="_HTML-8"> Использование вложенных элементов HTML </span></h4> <p> На данном этапе ясно видно, что HTML-документы и веб-страницы формируются деревом различных элементов, которые служат строительными блоками для массива ресурсов. Мы также рассмотрели, как эти элементы могут быть сформированы и использованы для структурирования онлайн-контента, и мы продолжим это сейчас, рассмотрев вложенные элементы HTML. </p> <p> Точно так же, как пустые элементы и автономные теги (например, <br / >, могут быть включены в определенные элементы HTML, так называемые вложенные элементы также могут быть размещены в содержимом, таком как заголовки и абзацы. К ним относятся такие примеры, как выделение полужирным шрифтом и курсивом Надписи и подчеркнутый текст, а также их можно применять для придания индивидуальности вашему контенту и привлечения внимания читателя к определенным интересным моментам.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/image.krasview.ru/video/425b56562354ea3/_.jpg' /><noscript><img loading='lazy' src='/800/600/http/image.krasview.ru/video/425b56562354ea3/_.jpg' /></noscript> 0003 <h4><span class="ez-toc-section" id="_HTML-9"> Жирный, курсив и зачеркнутый текст в HTML </span></h4> <p> Допустим, вы хотите выделить слово в существующем элементе абзаца. Вы можете добиться этого, сделав его полужирным, используя простые теги в стандартном элементе <p>. Используя HTML, вы запрограммируете это следующим образом: </p> <p> <p>Я хочу, чтобы <b>это</b> слово было выделено жирным шрифтом. </p> </p> <p> <br/> Здесь вложенный элемент имеет как начальный, так и закрывающий теги, формат каждого из которых аналогичен тегам, связанным с заголовками и абзацами. Их можно беспрепятственно использовать в существующих элементах, и в этом случае это даст следующие результаты: </p> <p> Я хочу, чтобы <strong> это </strong> слово было выделено жирным шрифтом. </p> <p> Теперь предположим, что вы также хотели бы изменить типографику этого слова, чтобы оно также было выделено курсивом. Этого можно добиться, просто добавив еще один вложенный элемент, который должен быть закодирован следующим образом: </p> <p> <p>Я хочу, чтобы <b><i>это</b></i> слово было выделено жирным шрифтом.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/b/2/c/b2c4063a76f94d77d81b2ea79b06903c.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/b/2/c/b2c4063a76f94d77d81b2ea79b06903c.jpeg' /></noscript> </ p> </p> <p> Как видите, начальный и закрывающий курсивные теги просто включены в элемент <p>. Теперь это изменит содержимое внутри элемента, чтобы оно выглядело следующим образом:   </p> <p> Я хочу, чтобы <strong> <em> это </em> </strong> слово было выделено жирным шрифтом. </p> <p> Конечно, вы можете решить, что хотите выделить это слово по-другому. Таким образом, вы можете использовать альтернативный вложенный элемент, такой как перечеркнутый (который представлен тегами <s> и </s>. Эти теги можно применять таким же образом в элементе <p>, что выглядит следующим образом в HTML: </p> <p> <p>Я хочу, чтобы <s>это</s> слово было зачеркнуто. </p> </p> <p> В этом случае текст в вашем документе или на целевой странице будет выглядеть следующим образом:   </p> <p> Я хочу, чтобы <s> это </s> слово было зачеркнуто. </p> <p> Это дает представление об элементах, которые могут быть сформированы с помощью тегов, которые, в свою очередь, определяют структуру ваших веб-страниц и их содержание. Не только это, но и пустые и вложенные элементы также можно использовать для дальнейшего определения вашего контента.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fsd.multiurok.ru/html/2017/01/30/s_588ef8d3bb349/img_s542975_1_4.jpg' /><noscript><img loading='lazy' src='/800/600/http/fsd.multiurok.ru/html/2017/01/30/s_588ef8d3bb349/img_s542975_1_4.jpg' /></noscript> </p> <h3><span class="ez-toc-section" id="HTML-4"> HTML-атрибуты </span></h3> <p> Если теги являются строительными блоками, которые создают и определяют элементы, то HTML-атрибуты можно использовать для настройки их характеристик (таких как стиль, цвет и язык). Все HTML-элементы имеют основные атрибуты, которые предоставляют основную информацию и всегда указываются в теге статистики. Обычно они идут парами, поэтому часто отображаются в следующем формате: имя = «значение». </p> <p> Проще говоря, имя представляет собой свойство, которое вы хотите установить, а значение относится к конкретным критериям, которые вы хотите включить. </p> <p> Существует большое количество атрибутов, которые можно применить к вашим HTML-элементам, но те из них, которые наиболее важны для начинающих веб-мастеров: </p> <h4><span class="ez-toc-section" id="_lang_lang"> Атрибут ‘lang’ его элементы. Он объявляется с использованием атрибута «lang», и хотя его легко упустить из виду, он делает контент более доступным для программ чтения с экрана и поисковых систем. Обычно он будет представлен в начале документа в следующем формате: </span></h4></p> <p> <html lang="en-US" > </p> <p> После атрибута lang первые две буквы определяют язык (в данном случае английский).<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/b/1/8b1616c060f50e9904df2c9eca2952bf.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/b/1/8b1616c060f50e9904df2c9eca2952bf.jpeg' /></noscript> После дефиса следующие две буквы определяют диалект, хотя он присутствует не для каждого языка. Важно, чтобы вы правильно поняли этот атрибут, если хотите успешно охватить свою аудиторию. </p> <h4><span class="ez-toc-section" id="i-33"> Атрибут «выравнивание» </span></h4> <p> Мы уже коснулись формата атрибутов HTML (имя = «значение»), и наилучшее воплощение этого происходит, когда вы пытаетесь выровнять содержимое внутри своих элементов. Вы можете решить центрировать все абзацы на определенной странице, например, с выравниванием, являющимся свойством, которое вы хотите установить. Следовательно, «центр» — это значение атрибута, хотя у вас есть выбор выравнивания текста по левому или правому краю. </p> <p> <em> Например: </em> </p> <p> <code> <p align="center" >Этот текст выровнен по центру</p> </code> </p> <p> Это выровняет ваши элементы <p> по центру страницы и создаст единый макет в соответствии со спецификой вашего сайта (см. ниже): </p> <p> Этот текст выровнен по центру </p> <p> Этот текст выровнен по центру </p> <p> Этот текст выровнен по центру </p> <h4><span class="ez-toc-section" id="_href"> Атрибут ‘href’ </span></h4> <p> Если вы собираетесь создать видимый веб-сайт, важно, чтобы вы включили как входящие, так и исходящие ссылки.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/navikur.ru/wp-content/uploads/1/2/d/12d5b504318b9b6c68c99b30535b0e92.jpeg' /><noscript><img loading='lazy' src='/800/600/http/navikur.ru/wp-content/uploads/1/2/d/12d5b504318b9b6c68c99b30535b0e92.jpeg' /></noscript> Создание портфеля ссылок, включающего обратные ссылки на внутренние целевые страницы, также является жизнеспособной стратегией, поэтому вам нужно научиться кодировать их в HTML. </p> <p> HTML-ссылки определяются с помощью тега <a>, который включает в себя целевую ссылку вместе с аффилированным якорным текстом, в котором будет содержаться URL-адрес. Это атрибут «href», который указывает адрес сайта, однако он включен как часть начального тега. Он закодирован в HTML следующим образом: </p> <p> <a href="https://www.google.com" >Google</a> </p> <p> Это четко подчеркивает различие между начальным и закрывающим тегом и будет переведено как следует на вашей целевой странице: </p> <p> Google   </p> <h4><span class="ez-toc-section" id="i-34"> Атрибут «цвет» </span></h4> <p> Это еще один важный атрибут, поскольку использование цвета может вдохнуть жизнь в ваш веб-сайт, помогая создать важные контрасты и сильную эстетику дизайна. В HTML цвет можно указать с помощью его имени, хотя для достижения этой цели также можно использовать значение RGB или HEX.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/basicweb.ru/html/primer/practice_1_1.png' /><noscript><img loading='lazy' src='/800/600/http/basicweb.ru/html/primer/practice_1_1.png' /></noscript> Однако проще всего следовать первому варианту, хотя его также можно применять к заголовкам, абзацам и другим элементам на вашей странице. </p> <p> Это атрибут стиля, в котором вы можете выбрать цвет, представляющий значение, которое вы хотите установить. При применении красного цвета к основному заголовку, например, это будет выглядеть так: </p> <p> <h4 style="color:red"><span class="ez-toc-section" id="i-35">Цвет текста, установленный с использованием красного цвета</span></h4> </p> <p> После применения этот элемент появится следующим образом на вашем веб-сайте: </p> <p> <h4><span class="ez-toc-section" id="i-36"> Цвет текста, установленный с помощью красного цвета   </span></h4> </p> <p> Опять же, существует четкое различие между начальным и закрывающим тегами, определяющими элемент, хотя это один из самых простых атрибутов для применения в HTML. Он также подчеркивает формат атрибутов HTML name=»value», что значительно упрощает процесс изучения и применения их на вашем веб-сайте. </p> <p> Подробнее: </p> <p> Просмотр HTML5 Canvas [Шпаргалка] </p> <h3><span class="ez-toc-section" id="i-37"> Протестируйте сами </span></h3> <p> После базового понимания HTML и его отдельных элементов следующим шагом будет выполнение нескольких простых проектов и применение ваших теоретических знаний для решения практических задач.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/s/S32Q9t8k6PlH5TK0p1IcBAnwDiqdNUzJWL7gjR/slide-64.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/s/S32Q9t8k6PlH5TK0p1IcBAnwDiqdNUzJWL7gjR/slide-64.jpg' /></noscript> . </p> <p> В приведенном ниже упражнении мы представили текст, кроме и попросили отформатировать различные аспекты с помощью HTML. <em> Используйте руководство и все, что вы узнали до сих пор, чтобы выполнить задание, готовясь к кодированию собственного веб-сайта. </em> </p> <p> <code> <h2><span class="ez-toc-section" id="i-38">Главный заголовок </span></h2></code> </p> <p> <code> <p>Добро пожаловать на наш сайт, Example.com! Мы надеемся, что вам понравится читать наш контент, не стесняйтесь обращаться к нам. </p> </code> </p> <p> <code> <p>Спасибо за визит! </p> </code> </p> <p> <code> <p>Подробнее. </p> </code> </p> <p> <strong> Вопросы: </strong> </p> <ol> <li> Дополните элемент заголовка правильным закрывающим тегом. </li> <li> Сделать заголовок жирным. </li> <li> Вставьте горизонтальную линию под заголовком. </li> <li> Используйте атрибут цвета и затените «Спасибо за посещение» зеленым цветом </li> <li> Вставьте эту гиперссылку (https://www.w3schools.com/html/) в якорный текст «Подробнее». </li> <li> В начале страницы используйте формат name=»value» для выравнивания абзацев по левому краю </li> </ol> <ol> <li> Элементы HTML, head и body являются частью спецификации HTML с середины 1990-х годов и позже еще несколько лет назад они были основными элементами, используемыми для придания структуры HTML-документам.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/e/d/8ed9c7ad19578f34f0f9f1a62924b7fb.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/e/d/8ed9c7ad19578f34f0f9f1a62924b7fb.jpeg' /></noscript> Однако за последние несколько лет ситуация резко изменилась, поскольку в HTML5 было добавлено множество новых тегов, которые можно использовать для добавления богатого семантического значения в структуру HTML-документа. </li> <li> HTML-документы должны начинаться с объявления типа документа (неофициально «тип документа»). В браузерах тип документа помогает определить режим рендеринга. HTML5 не определяет DTD; поэтому в HTML5 объявление типа документа проще и короче. </li> <li> Мобильные браузеры полностью приняли HTML5, поэтому создавать готовые мобильные проекты так же просто, как проектировать и конструировать для небольших сенсорных экранов — отсюда и популярность адаптивного дизайна. Есть несколько отличных метатегов, которые также позволяют оптимизировать для мобильных устройств. </li> <li> 78% разработчиков контента согласны с тем, что структура подходит для создания мобильных приложений, а 68% говорят, что она подходит для разработки любых приложений. </li> <li> HTML5 также поставляется с множеством отличных API-интерфейсов, которые позволяют вам создавать более удобные для пользователей и более мощные и динамичные веб-приложения — вот краткий список собственных API-интерфейсов: <ul> <li> Drag and Drop (DnD) </li> <li> База данных для автономного хранения </li> <li> Управление историей браузера </li> <li> Редактирование документов </li> <li> Воспроизведение мультимедиа по времени </li> </ul> </li> <li> HTML5 не контролируется одной компанией.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/n/nJK7mce8Xy9vZCL2UF50gNuos1TdtDPrl3xBOq/slide-64.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/n/nJK7mce8Xy9vZCL2UF50gNuos1TdtDPrl3xBOq/slide-64.jpg' /></noscript> Одна из его лучших особенностей заключается в том, что это открытый стандарт. Разработчики могут дать волю своему творчеству и добавить столько функций и возможностей, сколько смогут. </li> <li> По сравнению с другими браузерами каждое обновление Google Chrome обязательно включает поддержку HTML5. Кроме того, проигрывателем YouTube по умолчанию теперь является HTML5, а Flash-объявления Google теперь преобразуются в HTML5. </li> <li> Использование HTML5 разработчиками (по регионам): <ul> <li> Северная и Латинская Америка — 70 % </li> <li> Южная Америка — 61 % </li> <li> ASPAC — 60 % </li> <li> Австралия — 60 % </li> <li> Европа — 59 % </li> <li> Африка — 50037 % </li> </ul> </li> </ol> <h3><span class="ez-toc-section" id="i-39"> Заключение </span></h3> <p> Хотя HTML был создан совсем недавно, в 1991 году (первая версия языка программирования была выпущена в 1995 году), он быстро стал основополагающим инструментом в разработке функциональных и визуально привлекательных веб-сайтов. Уровень влияния HTML также продолжает расти, и последняя версия (HTML5) используется все большим числом веб-сайтов по всему миру.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/v/VuZh5TH2eaOivK6tkoWI0Nd9CnyUYXcAEFpjGx/slide-13.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/v/VuZh5TH2eaOivK6tkoWI0Nd9CnyUYXcAEFpjGx/slide-13.jpg' /></noscript><div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div> </div> <div class="post-sharrre group"> <div id="twitter" data-url="https://ylianova.ru/html/uroki-html-dlya-nachinayushhih-html-uroki-s-nulya-uchebnik-dlya-nachinayushhih.html" data-text="Уроки html для начинающих: HTML уроки с нуля — учебник для начинающих" data-title="Tweet"></div> <div id="facebook" data-url="https://ylianova.ru/html/uroki-html-dlya-nachinayushhih-html-uroki-s-nulya-uchebnik-dlya-nachinayushhih.html" data-text="Уроки html для начинающих: HTML уроки с нуля — учебник для начинающих" data-title="Like"></div> <div id="googleplus" data-url="https://ylianova.ru/html/uroki-html-dlya-nachinayushhih-html-uroki-s-nulya-uchebnik-dlya-nachinayushhih.html" data-text="Уроки html для начинающих: HTML уроки с нуля — учебник для начинающих" data-title="+1"></div> <div id="pinterest" data-url="https://ylianova.ru/html/uroki-html-dlya-nachinayushhih-html-uroki-s-nulya-uchebnik-dlya-nachinayushhih.html" data-text="Уроки html для начинающих: HTML уроки с нуля — учебник для начинающих" data-title="Pin It"></div> </div> </div> </article> <ul class="post-nav group"> <li class="next"><a href="https://ylianova.ru/raznoe-2/ide-for-java-luchshie-ide-dlya-java-geekbrains.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Ide for java: Лучшие IDE для Java | GeekBrains</span></a></li> <li class="previous"><a href="https://ylianova.ru/raznoe-2/kak-v-fotoshope-sdelat-kartinku-poluprozrachnoj-kak-sdelat-kartinku-poluprozrachnoj-v-fotoshope.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Как в фотошопе сделать картинку полупрозрачной: Как сделать картинку полупрозрачной в Фотошопе</span></a></li> </ul> <section id="comments" class="themeform"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/uroki-html-dlya-nachinayushhih-html-uroki-s-nulya-uchebnik-dlya-nachinayushhih.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">

Имя *

Email *

Сайт