Chúng tôi có thể thêm các liên kết trang vào một trang web. Liên kết HTML là siêu liên kết. Thẻ xác định một siêu liên kết và được sử dụng để liên kết từ trang này sang trang khác. Thuộc tính href được sử dụng với thẻ, cho biết đích của liên kết
Để tạo liên kết trang trong trang HTML, chúng ta cần sử dụng thuộc tính href của thẻ và. Đảm bảo rằng thẻ được đặt trong thẻ …
Văn bản liên kết có thể nhìn thấy. Nhấp vào văn bản liên kết sẽ điều hướng đến địa chỉ URL được chỉ định. Theo mặc định, các liên kết sẽ xuất hiện như sau trên trang web của trình duyệt
Một liên kết chưa được truy cập được gạch chân và có màu xanh lam
Một liên kết đã truy cập được gạch chân và có màu tím
Một liên kết hoạt động được gạch dưới và màu đỏ
cú pháp
Sau đây là cú pháp tạo liên kết trang trên trang web
Sau đây là kết xuất cho hình ảnh dưới dạng liên kết, nhấp vào hình ảnh sẽ điều hướng chúng ta đến trang chủ google
Cách thêm điều hướng vào trang HTML đơn giảnTrong bài học này, chúng ta sẽ thêm điều hướng giữa hai trang web HTML đơn giản của mình. Nếu đến giờ bạn vẫn chưa theo các bài học thì nên bắt đầu lại từ đầu khóa học. Đối với bài học này, bạn sẽ muốn có “chỉ mục. html” mở trong cả Notepad và trình duyệt của bạn để chúng tôi có thể thay đổi nó và làm mới trình duyệt để xem chúng, như thường lệ. Liên kết của chúng tôi ở trên cùng có vẻ hơi lạc lõng và đơn độc. Hầu hết các trang web đều có nhiều trang, vì vậy, hãy thêm một yếu tố cho phép chúng tôi điều hướng giữa nhiều trang. Trong quá trình này, chúng tôi sẽ gặp thêm một số thẻ mới và thậm chí thêm kiểu CSS đầu tiên của chúng tôi.
Sử dụng các nút bên dưới để điều hướng qua bài học
Thực hiện các thay đổi sau đối với chỉ mục của bạn. html
Make the same changes to about.html – remove the old link, add the SAME
Bây giờ cả hai trang sẽ có một danh sách ở trên cùng giống như thế này
Hãy xem chi tiết những thay đổi này
The
The
Inside our element we’ve used another new tag, the
tag.
Thẻ này là viết tắt của danh sách không có thứ tự – nó được sử dụng bất cứ khi nào chúng tôi có DANH SÁCH các mục… chẳng hạn như danh sách các phần cho trang web của chúng tôi. Có nhiều loại thẻ danh sách khác, chẳng hạn như danh sách có thứ tự hoặc danh sách được đánh số, nhưng danh sách thích hợp nhất cho các liên kết điều hướng là danh sách không có thứ tự vì thứ tự các liên kết được viết không quan trọng.
Inside the unordered list we have two
tags. These stand for list items – a
must have one
for each item in the list. And each list item contains our links.
Giờ đây, bất cứ khi nào chúng tôi muốn thêm một trang mới vào trang web của mình, chúng tôi chỉ cần thêm một
Tôi chắc rằng bạn có thể nghĩ ra nhiều trang khác mà bạn có thể muốn thêm vào trang web của mình
Tạo kiểu cho danh sách điều hướng của chúng tôi
Chúng ta sẽ xem xét CSS chi tiết hơn sau. Bây giờ, hãy thêm một số thứ để làm cho điều hướng của chúng ta trông đẹp hơn một chút
Inside our
element on both pages, add the following HTML: FOTC First Website
html { . Arial; . 10px 30px; . 1. 8em; . 1. 2em; . màu đen; . 5px; . không ai; . nội tuyến; . 15px; . Dũng cảm; . trắng; . đã đến thăm { màu. trắng; . di chuột { màu. trái cam; . không ai; . màu xanh da trời; . đã đến thăm { màu. hoa mỹ; . di chuột { màu. trái cam; body { padding: 10px 30px; } h1 { font-size: 1.8em; } h2 { font-size: 1.2em; } nav { background: black; padding: 5px; } nav ul { list-style: none; } nav ul li { display: inline; margin-left: 15px; font-weight: bold; } nav ul li a { color: white; } nav ul li a:visited { color: white; } nav ul li a:hover { color: orange; } a { text-decoration: none; color: blue; } a:visited { color:purple; } a:hover { color: orange; }
Bây giờ, nếu bạn lưu và làm mới, bạn sẽ thấy chúng tôi có thanh điều hướng trên cả hai trang của mình và tất cả các trang trông đẹp hơn nhiều
Hiện tại, đừng lo lắng về việc hiểu mã chúng tôi vừa thêm. Tất cả các văn bản trông không quen thuộc là CSS, mà chúng tôi sẽ đề cập đến trong một bài học trong tương lai. Bạn có thể nhận thấy tên của các màu chúng tôi đã thêm – bạn có thể thay đổi các màu đó, lưu và làm mới và xem điều gì sẽ xảy ra
Thử nghiệm bằng cách đặt tên màu thành các màu khác nhau và xem nó ảnh hưởng đến trang web của bạn như thế nào. Xem những kết hợp bạn thích
Đợi đã, không phải bạn đã nói KHÔNG đưa kiểu dáng vào HTML của chúng tôi sao?
You’re right, I DID say not to do that. If you’ve experimented with changing the colours and swapping between the pages then maybe you’ll realise why! The