Tiếp nối các bài học trước, ngày hôm nay chúng ta sẽ cùng nhau tìm hiểu các khái niệm cơ bản trong HTML để làm nền tảng trước khi bước sang phần CSS của Series Xây dựng và thiết kế Website cho người mới bắt đầu. Trong bài học này chúng ta sẽ cùng nhau tìm hiểu cách comment trong HTML, các thuộc tính ID, class,... Nào bắt đầu thôi!
1. Cách viết ghi chú cho đoạn code của bạn
Ghi chú hay comment là một phần không thể thiếu của bất kì dự án nào đặc biệt là những dự án lớn thì comment lại càng quan trọng. Ghi chú giúp các lập trình viên hiểu rõ ý nghĩa của đoạn code và từ đó giúp các lập trình viên về sau có thể bảo dưỡng, nâng cấp một cách dễ dàng. Vậy cách ghi chú trong HTML thế nào? Để ghi chú trong HTML chúng ta viết nội dung ghi chú như sau:
Tất nhiên nội dung trong phần ghi chú sẽ không hiển thị trên trình duyệt mà nó chỉ hiển thị ở mã nguồn của trang.
2. Thuộc tính ID
Thuộc tính id dùng để đặt tên cho một phần tử trong HTML, mỗi thuộc tính id là duy nhất trong một file HTML nào đó.
Quy tắc đặt tên: Giá trị của ID bao gồm các ký tự chữ cái, số, gạch dưới [_], gạch nối [-]; có phân biệt chữ hoa và chữ thường. Trong giá trị id phải chứa ít nhất một ký tự và không có khoảng trắng. Không nên bắt đầu tên id bằng số hay kí tự đặc biệt nào khác. Ví dụ:
Thẻ Form HTMLĐoạn văn thứ nhất
Đoạn văn thứ hai
Đoạn văn thứ 3
Kết quả:
Trong đoạn mã ở trên đoạn văn có thuộc tính id="page" được viết hoa bằng cách sử dụng CSS. Tất nhiên nếu bạn chỉ chạy đoạn mã HTML trên thì sẽ không ra được kết quả như trên bởi bạn sẽ cần thêm CSS cho nó thông qua thuộc tính id. Bạn có thể nhận thấy rằng thuộc tính id là duy nhất giúp nó phân biệt với các đoạn văn khác do đó ta có thể dễ dàng tùy chỉnh từng đoạn văn, câu từ nhỏ mà không làm ảnh hưởng đến bố cục chung.
3. Thuộc tính class
Thuộc tính class dùng để đặt tên cho các phần tử trong html, mỗi thuộc tính class có thể chỉ định cho nhiều phần tử HTML giúp các phần tử HTML đó có cùng định dạng khi dùng CSS, JavaScript... Class cũng có quy tắc đặt tên giống id đó là: Tên class bao gồm các ký tự chữ cái, số, gạch dưới [_], gạch nối [-]; có phân biệt chữ hoa và chữ thường. Trong giá trị id phải chứa ít nhất một ký tự và không có khoảng trắng. Không nên bắt đầu tên id bằng số hay kí tự đặc biệt nào khác. Ví dụ:
Thẻ Form HTMLĐoạn văn thứ nhất
Đoạn văn thứ 2
Đoạn văn thứ 3
Khác với id, mọi phần tử HTML đều có thể cùng mang một thuộc tính class. Chính vì vậy khi sử dụng CSS cho class="page" thì đoạn văn thứ 2 và 3 sẽ cho ra cùng một kết quả giống nhau.
Từ 2 ví dụ trên ta có thể thấy rằng một HTML element chỉ có thể có duy nhất một id và id này thuộc sở hữu duy nhất bởi element đó mà thôi. Trong khi đó class có thể được chia sẻ bởi nhiều elements khác nhau.
4. Block elements và inline elements
Mọi HTML elements đều có giá trị hiển thị mặc định [ block và inline ]tùy thuộc vào loại elements đó.
Một phần tử HTML block-level element luôn luôn bắt đầu từ một dòng mới và kéo dài đến hết chiều rộng của trang web.
Ví dụ sử dụng thẻ div để hiển thị theo dạng block
Các thẻ hiển thi theo dạng block là:
Inline
Một phần tử HTML inline-level element không bắt đầu trên một dòng mới và chỉ chiếm độ rộng cần thiết để hiển thị.
Ví dụ sử dụng thẻ span để hiển thị theo dạng inline
Các thẻ hiển thi theo dạng block là:
5. Cách nhúng một trang web bằng iframe
Iframe giống như một cửa sổ nhỏ đã được cắt vào trang của bạn - và trong cửa sổ đó, bạn có thể thấy một trang khác [Nhúng]. Một cách sử dụng phổ biến của iframe [mà bạn có thể đã thấy trên các trang web khác nhau] là nhúng Bản đồ Google. Nội dung của iframe có thể là bất kỳ trang html nào [nằm trên cùng một máy chủ hoặc bất kỳ nơi nào khác trên web]. iframe được tạo bằng thẻbao một số thuộc tính sau:
Trong bài viết trước Taimienphi.vn đã giới thiệu cho bạn về danh sách [list] trong HTML. Bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về phần tử block trong HTML.
Các phần tử HTML được phân làm 2 loại: Block Element [phần tử khối] và Inline Element [phần tử nội tuyến]. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết phần tử block trong HTML.
Phần tử block trong HTML
1. Phần tử block trong HTML
1.1 Phần tử khối [Block Element] trong HTML
Một phần tử khối [block element] thường bắt đầu trên dòng mới và chiếm toàn bộ chiều rộng có sẵn.
Phần tử div là một phần tử khối.
Ví dụ: ví dụ dưới đây minh họa phần tử khối trong HTML:
Kết quả trả về sau khi áp dụng phần tử khối có dạng như dưới đây:
Dưới đây là danh sách các phần tử khối trong HTML:
1.2 Phần tử nội tuyến [Inline Element] trong HTML
Phần tử nội tuyến [Inline Element] trong HTML không bắt đầu bằng dòng mới và chỉ chiếm chiều rộng vừa đủ.
Ví dụ: tham khảo ví dụ dưới đây để tìm hiểu về phần tử nội tuyến [Inline Element] trong HTML:
Kết quả trả về sau khi áp dụng phần tử nội tuyến có dạng như dưới đây:
Dưới đây là bảng danh sách các phần tử nội tuyến trong HTML:
1.3 Phần tử div trong HTML
Phần tử div trong HTML thường được sử dụng để chứa các phần tử HTML khác.
Phần tử div không yêu cầu các thuộc tính, tuy nhiên style, class và id là các thuộc tính phổ biến.
Khi được sử dụng cùng CSS, phần tử div có thể được sử dụng để chỉ định kiểu block [khối] cho nội dung.
Ví dụ: tham khảo ví dụ minh họa dưới đây để dễ hình dung về phần tử div trong HTML:
Kết quả trả về sau khi áp dụng phần tử div có dạng như dưới đây:
1.4 Phần tử span trong HTML
Phân tử span trong HTML thường được sử dụng làm phần tử chứa văn bản [text].
Phần tử span không yêu cầu các thuộc tính, tuy nhiên style, class và id là các thuộc tính phổ biến.
Khi được sử dụng cùng CSS, phần tử span có thể được sử dụng để chỉ định kiểu cho các phần của văn bản.
Ví dụ: dưới đây là ví dụ minh họa phần tử span trong HTML:
Kết quả trả về sau khi áp dụng phần tử span có dạng như dưới đây:
2. Tổng kết
Dưới đây là bảng danh sách các thẻ trong HTML:
//thuthuat.taimienphi.vn/phan-tu-block-trong-html-50635n.aspx
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về phần tử block [khối] trong HTML. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết để có được câu tả lời và học HTML tốt hơn nhé. Trong các bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính class trong HTML nhé.