Bạn đang xem : cách thêm một trang khác trong html

Như bạn biết, nhiều trang web có nhiều trang. Các khu vực khác nhau mà bạn có thể điều hướng giữa các khu vực (thường bằng các liên kết hoặc menu điều hướng) để xem và tương tác với các thông tin khác nhau.

Một số sinh viên có thể đã thử nghiệm với việc tạo trang web nhiều trang trong Phần giới thiệu, đặc biệt là trong tuần dự án nhóm mở, nhưng các sinh viên khác có thể không. Vì vậy, trước khi tiếp tục, hãy giải quyết ngắn gọn cách tạo các trang HTML nhiều trang để sử dụng trong khóa học này.

Sau này, chúng tôi sẽ tìm hiểu các cách thay thế, nâng cao hơn để tạo các trang web nhiều trang. Nhưng trong khi trọng tâm chính của chúng tôi là củng cố kỹ năng CSS trong tuần đầu tiên này, thì phương pháp đơn giản được mô tả trong bài học này sẽ phục vụ tốt cho mục đích của chúng tôi.

Tạo nhiều trang

Một trang web HTML cơ bản, như được tạo trong Intro, có cấu trúc như sau:

 my-sample-project /
├── README.md
├── index.html
└── css
 └── styles.css

Ở đây chúng tôi có:

  • Thư mục dự án có tên là my-sample-project. Nó chứa:
    • Tệp README.md.
    • Trang chủ index.html.
    • Thư mục con css với biểu định kiểu styles.css tùy chỉnh.

Trang web mẫu này chỉ có một trang: index.html. Nhưng không phải tất cả các trang web đều là một trang. Trên thực tế, nhiều trang web truyền thống cung cấp nhiều khu vực mà người dùng có thể điều hướng.

Cấu trúc dự án nhiều trang

Giả sử chúng tôi cũng muốn trang web này chứa nhiều trang. Ngoài trang chủ index.html, chúng tôi muốn có các trang “Giới thiệu về chúng tôi” và “Liên hệ với chúng tôi”. Chúng tôi sẽ thêm các trang này bằng cách tạo hai tệp HTML tương ứng:

 my-sample-project /
├── README.md
├── index.html
├── html
│ ├── contact.html
│ └── about.html
└── css
 └── styles.css

Thông báo index.html vẫn ở cấp cao nhất của thư mục, nhưng các tệp HTML bổ sung (không phải trang chủ) nằm trong thư mục con html. Điều này là do trình duyệt tìm kiếm index.html trong thư mục chính, vì vậy trình duyệt biết những gì cần tải trước.

Mỗi tệp mới này sẽ trông giống với các tệp HTML mà chúng tôi đã tạo trước đây, với & lt; html & gt; , & lt; head & gt; Các thẻ & lt; body & gt; chứa bất kỳ nội dung trang cụ thể nào mà chúng tôi muốn.

Nhưng chúng tôi cần một cách để người dùng điều hướng giữa các trang này! Rất may, chúng ta có thể thực hiện việc này với thẻ & lt; a & gt; đơn giản.

Xem Thêm  Bao gồm một tệp HTML trong một tệp HTML khác - html bao gồm một tệp html khác

Ví dụ: để tạo liên kết điều hướng từ index.html đến trang liên hệ contact.html, chúng tôi sử dụng mã sau:

my-sample-project / index.html

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; Trang chủ Ví dụ & lt; / title & gt;
  & lt; / head & gt;
  & lt; body & gt;
    ...
    & lt; a href = "html / contact.html" & gt; Thông tin liên hệ & lt; / a & gt;
    ...
  & lt; / body & gt;
& lt; / html & gt;
 

Điều này tương tự với các liên kết & lt; a & gt; được tạo trong Intro, nhưng với một đường dẫn tệp bên trong dự án của chúng tôi thay vì một URL trực tuyến bên ngoài. Khi được nhấp vào, liên kết này sẽ hiển thị nội dung của tệp contact.html của chúng tôi.

