Создание веб-сайта с помощью Visual Studio

Обновлено: 03.07.2024

Это пошаговое руководство знакомит вас с Microsoft Visual Web Developer. Он поможет вам создать простую страницу с помощью Visual Web Developer, иллюстрирует основные приемы создания новой страницы, добавления элементов управления и написания кода.

В этом пошаговом руководстве показаны следующие задачи:

Создание веб-сайта файловой системы.

Ознакомление с Visual Web Developer.

Добавление обработчиков событий.

Предпосылки

Для выполнения этого пошагового руководства вам потребуется:

Визуальный веб-разработчик

Создание веб-сайта и страницы

В этой части пошагового руководства вы создадите веб-сайт и добавите на него новую страницу. Вы также добавите текст HTML и запустите страницу в веб-браузере.

В этом пошаговом руководстве вы создадите веб-сайт файловой системы, для которого не требуется работа с Microsoft Internet Information Services (IIS). Вместо этого вы создадите и запустите свою страницу в локальной файловой системе.

Веб-сайт с файловой системой — это сайт, на котором страницы и другие файлы хранятся в папке, которую вы выбираете где-то на локальном компьютере. Другие варианты веб-сайтов включают локальный веб-сайт IIS, на котором ваши файлы хранятся в подпапке локального корня IIS (обычно \Inetpub\Wwwroot\). Сайт FTP хранит файлы на удаленном сервере, к которому вы получаете доступ через Интернет с помощью протокола передачи файлов (FTP). Удаленный сайт хранит файлы на удаленном сервере, к которым вы можете получить доступ через локальную сеть. Дополнительные сведения см. в разделе Пошаговое руководство. Редактирование веб-сайтов с помощью FTP в Visual Web Developer. Кроме того, файлы веб-сайта можно хранить в системе управления версиями, такой как Visual SourceSafe. Дополнительные сведения см. в разделе Знакомство с системой управления версиями.

Чтобы создать веб-сайт файловой системы

Откройте Visual Web Developer.

В меню "Файл" выберите "Новый веб-сайт".

Появится диалоговое окно "Новый веб-сайт", как показано на следующем снимке экрана.

Диалоговое окно "Новый веб-сайт"

В поле "Расположение" выберите поле "Файловая система", а затем введите имя папки, в которой вы хотите хранить страницы своего веб-сайта.

Например, введите имя папки C:\BasicWebSite.

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

Нажмите "ОК".

Visual Web Developer создает папку и новую страницу с именем Default.aspx. Когда создается новая страница, Visual Web Developer по умолчанию отображает страницу в представлении исходного кода, где вы можете видеть элементы HTML страницы. На следующем снимке экрана показано исходное представление веб-страницы по умолчанию.

Исходный вид страницы по умолчанию

Экскурсия по Visual Web Developer

Прежде чем приступить к работе со страницей, полезно ознакомиться со средой разработки Visual Web Developer. На следующем рисунке показаны окна и инструменты, доступные в Visual Web Developer.

На этой диаграмме показаны окна по умолчанию и расположение окон. Меню «Вид» позволяет отображать дополнительные окна, а также переупорядочивать и изменять размер окон в соответствии с вашими предпочтениями. Если в расположение окон уже были внесены изменения, то, что вы видите, не будет соответствовать диаграмме.

Схема среды Visual Web Developer

Чтобы ознакомиться с веб-дизайнером в Visual Web Developer

Изучите предыдущую иллюстрацию и сопоставьте текст со следующим списком, в котором описаны наиболее часто используемые окна и инструменты. (Здесь перечислены не все окна и инструменты, которые вы видите, а только те, которые отмечены на предыдущем рисунке.)

Панели инструментов. Предоставьте команды для форматирования текста, поиска текста и т. д. Некоторые панели инструментов доступны только при работе в режиме конструктора.

Обозреватель решений. Отображает файлы и папки на вашем веб-сайте.

Окно документа. Отображает документы, над которыми вы работаете, в окнах с вкладками. Вы можете переключаться между документами, нажимая вкладки.

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

