Cách để Thiết Lập Hình Nền Trong HTML - WikiHow

Có thể bạn quan tâm

Trang đầu
Ngẫu nhiên
Duyệt các Chuyên mục
Giới thiệu về wikiHow

Đăng nhập / Đăng ký

Các chính sáchCách để Thiết lập hình nền trong HTML

Tải về bản PDF Cùng viết bởi Nhân viên của wikiHow

Đã xác minh dữ kiện

Tải về bản PDF X

Bài viết này có đồng tác giả là đội ngũ biên tập viên và các nhà nghiên cứu đã qua đào tạo, những người xác nhận tính chính xác và toàn diện của bài viết. Nhóm Quản lý Nội dung của wikiHow luôn cẩn trọng giám sát công việc của các biên tập viên để đảm bảo rằng mọi bài viết đều đạt tiêu chuẩn chất lượng cao. Bài viết này đã được xác minh dữ kiện, đảm bảo tính chính xác của mọi sự kiện được viện dẫn và củng cố tính xác thực của các nguồn tin. Bài viết này đã được xem 102.664 lần.

Trong bài viết này: Chuẩn bị tập tin Viết tập tin HTML Xem qua tệp HTML Hiểu về mã HTML Hiểu về mã CSS Xem thêm 2... Thu gọn... Bài viết có liên quan Tham khảo

Nếu muốn thêm một hình ảnh vào website, tất cả những gì bạn cần là mã HTML. Còn nếu muốn đặt một hình ảnh làm hình nền cho trang web, bạn cần cả HTML và CSS. HTML là viết tắt của Hypertext Markup Language (tạm dịch: Ngôn ngữ đánh dấu siêu văn bản), một loại mã cho trình duyệt biết cần hiển thị những gì trên trang web.[1] Còn CSS là Cascading Style Sheets (tạm dịch: Các tập tin định kiểu theo tầng), được sử dụng để thay đổi diện mạo và bố cục của một trang web.[2] Bạn cũng cần có một hình ảnh để đặt làm hình nền cho website của mình.

Các bước

Phần 1 Phần 1 của 5:

Chuẩn bị tập tin

Tải về bản PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/42\/2627945-1-1.jpg\/v4-460px-2627945-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/42\/2627945-1-1.jpg\/v4-728px-2627945-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 Tạo một thư mục để lưu tập tin HTML và hình nền. Trên máy tính, tạo và đặt tên một thư mục mà bạn có thể dễ dàng tìm thấy sau đó.
- Bạn có thể đặt tên thư mục tùy thích, nhưng khi làm việc với HTML, tốt nhất bạn nên tập thói quen đặt tên tệp và thư mục bằng một từ ngắn gọn.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a0\/2627945-2-1.jpg\/v4-460px-2627945-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a0\/2627945-2-1.jpg\/v4-728px-2627945-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 Lưu hình ảnh làm nền vào thư mục HTML. Lưu trữ hình ảnh mà bạn muốn sử dụng làm nền vào thư mục HTML.
- Nếu không lo ngại về việc website của bạn sẽ tải chậm trên các thiết bị lỗi thời hay trên đường truyền chậm, bạn nên chọn sử dụng hình ảnh có độ phân giải cao để làm nền. Hình ảnh đơn giản với màu sắc nhạt và hoa văn lặp lại cũng là chọn lựa tốt khi quyết định chọn hình nền sao cho người dùng có thể dễ dàng đọc bất kỳ văn bản nào hiển thị bên trên.
- Nếu không có sẵn hình nền, bạn có thể tải về miễn phí. Sau khi tải hình ảnh về, di chuyển nó sang thư mục HTML mà bạn đã tạo.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e0\/2627945-3-1.jpg\/v4-460px-2627945-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e0\/2627945-3-1.jpg\/v4-728px-2627945-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 Tạo tập tin HTML. Mở một trình soạn thảo văn bản và tạo tập tin mới. Lưu tập tin với đuôi .html.
- Bạn có thể sử dụng bất kỳ trình soạn thảo nào, kể cả chương trình hệ thống được cài đặt sẵn như Notepad (trên Windows) hay TextEdit (trên Mac OS X).
- Nếu bạn muốn sử dụng một trình soạn thảo chuyên dụng để viết HTML, nhấp vào đây để tải Atom, một trình soạn thảo văn bản hoạt động trên cả hệ điều hành Windows, Mac OS X và Linux.
- Nếu bạn đang sử dụng TextEdit, trước khi bắt đầu viết tệp HTML, nhấp vào trình đơn Format (Định dạng) và chọn Make Plain Text (Tạo Văn bản Thuần túy). Thiết lập này sẽ đảm bảo cho tập tin HTML được thực thi đúng cách trên trình duyệt web.
- Trình xử lý văn bản (chẳng hạn như Microsoft Word) không phù hợp để viết HTML, vì những chương trình này thêm các ký tự và định dạng ẩn có thể làm hỏng cấu trúc tập tin HTML và nội dung sẽ không được hiển thị đúng đắn trên trình duyệt web.
Quảng cáo

