Ở các bài viết trước cũng có viết về hình ảnh trong HTML nhưng tôi chỉ viết sơ qua vì nó không phải là chủ đề chính, ở bài viết này tôi sẽ viết tất cả những gì liên quan đến hình ảnh trong HTML mà bạn cần phải biết.
1. Các loại hình ảnh thường dùng
Để các bạn dễ hiểu tôi sẽ ví dụ như sau
hinh-anh.jpg là tên của một tập tin hình ảnh trong đó .jpg là loại ảnh.
Có 04 loại hình ảnh như sau:
+ .GIF (Graphics Interchange Format) – hình động – thông dụng
+ .JPG hoặc .JPEG (Joint Photographic Experts Group) – thông dụng
+ .PNG (Portable Network Graphics) – thông dụng
+ .SVG (Scalable Vectors Graphic) – đang được hoàn thiện và trong tương lai không xa sẽ được sử dụng rộng rãi.
2. Cú pháp hình ảnh trong HTML
Trong HTML hình ảnh (images) được xác định bằng thẻ <img>
Thẻ <img> là thẻ rỗng, chỉ chứa các thuộc tính, nó không có thẻ đóng.
Thuộc tính src (viết tắt của “source” = nguồn) xác định URL (địa chỉ web) của hình ảnh.
Cú pháp thường dùng của hình ảnh có dạng sau:
<img src=”đường dẫn đến tập tin hình ảnh” alt=”tên định danh của hình ảnh” style=”width:giá trị chiều rộng đơn vị px;height:giá trị chiều cao đơn vị px;”>
Lưu ý đơn vị px viết tắt của chữ pixel.
Lưu ý thêm rằng luôn xác định chiều rộng và chiều cao của hình ảnh. Nếu chiều rộng và chiều cao không được xác định, trang sẽ nhấp nháy trong khi tải hình ảnh.
Ngoài ra nó còn có thể có thêm thuộc tính title để khi bạn rê chuột vào hình ảnh nó sẽ hiện lên tiêu đề của hình ảnh đó.
3. Thuộc tính alt
Thuộc tính alt cung cấp một văn bản thay thế cho một hình ảnh, nếu người dùng vì một lý do nào đó không thể xem nó (do kết nối chậm, lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình).
Nếu một trình duyệt không thể tìm thấy một hình ảnh, nó sẽ hiển thị giá trị của thuộc tính alt.
Hình dưới là ví dụ nếu trình duyệt không tìm thấy được hình ảnh thì nó sẽ hiện văn bản thay thế.
Lưu ý rằng thuộc tính alt là bắt buộc. Một trang web sẽ không xác nhận hợp lệ mà không có nó.
4. Nên dùng thuộc tính Width và Height hay dùng thuộc tính Style để xác định chiều rộng và chiều cao?
Tốt hơn là sử dụng thuộc tính style để đặt chiều rộng và chiều cao của một hình ảnh (Thay vì sử dụng các thuộc tính width và height), bởi vì nó ngăn ngừa CSS làm thay đổi kích thước ban đầu của một hình ảnh như ví dụ dưới
5. Vấn đề đường dẫn của hình ảnh
Đường dẫn của hình ảnh bạn có thể dùng đường dẫn tương đối hoặc đường dẫn tuyệt đối đều được.
Về hai loại đường dẫn này tôi đã viết kỹ ở bài trước.
Nếu không được chỉ định, trình duyệt sẽ tìm kiếm hình ảnh trong cùng một thư mục với trang web.
Tuy nhiên, phổ biến là lưu trữ hình ảnh trong một thư mục con. Sau đó, bạn phải bao gồm tên thư mục trong thuộc tính src như ví dụ dưới đây
Nếu bạn lưu trữ hình ảnh trên một máy chủ khác hoặc một địa chỉ web nào đó thì bạn phải dùng đường dẫn tuyệt đối cho nguồn hình ảnh đó.
ví dụ tôi dùng hình ảnh trên trang web http://ift.tt/1BZEETG thì tôi sẽ có đường dẫn tuyệt đối như hình dưới
6. Dùng hình ảnh như một liên kết
Để sử dụng một hình ảnh như là một liên kết, bạn chỉ cần đặt thẻ <img> bên trong thẻ <a>
7. Xác định vị trí của hình ảnh trong đoạn văn bản
Sử dụng thuộc tính float của CSS để xác định vị trí của hình ảnh trong đoạn văn bản.
Thuộc tính float của CSS có các giá trị như trái (left), phải (right) và giữa (center).
Lưu ý rằng: Bạn nên sử dụng thuộc tính float của CSS. Không nên dùng thuộc tính align vì nó được bỏ qua trong HTML4 và không được hỗ trợ trong HTML5.
8. Các bài tập
8.1 Bài tập 1
Tăng gấp đôi chiều rộng và chiều cao của hình ảnh trong đoạn code bên dưới
<!DOCTYPE html> <html> <body> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px"> </body> </html>
Câu trả lời của bài tập 1
<!DOCTYPE html> <html> <body> <img src="html5.gif" alt="HTML5 Icon" style="width:256px;height:256px"> </body> </html>
8.2 Bài tập 2
Thêm liên kết vào hình ảnh bên dưới (làm cho nó đi đến “http://ift.tt/2wLehsf; nếu bạn nhấp vào nó).
<!DOCTYPE html> <html> <body> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px"> </body> </html>
Câu trả lời của bài tập 2
<!DOCTYPE html> <html> <body> <a href="http://binhnet.com"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px"> </a> </body> </html>
8.3 Bài tập 3
Làm hình ảnh bên dưới nằm ở bên trái của đoạn văn
<!DOCTYPE html> <html> <body> <p> <img src="smiley.gif" alt="Smiley face" style="width:42px;height:42px"> Đây là một đoạn văn bản kết hợp với hình ảnh. Đây là một đoạn văn bản kết hợp với hình ảnh. Đây là một đoạn văn bản kết hợp với hình ảnh. Đây là một đoạn văn bản kết hợp với hình ảnh. </p> </body> </html>
Câu trả lời của bài tập 3
<!DOCTYPE html> <html> <body> <p> <img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px"> Đây là một đoạn văn bản kết hợp với hình ảnh. Đây là một đoạn văn bản kết hợp với hình ảnh. Đây là một đoạn văn bản kết hợp với hình ảnh. Đây là một đoạn văn bản kết hợp với hình ảnh. </p> </body> </html>
8.4 Bài tập 4
Thay đổi địa chỉ của hình ảnh thành binhnet.jpg
<!DOCTYPE html> <html> <body> <img src="nguyenbinh.jpg" style="width:300px;height:300px;"> </body> </html>
Câu trả lời của bài tập 4
<!DOCTYPE html> <html> <body> <img src="binhnet.jpg" style="width:300px;height:300px;"> </body> </html>
8.5 Bài tập 5
Hình ảnh dưới đây bị lỗi nguồn. Chỉ định một văn bản thay thế là “binhnet.com”
<!DOCTYPE html> <html> <body> <img src="nguyenbinh.jpg" width="150" height="150"> </body> </html>
Câu trả lời của bài tập 5
<!DOCTYPE html> <html> <body> <img src="nguyenbinh.jpg" alt="binhnet.com" width="150" height="150"> </body> </html>
9. Lời cuối bài
Qua bài này các bạn đã nắm được tất cả các vấn đề liên quan đến hình ảnh trong HTML. Ở bài kết tiếp là chủ đề về các thẻ và thuộc tính CSS để tạo bảng (table) trong HTML.
The post [HTML bài 18] Những điều cần biết về hình ảnh appeared first on Học online.
from WordPress http://ift.tt/2wKTrtQ
via IFTTT
Không có nhận xét nào:
Đăng nhận xét