Thực đơn
trang chủInternet

Chèn hình ảnh vào HTML. Chèn một tập tin đồ họa vào một trang web

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 này 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 tôi 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 tôi 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 cả bằng pixel và 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 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:

  • left - không ngắt dòng văn bản, văn bản này sẽ được căn chỉnh sang trái;
  • bên 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 2012

26.06.2015


Chào mọi người!
Chúng tôi tiếp tục chăm chỉ nghiên cứu những điều cơ bản về HTML.
Trong bài học này tôi sẽ nói với bạn, cách chèn ảnh vào HTML-tài liệu, cách lấy ảnh làm nền, kích thước ảnh, dòng văn bản bao quanh ảnh, cách căn chỉnh ảnh. Tôi sẽ củng cố tất cả các khả năng được liệt kê bằng các ví dụ và kết quả.
Vì vậy, hình ảnh trên các trang web có thể là hình nền hoặc hình ảnh thông thường. Sự khác biệt giữa hình nền và hình ảnh thông thường là gì?

Hình nền được đặt làm nền trên đó bạn có thể chèn các hình ảnh, văn bản, bảng biểu khác, v.v.

Hình ảnh bình thường sẽ đẩy lùi các thành phần khác của trang (hình ảnh, văn bản, bảng biểu khác, v.v.). Sử dụng ví dụ này, bạn sẽ thấy và hiểu mọi thứ.
Đối với các trang web, nên sử dụng định dạng ảnh JPEG (JPG), GIF và PNG.

○ Cách tạo ảnh làm nền trongHTML

Để làm hình ảnh nền cho một thẻ bạn cần chỉ định thuộc tính “nền”:

Bây giờ hãy xem ví dụ đầy đủ. Chèn file ảnh “fon.jpg” bên cạnh file HTML.

và chèn mã này vào tệp HTML:

Jpg">

Kết quả sẽ như thế này:

Chú ý

Sai tên:

Tên chính xác:

○ Cách chèn hình ảnh vàoHTML

Để chèn hình ảnh vào tài liệu HTML, hãy sử dụng thẻ với tham số “src”, chỉ định đường dẫn hoặc địa chỉ tới hình ảnh.

Bây giờ hãy xem ví dụ đầy đủ. Chèn tệp hình ảnh “kartinka.jpg” bên cạnh tệp HTML và viết mã này vào tệp HTML:

Trang HTML đầu tiên của tôi cho trang web Xin chào, đây là trang đầu tiên của tôi trên trang web.

Kết quả sẽ như thế này:

Chú ý: Tên của hình ảnh phải được viết bằng tiếng Latin, nếu không hình ảnh sẽ không được hiển thị.

Sai tên:

Tên chính xác:

Tôi nghĩ bạn đã hiểu mọi thứ cho đến thời điểm này. Bây giờ hãy thử kết hợp hai ví dụ lại với nhau. Hãy tạo nền cho trang web, chèn hình ảnh và văn bản.

Jpg">

○ Cách chèn ảnh nếu nó có trong thư mục "hình ảnh" hoặc "hình ảnh"?

Nếu ảnh nằm trong thư mục “img” hoặc “hình ảnh”, thì bạn cần chỉ định đường dẫn từ tệp HTML đến thư mục “img” hoặc “hình ảnh”, sau đó chỉ cần nhập tên của ảnh có phần mở rộng. Nó sẽ trông giống thế này:

Nếu ảnh nằm trên một trang web hoặc blog khác, thì bạn cần cho biết địa chỉ trang web và, nếu cần, thư mục chứa ảnh. Tất nhiên, bạn cần chỉ ra tên của hình ảnh cùng với phần mở rộng của nó.

Bài trước
Mục tiếp theo

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 ơi, 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

Khi di chuyển trên Internet, tất nhiên bạn sẽ thấy nhiều hình ảnh, biểu ngữ, ảnh chụp và hình ảnh đồ họa khác nhau trên nhiều trang web. Hôm nay chúng ta sẽ học cách chèn hình ảnh vào trang HTML.