Просмотр вкладок. Представить вам различные виды одного и того же документа. Представление «Дизайн» — это поверхность редактирования, близкая к WYSIWYG. Представление исходного кода — это HTML-редактор страницы. Разделенное представление отображает как представление «Дизайн», так и представление «Исходный код» для документа. Далее в этом пошаговом руководстве вы будете работать с представлениями «Проект» и «Исходный код». Если вы предпочитаете открывать веб-страницы в представлении «Дизайн», в меню «Сервис» нажмите «Параметры», выберите узел «Конструктор HTML» и измените параметр «Начальные страницы в».

Инструментарий. Предоставляет элементы управления и HTML-элементы, которые можно перетаскивать на страницу.Элементы панели инструментов сгруппированы по общей функции.

Обозреватель серверов/обозреватель баз данных. Отображает подключения к базе данных. Если обозреватель серверов не отображается в Visual Web Developer, в меню «Вид» выберите «Обозреватель серверов» или «Обозреватель баз данных».

Создание новой страницы веб-форм

Чтобы добавить страницу на веб-сайт

Закройте страницу Default.aspx. Для этого щелкните правой кнопкой мыши вкладку с именем файла и выберите Закрыть.

В обозревателе решений щелкните правой кнопкой мыши веб-сайт (например, C:\BasicWebSite) и выберите команду Добавить новый элемент.

Под установленными шаблонами Visual Studio щелкните Веб-форма. На следующем снимке экрана показано диалоговое окно «Добавить новый элемент».

Диалоговое окно "Добавить новый элемент"

В поле Имя введите FirstWebPage.

Снимите флажок Поместить код в отдельный файл.

Нажмите "Добавить".

Visual Web Developer создает новую страницу и открывает ее.

Добавление HTML на страницу

В этой части пошагового руководства вы добавите на страницу статический текст.

Чтобы добавить текст на страницу

В нижней части окна документа нажмите вкладку "Дизайн", чтобы переключиться в режим просмотра "Дизайн".

В представлении «Дизайн» страница, над которой вы работаете, отображается в формате WYSIWYG. На данный момент у вас нет текста или элементов управления на странице, поэтому страница пуста, за исключением пунктирной линии, очерчивающей прямоугольник. Этот прямоугольник представляет элемент div на странице.

Нажмите внутри прямоугольника, обведенного пунктирной линией.

Введите Добро пожаловать в Visual Web Developer и дважды нажмите Enter.

На следующем снимке экрана показан текст, который вы набрали в представлении «Дизайн».

Текст приветствия в представлении «Дизайн»

Переключиться на представление исходного кода.

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

Текст приветствия в исходном коде

Запуск страницы

Чтобы запустить страницу

В обозревателе решений щелкните правой кнопкой мыши файл FirstPage.aspx и выберите пункт Сделать стартовой страницей.

Нажмите CTRL+F5, чтобы запустить страницу.

Значок веб-сервера Visual Web Developer

Страница отображается в браузере. Хотя созданная вами страница имеет расширение .aspx, в настоящее время она работает как любая HTML-страница.

Чтобы отобразить страницу в браузере, вы также можете щелкнуть ее правой кнопкой мыши в обозревателе решений и выбрать "Просмотреть в браузере".

Если в браузере отображается ошибка 502 или ошибка, указывающая на то, что страница не может быть отображена, возможно, вам потребуется настроить браузер так, чтобы он обходил прокси-серверы для локальных запросов. Дополнительные сведения см. в разделе Как обойти прокси-сервер для локальных веб-запросов.

Закройте браузер.

Добавление и программирование элементов управления

В этой части пошагового руководства вы добавите на страницу элементы управления Button, TextBox и Label и напишете код для обработки события Click для элемента управления Button.

Чтобы добавить элементы управления на страницу

Перейдите на вкладку "Дизайн", чтобы переключиться в режим просмотра "Дизайн".

Поместите точку вставки в конце текста приветствия Visual Web Developer и нажмите клавишу ВВОД пять или более раз, чтобы освободить место в поле элемента div.