Phần 2 Phần 2 của 5:

Viết tập tin HTML

Tải về bản PDF

1 Sao chép và dán mã HTML tiêu chuẩn. Chọn và sao chép đoạn mã bên dưới, sau đó, dán vào tập tin HTML mà bạn đã tạo (trong ví dụ này là index.html). <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body { background-image: url(" "); } </style> </head> <body> </body> </html>
2 Thêm đường dẫn của hình nền. Trong index.html, tìm dòng background-image: url(" ");. Di chuyển con trỏ chuột vào giữa dấu ngoặc đơn, sau đó, gõ tên của tệp ảnh làm hình nền. Đừng quên bao gồm cả phần mở rộng của tệp ảnh đó (trong ví dụ này là “background.png”). Quảng cáo

background-image: url("background.png");

Lưu tập tin HTML lại.

Phần 3 Phần 3 của 5:

Xem qua tệp HTML

Tải về bản PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/72\/2627945-7-1.jpg\/v4-460px-2627945-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/72\/2627945-7-1.jpg\/v4-728px-2627945-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 Mở tập tin HTML trên trình duyệt web. Nhấp chuột phải vào index.html và mở tệp bằng trình duyệt web mà bạn muốn.
- Khi trình duyệt được mở lên, nếu bạn không nhìn thấy hình ảnh, kiểm tra lại xem tên tệp ảnh đã được nhập chính xác trong cửa sổ soạn thảo index.html chưa.
- Khi trình duyệt được mở lên, nếu bạn thấy mã HTML thay vì hình nền thì có thể là tập tin index.html đã được lưu dưới định dạng RTF (rich text document). Khi đó, bạn cần thử chỉnh sửa tập tin HTML trên một trình soạn thảo khác.
2 Thực hiện việc chỉnh sửa tập tin HTML. Trong cửa sổ soạn thảo văn bản, di chuyển con trỏ chuột đến giữa thẻ <body> </body> rồi gõ nội dung bất kỳ, chẳng hạn như Xin chào!. Tải lại cửa sổ trình duyệt, bạn sẽ thấy dòng chữ nằm phía trên hình nền. Quảng cáo

Phần 4 Phần 4 của 5:

Hiểu về mã HTML

Tải về bản PDF

1 Hiểu về thẻ HTML và CSS. Mã HTML được tạo bởi những thẻ mở và đóng. Thẻ <body> là thẻ mở phần nội dung chính và </body> là thẻ đóng phần nội dung chính lại. Mọi thẻ mở trên một trang HTML đều cần được đóng lại thì trang mới có thể hiển thị đúng cách.
2 Hiểu về thẻ DOCTYPE (định nghĩa chuẩn văn bản). Mọi trang HTML được viết đúng cách đều phải bắt đầu bằng thẻ <!DOCTYPE html>. Thẻ này cho trình duyệt web biết nó đang làm việc với tập tin HTML.
3 Thực hiện việc chỉnh sửa tập tin HTML. Trong cửa sổ soạn thảo văn bản, di chuyển con trỏ chuột đến giữa thẻ <body> </body> rồi gõ nội dung bất kỳ, chẳng hạn như Xin chào!. Tải lại cửa sổ trình duyệt, bạn sẽ thấy dòng chữ nằm phía trên hình nền.
4 Hiểu về thẻ HTML và CSS. Mã HTML là tạo ra những thẻ mở và đóng. Thẻ <body> là thẻ mở phần nội dung chính và </body> là thẻ đóng phần nội dung chính lại. Mọi thẻ mở trên một trang HTML đều cần được đóng lại thì trang mới có thể hiển thị một cách đúng đắn.
5 Hiểu về thẻ tiêu đề. Thẻ <title> là dòng chữ hiển thị trên thanh tiêu đề cũng như đầu tab của cửa sổ trình duyệt.
6 Hiểu về thẻ định dạng. Thẻ <style> đánh dấu nội dung CSS. Tất cả nội dung nằm giữa thẻ <style> đều là mã CSS.
7 Hiểu về thẻ nội dung. Bất kỳ nội dung nào được viết giữa thẻ <body> cũng sẽ hiển thị dưới dạng văn bản, trừ khi đó là mã HTML hay CSS.
8 Thực hiện việc chỉnh sửa tập tin HTML. Trong cửa sổ soạn thảo văn bản, di chuyển con trỏ chuột đến giữa thẻ <body> </body> rồi gõ nội dung bất kỳ, chẳng hạn như Xin chào!. Tải lại cửa sổ trình duyệt, bạn sẽ thấy dòng chữ nằm phía trên hình nền. Quảng cáo