Việc thêm hình ảnh diễn ra theo hai giai đoạn: đầu tiên, một tệp đồ họa có kích thước và định dạng được yêu cầu sẽ được chuẩn bị, sau đó nó được thêm vào trang web thông qua thẻ: . Bản thân tài liệu HTML chỉ nhằm mục đích hiển thị hình ảnh được yêu cầu, trong khi mà không thay đổi nó chút nào.

Có một số điều cần cân nhắc khi chuẩn bị hình ảnh của bạn.

1. Vì trang web được tải qua mạng nên một yếu tố quan trọng là kích thước ("trọng lượng") của tệp đồ họa, được nhúng trong tài liệu web. Nó càng nhỏ thì hình ảnh sẽ được hiển thị càng nhanh.

2. Thông thường, kích thước vật lý của hình ảnh (chiều rộng và chiều cao) cần được giới hạn (giảm) theo chiều rộng và chiều cao. Ví dụ: đặt chiều rộng không quá 700-800 pixel. Nếu không, toàn bộ hình ảnh sẽ không vừa với cửa sổ trình duyệt và các thanh cuộn sẽ xuất hiện.

Định dạng đồ họa cho trang web

Hai định dạng chính được sử dụng rộng rãi nhất cho đồ họa web là: GIF Và JPEG. Trên thực tế, những phẩm chất như: tính đa chức năng, tính linh hoạt, khối lượng tệp nguồn nhỏ với chất lượng đủ tốt đã phục vụ tốt các định dạng này, trên thực tế, xác định chúng là tiêu chuẩn cho hình ảnh trên web.

Ngoài ra còn có một định dạng: PNG, cũng được trình duyệt hỗ trợ khi thêm hình ảnh và có hai loại: PNG-8 Và PNG-24. Tuy nhiên, mức độ phổ biến của định dạng PNG kém hơn nhiều so với định dạng GIF và JPEG..

Thông thường, một thư mục riêng được tạo cho hình ảnh (hình ảnh) trong thư mục gốc và tất cả hình ảnh của trang web đều được đặt trong đó. Đôi khi có một số thư mục như vậy (nếu cấu trúc trang web yêu cầu hoặc bạn có thể điều hướng dễ dàng hơn). Thư mục này thường được gọi là: hình ảnh hoặc hình ảnh (Hình ảnh). Trong mã trang web, hãy viết đường dẫn đầy đủ đến tệp đồ họa (nơi đặt hình ảnh), cũng như tên của tệp này (hình ảnh) mà bạn muốn chèn vào tài liệu html.

Chúng tôi viết mã để chèn ảnh vào trang web

Để chèn hình ảnh vào tài liệu HTML, hãy sử dụng cấu trúc được chỉ định trong Liệt kê 8.1. Mã này được chèn vào vị trí mong muốn trên trang web (nơi bạn muốn xem ảnh).

Trên trang dành riêng cho ô tô của chúng tôi, tôi đã chuẩn bị và chèn hai hình ảnh. Bạn có thể xem mã nhúng cho hình ảnh đầu tiên trong Liệt kê 8.1.

Liệt kê 8.1.

Hình ảnh được chèn đầu tiên trên trang web của trang web sẽ trông như thế này:

Và bây giờ tôi sẽ bình luận chi tiết hơn về những gì được viết trong Liệt kê 8.1.

Bản thân hình ảnh được “chèn” bằng thẻ: hình ảnh src. Mục đầy đủ trông như thế này: img src="img/mers1.jpg", Ở đâu "img/mers1.jpg"– chỉ ra rằng hình ảnh của chúng tôi nằm trong thư mục: hình ảnh và tên của tệp đồ họa (hình ảnh): mers1.jpg.

Về nguyên tắc, điều này là đủ để chèn hình ảnh vào trang web, các thông số còn lại là tùy chọn, nhưng tôi vẫn khuyên bạn nên luôn đăng ký chúng, nếu không thì hình ảnh có thể bị biến dạng hình học.