На панели инструментов разверните группу Стандарт.

Перетащите элемент управления TextBox на страницу и поместите его в середину поля элемента div, в первой строке которого написано Добро пожаловать в Visual Web Developer.

Перетащите элемент управления Button на страницу и расположите его справа от элемента управления TextBox.

Перетащите элемент управления Label на страницу и разместите его на отдельной строке под элементом управления Button.

Поместите точку вставки над элементом управления TextBox и введите введите свое имя:.

Этот статический текст HTML является заголовком для элемента управления TextBox. Вы можете смешивать статический HTML и серверные элементы управления на одной странице. На следующем снимке экрана показано, как эти три элемента управления отображаются в представлении «Дизайн».

Элементы управления в представлении «Дизайн»

Настройка свойств элемента управления

Visual Web Developer предлагает различные способы установки свойств элементов управления на странице. В этой части пошагового руководства вы зададите свойства как в представлении «Дизайн», так и в представлении «Исходный код».

Чтобы установить свойства элемента управления

Выберите элемент управления "Кнопка", а затем в окне "Свойства" установите для параметра "Текст" значение "Отображаемое имя", как показано на следующем снимке экрана.

Изменен текст управления кнопкой

Переключиться на представление исходного кода.

В представлении «Исходный код» отображается HTML-код страницы, включая элементы, созданные Visual Web Developer для серверных элементов управления. Элементы управления объявляются с использованием HTML-подобного синтаксиса, за исключением того, что теги используют префикс asp: и включают атрибут runat="server".

Свойства элемента управления объявляются как атрибуты. Например, когда вы устанавливали свойство Text для элемента управления Button на шаге 1, вы фактически устанавливали атрибут Text в разметке элемента управления.

Обратите внимание, что все элементы управления находятся внутри элемента, который также имеет атрибут runat="server". Атрибут runat="server" и префикс asp: для тегов управления помечают элементы управления, чтобы они обрабатывались ASP.NET на сервере при запуске страницы. Код вне элементов и отправляется в браузер без изменений, поэтому код ASP.NET должен находиться внутри элемента, открывающий тег которого содержит атрибут runat="server".

Поместите точку вставки после asp:Label в теге и нажмите ПРОБЕЛ.

Появится раскрывающийся список со списком свойств, которые можно задать для элемента управления Label. Эта функция, называемая IntelliSense, помогает вам в представлении исходного кода с синтаксисом серверных элементов управления, элементов HTML и других элементов на странице. На следующем снимке экрана показан раскрывающийся список IntelliSense для элемента управления Label.

IntelliSense для элемента управления Label

