Scribd
Upload
63 views16 pages

Intro HTML in Vs Code

The document provides a guide on installing and using Visual Studio Code (VS Code) for HTML development. It outlines the steps for installing VS Code on both Windows and Mac OS, as well as instructions for creating and saving a basic HTML file. Additionally, it introduces the use of Emmet Abbreviation for generating HTML document structure in the editor.

Uploaded by

s.badal0705
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views16 pages

Intro HTML in Vs Code

The document provides a guide on installing and using Visual Studio Code (VS Code) for HTML development. It outlines the steps for installing VS Code on both Windows and Mac OS, as well as instructions for creating and saving a basic HTML file. Additionally, it introduces the use of Emmet Abbreviation for generating HTML document structure in the editor.

Uploaded by

s.badal0705
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Introduction to HTML in VS Code

Objectives

1 VS Code Editor Install and implement VS Code editor

2 HTML & VS Code


Editor
Develop web pages in HTML by using VS Code editor
VS Code Editor
Installing VS Code

▪ Visual Studio Code is built in an open


source code editor for HTML, CSS & JS.

▪ Step 1- On the address bar type


[Link]

▪ Step 2 - For Windows, click the icon as


seen in the image.

▪ Step 3 - For Mac OS, click the icon as


seen in the image.
Installing VS Code on Mac

▪ In Mac OS, save it as a zip file.


▪ Double-click the downloaded zip file while expanding it.
▪ The output is seen in the image.
Installing VS Code on Mac

▪ Drag the “Visual Studio [Link]” to


“Applications” to make it available on
Launchpad.
▪ Double-click the “Visual Studio Code” so that it
opens.
▪ Add VS Code to the Dock by right-clicking the
icon, then add VS Code to the Dock in the menu
as shown in the image.
▪ Select Options => Keep in Dock.
Installing VS Code on Windows

▪ Download the Visual Studio Code installer for Windows.


▪ Once it is downloaded, run the installer. (VSCodeUserSetup-{version}.exe). This will only take a minute.
▪ By default, VS Code is installed under C:\users\{username}\AppData\Local\Programs\Microsoft VS Code.
Installing VS Code on Windows

▪ After completing the Setup Wizard, open VS Code editor.


HTML & VS Code
Editor
Developing First HTML Program in VS Code

▪ Open a new file in VS Code editor.

▪ Save your file by clicking ”Save As” in a defined destination.

▪ Do not forget to put the .html extension in the file name.


Developing First HTML Program in VS Code

▪ Save your first HTML file as shown - document_name.html.


Developing First HTML Program in VS Code

▪ Pressing Shift+! On your keyboard will give you the -Emmet Abbreviation basic structure of your HTML document
as shown.
Developing First HTML Program in VS Code

▪ Type the following the html code.


Developing First HTML Program in VS Code

▪ Type the following the html code.


Developing First HTML Program in VS Code

▪ Web page output will be as shown here.

You might also like