HTML je jednoduché textový súbor s príponou .htm (html). Na tvorenie najjednoduchšia stránka spočiatku, keď len trénujete, potrebujete iba notebook. Otvorte poznámkový blok a napíšte text.
Každý prvok HTML je značka obklopená<>zátvorkách. Akýkoľvek súbor, html stránka začína značkou a končí značkou.
Tu je značka jednoducho povie prehliadaču (čo je program, v ktorom si prehliadate web), že tento dokument je html značkovací dokument.
Tag - znamená začiatok html dokumentu a- záverečná značka, znamená koniec html dokumentu.
V rámci týchto značiek existuje niekoľko ďalších dôležitých značiek. Hneď za značkou existujú značky, ktoré znamenajú názov stránky a telo stránky.
Moja prvá HTML stránka
Tag
znamená názov nadpisu okna pri zobrazení tejto stránky. <br>Teraz môžete vytvoriť nový <a href="https://bar812.ru/sk/sozdanie-kompleksnyh-dokumentov-v-tekstovom-redaktore-ms-word.html">Textový dokument</a> v poznámkovom bloku skopírujte text vyššie a uložte ho ako Stránka1.html a spustite ho v prehliadači, v nadpise okna prehliadača uvidíte názov stránky z <title>, a prázdnu stranu, pretože sme v tele stránky v značkách <body> </body> nevydávame nič.</p>
<p>Takže vyššie uvedený text bude pre nás základným rámcom akejkoľvek webovej stránky.</p>
<h4><b>Spárované a nespárované značky!</b></h4>
<p><html></html>, <head></head>,<body></body> Sú to len párové tagy – tie tagy, ktoré idú ako pár tagu a jeho uzatvárací, uzatvárací tag so symbolom /. V prípade párových značiek je hodnota obsiahnutá medzi začiatkom značky a jej koncom akciou značky. Akcia sa bude šíriť dovtedy, kým sa nenájde značka so znakom /.</p>
<p>Nespárované značky – nemajú uzatváraciu značku. Nižšie uvádzame príklady takýchto značiek.</p>
<p><head></head>- hlavička <a href="https://bar812.ru/sk/grafika-na-web-stranice-v-html-dobavlyaem-izobrazheniya-na-web-stranicu-a-eshche.html">html stránky</a>, ktoré zahŕňa <a href="https://bar812.ru/sk/gugl-advords-sbor-klyuchevyh-slov-planirovshchik-klyuchevyh-slov-google-adwords.html">Kľúčové slová</a> pre vyhľadávače <a href="https://bar812.ru/sk/ustanovka-skriptov-v-razlichnye-brauzery-ustanovka-skriptov-v.html">rôzne skripty</a>, atď.</p>
<p><body></body>- Priamo telo html dokumentu.</p>
<p><br />Nespárovaná značka.</p>
<p><b>Poznámka:</b> Vo väčšine prípadov teraz pri stavbe stránok používajú hotové rutiny, pluginy atď. - pre viac <a href="https://bar812.ru/sk/metall-v-fotoshope-bystryi-sposob-sozdaniya-metallicheskogo.html">rýchla tvorba</a> stránky, ale na použitie a používanie takýchto rutín a šablón je stále potrebná minimálna znalosť týchto relácií.</p>
<p><b>Tag</b> (<i>pl. tagy, niekedy tag</i>) je prvkom <a href="https://bar812.ru/sk/rules-html-obshchie-pravila-shchity-zh2-pravila-yazyka-html-ispolzuite-sokrashch-nnye.html">jazyk HTML</a>, ktorý sa používa na označenie zdrojového textu webovej stránky. Tagy sú skratky alebo skratky anglických slov v lomených zátvorkách.<>napr <b><p>
</b>…<b></p>
</b> skratka pre anglické slovo <span><i>odsek</i>, to znamená, že text v tejto značke budú prehliadače rozpoznané ako odsek.</p>
<p>Každá značka v HTML má špeciálny význam a je zodpovedná za zobrazenie určitých údajov. Na veľkosti písmen v názvoch tagov nezáleží, napríklad tag <b><p>
</b>…<b></p>
</b> a tag <b><P>
</b>…<b><b></P>
</b>
</b>- Toto je to isté. To znamená, že značky možno písať malými písmenami aj <a href="https://bar812.ru/sk/propisnoi-shrift-css-delaem-zaglavnye-bukvy-css-stilyami-s.html">veľké písmená</a>. Predtým sa všeobecne uznávalo, že všetky značky sa píšu veľkými písmenami, aby sa značky líšili od bežného textu. Teraz to nie je potrebné, pretože veľa editorov má zvýraznenie syntaxe.</p>
<h2>Klasifikácia značiek</h2>
<p>V HTML je viac ako 90 značiek. Jedna značka spravidla ovplyvňuje iba časť dokumentu, napríklad značka nadpisu prvej úrovne <h1>…</h1>. V takýchto prípadoch sa používajú párové značky: <i>otvorenie</i> a <i>zatváranie</i>. Otváracia značka (napr. <b><h1>
</b>) vytvára efekt a zatváranie ( <b></h1>
</b>) ho ukončí. Ako vidíte z príkladu, uzatváracia značka má vždy tento znak ( <b>/
</b>) je lomka. Tieto značky sa nazývajú <i>spárované</i>.</p>
<p>Niektoré značky majú jednorazový účinok tam, kde sa objavia. Napríklad značka vodorovného pruhu <HR>alebo značku zobrazenia obrázka <img>. Takéto značky nemajú koncové značky. Takéto značky sa nazývajú nespárované.</p>
<h3>Typy značiek</h3>
<p>Okrem toho sú značky rozdelené do niekoľkých typov, ktoré sa líšia svojimi funkciami:</p>
<ul><li>štítky názvov dokumentov;</li>
<li>blokové prvky;</li>
<li>vložené prvky;</li>
<li>univerzálne prvky;</li>
<li>zoznamy;</li>
<li>tabuľky;</li>
<li>rámy.</li>
</ul><p>Toto rozdelenie nie je striktné, preto sú niektoré značky v rôznych skupinách. Napríklad značky na vytváranie zoznamov <ol>a <ul>platí pre zoznamy aj prvky bloku.</p>
<h2>Štruktúra značky</h2>
<p>Po načítaní v prehliadači sa samotné značky nezobrazujú, ale ovplyvňujú spôsob zobrazenia ich obsahu. Ak je značka napísaná nesprávne, celá sa ignoruje.</p>
<p>Všetky značky majú určitú štruktúru, ktorú treba pri písaní dodržiavať. Navyše takmer všetky značky majú rôzne atribúty, ktoré môžu zmeniť spôsob zobrazenia obsahu.</p>
<p>Pozrime sa na správnu štruktúru značiek obsahujúcich atribúty:</p>
<ol><li><b> <img src='/chto-takoe-parnye-tegi-tegi-v-html-odinarnye-i-parnye-tegi-kak.html' loading=lazy loading=lazy>
</b></li>
<li><b><a href=»сайт»>Sám správca webu</a>
</b></li>
</ol><p>Napríklad som dal dve úplne odlišné značky. Prvý <img>single - zodpovedný za zobrazovanie obrázkov, atribút - <b>src="logo.jpg"</b>. Po druhé <a>…</a> dvojica je zodpovedná za vytváranie odkazov, atribút je <b>href="site"</b>.</p>
<p><b>Záver 1</b>: Atribúty môžu mať spárované a nepárové značky.</p>
<p><b>Záver 2</b>: Atribúty môžu mať iba počiatočné značky, koncové značky nemajú žiadne atribúty.</p>
<p>Obrázok pre objasnenie:</p>
<p><img src='https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/04/%D1%81%D1%82%D1%80%D1%83%D1%82%D1%83%D1%80%D0%B0-%D1%82%D0%B5%D0%B3%D0%B0-html.gif' width="100%" loading=lazy loading=lazy></p><p>Obrázok 1. Štruktúra html tagu</p>
<h4>Úloha pre pozornosť a znalosť syntaxe HTML</h4>
<p>Pozrime sa na príklad jednoduchej webovej stránky, na ktorú sme sa pozreli v návode.</p>
<p>Už ste čítali, že celý jazyk tvoria tagy. V tomto návode sa bližšie pozrieme na značky HTML. V jazyku HTML sa značky delia na jednoduché (nespárované) a párové značky. Jednotlivé značky HTML teda pozostávajú z jednej značky, to znamená, že nemajú uzatváraciu značku. A párové deskriptory majú otváraciu a zatváraciu značku.</p>
<h2>Jednotlivé značky HTML</h2>
<p><b>Jednotlivé značky</b> nemajú uzatváraciu značku. Napríklad: <br> , <img>. Kedysi sa to písalo takto: <br/> , <img src='/chto-takoe-parnye-tegi-tegi-v-html-odinarnye-i-parnye-tegi-kak.html' loading=lazy loading=lazy>, teraz tento štýl písania jednotlivých značiek nie je relevantný, tak nepíšte. Najpoužívanejšie jednotlivé značky: <br>- preniesť na <a href="https://bar812.ru/sk/nevernoe-kolichestvo-kategorii-v-ishodnoi-stroke-1s-novye-funkcii-raboty-so.html">Nový riadok</a>, <hr>- deliaca čiara, <img>- vložiť obrázok.</p>
<h2>Spárované značky HTML</h2>
<p><b>Spárované značky</b> oveľa viac. Párový deskriptor má otvárací a uzatvárací tag. Párová značka tvorí kontajner. Obsah nádoby je to, čo je medzi otváracou a zatváracou značkou. V príklade z tohto článku ste videli značku <h1>Čo sú značky v HTML?</h1>, teda, ide o párovú značku, obsahom tejto značky je text „Čo sú značky v HTML?“. Jeho začiatok je značka <h1>a koniec</h1> .</p>
<p><a href="https://bar812.ru/sk/na-glavnuyu-stranicu-vam-nuzhno-primery-tekstov-na-glavnuyu-stranicu-i.html">Hlavná chyba</a> nováčikovia v písaní párových značiek, je to zmätok. Napríklad toto je správny záznam: <p><b>Tučný odsek</b></p>. A tu je chyba: <p><b>Tučný odsek</p></b>, HTML dokument s takýmto rozložením sa nepovažuje za platný. Aby nedošlo k zámene vnorenia, urobte toto: vytvorte párové značky, potom do nich vložte ďalšie a na konci napíšte text do oboch značiek <p><b>Ako správne písať párové značky</b></p> .</p>
<h2>Čo je nové v HTML5 z hľadiska značiek?</h2>
<p><b>jazyk HTML5</b> je rozšírením HTML4, takže ponechal väčšinu alebo všetky značky z HTML4 a pridal svoje vlastné. HTML5 zaviedlo špeciálne značky na rozdelenie stránky na hlavné bloky: hlavičku, ponuku, pätu, bočný panel a obsah.</p>
<h2>Prečo je dôležité naučiť sa používať značky?</h2>
<p>Vyhľadávače Yandex a Google sú citlivé na rozloženie <a href="https://bar812.ru/sk/na-etoi-stranice-proizoshla-oshibka-scenariya-kak-ustranit-oshibki.html">HTML dokumenty</a> kontrola ich platnosti. Hľadajú kľúčové slová uzavreté v špeciálnych deskriptoroch atď. Ale o tom táto časť nie je. Týka sa to propagácie (SEO).</p>
<h2>Ako sa naučiť všetky HTML značky?</h2>
<p>Áno, existuje veľa značiek. Ale nie je potrebné ich špeciálne učiť. Kým budete niečo písať, všetky deskriptory, párové aj jednotlivé, si ľahko zapamätáte. Postupom času, samozrejme.</p>
<p><b>HTML tagy</b> je základom jazyka HTML. Značky sa používajú na vymedzenie začiatku a konca prvkov v značke.</p>
<p>Každý HTML dokument pozostáva zo stromu HTML prvkov a textu. Každý prvok HTML je identifikovaný počiatočnou (otváracou) a koncovou (zatváracou) značkou. Začiatočné a koncové značky obsahujú názov značky.</p>
<p>Všetky prvky HTML sú rozdelené do piatich typov:</p>
<ul><li><b>prázdne prvky</b> — <area> , <base> , <br> , <col> , <embed> , <hr> , <img> , <input> , <link> , <menuitem> , <meta> , <param> , <source> , <track> , <wbr> ;</li>
<li><b>prvky obyčajného textu</b> — <script> , <style> ;</li>
<li><b>элементы, выводящие неформатированный текст
</b> — <textarea> , <title> ;</li>
<li><b>элементы из другого пространства имён
</b> — MathML и SVG;</li>
<li><b>обычные элементы
</b> — все остальные элементы.</li>
</ul><p>В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым
цветом.</p>
<h2>Полный список HTML-элементов</h2>
<table class="t3">
Таблица 1. HTML-элементы
<tr><th style="width: 20%;">Тег
</th>
<th>Описание
</th>
</tr><tr><td> <!--...-->
</td>
<td>Используется для добавления комментариев.
</td>
</tr><tr><td> <!DOCTYPE>
</td>
<td>Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
</td>
</tr><tr><td> <a>
</td>
<td>Создаёт гипертекстовые ссылки.
</td>
</tr><tr><td> <abbr>
</td>
<td>Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title .
</td>
</tr><tr><td> <address>
</td>
<td>Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
</td>
</tr><tr><td> <area>
</td>
<td>Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map> .
</td>
</tr><tr><td> <article>
</td>
<td>Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
</td>
</tr><tr><td> <aside>
</td>
<td>Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
</td>
</tr><tr><td> <audio>
</td>
<td>Загружает звуковой контент на веб-страницу.
</td>
</tr><tr><td> <b>
</td>
<td>Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
</td>
</tr><tr><td> <base>
</td>
<td>Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
</td>
</tr><tr><td> <bdi>
</td>
<td>Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
</td>
</tr><tr><td> <bdo>
</td>
<td>Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста.
</td>
</tr><tr><td> <blockquote>
</td>
<td>Выделяет текст как цитату, применяется для описания больших цитат.
</td>
</tr><tr><td> <body>
</td>
<td>Представляет тело документа (содержимое, не относящееся к метаданным документа).
</td>
</tr><tr><td> <br>
</td>
<td>Перенос текста на новую строку.
</td>
</tr><tr><td> <button>
</td>
<td>Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
</td>
</tr><tr><td> <canvas>
</td>
<td>Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
</td>
</tr><tr><td> <caption>
</td>
<td>Добавляет подпись к таблице. Вставляется сразу после тега <table> .
</td>
</tr><tr><td> <cite>
</td>
<td>Используется для указания источника цитирования. Отображается курсивом.
</td>
</tr><tr><td> <code>
</td>
<td>Представляет фрагмент программного кода, отображается шрифтом семейства monospace .
</td>
</tr><tr><td> <col>
</td>
<td>Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
</td>
</tr><tr><td> <colgroup>
</td>
<td>Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
</td>
</tr><tr><td> <data>
</td>
<td>Элемент используется для связывания значения атрибута value , которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
</td>
</tr><tr><td> <datalist>
</td>
<td>Элемент-контейнер для выпадающего списка элемента <input> . Варианты значений помещаются в элементы <option> .
</td>
</tr><tr><td> <dd>
</td>
<td>Используется для описания термина из тега <dt> .
</td>
</tr><tr><td> <del>
</td>
<td>Помечает текст как удаленный, перечёркивая его.
</td>
</tr><tr><td> <details>
</td>
<td>Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary> .
</td>
</tr><tr><td> <dfn>
</td>
<td>Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
</td>
</tr><tr><td> <dialog>
</td>
<td>Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
</td>
</tr><tr><td> <div>
</td>
<td>Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
</td>
</tr><tr><td> <dl>
</td>
<td>Тег-контейнер, внутри которого находятся термин и его описание.
</td>
</tr><tr><td> <dt>
</td>
<td>Используется для задания термина.
</td>
</tr><tr><td> <em>
</td>
<td>Выделяет важные фрагменты текста, отображая их курсивом.
</td>
</tr><tr><td> <embed>
</td>
<td>Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
</td>
</tr><tr><td> <fieldset>
</td>
<td>Группирует связанные элементы в форме, рисуя рамку вокруг них.
</td>
</tr><tr><td> <figcaption>
</td>
<td>Заголовок/подпись для элемента <figure> .
</td>
</tr><tr><td> <figure>
</td>
<td>Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
</td>
</tr><tr><td> <footer>
</td>
<td>Определяет завершающую область (нижний колонтитул) документа или раздела.
</td>
</tr><tr><td> <form>
</td>
<td>Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action .
</td>
</tr><tr><td> <h1-h6>
</td>
<td>Создают заголовки шести уровней для связанных с ними разделов.
</td>
</tr><tr><td> <head>
</td>
<td>Элемент-контейнер для метаданных HTML-документа, таких как <title> , <meta> , <script> , <link> , <style> .
</td>
</tr><tr><td> <header>
</td>
<td>Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
</td>
</tr><tr><td> <hr>
</td>
<td>Горизонтальная линия для тематического разделения параграфов.
</td>
</tr><tr><td> <html>
</td>
<td>Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
</td>
</tr><tr><td> <i>
</td>
<td>Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
</td>
</tr><tr><td> <iframe>
</td>
<td>Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
</td>
</tr><tr><td> <img>
</td>
<td>Встраивает изображения в HTML-документ с помощью атрибута src , значением которого является адрес встраиваемого изображения.
</td>
</tr><tr><td> <input>
</td>
<td>Создает многофункциональные поля формы, в которые пользователь может вводить данные.
</td>
</tr><tr><td> <ins>
</td>
<td>Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
</td>
</tr><tr><td> <kbd>
</td>
<td>Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
</td>
</tr><tr><td> <meta>
</td>
<td>Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta> , так как в зависимости от используемых атрибутов они несут разную информацию.
</td>
</tr><tr><td> <meter>
</td>
<td>Индикатор измерения в заданном диапазоне.
</td>
</tr><tr><td> <nav>
</td>
<td>Раздел документа, содержащий навигационные ссылки по сайту.
</td>
</tr><tr><td> <noscript>
</td>
<td>Определяет секцию, не поддерживающую сценарий (скрипт).
</td>
</tr><tr><td> <object>
</td>
<td>Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param> .
</td>
</tr><tr><td> <ol>
</td>
<td>Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
</td>
</tr><tr><td> <optgroup>
</td>
<td>Контейнер с заголовком для группы элементов <option> .
</td>
</tr><tr><td> <option>
</td>
<td>Определяет вариант/опцию для выбора в раскрывающемся списке <select> , <optgroup> или <datalist> .
</td>
</tr><tr><td> <output>
</td>
<td>Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
</td>
</tr><tr><td> <p>
</td>
<td>Параграфы в тексте.
</td>
</tr><tr><td> <param>
</td>
<td>Определяет параметры для плагинов, встраиваемых с помощью элемента <object> .
</td>
</tr><tr><td> <picture>
</td>
<td>Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source> . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
</td>
</tr><tr><td> <pre>
</td>
<td>Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
</td>
</tr><tr><td> <progress>
</td>
<td>Индикатор выполнения задачи любого рода.
</td>
</tr><tr><td> <q>
</td>
<td>Определяет краткую цитату.
</td>
</tr><tr><td> <ruby>
</td>
<td>Контейнер для Восточно-Азиатских символов и их расшифровки.
</td>
</tr><tr><td> <rb>
</td>
<td>Определяет вложенный в него текст как базовый компонент аннотации.
</td>
</tr><tr><td> <rt>
</td>
<td>Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby> , выводится уменьшенным шрифтом.
</td>
</tr><tr><td> <rtc>
</td>
<td>Отмечает вложенный в него текст как дополнительную аннотацию.
</td>
</tr><tr><td> <rp>
</td>
<td>Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
</td>
</tr><tr><td> <s>
</td>
<td>Отображает текст, не являющийся актуальным, перечеркнутым.
</td>
</tr><tr><td> <samp>
</td>
<td>Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
</td>
</tr><tr><td> <script>
</td>
<td>Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .
</td>
</tr><tr><td> <section>
</td>
<td>Определяет логическую область (раздел) страницы, обычно с заголовком.
</td>
</tr><tr><td> <select>
</td>
<td>Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option> .
</td>
</tr><tr><td> <small>
</td>
<td>Отображает текст шрифтом меньшего размера.
</td>
</tr><tr><td> <source>
</td>
<td>Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture> , <video> , <audio> .
</td>
</tr><tr><td> <span>
</td>
<td>Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
</td>
</tr><tr><td> <strong>
</td>
<td>Расставляет акценты в тексте, выделяя полужирным.
</td>
</tr><tr><td> <style>
</td>
<td>Подключает встраиваемые таблицы стилей.
</td>
</tr><tr><td> <sub>
</td>
<td>Задает подстрочное написание символов, например, индекса элемента в химических формулах.
</td>
</tr><tr><td> <summary>
</td>
<td>Создаёт видимый заголовок для тега <details> . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
</td>
</tr><tr><td> <sup>
</td>
<td>Задает надстрочное написание символов.
</td>
</tr><tr><td> <table>
</td>
<td>Тег для создания таблицы.
</td>
</tr><tr><td> <tbody>
</td>
<td>Определяет тело таблицы.
</td>
</tr><tr><td> <td>
</td>
<td>Создает ячейку таблицы.
</td>
</tr><tr><td> <template>
</td>
<td>Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
</td>
</tr><tr><td> <textarea>
</td>
<td>Создает большие поля для ввода текста.
</td>
</tr><tr><td> <tfoot>
</td>
<td>Определяет нижний колонтитул таблицы.
</td>
</tr><tr><td> <th>
</td>
<td>Создает заголовок ячейки таблицы.
</td>
</tr><tr><td> <thead>
</td>
<td>Определяет заголовок таблицы.
</td>
</tr><tr><td> <time>
</td>
<td>Определяет дату/время.
</td>
</tr><tr><td> <title>
</td>
<td>Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
</td>
</tr><tr><td> <tr>
</td>
<td>Создает строку таблицы.
</td>
</tr><tr><td> <track>
</td>
<td>Добавляет субтитры для элементов <audio> и <video> .
</td>
</tr><tr><td> <u>
</td>
<td>Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
</td>
</tr><tr><td> <ul>
</td>
<td>Создает маркированный список.
</td>
</tr><tr><td> <var>
</td>
<td>Выделяет переменные из программ, отображая их курсивом.
</td>
</tr><tr><td> <video>
</td>
<td>Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
</td>
</tr><tr><td> <wbr>
</td>
<td>Указывает браузеру возможное место разрыва длинной строки.
</td>
</tr></table><h3>Таблица-шпаргалка с тегами</h3>
<p>Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.</p>
<i>
</i><p>HTML элемент
- это основная структурная единица веб-страницы, написанная на языке HTML.</p>
<h2>Парные и одиночные теги HTML</h2>
<p>Синтаксис HTML элементов, состоящих из парных тегов:</p>
<ul><li>Элемент начинается с открывающего тега.</li>
<li>Элемент заканчивается закрывающим тегом.</li>
<li>Содержимым элемента является все, что находится между открывающим и закрывающим тегами. Содержимое может быть текстом и/или другим HTML элементом.</li>
</ul><p>Примечание:
не забывайте в закрывающем теге ставить символ "<b>/
</b>", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ "<b>/
</b>" в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.</p>
<p>Синтаксис HTML элементов, состоящих из одиночных тегов:</p>
<p><img src='https://i1.wp.com/puzzleweb.ru/images/teacher/html_elements2.png' height="212" width="237" loading=lazy loading=lazy></p>
<ul><li>Элемент состоит только из открывающего тега.</li>
</ul><p>Элементы, состоящие из одиночных тегов называются пустыми
. Всего в HTML 16 одиночных тегов:</p>
<table id="em_el"><tr><td style="width: 50%;">
</td>
<td>
</td>
</tr></table><h2>Вложенные элементы</h2>
<p>HTML элементы, состоящие из парных тегов, могут либо содержать в себе любые другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.</p>
<p>Следующий пример состоит из трех элементов, два из которых вложенные:</p><p>
<html>
<body>
<p>Мой первый абзац</p>
</body>
</html>
</p><p>Когда один элемент располагается внутри другого, нужно следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, например, следующий код является неверным:</p><p>
<p>Это <em>очень</p> интересно</em>
</p><p>Здесь элемент <em> выходит за пределы элемента
<p><img src='https://i1.wp.com/puzzleweb.ru/images/puzzleweb/nested2.png' height="90" width="171" loading=lazy loading=lazy></p>
<p>Пример с правильной вложенностью:</p><p>
<p>Это <em>очень</em> интересно</p>
</p><p>Здесь элемент <em> правильно вложен - он находится полностью в элементе
<p><img src='https://i1.wp.com/puzzleweb.ru/images/puzzleweb/nested1.png' height="79" width="162" loading=lazy loading=lazy></p>
<h2>Пробельные символы</h2>
<p>Браузер игнорирует пробельные символы в HTML-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пример кода, в котором используются пробельные символы:</p><p>
<html>
<head>
<title>Заголовок
Мой первый заголовок
Мой первый абзац
