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

5 Phần:Chuẩn bị tập tinViết tập tin HTMLXem qua tệp HTMLHiểu về mã HTMLHiểu về mã CSS

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.

Phần 1
Chuẩn bị tập tin

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

Phần 2
Viết tập tin HTML

  1. 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. 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”).
    Khi hoàn tất, đoạn mã sẽ trở thành:
    background-image: url("background.png");
    Nếu bạn sử 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 đó.[3]
  3. 3
    Lưu tập tin HTML lại.

Phần 3
Xem qua tệp HTML

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

Phần 4
Hiểu về mã HTML

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

Phần 5
Hiểu về mã CSS

  1. 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. 2
    Xem lại mã CSS.
    body {
            background-image: url("background.png");
    }
    
  3. 3
    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]
    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 { }.
  4. 4
    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]
    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 ;.

Thông tin Bài viết

Chuyên mục: Mạng Internet

Ngôn ngữ khác:

English: Set a Background Image in HTML, Español: fijar una imagen de fondo en HTML, Italiano: Impostare lo Sfondo di Una Pagina HTML, Português: Definir um Plano de Fundo em HTML, Русский: добавить фоновое изображение в HTML, Deutsch: Ein Hintergrund Bild in HTML einfügen, Bahasa Indonesia: Mengatur Gambar Latar di HTML, Français: définir une image en fond de page en HTML, Nederlands: Een achtergrondafbeelding toevoegen aan HTML, ไทย: ใส่ภาพพื้นหลังด้วย HTML, العربية: ضبط صورة خلفية في لغة اتش تي ام ال, 한국어: HTML 배경화면 지정하는 법, 日本語: HTMLで背景画像を設定する, हिन्दी: HTML में बैकग्राउंड इमेज सेट करें (Set a Background Image in HTML)

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

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