Tìm hiểu cách tạo tệp HTML hoặc trang web trên máy tính của riêng bạn và mở tệp bằng trình duyệt web. Với mã ví dụ.

Bạn đang xem : cách tạo tệp .html

Thời gian học dự kiến:

12

phút

Giờ chúng tôi đã bắt đầu hướng dẫn HTML cho người mới bắt đầu và đã có những kiến ​​thức cơ bản, đã đến lúc tạo tệp HTML. Mặc dù chúng ta đã thấy một trang HTML hoàn chỉnh trong phần giới thiệu, nhưng bạn vẫn chưa tự tạo một trang. Trong bài viết này, bạn sẽ tạo tệp HTML trên máy tính của riêng mình và mở tệp đó bằng trình duyệt web. Đây sẽ là trang web tự làm đầu tiên của bạn. Hãy bắt đầu!

Phần mềm tạo tệp HTML

Bước đầu tiên là tạo một tệp trên máy tính của bạn với phần mở rộng .html . Điều quan trọng là sử dụng đúng công cụ cho công việc này. Bạn không thể sử dụng trình xử lý văn bản, như OpenOffice hoặc Microsoft Word để tạo tệp HTML. Các chương trình như vậy có ngôn ngữ đánh dấu riêng được thêm vào tài liệu.

Thay vào đó, thứ bạn cần là thứ có thể chỉnh sửa các tệp văn bản thuần túy. Tốt hơn là bạn sử dụng thứ gì đó được thiết kế riêng để viết HTML. Các trình chỉnh sửa HTML cụ thể giúp bạn theo một số cách:

  • Họ cung cấp tính năng tự động thụt lề, giúp tài liệu của bạn dễ đọc hơn nhiều.
  • Với tính năng tự động hoàn thành, bạn phải nhập ít hơn. Ví dụ: các trình chỉnh sửa HTML thường sẽ tự động thêm thẻ đóng.

Mã Visual Studio

Có một số tùy chọn để lựa chọn, và chủ yếu là vấn đề sở thích hoặc sở thích cá nhân. Vì tôi không thể trình bày hết tất cả chúng và chúng ta phải bắt đầu với một cái gì đó, tôi sẽ sử dụng những gì tôi nghĩ là tốt nhất và đó là một ứng dụng có tên là VSCode. Tôi muốn bạn bắt đầu với VSCode vì một số lý do:

  • Tải xuống miễn phí và dựa trên mã nguồn mở.
  • Nó hoạt động trên các nền tảng lớn: Windows, MacOS và Linux (thậm chí có một phiên bản dựa trên trình duyệt hạn chế).
  • Nó khá nhẹ nhưng vẫn cung cấp nhiều tính năng.
  • Có vô số plugin giúp bạn phát triển trang web nhanh hơn.
  • Nó cũng hỗ trợ CSS và JavaScript , bạn sẽ học được sau khi học HTML. Trên thực tế, phần mềm này hỗ trợ khá nhiều ngôn ngữ lập trình hiện có thông qua các plugin.
  • Được tạo và hỗ trợ bởi Microsoft, vì vậy, không có khả năng phần mềm sớm bị bỏ rơi.

Để có chuyến tham quan chi tiết về VSCode, tốt nhất bạn nên đi đường vòng một chút đến trang web chị em của tôi, Python Land, nơi tôi đã giới thiệu rộng rãi về công cụ này. Tôi khuyến khích bạn đọc các bài viết sau đây:

Rõ ràng, bạn có thể bỏ qua nội dung dành riêng cho Python, nhưng hầu hết đó là thông tin chung cũng áp dụng cho bạn. Khi bạn đã cài đặt và chạy VSCode, chúng ta có thể tiếp tục.

Xin lưu ý rằng, mặc dù có nhiều tiện ích mở rộng HTML cho VSCode, chúng tôi không cần những tiện ích mở rộng này ngay bây giờ. VSCode tự nó là quá đủ và nó giúp giữ cho giao diện sạch sẽ và cơ bản trong khi bạn đã có rất nhiều thứ để học.

