Căn lề hình ảnh trong html

Posted on by mtoplistChuyên mục:Top List

Hình ảnh là rất quan trọng trong diễn tả và làm đẹp các khái niệm phức tạp theo một cách đơn giản nhất trên trang Web của bạn. Chương này sẽ đưa bạn qua các bước để sử dụng hình ảnh trong trang của mình.

Nội dung chính

Show

  • Chèn hình ảnh trong HTML – Thẻ img trong HTML
  • Thiết lập vị trí của hình ảnh trong HTML
  • Thiết lập chiều cao/độ rộng hình ảnh trong HTML
  • Thiết lập Border cho hình ảnh trong HTML
  • Căn chỉnh hình ảnh trong HTML
  • 1) Thẻ <img> trong HTML
  • 2) Các thuộc tính của thẻ <img>
  • 2.1) Thuộc tính src
  • 2.2) Thuộc tính alt
  • 2.3) Thuộc tính border
  • 2.4)
    Thuộc tính width
  • 2.5) Thuộc tính height
  • 2.6) Thuộc tính vspace
  • 2.7) Thuộc tính hspace
  • 2.8) Thuộc tính align
  • 3) Định dạng CSS mặc định

Chèn hình ảnh trong HTML – Thẻ img trong HTML

Bạn có thể chèn bất cứ hình ảnh nào vào trang Web của bạn bằng cách sử dụng thẻ <img>. Dưới đây là cú pháp đơn giản để sử dụng thẻ này.

<img src="đường dẫn url tới nơi chứa hình ảnh" ... danh-sách-thuộc-tính/>

Thẻ <img> này là một thẻ trống, nghĩa là nó chỉ có thể
chứa danh sách các thuộc tính và không có thẻ đóng.

Ví dụ

Bạn thử ví dụ sau:

<html>
    <head>
        <title>Hinh anh trong HTML</title>
    </head>
    <body>
        <p>Vi du the img trong HTML.</p>
        <img src="./images/logo3.png" alt="Hình ảnh trong HTML" />
    </body>
</html>

Kết quả hiển thị:

Căn lề hình ảnh trong html

Bạn có thể sử dụng file hình ảnh PNG, JPEG hoặc GIF trên cơ sở sở thích của mình nhưng chắc chắn rằng bạn xác định rõ tên file ảnh trong thuộc tính src. Tên file là phân biệt chữ hoa và thường.

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

Thiết lập vị trí của hình ảnh trong HTML

Chúng ta thường giữ tất cả hình ảnh trong một thư mục riêng. Vì thế hãy lưu các file HTML (test.htm) trong thư mục chính và tạo thư mục phụ image trong thư mục chính để lưu file hình ảnh (logo.png).

Ví dụ

Giả sử vị trí tệp hình ảnh của chúng ta là “images/logo.png”, bạn thử ví dụ sau:

<html>
    <head>
        <title>Hinh anh trong HTML</title>
    </head>
    <body>
        <p>Vi  du the img trong HTML.</p>
        <img src="./images/logo.png" alt="Hình ảnh trong HTML" />
    </body>
</html>

Nó sẽ
tạo ra kết quả là:

Căn lề hình ảnh trong html

Thiết lập chiều cao/độ rộng hình ảnh trong HTML

Bạn có thể thiết lập chiều cao/độ rộng của hình ảnh trên cơ sở sử dụng thuộc tính width và height. Bạn có thể xác định chiều độ rộng, chiều cao của hình sử dụng mối quan hệ hoặc là với Pixel hoặc là với kích thước thật của hình đó.

Ví dụ

<html>
    <head>
        <title>Thiet lap chieu cao va do rong hinh anh</title>
    </head>
    <body>
        <p>Vi du xac dinh do rong va chieu cao cho hinh anh</p>
        <img src="./images/logo.png" alt="Hình ảnh trong HTML" width="150" height="100"/>
    </body>
</html>

Kết quả hiển
thị là:

Căn lề hình ảnh trong html

Thiết lập Border cho hình ảnh trong HTML

