Belajar Html Dengan Visual Studio Code

Belajar Html Dengan Visual Studio Code

Go further with Visual Studio Code’s features

If you already feel comfortable with the previous steps, explore the following features to further customize your development environment. You don’t need to use these suggestions to complete the projects on Codecademy but they can help make you more efficient when writing code and are what make Visual Studio Code such a useful editor!

Congratulations! You’ve successfully set up your text editor and are ready to create websites on your own computer.

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'

Professional Technologist

This article was co-authored by

and by wikiHow staff writer,

. Stan Kats is a Professional Technologist and the COO and Chief Technologist for The STG IT Consulting Group in West Hollywood, California. Stan provides comprehensive technology solutions to businesses through managed IT services, and for individuals through his consumer service business, Stan's Tech Garage. Stan holds a BA in International Relations from The University of Southern California. He began his career working in the Fortune 500 IT world. Stan founded his companies to offer an enterprise-level of expertise for small businesses and individuals. This article has been viewed 467,383 times.

Updated: August 6, 2023

1. Open or create an HTML file in Visual Studio Code. 2. Click the Extensions button on the left side. 3. Search for "HTML Preview" and install it. 4. Click the tab for your HTML file at the top. 5. Click the icon that resembles a split-screen with a magnifying glass at the top.

Thanks to all authors for creating a page that has been read 467,383 times.

Visual Studio code là một code editor hiện đại và vô cùng mạnh mẽ, được rất nhiều lập trình viên tin dùng. Ngoài khả năng tương thích với mọi hệ điều hành PC hiện nay. VSCode còn nổi tiếng với khả năng mở rộng cực kỳ linh hoạt nhờ vào hệ thống extension của mình. Trong bài viết này, Hiếu Đá sẽ hướng dẫn thiết lập VSCode để lập trình web tiện lợi nhất.

Thực ra, Visual Studio Code đã hỗ trợ sẵn một số tính năng đối với HTML, CSS và Javascript. Nhưng trong bài viết này, mình sẽ hướng dẫn cài đặt và sử dụng các extension để hỗ trợ lập trình web tốt hơn trên VSCode. Bên cạnh đó, mình cũng sẽ hướng dẫn thêm một số cách hack speed để gõ code nhanh và gọn gàng hơn. Các mục tiêu hướng đến sẽ là:

Yêu cầu cài đặt: Trước khi bắt đầu hướng  dẫn, bạn cần cài đặt sẵn Visual Studio Code editor. Xem bài viết hướng dẫn cài đặt VSCode tại đây:

Hướng dẫn cài đặt Visual Studio Code

What are ‘development folders’?

Before using your text editor, it’s important to establish an organized file system. As the number and size of your projects grow, it becomes increasingly important to know where to save new projects and find old projects.

Most developers store their projects in an easy-to-find directory, (what you might be used to calling a ‘folder’). Here at Codecademy, we recommend naming this directory projects. It will store all of your coding projects. Whenever you create a new project, no matter how small, you should always make a new folder inside your projects directory. You will find that single-file projects can quickly turn into large, multi-folder projects.

Live Server – Test trang web nhanh-gọn-lẹ

Live Server là một tiện ích giúp biến máy tính của bạn thành một máy chủ web đơn giản. Bạn có thể xem kết quả hoặc test trang web của mình ngay trên trình duyệt hoặc từ một thiết bị khác cùng kết nối chung mạng LAN, ví dụ như smartphone. Điểm đặc biệt của ứng dụng này là trang web trên trình duyệt sẽ tự động tải lại khi bạn lưu file *.html.

Một số điều cần biết khi sử dụng Live Server:

Toàn bộ thông tin và cài đặt Live Server:

Vì thời lượng bài viết có hạn nên Hiếu Đá chỉ giới thiệu sơ qua tiện ích này. Mình sẽ viết riêng một bài đầy đủ hướng dẫn dùng Live Server vào dịp khác.

Các extension khác hỗ trợ lập trình web chuyên nghiệp hơn