Hãy xem xét các tùy chọn bổ sung:

biên giới="0"– biểu thị rằng không có khung xung quanh hình ảnh, hãy thử thay đổi 0 thành một số khác, ví dụ như 1 , - tương ứng với độ dày của khung xung quanh hình ảnh trong 1 pixel, 2 – tương ứng với độ dày của khung xung quanh hình ảnh của hai pixel, v.v.

Quan trọng! Nếu bạn dự định tạo liên kết cho một hình ảnh, hãy đảm bảo chỉ ra giá trị: biên giới="0".

chiều rộng="400"– cho biết chiều rộng của hình ảnh là: 400 pixel(đặt một số thực cho chiều rộng của hình ảnh của bạn).

chiều cao="209"- cho biết chiều cao của hình ảnh là: 209 pixel(đặt một số thực cho chiều cao của hình ảnh của bạn).

Nếu bạn không chỉ định tham số: chiều rộng Và chiều cao, thì hình ảnh có thể bị biến dạng hình học.

hspace="20"– biểu thị khoảng thụt lề 20 pixel của văn bản xung quanh hình ảnh.

căn chỉnh="trái"– đây là tag bạn đã quen thuộc rồi..... Đúng rồi, nó có nghĩa là căn lề trái, cũng có thể mang nghĩa: Phải- căn lề phải.

alt="Mặt trước của xe" !}– văn bản thay thế được viết ở đây, văn bản này được hiển thị khi bạn di chuột qua hình ảnh.

Theo cách tương tự, chúng ta sẽ “chèn” hình ảnh thứ hai vào trang web, điểm khác biệt duy nhất là nó sẽ được căn chỉnh về bên phải.



Nhận xét về bài viết này (bài học):

Vui lòng cho tôi biết chính xác tôi nên tạo thư mục img ở đâu?

Thư mục img chỉ là tên thông thường thôi, bạn có thể gọi nó là gì cũng được, miễn là sau này bạn hiểu là được. Bạn có thể tạo nó ở bất cứ đâu, để đơn giản, hãy tạo nó trong thư mục gốc và đặt tất cả hình ảnh vào đó.

Có điều là hình ảnh không được hiển thị, chỉ có dòng chữ. Điều gì có thể sai? Cảm ơn.

Hãy xem kỹ Liệt kê 8.1 ở trên. Hãy mang tất cả cho chính mình. Trong thư mục gốc (nơi chứa tất cả các tệp HTML của trang web của bạn), hãy tạo một thư mục img. Đặt tất cả hình ảnh của bạn vào thư mục này. Trong danh sách, thay đổi mers1.jpg thành tên tệp của bạn. Đồng thời thay đổi giá trị chiều rộng và chiều cao thành kích thước thực tế của tệp của bạn. Chúc may mắn.

Cảm ơn bạn rất nhiều, mọi thứ đã thành công.

Xin chào. Tôi gặp tình huống tương tự như người nói trước: Tôi viết mã giống như của bạn, tôi chỉ thay đổi tên tệp: thay vì mers.1/jpeg, tôi chèn liên kết Mercedes/jpeg. Chỉ một cửa sổ xuất hiện trên trang có liên kết. dòng chữ ở trên cùng “Mặt trước của xe” và không có hình ảnh, theo ý kiến ​​​​của tôi, trình duyệt không thể tìm thấy đường dẫn đến ảnh hoặc nó được viết không chính xác. b

Hãy xem kỹ mã img/mercedes/jpeg của bạn. Bạn đã hiểu đúng, trình duyệt không tìm thấy đường dẫn đến tệp đồ họa. 2. Tên file sai, xem sao tôi có mers1.jpg

À, mình copy mã và dán vào, mình có hình bầu dục không có hình, trong hình bầu dục có link ở trên!

Xin chào! Vấn đề tương tự, tôi đã tạo một thư mục có tên img ở cùng nơi với tài liệu của trang web, hình ảnh có tên 1.jpg được lưu trong thư mục này, tôi viết mọi thứ như trong ví dụ của bạn.

