В этой главе будет показано несколько основных примеров кода HTML страниц. Не переживайте, если здесь используются теги, о которых вы еще не знаете.
Все HTML-документы должны начинаться с объявления типа документа: <!DOCTYPE html>.
Сам HTML-документ начинается с <html>
и заканчивается на </html>
.
Видимая часть документа HTML находится между <body>
и </body>
.
Объявление <!DOCTYPE>
представляет тип документа и помогает браузерам правильно отображать веб-страницы.
Это объявление следует размещать только один раз вверху страницы (перед любыми HTML-тегами).
Объявление <!DOCTYPE>
не чувствительно к регистру.
Объявление <!DOCTYPE>
для HTML5:
<!DOCTYPE html>
Заголовки HTML определяются тегами от <h1>
до <h6>
.
<h1>
определяет самый важный заголовок. <h6>
определяет наименее важный заголовок:
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
<h4>Это заголовок 4</h4>
<h5>Это заголовок 5</h5>
<h6>Это заголовок 6</h6>
Обозначение параграфа HTML определяется с помощью тега <p>
:
<p>Это параграф.</p>
<p>Это другой параграф.</p>
Ссылки HTML определяются с помощью тега <a>
:
<a href="https://www.appnet.club">Это ссылка</a>
HTML-изображения определяются с помощью тега <img>
.
Исходный файл (src
), альтернативный текст (alt
), width
и height
предоставляются в качестве атрибутов:
<img src="appnet_logo.png" alt="appnet.club" width="483" height="483">
Вы когда-нибудь видели веб-страницу и задавались вопросом: "Эй! Как они это сделали?"
Щелкните правой кнопкой мыши HTML-страницу и выберите "Просмотреть исходный код страницы" (в Chrome или Яндекс браузере) или аналогичный вариант в других браузерах. Откроется окно, содержащее исходный HTML-код страницы.
Щелкните правой кнопкой мыши элемент (или пустую область) и выберите "Проверить" или "Проверить элемент", для того чтобы увидеть, из чего состоят элементы (вы увидите как HTML, так и CSS). Вы также можете редактировать HTML или CSS "на лету" на открывшейся панели "Элементы" или "Стили" в режиме просмотра страницы.
Все документы HTML начинаются с объявления !DOCTYPE html.
Проверьте себя, насколько хорошо вы запомнили материал.