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.
What are ‘text editors’?
Text editors, also called code editors, are applications used by developers to write code. They can highlight and format your code so that it’s easier to read and understand. If you’ve used Codecademy, you’re already familiar with a text editor. It’s the area you write your code in.
Using a text editor is part of creating your “development environment,” the set of tools that you use for working on coding projects. It will allow you to take what you’ve learned on Codecademy and put it into practice as you work on projects on your computer. Not only will this introduce you to tools that are commonly used by professional developers but it also means that you’ve grown as a developer and are ready to start working on your own—great work!
Specific to writing code, text editors provide a number of advantages:
You may also have read or heard about IDEs, or “integrated development editors.” An IDE allows you to not only edit, but also compile, and debug your code through one application or interface. While the text editor we recommend isn’t considered an IDE, it has many IDE-like features that make life as a developer easier without needing a lot of resources that an IDE usually requires. The best of both worlds!
Đừng mở file HTML, hãy làm quen với Workspace
Phần này quan trọng, anh em đừng bỏ qua. Đối với Visual Studio Code, workspare là nơi chứa các project với các thiết lập tương ứng. Khi lập trình web bằng VSCode, anh em vẫn có thể mở file HTML và edit. Nhưng sẽ không thể dùng các tính năng như gợi ý file, css, js; Cũng như tạo server ảo để test web như bên dưới bài viết này. Chi tiết anh em có thể đọc ở bày bài viết sau: Workspace VSCode. Còn đơn giản chỉ cần nhớ:
Hãy mở folder chứa code bằng VSCode.
CSS IntelliSense – Gợi ý code cho CSS
Có thể nói, những tính năng sẵn có của Visual Studio Code đã hỗ trợ gần như tận răng cho anh em lập trình web. Thế nhưng CSS lại không được hỗ trợ tính năng gợi ý code. Do vậy, khi làm việc với CSS thì không được tiện lợi cho lắm. Một file CSS thường có rất nhiều class/id. Chẳng ai có thể nhớ hết tên class/id trong đó được. Nhất là khi ta làm việc với bộ CSS Framework lớn như Bootstrap thì thôi nhé, không có gợi ý code thì ngồi nhớ class đến sang năm luôn đi ạ.
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
Visual Studio Code (VS Code) menjadi pilihan populer bagi pengembang web karena mudah digunakan dan banyak fitur mendukung. Pada artikel ini, kita akan membahas bagaimana kamu bisa mulai membuat kode HTML di VS Code. Langkah-langkah yang akan dijelaskan pun cukup mudah dipahami, bahkan bagi para pemula.
Cách chạy file HTML trên trình duyệt
Trước khi chạy file thì các bạn phải bấm tổ hợp phím tắt Ctrl + S trong VSCode để lưu lại những đoạn code mới.
Để mở một file HTML trên trình duyệt thì các bạn đi đến thư mục chứa file đó mà chúng ta đã tạo ban đầu => nhấp chuột phải vào tên file => chọn Open With => chọn Choose another app.
Sau đó các bạn chọn trình duyệt mà mình muốn sử dụng => tích vào ô "Always use this app to open .html files". Thao tác này có nghĩa là sau này tất cả file có đuôi dạng .html sẽ được mở trên trình duyệt bạn đã chọn.
Có một cách chạy file khác là chúng ta sẽ chạy luôn trên VSCode. Tuy nhiên, chúng ta sẽ cần cài đặt một tiện ích mở rộng hay còn gọi Extension. Đây là những tiện ích có sẵn trong VSCode, các bạn chỉ cần cài đặt thôi nhé. Trên giao diện làm việc của VSCode, các bạn bấm vào biểu tượng của Extension như trong hình ảnh dưới đây hoặc bấm tổ hợp phím tắt Ctrl + Shift + X.
Sau đó các bạn nhập vào thanh tìm kiếm một tiện ích tên là "View in browser". Các bạn chỉ cần kích chuột vào tiện ích đó là nó sẽ được cài đặt tự động.
Để chạy thử file HTML trên trình duyệt ngay trong VSCode thì các bạn đến phần lưu file => bấm chuột phải vào file => chọn View in Browser hoặc bấm tổ hợp phím tắt Ctrl + F1 là file sẽ được tự động mở lên trong trình duyệt.
Các bạn làm theo cách tương tự để cài một tiện ích khác là tên là: Auto Rename Tag. Tiện ích này có tác dụng giúp bạn sửa thẻ đóng tự động khi bạn đã sửa thẻ mở trong một cặp thẻ đóng - mở. Khi đã cài đặt xong thì các bạn có thẻ tắt thẻ Extension đi để chúng chạy thử.
Xem thêm: Cách sử dụng hàm importHTML để chuyển một bảng từ trang web HTML sang Google Sheets
Như vậy, chúng mình đã giới thiệu HTML là gì? đồng thời hướng dẫn các bạn về cấu trúc của một file HTML, cách tạo file HTML trong Visual Studio Code và chạy HTML trên VSCode. Hy vọng bài viết này sẽ hữu ích với bạn trong quá trình làm quen với HTML.
Để được học về HTML một cách đầy đủ và chuyên sâu hơn thì các bạn hãy tham gia khóa học:
Nhập môn HTML cùng chuyên gia Nguyễn Đình Nam
Khóa học phù hợp với các bạn đang tìm hiểu về lập trình web với ngôn ngữ HTML và CSS. Sau khi hoàn thành tất cả bài học, các bạn sẽ nắm chắc được bản chất và cách thực hoạt động của HTML. Đồng thời, các bạn có thể ứng dụng kiến thức được học về các thẻ tag cơ bản trong HTML để xây dựng bộ khung cho website. Trong quá trình học, các bạn có thể trao đổi về vấn đề chưa hiểu với chuyên gia ngay trong phần Hỏi - Đáp dưới video bài giảng. Mọi thắc mắc sẽ được phản hồi trong vòng 24h các bạn nhé. Chúc các bạn học tập hiệu quả.
In this article, we will go over the steps necessary to download a popular text editor called Visual Studio Code, also referred to as “VS Code.” By the end of the article you will be able to create a folder in Visual Studio Code that contains an HTML document that you can open in your web browser.
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.
Visual Studio Code đã hỗ trợ sẵn cho HTML, CSS và JavaScript
Một trong các tính năng của VSCode hấp dẫn các Web Developer đó là hỗ trợ các ngôn ngữ HTML, CSS và JS mặc định mà không cần phải cài thêm thứ gì. Các tính năng cơ bản có thể nói đến như là: Workspace, Xyntax Highlighting, Language Intellisense, Code Formatting, Emmet,…
Mặc dù Visual Studio Code đã hỗ trợ sẵn cho bộ ba ngôn ngữ trùm sò trong lập trình web. Thế nhưng chúng ta có thể tối ưu cách làm việc bằng cách sử dụng thêm một số extension và nắm thêm một số quy ước trong xây dựng project.
Thông tin về Workspace và cách tạo workspace trong VSCode. Mình hay mở workspace bằng cách chuột phải vào folder chứa project, sau đó nhấn chọn Open with Code
What is Workspace in VSCode
Hướng dẫn config cụ thể cho JavaScript trên trang chủ của VSCode: JavaScript in Visual Studio Code.
Cho thanh niên nào muốn try-hard JavaScript: JavaScript extensions in Visual Studio Code
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.
