Chúng tôi thêm hình ảnh vào trang WEB cũng như video và âm thanh! Cách chèn ảnh vào HTML - chỉnh sửa, căn chỉnh, thuộc tính

Rất khó để tìm thấy một trang web trên Internet không chứa hình ảnh và điều này không có gì đáng ngạc nhiên vì chúng là phần chính của thiết kế trang web, mang lại cho nó một cái nhìn đáng nhớ. Một thiết kế trang web tốt là chìa khóa cho sự phát triển thành công của nó. Để hiển thị hình ảnh trong html chỉ có một thẻ .

1. Cú pháp thẻ

Mô tả hình ảnh" src ="URL " [thuộc tính ]>

Xin lưu ý rằng thẻ này là duy nhất và không yêu cầu thẻ đóng .

Thuộc tính src là bắt buộc. Nó được sử dụng để chỉ định địa chỉ của hình ảnh được hiển thị. Bạn có thể chỉ định một URL tuyệt đối hoặc tương đối. Nếu bạn không chỉ định địa chỉ hoặc viết sai, hình ảnh sẽ không được hiển thị.

Thuộc tính alt="description" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}

Các thuộc tính còn lại là tùy chọn; chúng ta sẽ xem xét chúng bên dưới. Đầu tiên, hãy đưa ra một ví dụ đơn giản về xuất hình ảnh sang HTML.

2. Cách chèn ảnh vào html

Để chèn hình ảnh vào html, hãy sử dụng thẻ . Chúng tôi đã xem xét cú pháp cao hơn một chút. Hãy đưa ra những ví dụ thực tế.

Ví dụ 2.1. Sử dụng thẻ

... ...

Mã này

Trong ví dụ này, chúng tôi đã chỉ ra địa chỉ trực tiếp của hình ảnh từ các ảnh trên Yandex Photos. Thông thường, các liên kết được cung cấp cho các hình ảnh nằm trên cùng một URL. Ví dụ: src="/img/kartinka.jpg", tức là địa chỉ tương đối được chỉ định.

Có thể đặt nhiều hình ảnh liên tiếp. Nếu chúng không vừa trên một dòng, chúng sẽ tự động chuyển sang dòng tiếp theo.

Ví dụ 2.2. Hiển thị lần lượt nhiều hình ảnh trong html

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Chuyển đổi thành phần sau trên trang:

Nếu chúng ta đặt một hình ảnh khác, nó sẽ nằm trên một dòng mới vì nó sẽ không còn vừa với hình ảnh này nữa.

Ví dụ 2.3. Sử dụng văn bản thay thế (alt) trong img

Nên đưa văn bản thay thế (thuộc tính alt) vào thẻ , để tự bảo hiểm trong trường hợp hình ảnh không có sẵn. Dưới đây là một ví dụ sử dụng văn bản thay thế. Trong trường hợp đầu tiên, chúng tôi không chỉ định kích thước của hình ảnh, nhưng trong trường hợp thứ hai, chúng tôi sẽ làm như vậy.

... Hình ảnh ví dụ"src="321.jpg">...

Chuyển đổi thành phần sau trên trang:

Nếu chúng ta đặt một hình ảnh khác, nó sẽ nằm trên một dòng mới vì nó sẽ không còn vừa với dòng này nữa.

Bây giờ chúng ta hãy xem xét kỹ hơn tất cả các thuộc tính thẻ .

3. Thuộc tính và thuộc tính của thẻ

1. Thuộc tính Align="parameter" - xác định căn chỉnh của hình ảnh. Giá trị này cũng ảnh hưởng đến cách văn bản chạy xung quanh hình ảnh. Có thể chấp nhận các tham số sau:

• căn trái - trái
• giữa - căn giữa hình ảnh với đường cơ sở của dòng hiện tại
• phía dưới - căn chỉnh đường viền dưới cùng của hình ảnh với văn bản xung quanh
• 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
• căn lề phải - phải