Tạo một tệp HTML trong VSCode

Một cửa sổ VSCode luôn hiển thị một không gian làm việc. Đến lượt mình, một không gian làm việc có thể hiển thị nhiều thư mục (hoặc: dự án) nếu bạn muốn. Đổi lại, bạn có thể mở nhiều không gian làm việc, mỗi không gian trong một cửa sổ riêng của nó. Tuy nhiên, chúng tôi sẽ làm việc trên một dự án tại một thời điểm. Khi làm như vậy, một cửa sổ với một không gian làm việc là đủ.

Tạo dự án

Tạo một dự án rất đơn giản; đó là một thư mục mà bạn mở bằng VSCode. Nếu bạn đang sử dụng thiết bị đầu cuối và không thành vấn đề nếu đây là trên Linux, MacOS hay Windows, bạn có thể tạo một dự án mới và mở nó bằng VSCode như sau:

 $ mkdir wd_land_html_tutorial
$ cd wd_land_html_tutorial
$ code. 

Mã lệnh là một phím tắt tiện dụng để mở cửa sổ VSCode. Nếu muốn, bạn cũng có thể mở (và tạo) thư mục từ trình đơn: File - & gt; Mở thư mục .

Khi dự án được mở, hãy tạo một tệp mới với nút tệp mới. Nó có thể bị ẩn, nhưng nó sẽ xuất hiện khi bạn di chuột qua tên dự án trong cửa sổ khám phá:

Tạo tệp mới bằng nút tệp mới

​​Đặt tên tệp là my-first-page.html hoặc tên khác nếu bạn muốn . Chỉ cần đảm bảo thêm phần mở rộng .HTML để VSCode trực tiếp biết rằng đây là một tệp HTML.

Thật vui khi biết rằng bạn đã làm rất nhiều hệ thống ống nước cho đến nay. Luôn mất một khoảng thời gian để thiết lập đúng cách, nhưng sau khi hoàn thành và không hiệu quả, bạn sẽ làm việc hiệu quả hơn nhiều. Và hãy tin tôi rằng, với VSCode, bạn có một công cụ tuyệt vời để sử dụng. Nó được sử dụng để tạo ra nhiều phần mềm, ứng dụng và trang web mà bạn biết và yêu thích.

Nhập HTML

Cuối cùng, chúng ta có thể bắt đầu nhập trang HTML thực. Tôi sẽ liệt kê những gì bạn phải nhập bên dưới, nhưng điều quan trọng là bạn phải tự nhập các thẻ thực tế. Bạn sẽ cảm nhận được cách thức hoạt động của trình chỉnh sửa và giúp bạn trong khi làm như vậy. Và, quan trọng hơn, bạn sẽ làm quen nhiều hơn với ngôn ngữ HTML và các thẻ của nó.

Đây là trang web đầu tiên của bạn và vui lòng sửa đổi nó theo ý thích của bạn:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; Trang web đầu tiên của tôi & lt; / title & gt;
  & lt; / head & gt;

  & lt; body & gt;
    & lt; h1 & gt; Hello world & lt; / h1 & gt;
    & lt; p & gt; Đây là trang web đầu tiên của tôi. Bạn thế nào? & Lt; / p & gt;
    & lt; h2 & gt; Đây là tiêu đề phụ & lt; / h2 & gt;
    & lt; p & gt; Và đây là một số văn bản khác. & lt; / p & gt;
  & lt; / body & gt;
& lt; / html & gt; 

Nếu bạn làm theo lời khuyên của tôi, hẳn bạn đã nhận thấy VSCode đã giúp bạn như thế nào bằng cách tự động chèn thẻ đóng và tự động thụt lề mã của bạn.

Một gợi ý mà tôi muốn chia sẻ ngay với bạn là cách định dạng tài liệu HTML của bạn theo cách thủ công. Thử xóa một số thụt lề bên trong tệp của bạn, sau đó nhấn shift + alt + F . Bạn có nhận thấy rằng VSCode đã sửa định dạng không?

