Cách thêm hình nền vào phần trên cùng của trang web bằng HTML
Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.
Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.
Trong hướng dẫn này, ta sẽ học cách sử dụng containers <div> để cấu trúc phần trên cùng của trang web. Ta sẽ sử dụng thuộc tính style để chỉ định chiều cao của containers <div> , áp dụng hình nền và chỉ định rằng hình nền phải bao phủ toàn bộ khu vực của containers <div> .
Trước khi bắt đầu, ta cần một hình nền. Bạn có thể download và sử dụng hình nền của trang trình diễn của ta cho mục đích của hướng dẫn hoặc bạn có thể chọn một hình ảnh mới. (Để biết thêm thông tin về cách thêm hình ảnh vào trang web bằng HTML, vui lòng truy cập hướng dẫn Hình ảnh HTML của ta từ phần trước trong loạt bài hướng dẫn này).
Khi bạn đã chọn hình nền của bạn , hãy lưu hình ảnh vào folder images của bạn dưới dạng background-image.jpg .
Tiếp theo, dán đoạn mã được đánh dấu vào index.html của bạn bên dưới thẻ mở <body> và phía trên thẻ đóng </body> :
. . . <body> <!--First section--> <div style="background-image: url('Image_Location'); background-size: cover; height:480px; padding-top:80px;"> </div> </body> ... Đảm bảo chuyển đổi văn bản Image_Location với đường dẫn file của hình ảnh của bạn và đừng quên thêm thẻ đóng </div> .
Lưu ý ta đã thêm comment <!--First section--> để giúp tổ chức mã HTML của ta . Comment là một đoạn mã bị trình duyệt bỏ qua. Comment được sử dụng để giúp giải thích hoặc sắp xếp mã cho các nhà phát triển. Chúng được tạo bằng thẻ mở <!-- và thẻ đóng --> .
Ta cũng đã chỉ định height thành 480 pixel và padding-top là 80 pixel, điều này sẽ tạo ra 80 pixel không gian giữa phần trên cùng của phần tử <div> và bất kỳ nội dung nào ta đặt bên trong. Lưu ý bạn sẽ không thể thấy tác động của giá trị padding-top cho đến khi ta đặt nội dung vào bên trong trong bước tiếp theo.
Lưu file và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:
Ngoài ra, bạn có thể sử dụng màu nền thay vì hình nền. Để sử dụng màu nền, hãy thay thế đoạn mã phần tử <div> bạn vừa tạo bằng đoạn mã phần tử <div> đánh dấu sau như thế này:
. . . <body> <!--First section--> <div style="background-color: #f4bc01; height:480px; padding-top:80px;"> </div> </body> ... Lưu file và reload trong trình duyệt để kiểm tra kết quả của bạn. Hình nền bây giờ sẽ được thay thế bằng một containers có cùng kích thước nhưng có màu vàng đồng nhất.
Nếu bạn so sánh containers <div> trên trang web của bạn với cùng containers <div> trên trang trình diễn , bạn có thể nhận thấy rằng containers <div> của trang web được bao quanh bởi một khoảng trắng nhỏ. Lề này là do tất cả các trang HTML được tự động đặt để có một lề nhỏ theo mặc định.
Để loại bỏ phần lề này, ta cần thêm thuộc tính style vào thẻ mở <body> đặt lề của phần tử <body> của trang HTML thành 0 pixel. Tìm <body> mở trong index.html của bạn và sửa đổi nó bằng mã được đánh dấu:
<body style = “margin: 0;” >
Lưu và reload file trong trình duyệt của bạn. Bây giờ sẽ không có lề trắng xung quanh containers <div> trên cùng.
Đến đây bạn sẽ biết cách thêm containers <div> với hình nền để cấu trúc phần trên cùng của trang web.
Các tin liên quan
Cách Căn giữa hoặc Căn chỉnh Văn bản và image trên Trang web của Bạn bằng HTML2020-09-14
Cách thêm image profile theo kiểu vào trang web của bạn bằng HTML
2020-09-14
Cách thêm HTML Thành phần cho trang web của bạn
2020-09-14
Cách tạo và liên kết đến các trang web bổ sung bằng HTML
2020-09-14
Cách thêm và tạo kiểu tiêu đề cho trang web của bạn bằng HTML
2020-09-14
Cách thiết lập dự án trang web HTML của bạn
2020-09-14
Cách tạo kiểu cho HTML Thành phần
2020-09-14
Cách thêm hình nền vào phần trên cùng của trang web bằng HTML
2020-09-14
Cách thêm image profile theo kiểu vào trang web của bạn bằng HTML
2020-09-14
Cách sử dụng
2020-08-27