Выберите ForeColor, а затем введите знак равенства и кавычку ( ПРИМЕЧАНИЕ">

Вы можете отобразить раскрывающийся список IntelliSense в любое время, нажав CTRL+J.

Выберите цвет текста элемента управления Label. Убедитесь, что вы выбрали достаточно темный цвет для чтения на белом фоне.

Атрибут ForeColor дополняется выбранным цветом, включая закрывающую кавычку.

Программирование кнопки управления

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

Чтобы добавить обработчик событий кнопки по умолчанию

Переключиться в режим конструктора.

Дважды щелкните элемент управления "Кнопка".

Visual Web Developer переключается в режим просмотра исходного кода и создает каркасный обработчик событий для события Click по умолчанию элемента управления Button.

Двойной щелчок элемента управления в представлении «Дизайн» — это лишь один из нескольких способов создания обработчиков событий.

В обработчике введите следующее:

Когда вы вводите точку после Label, Visual Web Developer отображает список доступных членов для элемента управления Label, как показано на следующем снимке экрана.

Доступные элементы управления Label

Завершите обработчик события Click для кнопки, чтобы он читался так, как показано в следующем примере кода.

Методы обработчика событий могут иметь любое имя; имя, которое вы видите, является именем по умолчанию, созданным Visual Web Developer. Важным моментом является то, что имя, используемое для атрибута OnClick, должно совпадать с именем метода на странице.

Если вы используете Visual Basic с разделением кода, Visual Web Developer не добавляет явный атрибут OnClick. Вместо этого событие привязывается к методу обработчика с помощью ключевого слова Handles в самом объявлении обработчика.

Запуск страницы

Теперь вы можете протестировать серверные элементы управления на странице.

Чтобы запустить страницу

Нажмите CTRL+F5, чтобы запустить страницу в браузере.

Введите имя в текстовое поле и нажмите кнопку.

В браузере просмотрите исходный код текущей страницы.

Закройте браузер.

Работа с дополнительными элементами управления

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

В этом разделе вы добавите элемент управления "Календарь" на страницу и отформатируете его.

Чтобы добавить элемент управления "Календарь"

В Visual Web Developer переключитесь в режим конструктора.

Из стандартного раздела панели инструментов перетащите элемент управления "Календарь" на страницу и расположите его под элементом div, содержащим другие элементы управления:

Отображается панель смарт-тегов календаря. На панели отображаются команды, упрощающие выполнение наиболее распространенных задач для выбранного элемента управления. На следующем снимке экрана показан элемент управления Calendar, отображаемый в представлении «Дизайн».

Управление календарем в представлении «Дизайн»

На панели смарт-тегов выберите Автоформат.

Отображается диалоговое окно "Автоформат", в котором можно выбрать схему форматирования для календаря. На следующем снимке экрана показано диалоговое окно «Автоформат» для элемента управления «Календарь».

Диалоговое окно "Автоформат" для элемента управления "Календарь"

В списке "Выберите схему" выберите "Простая" и нажмите "ОК".

Переключиться на представление исходного кода.

Календарь в представлении исходного кода

Программирование элемента управления календарем

В этом разделе вы запрограммируете элемент управления "Календарь" для отображения текущей выбранной даты.

Чтобы запрограммировать элемент управления "Календарь"

В представлении «Дизайн» дважды щелкните элемент управления «Календарь».

Новый обработчик событий создается в представлении исходного кода.

Завершите обработчик события SelectionChanged, добавив следующий выделенный код.

Запуск страницы

Теперь вы можете протестировать календарь.

Чтобы запустить страницу

Нажмите CTRL+F5, чтобы запустить страницу в браузере.

Нажмите дату в календаре.

Дата, которую вы щелкнули, отображается в элементе управления Label.

В браузере просмотрите исходный код страницы.

Закройте браузер.

Дальнейшие шаги

В этом пошаговом руководстве показаны основные функции конструктора страниц Visual Web Developer. Теперь, когда вы понимаете, как создавать и редактировать веб-страницы в Visual Web Developer, вы можете изучить другие функции. Например, вы можете:

Создавайте веб-страницы с файлами кода программной части вместо встроенного скрипта. Дополнительные сведения см. в разделе Пошаговое руководство. Создание простой веб-страницы с разделением кода в Visual Web Developer.

Узнайте больше о том, как редактировать HTML в Visual Web Developer. Дополнительные сведения см. в разделе Пошаговое руководство: базовое редактирование HTML в Visual Web Developer.

Добавить доступ к данным для веб-страниц. Дополнительные сведения см. в разделе Пошаговое руководство: базовый доступ к данным на веб-страницах.

Узнайте об отладчике для веб-страниц. Дополнительные сведения см. в разделе Пошаговое руководство: отладка веб-страниц в Visual Web Developer.

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

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

Введение. Создание веб-сайта о вас с помощью Visual Studio (HTML, CSS, JQUERY)

Это мое первое руководство, и в нем я покажу вам, как использовать Visual Studio для создания собственного веб-сайта!

Вот ссылка для скачивания Visual Studio:

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

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

Вложения

Шаг 1. Создайте свой проект

Нажмите файл, новый, веб-сайт. Затем выберите "Сайт веб-форм ASP.NET"

Теперь вы создали свой проект. Вы увидите очень много кода. В левом нижнем углу есть кнопка «Дизайн». Если вы нажмете на нее, появится веб-страница, которую вы можете редактировать! На следующем шаге вы узнаете, как его редактировать.

Шаг 2. Посмотрите, какие инструменты у вас есть!

Теперь, если вы нажмете на текст, вы сможете его отредактировать. Вы также можете добавить кнопки и текст, щелкнув панель инструментов слева. Когда вы нажмете на него, появится всплывающее окно. Есть все другие параметры, которые вы можете перетаскивать с помощью простой системы перетаскивания. Например, перетащите маркированный список в нужное место. Когда вы это сделаете, вы можете отредактировать его, посмотрев на вкладку свойств, которая по умолчанию расположена в самом правом нижнем углу. Когда вы прокрутите вниз до пункта Разное. Есть свойство под названием Items. Когда вы наводите на него курсор, вы видите маленькую кнопку с несколькими точками внутри них. Нажмите здесь. Появится экран. И под вкладкой Участники нажмите кнопку Добавить. Теперь вы добавляете элементы списка. Вы видите некоторые параметры, такие как включено и выбрано. Просто отредактируйте их, как хотите. И добавьте столько предметов, сколько хотите. Когда вы снова взглянете на панель инструментов, вы увидите, что вы также можете выбирать кнопки HTML или расширения ajax.

Шаг 3. Создание веб-сайта, посвященного вам!

Теперь мы собираемся создать сайт о вас. Вы можете сделать это, используя панель инструментов, а затем html-формы, или сделать все это с помощью кода. Я собираюсь сделать это в коде сейчас, потому что это немного более продвинуто. Теперь перейдите в обозреватель решений. И щелкните правой кнопкой мыши имя вашего проекта. Выберите опцию «Добавить» и нажмите «Добавить новый элемент». После этого выберите HtmlPage. Примечание. Для html-страницы нет кнопки "Дизайн", но вы все равно можете использовать для нее панель инструментов.

Давайте начнем с добавления тегов стиля

внутри этих тегов вы можете добавить код css. Вам пока не нужно ничего добавлять. Внутри тега title вы можете добавить свой собственный заголовок, например

Внутри тегов body можно добавить кнопки, текст и т. д. Давайте добавим изображение о себе. Вы можете сделать это, добавив тег img или используя панель инструментов. чтобы определить, какое изображение вы собираетесь использовать, добавьте src="https://www.instructables.com/Making-an-website-all-about-you-with-Visual-Studio/[Your%20link%20here.] ". Вы также должны добавить высоту и ширину. Ваш тег должен выглядеть примерно так

Давайте добавим текст, добавив тег

P означает абзац. Просто добавьте что-нибудь в теги P, и вы получите текст на своей странице. После того, как мы это сделали, добавьте этот код

Этот код добавит текстовое поле с адресом электронной почты-заполнителем и кнопкой отправки на вашем родном языке.

Когда вы все сделали правильно, вы должны открыть эту веб-страницу при нажатии на зеленую кнопку воспроизведения. (Посмотрите на последнее изображение).

Как видите, ему просто нужен стиль. и для этого мы собираемся использовать css.

Хорошо, это для HTML. Сейчас только добавляю css :)