Cuối cùng, lưu tệp. Bạn có thể làm như vậy bằng menu tệp hoặc bằng cách nhấn control + F ( cmd + F trên MacOS).

Mở tệp HTML trong trình duyệt

< / h2>

Bây giờ đã đến lúc mở tệp trong trình duyệt của bạn và xem kết quả của tất cả lao động này! Có hai cách để giải quyết vấn đề này.

  1. Bạn có thể đi tới thư mục của dự án và nhấp đúp vào tệp my-first-page.html .
  2. Nhấn control + O (Windows, Linux) hoặc cmd + O (MacOS) để mở tệp và duyệt đến tệp my-first-page.html . Tôi đã thử nghiệm lối tắt này trên Firefox, Edge và Chrome.

Kết quả cuối cùng sẽ giống như sau:

Tệp HTML chúng tôi đã tạo, hiển thị trong trình duyệt Firefox Trang web đầu tiên của bạn, được hiển thị ở đây trong Firefox.

Như bạn có thể thấy, tiêu đề (giữa các thẻ tiêu đề) được hiển thị dưới dạng tiêu đề của tab trình duyệt . Trình duyệt cũng sử dụng nó khi ai đó đánh dấu trang của bạn.

Xin chúc mừng thành tích này! Đó là một chút công việc, nhưng luôn khó để bắt đầu với một cái gì đó mới. Bạn đã mở đường để tìm hiểu thêm các thẻ HTML và bắt đầu tự mình thử nghiệm. Vì vậy, hãy tiếp tục với bài viết tiếp theo, nơi bạn sẽ tìm hiểu một số thẻ quan trọng nhất.


Xem thêm những thông tin liên quan đến chủ đề cách tạo tệp .html

Chapter 2: How to create a HTML file on Visual Studio Code

alt

  • Tác giả: AskLixi
  • Ngày đăng: 2020-08-02
  • Đánh giá: 4 ⭐ ( 4965 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Here is a quick tutorial in how to create a html file on visual studio code. To learn how to install visual studio code you can watch this video:

    https://www.youtube.com/watch?v=xj8wHhqwQ0s

    Remember to subscribe to my channel and give this video a thumbs up if you liked it!

    asklixi

Cách để Tạo một trang web đơn giản với HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 1065 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Tạo một trang web đơn giản với HTML. Đây là bài viết hướng dẫn cách tạo một trang web đơn giản với HTML (ngôn ngữ đánh dấu siêu văn bản). HTML là một trong những thành phần cốt lõi của mạng lưới toàn cầu World Wide Web và tạo nên…

Cách tạo một trang web HTML

  • Tác giả: webcoban.vn
  • Đánh giá: 4 ⭐ ( 9217 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tạo một trang web HTML

Tạo và hiển thị file HTML

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 9628 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo và hiển thị file HTML giúp bạn cách tạo file như thế nào và làm sao để hiển thị file đó.

Hướng dẫn tạo và mở file HTML đơn giản nhất

  • Tác giả: lar.edu.vn
  • Đánh giá: 5 ⭐ ( 8964 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Việc tạo và mở một file HTML khá đơn giản vì nó là một ngôn ngữ quan trọng nhất trong thời đại ngày nay

Thiết kế website bằng HTML và CSS

  • Tác giả: final-blade.com
  • Đánh giá: 5 ⭐ ( 6589 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Lập trình web với Visual Studio Code: HTML, CSS, JavaScript – Blog Hiếu Đá

  • Tác giả: sangtaotrongtamtay.vn
  • Đánh giá: 5 ⭐ ( 2147 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thực ra, Visual Studio Code đã tương hỗ sẵn một số ít tính năng so với HTML, CSS và Javascript. Nhưng trong bài viết này, mình sẽ hướng dẫn thiết lập và sử

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách kiểm tra website chuẩn responsive - kiểm tra responsive

By ads_php