Tôi có thể tạo tệp HTML ở đâu?

Các tệp HTML xác định cấu trúc của một trang web. Vì vậy, để tạo một trang web, bước đầu tiên là viết tệp HTML cho nó. Trong bài viết này, bạn sẽ học cách tạo một tệp HTML từ đầu

Chính xác tài liệu HTML là gì

Tài liệu HTML là một tệp văn bản thuần túy có phần mở rộng là

Copy

     
          My Website Title
     
     
          Hello World
     
9 hoặc
CopyHello World
0. Hầu như không có sự khác biệt giữa hai loại này, nhưng
Copy

     
          My Website Title
     
     
          Hello World
     
9 phổ biến hơn

Tệp văn bản này chứa thông tin mà trình duyệt sử dụng để tạo cấu trúc của trang web

Công cụ chúng tôi cần

Bây giờ câu hỏi đặt ra là chúng ta cần công cụ nào để tạo tệp HTML

Cách dễ nhất là sử dụng trình soạn thảo văn bản thuần túy, chẳng hạn như trình soạn thảo văn bản mặc định của hệ điều hành của bạn

Các IDE và trình soạn thảo văn bản nâng cao như Visual Studio Code, Sublime, Atom hoặc Bracket có thể giúp bạn đưa ra các đề xuất cú pháp và đánh dấu lỗi. Bạn có thể sử dụng chúng để viết và quản lý mã HTML phức tạp

Các trình soạn thảo văn bản nâng cao này được tải xuống và sử dụng miễn phí, đồng thời chúng có sẵn cho tất cả các hệ điều hành phổ biến như Windows, Linux và macOS

Các bước để tạo một tài liệu HTML

Bây giờ chúng ta hãy làm bẩn tay. Hãy tạo một tài liệu HTML đơn giản

Các bước thực hiện như sau

  • Khởi chạy trình soạn thảo văn bản bạn chọn và tạo một tài liệu văn bản thuần túy mới
  • Đặt một số thẻ HTML trong đó. Nếu bạn không quen với cú pháp HTML, bạn có thể sao chép-dán mã bên dưới vào tài liệu trống mới của mình. Chúng ta sẽ tìm hiểu về các thẻ sau. Bây giờ, hãy tập trung vào việc tạo tài liệu


<html>
  <head>
		<title> A Sample Webpage title>
  head>
  
  <body>
     <p> Hello World! p>
  body>
html>

  • Khi bạn đã viết xong mã, đã đến lúc lưu tài liệu. Trong khi lưu tài liệu, bạn có thể đặt bất kỳ tên nào, cung cấp
    Copy
    
         
              My Website Title
         
         
              Hello World
         
    
    9 hoặc
    CopyHello World
    0 dưới dạng phần mở rộng và
    CopyHello World
    4 dưới dạng hệ thống mã hóa ký tự (nếu được hỏi)

Xác minh tài liệu HTML bằng trình duyệt

Sau khi lưu tệp, chúng tôi có thể xác minh rằng nó hoạt động

Điều hướng đến vị trí mà bạn đã lưu tệp. Khi bạn xác định vị trí tệp, hãy nhấp đúp vào tệp đó để mở trình duyệt web mặc định của hệ điều hành của bạn

Kết quả là bạn sẽ thấy một trang đen có tiêu đề

CopyHello World
5 và một đoạn duy nhất
CopyHello World
6 trong đó

Cảm ơn vì đã đọc

Đó là tất cả về việc tạo một tệp HTML. Bây giờ bạn có thể bắt đầu tìm hiểu về các thẻ và thuộc tính HTML khác nhau mà chúng tôi có thể sử dụng trong tài liệu HTML

HTML là ngôn ngữ đánh dấu mà trình duyệt sử dụng để xác định cách hiển thị trang web. Bằng cách học HTML, bạn sẽ có thể viết mã mô tả giao diện của trang web mà bạn đang cố gắng xây dựng

Tất cả mã HTML này sẽ được chứa bên trong tệp

Copy

     
          My Website Title
     
     
          Hello World
     
9. Đây là bất kỳ tệp nào có phần mở rộng
Copy

     
          My Website Title
     
     
          Hello World
     