Nếu bạn nhận thấy ảnh của tôi nằm trong thư mục img

Một bài viết rất hữu ích cho các quản trị viên web mới bắt đầu. Thông báo trước duy nhất cho thuộc tính "alt". Liên quan đến hình ảnh, bài viết đưa ra cách hiểu như sau: "alt="Mặt trước của xe" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

đây là mã của tôi VẬY TẠI SAO HÌNH ẢNH ĐƯỢC ĐẶT Ở BÊN KHI NHIỆM VỤ CHO NÓ LÀ TRUNG TÂM?

Và nếu tôi lấy hình từ trang của người khác thì có vi phạm bản quyền không?

Giải thích tại sao khi tải tài liệu HTML lên máy chủ lại có khoảng trống trong khung thay vì hình ảnh. Mặc dù trước khi hiển thị, hình ảnh vẫn như cũ.

Dmitry, điều kỳ diệu không xảy ra, bạn đã mắc sai lầm ở đâu đó, hãy kiểm tra tất cả các đường dẫn đến các bức tranh, tức là. cách các hình ảnh được viết trong mã.

Đây là mã của tôi, mọi thứ đều được hiển thị trên trang ngoại trừ hình ảnh, tôi đã cố gắng cả ngày bằng mọi cách có thể nhưng không có gì. Hãy cho tôi biết phải làm gì

AndreyK, vui lòng liên hệ với tôi trong thư. Tôi không thể chèn hình ảnh theo bất kỳ cách nào, tôi nhập chính xác mọi thứ nhưng không có gì, chỉ xuất hiện khung và dòng chữ.

Elvira, tôi đã đọc thư của bạn cũng như tất cả các bình luận và thư khác. Nhưng tôi nên trả lời ở đâu... về làng của ông tôi???

Tôi không biết tại sao mọi người lại khó chịu như vậy!? Bạn chỉ cần không sao chép rồi dán mã mà hãy tự viết chúng và mọi thứ sẽ hoạt động... đây là nội dung trong hình ảnh của tôi

Tôi đã sao chép danh sách của bạn, dán các giá trị của tôi - có một bức ảnh. Sau đó, tôi gõ điều tương tự bên dưới (thủ công) không có hình ảnh - thật là một điều kỳ diệu?

AndreyK cho em hỏi lỗi ở đâu ạ? Dù có thử bao nhiêu lần cũng không được((

Andrey, cho tôi biết tại sao tôi không nhìn thấy được bức ảnh. Mã của tôi: Có một dòng chữ, nhưng không có hình ảnh. Địa chỉ của tôi: [email được bảo vệ] Cảm ơn.

Tôi cũng đau khổ một thời gian dài, nhưng nó đã có tác dụng! Thật vậy, thư mục imj phải được mở bằng tài liệu HTML.

Tôi chắc chắn sẽ thử nó, cảm ơn bạn

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Mình cũng khổ lâu rồi, hóa ra thư mục có ảnh phải để cùng chỗ với index.html, cảm ơn Elena

Andrey tôi chèn:

Andrey tôi chèn: và tôi không có hình ảnh trong tài liệu, chỉ có một dòng chữ!!! [email được bảo vệ]

mã của tôi...cũng không có hình ảnh. Thư mục img nằm trong cùng thư mục với chỉ mục... vui lòng trợ giúp. [email được bảo vệ] Cảm ơn!

Chà, tôi không biết nữa. Tôi đọc tất cả các ý kiến. Tôi đã thử mọi thứ. Tôi đã sao chép và dán thông tin của mình. Không có gì hoạt động. Thư mục chứa ảnh (img) nằm ở cùng vị trí với index.html. Nhưng không có hình ảnh. Thay vào đó là chữ thập đỏ và dòng chữ Tôi làm việc trong trình duyệt IE. Đây là những gì tôi đã nhập:

Tôi đã xem mã HTML của trang thay cho ảnh trong bài học: Mã trên trang khác với mã trong danh sách. Tại sao? và nhân tiện, trên trang có mã “mers1.jpg” được gạch chân. Sao chép có gạch chân không thành công. Tôi đã cố gắng chèn nó như thế. Vẫn không có hình ảnh. Có chuyện gì vậy?

Chúng ta tự hỏi, chúng ta tự trả lời. Tôi đau khổ rất lâu mà hình ảnh không được đưa vào. Hóa ra: 1, thay vì thẻ src tôi có srk 2. Tôi đã bối rối khi soạn đường dẫn đến ảnh. Tôi đã đổi tên thư mục thành IMG và mọi thứ đều hoạt động. Tôi đã dành gần hai ngày cho việc này, nhưng nó đáng giá.

Yêu, nhưng bây giờ bạn sẽ nhớ điều này đến hết cuộc đời :) Tất nhiên là tôi nói đùa, đừng xúc phạm. Nhưng nghiêm túc mà nói, nếu một người không để lại địa chỉ gửi lại thì tôi gần như không thể giúp được anh ta.

Xin chào, cho tôi biết cách đặt một hình ảnh lên trên, hình thứ hai bên dưới bên trái và hình thứ ba ở dưới cùng bên phải))))

