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. Còn CSS là Cascading Style Sheets (tạm dịch: những tập tin định kiểu theo tầng), được dùng để thay đổi diện mạo và bố cục của một trang web. 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.
những bước
Phần 1Phần 1 Chuẩn bị tập tin
1Tạ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.2Lư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 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 những thiết bị lỗi thời hay trên đường truyền chậm, bạn nên chọn 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.3Tạ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ể 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 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 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 những 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
Phần 2Phần 2 Viết tập tin HTML
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>2Thê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”)Khi hoàn tất, đoạn mã sẽ trở thành: background-image: url(“background.png”);Nếu bạn dùng tên tập tin mà không dùng đường dẫn tệp hay ULR, trình duyệt web sẽ tìm tên hình ảnh trong thư mục trang web. Nếu hình ảnh nằm ở thư mục khác trong hệ thống, bạn cần phải thêm đường dẫn đầy đủ của tệp ảnh đó.Lưu tập tin HTML lại.
Phần 3Phần 3 Xem qua tệp HTML
1Mở 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.2Thự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
Phần 4Phần 4 Hiểu về mã HTML
1Hiể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. 2Hiể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. 3Thự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. 4Hiể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. 5Hiể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. 6Hiể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. 7Hiể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. 8Thự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
Phần 5Phần 5 Hiểu về mã CSS
1Hiể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ị. 2Xem lại mã CSS.3body{background-image:url(“background.png”);}4Hiểu về những đoạn mã CSS. những định dạng CSS được tạo ra theo hai phần: vùng chọn (selector) và phần khai báo (declaration).Trong ví dụ này, body là vùng chọn và background-image: url(“background.png”) là phần khai báo.Một vùng chọn có thể là bất kỳ thẻ HTML nào.Phần khai báo luôn nằm giữa dấu ngoặc nhọn { }.5Hiể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ị.Phần thuộc tính miêu tả những gì đang được định dạng và phần giá trị cho biết cách mà thuộc tính được định dạng.Phần thuộc tính và giá trị luôn được phân chia bởi dấu hai chấm :.Phần khai báo CSS luôn được kết thúc bằng dấu chấm phẩy ;