Công nghệ lập trình web hiện nay đã phát triển rất nhiều. Do đó, chỉ với HTML, CSS, Javascript là không đủ. Một số công nghệ như ReactJS, AngularJS, Electron, Blazor, v.v… được tạo ra để đẩy nhanh giai đoạn phát triển web hoặc tạo ra các ứng dụng đa nền tảng một cách dễ dàng. Những website/ứng dụng được tạo ra về cơ bản sẽ chạy trên một trình duyệt (Chrome, Firefox hoặc Webview của hệ điều hành). Các bạn có thể tải thêm một số extension tương ứng với công nghệ đang làm việc để VSCode hỗ trợ tốt nhất.

Như vậy là chúng ta đã setup thành công Visual Studio Code để hỗ trợ cho lập trình web. Bạn có thắc mắc hay góp ý gì về bài viết? Hãy bình luận ngay phía bên dưới nhé!

Xem thêm bài viết: Tổng hợp những Plugins không thể thiếu cho VSCode

I had this same problem, but I found a different solution;

In file settings.json I had "python.defaultInterpreterPath": "D:\Program Files\Python310\python.exe", but even this was getting ignored for some reason!

So, I looked at $ENV:path in the PowerShell loaded in Visual Studio Code, and the $ENV:path in the standard command line PowerShell in Windows, and they were different!

It seems that if you have a terminal open in Visual Studio Code, it remembers the $ENV from that terminal, even if you completely restart Visual Studio Code or even if you reboot your computer.