Theo mặc định thì sẽ có một Border quanh hình ảnh, bạn có thể xác định độ dày của viền bằng Pixel sử dụng thuộc tính border. Nếu độ dày bằng 0, nghĩa là sẽ không có Border quanh hình ảnh.

Ví dụ

<html>
    <head>
        <title>Thiet lap border cho hinh anh trong HTML</title>
    </head>
    <body>
        <p>Vi du thiet lap border cho hinh anh</p>
        <img src="./images/logo.png" alt="Hình ảnh trong HTML" border="3"/>
    </body>
</html>

Chạy đoạn mã trên sẽ tạo ra kết quả sau:

Căn lề hình ảnh trong html

Căn chỉnh hình ảnh trong HTML

Theo mặc định thì hình ảnh sẽ được căn chỉnh theo cạnh trái của trang web, nhưng bạn có thể sử dụng thuộc tính align để thiết lập lại sự căn chỉnh này: trung tâm hoặc bên phải.

Ví dụ

<html>
    <head>
        <title>Can chinh hinh anh trong HTML</title>
    </head>
    <body>
        <p>Vi du can chinh hinh anh</p>
        <img src="./images/logo.png" alt="Hình ảnh trong HTML" border="3" align="right"/>
    </body>
</html>

Nó sẽ tạo ra kết quả sau:

Căn lề hình ảnh trong html

1) Thẻ <img> trong HTML

– Thẻ <img> dùng để chèn hình ảnh vào trang web.

– Ví dụ: Các hình ảnh bên dưới được chèn vào trang web chính là nhờ vào thẻ <img>.

Căn lề hình ảnh trong htmlCăn lề hình ảnh trong htmlCăn lề hình ảnh trong html

– Một thẻ <img> sẽ tương đương với một tấm hình.

– Thẻ <img> không có thẻ đóng.

– Để sử dụng
thẻ <img>, ta dùng cú pháp như sau:

<img src="đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web">

<!DOCTYPE html>
<html>
<body>
    <img src="http://webcoban.vn/image/flower.gif">
</body>
</html>

Xem ví dụ

2) Các thuộc tính của thẻ <img>

– Thẻ <img> có chín thuộc tính cơ bản:

– Dưới đây là bảng mô tả sơ lược về chín thuộc tính đó:

src

Xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web

alt

Xác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác

border

Xác định độ dày của đường viền bao xung quanh tấm hình

width

Thiết lập chiều rộng cho tấm hình

height

Thiết lập chiều cao cho tấm hình

vspace

Xác định khoảng cách lề phía trên và lề phía dưới của tấm hình

hspace

Xác định khoảng cách lề bên trái và lề bên phải của tấm hình

align

Xác định vị trí của tấm hình so với các văn bản xung quanh

usemap

Xác định một “bản đồ hệ thống tọa độ của các vùng” để kết hợp với tấm hình, tạo ra một bản đồ ảnh. Bạn sẽ được tìm hiểu rõ về thuộc tính này trong bài thẻ <map> & <area>

2.1) Thuộc tính src

– Thuộc tính src dùng để xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web.

(Đường dẫn đến tập tin hình ảnh có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)

<!DOCTYPE html>
<html>
<body>
    <p>- Thẻ img bên dưới sử dụng đường dẫn tuyệt đối</p>
    <img src="http://webcoban.vn/image/flower.gif">
    <p>- Thẻ img bên dưới sử dụng đường dẫn tương đối</p>
    <img src="../image/flower.gif">
</body>
</html>

Xem ví dụ

2.2) Thuộc tính alt

– Thuộc tính alt dùng để xác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình
ảnh không chính xác.

<!DOCTYPE html>
<html>
<body>
    <img src="../image/flower.gif" alt="Hình ảnh không tồn tại">
    <img src="../image/flower75.gif" alt="Hình ảnh không tồn tại">
</body>
</html>

Xem ví dụ

2.3) Thuộc tính border

– Thuộc tính border dùng để xác định độ dày của đường viền bao xung quanh tấm hình.

