Найти тему

VisualStudioCode. HTML. Урок 1

Хочу познакомить (раз уж сам познакомился) с замечательным и замечательно навороченным текстовым редактором VisualStudioCode и теми возможностями, которые он предоставляет начинающим, законченным и заканчивающим(ся)(имея в виду себя в основном) программистам по изучению азов и основ (а может, и продвинутых разделов) различных языков программирования. При этом он бесплатный и активно поддерживается, обновляется, имеет множество плагинов и прочая, и прочая.

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

Лиха беда начало. Давайте создадим первую программу, да еще сразу на таком "страшном" с виду "языке программирования" - "html". Вообще, если по-честному, это никакой не язык программирования, а "язык разметки" - способ расстановки так называемых "тегов" в обычном текстовом файле (с расширением htm или html), с тем, чтобы этот файл, при открытии его в любом браузере (chrome, edge, firefox etc.)

Создайте папку, в которой вы будете работать. Я, например, создал папку с именем "дзен".

Вот я открыл этот редактор. В вашем случае (если вы открываете его в первый раз) вкладки "Последние" (в первой колонке) не будет. Нам она и не нужна. Нажимайте кнопку "Открыть папку", выберите созданную вами перед этим папку и в открывшей вкладке "Проводник" наведите мышку на строку с именем папки (в моем случае - папки "дзен").

-2

Правее имени папки появились четыре кнопки. Нажимаем первую "Создать файл". В появившемся окошке печатаем имя файла. Я выбрал имя "hello, world.html". Создался в текущей папке и открылся новый файл. Курсор стоит на первой (пустой) строке.

-3

Теперь самый ответственный момент. Давайте создадим самую свою первую программу на html (возьмите из головы, вспомнив молодость, или используйте справочник или самоучитель - подобных очень много)

<html>

<title>Itś my very first, initial, experiment in HTML</title>

<center><h2>Привет, ребята!</h2></center>

</html>

Для простоты вы можете просто скопировать эти четыре строки в первую строку только что открытого файла (как сделал и я).

Ну те-с, глянем те-с, что же у нас вышло?

-4

Пока ничего особо страшного, как ни странно. На подзатыльник мы никак еще не заработали, слава богу.

Обратите внимание на круглую черную точку справа от имени файла в верхней вкладке открытых файлов (их сейчас два - начальный "Приветствие" - открытый автоматически и второй - "hello, world.html" открытый нами). Она черная от того, что мы содержимое файла уже изменили (добавил четыре строки), но еще не записали.

Записываем (т.е. сохраняем) файл горячей клавишей Ctrl+S.

Теперь исключительно важный, можно без преувеличения сказать, критический момент. Попытаемся "выполнить" программу, в данном случае (для файлов с расширением html или htm - т.е. для программ на "языке" html) это означает - открыть файл в браузере.

Для этого нажимаем в верхней вкладке кнопку "Выполнить". В появившемся меню выбираем пункт "Запустить отладку" (справа показана горячая клавиша для этого действия - кнопка F5).

-5

Поскольку мы пытаемся выполнить программу в первый раз, редактор просит нас выбрать среду выполнения (выбрать браузер). В моем случае предлагаются на выбор два браузера - Chrome и Edge.

-6

Я выбрал chrome, чего и вам рекомендую.

Такой выбор делается в этой папке только один раз, и выбор запоминается (в следующий раз среда исполнения спрашиваться не будет) .

После выбора среды исполнения открывает новый экземпляр браузера и в нем - ву-а-ля - появляется волшебная фраза "Привет, ребята!" - что и является признаком того, что вы идете правильным путем, ребята!

-7

Ну, а дальше - дело техники. Берите в зубы самоучители html, проштудируйте их и выполняйте примеры из них. Причем можно каждый пример из них скопировать в ваш файл - например, в "hello, world.html" и просто нажать кнопку "Выполнить/Запустить отладку" или даже проще - нажать F5.

Напоследок и я свои пять копеек (это fifty cents по-забугорному - кстати неплохой курс обмена "гамбургеров" вырисовывается 5- центов за пять копеек) добавлю.

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

Ниже представлен (с помощью ссылки на https://gist.github.com/) код программы, в которой, правда, кроме HTML еще вклиниваются CSS и Javascript (в минимальной дозе). Но о них как-нибудь в следующий раз, однако.

А вот и результат - наша долгожданная таблица умножения:

-8

Тут и сказке конец. А кто слушал - МОЛОДЕЦ!

Подписаться на канал Математика и программирование
Вокруг ЕГЭ: разложить x^5+1 на множители с вещественными коэффициентами
Web Scraping: преобразовать иерархическую структуру в табличную
Web Scraping: преобразовать табличную структуру в иерархическую
Web Scraping: всероссийская перепись 1917
Как я поженил Лагранжа и сигмоиду
Интерполяция функций и правило Лопиталя

Подписаться на канал Новости из царской России
VisualStudioCode. html. Урок 1
Вокруг ЕГЭ: разложить x^5+1 на множители с вещественными коэффициентами
Web Scraping: преобразовать иерархическую структуру в табличную
Web Scraping: преобразовать табличную структуру в иерархическую
Web Scraping: всероссийская перепись 1917
Как я поженил Лагранжа и сигмоиду

Оглавление статей канала "Новости из царской России"

YouTube "Новости из царской России"

Обсудить в групповом чате

News from ancient Russia

Персональная история русскоязычного мира