Để thêm các liên kết điều hướng đến các trang khác trong thư mục dự án của chúng tôi, chúng tôi thực hiện theo quy trình tương tự:

my-sample-project / index.html

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; Trang chủ Ví dụ & lt; / title & gt;
  & lt; / head & gt;
  & lt; body & gt;
    ...
    & lt; a href = "html / contact.html" & gt; Thông tin liên hệ & lt; / a & gt;
    & lt; a href = "html / about.html" & gt; Giới thiệu & lt; / a & gt;
    ...
  & lt; / body & gt;
& lt; / html & gt;
 

Tạo kiểu cho các trang web HTML nhiều trang

Để tạo kiểu cho nhiều trang trong một trang web, mỗi tệp HTML cần được liên kết với một biểu định kiểu. Trong một dự án nhỏ hơn, chúng tôi sẽ tạo một biểu định kiểu trung tâm và liên kết nó trong & lt; head & gt; của mỗi tài liệu HTML , như sau:

my-sample-project / index.html

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; Trang chủ Ví dụ & lt; / title & gt;
    & lt; link href = "css / styles.css" rel = "stylesheet" type = "text / css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
    ...
    & lt; a href = "html / contact.html" & gt; Thông tin liên hệ & lt; / a & gt;
    & lt; a href = "html / about.html" & gt; Giới thiệu & lt; / a & gt;
    ...
  & lt; / body & gt;
& lt; / html & gt;
 

my-sample-project / html / contact.html

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; Liên hệ với Chúng tôi & lt; / title & gt;
    & lt; link href = "../ css / styles.css" rel = "stylesheet" type = "text / css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
    ...
  & lt; / body & gt;
& lt; / html & gt;
 

my-sample-project / html / about.html

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; About Us & lt; / title & gt;
    & lt; link href = "../ css / styles.css" rel = "stylesheet" type = "text / css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
    ...
  & lt; / body & gt;
& lt; / html & gt;
 

(Lưu ý rằng đường dẫn tệp đến biểu định kiểu trong index.html khác với đường dẫn trong hai trang khác, bởi vì index.html nằm ở cấp cao nhất của thư mục và contact.html và about.html nằm trong một thư mục con html. Vì vậy, các đường dẫn tệp đến biểu định kiểu của chúng được đặt trước bằng .. để thoát ra khỏi thư mục html trước khi vào thư mục css.)

Xem Thêm  Hai nút cạnh nhau sắp xếp lại thành một cột ... với chiều rộng có thể tùy chỉnh? > Quỳ tím - hai nút bên cạnh nhau html

Khi các dự án tăng quy mô và nếu / khi các trang có các kiểu riêng chỉ áp dụng cho chúng, chúng tôi cũng có thể tạo các biểu định kiểu dành riêng cho các trang cụ thể, như sau:

 my-sample-project /
├── README.md
├── index.html
├── html
│ ├── contact.html
│ └── about.html
├── css
│ ├── contact.css
│ ├── about.css
│ └── styles.css
└── js
├── jquery-1.11.2.js
└── scripts.js

Ở đây, styles.css sẽ chứa các kiểu phổ biến cho tất cả các trang, trong khi about.css và contact.css chứa các kiểu chỉ áp dụng cho các trang contact.html và about.html, tương ứng. Sau đó, các bảng định kiểu chuyên dụng này có thể được liên kết trong các tệp HTML có liên quan, sau biểu định kiểu chung:

my-sample-project / html / contact.html

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; Liên hệ với Chúng tôi & lt; / title & gt;
    & lt; link href = "../ css / styles.css" rel = "stylesheet" type = "text / css" & gt;
    & lt; link href = "../ css / contact.css" rel = "stylesheet" type = "text / css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
    ...
  & lt; / body & gt;
& lt; / html & gt;
 

my-sample-project / html / about.html

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
  & lt; đầu & gt;
    & lt; title & gt; About Us & lt; / title & gt;
    & lt; link href = "../ css / styles.css" rel = "stylesheet" type = "text / css" & gt;
    & lt; link href = "../ css / about.css" rel = "stylesheet" type = "text / css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
    ...
  & lt; / body & gt;
