Mới bắt đầu với HTML? . Nếu bạn tìm hiểu cách thức hoạt động của 10 thẻ này thì bạn sẽ có đủ kiến ​​thức để ghép thành một trang cơ bản

Ở cuối hướng dẫn, bạn sẽ tìm thấy mã cho một trang web mẫu bao gồm tất cả 10 thẻ để bạn có thể xem cách sử dụng chúng

Thẻ và các yếu tố

Thẻ HTML là một từ hoặc chữ cái đặc biệt được bao quanh bởi dấu ngoặc nhọn, < và >. Bạn sử dụng thẻ để tạo các thành phần HTML, chẳng hạn như đoạn văn hoặc liên kết

Nhiều phần tử có thẻ mở và thẻ đóng — ví dụ: phần tử (đoạn văn)

1 có thẻ

2, theo sau là văn bản đoạn văn, tiếp theo là thẻ đóng

3

Một số phần tử không có thẻ đóng. Chúng được gọi là các phần tử rỗng. Ví dụ: phần tử

4 để chèn ngắt dòng được viết đơn giản là

5

Nếu bạn đang làm việc với XHTML thì bạn viết các phần tử trống bằng các thẻ tự đóng — ví dụ:

6

Bây giờ hãy xem 10 thẻ đó

1. 7 … 8 — Phần tử gốc

Tất cả các trang web đều bắt đầu bằng phần tử

9. Nó còn được gọi là phần tử gốc vì nó nằm ở phần gốc của cây phần tử tạo nên một trang web

Phần tử

9 nằm ở gốc của cây phần tử trong trang web

Để tạo phần tử

9, bạn viết thẻ mở

7 theo sau là thẻ đóng

8. Mọi thứ khác trong trang web của bạn sẽ nằm giữa 2 thẻ này

3

2. 44 … 45 — Đầu tài liệu

Phần tử

46 chứa thông tin về trang web, trái ngược với nội dung trang web. Có nhiều phần tử mà bạn có thể đặt bên trong phần tử

46, chẳng hạn như

• 48 (mô tả bên dưới)

• 49, mà bạn có thể sử dụng để thêm biểu định kiểu và biểu tượng yêu thích vào trang của mình

• 00, để chỉ định những thứ như bộ ký tự, mô tả trang và từ khóa cho công cụ tìm kiếm

• 01, để thêm mã JavaScript vào trang

Đây là một phần tử

46 điển hình

3. 03 … 04 — Tiêu đề trang

Phần tử

48 chứa tiêu đề của trang. Tiêu đề được hiển thị trong thanh tiêu đề của trình duyệt (thanh ở đầu cửa sổ trình duyệt), cũng như trong dấu trang, kết quả của công cụ tìm kiếm và nhiều nơi khác

Tiêu đề phải mô tả nội dung của trang ngắn gọn và chính xác. Cố gắng cung cấp cho mỗi trang trên trang web của bạn tiêu đề độc đáo của riêng nó

Đây là một ví dụ

4

4. 06 … 07 — Nội dung của trang

Phần tử

08 xuất hiện sau phần tử

46 trong trang. Nó phải chứa tất cả nội dung của trang web của bạn. văn bản, hình ảnh, v.v. Tất cả các trang web có 1 phần tử

08 duy nhất, ngoại trừ các trang bộ khung, thay vào đó chứa các phần tử

31

Đây là định dạng chung của phần tử

08

0

5. 33 … 34 — Tiêu đề phần

Tiêu đề cho phép bạn chia nội dung trang của mình thành các phần có thể đọc được. Chúng hoạt động giống như tiêu đề và tiêu đề phụ trong sách hoặc báo cáo

HTML thực sự hỗ trợ 6 phần tử tiêu đề.

35,

36,

37,

38,

39 và

30. ________ 335 dành cho các tiêu đề quan trọng nhất, ________ 336 dành cho các tiêu đề phụ ít quan trọng hơn, v.v. Thông thường, bạn sẽ không cần sử dụng nhiều hơn

35,

36 và

37, trừ khi trang của bạn rất dài và phức tạp

Đây là một ví dụ về phần tử tiêu đề

35

3

6. 2 … 3 — Một đoạn văn

Phần tử

1 cho phép bạn tạo các đoạn văn bản. Hầu hết các trình duyệt hiển thị các đoạn văn có khoảng cách dọc giữa mỗi đoạn văn, chia nhỏ văn bản một cách độc đáo

Mặc dù bạn có thể tạo các “đoạn” văn bản chỉ bằng cách sử dụng các thẻ

5 để chèn các dòng trống giữa các đoạn văn bản, nhưng tốt hơn hết bạn nên sử dụng các phần tử

1 để thay thế. Nó không chỉ gọn gàng hơn mà còn giúp các trình duyệt, công cụ tìm kiếm và những người không phải con người khác hiểu rõ hơn về cách cấu trúc trang của bạn