..........lỗi thiếu hình ảnh của tôi là gì?

Mọi thứ trong mã đều chính xác, nếu không có gì sai sót thì mọi thứ sẽ hoạt động. Nhưng viết tên file (hình ảnh) bằng chữ cái tiếng Anh. Nhiều máy chủ không chấp nhận bảng chữ cái Latinh.

Nhưng đây là điều kỳ lạ... trong khi tôi gọi thư mục bằng những tên khác, hình ảnh không muốn xuất hiện, mặc dù đường dẫn được viết chính xác. Ngay khi tôi gọi cho IMG, cô ấy lập tức xuất hiện. Điều đáng chú ý là gì?

Marina, không có chiêu trò hay khiêu khích nào cả :). Trong mã của Liệt kê 8.1. nó cho biết hình ảnh này nằm trong thư mục: img. Nếu bạn thay đổi tên thư mục cho hình ảnh trên máy chủ của mình, sau đó thay đổi tên đó trong danh sách, đó là toàn bộ thủ thuật.

Tôi đang cố chèn một hình ảnh!!! Tôi viết mọi thứ ra bằng sổ ghi chú, tôi đang làm mọi thứ một cách chính xác, có lẽ việc sử dụng sổ ghi chú là không đáng??

Và tôi mở mọi thứ trong Mozilla Fire Fox mới nhất))

Đường dẫn ảnh của tôi là C:Documents and SettingdenisDesktopkoffevinogradwwwImg và bản thân ảnh đó có tên là gif, tên cũng bao gồm 1.gif...Tôi thực hiện việc này trong notepad trang web mát mẻ Tôi đã làm nhưng đường dẫn đầy đủ không xuất hiện, mozilla không nhìn thấy ảnh nhà thám hiểm và đánh dấu nó bằng chữ thập đỏ

Denis, đổi tên thư mục Img thành img, tức là tất cả đều bằng chữ in hoa và đổi tên đường dẫn đến đó. Nhiều máy chủ không hiển thị chữ hoa chính xác.

Tôi vẫn có cùng một câu hỏi: tại sao không phải hình ảnh mà chỉ có dòng chữ. Tôi đã tạo một thư mục riêng cho trang web: nó chứa một trang Web và một bản vẽ. Đã chèn: TRỢ GIÚP LỖI THƯ CỦA TÔI LÀ GÌ: [email được bảo vệ]

Làm thế nào để tạo một bức ảnh có thể phóng to hoặc thu nhỏ?

Vì lý do nào đó mà bức tranh đó cũng không tập trung vào tôi. Điều hấp dẫn là gì?.. Mã này như thế này:

Làm việc với hình ảnh trong HTML (cách chèn ảnh, thay đổi kích thước, tạo liên kết cho ảnh).

Chèn một hình ảnh

