NTM Solutions

Thứ Bảy, 25 tháng 6, 2022

Tự học CSS - Bài 30 - Kỹ thuật dùng chung ảnh

Kỹ thuật dùng chung ảnh

Là 01 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ần đế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ủ


Ví dụ dùng chung ảnh

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.

Thứ Tư, 15 tháng 6, 2022

Tự học HTML - Bài 31 - Xử lý Plugins và Youtube

Plug-ins là gì?

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 AppletsPlug-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.

 

Thứ Bảy, 11 tháng 6, 2022

Tự học HTML - Bài 30 - Xử lý AUDIO

Thẻ <audio>

Để 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>

 

Cách hoạt động

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></audio> sẽ chỉ được hiển thị trên trình duyệt nếu không hỗ trợ thẻ <audio>

Thứ Tư, 8 tháng 6, 2022

Tự học HTML - Bài 29 - Xử lý VIDEO

Thẻ HTML <video>

Để 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>

 

Cách hoạt động

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>

Thứ Bảy, 4 tháng 6, 2022

Tự học HTML - Bài 28 - Xử lý Đồ họa – SVG

 SVG là gì?

·         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ẻ <svg>

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 hình tròn

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>


SVG hình chữ nhật

<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ứ Tư, 1 tháng 6, 2022

Tự học HTML - Bài 27 - Xử lý Đồ họa - CANVAS

 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.

HTML Canvas là gì?

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.

Facebook Youtube RSS