В этой главе мы рассмотрим некоторые примеры в html. Мы пройдемся по всем тегам, которые будут использоваться один за другим, чтобы вы могли присоединиться.

БАЗОВЫЙ ПРИМЕР HTML HTML ДОКУМЕНТ

Все HTML-документы всегда должны начинаться с объявления типа документа <!DOCTYPE html>. Сам HTML-документ должен начинаться с <html> и заканчиваться закрывающими тегами </html>. Это означает, что это HTML-документ. Видимая часть документа HTML находится между <body> и </body>.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

<!DOCTYPE> Декларация

Объявление <!DOCTYPE> обозначает тип документа и помогает браузерам правильно отображать веб-страницы. Его особенности включают в себя то, что он всегда должен появляться один раз в верхней части страницы (перед HTML-тегами ant). Он не чувствителен к регистру и записывается как <!DOCTYPE html> в HTML5.

Заголовки HTML

Заголовок HTML определяется от <h1> до <h6>. <h1> обычно самый большой и самый важный заголовок. <h6> обычно является самым маленьким и наименее важным заголовком.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

Абзацы HTML

Абзацы HTML определяются с помощью тега <p>

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Вот как это выглядит:

HTML-ССЫЛКА

HTML-ссылка обычно определяется тегом <a>:

<a href="https://www.google.com">
This is a link
</a>

Вот как это выглядит:

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

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

HTML-изображения определяются с помощью тега <img>. Атрибут имеет исходный файл (src), альтернативный текст (alt), ширину и высоту.

<img src=”” alt=”” width=”164" height=”144" />

Как просмотреть исходный код HTML?

Если у вас есть веб-страница. Вы, вероятно, удивитесь, как они это делают. На веб-странице щелкните правой кнопкой мыши и выберите «Просмотреть исходный код страницы» (в Chrome).

Откроется окно, содержащее исходный HTML-код страницы. Проверка HTML-элемента Щелкните правой кнопкой мыши элемент (или пустую область) и выберите «проверить» или «проверить элемент», чтобы увидеть, из каких элементов состоят (вы увидите как HTML, так и CSS), не беспокойтесь, мы собираемся изучить CSS на другом уроке. Вы сможете редактировать коды (HTML и CSS).

HTML-таблицы

Тег <table> определяет таблицу HTML. Каждая строка таблицы определяется тегом<tr>. Каждый заголовок таблицы определяется тегом <th>. Каждые данные/ячейка таблицы определяются тегом <td>. Эти теги имеют значение по умолчанию, которое включает текст в элементе <th>, выделенный полужирным шрифтом и центрированный. Точно так же текст в элементе <td> является обычным и выровнен по левому краю.

<table style="width:100%">
<tr>
<th>firstName</th>
<th>LastName</th>
<th>age</th>
</tr>
<tr>
<td>tommay</td>
<td>Okon</td>
<td>24</td>
</tr>
<tr>
<td>Jenny</td>
<td>kwon</td>
<td>22</td>
</tr>
</table>

HTML-список

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

<ul>
<li>mango</li>
<li>orange</li>
<li>apple</li>
</ul>

HTML-кнопка

кнопка html определяется тегом <button>

<button>Click me</button>

Ресурсы

Вам могут пригодиться следующие ресурсы:

Первоначально опубликовано на https://www.devwares.com.