Основы HTML

28 June 2019

Если вы обзавелись собственным сайтом, то рано или поздно, вам придётся познакомиться с языком гипертекстовой разметки - HTML.

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

Как именно на этой странице будут располагаться текст, картинки, кнопки и другие элементы - задаёт верстальщик с помощью HTML.

HyperText Markup Language известен миру с 1993 года. Сейчас самая новая версия - HTML5.0

Откройте любую страницу сайта в браузере и рассмотрите её в режиме HTML

Вы увидите такую структуру:

<html><head></head><body></body></html>

Это HTML документ в самом простом виде. То что найдёте вы, наверняка будет сложнее, но структура останется прежней.

Обратите внимание, все приведенные теги (части) структуры документа - парные. Сначала следует открывающий тег - команда в треугольных скобках. Закрывающий похож на открывающий тег, но перед командой стоит слэш "/".

<head></head> - Внутри этого тега располагается невидимая часть страницы, содержащую информацию для браузера

<body></body> - Это "тело" документа. Его содержимое видит пользователь

<html></html> - Это теги HTML-документа. Внутри них находитя всё содержимое страницы

Внутри "головы" содержится служебная информация. Например:

<meta http-equiv='content-type' content='text/html; charset=utf-8' /><title>Название страницы</title>

Откройте программу "Блокнот" или подобную ей. Нам нужен самый простой текстовый редактор. Никакого офисного пакета. Только хардкор.

Скопируйте и вставьте в блокнот структуру, которую мы только что рассмотрели. Сохраните файл с именем и расширением index.html

Такое расширение говорит операционной системе о том, что этот файл содержит гипертекст и его нужно открыть браузером. Откройте этот файл в браузере и убедитесь, что перед вами пустая белая страница.

Любой текст, набранный в блокноте можно открыть в браузере, но если в документе нет гипертекста, то магии HTML вы не увидите.
То же самое относится к тексту не обрамлённому тегами. Вы можете писать любой текст в HTML-документе, но магия HTML возникает, если текст и картинки заключены в теги.

Памятник «Булыжник - оружие пролетариата».
Памятник «Булыжник - оружие пролетариата».
Памятник «Булыжник - оружие пролетариата».

Самый главный тег - <p></p>

Это оружие пролетариата. Напоминает камень, завернутый в газету. Запомните его и используйте везде.

Любой текст разбивается на главы, разделы, рубрики, подразделы и т.д. Минимальная единица хранения текста - абзац. Абзац заключается в тег <p>

Заголовки

<h1></h1> - Заголовок первого уровня. В перечисленной иерархии это глава

<h2></h2> - Заголовок второго уровня. В перечисленной иерархии это раздел

<h3></h3> - Заголовок третьего уровня. В перечисленной иерархии это рубрика

<h4></h4> - Заголовок четвертого уровня. В перечисленной иерархии это подраздел

Таких заголовков предусмотрено 6. Попробуйте использовать в вашем документе все эти заголовки и абзац.

Слова

Каждое слово или несколько слов идущих подряд, можно выделить - сделать их чуть толще, наклонными или подчеркнутыми. По-английски - bold. italic, underline.

Для того, чтобы выделить слова используются такие теги:

<p>жирный<b> текст</b></p>

<p><i>Курсивный</i> текст</p>

<p><u>подчёркнутый</u> текст</p>

На самом деле таких тегов гораздо больше, но пока запомните эти три. Попытайтесь использовать их в вашем HTML-документе.

Картинка

Давайте вставим в наш документ изображение. Для этого используйте тег <img>. Обратите внимание, он не парный. Закрывающего тега к img не существует.

Внутри тега <img> указывают ссылку на изображение. Ссылка может быть абсолютная, как в данном примере. Тогда она указывает на каринку на другом сайте или относительная, тогда она указывает на изображение, хранящееся на вашем компьютере.

<img src='https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg'>

Ссылка

Для ссылки используется тег <a></a>. Всё, что находится внутри этого тега будет являться ссылкой. То есть той частью документа, к которому надо подвести мышку и кликнуть.

Внутри тега <a> указывают страницу, на которую должен попасть пользователь после того, как кликнет по ссылке.

<a href='http://htmlbook.ru/samhtml'>Учебник по HTML</a>

Вы можете скачать получившийся документ и ознакомиться с его содержимым