Học HTML cơ bản-Bài 7

By Unknown - Chủ Nhật, 14 tháng 8, 2016 - No Comments

Bài 7: Thuộc Tính (Attributes)

Bạn có thể thêm thuộc tính vào một số phần tử.

THUỘC TÍNH LÀ GÌ?

Nếu bạn còn nhớ, những phần tử tạo nên cấu trúc trang HTML và khai báo với trình duyệt bạn muốn website sẽ được trình bày như thế nào (ví dụ <br /> là thẻ khai báo cho trình duyệt khi muốn xuống dòng trong một đoạn chữ). Ở một vài phần tử bạn có thể thêm thông tin vào. Loại thông tin được thêm vào này được gọi là thuộc tính (attribute)

Ví dụ 1:



<h2 style="background-color:#ff0000;">Tôi đang học HTML</h2>

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, chúng ta sẽ nói về điều này sau.

TÌM HIỂU RÕ HƠN VỀ THUỘC TÍNH

Có rất nhiều thuộc tính. Cái đầu tiên bạn sẽ học sẽ là style (kiểu dáng, định dạng), bằng cách sử dụng style bạn có thể tạo kiểu cho website của mình. Ví dụ như background colour: (màu nền )

Ví dụ 2:



<html> 


<head> 


</head> 


<body style="background-color:#ff0000;"> 


</body> 


</html>

Đoạn code trên sẽ thêm màu đỏ vào nền trang Web của bạn, hiển thị trên trình duyệt – bạn hãy thử và sẽ thấy. Chúng tôi sẽ giải thích chi tiết hệ thống màu hoạt động như thế nào chí trong chốc lát nữa.

Chú ý rằng một số thẻ sử dụng tiếng Anh của Hoa Kỳ, do đó color sẽ được dùng thay vì colour. Điều này bạn nên cẩn thận, vì nếu viết sai trình duyệt sẽ không hiểu code bạn viết. Một lưu ý khác cũng rất quan trọng, bạn phải luôn dùng dấu ngoặc kép để đóng lại thuộc tính.

LÀM THỂ NÀO TẠO MÀU ĐỎ CHO NỀN TRANG WEB?

Như ví dụ bạn vừa xem, để tạo màu đỏ chúng tôi dùng đoạn code “#ff0000”. Đây là mã của màu đỏ được tính theo hệ thập lục phân – hexadecimal numbers (HEX).Mỗi màu sẽ có một mã riêng theo hệ thập lục phân, đây là một số mã màu thường được dùng:

White: #ffffff – Trắng
Black: #000000 (zeros) – Đen
Red: #ff0000 – Đỏ
Blue: #0000ff – Xanh da trời
Green: #00ff00 – Xanh lá cây
Yellow: #ffff00 – Vàng

Một màu thập lục phân (viết tắt là HEX) bao gồm dấu # và sáu chữ hoặc số theo sau. Có hơn 1000 mã màu HEX và rất khó hình dung mã số nào sẽ là màu gì. Để dễ dàng hơn, bạn có thể tham khảo bảng 216 màu thường được sử dụng của bảng Web Safe Color.

Bạn cũng có thể dùng tên màu chuẩn theo tiếng Anh như (white, black, red, blue, green and yellow).

Ví dụ 3:



<body style="background-color: red;"></body>

Bạn đã có khái niệm vừa đủ về màu. Bây giờ chúng ta sẽ quay lại với thuộc tính.

NHỮNG PHẦN TỬ NÀO CÓ THỂ SỬ DỤNG THUỘC TÍNH?

Có rất nhiều thuộc tính khác nhau có thể áp dụng lên đa số các phần tử.

Bạn sẽ thường xuyên sử dụng thuộc tính đối với một số thẻ như <body> và chẳng khi nào áp dụng thuộc tính lên thẻ như <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.

Cũng như các phần tử, có rất nhiều thuộc tính khác nhau. Một số thuộc tính được tạo ra để đáp ứng riêng cho chính các phần tử đó, một số khác có thể sử dụng đại trà đối với nhiều phần tử khác nhau. Ngược lại một số phần tử chỉ có thể chứa một loại thuộc tính và số khác phần tử có thể chứa nhiều thuộc tính khác nhau.

Bạn sẽ có một chút khó hiểu ở đây, nhưng một khi đã làm quen với những thuộc tính khác nhau, bạn sẽ thấy nó thật sự rất logic và bạn cũng sẽ nhận ra sử dụng chúng rất dễ dàng cùng với các khả năng được cung cấp bởi chúng nhiều như thế nào.

Ví dụ dưới đây sẽ cho bạn thấy những thuộc tính quan trọng nhất

CHÍNH XÁC LÀ CÓ BAO NHIÊU THÀNH PHẦN TRONG MỘT PHẦN TỬ?

Nói tổng quát, một phần tử bao gồm: 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. Hãy xem hình minh họa dưới.

Phân tích một phần tử

Phân tích chi tiết 2 loại phần tử 1- Phần tử thông thường luôn có 1 cặp thẻ mở và đóng 2 – Phần tử đơn chỉ có 1 thẻ duy nhất.

Xem bài kế tiếp

News Ticker