Thẻ không ghép đôi được sử dụng để chèn hình ảnh vào tài liệu HTML , được đặt tại vị trí trong tài liệu nơi hình ảnh sẽ được chèn vào. Thẻ này có một tham số bắt buộc src, giá trị của nó chỉ định đường dẫn đến hình ảnh mong muốn trong thư mục trang web của bạn.


Ví dụ: để đặt một hình ảnh trên một trang:

Dòng sau được đặt đúng chỗ trong tài liệu:



Điều này cho phép trình duyệt biết rằng thư mục gốc của trang web www.mysite.com có một thư mục con hình ảnh 1.png


Ở đây chúng tôi đã chỉ định đường dẫn đầy đủ (hoặc địa chỉ tuyệt đối) vào ảnh. Bạn có thể chỉ định địa chỉ tương đối Hình ảnh:



Trình duyệt diễn giải dòng này như sau: trong thư mục chứa tài liệu html này có một thư mục con hình ảnh, nó chứa một hình ảnh có tên 1.png, nên được đặt trên trang.


Dưới đây là ví dụ về chỉ định địa chỉ hình ảnh tương đối nếu trang web của bạn có cấu trúc phức tạp hơn và ví dụ trước không phù hợp:



Trình duyệt diễn giải dòng này như sau: sự kết hợp của các ký tự ../ có nghĩa là bạn cần phải đi lên một cấp so với thư mục chứa tài liệu html này; và sau đó như trong ví dụ trước: trong thư mục mà chúng ta tìm thấy có một thư mục con hình ảnh, nó chứa một hình ảnh có tên 1.png, nên được đặt trên trang.


Vì lý do bảo mật, tốt nhất bạn nên chỉ ra địa chỉ tương đối của hình ảnh, trừ trường hợp bạn đặt hình ảnh ở một trang khác trên trang của mình.

Kích thước hình ảnh

Kích thước của mỗi hình ảnh được xác định bởi hai tham số: chiều rộng và chiều cao. Tại thẻ Có các thông số tương ứng: chiều rộng Và chiều cao. Các tham số này lấy giá trị bằng pixel (px).


Bạn có thể đặt kích thước thực tế của hình ảnh:



Điều này không cần thiết nhưng nó rất hữu ích vì... tăng tốc một chút quá trình tải trang của trình duyệt (trình duyệt không phải tính toán độc lập các giá trị này). Nếu kích thước hình ảnh được chỉ định ngay trong thông số thẻ , khi đó không gian trên trang sẽ được phân bổ cho hình ảnh này và cấu trúc của trang sẽ không còn thay đổi khi tải - ví dụ: văn bản sẽ nhảy.


Hoặc bạn có thể phóng to, thu nhỏ hình ảnh bằng cách gán thông số chiều rộng Và chiều cao những ý nghĩa khác. Hơn nữa, nếu bạn muốn thay đổi cả hai tham số theo tỷ lệ, việc chỉ ra một giá trị mới cho chỉ một trong số chúng là đủ và chỉ cần bỏ qua giá trị thứ hai. Trình duyệt sẽ tự động tính toán.


Ví dụ: để phóng to hình ảnh lên 1,5 lần, chúng ta có thể viết:


hoặc

Kết quả sẽ giống nhau:



Lựa chọn khác chiều rộng Và chiều cao có thể lấy giá trị theo tỷ lệ phần trăm. Nhưng! Xin lưu ý rằng đây là tỷ lệ phần trăm của kích thước cửa sổ trình duyệt. Trong trường hợp này, bạn cũng có thể chỉ định một tham số và bỏ qua tham số thứ hai.


Ví dụ: nếu chúng ta muốn hình ảnh chiếm chính xác một nửa chiều rộng của trang, chúng ta cần viết như sau:



Và chúng ta sẽ nhận được:


Khung xung quanh hình ảnh

Tại thẻ có thêm một tham số tùy chọn ranh giới. Sử dụng nó để đặt độ dày của khung xung quanh hình ảnh. Theo mặc định, độ dày khung hình bằng 0, tức là không có khung.


