IT-школа "Понятно"
Обучение IT для начинающих c 8 лет и до ∞


Знакомимся с программой Visual Studio Code.

В данном уроке мы познакомимся и настроим программу для верстки сайтов Visual Studio Code. Скачать ее можно по ссылке https://code.visualstudio.com. Рассмотрим, как в этой программе правильно создать свой проект и выведем на своем сайте фразу: "Привет мир!"

Скачать код из урока. Скачиваемый файл находится в архиве. Для использования - распакуйте его с помощью любой программы архиватора. Скачать программу Visual Studio Code с официального сайта.

Краткий конспект урока:

HTML (от англ. Hyper Text Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере.

Гиперте́кст (англ. hypertext) — термин, обозначающий систему из текстовых страниц, имеющих перекрёстные ссылки. Примерами гипертекста являются энциклопедии, компьютерные сети, веб-сайты, в которых можно переходить с одной страницы на другую и выполнять поиск по ключевым словам.

Элементы HTML являются строительными блоками HTML страниц. С помощью HTML разные конструкции, изображения и другие объекты, могут быть встроены в отображаемую страницу. HTML предоставляет средства для создания заголовков, абзацев, списков, ссылок, цитат и других элементов. Элементы HTML выделяются тегами, записанными с использованием угловых скобок. Браузеры не отображают HTML-теги, но используют их для интерпретации содержимого страницы.

Тег, те́ги (более правильное название — дескриптор) — элемент языка разметки гипертекста.

Теги бывают парные, например: <i></i> - где <i> - открывающий тег, а </i> - закрывающий тег и бывают одиночными, например <br>.

Текст, содержащийся между начальным и конечным тегом, отображается и размещается в соответствии со свойствами, указанными в начальном теге. Например, текст заключённый между начальным тегом <small> и конечным тегом </small> (от англ. small — маленький), отображается с меньшим размером, чем основной текст, а текст между тегами <big> и </big> отображается с большим размером.

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

В данный момент для свежих версий HTML5 + актуальна запись: <!DOCTYPE html>

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

<html>

                   Все содержимое веб-страницы

</html>

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

<meta charset="utf-8"> - указывает кодировку документа. UTF-8 (от англ. Unicode Transformation Format, 8-bit — «формат преобразования Юникода, 8-бит») — распространённый стандарт кодирования символов, позволяющий более компактно хранить и передавать символы Юникода используя переменное количество байт (от 1 до 4), и обеспечивающий полную обратную совместимость с 7-битной кодировкой ASCII. Кодировка UTF-8 сейчас является доминирующей в веб-пространстве.

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

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