& lt; / html & gt;
 

Tuy nhiên, hãy nhớ rằng chúng ta sẽ tìm hiểu thêm về cách tách bền vững các kiểu trong nhiều bảng định kiểu mô-đun vào cuối tuần này, khi chúng ta thảo luận về thứ gọi là Kiến trúc 7-1 và nó liên quan đến một công cụ kiểu có tên Sass .

Các trang web HTML nhiều trang trong giao diện người dùng

Điều này áp dụng cho khóa học Giao diện Người dùng của chúng tôi như thế nào? Chà, khi cả hai bạn đều tạo lại các loại giao diện người dùng phổ biến trong CSS của riêng mình trong tuần này và phát triển các thiết kế giao diện người dùng tùy chỉnh vào tuần tới, bạn có thể tìm thấy các trường hợp mà bạn cần tạo một trang web nhiều trang để hiển thị các giao diện đó trong trình duyệt. < / p>

Một lần nữa, chúng ta sẽ học cách nâng cao hơn để thực hiện việc này sau (chẳng hạn như sử dụng thứ gọi là trình gói mô-đun để quản lý mã nguồn của chúng tôi và bộ định tuyến để điều hướng giữa các khu vực trang web khác nhau). Nhưng cho đến khi có thông báo mới, chúng tôi sẽ sử dụng các khái niệm được thảo luận ở đây khi chúng tôi cần tạo các trang web nhiều trang.

Xem Thêm  Cách ghi vào tệp bằng Python - python viết một tệp


Xem thêm những thông tin liên quan đến chủ đề cách thêm một trang khác trong html

HTML – Sử dụng thẻ Div bố cục đơn giản

  • Tác giả: Thanh Duong Huu
  • Ngày đăng: 2020-05-12
  • Đánh giá: 4 ⭐ ( 2020 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng thẻ div bố cục lưới đơn giản

Cách để Tạo một trang web đơn giản với HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 3 ⭐ ( 3652 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Tạo một trang web đơn giản với HTML. Đây là bài viết hướng dẫn cách tạo một trang web đơn giản với HTML (ngôn ngữ đánh dấu siêu văn bản). HTML là một trong những thành phần cốt lõi của mạng lưới toàn cầu World Wide Web và tạo nên…

Các liên kết trong HTML

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 8816 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Siêu liên kết cho phép người sử dụng điều hướng tới những nội dung khác.

Thẻ Tạo Link Liên Kết Trong HTML

  • Tác giả: nguyenhung.net
  • Đánh giá: 5 ⭐ ( 8129 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML. Bài viết sẽ hướng dẫn cho bạn chi tiết nhất về thẻ a trong HTML cũng như cách dùng nó khi làm web.

[HTML/HTML5] Phần 14: Liên kết trong HTML

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 6255 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách Liên Kết Các Trang Web Với Nhau, Thẻ Tạo Liên Kết Html

  • Tác giả: sarakhanov.com
  • Đánh giá: 3 ⭐ ( 8814 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Liên kết trong HTML – Cú phápCáᴄ liên kết ᴄụᴄ bộLiên kết trong HTML – Màu ѕắᴄLiên kết trong HTML – Thuộᴄ tính targetLiên kết trong HTML – Liên kết dùng hình ảnhVí dụ 7Cáᴄ liên kết trong HTMLLiên kết đượᴄ tìm thấу trong hầu hết ᴄáᴄ trang ᴡeb, Liên kết ᴄho phép người ѕử dụng kíᴄh ᴄhuột để di ᴄhuуển từ trang nàу đến trang kháᴄ

Liên Kết Trong HTML Dễ Hiểu

  • Tác giả: hocban.vn
  • Đánh giá: 4 ⭐ ( 1482 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này mình sẽ hướng dẫn bạn cách chèn link (liên kết) trong HTML. Ứng dụng nhiều để chèn chèn, tạo liên kết trong tổng thể website.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php