Chúng ta hoàn toàn có thể định dạng các phần tử HTML theo thuộc tính hay giá trị thuộc tính đặc biệt.
Chọn qua [attribute] nghĩa
là chọn đối tượng thông qua thuộc tính.
Ví dụ sau chọn tất cả thẻ <a>
có thuộc tính target
a[target]
{
background-color: yellow;
}
Chọn
qua [attribute=”value”] nghĩa là chọn phần tử có thuộc
tính bằng giá trị nào đó.
Ví dụ
sau chọn tất cả thẻ <a> có thuộc tính target="_blank"
a[target="_blank"]
{
background-color: yellow;
}
Là kỹ thuật gom nhiều ảnh vào trong 01 ảnh đơn.
01 trang web tải nhiều ảnh có thể mất nhiều thời gian và phải
gửi nhiều yêu cầu đến máy chủ.
Sử dụng kỹ thuật dùng chung ảnh sẽ tiết kiệm được băng thông
và lệnh gửi đến máy chủ.
Trong ví dụ sau thay vì dùng 03 ảnh, chúng ta sẽ chỉ dùng 01 ảnh
duy nhất “img_navsprites.gif”
Với CSS, chúng ta có thể hiển thị chỉ phần ảnh mà ta cần.
Ví dụ:
#home
{
width: 46px;
height: 44px;
background:
url(img_navsprites.gif) 0 0;
}
Giải thích ví dụ:
Đầu tiên ta chèn 01 thẻ <img> trong phần <body>
<img
id="home" src="img_trans.gif"> đoạn mã này chỉ để chèn 01 tấm
hình trong suốt vì thuộc tính src không thể bỏ trống. Hình ảnh hiển thị thật
sự sẽ là hình trong thuộc tính background khai báo trong css.
width:
46px; height: 44px;
xác định phần ảnh chúng ta muốn dùng.
background:
url(img_navsprites.gif) 0 0;
xác định ảnh nền và vị trí của nó trong ảnh chung (left 0px, top
0px)
Đây là cách dễ nhất để dùng ảnh chung, bây giờ chúng ta mở rộng
ra phần chèn liên kết và hiệu ứng hover.
Plug-ins là các chương trình máy tính nhằm mở rộng các tính
năng tiêu chuẩn của trình duyệt.
Plug-ins được thiết kế để sử dụng cho nhiều mục đích khác
nhau:
·
Chạy Java applets
·
Chạy các điều khiển Microsoft ActiveX.
·
Hiển thị phim dạng Flash.
·
Hiển thị các bản đồ.
·
Quét virus.
·
Kiểm tra 01 id ngân hàng.
Chú ý:
·
Hầu hết các trình duyệt đã không còn hỗ trợ các
Java Applets và Plug-ins.
·
Các điều khiển ActiveX không còn được hỗ trợ
trên bất kỳ trình duyệt nào.
·
Các hỗ trợ Shockwave Flash cũng đã bị tắt trong
các trình duyệt hiện đại.
Để phát 01 tập tin audio trong HTML, ta dùng thẻ
<audio>
<audio
controls>
<source src="nhac.ogg" type="audio/ogg">
<source src="nhac.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Thuộc tính controls thêm vào các nút điều khiển như play,
pause,
và volume.
Thẻ <source> cho phép ta khai báo đường dẫn và định dạng. Trình duyệt sẽ
nhận định dạng tập tin audio trước tiên.
Dòng chữ giữa cặp thẻ <audio> và </audio> sẽ chỉ được hiển thị trên trình duyệt nếu
không hỗ trợ thẻ <audio>
Để hiển thị 01 video trong HTML, ta dùng thẻ <video>
Ví dụ:
<video
width="320"
height="240"
controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Thuộc tính controls thêm các điều khiển video như nút play,
volume,…
Thuộc tính width và height nếu không thiết lập trình duyệt sẽ
nhấp nháy khi tải video.
Thuộc tính <source> xác định đường dẫn đến tập tin.
Trình duyệt sẽ nhận diện định dạng trước.
Dòng chữ nằm giữa thẻ <video> và </video> sẽ chỉ
hiển thị trên trình duyệt nếu thẻ <video> không được hỗ trợ.
Thuộc tính autoplay
Để thiết lập tự động phát video, ta dùng thuộc tính
autoplay.
<video
width="320"
height="240"
autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
·
SVG dùng để xác định đồ họa dạng vector dưới định
dạng XML.
·
SVG dùng trong đồ họa web.
·
SVG hợp với chuẩn W3C.
Thẻ HTML <svg> chứa đồ họa SVG.
SVG có thể vẽ đường, khối hộp, vòng tròn, chữ và chèn ảnh.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Thẻ <canvas> dùng để vẽ đồ họa trên trang web.
Tấm hình này được tạo bởi thẻ <canvas>. Nó chứa các phần
tử: 01 hình chữ nhật màu đỏ, 01 hình chữ nhật tô chuyển màu, 01 hình chữ nhật
đa sắc và 01 chữ đa sắc.
Thẻ <canvas> dùng để vẽ đồ họa thông qua JavaScript.
Thẻ <canvas> chỉ là nơi chứa các phần tử đồ họa. Bạn
phải dùng JavaScript để vẽ lên các hình đồ họa.
Canvas có nhiều phương thức vẽ đường thẳng, hộp, vòng tròn, chữ và chèn ảnh.
