17 простых примеров HTML-кода, которые можно выучить за 10 минут
Несмотря на то, что современные веб-сайты обычно создаются с удобными интерфейсами, полезно знать основы HTML. Если вы знаете следующие 17 примеров тегов HTML (и несколько дополнительных), вы сможете создать базовую веб-страницу с нуля или настроить код, созданный таким приложением, как WordPress.
Мы предоставили примеры кода HTML с выводом для большинства тегов. Если вы хотите увидеть их в действии, загрузите образец HTML-файла в конце статьи. Вы можете поиграть с ним в текстовом редакторе и загрузить в браузере, чтобы увидеть, что делают ваши изменения.
1. <! DOCTYPE html>
Этот тег понадобится вам в начале каждого создаваемого HTML-документа. Это гарантирует, что браузер знает, что он читает HTML, и что он ожидает HTML5, последней версии.
Хотя на самом деле это не HTML-тег, его все же полезно знать.
2. <html>
Это еще один тег, который сообщает браузеру, что он читает HTML. Тег <html> идет сразу после тега DOCTYPE, и вы закрываете его тегом </html> прямо в конце файла. Все остальное в вашем документе находится между этими тегами.
3. <заголовок>
Тег <head> начинает раздел заголовка вашего файла. То, что здесь находится, не отображается на вашей веб-странице. Вместо этого он содержит метаданные для поисковых систем и информацию для вашего браузера.
Для базовых страниц тег <head> будет содержать ваш заголовок, и на этом все. Но есть еще несколько вещей, которые вы можете включить, о которых мы скоро поговорим.
4. <название>
Этот тег устанавливает заголовок вашей страницы. Все, что вам нужно сделать, это поместить свой заголовок в тег и закрыть его, как это (я также включил теги заголовка, чтобы показать контекст):
<head>
<title>My Website</title>
</head>Это имя будет отображаться в качестве заголовка вкладки при ее открытии в браузере.
5. <meta>
Как и тег заголовка, метаданные помещаются в область заголовка вашей страницы. Метаданные в основном используются поисковыми системами и представляют собой информацию о том, что находится на вашей странице. Есть несколько различных мета-полей, но это одни из наиболее часто используемых:
- описание : Базовое описание вашей страницы.
- ключевые слова : набор ключевых слов, применимых к вашей странице.
- автор : Автор вашей страницы.
- область просмотра : Тег для того, чтобы ваша страница хорошо выглядела на всех устройствах.
Вот пример, который может относиться к этой странице:
<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="MUO">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Тег «viewport» всегда должен иметь содержимое «width = device-width, initial-scale = 1.0», чтобы ваша страница хорошо отображалась на мобильных и настольных устройствах.
6. <body>
После того, как вы закроете раздел заголовка, вы перейдете к телу. Вы открываете его с помощью тега <body> и закрываете с помощью тега </body>. Это идет в самом конце вашего файла, непосредственно перед тегом </html>.
Все содержимое вашей веб-страницы помещается между этими тегами. Это так просто, как кажется:
<body>
Everything you want displayed on your page.
</body>7. <h1>
Тег <h1> определяет заголовок первого уровня на вашей странице. Обычно это будет заголовок, и в идеале он должен быть только по одному на каждой странице.
<h2> определяет заголовки второго уровня, такие как заголовки разделов, <h3> подзаголовки третьего уровня и т. д., вплоть до <h6>. Например, названия тегов в этой статье являются заголовками второго уровня.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>Результат:
Как видите, на каждом уровне они становятся меньше.
8. <p>
Тег абзаца начинает новый абзац. Обычно при этом вставляются два разрыва строки.
Посмотрите, например, на разрыв между предыдущей и этой строкой. Вот что будет делать тег <p>.
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>Результат:
Ваш первый абзац.
Ваш второй абзац.
Вы также можете использовать стили CSS в своих тегах абзацев, например, тот, который изменяет размер текста:
<p style="font-size: 150%;">This is 50% larger text.</p>Результат:
9. <br>
Тег разрыва строки вставляет одинарный разрыв строки:
<p>The first line.<br>
The second line (close to the first one).</p>Результат:
Аналогичным образом работает и тег <hr>. Таким образом на вашей странице будет нарисована горизонтальная линия, что удобно для разделения частей текста.
10. <strong>
Этот тег определяет важный текст. В общем, значит, будет жирным. Однако можно использовать CSS для другого отображения <strong> текста.
Однако вы можете смело использовать <strong> для выделения текста жирным шрифтом.
<strong>Very important things you want to say.</strong>Результат:
Вы хотите сказать очень важные вещи.
Если вы знакомы с тегом <b> для выделения текста жирным шрифтом, вы все равно можете его использовать. Нет никакой гарантии, что он продолжит работать в будущих версиях HTML, но пока он работает.
11. <em>
Подобно <b> и <strong>, <em> и <i> связаны. Тег <em> определяет выделенный текст, что обычно означает, что он будет выделен курсивом. Опять же, существует вероятность того, что CSS будет по-другому отображать выделенный текст.
<em>An emphasized line.</em>Результат:
Выделенная линия.
Тег <i> по-прежнему работает, но, опять же, возможно, что он будет устаревшим в будущих версиях HTML.
12. <a>
Тег <a>, или якорь, позволяет создавать ссылки. Простая ссылка выглядит так:
<a href="https://www.muo.com/>Go to MUO</a>Результат:
Атрибут «href» определяет место назначения ссылки. Во многих случаях это будет другой веб-сайт. Это также может быть файл, например изображение или PDF-файл.
Другие полезные атрибуты включают «цель» и «заголовок». Атрибут target почти всегда используется для открытия ссылки в новой вкладке или окне, например:
<a href="https://www.muo.com/" target="_blank">Go to MUO in a new tab</a>Результат:
Атрибут «title» создает всплывающую подсказку. Наведите указатель мыши на ссылку ниже, чтобы увидеть, как это работает:
<a href="https://www.muo.com/" title="This is a tool tip">Hover over this to see the tool tip</a>Результат:
Наведите указатель мыши на это, чтобы увидеть всплывающую подсказку
13. <img>
Если вы хотите встроить изображение на свою страницу, вам нужно будет использовать тег изображения. Обычно вы используете его вместе с атрибутом «src». Это указывает источник изображения, например:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">Результат:
Доступны и другие атрибуты, такие как «высота», «ширина» и «альт». Вот как это может выглядеть:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">Как и следовало ожидать, атрибуты «высота» и «ширина» устанавливают высоту и ширину изображения. В общем, рекомендуется установить только один из них, чтобы изображение масштабировалось правильно. Если вы используете оба, вы можете получить растянутое или сжатое изображение.
Тег «alt» сообщает браузеру, какой текст отображать, если изображение не может быть отображено, и его рекомендуется включать в любое изображение. Если у кого-то особенно медленное соединение или старый браузер, они все равно могут понять, что должно быть на вашей странице.
14. <ol>
Тег упорядоченного списка позволяет создать упорядоченный список. В общем, это означает, что вы получите нумерованный список. Каждому элементу в списке нужен тег элемента списка (<li>), поэтому ваш список будет выглядеть так:
<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol>Результат:
- Первым делом
- Вторая вещь
- Третье
В HTML5 вы можете использовать <ol reversed> для изменения порядка чисел. И вы можете установить начальное значение с помощью атрибута start.
Атрибут «type» позволяет указать браузеру, какой тип символа использовать для элементов списка. Его можно установить на «1», «A», «a», «I» или «i», установив отображение списка с указанным символом следующим образом:
<ol type="A">15. <ul>
Неупорядоченный список намного проще, чем его упорядоченный аналог. Это просто маркированный список.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>Результат:
- Первый пункт
- Второй предмет
- Третий пункт
Неупорядоченные списки также имеют атрибуты «тип», и вы можете установить его как «диск», «круг» или «квадрат».
16. <таблица>
Хотя использование таблиц для форматирования не одобряется, во многих случаях вы захотите использовать строки и столбцы для сегментации информации на своей странице. Чтобы таблица заработала, необходимо несколько тегов. Вот пример HTML-кода:
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table>Теги <table> и </table> определяют начало и конец таблицы. Тег <tbody> содержит все содержимое таблицы.
Каждая строка таблицы заключена в тег <tr>. Каждая ячейка в каждой строке заключена в теги <th> для заголовков столбцов или теги <td> для данных столбца. Вам понадобится один из них для каждого столбца в каждой строке.
Результат:
| 1-й столбец | 2-й столбец |
|---|---|
| Ряд 1, столбец 1 | Ряд 1, столбец 2 |
| Ряд 2, столбец 1 | Ряд 2, столбец 2 |
17. <цитата>
Когда вы цитируете другой веб-сайт или человека и хотите выделить цитату отдельно от остальной части документа, используйте тег blockquote. Все, что вам нужно сделать, это заключить цитату в открывающие и закрывающие теги цитат:
<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>Результат:
Интернет, каким я его представлял, мы еще не видели. Будущее по-прежнему намного больше, чем прошлое.
Точное используемое форматирование может зависеть от используемого вами браузера или CSS вашего сайта. Но тег остался прежним.
Примеры HTML-кода
С помощью этих 17 примеров HTML вы сможете создать простой веб-сайт. Вы можете протестировать их все прямо сейчас в онлайн-текстовом редакторе, чтобы понять, как они работают.
Чтобы получить больше уроков по HTML, попробуйте несколько приложений для микрообучения по программированию. Они помогут вам в кратчайшие сроки разобраться.