Cách thêm chân trang vào trang web của bạn 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.
Chân trang của trang web là khối nội dung cuối cùng ở cuối trang web. Chân trang có thể chứa bất kỳ loại nội dung HTML nào, bao gồm văn bản, hình ảnh và liên kết. Trong hướng dẫn cuối cùng của loạt bài này, ta sẽ tạo footer cơ bản sau cho trang web của bạn bằng cách sử dụng phần tử <footer> :
Để bắt đầu, hãy dán đoạn mã sau vào sau thẻ đóng </div> và trước thẻ đóng </body> :
. . . <!--Footer--> <footer style="height:auto; background-color:#F7C201;"> <h1><Made with 🤍 at DigitalOcean</h1> </footer> . . . Trong đoạn mã này, <!--Footer--> là một comment sẽ không được trình duyệt đọc và được sử dụng để giúp tổ chức file html của ta nhằm mục đích con người có thể đọc được. Dưới comment này, ta có
đã thêm một phần tử <footer> , chỉ định màu nền của nó và sử dụng thuộc tính style để đặt chiều cao của nó để tự động điều chỉnh cho phù hợp với nội dung bên trong. Phần tử <footer> là một phần tử ngữ nghĩa mà tên của nó cho nhà phát triển biết mục đích của nội dung. Điều này rất hữu ích cho các nhà phát triển cũng như cho khách truy cập trang web sử dụng trình đọc màn hình. Nếu không, phần tử <footer> hoạt động giống như phần tử <div> .
Ta cũng đã thêm nội dung văn bản và biểu tượng cảm xúc bên trong phần tử <h1> . Hãy thay đổi nội dung văn bản này bằng một tin nhắn và biểu tượng cảm xúc mà bạn chọn.
Lưu file của bạn và reload trong trình duyệt để kiểm tra kết quả. Bạn sẽ nhận được thông tin như thế này:
Lưu ý nội dung chân trang của ta không hoàn toàn giống nội dung trong trang trình diễn. Nội dung chân trang của ta có lề dưới màu trắng và văn bản có kiểu dáng khác nhau. Để xóa lề dưới cùng và tạo kiểu cho văn bản, hãy thêm các thuộc tính được đánh dấu vào phần tử <h1> của bạn như sau:
<h1 style="color:white; padding:40px; margin:0; text-align:center;">Made with 🤍 at DigitalOcean</h1> Lưu file và reload trong trình duyệt. Đến đây bạn sẽ có một footer được tạo kiểu giống như trang web trình diễn được hình ở trên cùng của hướng dẫn này.
Trong hướng dẫn này, bạn đã học cách tạo và tạo kiểu cho footer. Như vậy, bạn có thể khám phá thêm các loại nội dung và kiểu dáng khác nhau cho chân trang của bạn bằng cách sử dụng các phần tử từ loạt bài hướng dẫn này.
Các tin liên quan
Cách thiết lập dự án HTML của bạn2020-09-16
Cách sử dụng và hiểu các phần tử HTML
2020-09-16
Cách xem mã nguồn của tài liệu HTML
2020-09-16
Cách sử dụng và hiểu các phần tử HTML
2020-09-16
Cách sử dụng và hiểu các phần tử HTML
2020-09-16
Cách thêm image vào trang web của bạn bằng HTML
2020-09-15
Cách tạo phần nội dung trang chủ của bạn bằng HTML
2020-09-15
Sử dụng ExpressJS để phân phối tệp HTML
2020-09-15
Cách thêm image vào trang web của bạn bằng HTML
2020-09-15
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