Ví dụ 3.1. Căn chỉnh hình ảnh trong html sang phải

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Chuyển đổi thành phần sau trên trang:

2. Thuộc tính alt="text" - подсказка/описание картинки. Выполняет сразу две важные функции:!}

• Hiển thị chú giải công cụ khi di chuột
• Nếu hình ảnh bị tắt trong trình duyệt, văn bản này sẽ được hiển thị

Thuộc tính này cũng rất quan trọng khi xếp hạng hình ảnh trong Yandex Images và Google Images. Nó nên được thêm vào mỗi hình ảnh, vì đây là một trong những yếu tố trong thuật toán của công cụ tìm kiếm.

Ví dụ 3.2. Xuất hình ảnh dưới dạng html có khung (viền)

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Chuyển đổi thành phần sau trên trang:

4. Thuộc tính bordercolor="color" - đặt màu của đường viền bao quanh hình ảnh. Chỉ có ý nghĩa nếu thuộc tính đường viền lớn hơn 0.

Ví dụ 3.3. Xuất hình ảnh bằng html có khung màu

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Kết quả có thể được nhìn thấy ngay ở trên.

Các thuộc tính đường viền và màu viền có thể được đặt theo kiểu CSS của img:

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

5. Thuộc tính chiều cao="NUMBER" - đặt chiều cao của hình ảnh: tính bằng pixel hoặc theo phần trăm. Ví dụ: nếu một hình ảnh có kích thước 400x200 và chúng tôi chỉ định chiều cao 150 pixel thì hình ảnh đó sẽ được nén thành 300x150 (nhỏ hơn 25%), tức là. một cách tương xứng.

6. Thuộc tính width="NUMBER" - đặt chiều rộng của hình ảnh: tính bằng pixel hoặc theo phần trăm. Ví dụ: nếu hình ảnh có kích thước 1000x800 và chiều rộng được chỉ định là 1200 pixel thì hình ảnh đó sẽ tự động được mở rộng thêm 20% thành 1200x960.

7. Thuộc tính hspace="NUMBER" - đặt thụt lề ngang của hình ảnh theo pixel từ các đối tượng html khác.

8. Thuộc tính vspace="NUMBER" - đặt không gian dọc của hình ảnh tính bằng pixel từ các đối tượng html khác.

Thay vì hspace và vspace, tôi khuyên bạn nên sử dụng lề cũ và đã được chứng minh (bạn có thể đọc thêm về nó trong bài học về mô tả kiểu html). Hãy để tôi nhắc nhở bạn một cách ngắn gọn:

• lề trên: X px; (X - thụt lề trên cùng)
• lề dưới: Y px; (Y - thụt lề dưới)
• lề trái: L px; (L - thụt lề trái)
• lề phải: R px; (R - thụt lề phải)

Đặt thụt lề từ các đối tượng bằng pixel. Giá trị âm được cho phép. Theo mặc định, nó kế thừa giá trị của tổ tiên hoặc có giá trị bằng 0.

Ví dụ. Phần đệm bên trái là 50 pixel và phần đệm trên cùng là 10 pixel.

... lề trên: 10px; lề trái:50px"src=" https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Chuyển đổi thành phần sau trên trang:

Trong ví dụ này, mức thụt lề ở trên cùng là 10 pixel, ở bên trái là 50 pixel.

9. Thuộc tính class="class_name" - bạn có thể gán một lớp cho một hình ảnh để đặt kiểu cho tất cả các hình ảnh của lớp này.

4. Cách tạo link ảnh

Câu hỏi này nảy sinh giữa các quản trị viên web trẻ. Nó thực sự rất dễ dàng. Để làm điều này, chỉ cần đóng khung thẻ thẻ (liên kết).

... địa chỉ hình ảnh"> ...

5. Cách làm tròn các góc của hình ảnh

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"style="bán kính đường viền: 30px">

Bạn đọc thân mến, bây giờ bạn đã biết thêm nhiều điều về thẻ html img. Bây giờ tôi khuyên bạn nên chuyển sang bài học tiếp theo.

