Img - Thẻ Html để chèn ảnh (Src), căn chỉnh và ngắt dòng văn bản xung quanh ảnh (align), cũng như đặt nền (background)
Sự miêu tả
Để chèn hình ảnh đồ họa vào tài liệu HTML, hãy sử dụng thẻ HTML (hình ảnh viết tắt từ tiếng Anh từ hình ảnh- hình ảnh). Hình ảnh không được chèn trực tiếp vào trang web; thẻ chỉ chứa liên kết đến hình ảnh và tạo khoảng trống có kích thước cần thiết để hình ảnh được hiển thị ở định dạng đồ họa GIF, JPEG hoặc PNG:
- JPG là định dạng phổ biến nhất cho ảnh. Hình ảnh có phần mở rộng .jpg hiển thị hàng triệu màu, điều này đặc biệt quan trọng để hiển thị chính xác các tông màu và độ chuyển màu khác nhau trong ảnh. Tuy nhiên, những hình ảnh như vậy không thể chứa các vùng trong suốt.
- GIF được sử dụng cho đồ họa đơn giản như logo. Hình ảnh GIF không được sử dụng cho ảnh vì chúng không thể chứa nhiều thông tin màu sắc như hình ảnh JPG. Tuy nhiên, ảnh GIF có thể có các vùng trong suốt và có thể được nén thành các kích thước tệp rất nhỏ. Định dạng GIF cũng hỗ trợ hoạt ảnh.
- PNG là định dạng hình ảnh, giống như JPG, cho phép bạn hiển thị hàng triệu màu và chứa các vùng trong suốt. Tuy nhiên, theo quy định, hình ảnh có phần mở rộng .png sẽ có kích thước lớn hơn một chút so với JPG hoặc GIF.
Thẻ HTML có hai thuộc tính bắt buộc: src và alt.
Thuộc tính src đóng vai trò quan trọng trong việc hiển thị đồ họa trên trang - nó đặt đường dẫn (tương đối hoặc tuyệt đối) đến hình ảnh, không được chèn về mặt kỹ thuật vào trang: trình duyệt hiển thị hình ảnh mà liên kết dẫn đến.
Thuộc tính alt chỉ định văn bản thay thế cho hình ảnh, văn bản này sẽ chỉ được hiển thị khi hình ảnh không thể hiển thị được (đường dẫn chỉ định không chính xác hoặc hình ảnh đã bị xóa).
Nếu cần, hình ảnh có thể được tạo liên kết, để làm điều này, bạn chỉ cần đặt thẻ bên trong phần tử. Trong trường hợp này, một khung sẽ xuất hiện xung quanh hình ảnh, có thể dễ dàng xóa khung này bằng cách sử dụng CSS:
Hình ảnh cũng có thể được sử dụng làm bản đồ hình ảnh - đây là nơi một hình ảnh chứa một số vùng hoạt động có hình dạng khác nhau, mỗi vùng là một liên kết riêng biệt. Một tấm thẻ như vậy trông không khác gì một hình ảnh thông thường.
Lưu ý: Để thêm hình ảnh vào trang web, bạn cũng có thể sử dụng thuộc tính CSS hình nền, cho phép bạn thay thế nền bình thường của thành phần bằng hình ảnh.
Thuộc tính
src: Cho trình duyệt biết vị trí (URL) của hình ảnh mong muốn. Ví dụ » alt: Cung cấp mô tả văn bản của ảnh, chỉ được hiển thị nếu ảnh không thể hiển thị vì lý do nào đó.Lưu ý: để tạo chú giải công cụ khi bạn di chuột qua hình ảnh, bạn cần sử dụng thuộc tính tiêu đề chung. Giá trị thuộc tính là một chuỗi tùy ý trong đó bạn có thể cung cấp thêm thông tin về hình ảnh.
Ví dụ » Nếu một hình ảnh được sử dụng làm vật trang trí cho trang web và không mang bất kỳ ý nghĩa ngữ nghĩa nào thì thay vì mô tả hình ảnh, bạn có thể để lại một dòng trống (alt="") làm giá trị. chiều cao: Chỉ định chiều cao của hình ảnh tính bằng pixel. ismap: Thuộc tính ismap là thuộc tính Boolean. Sự hiện diện của nó cho trình duyệt biết rằng hình ảnh là một phần của bản đồ hình ảnh nằm trên máy chủ (bản đồ hình ảnh là hình ảnh có các khu vực tương tác). Các giá trị hợp lệ cho thuộc tính boolean ismap:Lưu ý: thuộc tính ismap chỉ được sử dụng nếu phần tử là phần tử con của thẻ , chứa thuộc tính href.
Usemap: Xác định hình ảnh dưới dạng bản đồ hình ảnh. Giá trị (phải bắt đầu bằng ký tự "#") được chỉ định trong thuộc tính này được liên kết với giá trị của thuộc tính name hoặc id của thẻ
Lưu ý: thuộc tính usemap không thể được sử dụng nếu phần tử là hậu duệ của phần tử hoặc
Chiều rộng: Chỉ định chiều rộng của hình ảnh tính bằng pixel.
Lưu ý: Luôn chỉ định thuộc tính chiều rộng và chiều cao cho hình ảnh. Trong trường hợp này, không gian cần thiết cho hình ảnh sẽ được trình duyệt dành trước khi trang được tải. Vì bản thân trình duyệt không thể tính toán trước kích thước của hình ảnh nên nếu không có các thuộc tính này, bố cục trang có thể không hiển thị chính xác trong khi tải cho đến khi hình ảnh được tải. Điều này sẽ đặc biệt đáng chú ý đối với những người dùng có Internet chậm.
Trong tài liệu này, tôi sẽ cho bạn biết về các thẻ HTML rất quan trọng để chèn hình ảnh và đồ họa vào trang, vì nếu không có thẻ này thì rất khó để tạo ra một trang web đẹp và tốt.
Hình ảnh sẽ làm cho trang web của bạn trở nên độc đáo và khiến nó nổi bật giữa đám đông. Tuy nhiên, hãy nhớ rằng việc sử dụng quá nhiều đồ họa trên một trang web có thể là một điều không tốt.
Đừng làm quá tải trang html của bạn bằng hình ảnh; trang phải nhẹ nhàng và không khiến khách truy cập sợ hãi. Khách truy cập phải luôn tiếp thu thông tin chính và không bị phân tâm; chỉ chèn hình ảnh vào HTML khi cần thiết.
trên trang Thuộc tính thẻ BODY, tôi đã nói rằng hình ảnh có thể là nền của trang html và bây giờ tôi sẽ cho bạn biết cách sử dụng những hình ảnh tương tự này ở cấp độ cao hơn nền.
Và vì vậy, để chèn ảnh vào trang HTML, bạn sẽ cần có thẻ , có thuộc tính quan trọng nhất là SRC. Thuộc tính này là bắt buộc để chỉ ra địa chỉ của hình ảnh. Giả sử bạn cần đặt một hình ảnh image.jpg ở một nơi nào đó trên trang html và hình ảnh của chúng ta sẽ nằm trong cùng một thư mục (thư mục) với trang, khi đó bạn cần viết mã html sau:
Nếu hình ảnh và trang html nằm trong các thư mục hoặc thư mục khác nhau thì bạn cần ghi đường dẫn đến hình ảnh tương ứng với trang. Ví dụ: trang html của chúng ta nằm trong thư mục hoặc thư mục tin tức, trong cùng thư mục hoặc thư mục đó có một thư mục con (thư mục) pop, trong đó hình ảnh image.jpg của chúng ta nằm, sau đó để chèn nó bạn cần viết như thế này :
Ngoài thuộc tính src của thẻ Có một số thuộc tính tùy chọn nhưng quan trọng hơn:
- chiều rộng - chiều rộng hình ảnh (bạn có thể chỉ định pixel hoặc tỷ lệ phần trăm);
- chiều cao - chiều cao của hình ảnh (bạn có thể chỉ định pixel hoặc tỷ lệ phần trăm).
Nếu bạn không chỉ định các thuộc tính này, trình duyệt sẽ tải kích thước thực của hình ảnh. Tuy nhiên, bạn không nên lạm dụng giá trị của các thuộc tính này, vì việc tăng chiều dài hoặc chiều rộng của bức ảnh có thể làm biến dạng nó, điều này sẽ làm hỏng nó, chẳng hạn như một bức ảnh chụp một người, trong đó tỷ lệ của người đó sẽ thay đổi.
Như tôi đã viết, kích thước của hình ảnh có thể được chỉ định theo cả pixel và tỷ lệ phần trăm. Hãy để tôi cho bạn một ví dụ:
Một ví dụ khác về mã html:
Có những trường hợp khi khả năng hiển thị đồ họa, bao gồm cả hình ảnh, bị tắt trong trình duyệt và để trang của bạn không bị mất ý nghĩa, hãy sử dụng thuộc tính alt, trong đó chúng tôi viết văn bản thay thế nếu hình ảnh không được tải lên trang . mã html làm ví dụ:
- trái - hình ảnh sẽ nằm ở bên trái và văn bản bên cạnh nó sẽ ở bên phải;
- phải - hình ảnh sẽ nằm ở bên phải và văn bản bên cạnh nó sẽ ở bên trái.
Đây là mã HTML:
Văn bản bên cạnh hình ảnh.
và trình duyệt sẽ xuất ra kết quả như sau:
Văn bản bên cạnh hình ảnh.
Mã HTML cho giá trị phù hợp:
Văn bản bên cạnh hình ảnh.
trang html sẽ trông như thế này:
Văn bản bên cạnh hình ảnh.
Để ngăn văn bản bao quanh hình ảnh, bạn có thể sử dụng thẻ BR đã đề cập trước đó trên trang Định dạng văn bản trong HTML. Nhân tiện, thẻ BR có thuộc tính rõ ràng, với các giá trị giá trị riêng:
- trái - không ngắt dòng văn bản sẽ được căn chỉnh sang trái;
- phải - không ngắt dòng văn bản, văn bản này sẽ được căn chỉnh sang bên phải;
- tất cả - không ngắt dòng văn bản, văn bản này sẽ được căn chỉnh theo cạnh trái và phải.
Nếu không có thuộc tính căn chỉnh, văn bản sẽ bao quanh bên phải của hình ảnh theo mặc định và gần như phẳng. Nếu bạn muốn văn bản không bị quấn sát quanh hình ảnh, bạn có thể sử dụng các thuộc tính sau:
- vspace - tạo lề trên và lề dưới bằng pixel;
- hspace - tạo lề bên (trái và phải) bằng pixel.
Tôi sẽ đưa ra một mã html đơn giản làm ví dụ:
Đây quả là một bức tranh đẹp.
Hãy thử tự mình xem điều gì xảy ra trong ví dụ này.
Bạn cũng có thể tạo khung xung quanh hình ảnh bằng thuộc tính đường viền và chỉ định kích thước của nó bằng pixel. Giá trị càng cao, khung xung quanh hình ảnh càng lớn. Mã HTML sẽ như thế này:
trang html sẽ trông như thế này:
Tôi đã viết các thẻ HTML cơ bản cần thiết để chèn hình ảnh vào trang HTML. Tiếp theo, tôi sẽ cho bạn biết cách tạo liên kết trong HTML, cũng như cách tạo liên kết cho hình ảnh.
Ngày xuất bản: 15 tháng 5 năm 2012Tất cả những gì được biết về người đàn ông này là
rằng anh ta không ở trong tù, nhưng tại sao anh ta không ở trong tù thì không rõ.
Mark Twain.
Đây là bài học về cách chèn ảnh vào HTML, cách thiết kế nó, cách ngắt dòng văn bản xung quanh một bức tranh, v.v. Xét cho cùng, người ta biết rằng hình ảnh làm cho trang web trở nên hấp dẫn và khác biệt hơn so với các tài nguyên khác, vì vậy khả năng sử dụng thẻ và các thuộc tính của nó rất hữu ích trên Internet hiện đại. Nhưng điều chính ở đây là cảm giác cân đối!
Quá nhiều đồ họa sẽ làm cho trang html nặng hơn và do đó, tăng thời gian tải. Ngoài ra, sự hiện diện của một số lượng lớn hình ảnh sẽ khiến khách truy cập mất tập trung vào nội dung chính của trang web (tất nhiên trừ khi đồ họa là nội dung chính của trang web). Vì vậy, hãy giữ nó ở mức độ vừa phải và chỉ sử dụng khi cần thiết. Và bạn sẽ được hạnh phúc!
Trong bài học về, tôi đã nói về cách bạn có thể sử dụng hình ảnh làm nền của tài liệu HTML. Bây giờ hãy nói về cách sử dụng đồ họa trong “lớp trên cùng” của trang html.
§ 1. Cách chèn ảnh
Để chèn hình ảnh vào HTML, hãy sử dụng thẻ IMG Với bắt buộc thuộc tính SRC. Thuộc tính này cho trình duyệt biết đường dẫn đến tệp hình ảnh. Những thứ kia. để chèn một hình ảnh với tên logo.jpgđến một vị trí nhất định trên trang (với điều kiện là cả trang và hình ảnh đều nằm ở vị trí trong một thư mục(thư mục)), bạn cần chèn mã html sau vào chỗ này:
src="logo.jpg">
Nếu hình ảnh và trang nằm ở khác biệt thư mục (thư mục) thì bạn cần chỉ định đường dẫn tới ảnh tương đối trang. Ví dụ: nếu một trang html nằm trong thư mục (thư mục) trang web, trong cùng một thư mục (thư mục) có một hình ảnh thư mục con (thư mục), trong đó hình ảnh logo.jpg của chúng tôi nằm, thì để chèn nó, bạn cần phải viết như thế này:
hình ảnh/logo.jpg">
Hoặc bạn không cần phải lo lắng và chỉ ra địa chỉ đầy đủ của hình ảnh. Ví dụ như thế này:
http://www..png">
Trong trường hợp sau, trình duyệt sẽ hiển thị mã như thế này:
Ghi chú. Nếu hình ảnh được đặt trên máy tính của bạn, nhưng bạn muốn chèn nó đến trang Internet, thì sẽ chẳng có gì xảy ra cả. Để làm được điều này, trước tiên bạn phải di chuyển hình ảnh đến một nơi nào đó trên mạng(Ví dụ, ). Và cho biết địa chỉ đầy đủ trong mã trang cho đến thời điểm này với một hình ảnh.
Ngoài thuộc tính bắt buộc SRC tại thẻ IMG Có một vài thuộc tính tùy chọn hơn. Chúng ta hãy xem xét kỹ hơn về họ.
§ 2. Chỉ định kích thước của hình ảnh
Hãy bắt đầu với các thuộc tính cho phép bạn thiết lập kích thước hình ảnh(chính xác hơn là dành không gian cho các kích thước này trên các trang). Họ đây rồi:
- chiều rộng- chiều rộng hình ảnh tính bằng pixel hoặc phần trăm;
- chiều cao- chiều cao của hình ảnh tính bằng pixel hoặc phần trăm.
Nếu các thuộc tính này được sử dụng, trước tiên nó sẽ phân bổ không gian cho đồ họa, chuẩn bị bố cục tài liệu, hiển thị văn bản và chỉ sau đó mới tải hình ảnh. Đồng thời, nó sẽ đặt hình ảnh vào một hình chữ nhật có kích thước đã chọn, ngay cả khi chiều rộng và chiều cao thực tế của hình ảnh lớn hơn (nén) hoặc nhỏ hơn (kéo dài). Trong trường hợp các thuộc tính này không được sử dụng, trình duyệt sẽ tải hình ảnh ngay lập tức và việc hiển thị văn bản cũng như các thành phần khác theo sau nó sẽ bị trì hoãn.
Chiều rộng và chiều cao của hình ảnh có thể được chỉ định cả bằng pixel (kích thước của hình ảnh sẽ không đổi bất kể độ phân giải màn hình) và theo tỷ lệ phần trăm (kích thước của hình ảnh sẽ phụ thuộc vào độ phân giải màn hình của người dùng). Ví dụ:
chiều rộng="50" chiều cao="20">
width="10%" chiều cao="5%">
§ 3. Văn bản thay thế
Nếu người dùng đã tắt tính năng hiển thị hình ảnh trong cài đặt trình duyệt thì thay vì hình ảnh, văn bản thay thế có thể được hiển thị để giải thích loại đồ họa nào sẽ có ở đó. Điều này đạt được bằng cách sử dụng thuộc tính ALT:
Trong trường hợp này, trình duyệt sẽ dành không gian trên trang cho hình ảnh, nhưng thay vì chính hình ảnh đó, nó sẽ hiển thị văn bản bạn viết trong giá trị thuộc tính ALT:
Tôi nhắc lại, điều này sẽ xảy ra nếu người dùng tắt hiển thị đồ họa. Nếu không, hình ảnh sẽ ẩn văn bản thay thế.
§ 4. Căn chỉnh hình ảnh
Sử dụng thuộc tính bạn đã biết căn chỉnh bạn có thể kiểm soát việc căn chỉnh hình ảnh so với các thành phần khác của trang html. Tại thuộc tính căn chỉnh Có một số ý nghĩa, nhưng hiện tại chúng tôi quan tâm đến hai ý nghĩa nhất:
- bên trái- hình ảnh nằm ở cạnh trái của trang và văn bản chảy xung quanh hình ảnh ở bên phải;
- Phải- hình ảnh nằm ở cạnh phải của trang, văn bản và các phần tử khác chảy xung quanh hình ảnh ở bên trái.
Ví dụ: mã HTML
trình duyệt sẽ hiển thị như thế này
Và mã HTML này:
sẽ trông như thế này:
Để ngăn văn bản bao quanh hình ảnh, bạn có thể sử dụng thẻ BR(quen thuộc với chúng tôi từ phần trước về). Tại thẻ BR có một thuộc tính thông thoáng, có thể nhận ba giá trị:
- bên trái- dừng văn bản bao quanh các hình ảnh được căn trái;
- Phải- dừng văn bản bao quanh các hình ảnh được căn phải;
- tất cả- dừng văn bản bao quanh hình ảnh được căn chỉnh cả trái và phải.
Hình ảnh trên các trang web có thể được sử dụng theo hai cách: làm nền và làm hình ảnh độc lập. Nên sử dụng ba định dạng đồ họa: JPEG, GIF và PNG. Tất cả các trình duyệt đều hỗ trợ chúng; các định dạng khác có thể yêu cầu các công cụ đặc biệt.
Thông thường, tất cả hình ảnh của một trang web được lưu trữ trong một thư mục riêng, chẳng hạn như hình ảnh. Và đường dẫn đến hình ảnh được viết tương tự như trong các liên kết. Nếu bạn quên, hãy xem.
Trong tất cả các ví dụ tiếp theo, đường dẫn đến hình ảnh sẽ được viết dựa trên thực tế là hình ảnh nằm trong thư mục hình ảnh và các trang nằm trong thư mục trang web, nằm ở cùng cấp độ.
Hinh nên
Hình nền lấp đầy toàn bộ không gian của phần tử được chỉ định. Vì vậy, bằng cách chỉ định trong thẻ thuộc tính nền="fon.gif", hình ảnh fon.gif sẽ lấp đầy toàn bộ cửa sổ trình duyệt.
Mã mẫu: Kết quả
Khi chỉ định hình nền tài liệu, đừng quên chỉ định tham số màu sắc. Điều này là do người dùng có thể đã tắt tải hình ảnh và sẽ không nhìn thấy hình nền đẹp của bạn. Sau đó trình duyệt sẽ sử dụng tham số màu sắc.
Nhúng hình ảnh
Thẻ được sử dụng để đặt hình ảnh trên trang
, có một tham số bắt buộc src, trong đó chỉ định URL của hình ảnh.
Mã mẫu:
thẻ img Phần còn lại của nội dung tài liệu
Kết quả:
Phần còn lại của nội dung tài liệu
Đồng ý, dòng chữ bên cạnh bức ảnh trông không đẹp cho lắm.
Để hình ảnh của chúng ta trông như ý muốn, chúng ta cần căn chỉnh chúng. Và tham số sẽ giúp chúng ta điều này căn chỉnh.
Thông số này có một số ý nghĩa. Chúng ta hãy xem xét tất cả chúng với các ví dụ.
Mã ví dụ với tham số căn chỉnh="trái"
Thẻ img có tham số căn chỉnh = "trái" Hình ảnh nằm ở bên trái và văn bản bao quanh nó ở bên phải và văn bản này có thể chiếm một số dòng.
Kết quả:
Hình ảnh ở bên trái và văn bản bao quanh nó ở bên phải và văn bản này có thể chiếm một vài dòng.
Mã ví dụ với tham số căn chỉnh="đúng"
Thẻ img có tham số căn chỉnh = "right" Hình ảnh nằm ở bên phải và văn bản bao quanh nó ở bên trái và văn bản này có thể chiếm một số dòng.
Kết quả:
Hình ảnh ở bên phải và văn bản bao quanh nó ở bên trái và văn bản này có thể chiếm một số dòng.
Mã ví dụ với tham số căn chỉnh="trên cùng"
Thẻ img có căn chỉnh = "top" Đường viền trên cùng của hình ảnh được căn chỉnh theo phần tử cao nhất của dòng hiện tại. Hình ảnh dường như được nhúng trong dòng. Nếu hình ảnh lớn thì dòng sẽ được mở rộng đến độ cao này.
Kết quả:
Đường viền trên cùng của hình ảnh được căn chỉnh theo phần tử cao nhất của dòng hiện tại. Hình ảnh dường như được nhúng trong dòng. Nếu hình ảnh lớn thì dòng sẽ được mở rộng đến độ cao này.
Mã ví dụ với tham số căn chỉnh="texttop"
Thẻ img có căn chỉnh = "texttop" Đường viền trên cùng của hình ảnh được căn chỉnh theo thành phần văn bản cao nhất của dòng hiện tại (chữ in hoa của dòng).
Kết quả:
Đường viền trên cùng của hình ảnh được căn chỉnh theo thành phần văn bản cao nhất của dòng hiện tại (chữ in hoa của dòng).
Mã ví dụ với tham số căn chỉnh="giữa"
Thẻ img với tham số căn chỉnh = "giữa" Căn chỉnh phần giữa của hình ảnh với đường cơ sở của dòng hiện tại.
Kết quả:
Căn giữa hình ảnh với đường cơ sở của dòng hiện tại. * phông chữ lớn được tạo ra để làm cho sự khác biệt giữa phần giữa và phần giữa rõ ràng hơn
Mã ví dụ với tham số căn chỉnh="absmiddle"
thẻ img với tham số căn chỉnh = "absmiddle" Căn chỉnh giữa hình ảnh với giữa dòng hiện tại.
Kết quả:
Căn giữa hình ảnh với giữa dòng hiện tại.
Mã ví dụ với tham số căn chỉnh="dưới"
Thẻ img với tham số căn chỉnh = "dưới cùng" Căn chỉnh đường viền dưới cùng của hình ảnh với đường cơ sở của dòng hiện tại.
Kết quả:
Căn chỉnh đường viền dưới cùng của hình ảnh với đường cơ sở của dòng hiện tại.
Mã ví dụ với tham số căn chỉnh="absbottom"
Thẻ img với tham số căn chỉnh = "absbottom" Căn chỉnh đường viền dưới cùng của hình ảnh với đường viền dưới cùng của dòng hiện tại.
Kết quả:
Căn chỉnh đường viền dưới cùng của hình ảnh với đường viền dưới cùng của dòng hiện tại.
Nếu chúng ta muốn văn bản nằm dưới hình ảnh thì chúng ta cần sử dụng thẻ
với tham số thông thoáng, ngăn cản dòng chảy xung quanh. Việc gói có thể bị cấm ở bên phải (phải), bên trái (trái) và cả hai bên (tất cả).
Mã mẫu:
Cấm gói hình ảnh
Các thành phần khác của tài liệu
Kết quả:
Các thành phần khác của tài liệu
Kích thước hình ảnh
Bất kỳ hình ảnh nào cũng có kích thước được chỉ định bằng pixel. Khi nhúng hình ảnh vào một trang, bạn có thể cần giảm kích thước của hình ảnh gốc.
Với mục đích này, thẻ
có các thông số chiều rộng- chiều rộng và chiều cao- chiều cao. Chúng được chỉ định bằng pixel hoặc phần trăm (phần trăm chiều rộng màn hình)
Khi bạn tải hình ảnh, trình duyệt sẽ tự động chia tỷ lệ hình ảnh của bạn theo các thông số chiều rộng và chiều cao được chỉ định. Chỉ cần lưu ý rằng việc cài đặt tham số không chính xác có thể dẫn đến thay đổi tỷ lệ của hình ảnh và do đó làm biến dạng hình ảnh.
Mã mẫu:
Kết quả:
Tách hình ảnh khỏi văn bản
Bạn có thể nhận thấy rằng văn bản bám rất chặt vào hình ảnh. Nó không phải lúc nào cũng đẹp. Có những lựa chọn để giải quyết vấn đề này hspace- thụt ngang và vspace- thụt lề dọc. Thụt lề được chỉ định bằng pixel.
Mã mẫu:
Thẻ img được thụt vào, phần còn lại của nội dung tài liệu không còn bị dính vào hình ảnh nữa.
Kết quả:
Văn bản thay thế
Nếu người dùng tắt chế độ tải hình ảnh thì thay vì hình ảnh, họ sẽ thấy dấu chữ thập đỏ (trong Internet Explorer) hoặc một biểu tượng khác (trong các trình duyệt khác). Sẽ thật tuyệt nếu cho anh ấy gợi ý về những gì được hiển thị trong hình. Để làm điều này, sử dụng tham số thay thế. Văn bản từ tùy chọn này sẽ được hiển thị thay vì hình ảnh (nếu chế độ tải hình ảnh bị tắt). Nếu hình ảnh được hiển thị, tham số này sẽ đưa ra gợi ý khi di con trỏ chuột, mặc dù không phải ở tất cả các trình duyệt.
Hình ảnh HTMLđược thêm vào các trang web bằng thẻ . Việc sử dụng đồ họa làm cho các trang web trở nên hấp dẫn hơn về mặt hình ảnh. Hình ảnh giúp truyền tải tốt hơn bản chất và nội dung của tài liệu web.
Sử dụng thẻ HTML
Chèn hình ảnh vào tài liệu HTML
1. Gắn thẻ ![]()
Yếu tố đại diện cho một hình ảnh và nội dung dự phòng của nó, được thêm bằng thuộc tính alt. Vì phần tử
là chữ thường, nên đặt nó bên trong phần tử khối, ví dụ:
Hoặc
Nhãn có thuộc tính src bắt buộc, giá trị của thuộc tính này là đường dẫn tuyệt đối hoặc tương đối tới hình ảnh:
Đối với thẻ Các thuộc tính sau đây có sẵn:
Thuộc tính | Mô tả, giá trị được chấp nhận |
---|---|
thay thế | Thuộc tính alt thêm văn bản thay thế vào hình ảnh. Được hiển thị ở nơi hình ảnh xuất hiện trước khi được tải hoặc khi đồ họa bị tắt và cũng được hiển thị dưới dạng chú giải công cụ khi di chuột qua hình ảnh. Cú pháp: alt="mô tả hình ảnh" . !} |
nguồn gốc chéo | Thuộc tính crossorigin cho phép bạn tải hình ảnh từ tài nguyên trên miền khác bằng cách sử dụng yêu cầu CORS. Hình ảnh được tải vào canvas bằng yêu cầu CORS có thể được sử dụng lại. Giá trị được phép: ẩn danh - Yêu cầu có nguồn gốc chéo được thực hiện bằng tiêu đề HTTP và không có thông tin xác thực nào được truyền đi. Nếu máy chủ không cung cấp thông tin xác thực cho máy chủ mà nội dung được yêu cầu thì hình ảnh sẽ bị hỏng và việc sử dụng nó sẽ bị hạn chế. thông tin xác thực sử dụng - Yêu cầu nguồn gốc chéo được thực hiện bằng cách chuyển thông tin xác thực. Cú pháp: crossorigin="anonymous" . |
chiều cao | Thuộc tính chiều cao xác định chiều cao của hình ảnh. Có thể được chỉ định bằng px hoặc %. Cú pháp: chiều cao: 300px. |
bản đồ | Thuộc tính ismap chỉ ra rằng hình ảnh là một phần của hình ảnh bản đồ nằm trên máy chủ (hình ảnh bản đồ là hình ảnh có các khu vực có thể nhấp vào). Khi bạn nhấp vào hình ảnh bản đồ, tọa độ sẽ được gửi đến máy chủ dưới dạng chuỗi truy vấn URL. Thuộc tính ismap chỉ được phép nếu phần tử Cú pháp: ismap. |
longdesc | URL mô tả hình ảnh mở rộng bổ sung cho thuộc tính alt. Cú pháp: longdesc="http://www.example.com/description.txt" . |
src | Thuộc tính src chỉ định đường dẫn tới hình ảnh. Cú pháp: src="flower.jpg" . |
kích thước | Đặt kích thước hình ảnh tùy thuộc vào các tùy chọn hiển thị. Chỉ hoạt động khi thuộc tính srcset được chỉ định. Giá trị thuộc tính là một hoặc nhiều chuỗi, được phân tách bằng dấu phẩy. |
tập tin srcset | Tạo danh sách các nguồn hình ảnh sẽ được chọn dựa trên độ phân giải màn hình. Có thể được sử dụng cùng với hoặc thay thế thuộc tính src. Giá trị thuộc tính là một hoặc nhiều chuỗi, được phân tách bằng dấu phẩy. ![]() |
bản đồ sử dụng | Thuộc tính usemap chỉ định hình ảnh dưới dạng bản đồ hình ảnh. Giá trị phải bắt đầu bằng ký hiệu #. Giá trị được liên kết với giá trị của thuộc tính tên hoặc id của thẻ |
chiều rộng | Thuộc tính width chỉ định chiều rộng của hình ảnh. Có thể được chỉ định bằng px hoặc %. Cú pháp: chiều rộng: 100%. |
1.1. Địa chỉ hình ảnh
Địa chỉ hình ảnh có thể được chỉ định đầy đủ (URL tuyệt đối), ví dụ:
url(http://anysite.ru/images/anyphoto.png)
Hoặc thông qua một đường dẫn tương đối từ tài liệu hoặc thư mục gốc trang mạng:
url(../images/anyphoto.png) - đường dẫn tương đối từ tài liệu,
url(/images/anyphoto.png) - đường dẫn tương đối từ thư mục gốc.
Điều này được hiểu như sau:
../ - có nghĩa là đi lên một cấp, đến thư mục gốc,
hình ảnh/ - đi đến thư mục có hình ảnh,
Anyphoto.png - trỏ tới một tập tin hình ảnh.
1.2. Kích thước hình ảnh
Nếu không thiết lập kích thước hình ảnh, bản vẽ sẽ được hiển thị trên trang ở kích thước thực tế. Bạn có thể chỉnh sửa kích thước của hình ảnh bằng thuộc tính chiều rộng và chiều cao. Nếu chỉ một trong các thuộc tính được chỉ định, thuộc tính thứ hai sẽ được tính toán tự động để duy trì tỷ lệ của hình ảnh.
1.3. Các định dạng tệp đồ họa
định dạng JPEG (Nhóm chuyên gia nhiếp ảnh chung). Hình ảnh JPEG lý tưởng cho ảnh chụp và có thể chứa hàng triệu màu khác nhau. Hình ảnh nén tốt hơn GIF nhưng văn bản và các vùng đồng màu lớn có thể bị lem.
định dạng GIF (Thay đổi định dạng đồ họa). Lý tưởng để nén hình ảnh có các vùng màu đồng nhất, chẳng hạn như logo. GIF cho phép bạn đặt một trong các màu thành trong suốt, cho phép nền của trang web hiển thị qua một phần của hình ảnh. GIF cũng có thể bao gồm hoạt ảnh đơn giản. Hình ảnh GIF chỉ chứa 256 sắc thái, khiến hình ảnh trông có vẻ mờ và màu sắc không thực tế, giống như áp phích.
định dạng PNG (Biểu đồ minh họa mạng lưới không dây). Bao gồm các tính năng tốt nhất của định dạng GIF và JPEG. Chứa 256 màu và có thể làm cho một trong các màu trở nên trong suốt, đồng thời nén hình ảnh thành kích thước nhỏ hơn tệp GIF.
định dạng APNG (Đồ họa mạng di động hoạt hình). Một định dạng hình ảnh dựa trên định dạng PNG. Cho phép bạn lưu trữ hình ảnh động và cũng hỗ trợ tính minh bạch.
định dạng SVG (Đồ họa vectơ có thể mở rộng). Bản vẽ SVG bao gồm một tập hợp các hình dạng hình học được mô tả ở định dạng XML: đường thẳng, hình elip, đa giác, v.v. Cả đồ họa tĩnh và hoạt hình đều được hỗ trợ. Tập hợp các chức năng bao gồm nhiều phép biến đổi khác nhau, mặt nạ alpha, hiệu ứng bộ lọc và khả năng sử dụng mẫu. Hình ảnh SVG có thể được thay đổi kích thước mà không làm giảm chất lượng.
định dạng BMP (Ảnh bitmap). Đó là một hình ảnh bitmap không nén (gốc) có mẫu là một lưới pixel hình chữ nhật. Tệp bitmap bao gồm tiêu đề, bảng màu và dữ liệu đồ họa. Tiêu đề lưu trữ thông tin về hình ảnh và tệp đồ họa (độ sâu pixel, chiều cao, chiều rộng và số lượng màu). Bảng màu chỉ được biểu thị trong các tệp Bitmap có chứa hình ảnh bảng màu (8 bit trở xuống) và bao gồm không quá 256 phần tử. Dữ liệu đồ họa đại diện cho chính hình ảnh đó. Độ sâu màu ở định dạng này có thể là 1, 2, 4, 8, 16, 24, 32, 48 bit cho mỗi pixel.
định dạng ICO (Biểu tượng Windows). Định dạng lưu trữ biểu tượng tệp trong Microsoft Windows. Ngoài ra, biểu tượng Windows còn được sử dụng làm biểu tượng trên các trang web trên Internet. Đó là hình ảnh ở định dạng này được hiển thị bên cạnh địa chỉ trang web hoặc dấu trang trong trình duyệt. Một tệp ICO chứa một hoặc nhiều biểu tượng, kích thước và màu sắc của từng biểu tượng có thể được đặt riêng. Kích thước biểu tượng có thể là bất kỳ kích thước nào, nhưng phổ biến nhất là các biểu tượng hình vuông có cạnh 16, 32 và 48 pixel.
2. Gắn thẻ
Nhãn
Thẻ có sẵn thuộc tính tên, chỉ định tên của bản đồ. Giá trị của thuộc tính tên cho thẻ :
Yếu tố
3. Gắn thẻ
Nhãn chỉ mô tả một vùng hoạt động như một phần của bản đồ hình ảnh phía máy khách. Phần tử không có thẻ đóng. Nếu một khu vực hoạt động chồng lên một khu vực khác, liên kết đầu tiên từ danh sách các khu vực sẽ được triển khai.
Thuộc tính | Mô tả ngắn |
---|---|
thay thế | Đặt văn bản thay thế cho khu vực bản đồ đang hoạt động. |
dây coord | Xác định vị trí của khu vực trên màn hình. Tọa độ được tính theo đơn vị độ dài và được phân tách bằng dấu phẩy: Vì vòng tròn- tọa độ tâm và bán kính của đường tròn; Vì hình chữ nhật- tọa độ của góc trên bên trái và góc dưới bên phải; Vì đa giác- tọa độ của các đỉnh đa giác theo thứ tự yêu cầu; cũng nên chỉ ra tọa độ cuối cùng, bằng tọa độ đầu tiên, để hoàn thiện hình vẽ một cách hợp lý. |
Tải xuống | Bổ sung thuộc tính href và cho trình duyệt biết rằng tài nguyên sẽ được tải ngay khi người dùng nhấp vào liên kết, thay vì, chẳng hạn, phải mở nó trước (như tệp PDF). Bằng cách chỉ định tên cho một thuộc tính, chúng ta sẽ đặt tên cho đối tượng được tải. Nó được phép sử dụng một thuộc tính mà không cần chỉ định giá trị của nó. |
href | Chỉ định URL cho liên kết. Một địa chỉ liên kết tuyệt đối hoặc tương đối có thể được chỉ định. |
hreflang | Chỉ định ngôn ngữ của tài liệu web được liên kết. Chỉ được sử dụng cùng với thuộc tính href. Các giá trị được chấp nhận là tên viết tắt bao gồm một cặp chữ cái biểu thị mã ngôn ngữ. |
phương tiện truyền thông | Xác định loại thiết bị mà tập tin sẽ được tối ưu hóa. Giá trị có thể là bất kỳ truy vấn phương tiện nào. |
liên quan | Mở rộng thuộc tính href với thông tin về mối quan hệ giữa tài liệu hiện tại và tài liệu liên quan. Giá trị được chấp nhận: thay thế - liên kết đến phiên bản thay thế của tài liệu (ví dụ: dạng in của trang, bản dịch hoặc bản sao). tác giả - liên kết đến tác giả của tài liệu. dấu trang - URL cố định được sử dụng cho dấu trang. trợ giúp - liên kết để trợ giúp. giấy phép - liên kết đến thông tin bản quyền cho tài liệu web này. next/prev - cho biết mối quan hệ giữa các URL riêng lẻ. Nhờ đánh dấu này, Google có thể xác định rằng nội dung của các trang này có liên quan theo một trình tự hợp lý. nofollow - ngăn công cụ tìm kiếm theo dõi các liên kết trên một trang nhất định hoặc một liên kết cụ thể. noreferrer - cho biết rằng khi theo một liên kết, trình duyệt không được gửi tiêu đề yêu cầu HTTP (Referrer), tiêu đề này ghi lại thông tin về trang mà khách truy cập trang web đến. tìm nạp trước - chỉ ra rằng tài liệu đích cần được lưu vào bộ đệm, tức là Trình duyệt ở chế độ nền sẽ tải nội dung của trang xuống bộ đệm của nó. tìm kiếm - Cho biết tài liệu đích có chứa công cụ tìm kiếm. tag - chỉ định từ khóa cho tài liệu hiện tại. |
hình dạng | Chỉ định hình dạng của khu vực hoạt động trên bản đồ và tọa độ của nó. Có thể nhận các giá trị sau: trực tràng - khu vực hoạt động hình chữ nhật; vòng tròn - khu vực hoạt động có hình tròn; poly - vùng hoạt động có dạng đa giác; mặc định - vùng hoạt động chiếm toàn bộ diện tích của hình ảnh. |
mục tiêu | Chỉ định nơi tài liệu sẽ được tải xuống khi liên kết được nhấp vào. Chấp nhận các giá trị sau: _self - trang được tải vào cửa sổ hiện tại; _blank — trang sẽ mở trong cửa sổ trình duyệt mới; _parent - trang được tải vào khung chính; _top - trang tải trong cửa sổ trình duyệt đầy đủ. |
kiểu | Chỉ định loại MIME của tệp liên kết, tức là phần mở rộng tập tin. |
4. Ví dụ tạo bản đồ hình ảnh
1) Đánh dấu ảnh gốc thành các vùng hoạt động có hình dạng mong muốn. Tọa độ của các khu vực có thể được tính bằng chương trình xử lý ảnh, ví dụ: Adobe Photoshop hoặc Sơn.
![](https://i2.wp.com/html5book.ru/wp-content/uploads/2014/07/image-map.png)
2) Đặt tên thẻ bằng cách thêm thẻ vào thẻ .
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
!} Cơm. 2. Ví dụ tạo bản đồ hình ảnh, khi bạn click con trỏ chuột vào bông hoa, bạn sẽ đến trang có mô tả