Home » Lập trình » [HTMl Tutorial] Bài 4: Những thẻ thuộc nhóm inline

[HTMl Tutorial] Bài 4: Những thẻ thuộc nhóm inline

Thẻ Inline là gì?

Khi sử dụng các thẻ inline, trình duyệt sẽ sắp xếp các thẻ liền kề nhau theo chiều ngang, thẻ nào code trước xuất hiện trước, thẻ nào code sau xuất hiện sau.

Ví dụ:

Kết quả thu được:

HTML_Bai_4_Nhom_Cac_The_Inline_Picture_01

Nhận xét:

  • Bản thân text cũng có thể coi thuộc nhóm inline.
  • Những thẻ thuộc nhóm inline nên được bao ngoài bởi nhóm các thẻ block, vì các thẻ block sẽ lo nhiệm vụ dàn trang web, còn các thẻ thuộc nhóm inline chỉ để hiển thị nội dung cho văn bản.

Các thẻ inline tiêu biểu:

Thẻ liên kết:

Thẻ liên kết <a></a> dùng để tạo một liên kết từ trang web này sang trang web khác, từ vị trí này sang vị trí khác hay

dùng để mở ra một object nào đó (có thể là file words, excel, pdf, mp3, movie,…),thẻ này có một thuộc tính bắt buộc:

  • href: Chứa đường dẫn cụ thể tới mục tiêu liên kết.

Ví dụ:

Kết quả:

HTML_Bai_4_Nhom_Cac_The_Inline_Picture_02

 

Thẻ hiển thị hình ảnh:

Thẻ hiển thị một hình ảnh <img /> dùng để nhúng một ảnh vào trang html. Thẻ <img/> có 2 thuộc tính bắt buộc:

  • src: Chứa đường dẫn tham chiếu tới image.
  • alt: Được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc không có sẵn).

Lưu ý: thẻ hình ảnh là thẻ đơn với cấu trúc là <img/>, không dùng dạng <img>…</img>

Ví dụ:

Kết quả thu được:

HTML_Bai_4_Nhom_Cac_The_Inline_Picture_03

 Thẻ ngắt đoạn văn bản:

Thẻ ngắt đoạn văn bản <br /> dùng để xuống dòng văn bản trong cùng một đoạn văn.

Ví dụ:

Kết quả:

HTML_Bai_4_Nhom_Cac_The_Inline_Picture_04

Thẻ nhóm các inline:

Thẻ nhóm các inline <span></span> dùng để nhóm một hay nhiều thẻ inline khác nhau, thẻ này không có ý nghĩa về mặt hiển thị, chỉ hỗ trợ định dạng các inline thông qua CSS hoặc Javascript.

Ví dụ: ta tiến hành viết một đoạn mã HTML có CSS cơ bản. Đoạn CSS này sẽ làm cho chữ có màu đỏ.

Kết quả thu được:

HTML_Bai_4_Nhom_Cac_The_Inline_Picture_05

 

Share
Share
Free WordPress Themes - Download High-quality Templates