What worked for me (by accident) is, close all terminal windows (and possibly anything else terminal/PowerShell related that's open) and give it another try!

If it still doesn't work, compare the $ENV:Path values again, and see if they're still different!

III. Practice: Use Visual Studio Code to start an off platform project

As you move through various lessons and paths here on Codecademy, you may find yourself needing to create a project on your own computer and not on the Codecademy learning environment. This can be tricky, but it’s an exciting step that signals that you are ready to work independently.

To do this, we’ll need to use the text editor we installed above. Let’s take a moment to try out Visual Studio Code.

Langkah 1: Download dan Install Visual Studio Code

Sebelum kamu dapat mulai menulis kode HTML, kamu harus memiliki Visual Studio Code di komputer kamu. Kamu bisa mendapatkannya secara gratis dari situs web resmi Microsoft. Setelah mendownload, ikuti saja instruksi yang diberikan untuk menginstall aplikasi ini di komputer kamu.

Langkah 4: Menyimpan dan melihat perubahan

Setiap kali kamu melakukan perubahan pada file HTML kamu, pastikan kamu menyimpan perubahan tersebut dengan memilih File dan klik Save. Untuk melihat perubahan tersebut, kamu bisa membuka file HTML dengan peramban web. Cukup klik kanan file HTML di explorer lalu pilih Open with Live Server.

Itulah cara membuat HTML di Visual Studio Code. Semoga artikel ini membantu kamu untuk memulai pengembangan web menggunakan VS Code. Selamat mencoba!

HTML là gì? Lập trình HTML là gì? Hãy cùng chúng mình tìm hiểu ngay về HTML và cách chạy file HTML trong Visual Studio Code hiệu quả trong bài viết ngay dưới đây các bạn nhé.

HTML (Hypertext Markup Language) là một loại ngôn ngữ đánh dấu siêu văn bản. HTML được tạo ra để xây dựng hoặc cấu trúc lại một website. HTML giúp chúng ta chuyển đổi từ một văn bản bình thường hoặc một file thiết kế thành một trong giao diện website. HTML sẽ quản lý những nội dung này dưới dạng có thẻ với 3 loại cơ bản là:

Hầu hết các trang Web mà bạn đang lướt hàng ngày được bố cục và định dạng bởi HTML. Để học được cách dùng HTML thì các bạn phải sử dụng một trình soạn thảo có tên là Visual Studio Code (sau đây sẽ gọi tắt VSCode). Giao diện của trình soạn thảo nào có dạng như sau:

Bây giờ chúng ta sẽ tạo ra một thư mục trống rồi mở nó lên trong VSCode. Cách tạo rất đơn giản mà bạn nào cũng biết là bấm chuột phải => chọn New Folder => đặt tên cho thư mục rồi bấm Enter. Sau đó các bạn chỉ cần kéo thư mục đã tạo vào VSCode, phần mềm sẽ tự động mở nó lên cho bạn:

Trên đây là những kiến thức cơ bản về HTML và VSCode. Chúng ta sẽ cùng tìm hiểu chi tiết hơn trong phần sau của nội dung bài viết này các bạn nhé.

Xem thêm: Hướng dẫn cách chuyển đổi bảng Excel sang HTML

II. Installing Visual Studio Code

So, we’ve chosen our text editor, now we just need to install it on our computer!

For the visual learners, this video details how to download and install Visual Studio Code. Written instructions are below.

The installation process for computers running macOS, Windows, and Linux, (specifically Ubuntu and Debian), will be very similar and using Visual Studio Code across all of them will be the same.

Visit the Visual Studio Code website to download the latest version of Visual Studio Code.

You should see your computer’s operating system displayed, but if it’s not correct, click on the down arrow and find the option that matches your operating system from the drop down menu and click on the down arrow icon under “Stable.”

Windows users: This will download the latest version of Visual Studio Code as an .exe file.

Mac users: This will download the latest version of Visual Studio Code for Mac as a .zip file.

Linux users: .deb and .rpm are different file types for storing data. We suggest you download the .deb file so auto-updates work as the Visual Studio Code documentation suggests.

Once the Visual Studio Code file is finished downloading, we need to install it. Find the Visual Studio Code file in your file manager, the program that lets you see the files and folders on your computer.

Windows users: Open the .exe file by clicking on it and on run the installer. Keep clicking ‘Next’ and then finally ‘Finish.’

Mac users: The downloaded .zip file should be in your ‘Downloads’ folder. Open the file. If you see this message choose “Open.”

Linux users: The downloaded file should be in your ‘Downloads’ folder.

Find it in your file manager, double click and choose ‘Install’ in the GUI software center, or run the following commands, one at a time, in the terminal:

Make sure you have your Visual Studio Code application saved in a place you know you will easily be able to find it.

Windows users: It will automatically be placed in your Start menu.

Mac users: Click and drag the Visual Studio Code icon from the Downloads folder to the Applications folder.

Linux users: It should appear in your task bar of programs.

That’s it, you’ve successfully installed your text editor and are ready to start coding!

Cách tạo một file trong VSCode

Các bạn nhấp chuột phải vào vùng trống ở trong thư mục mà chúng ta đã đưa vào VSCode. Sau đó các bạn chọn New File:

Tiếp theo chúng ta sẽ đặt tên cho file mới này. Có một số lưu ý về đặt tên các bạn cần nhớ như sau:

Ở đây chúng mình sẽ đặt tên file là "index" với phần đuôi mở rộng là ".html" để máy tính nhận diện được đây là file HTML.

Comment trong file HTML trên VSCode có tác dụng giúp chúng ta ghi chú lại tác dụng của một đoạn code. Để comment được trong file HTML thì các bạn sẽ bôi đen đoạn code, sau đó bấm giữ tổ hợp phím tắt Ctrl + ? nhé. Sau đó các bạn chỉ cần nhập comment vào để phân biệt tác dụng của các đoạn code.

Cách tạo File HTML trong Visual Studio Code

Để tạo cấu trúc một file HTML trong VSCODE, các bạn nhập vào VSCode là "html:5" sau đó bấm phím Tab thì sẽ thấy file hiển thị như sau:

Trong cấu trúc trên các bạn có thể nhìn thấy được cả 3 loại thẻ của HTML là thẻ đi theo cặp đóng - mở, thẻ chỉ mở và thẻ chỉ đóng. Chức năng của các thẻ trong cấu trúc HTML trên cụ thể như sau:

Xem thêm: Hướng dẫn cách chuyển file Word sang HTML đơn giản nhất