9. Hầu hết các trình soạn thảo văn bản mà bạn đã quen sử dụng rất có thể sẽ không thể lưu tệp ở định dạng
Copy

     
          My Website Title
     
     
          Hello World
     
9. Do đó, điều đầu tiên tôi khuyên bạn nên làm là tải xuống một IDE hỗ trợ HTML. Xem bài học trước để biết phần giới thiệu đầy đủ về cách thực hiện việc này

Khi bạn đã thiết lập IDE của mình, chúng tôi có thể bắt đầu tạo tệp HTML đầu tiên của mình

Trang web đầu tiên của bạn

Khi chúng tôi làm việc với HTML, chúng tôi đang tạo các trang web. Tài liệu HTML được trình duyệt web đọc và xử lý. Để tạo một trang web được tổ chức hợp lý, chúng tôi muốn đảm bảo rằng tất cả các tệp HTML chúng tôi tạo đều nằm trong cùng một thư mục

Hãy bắt đầu bằng cách tạo một thư mục trống cho tất cả các tệp HTML của chúng ta trong khóa học. Bạn có thể gọi nó là gì bạn muốn, hầu hết mọi người sẽ đặt tên giống như trang web của họ

Bây giờ chúng ta có một thư mục trống, chúng ta có thể tạo tệp HTML của mình. Nếu IDE của bạn hỗ trợ nó, tôi khuyên bạn nên thêm thư mục mới này vào trình khám phá tệp hoặc không gian làm việc của IDE. Điều này sẽ giúp bạn dễ dàng xem những gì đang diễn ra mà không phải rời khỏi trình chỉnh sửa

Tạo chỉ mục. html

Bên trong thư mục mới, tạo một tệp có tên

Copy

     
          My Website Title
     
     
          Hello World
     
0.
Copy

     
          My Website Title
     
     
          Hello World
     
0 là một tên tệp đặc biệt cho biết đây là trang web mặc định cho thư mục này của trang web của chúng tôi

Giống như hầu hết mọi người tổ chức các tệp của họ thành các thư mục và thư mục con, các trang web cũng được tổ chức theo cách tương tự. Khi trang web của bạn được điều hành bởi trình duyệt, nó sẽ sử dụng thư mục của tệp HTML để xác định URL của trang web. URL này liên quan đến hệ thống tệp cục bộ hoặc trang web được lưu trữ của bạn

Bây giờ chúng ta đã tạo tệp của mình, hãy thêm một số văn bản vào đó và kiểm tra nó trên trình duyệt. Bên trong

Copy

     
          My Website Title
     
     
          Hello World
     
0 loại
Copy

     
          My Website Title
     
     
          Hello World
     
0

CopyHello World

Đây là hình thức cơ bản nhất mà một trang web có thể thực hiện, chỉ một số văn bản thuần túy được viết ra

Bây giờ hãy tìm

Copy

     
          My Website Title
     
     
          Hello World
     
0 trong hệ thống tệp của bạn và mở nó bằng trình duyệt của bạn. Cần có một tùy chọn để thực hiện việc này và thường theo mặc định. các tệp html sẽ mở trong trình duyệt của bạn nếu bạn nhấp đúp vào chúng

Khi trang tải trên trình duyệt, nó sẽ hiển thị _____ 10

Tôi có thể tạo tệp HTML ở đâu?

Tin hay không tùy bạn, bạn vừa mới tạo trang web đầu tiên của mình. Nó thực sự cơ bản và chỉ có một vài từ trên đó, nhưng nó vẫn là một trang web và bạn đã thực hiện bước đầu tiên để trở thành một nhà phát triển web

Thẻ

Mặc dù trang web hiện tại của chúng tôi rất ấn tượng theo đúng nghĩa của nó, nhưng về mặt kỹ thuật, nó không phải là một tài liệu HTML có cấu trúc phù hợp. Tất cả các tài liệu HTML được yêu cầu phải được cấu trúc theo một cách nhất định để đảm bảo rằng chúng sẽ hiển thị chính xác trong tất cả các phiên bản khác nhau của các trình duyệt khác nhau