Phần 5 Phần 5 của 5:

Hiểu về mã CSS

Tải về bản PDF

1 Hiểu về mã CSS. Trong tập tin index.html, mã CSS nằm giữa thẻ <style> và cho trình duyệt biết cần phải thêm hình nền bằng một cái tên cụ thể nằm trong thẻ <body> khi trang web hiển thị.
2 Xem lại mã CSS.

body

{

background-image

url

(

"background.png"

);

}

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ab\/2627945-19-1.jpg\/v4-460px-2627945-19-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ab\/2627945-19-1.jpg\/v4-728px-2627945-19-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 Hiểu về những đoạn mã CSS. Các định dạng CSS được tạo ra theo hai phần: vùng chọn (selector) và phần khai báo (declaration).[4] X Nguồn nghiên cứu
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/2627945-20.jpg\/v4-460px-2627945-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/2627945-20.jpg\/v4-728px-2627945-20.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 Hiểu về phần khai báo CSS. Phần khai báo CSS gồm hai phần, thuộc tính (property) và giá trị (value). Bên trong dấu ngoặc nhọn, background-image là phần thuộc tính và url("background.png") là giá trị.[5] X Nguồn nghiên cứu
Quảng cáo

Bài viết wikiHow có liên quan

Cách đểTải Video Miễn phí từ Mọi Trang Web

Cách đểTìm kiếm thông tin về ai đó bằng hình ảnh

Cách đểTạo một trang web đơn giản với HTML

Cách đểTải liên kết Torrent

Cách đểTạo Tài khoản Yahoo

Cách đểTạo trang web đơn giản bằng Notepad

Cách đểTải video về từ Youtube

Cách đểTải xuống tập tin từ GitHub

Cách đểKiểm tra email bằng việc sử dụng Google Mail

Cách đểChạy tập tin HTML

Cách đểCho phép chỉnh sửa tài liệu Google Doc

Cách đểThay đổi mật khẩu tài khoản Hotmail

Cách đểLấy liên kết URL của hình ảnh

Cách đểChép và dán liên kết Quảng cáo

Tham khảo

↑ http://www.w3schools.com/html/html_intro.asp
↑ http://www.w3schools.com/css/css_intro.asp
↑ http://www.w3schools.com/html/html_images.asp
↑ http://www.w3schools.com/css/css_syntax.asp
↑ http://www.w3schools.com/css/css_background.asp

Về bài wikiHow này

Cùng viết bởi: Nhân viên của wikiHow Người viết bài của wikiHow Bài viết này có đồng tác giả là đội ngũ biên tập viên và các nhà nghiên cứu đã qua đào tạo, những người xác nhận tính chính xác và toàn diện của bài viết. Nhóm Quản lý Nội dung của wikiHow luôn cẩn trọng giám sát công việc của các biên tập viên để đảm bảo rằng mọi bài viết đều đạt tiêu chuẩn chất lượng cao. Bài viết này đã được xem 102.664 lần. Chuyên mục: Mạng Internet Ngôn ngữ khác Tiếng Anh Tiếng Tây Ban Nha Tiếng Italy Tiếng Bồ Đào Nha Tiếng Nga Tiếng Đức Tiếng Indonesia Tiếng Pháp Tiếng Hà Lan Tiếng Thái Tiếng Ả Rập Tiếng Hàn Tiếng Nhật Tiếng Hindi Tiếng Trung Tiếng Thổ Nhĩ Kỳ Tiếng Ba Tư

Trang này đã được đọc 102.664 lần.

Bài viết này đã giúp ích cho bạn?

Có Không Quảng cáo Cookie cho phép wikiHow hoạt động tốt hơn. Bằng việc tiếp tục sử dụng trang web của chúng tôi, bạn đồng ý với chính sách cookie của chúng tôi.