Bạn có biết cách chèn hình ảnh vào HTML không? Trong bài viết sau đây, chúng tôi sẽ hướng dẫn bạn mọi thứ cần biết về cách thêm hình ảnh nền vào HTML.
Làm thế nào để đặt một hình nền trong HTML?
Để biết cách đặt hình nền trong HTML, chúng ta phải biết điều này có nghĩa là gì; HTML, đây là một ngôn ngữ lập trình được sử dụng để tạo nội dung của các trang web. Điều này dẫn đến việc hiển thị trang trở nên hấp dẫn đối với công chúng, được cung cấp nhiều nhãn để bạn có thể định cấu hình, phông chữ, hình ảnh, video trong số những thứ khác, về cơ bản, đó là thứ cho phép người kiểm duyệt quyền chỉnh sửa trang theo ý muốn của bạn.
HTML được tạo ra vào năm 1980 bởi nhà vật lý Tim Berners-Lee, người đã đề xuất một dạng "siêu văn bản" mới cho tổ chức mà ông làm việc. Những siêu xoáy này đã được nhìn thấy từ rất lâu trước đây; được sử dụng để chia sẻ và truy cập tài liệu.
Tim Berners-Lee đã gia nhập lực lượng với một kỹ sư hệ thống giàu kinh nghiệm tên là Robert Cailliau, người mà anh ấy đã có thể hoàn thành đề xuất của mình có tên “Worldwideweb”, và họ đã được dẫn dắt để trình bày nó trong một cuộc gọi, và họ đã thắng.
Sau đó, có nhiều đề xuất tương tự, vào năm 1991, tài liệu đầu tiên được xuất bản dưới tên “HTML -tags”, cho đến ngày nay, tài liệu này có thể được tìm kiếm trực tuyến như một cổ vật trong thế giới máy tính.
Đến năm 1993, HTML đã được sử dụng rộng rãi, một số tổ chức đã phát hành phiên bản của họ và đề xuất chúng được cố định như một phần tử tiêu chuẩn, nhưng không ai trong số này được coi là một lựa chọn. Đối với thời gian này, các bảng, nhãn và biểu mẫu đã được sử dụng trong một thời gian dài đã được thu thập.
Đối với hình ảnh nền, nó có thể được nối, dựa trên bản trình bày, vì vậy sẽ hợp lý để sử dụng CSS để có thể cấu thành nó một cách chính xác, theo cách tương tự mà chúng ta sẽ nói về vấn đề này sau.
Bạn có muốn xem hướng dẫn chi tiết về cách đặt ảnh nền trong HTML không? Mời các bạn xem video sau:
Đặt nền trên một trang web
Điều đầu tiên là sử dụng thuộc tính background trong thẻ "Body", đây là tên tệp mà chúng ta muốn sử dụng làm nền. Có thể tệp này nằm trong một thư mục khác với trang web, nếu trường hợp này xảy ra, chúng ta sẽ cần khoanh vùng đường dẫn của tệp, đây là nơi rất quan trọng cần lưu ý mà bạn sẽ luôn cần để sử dụng đường dẫn.html liên quan đến tệp, ví dụ: "background = fondo.gif".
Điều này cho phép định vị đường dẫn dễ dàng trong trường hợp muốn thay đổi nó và điều chúng tôi đạt được là tệp của chúng tôi có thể được xem trên nền của trang web, điều bình thường là lúc đầu hình ảnh xuất hiện dưới dạng khảm, theo cách tương tự, điều này có thể được chỉnh sửa.
Nền trong các yếu tố khác
Hình nền có thể xuất hiện trong các phần tử khác nhau như bảng và ô và việc chơi với chúng rất dễ dàng. Để đạt được điều này, chúng tôi sử dụng lại cùng một thuộc tính nền, chúng tôi chỉ có các thẻ khác, ví dụ: "table background = background.gif" hoặc "td background = background.gif".
Những yếu tố này, cộng với cấu trúc của trang web, là những yếu tố giúp bạn có thể đặt nền trước khi ngôn ngữ CSS xuất hiện và được biết đến, điều này làm cho việc đặt nền và chỉnh sửa trang web trở nên thực tế hơn.
Mẹo
Những người có miền muốn rằng khi tạo trang web của họ và cá nhân hóa nó, nó càng thẩm mỹ càng tốt theo chủ đề được đề cập. Tại đây, chúng tôi có thể cung cấp cho bạn một số lời khuyên quan trọng và cần thiết về việc sử dụng tiền trên các trang web.
Đặt một nền có màu tương tự như hình ảnh
Điều quan trọng cần lưu ý là khi đặt nền trên một trang web, cần phải có thuộc tính bgcolor, cho phép chọn nền có màu có thể tương phản với nền chủ đạo mà hiện tại, chúng tôi giữ ở dạng khảm.
Hầu hết chúng ta đã từng truy cập vào các trang web mà khi tải, nó không hiển thị bất kỳ hình ảnh hoặc văn bản nào và một khi nền đã được tải đúng cách, chúng ta có thể thấy rằng đã có thứ gì đó được viết. Điều này xảy ra bởi vì các màu không tương phản, nhưng vẫn giữ nguyên mặc định.
Một ví dụ rõ ràng là khi ảnh nền có màu tối và văn bản là màu trắng, điều này sẽ không cho phép nhìn thấy văn bản trước khi tải ảnh, điều này có thể gây bất tiện khi có lỗi trên trang và nền không tải được , văn bản sẽ không được hiển thị.
Nền có hình ảnh màu đồng nhất
Khuyến cáo rằng khi sử dụng nền ảnh thì chúng có cùng một bảng màu, tức là khi ảnh có từ hai màu trở lên, chúng ta phải biết cách chọn màu văn bản sao cho phù hợp để không bị trộn lẫn với nền và do đó. không thể hình dung được.
Điều quan trọng là phải có một phạm vi màu sắc sạch sẽ, nơi mọi thứ có thể được đánh giá cao mà không có vấn đề. Chúng tôi khuyên bạn nên lập kế hoạch và chọn bảng màu trước, bằng cách này, bạn sẽ tránh phải chỉnh sửa trang web nhiều lần để bạn có thể quan sát kỹ lưỡng tính thẩm mỹ của trang.
Tạo một nền đủ lớn
Kích thước của tệp mà chúng ta sử dụng có ý nghĩa rất lớn đối với công việc và trình bày của trang, rất có thể nếu chúng ta chọn một nền nhỏ, máy tính sẽ hoạt động quá nhiều, lặp lại khảm hàng nghìn lần dọc theo màn hình, điều này không cũng rất dễ chịu. trong tầm nhìn (theo cách tương tự, điều này sẽ phụ thuộc vào hương vị). Mặt khác, bằng cách chọn một nền lớn hơn, máy tính sẽ có thể làm việc ít hơn khi tải hình ảnh, điều này sẽ dễ dàng hơn cho người tiêu dùng và người kiểm duyệt.
Văn bản hợp pháp
Các khoản tiền có thể chống lại bạn khi chúng cản trở tầm nhìn đối với thông tin; nó là khá phổ biến cho các loại lỗi xảy ra. Để tránh điều này, cấu trúc của màu sắc phải được tổ chức hợp lý.
Sự kết hợp màu sắc và nền dễ chịu sẽ tạo ấn tượng hấp dẫn và tiện dụng cho trang của bạn, bởi vì không chỉ nó trông đẹp mà còn có thể đọc được thông tin mà người tiêu dùng rất quan tâm.
Chúng ta phải biết cách đưa ra quyết định tốt khi lựa chọn màu sắc, vì một số màu chúng ta chọn có thể đạt được nhiệm vụ tương phản, tuy nhiên, vẫn có yếu tố làm cho nó dễ đọc và những màu rất mạnh có thể không đạt được điều đó. mục tiêu.
Thận trọng với các định nghĩa màn hình khác nhau
Khi khách truy cập vào một trang, điều quan trọng là phải xem kích thước cửa sổ thay đổi; phía dưới có thể đưa ra các vấn đề để thích ứng. Điều này có thể do thực tế là khi sử dụng nền, bạn có thể thấy các kích thước bị giảm đi và hậu quả là một người có kích thước cao cấp không thể nhìn thấy trang một cách chính xác.
Kết luận, cần phải cẩn thận với những gì chúng ta lựa chọn, điều này có thể có lợi cho chúng ta hoặc làm ngược lại. Bây giờ chúng tôi hiểu những gì chúng tôi phải tính đến khi chọn và áp dụng nền của chúng tôi trên trang web, chúng tôi có thể thu hút nhiều khách truy cập hơn vào trang nếu chúng tôi muốn, cung cấp cho họ chức năng và thẩm mỹ.
Lưu ý: Việc đặt nội dung vào trong bảng và thiết lập màu nền sẽ đảm bảo chúng ta không gặp vấn đề khi muốn sử dụng hình ảnh mà mình cảm thấy không an tâm, hoặc đã từng gây ra sự cố trước đây.
Hình nền với CSS
Trước đây chỉ có một cách để tài trợ cho các trang web và đây là HTML nhưng khi công nghệ tiến bộ, chúng tôi đã tìm ra những cách khác để giải quyết vấn đề. Ngày nay, việc sử dụng CSS để có thể đặt nền trên một trang web là điều cần thiết và hợp lý, vì nó cung cấp khả năng định vị nền trên toàn bộ màn hình hoặc sử dụng nó làm nền trong một phần tử nhất định.
Để hiểu thêm một chút, chúng ta hãy bắt đầu bằng cách hiểu CSS là gì và tại sao nó lại được sử dụng phổ biến trong lĩnh vực này; Nó có thể được định nghĩa là một “ngôn ngữ bảng kiểu xếp tầng”, nó được sử dụng để tùy chỉnh công khai các phần tử được viết trên các trang web. Trên thực tế, một tài liệu HTML có thể được tạo kiểu theo những cách khác nhau.
Toàn trang nền
Để áp dụng hình nền cho toàn bộ trang, chúng ta cần vào phần "Body" và tùy chỉnh thẻ "Body" như sau : `body { background-color: #ffdd90; background-image: url("my-background.jpg"); }` . Ở đây, chúng ta đang áp dụng hình nền màu đơn sắc bằng cách sử dụng một hình ảnh có sẵn.
CSS cho chúng ta cơ hội áp dụng hình nền dưới dạng tệp đồ họa và đặt nó lên trên bức tranh khảm hoặc nền đơn màu, chỉnh sửa kích thước, thêm một số dịch chuyển, trong số những thứ khác.
Đặt nền trên một phần tử trong trang không tạo ra nhiều khác biệt so với mã. Ví dụ, nếu chúng ta muốn đặt hình ảnh bên trong các đoạn văn bản hoặc đặt một số hình nền trong menu.
Các phần nhỏ của trang và xác định kiểu nhãn
CSS có thể được sử dụng để xác định các phần nhỏ của trang, tùy chỉnh các khu vực được giảm bớt bằng cách sử dụng thuộc tính "Style" trong thẻ mà chúng tôi muốn chỉnh sửa và để xác định một kiểu duy nhất của thẻ, tất cả những gì chúng tôi phải làm là sử dụng lại " Thuộc tính style "xác định đoạn văn của chúng ta bằng màu sắc mong muốn.
Tạo kiểu cho một phần của trang web
Đối với điều này, chúng tôi sẽ cần phải đi đến nhãn nơi chúng tôi có thể thay đổi kiểu của các phần khác nhau của trang áp dụng từ thuộc tính , así nos preocuparemos por solo personalizar la sección que escogimos.
Đây chỉ là một số ví dụ về những gì bạn có thể làm với CSS, vì có rất nhiều mục tiêu mà bạn có thể đạt được với ngôn ngữ này, tuy nhiên, tốt nhất là bạn không nên phát điên và hãy nhớ rằng chúng ta phải tìm kiếm chức năng và sự dễ dàng đọc tốt.
Nếu bạn đã học cách thêm ảnh nền trong HTML, chúng tôi mời bạn đọc thêm một bài viết khác của chúng tôi: XML là gì?