Tài liệu HTML của chúng tôi, chỉ có văn bản thuần túy, sẽ hiển thị tốt, nhưng nếu chúng tôi cố gắng làm bất kỳ điều gì phức tạp hơn, chúng tôi sẽ gặp rủi ro khiến một số trình duyệt cũ không hiểu trang

Để làm cho tài liệu này trở thành một tài liệu HTML thích hợp, hãy định dạng nó một cách chính xác

Copy

     
          My Website Title
     
     
          Hello World
     

Hãy xem tài liệu HTML được cập nhật ở trên. Điều này hiện được cấu trúc chính xác và mọi trình duyệt đều có thể hiểu được

Bây giờ, suy nghĩ đầu tiên của bạn rất có thể là Những thứ < /> kỳ lạ đó là gì. Đó là một suy nghĩ hay, nếu đây là lần đầu tiên bạn nhìn thấy mã HTML thì bạn sẽ tự hỏi chúng là gì

Những biểu tượng có dấu hiệu

Copy

     
          My Website Title
     
     
          Hello World
     
3 và
Copy

     
          My Website Title
     
     
          Hello World
     
4 được gọi là thẻ. Các thẻ HTML được sử dụng để cấu trúc và định dạng tài liệu HTML và có thể được sử dụng để mô tả bố cục của trang web

Tất cả nội dung trong trang web của chúng tôi sẽ được chứa trong các thẻ này. Có hàng trăm thẻ HTML, mặc dù may mắn là hầu hết thời gian bạn có thể sử dụng được mà chỉ cần biết 10-15 thẻ trong số đó. Tất cả các thẻ đều có tên liên kết với chúng và tùy thuộc vào những gì bạn đang cố gắng hiển thị trên trang web, bạn sẽ sử dụng một thẻ khác

Thẻ vùng chứa so với thẻ không phải vùng chứa

Có hai loại thẻ cơ bản trong HTML, thẻ chứa và thẻ không chứa

Thẻ vùng chứa bao gồm hai thẻ đi cùng nhau, thẻ mở và thẻ đóng. Trong ví dụ trên, chúng tôi có một loạt các thẻ vùng chứa. Hãy xem các thẻ

Copy

     
          My Website Title
     
     
          Hello World
     
5 và bạn sẽ biết được cách chúng hoạt động

Tất cả các thẻ bao gồm một

Copy

     
          My Website Title
     
     
          Hello World
     
6, với tên của thẻ được in ở giữa. Các thẻ kết thúc đặc biệt vì chúng chứa một
Copy

     
          My Website Title
     
     
          Hello World
     
7 ngay trước tên của thẻ (như bạn có thể thấy trong
Copy

     
          My Website Title
     
     
          Hello World
     
8)

Thẻ vùng chứa đóng gói các thẻ khác và văn bản thuần túy. Thẻ vùng chứa cũng có thể lồng vào nhau, nghĩa là bạn có thể có một thẻ vùng chứa trong một thẻ vùng chứa khác. Việc lồng nhau này nhường chỗ cho các mối quan hệ cha mẹ và con cái. Nói chung, thẻ vùng chứa html có thể có thẻ cha và cả thẻ con

Tiếp theo là các thẻ không chứa (đôi khi tôi gọi các thẻ đơn này). Đây là những thẻ không có thành phần bắt đầu và kết thúc, thay vào đó chúng chỉ là một cấu trúc

Copy

     
          My Website Title
     
     
          Hello World
     
9 duy nhất. Các thẻ này sẽ có dấu gạch chéo lên ngay bên cạnh dấu lớn hơn ở bên phải

Trong đoạn mã trên, chúng tôi không có bất kỳ thẻ không phải vùng chứa nào (chúng hiếm gặp hơn), nhưng chúng tôi sẽ xem xét một loạt chúng trong suốt khóa học

Học Mã

Bây giờ chúng ta đã biết thêm một số điều về thẻ, hãy chia nhỏ chương trình html ở trên và xem nó đang làm gì. Chúng ta sẽ bắt đầu với dòng đầu tiên

Copy

     
          My Website Title
     
     
          Hello World
     