Chúng tôi hy vọng rằng bài viết này sẽ hữu ích cho bạn. Chúc bạn đọc vui vẻ!

Hình ảnh ngay lập tức cho chúng ta hiểu mức độ thú vị của một trang web hoặc bài viết nhất định đối với chúng ta, chúng tạo ra tâm trạng và có thể tiết lộ một chủ đề theo một cách mới. Đôi khi một bức ảnh có giá trị bằng cả ngàn lời nói.

Nhưng bạn không nên tham gia nếu bạn không có Instagram hoặc cửa hàng trực tuyến. Đó là khuyến khích rằng các hình ảnh:

• có nhiều thông tin
• phù hợp với bảng màu của trang web của bạn
• thích hợp

Nếu bạn không có một bức ảnh phù hợp, bạn có thể sử dụng cái gọi là ảnh chụp (ngân hàng ảnh) - nơi lưu trữ nhiều bức ảnh, hình minh họa và đồ họa vector. Có rất nhiều tài nguyên như vậy, bạn thậm chí có thể đã nghe nói về một trong những tài nguyên lớn nhất - Shutterstock, nhưng việc tải xuống ở đó phải trả phí.

Đối với những người không thích trả quá nhiều, ở cuối bài viết chúng tôi đã chuẩn bị thưởng- danh sách một số ngân hàng ảnh nơi bạn có thể tải xuống một lượng lớn tài liệu đẹp chất lượng cao hoàn toàn miễn phí :)

Định dạng hình ảnh

Có 3 loại hình ảnh chủ yếu được sử dụng trên World Wide Web:

gif(Thay đổi định dạng đồ họa - định dạng trao đổi hình ảnh)

Đây là định dạng đầu tiên bắt đầu được sử dụng trên Internet. Ưu điểm của hình thức này là tính sẵn có hoạt hình và kích thước nhỏ, trang tải nhanh. Ngoài ra, nó hỗ trợ tính minh bạch. Nhược điểm - chỉ được sử dụng 256 màu(đó thực sự là lý do tại sao kích thước lại nhỏ), tức là nó không thể được sử dụng cho hình ảnh đầy đủ màu sắc.

jpeg, hay còn gọi là jpg(Nhóm chuyên gia nhiếp ảnh chung - Nhóm chuyên gia nhiếp ảnh chung -đây là tên của tổ chức phát triển)

thích hợp để tạo ra những hình ảnh đầy màu sắc, chất lượng cao, những bức ảnh. Kích thước của những hình ảnh như vậy lớn nên chúng thường gây tải lớn cho máy chủ. Nếu bạn cần nén jpeg (để có dung lượng hình ảnh nhỏ hơn), chúng tôi khuyên bạn nên lấy kích thước của hình ảnh cuối cùng bội số của tám , do đó việc giảm chất lượng sẽ ở mức tối thiểu.

png(Biểu đồ minh họa mạng lưới không dây - Biểu đồ minh họa mạng lưới không dây. Được phát âm giống như ping, tức là )

định dạng này ban đầu được phát triển cho web, tức là. Hình ảnh thường có trọng lượng nhẹ và không làm chậm trang khi tải. Định dạng này được tạo ra để thay thế gif đã lỗi thời, nhưng không giống như nó, nó không hỗ trợ hoạt ảnh. PNG-8, giống như gif, chỉ sử dụng 256 màu. Định dạng png-24 hỗ trợ 16 triệu màu, mặc dù nó đã khá nặng. PNG-32 chứa cùng số lượng màu như png-24 và hơn nữa nó cho phép bạn có được hình ảnh với nền trong suốt và bạn có thể điều chỉnh mức độ trong suốt. Khi giảm kích thước của png sẽ không làm giảm chất lượng màu sắc.

Hãy tóm tắt

gif- cho hoạt hình

jpeg- cho các bức ảnh

png- dành cho biểu tượng, nút, hình nền, logo, ảnh chụp màn hình, hình vẽ, văn bản, ảnh có nền trong suốt