Шаг 4. Добавление стиля

css означает каскадные таблицы стилей. И используется для придания вашей веб-странице большего стиля.

Некоторые сведения о синтаксисе css. Я покажу вам небольшой контейнер кода css:

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

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

Замените URL-адрес после фона своим собственным URL-адресом.

Вот как должен выглядеть ваш код:

Молодец! Готово!

Чтобы увидеть, как красиво выглядит ваш сайт. вам нужно будет найти зеленую кнопку воспроизведения и нажать на стрелку рядом с ней. Затем выберите «Инспектор страниц». Чтобы просмотреть его в Visual Studio, в противном случае выберите нужный браузер. После этого просто нажмите зеленую кнопку воспроизведения!

Шаг 5. Создайте свой собственный

Теперь мы собираемся сделать это самостоятельно.

Посмотрите на все ссылки, которые вы видите в коде html и коде css (только внутри контейнера body). Вы можете легко увидеть, где они используются. Измените URL-адрес вашего собственного URL-адреса изображения. Вот и все об URL.

Вы также можете добавлять элементы внутрь контейнеров. Например, если вы хотите, чтобы текст был больше, используйте этот код:

в контейнер p. Вы также можете добавить другие вещи, я покажу вам список настроек текста:

Попробуйте их, добавив немного в контейнер P. Просто погуглите код css, и вы получите массу строк!

