Chúng ta đã sử dụng các thẻ này chỉ với các tác dụng đơn giản nhất của các thẻ, nhưng hầu hết các thẻ HTML có thể cũng có các thuộc tính hay các đặc trưng, mà có thể cung cấp cho chúng t
Trang 1Các thuộc tính trong HTML
Chúng ta đã tìm hiểu một số thẻ HTML và cách sử dụng của nó như các thẻ <h1>, <h2>, thẻ đoạn văn <p> và các thẻ khác Chúng ta đã sử dụng các thẻ này chỉ với các tác dụng đơn giản nhất của các thẻ, nhưng hầu hết các thẻ HTML có thể cũng có các thuộc tính hay các đặc trưng, mà có thể cung cấp cho chúng ta thêm một số tác dụng hữu ích khác (chẳng hạn như định dạng, style, )
Một thuộc tính được sử dụng để xác định đặc trưng của một phần tử HTML và được đặt
trong một thẻ mở của phần tử đó Tất cả các thuộc tính được chia thành 2 phần : tên và một giá trị:
• Tên là tên của thuộc tính Ví dụ, phần tử đoạn văn <p> trong ví dụ dưới mang một thuộc tính tên có tên là align, và bạn có thể sử dụng thuộc tính này để căn chỉnh
của đoạn văn trong một trang
• Giá trị là những gì mà bạn muốn gán thuộc tính và được đặt trong các trích dẫn Ví
dụ dưới chỉ 3 giá trị có thể của thuộc tính align: left, center, và right
Tên thuộc tính và giá trị thuộc tính là không phân biệt chữ hoa và chữ thường Tuy nhiên, W3C đề nghị thuộc tính chữ thường và thuộc tính giá trị trong phiên bản HTML 4 đã giới thiệu Ví dụ:
Ví dụ
<!DOCTYPE html> <html> <head> <title>Vi du thuoc tinh align trong HTML</title>
</head> <body> <p align="left">Doan van nay duoc can chinh trai</p> <p
align="center">Doan van nay duoc can chinh giua</p> <p align="right">Doan van nay duoc can chinh phai</p> </body> </html>
Chạy đoạn code sẽ hiển thị kết quả:
Doan van nay duoc can chinh trai
Doan van nay duoc can chinh giua
Doan van nay duoc can chinh phai
Trang 2Các thuộc tính cốt lõi trong HTML
Có 4 thuộc tính cốt lõi có thể được sử dụng trong phần lớn các phần tử HTML (mặc dù không phải toàn bộ) là:
• Thuộc tính id
• Thuộc tính title
• Thuộc tính class
• Thuộc tính style
Thuộc tính id trong HTML
Các thuộc tính id của một thẻ HTML được sử dụng để nhận diện duy nhất bất kỳ phần tử
nào trong một trang HTML Có 2 lý do chính mà bạn có thể muốn sử dụng một thuộc
tính idtrên một phần tử là:
• Nếu một phần tử mang thuộc tính id như là một định danh duy nhất, nó có thể xác
định đích danh phần tử đó và nội dung của nó
• Nếu bạn có 2 phần tử cùng tên trong một trang Web, bạn có thể sử dụng thuộc
tínhid để phân biệt giữa 2 phần tử mà có cùng tên đó
Bây giờ, chúng ta sử dụng thuộc tính id để phân biệt giữa 2 phần tử đoạn văn như ví dụ
dưới
VÍ DỤ
<p id="html">Vi du 1 ve thuoc tinh id trong HTML</p> <p id="css">Vi du 2 ve thuoc tinh id trong HTML</p>
Thuộc tính title trong HTML
Thuộc tính title cung cấp một tiêu đề cho một phần tử Cú pháp cho thuộc tính title tương
tự như phần giải thích ở trên của thuộc tính id
Chế độ xử lý của thuộc tính này phụ thuộc vào phần tử mang nó, mặc dù nó thường hiển
thị một tooltip khi bạn rê chuột qua Ví dụ:
VÍ DỤ
<!DOCTYPE html> <html> <head> <title>Vi du thuoc tinh title trong HTML</title>
</head> <body> <h3 title="Vi du thuoc tinh title!">Ban re chuot qua day</h3>
</body> </html>
Trang 3Hiển thị kết quả:
Ban re chuot qua day
Bây giờ bạn hãy thử rê con trỏ chuột qua "Ban re chuot qua day" và bạn sẽ thấy một tooltip
sẽ được phóng to
Thuộc tính class trong HTML
Thuộc tính class được sử dụng để liên kết một phần tử với một Style Sheet và xác định
kiểu của phần tử Bạn sẽ được học thêm về cách sử dụng của thuộc tính này khi bạn học
về Cascading Style Sheet (CSC) Vì thế, bây giờ bạn có thể chưa cần học đến nó
Giá trị của thuộc tính này có thể là một danh sách tên các class riêng rẽ được phân biệt nhau bởi khoảng trống Ví dụ:
class="tenClass1 tenClass2 tenClass3"
Thuộc tính style trong HTML
Thuộc tính này cho phép bạn xác định rõ các quy tắc Cascading Style Sheet (CSC) trong phần tử
<!DOCTYPE html> <html> <head> <title>Vi du thuoc tinh style trong HTML</title>
</head> <body> <p style="font-family:arial; color:#FF0000;">Hoc HTML tai
VietJack </p> </body> </html>
Nó sẽ hiển thị kết quả:
Hoc HTML tai VietJack
Lúc này bạn chưa học về CSS, vì thế hãy tiếp tục tiến hành mà không cần lo lắng về CSS Tại đây chúng ta cần hiểu các thuộc tính HTML là gì và cách chúng sử dụng để định dạng nội dung
Các thuộc tính Global trong HTML
Có 3 thuộc tính Global có trong hầu hết (không phải tất cả) các phần tử XHTML
• Thuộc tính dir
• Thuộc tính lang
• Thuộc tính xml:lang
Trang 4Thuộc tính dir trong HTML
Thuộc tính dir cho phép bạn chỉ đạo trình duyệt phương hướng mà văn bản hiển thị (chẳng
hạn từ trái qua phải) Thuộc tính này nhận một trong 2 giá trị, hiển thị ở bảng dưới:
Giá
trị
Ý nghĩa
ltr Từ trái qua phải (giá trị mặc định)
rtl Từ phải qua trái (cho các ngôn ngữ như Hebrew, Arabic… mà được đọc
từ phải qua trái)
VÍ DỤ
<!DOCTYPE html> <html dir="rtl"> <head> <title>Vi du thuoc tinh dir trong
HTML</title> </head> <body> Phan van ban nay duoc hien thi tu phai sang trai
</body> </html>
Hiển thị kết quả như sau:
Phan van ban nay duoc hien thi tu phai sang trai
Khi thuộc tính dir được sử dụng trong thẻ <html> , nó quyết định cách mà văn bản xuất
hiện trong toàn bộ tài liệu Khi sử dụng với thẻ khác, nó điều khiển hướng của văn bản cho nội dung của thẻ đó
Thuộc tính lang trong HTML
Thuộc tính lang cho phép bạn chỉ rõ ngôn ngữ chính sử dụng trong một tài liệu, nhưng
thuộc tính này được giữ trong HTML chỉ cho khả năng tương thích ngược với các phiên
bản trước của HTML Thuộc tính này được thay thế bằng thuộc tính xml:lang trong tài liệu
XHTML mới
Các giá trị của thuộc tính lang là các mã ngôn ngữ hai ký tự tiêu chuẩn ISO-639 Bạn có thể kiểm tra danh sách các code này ở chương Mã hóa ngôn ngữ HTML: ISO 639
VÍ DỤ
<!DOCTYPE html> <html lang="vi"> <head> <title>Vi du thuoc tinh lang trong HTML</title> </head> <body> Trang VietJack duoc viet bang tieng Viet </body>
</html>
Trang 5Thuộc tính xml:lang trong XHTML
Thuộc tính xml:lang trong XHTML thay cho thuộc tính lang Giá trị của thuộc tính xml:langnày có thể là một mã quốc gia trong ISO-639 như đã đề cập ở trên
Các thuộc tính chung trong HTML
Bảng dưới miêu tả các thuộc tính khác mà sử dụng dễ dàng với nhiều thẻ HTML:
align right, left, center Các thẻ căn chỉnh theo chiều ngang
valign top, middle, bottom Các thẻ căn chỉnh theo chiều dọc trong một
phần tử HTML
bgcolor Giá trị số, thập lục
phân, RGB Đặt màu nền phía sau một phần tử background URL Đặt ảnh nền phía sau một phần tử
id Người dùng tự định
nghĩa
Đặt tên một phần tử để sử dụng với Cascading Style Sheets
class Người dùng tự định
nghĩa
Phân loại một phần tử để sử dụng với Cascading Style Sheets
width Giá trị số Xác định độ rộng của bảng, hình ảnh hoặc ô
trong bảng
height Giá trị số Xác định chiều cao của bảng, hình ảnh
hoặc ô trong bảng
title Người dùng tự định
nghĩa
"Pop-up" tiêu đề của phần tử
Trang 6Chúng ta sẽ nghiên cứu các ví dụ liên quan khi chúng ta tiến hành với các thẻ HTML khác
Để tìm hiểu danh sách đầy đủ của các thể HTML và các thuộc tính liên quan, bạn truy cập
để vào chương Danh sách các thẻ HTML
Loạt bài hướng dẫn học lập trình HTML cơ bản và nâng cao của chúng tôi dựa trên
nguồn tài liệu của: Tutorialspoint
Follow https://www.facebook.com/vietjackteam/ để tiếp tục theo dõi các loạt bài mới nhất
về Java,C,C++,Javascript,HTML,Python,Database,Mobile mới nhất của chúng tôi
Click http://click.accesstrade.vn/adv.php?rk=0002k20003u4 để đăng ký tham gia các khóa học trực tuyến về tất cả các ngôn ngữ lập trình, thiết kế web, photoshop tại tổ hợp công nghệ giáo dục TOPICA, cũng như để ủng hộ cho website vietjack.com