Chèn hình ảnh vào file html

Để thêm ảnh vào trang, hãy sử dụng nhãn (từ hình ảnh tiếng Anh - hình ảnh, hình ảnh).Đây là một thẻ duy nhất và không cần thẻ đóng. Thẻ này chứa các thuộc tính.

Thuộc tính src(từ nguồn tiếng Anh - source) cho biết đường dẫn đến tệp (nơi đặt hình ảnh). Nếu hình ảnh nằm trên máy tính của bạn (trang web vẫn đang được phát triển) hoặc trên máy chủ của bạn, hãy sử dụng một liên kết tương đối. Nếu hình ảnh từ mạng thì cần có liên kết tuyệt đối. Đọc cách thực hiện việc này trong bài viết "Liên kết".

Vì vậy, để kết nối một hình ảnh với trang web của bạn, bạn cần viết mã như thế này:

thuộc tính thay thế(từ tiếng Anh thay thế - thay thế) cho biết văn bản mà người dùng sẽ thấy nếu hình ảnh không tải. Đường dẫn được chỉ định không chính xác, hình ảnh đã bị xóa, Internet kém - có thể có nhiều lý do và điều mong muốn là người đó hiểu được điều gì ẩn sau biểu tượng đáng ghét này.

Các công cụ tìm kiếm rất chú ý đến việc đảm bảo rằng thuộc tính này được điền đầy đủ. Và trình xác thực html (một tài nguyên để kiểm tra tính chính xác của mã) sẽ coi việc thiếu thuộc tính alt là một lỗi. Nếu tất cả các thuộc tính sẽ được điền và cũng chứa các từ khóa nếu có thể - khả năng hiển thị trang web của bạn sẽ tăng lên đáng kể, tức là. nó sẽ được hiển thị thường xuyên hơn trong các tìm kiếm. Đây là từ lĩnh vực SEO, và ở giai đoạn này, chúng ta chỉ cần biết rằng có một thuộc tính như vậy là đủ và một trang web “trực tiếp” phải điền thuộc tính đó. Mặc dù trang web nằm trên đĩa của chúng tôi, nhưng bạn hoàn toàn có thể để trống.

Trong ví dụ bên dưới, chúng tôi đã cố tình chỉ định một đường dẫn không tồn tại cho hình ảnh để bạn có thể thấy thuộc tính alt hoạt động như thế nào

Chiều cao và chiều rộng của hình ảnh

Bạn cũng có thể đặt chiều cao và chiều rộng của hình ảnh nếu hình ảnh gốc là ví dụ: nhiều hơn bạn cần.

Trong HTML5, bạn nên thực hiện việc này bằng CSS hoặc thuộc tính phong cách , như thế này:

Trong ví dụ này, chúng tôi lấy 30% chiều rộng, không phải của hình ảnh gốc mà là kích thước cửa sổ trình duyệt. Khi chiều rộng = 100%, hình ảnh sẽ mở ra toàn bộ chiều rộng của trình duyệt. Hãy nhớ tính năng này phần trăm, là đơn vị đo lường.

Nhân tiện, nếu chúng ta chỉ viết chiều rộng thì kết quả sẽ giống nhau, hãy thử:

Bạn cũng có thể đặt chiều rộng và chiều cao trong điểm ảnh. Trong trường hợp gấu trúc của chúng tôi, có kích thước ban đầu là 1196 x 796 pixel, để con vật không bị ảnh hưởng khi bị nén, chúng tôi cần duy trì tỷ lệ và ở đây bạn không thể làm gì nếu không có máy tính. Giả sử chúng ta muốn giảm kích thước của hình ảnh xuống 3 lần thì chúng ta cần đặt kích thước thành 399 x 265 pixel.

Xin lưu ý rằng nếu chúng ta phóng to hình ảnh theo tỷ lệ thì chỉ cần chỉ định một tham số là đủ. chiều rộng. Bản thân trình duyệt thông minh sẽ tính toán kích thước đầy đủ của hình ảnh.

