HTML Основные примеры

❮ Prev Next ❯

В этой теме: ↓

HTML документы. Объявление <!DOCTYPE html>, теги <html>, <body>
HTML заголовки. Теги <h1> - <h6>
HTML параграфы. Тег <p>
HTML ссылки. Тег <a>
HTML изображения. Тег <img>
HTML кнопки. Тег <button>
HTML списки. Теги <ul>, <ol>, <li>

Не беспокойтесь, если в этих примерах используются теги, которые вы ещё не изучили.

О них вы узнаете в следующих главах.

HTML Документы

Все веб-страницы являются HTML-документами.

Все HTML документы согласно спецификации HTML5 должны начинаться с объявления типа документа: <!DOCTYPE html>.

Сам HTML документ начинается тегом <html> и заканчивается тегом </html>.

Видимая часть HTML документа находится между <body> и </body>.

Body от анг. - тело веб-страницы.

Пример

<!DOCTYPE html>
<html>
<body>

<h1>Мой первый заголовок</h1>
<p>Мой первый параграф.</p>

</body>
</html>

Попробуйте сами »

HTML Заголовки

HTML заголовки (от анг. header) определяются с помощью тегов от <h1> до <h6>.

Тегом <h1> определяются наиболее важные заголовки. Тегом <h6> определяются наименее важные заголовки.

Визуально - заголовки h1 являются самыми большими, а заголовки h6 - самыми маленькими.

Пример

<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>

Попробуйте сами »

HTML Параграфы (абзацы)

HTML параграфы определяются с помощью тега <p>:

Пример

<p>Это параграф.</p>
<p>Это другой параграф.</p>

Попробуйте сами »

Примечание. В русском языке слово paragraph обычно переводится как абзац. Но для удобства в среде разработчиков принято использовать слово параграф, чтобы не было путаницы.

HTML Ссылки

HTML ссылки определяются с помощью тега <a> (от анг. anchor - якорь):

Пример

<a href="https://www.w3schools.com">Это ссылка</a>

Попробуйте сами »

Назначение ссылки указывается в атрибуте href (от анг. hyper refferal - гипернаправление).

Атрибуты используются для предоставления дополнительной информации об элементах HTML. Атрибут href для тега <a> является обязательным.

Подробнее об атрибутах вы узнаете в следующем уроке.

HTML Изображения

HTML изображения определяются с помощью тега <img> (от анг. image - изображение).

Исходный файл src, альтернативный текст alt, ширина width и высота height предоставляются в качестве атрибутов:

Пример

Попробуйте сами »

Атрибуты src (от анг. source - ресурс) и alt (от анг. alternative - альтернативный) являются обязательными для тега <img>. Атрибуты размеров картинки (width и height) являются не обязательными.

HTML Кнопки

HTML кнопки определяются с помощью тега <button> (от анг. button - кнопка):

Пример

<button>Нажмите меня</button>

Попробуйте сами »

HTML Списки

HTML списки определяются с помощью тегов <ul> (от анг. unordered list - неупорядоченный/маркированный список) или <ol> (от анг. ordered list - упорядоченный/нумерованный список), с последующими тегами <li> (list items - пункты списка):

Пример

<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>

<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>

Попробуйте сами »

Подробнее об этих и других HTML-элементах вы узнаете в следующих главах данного учебника.