Cách tạo và liên kết đến các trang web bổ sung 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.
Khi xây dựng một trang web, bạn có thể cần có nhiều hơn một trang web. Nếu bạn muốn thêm và liên kết đến các trang bổ sung, trước tiên bạn cần tạo một file html mới trong folder dự án trang web của bạn . Trong hướng dẫn này, ta sẽ tìm hiểu cách tạo và liên kết đến một trang web bổ sung trên trang web
Trang web trình diễn của ta bao gồm trang web "Giới thiệu". Trong hướng dẫn này, ta sẽ hướng dẫn bạn quy trình tạo và liên kết đến trang web “Giới thiệu”, nhưng bạn có thể thay đổi tiêu đề và nội dung của trang này để phù hợp với nhu cầu của bạn .
Để thêm một trang mới vào trang web , hãy tạo một file mới có tên about.html và lưu nó trong folder html-practice của dự án. (Nếu bạn chưa theo dõi loạt bài hướng dẫn, bạn có thể xem lại hướng dẫn cài đặt file html mới trong hướng dẫn Cài đặt dự án HTML của bạn .)
Lưu ý : Nếu bạn quyết định chọn tên riêng của bạn cho file , hãy đảm bảo tránh các khoảng trắng ký tự, các ký tự đặc biệt (chẳng hạn như!, #,% Hoặc các ký tự khác) và chữ in hoa vì chúng có thể gây ra sự cố sau này. Bạn cũng phải bao gồm phần mở rộng .html .
Tiếp theo, bạn cần định dạng file bằng cách thêm thông tin giúp trình duyệt diễn giải nội dung file . Để định dạng file , hãy thêm đoạn mã sau vào đầu tài liệu:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>About</title> </head> </html> Đảm bảo thay đổi văn bản được đánh dấu bằng tiêu đề bạn muốn cho trang của bạn . Để biết giải thích về từng thẻ HTML, vui lòng truy cập hướng dẫn trước đó trong loạt bài này Thêm phần tử <head> HTML vào trang web . Lưu file trước khi bạn tiếp tục.
Trước khi thêm bất kỳ nội dung nào vào trang này, hãy xem qua các bước thêm liên kết đến trang này trên trang chủ của bạn.
Trước tiên, hãy quay lại index.html của bạn và thêm đoạn mã sau vào bên dưới phụ đề của trang web và phía trên thẻ đóng </div> :
... <p style="font-size: 20px; color:#1F9AFE;"> <a href="Webpage_FilePath">About this site</a> </p> ... Thay đổi đường dẫn file được đánh dấu thành đường dẫn file tương đối của file “about.html” của bạn. Đường dẫn tương đối đề cập đến vị trí file liên quan đến folder làm việc hiện tại (trái ngược với đường dẫn tuyệt đối , đề cập đến vị trí file liên quan đến folder root .) Nếu bạn đang sử dụng editor Visual Studio Code, bạn có thể sao chép đường dẫn file tương đối bằng CTRL + Left Click (trên máy Mac) hoặc right-clicking' (on Windows) on the file icon and selecting Sao chép đường dẫn tương đối.'
Lưu ý ta cũng đã chỉ định kích thước phông chữ và màu sắc bằng cách sử dụng thuộc tính style . Lưu index.html của bạn và reload trong trình duyệt.
Đến đây bạn sẽ có một liên kết dẫn đến trang web about.html của bạn như sau:
Nếu bạn nhận được lỗi, hãy đảm bảo file của bạn nằm trong cùng folder dự án với index.html và không có lỗi nào trong đường dẫn dự án của bạn.
Đến đây bạn nên biết cách tạo và liên kết đến một trang web mới trên trang web của bạn . Bạn có thể sử dụng các bước tương tự này để tạo và liên kết đến các trang khác trên trang web của bạn . Bạn cũng có thể thêm nội dung vào bất kỳ trang web mới nào giống như cách bạn đang học để thêm nội dung vào trang chủ của bạn .
Các tin liên quan
Cách thêm hình nền vào phần trên cùng của trang web bằng HTML2020-09-14
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 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 thêm HTML Thành phần cho trang web của bạn
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
