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

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

Основные примеры написания HTML-кода объектов веб-страницы

В этой теме приводятся примеры только некоторых основных элементов на веб-странице: заголовки, параграфы, ссылки, изображения, кнопки, списки. Они лишь дают общее представление того, как создаются различные объекты на веб-страницах.

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

HTML документы

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

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

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

Пример:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

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

Заголовки в HTML

Заголовки (heading - заголовок) в HTML определяются тегами от <h1> до <h6>.

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

Пример:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Попробуйте сами »

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

Параграфы (paragraph - абзац, параграф) в HTML определяются тегом <p>.

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

Пример:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Попробуйте сами »

Ссылки в HTML

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

Пример:

<a href="https://www.w3schools.com">This is a link</a>
Попробуйте сами »

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

Вы узнаете больше об атрибутах в следующей главе учебника.

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

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

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

Пример:

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

Кнопки в HTML

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

Пример:

<button>Click me</button>
Попробуйте сами »

Списки в HTML

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

Пример:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Попробуйте сами »

Более подробно об этих и других примерах вы узнаете в следующих разделах сайта.