Thẻ HTML cho nền của trang. Cách đặt màu nền và màu văn bản trên trang web

Trong bài viết này tôi sẽ nói với bạn như thường lệ đặt nền cho trang web sử dụng HTML mã số.

Tôi cũng sẽ giới thiệu cho bạn một dịch vụ nước ngoài tuyệt vời để chọn hình nền liền mạch.
Ngày nay, việc cài đặt trang web được thực hiện dễ dàng và thuận tiện hơn thông qua bảng điều khiển CMS như WordPress.
Có thể cần phải thay đổi mẫu trang web bán hàng, bài viết này sẽ giúp ích cho việc này.

Nếu bạn không biết nó là gì HTML, thì đây thường có thể được gọi là ngôn ngữ của các trang web hoặc một bộ quy tắc mà các trang web được tạo ra.

Ví dụ: bạn nhìn thấy một hình ảnh trên một trang web, nhưng trong mã HTML của trang đó, nó có thể trông như thế này:

Đặt màu đồng nhất cho nền trang.

Để cài đặt nền màu đặc, cần trong thẻ thêm thuộc tính bgcolor.

< html >
< head >
< title >Tiêu đề trang.

< body bgcolor = "#ffcc00" >

Bạn có thể dán mã này vào tệp văn bản và lưu nó với phần mở rộng .html. Sau đó mở nó bằng bất kỳ trình duyệt nào và xem kết quả.

Như bạn có thể đoán, màu nền xuất hiện do mã màu trong thuộc tính bgcolor="giá trị", có thể được tìm thấy bằng cách theo liên kết này.

Đặt hình ảnh làm nền của trang HTML.

Để đặt hình ảnh làm nền, bạn có thể sử dụng thuộc tính lý lịch trong thẻ .

< html >
< head >
< title >Tiêu đề trang.

< body background = "http://сайт/images/mlmsecret.jpg" >Xin chào. Đây là trang đầu tiên của tôi

Bạn có thể nhận thấy rằng thuộc tính lý lịch bằng đường dẫn của tệp được sử dụng làm nền.

Để nhanh chóng thay đổi nền hoặc bất kỳ hình ảnh nào trên trang, chỉ cần chỉ định đường dẫn mới tới tệp của bạn bằng trình chỉnh sửa văn bản.

Để tìm đường dẫn trước đó, bạn cần truy cập trang có ảnh, nhấp chuột phải vào ảnh và nhấp vào “Sao chép URL ảnh”. bằng cách này bạn sẽ thấy tên của hình ảnh/nền. Sau đó, bạn có thể chỉ cần thay thế hình ảnh cũ bằng hình ảnh của mình, sử dụng cùng tên tệp.

Đây là những điều cơ bản đơn giản nhất để thiết lập nền trong html, Bây giờ đến phần thú vị. 🙂

Trong hướng dẫn này, bạn sẽ tìm hiểu cách thay đổi màu nền và màu văn bản của bất kỳ thành phần nào trên trang HTML. Nhìn chung, trong ngôn ngữ HTML, một số thẻ có thuộc tính đặc biệt có thể thay đổi màu sắc, ví dụ bgcolor (màu nền). Tuy nhiên, thứ nhất, những thuộc tính này đã lỗi thời (tôi nghĩ bạn nhớ điều đó có nghĩa là gì) và thứ hai, như tôi đã nói, không phải tất cả các thẻ đều có chúng. Vì vậy, giả sử bạn muốn thay đổi màu nền của một đoạn văn bản. Và bạn sẽ làm điều này như thế nào, bởi vì thẻ

Không có thuộc tính như vậy? Do đó, như trong các bài học trước, chúng ta sẽ sử dụng các kiểu (CSS), tức là thuộc tính kiểu phổ quát, cho phép chúng ta thay đổi màu bất cứ nơi nào chúng ta muốn.

Làm thế nào bạn có thể chỉ định một màu?

Màu sắc trong HTML (và CSS) có thể được chỉ định theo nhiều cách, tôi sẽ chỉ cho bạn những cách phổ biến và phổ biến nhất:

• Tên màu- HTML có một danh sách lớn và để chỉ màu, chỉ cần viết tên của nó bằng tiếng Anh, ví dụ: đỏ, xanh lá cây, xanh lam là đủ.
• Mã màu HEX- Hoàn toàn có thể thu được bất kỳ màu nào bằng cách trộn ba màu cơ bản theo các tỷ lệ khác nhau - đỏ, lục và lam. Mã HEX là ba cặp giá trị thập lục phân chịu trách nhiệm về số lượng các màu này trong mỗi màu. Mã màu phải được đặt trước dấu thăng (#), ví dụ: #FF8C00, #CC3300, v.v.

Trước đây, trong HTML người ta khuyên chỉ nên sử dụng , được đảm bảo hiển thị như nhau trong tất cả các trình duyệt và trên tất cả các màn hình. Nhưng ngày nay không cần phải giới hạn bản thân trong đó, vì cả trình duyệt và màn hình từ lâu đã học cách hiển thị chính xác danh sách màu lớn hơn nhiều. Nhưng tôi không khuyên bạn nên chỉ định màu theo tên; thực tế là nhiều trình duyệt vẫn liên kết các màu khác nhau với cùng một tên. Vì vậy, trong hướng dẫn này tôi sẽ luôn sử dụng mã màu HEX.

Làm cách nào để thay đổi màu văn bản?

Để thay đổi màu văn bản trong bất kỳ thành phần nào của trang HTML, bạn cần chỉ định thuộc tính style bên trong thẻ. Cú pháp chung như sau:

<тег style= "màu:tên màu" >... - chỉ định màu văn bản theo tên.

<тег style= "color:#HEX code" >... - xác định màu văn bản theo mã.

Và như thường lệ, để thay đổi màu chữ trên toàn bộ trang, chỉ cần chỉ định thuộc tính style trong thẻ . Và nếu bạn cần thay đổi màu chữ cho một đoạn văn bản thì hãy đặt nó vào một thẻ và áp dụng thuộc tính cho nó.

Ví dụ về thay đổi màu văn bản

Văn bản tiêu đề màu đỏ

Đoạn văn bản màu xanh.

Màu xanh lá cây in nghiêng. Văn bản màu đỏ.

Kết quả trên trình duyệt

Làm thế nào để thay đổi màu nền?

Màu nền của bất kỳ thành phần trang nào cũng có thể được thay đổi bằng thuộc tính style. Cú pháp chung là:

<тег phong cách= "nền: tên màu">... - chỉ định màu nền theo tên.

<тег style= "nền:#mã HEX" >... - xác định màu nền theo mã.

Ví dụ về thay đổi màu nền

Tiêu đề.

Đoạn văn.

Hình nhỏ. Văn bản thô.

Kết quả trên trình duyệt

Tiêu đề.

Đoạn văn.

Hình nhỏ. Văn bản thô.

Khi bạn thay đổi màu nền của các phần tử, bạn sẽ thấy rất rõ độ rộng thực sự của mỗi phần tử. Như bạn có thể thấy, các thành phần khối như đoạn văn và tiêu đề thường chiếm toàn bộ chiều rộng có sẵn, ngay cả khi chúng chứa rất ít văn bản nhưng thẻ nội tuyến cũng rộng bằng nội dung của chúng. Nhân tiện, đoạn cuối cùng trong ví dụ cũng chiếm toàn bộ chiều rộng, chỉ là nền của nó trong suốt nên nền của trang có thể nhìn thấy được qua nó. Nói chung, nền của tất cả các thành phần trên trang không được chỉ định rõ ràng là trong suốt, chỉ vậy thôi.

Bài tập về nhà.

1. Tạo tiêu đề cho bài viết và hai phần của nó. Viết một đoạn văn ở đầu bài và mỗi phần.
2. Đặt toàn bộ trang thành cỡ chữ Courier 16px, tiêu đề bài viết thành 22px và tiêu đề phụ thành 19px.
3. Đặt tiêu đề bài viết có màu văn bản là #0000CC và các tiêu đề phụ có màu văn bản là #CC3366.
4. Sử dụng màu nền #66CC33 để đánh dấu hai từ trong đoạn thứ hai. Và ở đoạn thứ ba, cùng màu nhưng có một từ được gạch chân.
5. Đừng quên rằng bạn có thể nhóm các giá trị thuộc tính style bằng cách đặt dấu chấm phẩy (;) giữa chúng.

Chào mừng đến với blog của tôi. Hãy tiếp tục tìm hiểu những điều cơ bản về html. Hướng dẫn này sẽ đơn giản và thú vị đến mức tôi hy vọng bạn sẽ muốn tìm hiểu thêm về ngôn ngữ lập trình. Chỉ trong vài phút, bạn sẽ học cách tạo một bức ảnh làm nền trong HTML và đạt được kết quả xuất sắc.

Tôi cũng sẽ nói về một số sắc thái giúp nền mịn và đẹp nhất có thể. Nào, chúng ta bắt đầu nhé?

Chọn một hình ảnh

Tôi muốn bắt đầu bằng việc chọn một hình ảnh. Để bạn trông đồng đều và đẹp hơn trên trang mà không cần phải bận tâm đến kích thước và căn chỉnh. Tôi đề nghị ngay lập tức tìm kiếm kết cấu liền mạch. Nó là gì?

Thật không may, không thể kéo dài hình ảnh trong html để lấp đầy toàn bộ màn hình. Ảnh được sử dụng ở kích thước thực tế. Nếu hình ảnh nhỏ thì nó sẽ bao phủ toàn bộ khu vực, như trong ảnh chụp màn hình bên dưới. Để kéo dài hình ảnh, bạn sẽ phải tạo một tài liệu CSS bổ sung, nếu không có tài liệu này thì nó sẽ không hoạt động.

Mặc dù vậy, bạn có cơ hội bỏ qua hệ thống. Để thực hiện việc này, hãy sử dụng Photoshop và hình ảnh có chiều rộng tối đa của màn hình (1280x720). Mặc dù trong trường hợp này, khi cuộn xuống, hình ảnh sẽ thay thế hình ảnh khác.

Một lựa chọn tốt hơn nhiều nếu bạn không muốn sử dụng css là sử dụng các họa tiết liền mạch. Họ không có bất kỳ khớp nào có thể nhìn thấy được. Chúng giống như giấy dán tường hoặc gạch hiện đại trong thiết kế. Cái này thay thế cái kia và không nhìn thấy khớp nào.

Nếu bạn quan tâm đến việc không có hậu quả pháp lý đối với việc sử dụng chúng, thì tôi khuyên bạn nên tìm kiếm trên trang web Pixabay.com .

HTML

Bây giờ hãy làm việc với mã. Tôi cần lưu ý ngay rằng chúng tôi hiện đang làm việc với html, nghĩa là chúng tôi đang thay đổi hình ảnh không phải cho toàn bộ trang web mà chỉ cho một trang cụ thể mà mã đang được viết. Nếu bạn quan tâm đến việc thay đổi toàn bộ tài nguyên thì bạn cần viết mã bằng cách sử dụng css, Nhưng nhiều hơn về điều này sau.

Vì vậy, bạn có thể làm việc trong notepad, tôi thích NotePad++ hơn. Sẽ thuận tiện hơn nhiều khi làm việc trong đó: mã được hoàn thành cho bạn, các thẻ được đánh dấu. Chương trình này miễn phí và nặng khoảng 3 MB. Tôi đánh giá cao nó, đặc biệt nếu bạn là người mới bắt đầu.

Vì vậy, để gắn thẻ thân hình bạn cần thêm thuộc tính lý lịch và chỉ ra liên kết đến hình ảnh nơi hình ảnh sẽ được chụp. Đây là những gì nó trông giống như trong chương trình.

Bạn chỉ có thể mở notepad và sao chép mã này. Trong dấu ngoặc kép, hãy đặt liên kết đến hình ảnh bạn thích.

Tôi muốn lưu ý cho người mới bắt đầu, đây là điểm chính. Nếu bạn chụp ảnh từ Pixabay, thì bạn cần dán liên kết không phải trên trang có hình ảnh mà mở hình ảnh trong tab tiếp theo.

Sao chép URL chính xác này.

Lưu tài liệu. Đừng quên rằng nếu bạn sử dụng notepad thì cần phải sử dụng tiện ích mở rộng .html . Chỉ cần đặt tên cho tài liệu, ví dụ: trở lại.html . Nếu không, nó sẽ được lưu dưới dạng tài liệu văn bản và trình duyệt sẽ không hiểu nó cần làm gì.

Xong, trang này được tô bằng một màu khác.

Nếu bạn muốn tìm hiểu thêm về html, tôi khuyên bạn nên tải xuống khóa học miễn phí của Evgeniy Popov . Từ đó bạn sẽ học được nhiều thẻ hơn, khả năng ngôn ngữ, thử một số kỹ thuật mới và biết thêm nhiều điều.

Tôi sẽ không nói rằng các khóa học của Evgeniy Popov cực kỳ phổ biến. Nhiều chuyên gia mắng anh ta, và nếu bạn đã từng gặp những câu nói như vậy, thì đây là ý kiến ​​​​của tôi. Những bài học này được cung cấp miễn phí và mặc dù vậy, chúng vẫn hoàn thành xuất sắc nhiệm vụ chính của mình - chỉ cho người mới bắt đầu những kiến ​​​​thức cơ bản và giúp họ cập nhật.

Giống như mỗi người viết đều có quan điểm riêng về cách viết, lập trình viên cũng có phong cách riêng của họ. Bạn có thể dành cả đời để học cách tạo trang web, nhưng bạn cần phải bắt đầu từ đâu đó. Từ sách? Không phải cái này. Đúng, chúng chứa thông tin đáng tin cậy hơn, thông tin cập nhật hơn, nhưng chúng rất khó nắm vững.

Bạn không đồng ý với tôi? Tôi có thể đưa ra một giải pháp thay thế. Sách của Elizabeth và Erica Freeman Học HTML, XHTML và CSS " Đây không phải là một cuốn sách bán chạy quá nhàm chán và được phát hành cách đây không lâu, vào năm 2016. Thông tin vẫn chưa trở nên lỗi thời.

CSS

Nếu bạn cần lặp lại nền trên tất cả các trang trên trang web của mình thì CSS là điều bắt buộc. Tất nhiên, bạn có thể chỉ định đường dẫn mỗi lần, như trong chương trước. Nhưng hãy tưởng tượng nếu theo thời gian bạn cần phải thay thế nó: liên kết trở nên lỗi thời hoặc đơn giản là bạn muốn thay đổi thiết kế. Vào từng trang và đổi mã? Điều này sẽ không hoạt động.

CSS giúp giải quyết vấn đề này. Bạn cần tạo một file có phần mở rộng css và nhập đoạn mã sau:

Hãy nói một chút về chính mã đó. Trong ngoặc đơn, sau địa chỉ bạn có thể nhập liên kết tới ảnh từ nguồn của bên thứ ba hoặc chỉ cần nhập tên của tài liệu nếu ảnh nằm trong cùng thư mục với tệp này.

Dành cho những người muốn biết rõ hơn

Với css bạn có thể kéo dài hình nền, đảm bảo nó không lặp lại, thêm hoạt ảnh GIF và hơn thế nữa.

Bạn không thể viết mọi thứ trong một bài viết. Và tôi đã không đặt ra một nhiệm vụ như vậy cho chính mình. Có rất nhiều điều tế nhị, và nếu họ hứa sẽ kể cho bạn nghe mọi chuyện trong một bài viết thì đây chẳng qua là một sự lừa dối.

Bạn có muốn học cách viết trang web một cách chính xác? Tôi khuyên bạn nên học ngôn ngữ lập trình. Tôi có thể giới thiệu khóa học của Andrey Bernatsky “ HTML5 và CSS3 từ Zero đến Pro " Tôi thực sự thích tác giả này. Tôi đã không tham gia khóa học đặc biệt này; cách đây vài năm cũng có một khóa học tương tự nhưng kém hiện đại hơn.

Tác giả nói chuyện rất hay, mọi thứ đều dễ hiểu và dễ hiểu. Điểm nổi bật của khóa học này là bạn không chỉ học mà còn tạo một trang web cụ thể cùng với giáo viên. Kết quả là bạn sẽ có được một tấm danh thiếp, một blog và thậm chí là một cửa hàng trực tuyến. Rất tuyệt. Bạn có thể xem ba bài học lý thuyết đầu tiên về HTML5 từ khóa học này ngay tại đây.

Nhân tiện, cùng với khóa học này, bạn nhận được 7 phần thưởng: kiến ​​thức cơ bản về html và css của Andrei Bernatsky, bố cục cho người mới bắt đầu, tạo trang đích trong một buổi tối và hơn thế nữa. Trước khi bạn cam kết đào tạo nghiêm túc, hãy thử khóa học miễn phí " Thực hành HTML5 và CSS3 ».

Vâng, về cơ bản là tất cả. Đăng ký nhận bản tin để tìm hiểu thêm. Tôi sẽ sớm cho bạn biết thêm một chút về bố cục thích ứng, tăng thu nhập từ bất kỳ blog nào và đưa ra nhiều mẹo hữu ích để đơn giản hóa công việc của bạn. Hẹn gặp lại và chúc may mắn trong nỗ lực của bạn.

Chúc một ngày tốt lành cho tất cả những ai muốn tìm hiểu và học hỏi điều gì đó mới! Bạn đã bao giờ chú ý đến hình thức mà trong quá trình phát triển, người sáng tạo đã quá lười thiết kế nền của các trang chưa? Và tôi đã. Nó có vẻ tồi tệ. Thông thường, do thiếu sự phân chia thông thường giữa các loại thông tin khác nhau, nó bị lẫn lộn và đơn giản là không có mong muốn xem xét thêm bất kỳ điều gì trên một tài nguyên web như vậy.

Để ngăn thảm họa như vậy xảy ra với mình, tôi quyết định viết một bài về chủ đề: “Cách tạo nền trang bằng html”. Sau khi đọc ấn phẩm, bạn sẽ tìm hiểu những công cụ nào bạn có thể sử dụng để đặt thiết kế nền, cách cố định hoặc thay đổi nền, v.v. sẽ giúp trang web của bạn trở nên hấp dẫn. Bây giờ hãy bắt đầu!

Các công cụ cơ bản để thiết lập nền cho trang web

Để đặt hình nền, các nhà phát triển ngôn ngữ web đã cung cấp thuộc tính nền. Nó có sẵn cả trong và trong css.

Trong ngôn ngữ đánh dấu, đây là một thuộc tính của thẻ body và trong biểu định kiểu, nó là thuộc tính chung cho phép bạn thiết lập tối đa 5 đặc điểm nền cùng một lúc. Nền là một phần tử khá linh hoạt có thể được sử dụng để đặt nền ở dạng một màu, hình ảnh màu hoặc thậm chí là hoạt ảnh.

Vì vậy, để đặt hình nền thông qua đơn vị html chỉ cần viết đoạn mã sau: ... và thay vì dòng chữ “địa chỉ tệp”, hãy chèn đường dẫn đến ảnh.

Tuy nhiên, xin lưu ý! Nếu bạn muốn xem canvas một màu làm nền, được chỉ định bởi một giá trị từ bảng màu, thì việc này được thực hiện bằng thuộc tính bgcolor.

Ví dụ, ..., chúng tôi đã đặt nền đen cho trang web của mình.

Màu sắc trong css và html được chỉ định bằng một từ tiếng Anh (ví dụ: màu đỏ) hoặc một mã đặc biệt, bao gồm dấu # và sáu ký tự sau nó (ví dụ: #FFDAB9).

Khi bạn gõ tùy chọn thứ hai vào phần mềm chuyên dụng dành cho nhà phát triển, bảng màu sẽ tự động xuất hiện trước mặt bạn. Nếu bạn mới bắt đầu học các ngôn ngữ web này thì có thể tra cứu mã màu trên Internet.

Nền làm thuộc tính trong biểu định kiểu xếp tầng

Nó được đặt trong một tệp riêng biệt với kiểu css hoặc trong một phần tử