Phần 1: HTML | Bài cuối: Hình ảnh trong HTML

Hi các bạn, vậy là chúng ta đã đến bài cuối cùng của phần 1: HTML. Chắc bạn đã có những kiến thức nhất định về HTML rồi phải không? Hôm nay TKS xin viết bài cuối cùng về phần này. Cảm ơn các bạn đã theo dõi 10 bài về HTML trong thời gian qua.

Với HTML bạn có thể thể hiện hình ảnh trong tài liệu.

Ví dụ

Chèn hỉnh ảnh
Cách cho hiển thị một tấm hình trên trang web.
Chèn hình ảnh từ những vị trí khác
Cách hiện một hoặc nhiều tấm hình từ một thư mục khác hoặc từ một server khác trên trang web của bạn.

Thẻ Image và thuộc tính src
Trong HTML, hình ảnh được xác định bởi thẻ <img>. Để hiển thị một hình trên trang web, bạn cần phải sử dụng thuộc tính src. Src là chữ viết tắt của source. Giá trị của thuộc tính src là địa chỉ URL của hình ảnh mà bạn muốn hiển thị trên trang web.

Cú pháp để xác định một tấm hình

<img src=”url”>

Địa chỉ URL chỉ đến điểm mà hình ảnh được lưu trữ. Một file hình có tên là “boat.gif” được đặt ở thư mục images trên http://thietkeso.vn có địa chỉ URL là: http://thietkeso.vn/wp-content/uploads/2011/12/custom-150×150.png

Trình duyệt sẽ hiển thị hình ảnh nơi mà có thẻ image được chèn trong tài liệu. Nếu bạn muốn thêm thẻ image vào giữa một đoạn văn, trình duyệt sẽ hiển thị đoạn văn thứ nhất trước, sau đó đến hình và sau cùng là đoạn văn thứ hai.

Thuộc tính Alt
Thuộc tính alt được sử dụng để xác định chữ thay cho hình. Bởi vì nếu hình đó không hiện được thì một dòng chữ sẽ xuất hiện để báo cho người đọc biết. Gía trị của thuộc tính alt là một dòng chữ như sau:

<img src=”thietkeso.jpg” alt=”Thiết kế số”>

Thuộc tính alt báo cho người đọc biết họ không xem được hình gì khi mà trình duyệt không load được hình đó. Trình duyệt sau đó sẽ hiển thị dòng chữ thay vì hình ảnh. Bạn nên tạo cho mình thói quen thêm thuộc tính “alt” vào mỗi tấm hình trên một trang, để tăng khả năng hiển thị và giúp những người lướt web mà không dùng hình ảnh.

Một vài ví dụ

Hình nền

Căn chỉnh hình ảnh

Để hình ảnh “bơi lội” tự do

Điều chỉnh hình với kích cỡ khác nhau

Hiển thị chữ thay thế cho tấm hình

Tạo siêu liên kết cho tấm hình

Tạo image map
Cách tạo một image map, với những vùng có thể click được. Mỗi một vùng của hình là một đường liên kết.

Biến tấm hình thành image map
Cách biến một tấm hình thành một image map. Bạn sẽ thấy nếu bạn di chuyển con chuột lên trên tấm hình, góc phần tư sẽ xuất hiện trên thanh trạng thái.

Thẻ Image

Tag Mô Tả
<img> Hình ành
<map> Định nghĩa map ( sơ đồ trên 1 hình)
<area> Định Area, 1 vùng nhỏ tương ứng trên sơ đồ

HTML Background
Một background đẹp có thể làm cho trang của bạn nhìn đẹp mắt hơn.

Ví dụ

Hình nền đẹp

Hình nền đẹp 2

Hình nền xấu

Backgrounds
Thẻ <body> có hái thuộc tính nơi mà bạn có thể chọn loại background cho mình. Background có thể là một màu hoặc là một tấm hình.

Bgcolor
Thuộc tính bgcolor thiết lập hình nền là một màu. Giá trị của thuộc tính này là hệ số hexadecimal, một giá trị màu RGB hoặc một tên màu

<body bgcolor=”#000000″>
<body bgcolor=”rgb(0,0,0)”>
<body bgcolor=”black”>

Dòng code trên cùng thiết lập hình nền thành màu đen.

Background

Thuộc tính background thiết lập một tấm hình làm hình nền. Giá trị của thuộc tính này là địa chỉ URL của tấm hình bạn muốn sử dụng. Nếu một tấm hình nhở hơn so với cửa sổ trình duyệt, tấm hình đó sẽ tự nhân lên đến khi nào nó che phủ hết cửa sổ trình duyệt.

<body background=”clouds.gif”>
<body background=”http://www.w3schools.com/clouds.gif”>

Địa chỉ URL có thể là tương đối như là ở dòng code thứ nhất hoặc tuyệt đối như là ở dòng thứ 2.

Chú ý: nếu bạn muốn sử dụng hình nền, bạn nên nhớ rằng:

  • Hình nền đó có làm giảm tốc độ load của trang nhiều không? thường thì hình được chọn làm hình nền không nên vượt quá 10K.
  • Hình nền đó có hợp với các hình khác trên trang không?
  • Hình nền đó có hợp với chữ không?
  • Hình nền đó nhìn có đẹp không nếu nó chỉ có một mình
  • Hình nền đó có làm cho người đọc mất tập trung không?

Mẹo nhỏ giúp bạn

  • Một số ít những trang web có sử dụng hình nền bằng hình ảnh
  • Hầu hết các site sử dụng hình nền là màu trắng, đen hoặc xám
FOLLOW US

Leave a Reply

Your email address will not be published. Required fields are marked *