Hãy thử chạy đoạn mã này và xem kết quả:

Luôn đặt kích thước hình ảnh. Thông thường, hình ảnh mất nhiều thời gian để tải hơn phần còn lại của mã html. Nếu trình duyệt biết cần dành bao nhiêu dung lượng cho hình ảnh, nó có thể tiếp tục tải trang web mà không cần đợi hình ảnh tải.

Một chút băng phiến

Nếu bạn tình cờ mày mò mã của một trang web được tạo bằng HTML-4 hoặc thậm chí sớm hơn, bạn sẽ nhận thấy rằng kích thước hình ảnh được đặt bằng cách sử dụng đặc biệt thuộc tính chiều rộng Và chiều cao. Đây là một phương pháp không được dùng nữa, mặc dù vẫn hợp lệ trong HTML5. Tuy nhiên, chúng tôi khuyên bạn nên sử dụng phong cách, bởi vì... Các thuộc tính chiều rộng và chiều cao có thể bị ảnh hưởng bởi các kiểu bên trong hoặc bên ngoài sẽ tồn tại trong trình duyệt hoặc tệp CSS của bạn. Chúng ta sẽ đi vào chi tiết hơn về điều này khi xem xét CSS, nhưng bây giờ chỉ xem một ví dụ về cách các kiểu ảnh hưởng đến thuộc tính chiều cao và chiều rộng.

Có 3 tab trong cửa sổ này: ở tab đầu tiên bạn nhìn thấy mã html, ở mã CSS thứ 2 và ở tab cuối cùng - như mọi khi, là kết quả. Điều này hoạt động như thể tab đầu tiên là tệp index.html, tệp style.css thứ hai và tệp thứ ba là trình duyệt. Vì vậy, bây giờ CSS của chúng tôi nói rằng tất cả các thành phần có thẻ img có chiều rộng 100%. Kích thước mặc định của thuộc tính chiều rộng và chiều cao được tính bằng pixel, do đó không cần thêm bất kỳ đơn vị nào ở đây.

Sự khác biệt về kết quả là rõ ràng :)

Ngoài ra, trong các phiên bản html cũ hơn, các thuộc tính sau đã được sử dụng:

căn chỉnh, được sử dụng để căn chỉnh hình ảnh theo chiều ngang hoặc chiều dọc.

hspace- thụt lề bên trái và bên phải của hình ảnh với nội dung xung quanh (ví dụ: văn bản hoặc hình ảnh liền kề)

vspace- thụt lề trên và dưới từ hình ảnh đến nội dung xung quanh nó.

ranh giới- đặt độ dày của khung xung quanh hình ảnh (theo mặc định là 0)

Ngày nay, tất cả thao tác này (và nhiều thao tác khác) được thực hiện bằng CSS, vì vậy chúng tôi quyết định không làm phiền bạn ở đây. Nếu bạn vẫn quan tâm đến cách làm việc với các thuộc tính này, hãy viết bình luận, chúng tôi sẽ thêm mục này :)

Đặt hình ảnh vào mã

Từ nơi chúng tôi đặt thẻ của mình phụ thuộc vào cách nó sẽ được hiển thị trong trình duyệt.

Ví dụ số 1 - trước đoạn văn:

Các yếu tố như

VÀ

tham khảo khối phần tử . Chúng luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn của cửa sổ trình duyệt. Nếu bạn đứng đầu , và sau nó là phần tử khối, ví dụ như một đoạn văn, nó sẽ được chuyển sang dòng tiếp theo.

Ví dụ số 2 - ở đầu đoạn văn

Đây là phần tử nội tuyến, nó nằm gọn trong phần tử khối và không bắt đầu dòng mới. Trong ví dụ trên, văn bản bao quanh hình ảnh vì mã đăng ký bên trong

Chú thích cho hình ảnh minh họa

Để đánh dấu hoặc ký tên vào một bức ảnh trên một trang, hãy sử dụng nhãn