Bài 3: Phần tử và thẻ (elements, tags)
Ngay bây giờ bạn đã sẳn sàng học bản chất của HTML: các phần tử (elements)
Các phần tử mang lại cấu trúc cho một trang HTML và khai báo với trình duyệt về một website sẽ được trình bày như thế nào. Nói tóm lại phần tử chứa một thẻ mở, chứa nội dung và kết thúc bằng thẻ đóng.
Các phần tử mang lại cấu trúc cho một trang HTML và khai báo với trình duyệt về một website sẽ được trình bày như thế nào. Nói tóm lại phần tử chứa một thẻ mở, chứa nội dung và kết thúc bằng thẻ đóng.
“Thẻ” là gì?
Thẻ là nhãn bạn dùng đánh dấu nơi bắt đầu và kết thúc của một phần tử.
Tất cả các thẻ đều giống nhau ở định dạng bắt đầu bằng ký tự “<” (giống ký hiệu nhỏ hơn trong toán học) và kế thúc bằng dấu “>“. (giống ký hiệu lớn hơn trong toán học)
Nói chung, có hai loại thẻ – thẻ mở như: <html> và thẻ đóng như : </html>. Sự khác nhau của 2 thẻ này chính là dấu “/“. Nội dung của một phần tử sẽ được đặt giữa thẻ mở và thẻ đóng.
HTML chính là các thẻ. Học HTML chính là học cách sử dụng các loại thẻ khác nhau.
Các ví dụ
Phần tử
em
– được dùng để trình bày cho các chữ nghiêng. Tất cả những chữ trong giữa thẻ mở <em>
và thẻ đóng </em>
đều sẽ là chữ nghiêng. (“em” viết tắt của từ “emphasis” – chữ nghiêng.)
Ví dụ 1:
- <em>Đoạn chữ nghiêng</em>
Bạn sẽ nhìn thấy đoạn chữ trên ở trình duyệt như thế này:
Đoạn chữ nghiêng.
Các phần tử
h1
, h2
, h3
, h4
, h5
và h6
được dùng làm tiêu đề (h là đại diện của chữ “heading” – tiêu đề), Nếu h1
là tiêu đề chính cấp 1 có chữ to nhất, thì h2
is sẽ là tiêu đề phụ cấp 2 sẽ có chữ nhỏ hơn, và tương tự h6
là tiêu đề có cấp cuối cùng và chữ nhỏ nhất.
Ví dụ 2:
- <h1>Đây là tiêu đề chính</h1>
- <h2>Đây là tiêu đề phụ</h2>
Bạn sẽ nhìn thấy trên trình duyệt như thế này:
Đây là tiêu đề chính
Đây là tiêu đề phụ
Vậy có phải tôi cần phải luôn sử dụng thẻ mở và thẻ đóng cho một phần tử HTML?
Có một số trường hợp ngoại lệ, một số phần tử không tuân theo luật HTML là phải có thẻ mở và đóng. Những phần tử này được gọi là phần tử rỗng và không liên hệ bất cứ đoạn chữ nào mà chỉ là một nhãn độc lập, ví dụ để xuống hàng một đoạn chữ, người ta sử dụng thẻ <br />, hay tạo một đường gạch ngang trang trí: <hr />
Thẻ (Tag) nên được gõ là chữ IN HOA hay chữ thường?
Đa số các trình duyệt không phân biệt chữ IN HOA hay chữ thường, <HTML>, <html> hoặc <HtMl> sẽ có kết quả giống như nhau. Tuy nhiên, cách viết đúng là nên gõ code HTML với dạng chữ thường, vậy bạn hãy tập thói quen sử dụng chữ thường trong khi viết code HTML nhé.
Tôi phải đặt tất cả thẻ vào đâu?
Bạn gõ các thẻ vào một trong một trang HTML. Một website có thể có một hay nhiều trang HTML. Khi bạn lướt Web, bạn sẽ mở nhiều trang HTML khác nhau.
Nếu bạn tiếp tục xem bài kế tiếp trong 10 phút, bạn sẽ tự tay tạo được một website.
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
- Bài 1: Nhập môn
Tìm hiểu những công cụ cần thiết khi làm web. - Bài 2: HTML là gì?
Tìm hiểu về HTML - Bài 3: Phần tử và thẻ – Elements and tags?
Phần tử và thẻ – làm thế nào để sử dụng chúng - Bài 4: Tạo trang web
Bài học cách tạo ra trang HTML đầu tiên – trang mẫu để tạo ra các trang khác sau này - Bài 5: Bạn đã được học những gì?
Ôn tập những gì đã học và xem trước các bài kế tiếp - Bài 6: Thêm một vài phần tử
Làm quen với 6 phần tử HTML thường được sử dụng - Bài 7: Thuộc tính
Học cách thêm những thông tin vào thẻ và x6y dựng câu lệnh chính xác hơn - Bài 8: Liên kết
Khám phá các liên kết các trang web của bạn và các trang ở web khác trên internet. - Bài 9: Hình ảnh
Khám phá việc chèn ảnh vào trang web. - Bài 10: Tạo bảng – Tables
Cấu trúc bảng để dàn trang web. - Bài 11: Tìm hiểu thêm về bảng – table
Học nâng cao cấu trúc bảng – table - Bài 12: Dàn trang (CSS)
Tìm hiểu làm thế nào Cascading Style Sheets (CSS) có thể giúp dàn trang thú vị hơn. - Bài 13: Đưa trang web lên internet
Khám phá làm cách nào để đưa trang web lên internet để ai cũng có thể xem - Bài 14: Những tiêu chuẩn cho Web và xác nhận
Học các tiêu chuẩn HTML thông dụng và cách kiểm tra code có được viêt đúng không - Bài 15: Những lời khuyên sau cùng
Một vài lời khuyên bổ ích cho những dự án về web của bạn