programming html

Thẻ block trong HTML

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:

Nếu nói về các thuộc tính CSS cho việc trang trí văn bản thì cũng chỉ có các thuộc tính mà bạn đã xem ở hai phần trước. Nhưng một cái khó nhất trong CSS đó là sử dụng kỹ thuật CSS Layout như thế nào cho chính xác để lên bố cục giao diện website của mình, và đây là bài quan trọng nên đọc trước khi tìm hiểu kỹ thuật CSS Layout mà mình sẽ hướng dẫn sau này.

CSS Layout là thuật ngữ chỉ chung về việc dựng bố cục cho website dựa trên việc sử dụng và tùy biến các khối, phần tử.

Để dễ dàng hơn để sau này khi tìm hiểu về các kỹ thuật nâng cao, thì việc bạn cần làm bây giờ là nên hiểu thế nào là Block, thế nào là Inline. Đây là hai thuật ngữ rất thường sử dụng trong CSS, từ việc đọc các bài hướng dẫn đến việc tìm kiếm giải pháp trên Internet.

See the Pen jEjzJQ by Thach Pham [@thachpham92] on CodePen.

Block là gì?

Phần tử khối [Block Elements] là thuật ngữ chỉ chung các thẻ HTML có chức năng tạo một khu vực hay nói dễ nghe xíu là một khối. Khối này có nghĩa là một thẻ khi mà bạn khai báo thì nó sẽ được hiển thị ở mỗi dòng riêng biệt bao gồm các nội dung nằm bên trong. Ở các bài học HTML cơ bản bạn có thể đã biết qua một số thẻ block cơ bản như

,