Bài 1: Sơ lược về HTML

Cập nhật lần cuối vào ngày 23/11/2024

Khi bắt đầu làm quen với lập trình web thì HTML chính là nội dung đầu tiên mà bạn phải học, sau đó bạn sẽ kết hợp với CSS để tạo ra những sản phảm rất là độc đáo.

1. HTML là gì?

HTML là chữ viết tắt của HyperText Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản. Nó dùng để định dạng bố cục, các thuộc tính liên quan đến cách hiển thị của một đoạn text và được hiển thị trên một chương trình đặc biệc ta gọi là Browser.

2. Bố cục HTML của một trang web

Thông thường bổ cục HTML của một website sẽ có dạng như sau:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head> 
<body>
  <h1>My First Heading</h1> 
  <p>My first paragraph.</p>
</body>
</html>


Giải thích:

  • <!DOCTYPE html>Khai báo đây là một trang HTML
  • <html>Phần tử là phần tử gốc của một trang HTML
  • <head>Phần tử chứa thông tin meta về trang HTML
  • <title>Phần tử chỉ định tiêu đề cho trang HTML (được hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang)
  • <body>Phần tử xác định phần thân của tài liệu và là vùng chứa cho tất cả nội dung hiển thị, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách, v.v.
  • <h1>Phần tử xác định một tiêu đề lớn (h1, h2, h3, h4, …)
  • <p>Phần tử xác định một đoạn văn

3. Vị trí

Các vị trí thường thấy trong giao diện website:

  • Header: Đầu trang (cố định)
  • Footer: Chân trang (cố định)
  • Menu: Danh mục (cố định)
  • Sidebar (có một số trang không có)
  • Content: Nội dung (cố định)

4. Cách sử dụng

Phần tử HTML được xác định bởi thẻ bắt đầu, một số nội dungthẻ kết thúc, 3 thẻ này thường đi song hành với nhau, một số không cần thẻ nội dung hoặc không cần thẻ kết thúc thì vẫn hiển thị được như thẻ img.

Cấu trúc:

<mở thẻ>nội dung...</đóng thẻ>

Ta có thể xem ví dụ sau:

<h1>Tiêu đề lớn</h1>
<p>Nội dung đoạn văn.</p>
Thẻ mở Nội dung Thẻ đóng
<h1> Tiêu đề lớn </h1>
<p> Nội dung đoạn văn </p>
<br> không có không có

Bình luận