(Mặc định, giá trị của thuộc tính border được tính theo đơn vị pixel)

– Tấm hình bên dưới sẽ có đường viền dày 10px

<!DOCTYPE html>
<html>
<body>
    <img src="../image/flower.gif" border="10">
</body>
</html>

Xem ví dụ

2.4)
Thuộc tính width

– Thuộc tính width dùng để thiết lập chiều rộng cho tấm hình.

– Giá trị của thuộc tính width có thể xác định theo một trong hai loại đơn vị:

  • px (pixel)
  • % (tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó)
<!DOCTYPE html>
<html>
<body>
    <p>- Tấm hình bên dưới sẽ có chiều rộng bằng 300 pixel</p>
    <img src="../image/flower.gif" width="300px">
    <p>- Tấm hình bên dưới sẽ có chiều rộng bằng 100% chiều rộng phần nội dung của phần tử cha của nó (tức là phần tử body)</p>
    <img src="../image/flower.gif" width="100%">
</body>
</html>

Xem ví dụ

2.5) Thuộc tính height

– Thuộc tính height dùng để thiết lập chiều cao cho tấm hình.

– Giá trị của thuộc tính height có thể xác định theo một trong hai loại đơn vị:

  • px (pixel)
  • % (tỷ lệ phần trăm chiều cao phần nội dung của phần tử cha của nó)

– Lưu ý: Nếu thiết lập giá trị của thuộc tính height theo đơn vị % thì phần tử cha của nó phải có chiều cao được xác định.

<!DOCTYPE html>
<html>
<body>
    <p>- Tấm hình bên dưới sẽ có chiều cao bằng 100 pixel</p>
    <img src="../image/flower.gif" width="100px">
    <p>- Tấm hình bên dưới sẽ có chiều cao bằng 50% chiều cao phần nội dung của phần tử cha của nó.</p>
    <div style="border:1px solid black;height:300px">
        <img src="../image/flower.gif" height="50%">
    </div>
</body>
</html>

Xem ví dụ

2.6) Thuộc tính vspace

– Thuộc tính
vspace dùng để xác định khoảng cách lề phía trên và lề phía dưới của tấm hình.

– Tấm hình bên dưới sẽ có lề trên và lề dưới là 100px

<!DOCTYPE html>
<html>
<body>
    <div style="display:inline-block;border:1px solid #555">
        <img src="../image/smile.png" vspace="100">
    </div>
</body>
</html>

Xem ví dụ

– Lưu ý; Ta có thể sử dụng thuộc tính margin-top & margin-bottom trong CSS để thay thế.

2.7) Thuộc tính hspace

– Thuộc tính hspace dùng để xác định khoảng cách lề bên trái và lề bên phải của tấm hình.

–
Tấm hình bên dưới sẽ có lề trái và lề phải là 100px

<!DOCTYPE html>
<html>
<body>
    <div style="display:inline-block;border:1px solid #555">
        <img src="../image/smile.png" hspace="100">
    </div>
</body>
</html>

Xem ví dụ

– Lưu ý; Ta có thể sử dụng thuộc tính margin-left & margin-right trong CSS để thay thế.

2.8) Thuộc tính align

– Thuộc tính align dùng để xác định vị trí của tấm hình so với các văn bản xung quanh.

– Thuộc tính align có năm giá trị cơ bản:

left

Tấm hình sẽ được đẩy sang bên trái

Xem ví dụ
right

Tấm hình sẽ được đẩy sang bên phải

Xem ví dụ
top

Văn bản sẽ nằm ở vị trí cao nhất so với tấm hình

Xem ví dụ
middle

Văn bản sẽ nằm ở vị trí giữa so với tấm hình

Xem ví dụ
bottom

Văn bản sẽ nằm ở vị trí thấp nhất so với tấm hình

Xem ví dụ

3) Định dạng CSS mặc định

– Hầu hết các trình duyệt sẽ hiển thị phần tử <img> với định dạng CSS như sau:

img { 
    display: inline-block;
}

mtoplist