10. HTML - Hình ảnh

Thảo luận trong 'HTML' bắt đầu bởi admin, 15/9/15.

  1. admin

    admin Administrator Thành viên BQT

    Tham gia ngày:
    5/9/15
    Bài viết:
    42
    Đã được thích:
    0
    Điểm thành tích:
    6
    Hình ảnh rất quan trọng để làm đẹp trang web của bạn. Chúng ta sẽ lần lượt tìm hiểu các bước đơn giản để làm việc với hình ảnh trong trang web.

    Chèn hình ảnh

    Bạn có thể chèn bất kì ảnh nào trong web bằng cách sử dụng thẻ <img>. Cú pháp.
    PHP:
    <img src="Image URL" ... attributes-list/>
    Thẻ <img> là một thẻ rỗng, có nghĩa là nó có thể bao gồm danh sách các thuộc tính và không có thẻ đóng.

    Để làm theo ví dụ dưới đây, bạn hãy đặt file test.html và file ảnh costa.jpg vào trong cùng một thư mục :

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>Using Image in Webpage</title>
    </
    head>
    <
    body>
    <
    p>Simple Image Insert</p>
    <
    img src="costa.jpg" alt="Test Image" />
    </
    body>
    </
    html>
    Kết quả:

    Bạn có thể sử dụng file ảnh PNG, JPEG, GIF tùy thuộc vào bạn nhưng phải chắc chắn rằng tên ảnh, định dạng file và đường dẫn của bạn chính xác.

    Thuộc tính alt là một thuộc tính bắt buộc, nó xác định một văn bản thay thế cho hình ảnh, nếu hình ảnh này không thể hiển thị.

    Thiết lập vị trí của hình ảnh (location)

    Thông thường chúng ta đặt tất cả các hình ảnh trong một thư mục riêng biệt. Vì vậy hãy đặt file test.html trong thư mục home và tạo một thư mục hình ảnh con bên trong home, ở đó chúng ta sẽ lưu trữ hình ảnh (test.png).

    Giả sử ảnh của bạn có địa chỉ là "img/costa.jpg", hãy thử làm như sau :

    <!DOCTYPE html>
    <html>
    <head>
    <title>Using Image in Webpage</title>
    </head>
    <body>
    <p>Simple Image Insert</p>
    <img src="img/costa.jpg" alt="Test Image" />
    </body>
    </html>
    Kết quả:

    Thiết lập kích thước của ảnh (width/height)

    Bạn có thể sử dụng 2 thuộc tính width và height để thiết lập chiều rộng ảnh, chiều cao ảnh tùy vào yêu cầu của bạn. Bạn có thể chỉ ra chiều rộng và cao của ảnh bằng đơn vị pixels hoặc phần trăm (%) kích thước thật.

    Ví dụ:
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>Set Image Width and Height</title>
    </
    head>
    <
    body>
    <
    p>Setting image width and height</p>
    <
    img src="costa.jpg" alt="Test Image" width="150" height="100"/>
    </
    body>
    </
    html>
    Kết quả:
    Hình ảnh ở ví dụ này đã được thay đổi kích thước so với cái ban đầu để mặc định.

    Thiết lập đường viền cho ảnh (border)

    Mặc định ảnh sẽ không có đường viền. Bạn có thể xác định độ dày đường viền bằng cách sử dụng thuộc tính border. Một chiều dày đường viền bằng 0 có nghĩa là không có viền xung quanh hình.

    Ví dụ:

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>Set Image Border</title>
    </
    head>
    <
    body>
    <
    p>Setting image Border</p>
    <
    img src="costa.jpg" alt="Test Image" width="150" height="100"  border="10"/>
    </
    body>
    </
    html>
    Kết quả:
    Ở ví dụ trên, bạn có thể thấy có đường viền đen bao quanh hình ảnh.

    Căn chỉnh hình ảnh (alignment)

    Mặc định hình ảnh sẽ được căn chỉnh vào phía bên trái của trang, nhưng bạn có thể sử dụng thuộc tính align để chỉnh vào giữa hoặc sang bên phải.

    Ví dụ:
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>Set Image Alignment</title>
    </
    head>
    <
    body>
    <
    p>Setting image Alignment</p>
    <
    img src="costa.jpg" alt="Test Image"  border="10" height="150" align="right"/>
    </
    body>
    </
    html>
    Kết quả:
    Bạn thấy hình ảnh đã được di chuyển qua bên phải.
     

    Các file đính kèm:

    Chỉnh sửa cuối: 21/9/15

Chia sẻ trang này