С помощью HTML-команд вы четко создаете веб-сайт и сохраняете самую важную информацию для всех браузеров. В дополнение к HTML-тегам для базовой структуры, есть также некоторые, которые вы можете использовать для интеграции мультимедиа, создания форм или указания шрифта.
- Что такое HTML-теги?
- Теги HTML для базовой структуры документа
- Базовая структура веб-сайта с HTML-тегами
- HTML-команды для таргетинга на веб-сайт
- HTML-команды для шрифта
- Выделите и пометьте разделы
- Создавайте таблицы и списки с тегами HTML
- Список в HTML
- Встроить медиа в HTML
- HTML-теги для формы
- Другие важные HTML-команды
Что такое HTML-теги?
Если вы хотите изучить HTML или написать свой собственный HTML-код, теги HTML, вероятно, являются вашим самым важным и эффективным инструментом. Команды HTML используются для передачи информации в различные браузеры. Веб-сайт структурирован наилучшим образом и может отображаться в любом браузере благодаря сохраненной информации.
Теги HTML представлены начальным и конечным тегами. Теги HTML помещаются в угловые скобки и заключают в себе нужную информацию, а конечный тег помечен косой чертой. Комбинация начального тега, информации и конечного тега называется элементом. Элементу можно присвоить HTML-атрибут, предоставляющий дополнительную информацию.
Вот пример структуры тега HTML:
Тег HTML <h> помечает заголовки.
Существует множество различных тегов HTML, и вам, вероятно, не все они понадобятся. Кроме того, некоторые теги HTML больше не используются с момента появления HTML 5 и более поздних версий HTML 5.1. Поэтому полезно всегда иметь под рукой обзор наиболее важных HTML-команд. Ниже вы найдете наиболее распространенные HTML-команды в виде таблицы, отсортированные по категориям.
Теги HTML для базовой структуры документа
Следующие теги HTML структурируют веб-сайт и формируют основу для всех других элементов в документе.
| HTML-тег | Описание |
| <!DOCTYPE> | Этот тег HTML определяет тип документа. |
| <html> | Этот тег HTML определяет документ как HTML-документ. |
| <head> | Метаданные о документе хранятся в области <head>. |
| <title> | Название документа, которое также отображается в строке заголовка браузера, хранится в этой HTML-команде. |
| <body> | <body> является основным телом и содержит содержимое, которое будет отображаться в браузере. |
| <nav> | Это область навигации веб-сайта. |
| <section> | Элементы могут быть сгруппированы вместе с помощью <section>. |
| <article> | <article> — это область содержимого домашней страницы. |
| <headers> | <header> определяет заголовок страницы или раздела. |
| <footers> | Нижний колонтитул страницы или раздела определяется с помощью <footer>. |
Базовая структура веб-сайта с HTML-тегами
Базовая структура веб-сайта может выглядеть следующим образом:
<!DOCTYPE html> <html> <head> <title>Der Titel Ihrer Website</title> </head> <body>Hier ist Platz für Texte oder Bilder.</body> </html>
HTML-команды для таргетинга на веб-сайт
Существует множество тегов HTML, которые можно использовать для разделения и построения отдельных областей или всей страницы.
| HTML-тег | Описание |
| <h1> до <h6> | Заголовки создаются с помощью различных тегов h. Чем меньше число, тем больше заголовок. |
| <р> | Абзац помечен <p>. |
| <br> | Разрыв строки устанавливается с помощью HTML-тега <br>. |
| <hr> | <hr> создает визуальную разделительную линию, которая появляется между двумя частями контента. |
HTML-теги для структурирования документа
Пример использования структурных тегов HTML:
<body> <h1>Hier steht eine Überschrift</h1> <p>Hier ist Platz für einen Fließtext.</p> <h2>Eine Zwischenüberschrift gliedert den Inhalt</h2> <p>Weiterer Text und dazwischen <br> ein Umbruch.</p> </body>
HTML-команды для шрифта
Вы можете использовать различные HTML-команды для изменения шрифта вашего документа.
| HTML-тег | Описание |
| <b> | Отдельные слова, предложения или абзацы выделены жирным шрифтом. |
| <i> | Отдельные слова, предложения или абзацы отображаются курсивом. |
| <u> | Вложенная часть подчеркнута. |
| <s> | Рассматриваемый шрифт перечеркнут. |
| <up> | С помощью HTML-тега <sup> символы могут быть добавлены в верхний индекс, например. Б. на 1 ст. |
| <sub> | С помощью подстрочного индекса <sub> могут быть представлены символы, например. например, с H 2 O. |
Настройте текст в документе
Пример настройки шрифта с помощью HTML-команд:
<body> <p>Hier steht ein Beispieltext und <i>dieser Teil wird kursiv geschrieben</i>.</p> </body>
Выделите и пометьте разделы
Следующие теги HTML в основном используются для форматирования или маркировки разделов:
| HTML-тег | Описание |
| <strong> | Вы можете использовать <strong>, чтобы выделить определенные разделы. |
| <em> | <em> выделяет фрагменты текста. |
| <q> | Цитаты в тексте можно помечать знаком <q>. |
| <blockquote> | <blockquote> помечает весь абзац как цитату. |
Форматирование с помощью тега HTML
Вот пример использования этих HTML-команд:
<body> <p>Dies ist ein Fließtext. <strong>Dieser Teil wird hervorgehoben</strong>.</p> </body>
Создавайте таблицы и списки с тегами HTML
Вы также можете создавать таблицы и списки в документе HTML. Вот соответствующие теги HTML:
| HTML-тег | Описание |
| <table> | Таблица определяется с помощью HTML-тега <table>. |
| <caption> | <caption> определяет заголовок таблицы. |
| <tr> | Строки таблицы помечаются знаком <tr>. |
| <td> | <td> определяет конкретную ячейку в таблице. |
| <th> | Ячейка заголовка таблицы определяется с помощью <th>. |
| <ol> | Список с порядковыми номерами создается с помощью <ol>. |
| <ul> | <ul> создает неупорядоченный маркированный список. |
| <li> | <li> обозначает отдельные записи в списке. |
| <dl> | <dl> указывает список определений. |
| <dt> | <dt> определяет термин или позицию в списке определений. |
| <dd> | <dd> — это описание определения в списке. |
Список в HTML
Вот как выглядит (ненумерованный) список в HTML-документе:
<body> <ul> <li>Erster Punkt</li> <li>Zweiter Punkt</li> <li>Dritter Punkt</li> </ul> </body>
Встроить медиа в HTML
Различные теги HTML позволяют вставлять и форматировать изображения, видео и аудиофайлы в документ. Доступ к медиа обычно осуществляется через URL-адрес. Вот наиболее распространенные HTML-команды:
| HTML-тег | Описание |
| <img> | Тег HTML определяет изображение. |
| <map> | Карту можно интегрировать в документ с помощью <map>. |
| <audio> | <audio> позволяет встраивать аудиоконтент. |
| <video> | Используйте <video> для добавления видеоконтента. |
Вставьте изображение с помощью тега HTML
Если вы хотите включить медиа-контент, вы также должны использовать HTML-атрибуты src для источника и alt для альтернативного текста. Это будет выглядеть так:
<body> <img src="img/beispielbild.png" alt="Beschreibung des Bildes" /> </body>
HTML-теги для формы
Если вы хотите добавить форму на свой веб-сайт, используйте следующие HTML-команды:
| HTML-тег | Описание |
| <shape> | С помощью <form> вы создаете форму. |
| <input> | <input> используется для управления вводом. |
| <button> | Используйте <button>, чтобы добавить кнопку. |
| <select> | С помощью <select> вы создаете список выбора. |
Создать форму
На практике вы создаете такую форму:
<body> <form method="post" action="mailto:mail@beispiel.com"> Name: <input type="text" name="name" /> Password: <input type="password" name="password" /> </form> </body>
Кнопка «Установить»
Вставьте такую кнопку:
<body> <h2>Hier wird der Button platziert</h2> <button type="button">Click</button> </body>
Вставить ссылки в HTML
Используйте эти теги HTML для создания ссылок в документе:
| HTML-тег | Описание |
| <a> | Гиперссылка указывается с помощью <a>. |
| <links> | <ссылка> устанавливает связь между документом и внешним источником. |
| <nav> | <nav> создает ссылки для навигации. |
Ссылки через HTML-тег
Чтобы сделать ссылку в HTML-документе:
<body> <h2>Kontakt</h2> <p>Schreiben Sie uns gerne <a href="mailto:mail@beispiel.de">per Mail</a>.</p> </body>
Другие важные HTML-команды
Существует множество других тегов HTML, которые вы можете использовать , например, в редакторе HTML и которые упрощают вашу работу. Это небольшая подборка:
| HTML-тег | Описание |
| <style> | С помощью тега HTML <style> вы вставляете коды CSS, которые определяют внешний вид вашего веб-сайта. |
| <div> | Разделы документа определяются с помощью HTML-тега <div>. |
| <label> | Тег HTML <label> используется с тегом <input> и определяет для него текстовое поле. |
| <iframe> | HTML -тег <iframe> позволяет встраивать внешний контент на ваш сайт. |
| <!— … —> | <!— … —> позволяет включать комментарии в код HTML. |