Шаг 6. Добавление кнопок социальных сетей

Мы собираемся добавить несколько кнопок социальных сетей, чтобы они также могли связаться с вами через социальные сети. Вы можете выбрать один из двух стилей (посмотрите на фотографии). Я добавил GIF, чтобы вы могли увидеть, чем они отличаются друг от друга. Наведите указатель мыши, чтобы увидеть, какой это стиль. Мне больше всего нравится первый стиль, но второй тоже прекрасен.

Давайте добавим их. Для обеих версий вам нужно будет добавить один и тот же HTML-код

Поэтому добавьте этот код под тег ввода с типом «отправить»:

Теперь нам нужно подключить еще один файл css (шрифт для значков социальных сетей). Мы делаем это, добавляя следующую строку в тег head:

В тег стиля нам нужно добавить следующий код:

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

Шаг 7. Добавление Javascript (Jquery)

Вы можете сделать свой сайт еще красивее, сделав его интерактивным. Мы собираемся сделать это, добавив Jquery. Jquery — это не язык, а библиотека, написанная на Javascript. Вы можете посетить официальный сайт Jquery, нажав на ссылку ниже.

Вам не нужно загружать его, потому что мы можем связать его с помощью кода.

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

Внутри этих тегов мы добавим наш скрипт JavaScript. Сначала нам нужно обновить наш тип ввода: «отправить». Мы должны добавить класс: 'inputMail'. Итак, наш тег должен выглядеть так:

Теперь мы добавим javascript внутрь тега script. Начнем с добавления этого кода в тег скрипта:

Это означает, что функция будет выполняться, когда документ будет полностью загружен. $(document) означает, что он ищет нечто, называемое документом, а затем использует функцию ready, чтобы проверить, готов ли документ. Внутри этих скобок мы помещаем весь наш следующий код Jquery. Теперь добавим в скобки следующий код:

Этот код ищет класс с именем inputMail (точка означает, что это класс, который мы ищем). Когда Jquery найдет этот объект, он проверит, щелкнули ли его. При нажатии на нее выполняется функция. Итак, внутри этой функции мы можем позволить кнопке проделать небольшой трюк.Так что для уловки мы добавим этот код внутрь функции:

Теперь он также ищет класс inputMail и запускает пользовательскую анимацию. Итак, давайте проверим это! Вот как должен выглядеть весь ваш тег скрипта:

С легкостью переключайтесь между языками и типами проектов с помощью лучшего в мире редактора для HTML5, CSS3 и JavaScript. Воспользуйтесь возможностями LESS и SASS, чтобы разработчики интерфейсов могли присоединиться к веселью.

Программные контейнеры

Создание, отладка, тестирование и развертывание программных контейнеров

Создавайте и развертывайте свои приложения с уверенностью, используя инструменты разработки контейнеров Visual Studio. Создавайте образы Docker, содержащие все зависимости вашего приложения, что упрощает запуск приложений в широком спектре служб в Azure или других узлах контейнеров.

Открытый код

Менеджеры пакетов

LibMan, NuGet, npm

Расширяемая экосистема

Расширяйте Visual Studio, изучайте наше сообщество и создавайте собственные!

Настройте Visual Studio, используя тысячи расширений, доступных в постоянно растущей экосистеме, или даже создайте собственное.

Масштаб облака

Развертывание на любом хосте; масштабировать до облака

Visual Studio включает интегрированные инструменты для развертывания вашего веб-приложения на любом узле или масштабирования до облака Microsoft Azure. Публикуйте свои веб-сайты и виртуальные машины и управляйте ими из Visual Studio.

