Anh ấy vắng mặt. Hôm nay tôi sẽ chỉ cho bạn một phương pháp có thể áp dụng cho bất kỳ thẻ HTML nào và một lần nữa chúng ta sử dụng kiểu (CSS), hay đúng hơn là thuộc tính style. Cú pháp chung là:

<тег style="background:url("адрес картинки")">...

Đảm bảo đặt địa chỉ hình ảnh trong dấu ngoặc đơn như được hiển thị. Và nếu bạn muốn làm ảnh nền cho toàn bộ trang thì hãy sử dụng style bên trong thẻ .

<тег style="background:#цвет url("адрес картинки")">...

Xin lưu ý rằng không cần đặt dấu chấm phẩy ở giữa vì cả hai giá trị đều liên quan đến nền. Khi ghi theo cách này, đầu tiên trình duyệt hiển thị hình nền chứ không phải màu sắc. Bây giờ hãy tưởng tượng rằng hình nền của bạn là một bức vẽ có màu tối và bạn đã đặt màu văn bản trên trang thành màu trắng. Và mọi thứ trông thật tuyệt vời... Cho đến khi người dùng tắt hiển thị hình ảnh trên trình duyệt. Khi đó nền của nó rất có thể sẽ trở thành màu trắng, giống như màu văn bản của bạn.

Ví dụ tạo ảnh nền trong HTML

Chòm sao ở khoảng cách trên bầu trời
Nhiều người đã cam chịu những suy nghĩ vô ích.
Hãy suy nghĩ lại, hãy giữ lấy sự tỉnh táo của bạn -
Những người khôn ngoan nhất đã đi vào ngõ cụt.
Omar Khayyam.

Những cái bàn

Thông thường, các bảng trong HTML không được sử dụng cho mục đích dự định - hiển thị dữ liệu dạng bảng mà để tạo khung trang toàn cầu. Nghĩa là, một bảng được tạo, kéo dài hết chiều rộng của trang, sau đó một menu được tạo ở cột bên trái, một menu khác ở cột bên phải, thông tin cơ bản được đặt ở mức trung bình, v.v.

Có ba loại bố cục: dạng bảng, như tôi đã nói ở trên; lớp (khối), đòi hỏi trình độ hiểu biết trung bình về kiểu (CSS) và kết hợp. Trong nhiều khía cạnh, bố cục khối vẫn được ưa chuộng hơn, do đó, nếu người thiết kế bố cục có thể hoàn thành nhiệm vụ bằng cách sử dụng cả bảng và khối thì cái sau thường được chọn.

Chúc mọi người một ngày tốt lành, những người bạn thân yêu, những độc giả và khách ghé thăm blog của tôi. Giống như bạn đang đi nghỉ nhưng không có đủ thời gian cho bất cứ việc gì. Mọi thứ đều vội vàng. Nhưng hiện tượng này chỉ là tạm thời, mọi chuyện sẽ sớm lắng xuống. Và hôm nay chúng ta sẽ tiếp tục tìm hiểu những kiến ​​thức cơ bản về html. Các bạn nghĩ sao, nếu không có nó thì bất kỳ trang Internet nào cũng sẽ trở nên vô nghĩa, xám xịt và nhàm chán? Đúng vậy, không có nội dung đồ họa, có thể là ảnh, logo hoặc hình nền.

Vì vậy, chèn hình ảnh vào html cũng là một trong những thành phần quan trọng nhất nên ai có ý định tự làm website chắc chắn phải biết. Đây chính xác là những gì chúng ta sẽ làm hôm nay với tất cả bacchanalia này)))

Vâng, hãy bắt đầu. Như bạn đã hiểu từ tiêu đề, thẻ có nhiệm vụ chèn hình ảnh , nhưng nó có hai sắc thái:

1. Thẻ là duy nhất nên không cần phải đóng nó
2. Thẻ luôn hoạt động cùng với thuộc tính chỉ định đường dẫn đến hình ảnh.

Nói chung, hãy xem một ví dụ để củng cố tất cả hành động này. Tôi có đúng không? Tải tài liệu bài học và mở tệp html trong Notepad. Và bây giờ trước văn bản chính hãy viết như sau:

Tất cả. Mục ngắn này sẽ cung cấp cho chúng tôi một hình ảnh trên trang web của chúng tôi. Hãy thử viết nó trong một tài liệu.

Bây giờ hãy lưu tệp và chạy nó trong trình duyệt của bạn. Hãy xem chúng ta có thể làm gì. Tôi đã làm nó như thế này.

Thuộc tính

Như tôi đã nói ở trên, thẻ img ngay lập tức đi kèm với thuộc tính src. Chà, tôi nghĩ bạn đã hiểu điều này rồi, vậy hãy nghiên cứu phần còn lại. Có chỗ để mở rộng ở đây. Chỉ có rất nhiều thuộc tính ở đây. Xin lỗi về tiếng Pháp của tôi).

thay thế

Nếu đột nhiên vì lý do nào đó mà hình ảnh không được tải hoặc không thể truy cập được, bạn sẽ thấy văn bản được viết bằng giá trị của thuộc tính Alt. Thông thường những gì được viết ở đây là những gì được hiển thị trong hình, tức là. nếu mô tả điều gì đó về các dân tộc, thì tốt nhất nên viết “Đàn ông và phụ nữ thuộc các quốc tịch khác nhau”. Trong một ví dụ nó trông như thế này:

Kết quả là, nếu vì lý do nào đó mà hình ảnh không thể hiển thị được thì dòng chữ của chúng tôi sẽ xuất hiện.

Về nguyên tắc, bạn không cần phải nhập bất cứ thứ gì làm văn bản thay thế, nhưng tốt hơn là bạn nên để nguyên thuộc tính đó, ngay cả khi nó trống.

Chiều rộng và chiều cao

Đối với những người biết tiếng Anh, không khó để đoán rằng hai thuộc tính này chịu trách nhiệm về chiều rộng và chiều cao của hình ảnh. Tôi quyết định kết hợp hai thứ này thành một món đồ, vì chúng thực hiện các chức năng tương tự nhau, người ta có thể nói - anh em (hoặc chị em).

Chiều rộng chịu trách nhiệm về chiều rộng của hình ảnh và các giá trị của nó bao gồm chính kích thước đó. Nói chung, nếu bạn có một hình ảnh, chẳng hạn như 640*480 pixel và bạn cần hiển thị nó trên trang web 320*240, thì bạn chỉ cần thực hiện những việc sau:

Tất cả. Bây giờ, khi bạn lưu tài liệu và mở nó bằng trình duyệt, bạn sẽ thấy hình ảnh thu nhỏ. Lưu ý rằng chúng tôi chỉ thay đổi tham số chiều rộng và hình ảnh được giảm theo tỷ lệ, tức là. chiều cao tự động giảm xuống.

Height , như bạn có thể đoán, chịu trách nhiệm về chiều cao của hình ảnh. Ở đây mọi thứ hoạt động giống hệt nhau, nhưng theo chiều dọc. Chúng ta hãy chụp cùng một bức ảnh, nhưng chúng ta sẽ không đặt chiều rộng mà chỉ đặt chiều cao.

Lưu và đi đến tài liệu. Như bạn có thể thấy, hình ảnh đã được giảm kích thước giống như trong ví dụ trước, mặc dù lần này chúng ta chỉ đặt chiều cao. Bạn đã hiểu rằng mọi thứ ở đây đều hoạt động trong khuôn khổ tỷ lệ, vì vậy về nguyên tắc, việc thiết lập cả hai tham số chẳng ích gì.

Hãy thử đặt các thuộc tính cho cả chiều rộng và chiều cao cùng một lúc, nhưng chúng ta sẽ chỉ cung cấp cho chúng các tham số không cân xứng. Được rồi, vậy chúng ta sẽ xem chúng ta có thể làm được gì.

Chúng tôi tiết kiệm và bây giờ nhìn vào những gì đã được trao cho chúng tôi. Hmm, đây là một cái gì đó không cân xứng). Nói chung, tôi nghĩ bạn hiểu được ý chính của nó. Hãy tự mình thực hành một chút để củng cố công việc với các kích thước, sau đó chuyển sang thuộc tính tiếp theo.

Căn chỉnh

Chà, bạn đã quen thuộc với thuộc tính này từ bài viết đó khi chúng ta thực sự xem xét nó. Và có lẽ bạn đã đoán được rằng anh ấy chịu trách nhiệm về vị trí của hình ảnh.

Có tổng cộng năm tham số để căn chỉnh:

• trái - căn lề trái
• phải - căn lề phải
• ở giữa - căn chỉnh hình ảnh theo đường cơ sở của đường thẳng (bạn sẽ thấy điều này có nghĩa là gì trong ví dụ)
• trên cùng - đường viền trên cùng của hình ảnh này được căn chỉnh theo chiều cao với phần tử cao nhất trong hàng nhất định
• 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

Chà, chúng ta đừng liệt kê chúng ở đây, nhưng theo truyền thống, tôi sẽ chỉ ra mọi thứ bằng một ví dụ. Tải xuống tài liệu html đã hoàn thành từ đây và mở nó. Ở đó bạn sẽ thấy 5 đoạn giống hệt nhau. Chèn ảnh với các thuộc tính được mô tả vào đó:

Chà, bây giờ chúng ta lưu tài liệu của mình như bình thường và xem chúng ta có được gì. Tốt? Bạn có thấy sự khác biệt? Bây giờ bạn đã biết các tham số này khác nhau như thế nào).

Ranh giới

Thuộc tính border được thiết lập để biểu thị độ dày của khung trên ảnh. Và nó càng lớn thì khung hình càng dày. Hãy thử thêm thuộc tính này vào ảnh, nhưng liên tục thay đổi giá trị của nó và bạn sẽ tự mình thấy khung hình trở nên dày hơn bao nhiêu.

Hspace và Vspace

Chà, hôm nay chúng ta hãy xem các thuộc tính mới nhất của thẻ img. Space (tiếng Anh) được dịch là space, space, space (key), v.v. Tiền tố H và V có nghĩa là ngang và dọc. Không nên có bất kỳ câu hỏi nào ở đây.

Vậy những thuộc tính này có tác dụng gì? Họ đặt lề dọc và ngang từ hình ảnh đến văn bản xung quanh (hoặc nội dung khác). Nghĩa là, nếu bạn không thích hình ảnh quá gần với văn bản thì bạn có thể tăng khoảng cách giữa chúng. Hãy xem điều này trông như thế nào bằng một ví dụ.

Bạn có thấy? Biên độ đã tăng lên cả theo chiều dọc và chiều ngang. Đây là những gì chúng tôi muốn.

Nhân tiện, bạn cũng có thể chèn những hình ảnh này làm tiêu đề cho trang web, tạo hình ảnh làm liên kết, v.v. Tôi đã nói về tất cả điều này trong.

À, nói chung là tôi dường như có tất cả mọi thứ. Tôi đã nói với bạn những điều cơ bản về chèn hình ảnh, nhưng nếu bạn muốn học HTML và CSS như một người chuyên nghiệp, tôi thực sự khuyên bạn nên tải xuống khóa học tuyệt vời về chủ đề này, nhờ ngôn ngữ đánh dấu này và các biểu định kiểu xếp tầng, bạn có thể dễ dàng tạo ba loại trang web: danh thiếp, blog, cửa hàng trực tuyến. Mọi thứ đều được kể bằng ngôn ngữ đơn giản và dễ hiểu. Nó chỉ là một quả bom thôi!

Thôi, hôm nay tôi xin tạm biệt bạn. Chỉ trong một vài bài học, tôi dự định cung cấp cho bạn bài học cuối cùng về những điều cơ bản về HTML, sau đó chúng ta sẽ củng cố tất cả kiến ​​thức đã thu được trong thực tế và tạo một trang web ba trang đơn giản. Nói chung là mọi chuyện sẽ ổn thôi)

Chà, để không bỏ lỡ tất cả những điều thú vị nhất trên blog của tôi, hãy nhớ đăng ký nhận thông tin cập nhật bài viết. Và tất nhiên, hãy xem các bài viết khác. Tôi chắc chắn rằng bạn sẽ tìm thấy rất nhiều thông tin hữu ích cho chính mình. Chúc bạn may mắn. Hẹn gặp lại bạn ở những bài viết khác. Tạm biệt!

Trân trọng, Dmitry Kostin

Điều này cho phép hiển thị nội dung của một trang khác trong cùng một trang. Ví dụ:

Hầu hết hình ảnh mà một người nhìn thấy trên các trang web cũng là nội dung từ một trang khác. Cụ thể, đây là địa chỉ của biểu tượng cảm xúc ở định dạng .gif:

Dưới đây là các cách để thêm ảnh vào một trang web, bạn có thể đánh dấu các cách này nếu bạn xem mã trang:

HTML: thẻ
http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="smiley" height="30" width="30"> !}
CSS: thuộc tính và
CSS: các phần tử giả và
HTML: thẻ đồ họa vector
CSS: không có URL

Cách tìm địa chỉ của một bức ảnh và sao chép nó

Có một số cách để sao chép địa chỉ hình ảnh:

1. Đặt con trỏ lên ảnh, nhấp chuột phải, trong menu ngữ cảnh xuất hiện, bạn sẽ được yêu cầu sao chép URL, nhấp vào mục yêu cầu.
   Hình 1 Nếu bạn chỉ vào ảnh và nhấp vào nút chuột phải, menu ngữ cảnh với các mục sau sẽ mở ra trong Mozilla Firefox
2. Đặt con trỏ lên ảnh, nhấp chuột phải, trong menu ngữ cảnh xuất hiện, bạn sẽ được yêu cầu nghiên cứu các đặc điểm của ảnh, nhấp vào mục yêu cầu (trong Hình 1, xem mục “Thông tin hình ảnh” ; trong Internet Explorer, hãy xem mục "Thuộc tính"), trong cửa sổ mở ra, chọn địa chỉ của hình ảnh,
   • Nhấp chuột phải vào chuột và nhấp vào “Sao chép” trong menu ngữ cảnh xuất hiện.
   
   Hình 2 Nếu bạn trỏ vào một bức ảnh trong Mozilla Firefox, nhấp chuột phải vào chuột, chọn “Thông tin hình ảnh” trong menu ngữ cảnh xuất hiện, một cửa sổ sẽ mở ra nơi bạn có thể xem danh sách các hình ảnh được sử dụng trên trang, địa chỉ, văn bản thay thế (nội dung trong thuộc tính alt), kích thước và tỷ lệ thực tế được sử dụng
3. Đặt con trỏ lên ảnh, nhấp chuột phải, trong menu ngữ cảnh xuất hiện, bạn sẽ được yêu cầu chuyển đến trang ảnh, nhấp vào mục yêu cầu (trong Hình 1, xem mục “Mở ảnh”) . Một trang sẽ mở ra chỉ chứa một hình ảnh. Chiều cao đầy đủ nếu trước đó đã được giảm bớt bằng cách sử dụng hoặc sử dụng CSS. Chọn địa chỉ của trang mở ra trên thanh địa chỉ của trình duyệt,
   • Nhấn phím tắt Ctrl + C.
   
   Hình.3 Trang biểu tượng cảm xúc trông như thế này.
   URL của cô ấy: http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
4. Trên các thiết bị cảm ứng (điện thoại thông minh, máy tính bảng), giữ ngón tay trên ảnh một lúc lâu mà không di chuyển, trong menu ngữ cảnh xuất hiện, bạn sẽ được yêu cầu chuyển đến trang ảnh, nhấp vào mục yêu cầu (có thể được gọi là “Xem hình”). Một trang sẽ mở ra chỉ chứa một hình ảnh. Ở độ cao tối đa nếu trước đó nó đã được giảm kích thước bằng cách sử dụng hoặc sử dụng CSS. Sau đó nhấn và giữ địa chỉ trên thanh địa chỉ của trình duyệt. Sau khi các thanh trượt xuất hiện và toàn bộ URL được chọn (nếu cần, các thanh trượt có thể được di chuyển đến khoảng cách cần thiết), hãy nhấp vào nút “Sao chép” trong bảng xuất hiện.
5. Đặt con trỏ lên ảnh, bấm chuột phải, trong menu ngữ cảnh hiện ra bạn sẽ được yêu cầu chuyển đến trang ảnh nền, bấm vào mục cần thiết. Một trang sẽ mở ra chỉ chứa một hình ảnh. Chiều cao đầy đủ nếu trước đó đã được giảm bằng CSS. Chọn địa chỉ của trang mở ra trên thanh địa chỉ của trình duyệt (xem Hình 3),
   • Nhấp vào nút chuột phải và chọn “Sao chép” trong menu ngữ cảnh xuất hiện.
   • Nhấn phím tắt Ctrl + C.
   
   

Cách lưu hình ảnh

Đặt con trỏ lên ảnh, nhấp chuột phải, trong menu ngữ cảnh xuất hiện, bạn sẽ được yêu cầu lưu ảnh, nhấp vào mục được yêu cầu (trong Hình 1, xem mục “Lưu hình ảnh dưới dạng... ”), trong cửa sổ mở ra, hãy chọn một thư mục trên máy tính của bạn để lưu bản vẽ.

Nếu ảnh là ảnh nền thì trước tiên bạn phải vào trang hình ảnh (xem Hình 3).

Cách thêm hình ảnh vào trang web

Đầu tiên, hình ảnh phải được tải từ máy tính của bạn lên máy chủ lưu trữ trang web, lên mạng xã hội (VKontakte, Google+ v.v.), Yandex.Disk hoặc Google.Disk, để ảnh có địa chỉ riêng trên Internet.

Nếu có trình soạn thảo trực quan thì chuỗi hành động thường như sau:

1. đặt con trỏ chuột vào nơi ảnh sẽ xuất hiện,
2. nhấp vào biểu tượng tương tự hoặc tương tự,
3. chọn một tập tin từ máy tính của bạn,
4. nếu có thể, hãy điền văn bản thay thế (hay còn gọi là mô tả hình ảnh).

Kết quả: hình ảnh sẽ được chèn vào trang web và quan trọng nhất là được tải lên máy chủ dự án web. Bây giờ cô ấy sẽ có địa chỉ riêng của mình trên Internet. Và bây giờ bạn có thể chỉnh sửa mã do trình chỉnh sửa trực quan cung cấp trên tab “HTML”, vì trình chỉnh sửa trực quan thường thêm các thẻ không cần thiết và khả năng của HTML và CSS lớn hơn rất nhiều.

Nếu đã có URL, nhưng từ một trang web khác ít được biết đến, thì tốt hơn hết bạn nên lưu một bức ảnh như vậy vào máy tính của mình rồi tải nó lên máy chủ của trang web, nếu hành động này được chủ sở hữu bức ảnh cho phép, vì vậy để không vi phạm bản quyền, vì

• Một số trang web có thể cấm sử dụng địa chỉ hình ảnh trên các tài nguyên khác (đọc thêm về việc cấm liên kết nóng).
• các trang web chỉ tồn tại trong thời gian ngắn và sau một thời gian, khi dự án web bị xóa, hình ảnh trên trang web của bạn cũng sẽ biến mất, tốt nhất chỉ để lại văn bản thay thế ở vị trí của nó.

Nếu không có trình soạn thảo trực quan thì chuỗi hành động thường như sau:

1. tạo một thư mục hình ảnh,
2. tạo một tệp .htaccess trong thư mục hình ảnh, nội dung của nó sẽ được # đóng quyền truy cập vào http://site.ru/image/ Tùy chọn -Chỉ mục # đóng quyền truy cập vào http://site.ru/image/.htaccess ra lệnh cho phép, từ chối từ chối tất cả
3. tải hình ảnh lên thư mục hình ảnh, chẳng hạn như có tên là plain.gif (trong tương lai, tất cả các hình ảnh cũng sẽ được tải lên thư mục này),
4. trên trang HTML, hãy sử dụng URL như http://site.ru/image/plain.gif, chẳng hạn: http://site.ru/image/plain.gif" alt="smiley" height="30" width="30">!}

Xin chào độc giả blog thân yêu! Trong bài viết này bạn sẽ tìm hiểu mọi thứ về cách chèn hình ảnh vào trang html. Bạn có một số hình ảnh muốn đưa lên trang của mình hay bạn muốn đặt một biểu tượng trên trang web của mình? Tất cả điều này là dễ dàng. Sau khi đọc bài viết này, bạn sẽ có thể chèn hình ảnh vào trang html của mình mà không gặp bất kỳ khó khăn nào. Để làm điều này, chúng ta sẽ nói chi tiết về nhãn và các thuộc tính của nó, chúng ta sẽ xem nhanh các định dạng tệp đồ họa như gif, jpeg và png, đồng thời xem xét các tính năng HTML5 mới giúp chèn video và âm thanh vào trang web của bạn dễ dàng hơn.

Vì dữ liệu đồ họa và văn bản html không thể kết hợp trong một tệp nên chúng được hiển thị trên một trang web khác với các thành phần khác của trang html. Trước hết, hình ảnh đồ họa và dữ liệu đa phương tiện khác được lưu trữ trong các tệp riêng biệt. Và để nhúng chúng vào trang web, các thẻ đặc biệt được sử dụng có chứa liên kết đến các tệp riêng lẻ này. Đặc biệt, một thẻ như vậy là nhãn . Khi gặp một thẻ có địa chỉ như vậy, trước tiên trình duyệt sẽ yêu cầu tệp tương ứng có hình ảnh, âm thanh hoặc video từ máy chủ Web và chỉ sau đó mới hiển thị nó trên trang Web.

Tất cả các hình ảnh đồ họa và nói chung, bất kỳ dữ liệu nào được lưu trữ trong các tệp riêng biệt với trang web đều được gọi là thực hiện các phần tử trang.

Trước khi chèn ảnh và xem tag chi tiết , đáng để tìm hiểu một chút về các định dạng đồ họa.

Các định dạng hình ảnh đồ họa.

Có nhiều định dạng đồ họa khác nhau nhưng trình duyệt chỉ hỗ trợ một số ít. Chúng ta hãy nhìn vào ba trong số họ.

1. định dạng JPEG(Nhóm chuyên gia nhiếp ảnh chung). Một định dạng khá phổ biến được sử dụng để lưu trữ hình ảnh. Hỗ trợ màu 24-bit và giữ nguyên toàn bộ tông màu trong ảnh. Nhưng jpeg không hỗ trợ độ trong suốt và làm biến dạng các chi tiết và văn bản nhỏ trong hình ảnh. JPEG được sử dụng chủ yếu để lưu trữ ảnh. Các tệp ở định dạng này có phần mở rộng là jpg, jpe, jpeg.

2. định dạng GIF(Thay đổi định dạng đồ họa). Ưu điểm chính của định dạng này là khả năng lưu trữ nhiều hình ảnh cùng một lúc trong một tệp. Điều này cho phép bạn tạo toàn bộ video hoạt hình. Thứ hai, nó hỗ trợ tính minh bạch. Hạn chế chính là nó chỉ hỗ trợ 256 màu, không phù hợp để lưu trữ ảnh. GIF chủ yếu được sử dụng để lưu trữ logo, banner, hình ảnh có vùng trong suốt và chứa văn bản. Các tệp ở định dạng này có phần mở rộng là gif.

3. định dạng PNG(Biểu đồ minh họa mạng lưới không dây). Định dạng này được phát triển để thay thế cho GIF cũ và ở một mức độ nào đó là JPEG. Hỗ trợ tính minh bạch nhưng không cho phép hoạt ảnh. Định dạng này có phần mở rộng png.

Khi tạo trang web, họ thường sử dụng hình ảnh ở định dạng JPEG hoặc GIF, nhưng đôi khi họ sử dụng PNG. Điều chính là phải hiểu trong trường hợp nào nên sử dụng định dạng nào tốt hơn. Nói ngắn gọn:

JPEG được sử dụng tốt nhất để lưu trữ ảnh hoặc ảnh thang độ xám không chứa văn bản;

• GIF được sử dụng chủ yếu cho hoạt ảnh;
• PNG là định dạng cho mọi thứ khác (biểu tượng, nút, v.v.).

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

Vậy làm cách nào để chèn hình ảnh vào trang web? Bạn có thể chèn một hình ảnh bằng cách sử dụng một nhãn . Trình duyệt đặt hình ảnh vào vị trí trên trang web nơi nó gặp thẻ .

Code chèn hình ảnh vào html trang trông như thế này:

Mã html này sẽ đặt trên trang web một hình ảnh được lưu trong tệp image.jpg, nằm trong cùng thư mục với trang web. Như bạn có thể nhận thấy, địa chỉ của bức ảnh được ghi trong thuộc tính src. Tôi đã nói với bạn nó là gì rồi. Vì vậy, thuộc tính src là thuộc tính bắt buộc dùng để chỉ địa chỉ của tệp có hình ảnh. Nếu không có thuộc tính src thì thẻ img sẽ vô nghĩa.

Dưới đây là một số ví dụ khác về việc chỉ định địa chỉ của tệp bằng hình ảnh:

- mã html này sẽ chèn một hình ảnh có tên image.jpg vào trang, được lưu trong thư mục hình ảnh nằm ở thư mục gốc của trang web.

Thuộc tính src có thể chứa nhiều thứ hơn là chỉ các liên kết tương đối đến hình ảnh. Vì hình ảnh được lưu trữ trực tuyến cùng với các trang html nên mỗi tệp hình ảnh đều có url riêng. Vì vậy, bạn có thể chèn url hình ảnh vào thuộc tính src. Ví dụ:

Mã này sẽ chèn hình ảnh từ trang mysite.ru vào trang. URL thường được sử dụng khi bạn trỏ tới một hình ảnh trên một trang web khác. Đối với hình ảnh được lưu trữ trên trang web của bạn, tốt hơn nên sử dụng các liên kết tương đối.

Nhãn là một phần tử nội tuyến, vì vậy tốt hơn nên đặt nó bên trong một phần tử khối, ví dụ như bên trong một thẻ

- đoạn văn:

Hãy cùng thực hành và chèn hình ảnh từ các bài viết trước về html vào trang của chúng ta. Tôi sẽ tạo một thư mục “hình ảnh” bên cạnh tệp html trên trang của mình và đặt tệp hình ảnh “bmw.jpg” vào đó, trông như thế này:

Khi đó mã html của trang có hình ảnh được chèn sẽ như sau:

Trang web về ô tô.

Chào mừng bạn đến với trang web ô tô của chúng tôi. Tại đây bạn sẽ tìm thấy nhiều bài viết thú vị và hữu ích về ô tô, các đặc tính và tính năng kỹ thuật của chúng.

Ngôn ngữ khoa học ô tô Cái này:

Xe cơ giới đường bộ không đường ray có ít nhất 4 bánh.

Phân loại ô tô

Ô tô có các loại sau:

• Xe chở khách;


• Hàng hóa;


• SUV;


• Lỗi;


• Nhặt lên;


• Các môn thể thao;


• Cuộc đua.

Đã đăng ký Bản quyền. 2010
Trang web về ô tô.

Và nhìn kết quả hiển thị trên trình duyệt:

Như chúng ta thấy, không có gì phức tạp khi đặt hình ảnh trên các trang web. Tiếp theo, hãy xem xét một số thuộc tính thẻ quan trọng khác. .

Thuộc tính alt là một tùy chọn dự phòng

