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

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]XNguồn nghiên cứu} 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]XNguồn nghiên cứu} 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.

Phần 1

Phần 1 của 5:

Chuẩn bị tập tin

Tải về bản PDF

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.
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.
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>
```
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");

^{[3]XNguồn nghiên cứu}

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

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.
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

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.
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.
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.
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.
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.
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.
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.
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

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ị.

3

body {background-image: url("background.png");}

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]XNguồn nghiên cứu}
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]XNguồn nghiên cứu}
Quảng cáo