Bài này tôi sẽ hướng dẫn cho các bạn cách thêm thuộc tính vào một số phần tử trong HTML hay nói cách khác thuộc tính cung cấp thông tin bổ sung về các phần tử trong HTML. Trong bài viết này ngoài các ví dụ về thuộc tính trong HTML còn có các bài tập về thuộc tính trong HTML.
1. Thuộc tính (Attributes) trong HTML là gì?
– Tất cả các phần tử HTML có thể có thuộc tính
– Thuộc tính cung cấp thông tin bổ sung về một phần tử
– Thuộc tính luôn được đặt trong thẻ mở và theo sau là dấu = cùng chi tiết nằm giữa cặp ngoặc kép, dấu chấm phẩy sẽ dùng để tách các nội dung thuộc tính.
2. Những phần tử nào có thể sử dụng thuộc tính (Attributes)?
Hầu hết các phần tử đều có thể sử dụng thuộc tính. Nhưng cũng có một số ngoại lệ ví dụ thẻ <br> (bởi vì sự ngắt dòng hầu như không cần có thêm bất cứ tham số nào để điều chỉnh)
Một phần tử có thể chứa một hay nhiều loại thuộc tính khác nhau.
Bạn có thể tìm hiểu thêm tại trang http://ift.tt/2vlvoO7
3. Trong một phần tử có bao nhiêu thành phần?
Nói một cách tổng quát thì trong một phần tử có: một thẻ mở có chứa hoặc không chứa một hay nhiều thuộc tính, một số nội dung và thẻ đóng.
3.1 Cấu trúc phần tử thông thường
Để cho các bạn dễ hiểu tôi sẽ ví dụ và giải thích cụ thể như hình bên dưới
3.2 Cấu trúc phần tử đơn với một thẻ duy nhất
Cũng như trên để các bạn dễ hiểu tôi sẽ ví dụ và giải thích cụ thể như hình bên dưới
4. Các lời khuyên hữu ích
Các Tên thuộc tính nói riêng cũng như các Thẻ trong HTML các bạn nên viết chữ thường ví dụ như nên viết là title thay vì TITLE
Giá trị thuộc tính các bạn luôn nên để trong dấu “”
Ví dụ cho các lời khuyên trên:
<p title=”bổ sung thêm thông tin vào phần nội dung”>Đây là thẻ để xác định đoạn văn.</p>
Giải thích ví dụ trên:
Cặp thẻ <p> </p> và Tên thuộc tính title đều được viết bằng chữ thường
Giá trị thuộc tính (bổ sung thêm thông tin vào phần nội dung) được đặt trong dấu “”
5. Các thuộc tính (Attributes) thường được sử dụng
5.1 Thuộc tính lang
Thuộc tính này tôi đã giới thiệu cho các bạn trong bài [Học HTML] Cấu trúc một tập tin Web bằng HTML nhưng vì bài này cũng liên quan đến nó nên tôi viết lại ở đây.
Ngôn ngữ của tập tin được khai báo trong thẻ <html>
Ngôn ngữ được khai báo với thuộc tính lang (language)
Việc xác định một ngôn ngữ rất quan trọng đối với các ứng dụng khả năng truy cập (trình đọc màn hình) và công cụ tìm kiếm như google chẳng hạn.
<!DOCTYPE html> <html lang="vi"> <head> <title>Đây là tiêu đề Website</title> </head> <body> <h1>Đây là tiêu đề bài viết</h1> <p>Đây là đoạn văn bản.</p> <p>Đây là đoạn văn khác.</p> </body> </html>
Như ví dụ trên bạn thấy <html lang=”vi”> có nghĩa là tôi thêm thuộc tính lang với giá trị là “vi” Giá trị “vi” này để trình duyệt hiểu rằng bạn đang viết ngôn ngữ là Tiếng Việt, ngoài ra còn có nhiều giá trị khác bạn có thể tham khảo tại http://ift.tt/1CkqZs2
5.2 Thuộc tính title
Ở đây, một thuộc tính title được thêm vào phần tử <p>. Giá trị của thuộc tính title sẽ được hiển thị như một chú giải khi bạn di chuột qua đoạn văn như hình dưới
5.3 Thuộc tính href
Liên kết (links) HTML được định nghĩa bằng thẻ <a>. Địa chỉ liên kết được chỉ định trong thuộc tính href.
Để các bạn dễ hiểu tôi sẽ ví dụ như hình dưới
Như hình trên bạn chỉ bấm vào chữ Đây là một liên kết thì nó sẽ di chuyển đến địa chỉ http://binhnet.com
Bạn sẽ tìm hiểu thêm về các liên kết (links) và thẻ <a> trong các bài hướng dẫn sau này.
5.4 Thuộc tính về kích thước (width và height)
Hình ảnh (images) HTML được định nghĩa bằng thẻ <img>.
Tên tập tin của nguồn (src), kích thước của hình ảnh width (chiều rộng) và height (chiều cao) đều được cung cấp dưới dạng các thuộc tính. ví dụ như ở dưới
<!DOCTYPE html> <html> <body> <img src="binhnet.jpg" width="640" height="90"> </body> </html>
Kích thước hình ảnh được xác định bằng đơn vị pixel. Như ví dụ trên width = “640” có nghĩa là 640 pixel chiều rộng của hình ảnh. Ở đây tôi đề cập thêm rằng thuộc tính src (source) dùng để chỉ định URL (địa chỉ web) cho một hình ảnh (images)
Bạn sẽ tìm hiểu thêm về hình ảnh (images) và thẻ <img> trong các bài viết sau này.
5.5 Thuộc tính alt
Thuộc tính alt (alternative) dùng để chỉ định một văn bản thay thế cho một hình ảnh, khi hình ảnh không thể được hiển thị. Nói cách khác là khi bạn tìm kiếm hình ảnh trên google bạn chỉ cần gõ tên nhưng google vẫn hiểu đó là nhờ thuộc tính alt (alternative) này. Ví dụ cách dùng như bên dưới
<!DOCTYPE html> <html> <body> <img src="binhnet.jpg" alt="binhnet.com" width="640" height="90"> </body> </html>
5.6 Các thuộc tính thường được sử dụng khác (disabled, id, style)
| Thuộc tính | Mô tả |
| disabled | Chỉ định rằng một phần tử đầu vào phải được vô hiệu hóa |
| id | Chỉ định một id duy nhất cho một phần tử |
| style | Chỉ định một kiểu CSS nội tuyến cho một phần tử |
Ngoài các thuộc tính mà tôi đã nêu ở trên còn nhiều thuộc tính khác nếu bạn muốn tìm hiểu thêm có thể vào trang http://ift.tt/2vlnCUg
6. Tóm tắt các điều cần nhớ của bài viết này
– Tất cả các phần tử HTML có thể có thuộc tính
– Thuộc tính title cung cấp thêm thông tin (chú giải của một đoạn văn nào đó)
– Thuộc tính href cung cấp thông tin địa chỉ cho các liên kết
– Thuộc tính width (chiều rộng) và height (chiều cao) cung cấp thông tin kích thước cho hình ảnh
– Thuộc tính alt cung cấp văn bản cho trình đọc màn hình (quan trọng đối với các công cụ tìm kiếm)
– Các tên thuộc tính cũng như các thẻ trong html nên được viết bằng chữ thường
– Các giá trị thuộc tính luôn nằm trong dấu ngoặc kép
7. Lời cuối bài
Đầu tiên tôi định viết bài này kèm theo phần bài tập ở bên dưới, nhưng khi viết đến đây thì tôi thấy bài này đã khá dài nên tôi sẽ viết phần bài tập ở phần tiếp theo với tiêu đề Các bài tập về thuộc tính (Attributes) trong HTML
The post [HTML bài 6] Phần lý thuyết và các ví dụ về thuộc tính (Attributes) trong HTML appeared first on Học online.
from WordPress http://ift.tt/2w9DFpe
via IFTTT
Không có nhận xét nào:
Đăng nhận xét