Vì các tệp hình ảnh được lưu trữ riêng biệt với các trang web nên trình duyệt phải đưa ra các yêu cầu riêng để truy xuất chúng. Nhưng nếu trang có nhiều hình ảnh và tốc độ kết nối mạng thấp thì việc tải thêm file sẽ mất một khoảng thời gian đáng kể. Và còn tệ hơn nếu hình ảnh bị xóa khỏi máy chủ mà bạn không hề hay biết.

Trong những trường hợp này, trang web sẽ tải thành công, chỉ có hình chữ nhật màu trắng được hiển thị thay vì hình ảnh. Vì vậy, để cho người dùng biết hình ảnh đó là gì, . Sử dụng thuộc tính này, bạn chỉ định cái gọi là văn bản thay thế, văn bản này sẽ được hiển thị trong một hình chữ nhật trống cho đến khi hình ảnh được tải:

Và đại khái nó trông như thế này:

Đặt kích thước của hình ảnh

Vẫn còn một số thuộc tính của thẻ img mà bạn nên biết. Đây là một vài thuộc tính chiều rộng Và chiều cao. Bạn có thể sử dụng những thông số này để chỉ định kích thước hình ảnh:

chiều rộng="300" chiều cao="200">

Cả hai thuộc tính đều chỉ ra kích thước trong điểm ảnh. Thuộc tính chiều rộng cho trình duyệt biết hình ảnh phải rộng bao nhiêu và thuộc tính chiều cao phải cao bao nhiêu. Hai thuộc tính này có thể được sử dụng cùng nhau hoặc riêng biệt. Ví dụ: nếu bạn chỉ chỉ định thuộc tính chiều rộng thì trình duyệt sẽ tự động chọn chiều cao tương ứng với chiều rộng đã chỉ định và cả trong trường hợp chỉ sử dụng thuộc tính chiều cao. Nếu bạn không chỉ định các thuộc tính này, trình duyệt sẽ tự động xác định kích thước của hình ảnh trước khi hiển thị trên màn hình. Điều đáng lưu ý là việc chỉ định kích thước hình ảnh sẽ tăng tốc trình duyệt một chút khi hiển thị trang.

Bây giờ đó là tất cả về việc chèn hình ảnh vào các trang, sau đó chúng ta sẽ xem cách chèn âm thanh hoặc video vào trang web...

Chèn video và âm thanh bằng HTML 5

Đặc tả html5 mới giới thiệu một số thẻ mới giúp nhúng các tệp phương tiện rất dễ dàng. Điều này chủ yếu áp dụng cho video và âm thanh.

Chèn vào âm thanh HTML5 cung cấp thẻ ghép nối Địa chỉ của tệp lưu trữ clip âm thanh được biểu thị bằng thuộc tính src đã quen thuộc với chúng ta:

Nhãn

Theo mặc định, đoạn âm thanh không được hiển thị trên trang web. Nhưng nếu trong thẻ

Thẻ ghép nối được sử dụng để chèn video vào trang web . Với thẻ này, mọi thứ đều giống như với thẻ

Không còn nhiều điều để nói về việc chèn hình ảnh và đa phương tiện vào trang html. Tôi hy vọng câu hỏi “Làm cách nào để chèn hình ảnh vào trang html?” Tôi đã trả lời bạn. vì vậy tôi sẽ chỉ tóm tắt:

Vì chèn hình ảnh vào html trang sử dụng một thẻ duy nhất và cho biết địa chỉ của file có hình ảnh trong thuộc tính src: ;

• bằng cách sử dụng thuộc tính thay thế nhãn bạn có thể đặt văn bản thay thế trong trường hợp hình ảnh không tải được;
• sử dụng thuộc tính chiều rộng Và chiều cao bạn có thể đặt kích thước hình ảnh trên trang web;
• có các thẻ ghép nối để chèn âm thanh và video vào html5

Nếu có điều gì chưa rõ ràng, hãy hỏi trong phần bình luận và đừng quên đăng ký nhận thông tin cập nhật trên blog của tôi. Hẹn gặp lại các bạn ở những bài viết tiếp theo!

Tiếp theo, chúng ta sẽ xem cách chèn ảnh vào tài liệu HTML và định cấu hình hiển thị của nó. Để làm việc, bạn chỉ cần trình soạn thảo và trình duyệt nêu trên.

Nếu bạn vẫn không có Notepad++ hoặc gặp sự cố khi tải xuống và bạn đang bị dày vò bởi câu hỏi - làm cách nào để chèn ảnh vào html trong notepad?

Câu trả lời rất đơn giản, làm việc trong sổ ghi chú thông thường chỉ khác ở chỗ nó không làm nổi bật mã bằng các màu khác nhau để dễ đọc và tách mã khỏi chính văn bản.

Cách chèn ảnh vào trang HTML