2

Đây là khai báo DOCTYPE. Về mặt kỹ thuật, đây không phải là một thẻ HTML, mà là một tuyên bố cho trình duyệt web biết loại tệp này là gì. Trình duyệt sẽ thấy điều này và biết để coi tệp là tài liệu HTML

Sau khi khai báo doctype, chúng ta có thể đặt tất cả HTML của mình

Copy

     
          My Website Title
     
     
          Hello World
     
3

Đây là cấu trúc cơ bản nhất mà chúng ta có thể có trong HTML. Tất cả các tài liệu HTML được đóng gói bởi một bộ gồm 120 thẻ ________. Chúng hoạt động như một trình bao bọc cho toàn bộ tài liệu

Bên trong các thẻ

Copy

     
          My Website Title
     
     
          Hello World
     
21 này, chúng tôi có hai bộ thẻ vùng chứa riêng biệt. Các thẻ
Copy

     
          My Website Title
     
     
          Hello World
     
22 và thẻ
Copy

     
          My Website Title
     
     
          Hello World
     
23

Các thẻ đầu về cơ bản là các cài đặt cho tài liệu HTML của bạn. Tại đây, chúng tôi có thể đặt tất cả các loại thẻ đặc biệt sẽ giúp định cấu hình và cung cấp siêu dữ liệu về chính tài liệu html. Ở trên, chúng tôi có một số thẻ

Copy

     
          My Website Title
     
     
          Hello World
     
24. Những cái này chỉ định tên của trang web và bất cứ thứ gì ở đây sẽ hiển thị trong tab của trang

Không có gì bạn đặt trong thẻ đầu sẽ hiển thị trong tài liệu html thực tế. Như tôi đã nói, phần này chủ yếu dành cho trình duyệt và những thứ như công cụ tìm kiếm sử dụng để tìm hiểu về tệp html của bạn

Bên dưới các thẻ đầu, chúng tôi có các thẻ cơ thể. Bên trong các thẻ này, chúng tôi sẽ đặt tất cả nội dung sẽ xuất hiện trên trang web

Hiện tại, tất cả những gì chúng tôi có là văn bản Hello World, nhưng cuối cùng chúng tôi sẽ tìm hiểu thêm một số thẻ cho phép chúng tôi kiểm soát nhiều hơn cách sắp xếp và hiển thị nội dung này trên trang

Thực hiện thay đổi

Bây giờ bạn đã mở

Copy

     
          My Website Title
     
     
          Hello World
     
0 trên trình duyệt của mình, bất cứ khi nào bạn muốn thay đổi điều gì đó, bạn chỉ cần thực hiện thay đổi trong trình soạn thảo văn bản của mình, sau đó làm mới trang web trên trình duyệt

Rất nhiều lần các nhà phát triển sẽ chia màn hình của họ giữa trình soạn thảo văn bản và trình duyệt để họ không phải liên tục chuyển đổi giữa các màn hình. Khi bạn bắt đầu viết nhiều HTML hơn, bạn sẽ tìm thấy những gì phù hợp với mình, nhưng trong thời gian đó, nó đáng để thử

Bạn có thể tạo tệp HTML trong Microsoft Word không?

Bạn có thể sử dụng Microsoft Word để chuyển đổi các tài liệu hiện có sang định dạng HTML . Sử dụng tùy chọn “Save as Web Page” để tạo tài liệu cho web.

Tôi có thể viết mã HTML miễn phí ở đâu?

Trình chỉnh sửa HTML miễn phí tốt nhất năm 2022 .
Sổ tay ++
Văn bản tuyệt vời
Mã phòng thu trực quan
Adobe Dreamweaver CC
Froala
Tách cà phê

Tôi có thể tìm tệp HTML ở đâu?

HTML. Xem tệp HTML .
khởi động trình duyệt của bạn
trong menu "Tệp", nhấp vào "Mở trang".
trong hộp mới này, nhấp vào "Chọn tệp" (nếu bạn không thể điền trực tiếp vị trí của tệp)
khi tìm thấy tệp (trong cửa sổ "Trình duyệt tệp"), hãy nhấp vào "OK"