Đây là một ví dụ về một đoạn văn

3

Một nguyên tắc nhỏ khi viết văn bản cho web là đảm bảo rằng mỗi đoạn chứa một điểm, chủ đề hoặc ý tưởng. Nếu bạn muốn nói về 2 điều khác nhau, hãy sử dụng 2 đoạn văn

7. 72 … 73 — Một liên kết

Một trong những yếu tố quan trọng nhất trong trang web, yếu tố

74 cho phép bạn tạo liên kết đến nội dung khác. Nội dung có thể trên trang web của riêng bạn hoặc trên trang web khác

Để tạo liên kết, bạn bọc các thẻ

72 và

73 xung quanh nội dung bạn muốn sử dụng cho liên kết và cung cấp URL để liên kết đến trong thuộc tính

78 của thẻ

72

Đây là cách tạo một số văn bản liên kết đến

79

7

8. 60 — Một hình ảnh

Phần tử

61 cho phép bạn chèn hình ảnh vào trang web của mình. Để chèn hình ảnh, trước tiên bạn tải hình ảnh lên máy chủ web của mình, sau đó sử dụng thẻ

60 để tham chiếu tên tệp hình ảnh đã tải lên. Đây là một ví dụ

6

Thuộc tính

63 là bắt buộc đối với tất cả các thẻ

61. Nó được sử dụng bởi các trình duyệt không hiển thị hình ảnh để cung cấp văn bản thay thế cho khách truy cập

Tìm hiểu thêm về cách sử dụng hình ảnh trong các trang web

9. 65 … 66 — Vùng chứa cấp khối cho nội dung

Phần tử

67 là một vùng chứa chung mà bạn có thể sử dụng để thêm nhiều cấu trúc hơn vào nội dung trang của mình. Ví dụ: bạn có thể nhóm một số đoạn văn hoặc tiêu đề phục vụ mục đích tương tự lại với nhau bên trong phần tử

67. Thông thường, các phần tử

67 được sử dụng cho những thứ như

• Đầu trang và chân trang
• Các cột nội dung và thanh bên
• Các hộp được đánh dấu trong luồng văn bản
• Các khu vực của trang có mục đích cụ thể, chẳng hạn như điểm quảng cáo
• Phòng trưng bày hình ảnh

Bằng cách thêm các thuộc tính

70 và/hoặc

71 vào các phần tử

67 của bạn, sau đó bạn có thể sử dụng CSS để định kiểu và định vị các

67. Đây là cơ sở để tạo bố cục trang dựa trên CSS

Đây là một ví dụ sử dụng

67 để chứa nội dung cho thanh bên trong trang

7

10. 75 … 76 — Vùng chứa nội tuyến cho nội dung

Phần tử

77 tương tự như phần tử

67 ở chỗ nó được sử dụng để thêm cấu trúc cho nội dung của bạn. Sự khác biệt là

67 là phần tử cấp khối, trong khi

77 là phần tử nội tuyến

• Các phần tử cấp khối, chẳng hạn như
  67,
  35 và
  1, là các phần tử được thiết kế để chứa các khối nội dung tương đối lớn hoặc độc lập, chẳng hạn như các đoạn văn bản. Phần tử cấp khối luôn bắt đầu trên một dòng mới
• Các phần tử nội tuyến, chẳng hạn như
  77,
  74 và
  61, được thiết kế để chứa các phần nội dung nhỏ hơn — chẳng hạn như một vài từ hoặc một câu — trong một khối nội dung lớn hơn. Việc thêm một phần tử nội tuyến không tạo ra một dòng mới. Các phần tử cấp khối có thể chứa các phần tử nội tuyến, nhưng các phần tử nội tuyến không thể chứa các phần tử cấp khối

Như với một

67, bạn thường thêm một thuộc tính

70 và/hoặc

71 vào một

77 để bạn có thể tạo kiểu cho nó bằng CSS

Ví dụ sau sử dụng các phần tử

77 để chỉ ra tên sản phẩm trong một đoạn văn. Những tên sản phẩm này sau đó có thể được đánh dấu bằng CSS. Một công cụ tìm kiếm tùy chỉnh cũng có thể sử dụng thông tin được cung cấp bởi các phần tử

77 để xác định các sản phẩm trong trang

01

Mang tất cả lại với nhau

Bây giờ bạn đã học được 10 thẻ HTML cơ bản này, hãy kết hợp tất cả chúng lại với nhau trong một trang web

0

Như bạn có thể thấy, bạn có thể xây dựng toàn bộ trang web chỉ bằng 10 thẻ HTML này. Bây giờ bạn đã sẵn sàng để tìm hiểu thêm một số thẻ bằng cách duyệt qua các hướng dẫn HTML khác của chúng tôi. Chúc vui vẻ

10 thẻ HTML cơ bản là gì?

20 thẻ HTML cơ bản là gì?

Đọc tiếp