Ví dụ: đây là cách bạn có thể thêm khung dày 3 pixel vào ảnh của chúng tôi:



Đây là những gì trình duyệt sẽ hiển thị cho chúng ta:



Màu đường viền khớp với màu văn bản trên trang được chỉ định bằng tham số chữ nhãn (Xem Bài 6. Thuộc tính trang - tham số thẻ nội dung), màu mặc định là màu đen.




Và nếu không muốn xem khung thì buộc tham số ranh giới giá trị rỗng:


Văn bản thay thế

Văn bản thay thếđược trình duyệt hiển thị thay cho hình ảnh cho đến khi nó được tải. Hoặc thay vì một hình ảnh nếu vì lý do nào đó nó không được hiển thị.



Khi nào và nếu hình ảnh được tải, văn bản thay thế sẽ được hiển thị khi bạn di chuột qua chính bức ảnh này.



Để thêm văn bản thay thế, hãy sử dụng tùy chọn thay thế nhãn , được gán một giá trị chuỗi và phải được đặt trong dấu ngoặc kép.



Bạn có thể tạo văn bản thay thế nhiều dòng.



Để thực hiện việc này, chỉ cần chèn dấu ngắt dòng vào tài liệu HTML.


văn bản">

Căn chỉnh hình ảnh

Đối với hình ảnh, cũng như đối với đoạn văn, có khái niệm căn chỉnh so với văn bản và các hình ảnh khác trên trang. Bạn cũng có thể đặt kiểu căn chỉnh bằng tham số căn chỉnh nhãn .


Dưới đây là bảng các giá trị tham số có thể có căn chỉnh:






Tùy chọn mặt văn bản, đứng đầu, ở giữa, cơ bụng, đường cơ sở, đáy thiết lập căn chỉnh theo chiều dọc của hình ảnh. Và các thông số bên trái Và Phải cho trình duyệt biết văn bản sẽ ở bên nào chảy xung quanh hình ảnh.

Đệm xung quanh hình ảnh

Để giữ cho văn bản không bị tràn sát vào hình ảnh, bạn có thể đặt phần đệm xung quanh hình ảnh. Bạn có thể làm điều này bằng cách sử dụng các tham số hspace(đệm trái và phải) và vspace(khoảng trắng ở trên và dưới) của thẻ .


Ví dụ sau đây cho thấy văn bản bao quanh một hình ảnh, với hình ảnh được căn trái và có 5 pixel đệm xung quanh nó:


Tại thành phố Stockholm, trên con phố bình thường nhất, trong ngôi nhà bình thường nhất, có một gia đình người Thụy Điển bình thường tên là Svanteson. Gia đình này gồm có một người cha rất bình thường, một người mẹ rất bình thường và ba đứa con rất bình thường - Bosse, Bethan và Baby.

Đây là kết quả trong trình duyệt:


Tại thành phố Stockholm, trên con phố bình thường nhất, trong ngôi nhà bình thường nhất, có một gia đình người Thụy Điển bình thường tên là Svanteson. Gia đình này gồm có một người cha rất bình thường, một người mẹ rất bình thường và ba đứa con rất bình thường - Bosse, Bethan và Baby.

Chia hình ảnh thành nhiều phần

Đôi khi bạn cần đặt một hình ảnh lớn trên một trang. Nhưng sau đó trang sẽ mất nhiều thời gian để tải. Phải làm gì?


Một trong những điều có thể Cách tốt nhất để thoát khỏi tình huống này là cắt hình ảnh thành nhiều mảnh và đặt nó lên trang bằng cách sử dụng bảng. Để hình ảnh trông giống một tổng thể, cần phải loại bỏ đường viền và toàn bộ phần đệm bên trong và giữa các ô khỏi bảng. Những thứ kia. gán cho các tham số thẻ tương ứng

giá trị rỗng: biên giới="0", khoảng cách ô="0", đệm di động="0".


Trong ví dụ sau, chúng tôi chia hình ảnh thành 4 phần. Bảng sẽ trông như thế này:













Và đây là kết quả: