HTML

Cách tạo file HTML và thẻ cơ bản trong HTLM

Ở bài này mình sẽ hướng dẫn cho các bạn một số thẻ cơ bản của HTML đồng thời chúng ta sẽ xây dựng một trang HTML để bạn có thể ghi nhớ và tiếp thu một cách tốt nhất. Vậy nên bạn hãy bật phần mềm Notepad ++ cũng làm theo mình nào.

Hướng dẫn tạo tập tin HTML

Đầu tiên các bạn hãy click vào phần mềm Notepad++ để bắt đầu tạo tập tin HTML.

html1

Đây là giao diện của Notepad++ sau khi các bạn bật lên, bạn hãy click vào File >> Save as như hình để lưu tập tin.

html 2

Ở đây các bạn hãy đặt tên cho tập tin của mình với File name bạn đặt là index ( cái này bạn có thể đặt tên tùy ý mình nhé ) và Save as typer các bạn chọn là Hyper Text Markup Language file như hình nhé.

html 3

Sau khi nhập xong bạn ấn Save để lưu lại nhé.

Các thẻ cơ bản của HTML

Trong HTML có 3 thẻ cơ bản không thể thiếu được là thẻ html, thẻ Header và thẻ Body. Mỗi thẻ sẽ giữ một vai trò khác nhau để tạo lên một trang HTML hoàn trỉnh.

1. Thẻ khởi tạo HTML

Để các code HTML có thể hoạt động thì chúng ta cần khởi tạo thẻ html , thẻ này khá quan trọng vì không có thẻ này thì code HTML sẽ không thể hiển thị. Thẻ này có cứ pháp như sau:

 <html>

</html> 

Trong đó thẻ mở là <html> sau đó kết thúc một thẻ bằng thẻ </html>, bạn phải mở thẻ trước trước khi đóng thẻ nếu không sẽ bị lỗi. Code html các bạn sẽ viết ở bên trong thẻ này, các mã viết bên ngoài 2 thẻ này sẽ không hoạt động.

2. Thẻ Header

Thẻ này sử dụng để chứa nội dung tiêu đề của một trang Web, thẻ này nằm trong thẻ html.

 <html>


<header>

</header>


</html> 

Thẻ này cúng ta cũng sử dụng các thẻ mở là <herder> và thẻ đóng là </header>, các thẻ tiêu đề sẽ nằm trong thẻ này. Trong thẻ này sẽ chứa 2 thẻ cơ bản để khai báo thông tin website cơ bản.

2.1 Thẻ Title

Thẻ này nằm trong thẻ Header, có tác dụng hiển thị tiêu đề của trang.

 <html>

<header>

<title> Tieu de web</title>

</header>


</html> 

Tiêu đề trang sẽ là đoạn văn bản lằm trong thẻ mở title là <title> và thẻ đóng là </title>.

Bạn hãy cick vào File >> Save để lưu lại đoạn mã trân rồi đến file html mà bạn click đúp vào file đó rồi chọn 1 trình duyệt web bất kì để xem nhé. Và nó sẽ hiển thì như hình mình sau:

html 4

Phần mình khoanh đỏ đó là phần tiêu đề mà chúng ta đã tạo ra bằng thẻ title.

2.2 Thẻ Meta

Thẻ meta là một thẻ đặc biệt vì nó không có thẻ đóng như các thẻ khác, thẻ này sẽ không sử dụng thẻ mở và đóng mà sử dụng cứ pháp khai báo.  Thẻ này dùng để khai báo kiểu dữ liệu vix mô của trang web như mô tả, tên tác gải, bảng kí tự sử dụng …. . Cứ pháp là:

 <meta "Thuộc tính" = " Giá trị của thuộc tính " > 

Giá trị thuộc tính luôn đi kèm với Thuộc tính, mình sẽ giới thiệu cho các bạn một số thuộc tính và giá trị thộc tính cơ bản và ví dụ minh họa.

Thuộc tính charset

Thuộc tính này sử dụng để khai báo thông tin kiểu ký tự sử dụng trên trang web của bạn. Nếu không khai báo thẻ này thì bạn chỉ có thể hiển thị được các kí tụ số và chữ cái tiếng anh thôi. Còn bạn muốn hiển thị ngôn ngữ tiếng việt hãy các ngôn ngữ khác trên trang của mình bạn có thể sử dụng UTF-8 . Cứ pháp khai báo là:

 <meta charset="utf-8" /> 

Thuộc tính name

Đối với thuộc tính name thì thẻ meta của bạn phải có hai thuộc tính, đó là thuộc tính name và content, trong đó thuộc tính content được xem là thiết lập nội dung cho thuộc tính name.

Ví dụ:

 <meta name="author" content=" David Loi " /> 

Trong đó, giá trị của thuộc tính name là một giá trị có sẵn vì hiện tại thuộc tính name hỗ trợ một số giá trị như:

  • author: Khai báo tên tác giả của tài liệu.
  • description: Khai báo mô tả của tài liệu.
  • keyword: Khai báo từ khóa của tài liệu, các từ khóa này sẽ đóng vai trò hỗ trợ các trình tìm kiếm văn bản hoặc máy tìm kiếm website dò tìm.

Đó là các giá trị quan trọng thường dùng, ngoài ra còn một số giá trị khác như:

  • application-name: Tên ứng dụng đại diện của tài liệu web.
  • generator: Khai báo tên ứng dụng tạo ra tài liệu.

4.  Thẻ Body

Thẻ Body chính là thẻ sẽ chứa phần nội dung của một trang Web, thẻ này lằm trong thẻ html và lằm bên ngoài thẻ header, chính xác là lằm sau thẻ header. Thẻ này sẽ chứa các thẻ hiển thị nội dung như thẻ P ( thẻ hiển thị văn bản ), thẻ H ( thẻ hiển thị tiêu đề ), thẻ ảnh ( thẻ hiển thị hình anhr0, thẻ URL ( thẻ hiển thị link ) …. . Các thẻ này sẽ được mình hướng dẫn chi tiết ở bài sau. Còn đây là cứ pháp khai báo thẻ Body:

 <html>

<header>

<title> Tieu de web</title>

</header>


<body>

</body>

</html> 

Thẻ này khai báo cũng tương tự các thẻ khác , có thẻ mở là <body> và kết thúc bằng thẻ đóng </body>.

Kết: Ở bài này mình đã hướng dẫn cho các bạn các tạo một tập tin HTML và giới thiệu cho các bạn các thẻ cơ bản trong HTML. Trong các bài tiếp theo mình sẽ giới thiệu chi tiết các thẻ lằm bên trong các thẻ này cũng như công dụng của chúng. Phần nào chưa hiểu các bạn có thể để lại bình luận để mình giải đáp nhé.

About the author

David Lợi

Tôi là Lợi . Tôi học tất cả mọi thứ và chia sẻ những gì tôi học được đến tất cả mọi người. Hãy ủng hộ tôi nếu bạn tin tôi và tin vào khả năng của bạn. Tôi sẽ giúp bạn và tôi thành công!

Leave a Comment