24 C
Hanoi
Thứ Năm, Tháng Hai 22, 2024

Thuộc tính trong HTML – HTML Attribute

NEWSThuộc tính trong HTML - HTML Attribute

– Các thuộc tính được dùng để bổ sung thông tin cho các phần tử trong HTML.
– Đặc điểm của thuộc tính HTML:

  • Tất cả các phần tử HTML đều có thuộc tính.
  • Thuộc tính bổ sung thông tin cho phần tử HTML.
  • Thuộc tính thường được chỉ định trong thẻ mở của HTML.
  • Thuộc tính thường đi theo cặp tên – giá trị, ví dụ như tenthuoctinh=”giatrithuoctinh”

1. Thuộc tính href – chỉ định URL của trang mà liên kết chuyển đến.

Đường dẫn trong HTML được xác định bằng thẻ <a> Thuộc tính href chỉ định URL của trang mà liên kết chuyển đến.
Ex:

<a href="https://tonghop.org">Trang tin tổng hợp</a>

2. Thuộc tính src – chỉ định đường dẫn đến hình ảnh

Hình ảnh trong HTML được xác định bằng thẻ <img>. Thuộc tính src chỉ định đường dẫn đến hình ảnh sẽ được hiển thị.
Ex:

<img src="img_tonghop.org.jpg">

Chú ý có 2 cách chỉ định URL – đường dẫn trong thuộc tính src:

  • URL – đường đẫn tuyệt đối – Liên kết đến một hình ảnh bên ngoài được lưu trữ trên một trang web khác.
    Ex:
<img src="https://photos.app.goo.gl/oHrvHQBXtNCkcCcn8">

Lưu ý: Hình ảnh bên ngoài có thể thuộc bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; nó có thể đột ngột bị xóa hoặc thay đổi.

  • URL – đường dẫn tương đối – Liên kết đến một hình ảnh được lưu trữ trong trang web. Ở đây, URL – đường đẫn không bao gồm tên miền. Nếu URL – đường dẫn bắt đầu mà không có dấu gạch chéo, nó sẽ liên quan đến trang hiện tại.
    Ex:
<img src="img_tonghop.org.jpg">

Lưu ý: Hình ảnh được chỉ định với URL – đường dẫn tương đối sẽ được lưu trên sever máy chủ của bạn và bạn hoàn toàn kiểm soát được nó.

3. Thuộc tính chiều rộng và chiều cao – width and height Attributes.

Hình ảnh trong HTML còn có thuộc tính xác định kích thước, chiều rộng và chiều cao.
Ex:

<img src="img_tonghop.org.jpg" width="1024" height="200">

Kích thước ảnh được xác định bằng đơn vị pixel, với chiều cao là 200 pixel và chiều rộng là 1024 pixel. Tìm hiểu sâu về thuộc tính này trong bài sau.

4. Thuộc tính alt.

Thuộc tính alt bắt buộc cho thẻ chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh đó không thể hiển thị vì lý do nào đó. Điều này có thể do kết nối chậm hoặc lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình. Giá trị của thuộc tính này có thể đọc được trên thiết bị đọc màn hình (screen reader). Nhờ vậy, người ta có thể “nghe” được trang web, ví dụ như người khiếm thị có thể “nghe” được phần tử HTML.
Ex:

<img src="img_tonghop.org.jpg" alt="Trang tin tổng hợp">

5. Thuộc tính style – style Attribute

Thuộc tính style được dùng để xác định kiểu cách cho một phần tử, như màu sắc, font chữ, kích thước…
Ex:

<p style="color:red">Cùng học HTML với tonghop.org</p>

6. Thuộc tính lang – lang Attribute.

Khai báo ngôn ngữ của trang Web. Điều này có nghĩa là để hỗ trợ các công cụ tìm kiếm và trình duyệt.. Việc xác định ngôn ngữ là rất quan trọng với các ứng dụng hỗ trợ khả năng truy cập (như screen reader) và các bộ tìm kiếm.
Ex:

<!DOCTYPE html>
<html lang-"en-US">
<body>
...
<p style="color:red">Cùng học HTML với tonghop.org</p>
...
</body>
</html>

Mã quốc gia cũng có thể được thêm vào mã ngôn ngữ trong thuộc tính lang. Vì vậy, hai ký tự đầu tiên xác định ngôn ngữ của trang HTML và hai ký tự cuối cùng xác định quốc gia. Ở ví dụ trên en là mã ngôn ngữ, US là mã quốc gia.

7. Thuộc tính title – title Attribute

Thuộc tính title xác định một số thông tin bổ sung về một phần tử.
Giá trị của thuộc tính title sẽ được hiển thị dưới dạng chú giải công cụ khi bạn di chuột qua văn bản.
Ex:

<h1 title="Kết quả khi bạn để chuột vào đây và đợi chút">hãy để chuột vào đây</h1>
<p title="Đây là nội dung do tonghop.org thực hiện" >Cùng học HTML trên tonghop.org. </p>
<p title='aaaaa "bbbbb" ccccc'> Bạn hãy để chuột vào đây</p>
<p title="aaaaa 'bbbbb' ccccc">Bạn hãy để chuột vào đây</p>

Một vài lưu ý khác
Trong một số trường hợp, khi bản thân giá trị thuộc tính chứa dấu ngoặc kép, cần sử dụng dấu ngoặc đơn thay thế: như ví dụ trên.