Лучший редактор кода

Все в одном месте с интегрированной средой разработки мирового класса

Создавайте, редактируйте, исследуйте, отлаживайте, тестируйте и развертывайте код в Visual Studio. Управляйте своим источником; отслеживать свои ошибки и рабочие элементы в Azure DevOps или Team Foundation Server (TFS). Работайте с репозиторием Git по вашему выбору, в том числе с GitHub. Получите беспрецедентную информацию о своем коде с помощью CodeLens, указав все, что вам нужно знать, в одной строке.

Для веб-разработки вам понадобятся две программы: редактор для создания файлов для веб-сайта и браузер (например, Edge, Firefox, Safari или Chrome) для просмотра и тестирования вашего веб-сайта.

Редактор

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

Среди многих других редакторов мне больше всего нравится Visual Studio Code (бесплатно). Вы можете использовать редактор по своему выбору, но я буду иногда ссылаться на некоторые функции Visual Studio Code (VS Code). Хорошими альтернативами являются Atom или Brackets.

Давай, установи редактор. Если вы не знаете, какой из них, используйте пока Visual Studio Code.

Расширения редактора

Пока мы работаем над этим, мы сделаем расширение для VS Code, которое даст супервозможности нашему редактору: Live Server.

Откройте код Visual Studio.

Откройте меню «Расширения».

Введите «Live Server» в поле поиска и установите расширение.

Перезагрузите Visual Studio Code, чтобы активировать расширение.

Браузер

Конечно, наш веб-сайт должен работать во всех основных браузерах (Edge, Firefox, Chrome и Safari). Однако для веб-разработки я рекомендую вам использовать Chrome. В Chrome есть очень полезные инструменты для разработчиков, которыми вы будете часто пользоваться.

Если на вашем компьютере не установлен Chrome, вы можете установить его здесь.

Создание HTML-документа

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

Создайте папку на своем компьютере для своего проекта. Назовите папку Портфолио (или как хотите).

Откройте меню «Файл» и выберите «Открыть папку…». Найдите созданную папку и откройте ее.

Щелкните правой кнопкой мыши под папкой и выберите «Новый файл». Назовите файл index.html .

Теперь у вас есть пустой текстовый файл с именем index.html .

Почему index.html?

Просмотр и обновление

Теперь вы можете заполнить документ содержимым. Введите следующие строки в свой HTML.

Для просмотра страницы мы будем использовать расширение Live Server, которое мы установили выше. Щелкните правой кнопкой мыши файл index.html (файл под папкой «Портфолио», а не файл выше в разделе «Открыть редакторы»). Затем нажмите «Открыть с помощью Live Server». Окно браузера должно открыться и показать ваш первый веб-сайт. Теперь всякий раз, когда вы сохраняете какие-либо изменения, они автоматически обновляются действующим сервером.

Если страница не обновляется после изменений: сохраните все свои файлы в редакторе, а затем в браузере обновите их с помощью F5 или cmd+r .

Поздравляем! Вы только что создали свой первый сайт!

Отступ

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

Совет 1. Используйте клавиши Shift+Tab, чтобы переместить отступ влево.

Совет 2. Вы можете сделать отступ сразу для нескольких строк, выделив их и нажав Tab или Shift+Tab .

Совет 3 (автоматически). Щелкните правой кнопкой мыши где-нибудь в коде программы и выберите "Форматировать документ" .

HTML-элементы

В приведенном выше примере вы уже видели типичные символы HTML с угловыми скобками. Они называются тегами.

Элементы HTML обычно (но не всегда) состоят из двух тегов: открывающего и закрывающего. В нашем примере это открывающий тег, а с косой чертой — закрывающий.

Текст между открывающим и закрывающим тегами является содержимым элемента HTML. С помощью и мы сообщаем браузеру о начале и конце HTML-кода нашей веб-страницы.

Второй тег, который мы видели, — это тег. В нем указано, что все содержимое между началом и закрытием

Читайте также: