Допиши расширение созданного ваней файла helloword
Итак, после установки VS открываем ее, входим (или нет) в учетную запись Microsoft, выбираем оформление, затем можем продолжить без кода, а можно сразу создать проект. После всего проделанного должно появиться вот такое окно:
Нас пока интересует только окно, где мы будем писать код. Все "действия" пишутся внутри класса Program метода Main, а объекты мы можем создавать вне этого метода и класса. Подробнее об этом поговорим позже. Пока весь код мы будем писать внутри метода Main (это значит, что мы будем писать код между открывающей и закрывающей фигурными скобками, идущими после строки "static void Main(string[] args)")
Так уж сложилось, что во всех обучалках на любом языке первой программой является программа, выдающая фразу "Hello World!". А в Visual Studio 2019 ( по крайней мере у меня) при создании консольного приложения автоматически создается код, выводящий фразу "Hello World!". Если Вы используете раннюю версию, или же что-то пошло не так, все, что нужно сделать - это дописать строку: Console.WriteLine("Hello World!");
Что же содержится в этой строке? Сама строка является инструкцией , то есть командой, выполнение которой предполагает какое-либо действие, например, арифметическую операцию или объявление переменной. Каждая инструкция завершается точкой с запятой (;). Мы можем писать инструкции одну за другой в одну строку, однако принято писать одну инструкцию в одну строку. Далее разберем эту инструкцию на составляющие: Console - это класс, который используется для работы с консолью. Класс содержит в себе кучу разных методов, каждый из которых выполняет свою задачу по работе с консолью. В данном случае мы используем метод WriteLine(), который выводит информацию, введенную внутри скобок, на консоль. Таким образом, при написании строки Console.WriteLine("Hello World!"); мы обращаемся к методу WriteLine (но сначала мы обращаемся к классу Console, в котором содержится данный метод) и просим его вывести на консоль фразу "Hello World!". Таким образом, если бы мы захотели вывести фразу "I'll be back", то мы должны были бы написать следующую инструкцию: Console.WriteLine("I'll be back");
Теперь мы можем запустить нашу первую программу, нажав кнопку f5 или на зеленую стрелочку с названием программы над окном с кодом. После выполнения программы получаем консоль с выведенной на ней фразой "Hello World!". Программа автоматически завершает свою работу после выполнения всех инструкций, а чтобы закрыть консоль, необходимо нажать любую клавишу.
Если у Вас ранняя версия Visual Studio (или, может быть, другая причина данного явления), то консоль закроется вместе с завершением программы, то есть она выведет фразу "Hello World!" и тут же закроется. Чтобы избежать этого, необходимо после первой инструкции добавить следующую инструкцию: Console.ReadKey();
Эта инструкция говорит консоли считать введенную клавишу, таким образом, консоль будет ждать, пока мы введем какую-то информацию, после того как мы нажмем любую клавишу, программа завершит свою работу, и консоль закроется.
Теперь мы попробуем приветствовать мир.
Прежде чем мы действительно начнём изучение следующей главы нам надо решить один вопрос. Терминология:
Это всё возможные синонимы, которые можно употребить к тому или иному веб-проекту.
К множеству подстраниц на одном ресурсе я буду стараться применять сайт, ресурс. К одной единственной странице на сайте я буду обращаться как страница, документ или страница сайта.
- Создаём рабочую папку
- В папке создаём файл “first-page.html”
- Если у вас проблемы с созданием файла с расширением html, то попробуйте создать этот файл с помощью запроса в google “как создать html файл”.
- Рекомендую параллельно к этому пособию вообще нагугливать термины и объяснения из альтернативных источников. А вдруг я не прав, а вдруг всё уже поменялось?
- Открываем в редакторе вашего выбора наш файл.
- И пишем в нём ручками код.
helloworld
Сохраняем наш файл и открываем с помощью браузера. Если всё пошло так, то мы в Chromo-подобном браузере мы увидим:
helloworld в хромиуме
А в интернет эксплорере скорее всего:
helloworld в IE
И мы сразу же можем начинать ругать IE потому что он неправильно отображает страницы. Ну или дядю Андрея, потому что он специально не дал ещё одну строчку.
Мы добавляем её так, что бы она оказалась седьмой. Вот так:
helloworld с UTF
Сохраняемся и проверяем в Интернет Эксплорере наш файл заново:
Проверка страницы в IE
Давайте начнём с конца. это то, что должно стоять в вашем HTML коде всегда. Это указание браузеру, что на странице используется не только английская кодировка. Существует множество разных кодировок кроме utf-8. Пока можете не углублять свои познания и просто пишите это строчку всегда.
То что IE-7 в итоге отобразил нашу страшненькую страницу, не значит, что мы его простили. Я держу его только для того, что бы посмотреть время от времени какой oн ужасный. Раз мы уже коснулись браузеров - вам придётся поставить маленький зоопарк: Chrome, Firefox, Safari, Opera. Хотя с большего и хром, и опера, и фаерфокс это один и тот же браузер. Ну почти. Движок у них общий - chromium. этот зоопарк нужен для проверки работоспособности ваших приложений(web-apps) в различных ситуациях.
- это на самом деле 3 указания. Во-первых, мета обозначает, что сейчас пойдёт указание для браузера, которое не видно пользователю. Чисто техническая информация. Во-вторых, идёт указание о роде технической информации - charset. И, в-третьих, уже значение чарсета utf-8.
Но вернёмся к написанному.
- говорит браузеру, что сейчас начнётся документ написанный в HTML5. Браузер не обладает интеллектом и ему надо говорить, что он должен делать. И именно доктайп говорит, что сейчас надо отображать документ формата HTML, HTML5. Да именно в версии 5. Существуют различные доктайпы. Вот так мог выглядеть доктайп для четвёртого хтмл
- всегда будет для вас (мастеров HTML5) одинаков, неизменяем и всегда пишется в первой строке.
один раз открывает код страницы и один раз закрывает. Между открывающим и закрывающим тегом html мы и пишем весь код нашей страницы.
Сам html разбит на две части head и body - голова и тело.
Мы будем возвращаться к голове и телу ещё не один раз. Ну, во-первых, без них нельзя сделать ни одну страницу. А во-вторых некоторые последующие теги привязаны только к “голове” или только “телу”.
Закрытие и открытие этих тегов проходит, как и у тега html. И мы можем учить новое слово Структурные элементы страницы. Их много больше, одни можно вкладывать в другие, так же как подъезд дома вложен в сам дом, а этаж в подъезд, а квартира вложена в этаж. Комната в квартиру, стол в комнате, а компьютер на столе, при этом стол не может быть в проходе, либо в рабочий кабинет, либо в коридоре, нельзя его оставить в дверях.
Абсолютно точно так же как и эта аллегория работает структура веб страницы эдакая матрёшка. Один элемент вложен в другой.
Должен признать. Я вас обманул. Всё это не так просто. Но вот до этой строчки был порог вхождения. Если вы всё поняли, представили и разобрались до этого момента, то дальше точно будет легко и просто. Обещаю!
Купились? Не будет. Нет ничего лёгкого даже в этом языке разметки. Мир меняется каждый день, все новые приборы, безбарьерный интернет, новые технологии - всё это накладывает отпечаток на наши веб страницы. Этих элементов и правда не много - сотня. Ещё с какое-то количество атрибутов к ним, ну как charset и их значений. Но с каждым из них реально надо разобраться, посмотреть примеры, применить в практике и запомнить. Не слушайте тех, кто скажет, что редакторам или блогерам HTML не нужен - это миф. Это как фехтовальщику не нужна техника владения мечом - просто руби сверху вниз. Каждый кто связан по работе с веб страницами - обязан хотя бы один раз ознакомится с возможностями этого самого HTML.
Но мы отвлеклись - едем дальше!
Голова, то есть head в него мы вложили ещё title. У тайтла тоже есть открывающий и закрывающий тег. И внутри него мы разместили текст.
- Этот текст отображается в самом тайтле браузера или в закладке браузера, где открыта наша страница. Если закладок много, то текста пользователь скорее всего не увидит.
- Но это тот же текст, который по дефoлту(default - стандартно) подставляется при внесении страницы в закладки. Попробуйте.
- Это тот текст, который может быть виден пользователю в результатах поиска в Google.
Отсюда мораль - тайтл должен быть продуманным, если это рецепт борща, то я бы рекомендовал написать там “Рецепт борща - 12 шагов”. Если это первая страничка на уроке HTML - то наверное есть смысл написать там “My first HTML-page - HelloWorld !”. Или то что считаете нужным, например “qwerty” вы же теперь вебмастер знающий основы HTML - вам и решать.
Title размещается только внутри тега head. Title поддерживает “Global Attributes” - глобальные атрибуты (мне надо было похвалиться своим прекрасным знанием английского языка). Ссылку на список этих атрибутов я приведу внизу статьи, но самостоятельно вы его можете нагуглить уже сейчас, например этой магической фразой “global attributes w3c”. W3C - это консорциум всемирной паутины, проще говоря боги этого вашего интернета. Про них можно нагуглить в Википедии. Я вас всё время куда-то посылаю не потому что мне лень об этом написать. Просто если я буду писать про все детали - я никогда не закончу. Моя задача научить вас HTML-грамоте. Дополнительные, интересные и полезные материалы часто будут как ссылка в гугл.
Но давайте сконцентрируемся и перейдём к тому, что мы написали в body, мы открываем и закрываем теги 4 раза: H1, _ article_, p и q.
H1 - это заголовок всей страницы видимой пользователю. Очень часто H1 это название самого сайта или название статьи на нём (рецепта, видео, заметки). Вы заметили, что я написал H1 с большой? Мы ведь договорились писать всё с маленькой. Не забываем быть последовательными. h1 - браузеру всё равно, а вот читающему код человеку не всегда.
article - вся статья помещается внутри этого тега. Если на странице две статьи, то article будет или должен быть использован дважды. Как вы понимаете, желаемое и действительное не всегда одно и то же.
p - отмечает начало и конец абзаца. Зачем? Ну например, что бы текст начинался с красной строки или каждый нечётный абзац помечался бы другим оттенком, или… или… Вариантов использования для чего множество. Например транслировать на сайте в блоке “Интересные мысли” случайные абзацы редакторов сайта.
q - короткая цитата или прямая речь. Очень удобно красиво выделять мысли в тексте. И кстати именно это пример малоизвестного тега, который входит в список “ай зачем их всех учить”. Забегая вперёд скажу, что если есть короткая цитата, то будет и длинная :).
Что мы должны были заметить кроме этого, что вложенный тег должен сначала закрыться сам, прежде чем можно закрывать тег родитель.
Щас скажу прямую речь
Сначала мы должны закончить прямую речь и закрыть тег q и только потом закрыть родительский тег. Смотрим как мы это сделали в примере.
Щас скажу прямую речь
только абзац новый начну
Принципиально, азы HTML мы только что прошли. На самом деле теперь вы можете всем говорить, что вы знаете и понимаете структуру HTML. Вот тот пример мы теперь всё время и будем изменять. Добавлять все новые теги в него и смотреть как он изменяется. Каждый тег мы сейчас будем проходить как маленькую главу и рассматривать примеры применения. Но сначала я вам расскажу про CSS.
Сначала будем делать руками, потом я попробую объяснить, что мы сделали.
Создаём в той же папке, где у нас лежит наш хтмл исходник, новый файл с названием style.css
Редактируем наш html файл и добавляем туда строчку . Строчка должна быть вложена в head страницы, так как это информация не для человека, а для браузера. Этим самым мы говорим, где считывать стили страницы.
В сам css файл вносим:
Сохраняемся и проверяем наш результат в браузере. У нас должно было получится примерно следующее:
опера css
Ещё раз код и текст, который лежит в нашей html странице
Мы указали каждый тег в стилях и сказали как его отображать.
Для всего body в фигурных < >скобках мы указали цвет бэкграунда. Цвет мы указали в общепринятой 16-ричной системе исчисления. Эту систему обозначают буквами HEX - hexadecimal или система исчисления с базисом 16. Если вы не знаете, что это такое, то коротко скажу, что мы используем систему с базисом 10 и считаем до десяти, вебдизайнеры считают до 16. Подробнее про неё можно (но не обязательно) загуглить в Яндексе - “Шестнадцатеричная система счисления”.
Для заголовка(h1) мы указали цвет букв, размер букв и тип и свойства шрифта.
Для абзаца(p) мы провели такую же операцию только с другими значениями, как и для тайтла. И обратите внимание, и там и там мы указали цвет “английскими словами”, а не значениями HEX. Существует табличками с заданными названиями для пары сотен HEX значений. Её точно наизусть учить не надо, но эти значения удобно использовать например в протоколировании страницы.
И наконец для короткой цитаты (q) мы просто поменяли цвет.
Принципиально всё. Вы только что изучили введение в CSS. Дальше мы будем тоже просто изменять и пробовать улучшить наши страницы и изучать, что можно сделать с помощью HTML и CSS, а что нет.
Пока можете стереть некоторые значения или даже добавить свои. Внести article в css со своими значениями и попробовать сделать конфликт, например указав разные цвет, размер для шрифтов артикля и абзаца, и посмотреть кто победит.
Про CSS мы должны знать только, что это стили. Стили пишутся в отдельном файле. Все теги можно описать по отдельности, могут быть не описаны. Для него фронтендера это примерно минимальный базовый уровень.
В этом уроке, Вы по моей инструкции создадите свою первую веб-страницу. Пока что Вам не надо вникать что за непонятные символы придется использовать. В этом уроке мы создаем страницу, а в следующих двух уроках мы полностью разберемся в каждом написанном символе.
Первое что мы делаем, это создаем папку на рабочем столе и даем ей название «Сайт». В этой папке будет проходить все наше дальнейшее творение.
Теперь запускаем блокнот Notepad++ который мы установили. (Если Вы этого еще не сделали, то инструкция по установке здесь). По умолчанию программа должна быть по директории /Program Files/Notepad++/, либо можно запустить через Пуск. Открыли программу и вставляем в нее следующий текст:
<html>
<head>
<title>Мой первый сайт </title>
</head>
<body>
Здравствуйте! Это моя первая веб-страница!
</body>
</html>
Далее, нажимаем в верхнем меню кнопку "Кодировки" и выбираем "Кодировать в UTF-8"
Большинство сайтов рунета состоят из страниц html написанных на кодировке UTF-8. Для того чтобы наши страницы корректно отображались в браузере, мы тоже будем использовать данную кодировку.
Теперь нужно сохранить наш файл в формате html.
Не забываем, что Notepad++, это текстовый редактор, а это значит, что на данный момент мы имеем обычный текстовый файл с набором символов. Для того чтобы наш браузер отображал созданную нами текстовую страницу как веб-страницу, нам нужно сделать из нее файл с расширением html.
Для этого нажимаем в верхнем меню кнопку "Файл", затем "Сохранить как", выбираем директорию (путь) куда будет сохранен файл, сохраним его в созданной нами папке: Рабочий стол/Сайт/, далее самое главное, выбираем нужный тип файла, в нашем случае это Hyper Text Markup Language (html).
Как это все работает, мы разберем в следующих уроках.
* Когда нам нужно будет открывать файл для редактирования, будем нажимать правой кнопкой мыши на файл и выбирать "Edit with Notepad++" (открыть с помощью Notepad++).
Итак, приступим. Для начала запустим программу IDLE. Окно, которое мы видим — это интерактивное окно IDLE. Оно показывает результаты выполнения программ, которые мы напишем и запустим. Мы также можем вводить программный код в это окно напрямую, так же как и в командную строку с запущенным в интерактивном режиме Python. Введем простейшее математическое выражение. Когда вы нажмете клавишу Enter, интерпретатор выполнит расчет и выведет результат:
Давайте добавим еще немного кода. Программа для вывода «Hello, world» на python очень проста. Нам нужна одна инструкция print:
Если вы хотите просмотреть строки кода, которые вы вели раньше, вы можете набирать комбинацию клавиш ALT+P (на MacOS: CTRL+P). После каждого нажатия этой комбинации IDLE будет заполнять строку предыдущей командой, введенной вами. Вы можете использовать ALT+N (MacOS: CTRL+N) для прокрутки строк кода в обратном направлении.
Обычно приходится выполнять более одной строки кода зараз и сохранять наработки, чтобы возвращаться к ним позже. Для этого необходимо создать новый скрипт. В строке меню выберите File->New File чтобы создать пустой скрипт. Вы должны поставить оба окна рядом, что бы одновременно видеть код и результаты работы.
Введите такую же строку кода, как и раньше, но в новом окне.
Если вы скопируете и вставите строку из интерактивного окна в новый файл, убедитесь, что вы не скопировали символы «>>>» в начале строки.
Для того чтобы запустить скрипт, необходимо его сохранить. Выберите меню File->Save As…, затем введите имя «hello.py» и сохраните его. По расширению файла «.py» IDLE определит, что это python-скрипт. Обращаем внимание на то, что «print» и «Hello, world» подсвечиваются разными цветами для того, чтобы показать что «print» — это команда, а «Hello, world» — это строка символов. Если вы сохраните скрипт с другим расширением, то подсветка синтаксиса в IDLE работать не будет.
Теперь, когда скрипт сохранен у нас, все готово для запуска программы. Выберите Run ->Run Module в меню окна скрипта (или нажмите клавишу F5). Мы увидим результат работы в интерактивном окне:
Для того, чтобы открыть и отредактировать файл позже, просто запустите IDLE снова, затем выберите в меню File->Open…, просмотрите файлы и выберите скрипт, который хотите открыть.
Когда вы будите запускать или перезапускать скрипт, то можете увидеть в интерактивном окне строку подобную этой:
В этом примере Hello World пошагово показывается, как создать ваше первое расширение для Visual Studio. В этом учебнике показано, как добавить новую команду в Visual Studio.
В процессе изучения вы узнаете, как выполняются следующие задачи:
Эта статья относится к Visual Studio в Windows. Информацию о Visual Studio для Mac см. в статье Пошаговое руководство по расширяемости в Visual Studio для Mac.
Изменение исходного кода
На этом этапе текст команды и кнопки создается автоматически, и он не слишком информативный. Если вы хотите внести изменения, можно изменить VSCT-файл и CS-файл.
В VSCT-файле можно переименовать свои команды, а также определить их место в командной системе Visual Studio. Просматривая VSCT-файл, вы увидите комментарии, объясняющие, за что отвечает каждый раздел кода VSCT.
В CS-файле можно определять действия, например обработчик щелчка мыши.
Шаг 1. В обозревателе решений найдите VSCT-файл для вашей новой команды. В данном случае он будет называться CommandPackage.vsct.
Шаг 1. В обозревателе решений найдите VSCT-файл для вашего пакета расширения VS. В данном случае он будет называться HelloWorldPackage.vsct.
Шаг 2. Измените значение параметра ButtonText на Say Hello World! .
Шаг 3. Вернитесь в обозреватель решений и найдите файл Command.cs. В методе Execute измените строку message с string.Format(..) на Hello World! .
Не забудьте сохранить изменения в каждом файле.
Выполните команду.
Теперь можно запустить исходный код в экспериментальном экземпляре Visual Studio.
Шаг 1. Нажмите клавишу F5, чтобы выполнить команду Начать отладку. Эта команда выполняет сборку проекта и запускает отладчик, запуская новый экземпляр Visual Studio, который называется экспериментальным экземпляром.
Вы увидите слова Экспериментальный экземпляр в заголовке окна Visual Studio.
Шаг 2. В меню Инструменты экспериментального экземпляра выберите Say Hello World! .
Дальнейшие действия
Теперь, после знакомства с основами работы с расширяемостью Visual Studio, вы можете продолжить обучение по следующим ссылкам.
Создание проекта расширения
Шаг 1. В меню Файл выберите Создать > Проект.
Теперь вы должны увидеть страницу начала работы и некоторые примеры ресурсов.
Если вам понадобится выйти из этого учебника, а затем вернуться к нему, ваш новый проект HelloWorld можно найти на начальной странице в разделе Последние.
Шаг 2. Введите "HelloWorld" в поле Имя проекта и нажмите Создать.
Теперь проект HelloWorld должен появиться в обозревателе решений.
Добавление пользовательской команды
Шаг 1. Если выбрать файл манифеста с расширением VSIXMANIFEST, можно увидеть, какие параметры могут быть изменены, например описание, автор и версия.
Шаг 2. Щелкните проект (а не решение) правой кнопкой мыши. В контекстном меню выберите Добавить, а затем Создать элемент.
Шаг 3. Выберите раздел Расширяемость, а затем выберите пункт Команда.
Шаг 4. Внизу, в поле Имя, введите имя файла, например Command.cs.
Теперь ваша новая команда отображается в обозревателе решений. В узле Ресурсы можно найти другие файлы, связанные с вашей командой. Например, если вы хотите изменить образ, здесь будет находиться PNG-файл.
Предварительные требования
Прежде чем начать, убедитесь, что вы установили рабочую нагрузку разработки расширения Visual Studio, которая включает нужный шаблон VSIX и пример кода.
Для создания проекта расширения Visual Studio можно использовать любой выпуск Visual Studio (Community, Professional или Enterprise).
Читайте также: