ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

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


Первый шаг к созданию веб-сайта - это научиться видеть мир
глазами того, кто пользуется Интернетом.



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

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


HTML Документы

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

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

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

Пример

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Попробуйте сами »

HTML Заголовки

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

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

Пример

<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
Попробуйте сами »

HTML Параграфы

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

Пример

<p>Это параграф.</p>
<p>Это другой параграф.</p>
Попробуйте сами »

HTML ссылки

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

Пример

<a href="https://w3schoolsua.github.io/">Это ссылка</a>
Попробуйте сами »

Назначение ссылки указывается в атрибуте href.

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

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


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

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

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

Пример

<img src="../images/w3schools.jpg" alt="W3Schools" width="104" height="142">
Попробуйте сами »

HTML Кнопки

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

Пример

<button>Натисніть мене</button>
Попробуйте сами »

HTML Списки

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

Пример

<h2>Неупорядоченный список HTML</h2>
<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

<h2>Упорядоченный список HTML</h2>
<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>
Попробуйте сами »

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


HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Элементы HTML окружены определённым типом скобок. Каким?

p This is a paragraph./p


Вопросы для самоконтроля

  • Что такое HTML-документы?
  • Что такое HTML-элементы?
  • Что записывают в угловых скобках в html-коде веб-страницы?
  • В каком теге содержится весь контент, который отображается на веб-странице?
  • Какие из тегов предназначены для формирования общей структуры html-документа?
  • Что такое тип документа?
  • Что такое HTML-заголовки?
  • Что такое HTML-параграфы (абзацы)?
  • Что такое HTML-ссылка?
  • Что такое HTML-изображение?
  • Что такое HTML-кнопки?
  • Что такое HTML-списки?