HTML Основы
В этой главе мы покажем несколько базовых примеров HTML.
Не беспокойтесь, если мы используем теги, о которых вы еще не узнали.
Документы HTML
Все документы HTML должны начинаться с объявления типа документа: <!DOCTYPE html>.
Сам документ HTML начинается с тега <html> и заканчивается тегом </html>.
Видимая часть HTML-документа находится между тегами <body> и </body>.
Пример:
<!DOCTYPE html>
<html>
<body>
<h1>Мой первый заголовок</h1>
<p>Мой первый абзац.</p>
</body>
</html>Объявление <!DOCTYPE>
Объявление <!DOCTYPE> представляет тип документа и помогает браузерам правильно отображать веб-страницы.
Оно должно появляться только один раз, в верхней части страницы (перед любыми HTML-тегами).
Объявление <!DOCTYPE> не чувствительно к регистру.
Объявление <!DOCTYPE> для HTML5 выглядит так:
<!DOCTYPE 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://htmlclub.ru">Это ссылка</a>Адрес ссылки указывается в атрибуте href.
Атрибуты используются для предоставления дополнительной информации об HTML-элементах.
Вы узнаете больше об атрибутах в одной из следующих глав.
HTML-изображения
HTML-изображения определяются с помощью тега <img>.
Источник файла (src), альтернативный текст (alt), ширина (width) и высота (height) указываются в виде атрибутов:
Пример:
<img src="htmlclub.jpg" alt="HTML Club" width="104" height="142">Как просмотреть исходный HTML-код
Вы когда-нибудь видели веб-страницу и думали: «Эй! Как они это сделали?»
Просмотр HTML-кода:
Нажмите CTRL + U на HTML-странице или щелкните правой кнопкой мыши на странице и выберите «Просмотреть код страницы». Это откроет новую вкладку, содержащую HTML-код страницы.
Инспекция HTML-элемента:
Щелкните правой кнопкой мыши на элементе (или на пустом месте) и выберите в зависимости от браузера «Просмотреть код» или «Исследовать элемент», чтобы увидеть, из каких элементов он состоит (вы увидите как HTML, так и CSS). Вы также можете редактировать HTML или CSS на лету в панели «Элементы» или «Стили», которая откроется.