Основы HTML. Часть 1. Введение

Основы HTML #1 HTML
Язык состоит из тегов — это своеобразные команды, которые преобразовываются в визуальные объекты в браузере пользователя.

HTML (от английского HyperText Markup Language) — это язык гипертекстовой разметки страницы. Он используется для того, чтобы дать браузеру понять, как нужно отображать загруженный сайт.

Возможности HTML

Язык состоит из тегов — это своеобразные команды, которые преобразовываются в визуальные объекты в браузере пользователя. Например, тег <img> используется для размещения изображений на странице. У него есть обязательный атрибут src, в котором указывается ссылка на файл.

Более подробная информация про HTML язык есть в нашей предыдущей статье.

Пример HTML кода:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8>
        <title>Привет мир!</title>
    </head>
    <body>
        <h1>Привет мир!</h1>
        <p>Как дела?</p>
    </body>
</html>

На первой строке кода объявляется тип документа как HTML. Далее идёт основной открывающий тег <html>, в котором будет располагаться основной код сайта.

В итоге получится вот такая HTML страница:

Пример HTML страницы
Пример HTML страницы

Тег <html>

Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идет в документе вторым, после определения типа документа, устанавливаемого через элемент <!DOCTYPE>. Закрывающий тег <html> должен всегда стоять в документе последним.

Теги <head> и <body>

Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.

Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.

Тег <meta>

<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.

Тег <title>

Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера или на вкладке. Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.

Тег <h1>

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,…,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

Тег <p>

Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

В HTML огромное количество тегов для самых разных ситуаций, возникающих при написании сайта. Но, хоть и можно написать сайт на чистом HTML, всё же без CSS никуда. Что такое CSS можно прочитать в этой статье.

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

Пожалуйста, оцените насколько полезной была для вас эта статья и делитесь этим в комментариях.

Оцените статью
( 2 оценки, среднее 4.5 из 5 )
Hack Life - веб для всех
Добавить комментарий