Sau khi cài đặt trình chỉnh sửa, mục tương ứng sẽ xuất hiện trong menu ngữ cảnh xuất hiện khi bạn nhấp chuột phải vào bất kỳ tệp nào.

Bây giờ, để chỉnh sửa một tệp như vậy, chỉ cần mở menu ngữ cảnh bằng cách nhấp chuột phải vào tệp đó, sau đó “Chỉnh sửa bằng Notepad++”.

Một trang thử nghiệm sẽ được sử dụng để quan sát kết quả của những thay đổi trong mã.

Để chèn hình ảnh vào mã html, hãy sử dụng thẻ một dòng hình ảnh. Thuộc tính chính của nó là nguồn của bức ảnh.

Đây có thể là bất kỳ tệp nào, trên ổ cứng hoặc liên kết đến hình ảnh hiện có trên mạng. Đóng khung bằng thẻ < p> p>.

Để thêm ảnh, bạn cần nhập dòng sau:

Đây là giao diện của nó trong trình chỉnh sửa:

Và đây là cách sự hiện diện của nó sẽ được hiển thị trên trang:

Src cho biết nguồn của hình ảnh. Một tên tệp là đủ nếu tệp hình ảnh nằm trong cùng thư mục với tài liệu html.

Nếu ảnh nằm trong một thư mục khác, thì bạn sẽ cần chỉ định đường dẫn đến nó, bắt đầu từ thư mục chứa tệp html.

Khuyên bảo!Điều quan trọng cần lưu ý là đường dẫn đến tệp ảnh nhất định không được chứa các ký tự Cyrillic. Ngoài ra, khi viết tên file, chữ hoa chữ thường rất quan trọng.

Bạn có thể sử dụng hình ảnh minh họa trên Internet làm nguồn. Để làm điều này, bạn chỉ cần chỉ ra một liên kết đến nó trong thuộc tính, thay vì vị trí trên ổ cứng.

Bảng định dạng đường dẫn tệp

Để thay đổi kích thước hình ảnh, bạn sẽ cần thêm hai thuộc tính: chiều rộng Và chiều cao. Giá trị được định dạng giống như đối với bất kỳ thuộc tính nào.

Sau dấu bằng, bạn phải chỉ định kích thước bằng pixel.

Nếu hình minh họa có kích thước được xác định rõ ràng, nó sẽ được hiển thị trên trang như sau:

Căn chỉnh và chỉnh sửa ảnh

Làm cách nào để chèn ảnh bằng html vào giữa? Để chỉ định vị trí của hình ảnh trên trang, hãy sử dụng căn chỉnh, liên quan đến thẻ P.

Một số giá trị được phép cho nó: trung tâm(trung tâm), bên trái(cạnh trái) và Phải(Cạnh phải).

Đây là hình ảnh trên trang, được căn giữa ở cạnh phải.

Quan trọng!Để chỉ định vị trí của ảnh so với văn bản chứ không phải trang, thuộc tính căn chỉnh phải được sử dụng trong thẻ img. Các giá trị giống như đối với thuộc tính thẻ.

Tùy thuộc vào giá trị được chỉ định, hình ảnh sẽ thay đổi vị trí so với văn bản.

Để đặt hình ảnh vào văn bản, chỉ cần nhập thẻ hình ảnh(với tất cả các đường viền) trong một khối văn bản ở định dạng .

Để thêm đường viền, hãy sử dụng thuộc tính đường viền có giá trị số cho biết độ dày của đường viền tính bằng pixel.

Để đặt lề dọc và ngang, hãy sử dụng vspace Và hspace. Giá trị số của chúng có nghĩa là khoảng cách từ văn bản đến hình ảnh, trực tiếp bằng pixel.

Trong ví dụ, thuộc tính vspace giá trị được đặt thành 50 pixel.

Kích thước đệm ngang sẽ cho biết khoảng cách mà văn bản sẽ được đặt khi bao quanh hình ảnh.

Hai thuộc tính hữu ích hơn - thay thế Và tiêu đề. Cái đầu tiên đặt văn bản thay thế cho hình ảnh.

Với nó, nếu hình ảnh không tải vì lý do nào đó, thay vào đó, văn bản được chỉ định trong giá trị thuộc tính sẽ được hiển thị.

Để thử khả năng của thuộc tính, bạn có thể di chuyển tệp từ thư mục được chỉ định trong mã.

Văn bản được chỉ định làm giá trị thuộc tính tiêu đề, sẽ hiển thị chú giải công cụ khi bạn di chuột trực tiếp lên hình ảnh. Trong mã, thiết kế của nó không khác gì các thuộc tính khác.

Sau khi tải lại trang kết quả sẽ như thế này:

Bảng thuộc tính thẻ hình ảnh