Изучаем HTML 5 версии

HTML (сокращение от HyperText Markup Language) — это язык разметки, который используется для создания веб-страниц и приложений. HTML5 — это последняя версия языка, которая приносит много новых тегов и функциональностей, упрощая разработку.

Основной концепт HTML

HTML состоит из тегов, которые располагаются внутри угольных скобок < >. Каждый тег имеет открывающую часть () и закрывающую часть (). Некоторые теги являются самозакрывающимися (e.g., ).

Помимо тегов, HTML использует атрибуты для указания дополнительной информации о тегах. Например, атрибут src для тега указывает путь к изображению.

Базовая структура HTML-документа

HTML-документ имеет определенную структуру, состоящую из нескольких обязательных элементов:



  
    Моя первая HTML-страница
  
  
    Заголовок
    Это первый параграф.

— сообщает браузеру, что это HTML5-документ.
— корневой тег, внутри которого находится вся страница.
— содержит метаданные для страницы.
</strong> — задает название вкладки в браузере.<br /><strong><body></strong> — содержит основное содержимое страницы.</p> <h2><br />Практические задания</h2> <h3>1. Создание простой веб-страницы</h3> <p>Создайте HTML-файл с структурой, как в примере выше. Измените заголовок на «Моя первая страница» и добавьте еще один параграф с текстом.</p> <h3>2. Изменение метаданных</h3> <p>Добавьте в раздел <head> тег <meta charset="UTF-8"> для корректного отображения русского текста.</p> <h3>3. Испробуйте самозакрывающиеся теги</h3> <p>Добавьте в раздел <body> тег <hr /> для разделения текста и вставьте картинку с помощью <img src="url" />, где url — ссылка на любое изображение в интернете.</p> <div class="rtb-lnt">  <div id="yandex_rtb_R-A-10878045-3"></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-10878045-3", "renderTo": "yandex_rtb_R-A-10878045-3", "type": "feed" }) }) </script> </div> <hr> </div> </div> <script src="https://yastatic.net/share2/share.js"></script> <div class="mx-1 mx-sm-3 my-3 text-center"><script src="https://yastatic.net/share2/share.js"></script> <div class="ya-share2" data-curtain data-size="l" data-shape="round" data-copy data-description="HTML 5 - "От простого к сложному"" data-image="" data-more-button-type="long" data-title="HTML 5 - "От простого к сложному"" data-services="vkontakte,odnoklassniki,telegram,twitter,viber,whatsapp,skype,evernote,pocket"> </div> </div> <ul class="nav-prev-next list-inline d-flex justify-content-between mx-1 mx-sm-3 my-3 p-2 rounded shadow-sm"> <li class="next list-inline-item"> </li> <li class="prev list-inline-item text-right"> <a href="https://codeincube.ru/articles/33"> Как добавить автоматически генерируемый slug с помощью JavaScript. <i class="fas fa-chevron-right"></i> </a> </li> </ul> <hr class="mb-4"/>  <div class="comments mx-1 mx-sm-3 mb-4 rounded" id="comments"></div> </div> </div> <div class='col-xl-4 col-md-12 px-0 my-1'> <div class="sidebar ml-sm-2 ps-sm-3 rounded animated slow fadeIn"> <div class="card"> <div class="card-header"> <h3 class="card-title"> Категории </h3> </div> <div class="card-body"> <ul class="list-inline"> <li class="badge-pill badge-primary category-item-li"> <a href="https://codeincube.ru/category/1" class="category-item"> Laravel </a> <b class="category-item-dark"> (2) </b> </li> <li class="badge-pill badge-secondary category-item-li"> <a href="https://codeincube.ru/category/2" class="category-item"> PHP </a> <b class="category-item-dark"> (0) </b> </li> <li class="badge-pill badge-success category-item-li"> <a href="https://codeincube.ru/category/3" class="category-item"> MySql </a> <b class="category-item-dark"> (0) </b> </li> <li class="badge-pill badge-danger category-item-li"> <a href="https://codeincube.ru/category/12" class="category-item"> JavaScript </a> <b class="category-item-dark"> (1) </b> </li> <li class="badge-pill badge-warning category-item-li"> <a href="https://codeincube.ru/category/13" class="category-item"> Сервис </a> <b class="category-item-dark"> (4) </b> </li> </ul> </div> </div> <div class="card"> <div class="card-header"> <h3 class="card-title"> Метки </h3> </div> <div class="card-body"> <div class="tag-cloud mt-2"> <a href="https://codeincube.ru/tags/1" style="font-size: 1rem;" class="badge bg-primary m-1"> Конвертеры (1) </a> <a href="https://codeincube.ru/tags/2" style="font-size: 1rem;" class="badge bg-secondary m-1"> Base64 (2) </a> <a href="https://codeincube.ru/tags/3" style="font-size: 1rem;" class="badge bg-success m-1"> ASCII (2) </a> <a href="https://codeincube.ru/tags/4" style="font-size: 1rem;" class="badge bg-dark m-1"> Текстовые (1) </a> <a href="https://codeincube.ru/tags/5" style="font-size: 1rem;" class="badge bg-primary m-1"> PNG (0) </a> <a href="https://codeincube.ru/tags/6" style="font-size: 1rem;" class="badge bg-secondary m-1"> JPG (2) </a> </div> </div> </div> <div class="card"> <div class="card-header"> <h3 class="card-title"> Популярные статьи </h3> </div>  <ul class="list-group hot-list"> <li class="d-flex justify-content-between align-items-center list-group-item list-group-item-action"> <a href="https://codeincube.ru/articles/27"> <i class="fa fa-plus"></i> Как указать сортиров... </a> <span class="badge badge-pill badge-secondary">180</span> </li> <li class="d-flex justify-content-between align-items-center list-group-item list-group-item-action"> <a href="https://codeincube.ru/articles/28"> <i class="fa fa-plus"></i> Как использовать пер... </a> <span class="badge badge-pill badge-secondary">133</span> </li> <li class="d-flex justify-content-between align-items-center list-group-item list-group-item-action"> <a href="https://codeincube.ru/articles/33"> <i class="fa fa-plus"></i> Как добавить автомат... </a> <span class="badge badge-pill badge-secondary">124</span> </li> <li class="d-flex justify-content-between align-items-center list-group-item list-group-item-action"> <a href="https://codeincube.ru/articles/29"> <i class="fa fa-plus"></i> Конвертер из Base64 ... </a> <span class="badge badge-pill badge-secondary">100</span> </li> <li class="d-flex justify-content-between align-items-center list-group-item list-group-item-action"> <a href="https://codeincube.ru/articles/31"> <i class="fa fa-plus"></i> Конвертер Webp в JPG... </a> <span class="badge badge-pill badge-secondary">86</span> </li> <li class="d-flex justify-content-between align-items-center list-group-item list-group-item-action"> <a href="https://codeincube.ru/articles/30"> <i class="fa fa-plus"></i> Конвертер ASCII в Ba... </a> <span class="badge badge-pill badge-secondary">79</span> </li> <li class="d-flex justify-content-between align-items-center list-group-item list-group-item-action"> <a href="https://codeincube.ru/articles/32"> <i class="fa fa-plus"></i> Конвертер из JPG в W... </a> <span class="badge badge-pill badge-secondary">76</span> </li> <li class="d-flex justify-content-between align-items-center list-group-item list-group-item-action"> <a href="https://codeincube.ru/articles/35"> <i class="fa fa-plus"></i> HTML 5 - "От простог... </a> <span class="badge badge-pill badge-secondary">51</span> </li> </ul> </div> </div> </div> </div> </div> <footer class="footer text-center my-4"> <div class="container"> <div class="row"> <div class="col-md-12"> <span class="copyright"> <span class="copyright-icon">©</span> <span class="copyright-year" itemprop="copyrightYear">2022 - 2025</span> <span class="author" itemprop="copyrightHolder">Codeincube.RU</span> </span> </br></br>  <a href="https://metrika.yandex.ru/stat/?id=98009393&from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/98009393/3_1_FFFFFFFF_EFEFEFFF_0_pageviews" style="float:left; width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" /></a>   <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(91139589, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/91139589" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  <a href="https://pr-cy.ru/" target="_blank" style="float:left; margin-left:10px; background-color: #f1f1f1; padding-inline: 5px;"> <img src="http://s.pr-cy.ru/counters/codeincube.ru" width="88" height="31" alt="PR-CY Rank" style="color:fff;"></a> <a href="https://webmaster.yandex.ru/siteinfo/?site=https://codeincube.ru" style="float:left; margin-left:10px; "><img width="88" height="31" alt="" border="0" src="https://yandex.ru/cycounter?https://codeincube.ru&theme=light&lang=ru" style="background:none"/></a> <a href="https://www.liveinternet.ru/click" target="_blank" style="float:left; margin-left:10px;"><img id="licnt178A" width="88" height="31" style="border:0" title="LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" alt=""/></a><script>(function(d,s){d.getElementById("licnt178A").src= "https://counter.yadro.ru/hit?t14.14;r"+escape(d.referrer)+ ((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+ (s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+ ";h"+escape(d.title.substring(0,150))+";"+Math.random()}) (document,screen)</script>   <a href="https://top-fwz1.mail.ru/jump?from=3592360"> <img src="https://top-fwz1.mail.ru/counter?id=3592360;t=479;l=1" height="31" width="88" alt="Top.Mail.Ru" style="border:0; float:left; margin-left:10px;" /></a>  </div> </div> <div class="row"> <div class="col-md-12"> </div> </div> </div>  <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-2476441-4", "type": "fullscreen", "platform": "touch" }) }) </script> </footer> <div class="back-to-top fa-stack d-none"> <i class="to-top-circle fas fa-circle fa-stack-2x"></i> <i class="to-top-arrow fas fa-arrow-up fa-stack-1x fa-inverse"></i> </div> </body> </html>