Tóm tắt bài học

  1. Thuộc tính href của <a> chỉ định URL của trang mà liên kết chuyển đến.
  2. Thuộc tính src của <img> chỉ định đường dẫn đến hình ảnh sẽ được hiển thị.
  3. Thuộc tính widthheight của <img> cung cấp thông tin kích thước cho hình ảnh.
  4. Thuộc tính alt của <img> cung cấp văn bản thay thế cho hình ảnh.
  5. Thuộc tính style được sử dụng để thêm kiểu vào một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước, v.v.
  6. Thuộc tính lang của thẻ <html> khai báo ngôn ngữ của trang Web.
  7. Thuộc tính title xác định một số thông tin bổ sung về một phần tử

Bài tập thực hành: Điền vào chỗ trống:

1. Điền thẻ thích hợp.
<p …..=”tonghop.org”>tonghop.org is a wedsite.</p>
2. Điền kích thước thích hợp để ảnh hiện thị rộng 1080px, cao 768px.
<img …..=”tonghop.org.jpg” width=”…..” height=”…..“>
3. chỉ định URL của trang mà liên kết chuyển đến.
<a …..“https://www.tonghop.org”>Đây là linh dẫn đến trang chủ của chúng tôi</a>
4. Chỉ định văn bản thay thế.
<img src=”tonghop.org.png” …..=”tonghop.org logo”>
5. Chỉ định văn bản bổ sung.
<p …..=”Bạn suy nghĩ xem”>Nếu để chuột vào đây</p>

Đáp án:

1.title
2.src,1080,768
3.href
4.alt
5.title

BÀI VIẾT MỚI

Cách đăng ký sim giá rẻ LINEMO (LINE) – Mới Nhất

Giới thiệu: Nhà mạng Linemo được đổi tên từ nhà...

Hướng dẫn kiếm tiền từ Google AdSense mới nhất!

Google AdSense là gì? Kiếm tiền online là một từ...

Địa điểm ngắm lá đỏ đẹp nhất ở KANTO- Nhật Bản.

Ai đã từng đặt chân đến Nhật Bản, chắc...

QUẦY TƯ VẤN CHO NGƯỜI NƯỚC NGOÀI TẠI NHẬT BẢN MIỄN PHÍ

Quầy tư vấn cho người nước ngoài tại Nhật...

Tổng hợp sim giá rẻ ở Nhật Bản

Hôm nay mình xin giới thiệu đến các bạn...

Hướng dẫn đăng ký tài khoản Rakuten.

Mục đích đăng ký tài khoản rakuten: Tài khoản rakuten...

Hướng dẫn thủ tục xin miễn giảm thuế cuối năm khi làm việc tại Nhật Bản (Điều chỉnh tiền thuế cuối năm).

Hai khoản thuế này đáng nhẽ ra là từng cá nhân sẽ phải tự kê khai và nộp cho cơ quan thuế, tuy nhiên, đối với các bạn đang đi làm tại các công ty thì thường bộ phận hành chính của công ty sẽ đại diện cho nhân viên của công ty làm các thủ tục thay cho tất cả nhân viên trong đó có bạn.

Dân số Nhật Bản giảm kỷ lục trong 13 năm liên tiếp.

Theo dữ liệu chính thức từ chính phủ Nhật...

7 lễ hội mùa hè Nhật Bản bạn nhất định phải trải nghiệm

   Mùa hè ở Nhật còn được coi là...

Trợ Cấp Nghỉ Phép Chăm Con Sau Sinh ở Nhật Bản

Sau khi sinh con ở Nhật, bạn có thể...

Tiếng Nhật về Mẹ và Trẻ Sơ Sinh

Để các mẹ thuận lợi hơn trong việc sinh...

Tiếng Nhật bệnh hay gặp ở trẻ em

Dưới đây là một số triệu chứng và bệnh...

Tiếng Nhật khi làm thêm ở Combini

Bạn nhận được công việc làm thêm ở Combini,...

Cách ghi tờ khai xuất cảnh tại Nhật

Với những bạn lần đầu về nước từ Nhật,...

Thủ tục xin nhập quốc tịch Nhật

Nhật bản là nước phát triển bậc nhất thế...

ĐƯỢC QUAN TÂM

Thủ tục xin làm thêm 28 tiếng tại Nhật

ĐỐI TƯỢNG: Đối tượng cần làm đơn xin làm thêm...

Đơn xin làm thêm 28 tiếng – Hướng dẫn chi tiết.

ĐỐI TƯỢNG: Đối tượng cần làm đơn xin làm thêm...

Cách đăng ký sim giá rẻ LINEMO (LINE) – Mới Nhất

Giới thiệu: Nhà mạng Linemo được đổi tên từ nhà...

Hướng dẫn kiếm tiền từ Google AdSense mới nhất!

Google AdSense là gì? Kiếm tiền online là một từ...

Địa điểm ngắm lá đỏ đẹp nhất ở KANTO- Nhật Bản.

Ai đã từng đặt chân đến Nhật Bản, chắc...

Hướng dẫn thủ tục xin miễn giảm thuế cuối năm khi làm việc tại Nhật Bản (Điều chỉnh tiền thuế cuối năm).

Hai khoản thuế này đáng nhẽ ra là từng cá nhân sẽ phải tự kê khai và nộp cho cơ quan thuế, tuy nhiên, đối với các bạn đang đi làm tại các công ty thì thường bộ phận hành chính của công ty sẽ đại diện cho nhân viên của công ty làm các thủ tục thay cho tất cả nhân viên trong đó có bạn.

Tổng hợp sim giá rẻ ở Nhật Bản

Hôm nay mình xin giới thiệu đến các bạn...

Hướng dẫn đăng ký tài khoản Rakuten.

Mục đích đăng ký tài khoản rakuten: Tài khoản rakuten...

Cách photo copy giấy tờ 2 mặt tại combini

Tại Nhật, các máy photo copy thường có trong...

Dân số Nhật Bản giảm kỷ lục trong 13 năm liên tiếp.

Theo dữ liệu chính thức từ chính phủ Nhật...