Visual Studio Code Run Html

  



Setup and Run HTML on Visual Studio Code. Posted at 12:24h in Visual Studio Code by Studyopedia Editorial Staff 0 Comments. In this lesson, learn how to setup and run HTML on Visual Studio Code. After setting the environment, we will also run sample HTML program.

Follow the below steps to Create & Run HTML Website in Visual Studio Code:

Code
  • Just use the Live Server Extension. Install it from VS Code directly and you will be fine. You'll then have a link in the bottom of your editor to start and run the server automatically and also view your HTML immediately. Also check: live-server-web-extension and Live Server.
  • With the Microsoft Edge Tools for Visual Studio Code Visual Studio Code extension, use the Elements tool of the Microsoft Edge browser within Visual Studio Code. Use it for the following actions. Attach to an instance or launch an instance of Microsoft Edge.

Visual Studio Code is an editor to create HTML Website, it's a very simple process to create any HTML website, follow the below process to create HTML Website:

Step 1: Download and install Visual Studio Code from Here

Step 2: Open Visual Studio Code from Start Menu, or by run command: 'code'

Step 3: After Visual Studio Code is opened, from File menu select option Open Folder as shown below:

Step 4: In Explorer navigation in left section, click on New File button beside Folder Name which we opened in Step 3, give the file name index.html

Step 5: Open the index.html file in right side Editor Section and write below code:

<html>
<head>
<title>School Management Home</title>
<script type='text/javascript' src='js/common.js'></srript>
<link rel = 'stylesheet' type = 'text/css' href='css/styles.css' />
</head>
<body>
<h1>
School Management Dashboard
</h1>
<p>Welcome to School Management Website</p>
<input type='button' value='Create New School' />
</body>
</html>

Step 6: Now, in the left Explorer navigation, click on 'New Folder' beside Folder Name and name it 'css', follow the same to create another folder called 'js'

Step 7: Now, add styles.css and common.js files in css and js folder respectively as shown below:

Step 8: Write below code in the styles.css an common.js files

Cara Run Html Di Visual Studio Code

styles.css:

Visual Studio Code Run Html Code

Visual Studio Code Run Html
body{
padding:20px;
background-color:gray;
color:white;
}
p{
color:blue;
}
input[type=button] {
padding:10px;
margin:20px 0px;
border:1px solid;
}

common.js:

function createNewSchool(){
alert('New School Clicked');
}

Step 9: Now, Open Terminal Window from View menu on top and select 'Integrated Terminal' option, once the Terminal Window opens, execute the following command to run the application: start index.html --o

PS F:ApplicationsAngularSchoolManagementWebsite> start index.html --o

Visual Studio Code Run Html In Browser

Output: