Redirect [chuyển hướng] là việc khi người dùng xem một trang web thì được chuyển sang một trang web với tên miền khác. Ví dụ, khi truy cập www.trang-web-cũ.com thì người dùng được chuyển hướng tới www.trang-web-mới.com. Trường hợp này người dùng gõ vào thanh địa chỉ là www.trang-web-cũ.com nhưng sau khi được redirect [chuyển hướng] thì địa chỉ trên thanh địa chỉ sẽ nhảy sang www.trang-web-mới.com.
Các lý do chuyển hướng trang web
Lý do 1: Bạn dùng trang web mới với tên miền [domain] mới và không sử dụng trang web cũ nữa nhưng muốn người dùng truy cập trang web cũ sẽ vào trang web mới
Đây là trường hợp bạn thay đổi sang trang web mới và muốn người dùng tiếp tục sử dụng dịch vụ mới của bạn nhưng chưa cần nhớ tên miền của trang mới.
Lý do 2: Bạn muốn trang nào đó được redirect sang trang bạn muốn
Ví dụ, bạn muốn //trang-của-bạn.com tự chuyển hướng sang //www.trang-của-bạn.com. Tức là tên miền trần [naked, tức không có gì trước tên miền chính của bạn] chuyển sang www. Tôi gặp trường hợp này khi dùng tên miền trần để trỏ tới web hosting để sử dụng email, nhưng www lại dùng dịch vụ web của Google Sites chẳng hạn.
Hay ví dụ như khi bạn bán sản phẩm A và sản phẩm này đã hết bán, do đó khi người dùng vào trang sản phẩm thì được chuyển hướng tới trang đầu [top page].
Lý do 3: Chuyển hướng index.html sang index.php
Ví dụ trang cũ của bạn là trang tĩnh và index.html tự động hiển thị khi truy cập, nhưng bạn đã làm trang mới với nhiều tính năng bằng PHP. Do thiết lập máy chủ mà index.html được hiển thị trước index.php. Người dùng đã quen index.html sẽ tiếp tục truy cập trang này, do đó tốt nhất là dùng HTML để tự động chuyển hướng sang index.php.
Các cách chuyển hướng
Cách 1: Chuyển hướng bằng bản gi tên miền
Bạn đặt bản ghi chuyển hướng [redirect record] trong màn hình quản lý tên miền của bạn từ tên miền cũ sang tên miền mới. Việc này đòi hỏi cần chút kiến thức về tên miền.
Cách 2: Chuyển hướng bằng HTML
Tôi hướng dẫn cách chuyển hướng một trang index.htm sang một trang mới. Nội dung trang index.html như sau:
window.location.href = "
//www.trang-mới.com
"
Page Redirection
If you are not redirected automatically, follow the Lập trình và thiết kế Web
Thuộc tính href mô tả địa chỉ đích đến của liên kết, như trong ví dụ trên là //www.dammio.com. Văn bản liên kết là phần hiển thị trên giao diện [“Lập trình và thiết kế Web”]. Nếu bạn nhấp chuột lên văn bản này, bạn sẽ đi đến website dammio.com.
Liên kết nội bộ
Trong ví dụ trên, //www.dammio.com là địa chỉ URL đầy đủ của 1 trang web. Nếu bạn muốn liên kết nội bộ đến 1 trang web cùng server, chẳng hạn, chúng ta có trang web index.html và about.html cùng 1 server là //www.dammio.com. Trong nội dung trang index.html, bạn muốn liên kết đến trang about.html, bạn chỉ cần làm như ví dụ sau.About Dammio.comKhi nhấp chuột vào liên kết trong ví dụ, trình duyệt sẽ tự động chuyển đến trang about.html ở website dammio.com có địa chỉ //www.dammio.com/about.html.
Màu liên kết
Mặc định, một liên kết sẽ xuất hiện như sau trên tất cả trình duyệt.
- Một liên kết chưa được nhấp chuột có gạch chân là màu xanh
- Một liên kết đã được nhấp chuột có gạch chân và màu tím đậm [purple].
- Một liên kết đang được kích hoạt có gạch chân và màu đỏ.
Bạn có thể thay các màu mặc định bằng cách sử dụng phong cách. Trong ví dụ sau, liên kết có màu xanh dương [color:green] và không có gạch chân [text-decoration: none], khi liên kết đã được viếng thăng thì có màu hồng [color: pink], khi rê chuột lên [hover] liên kết có màu đỏ [color: red], và khi liên kết đang được kích hoạt [active] thì có màu vàng [color: yellow].
Trang giới thiệu.Thuộc tính target
Thuộc tính target dùng để mô tả nơi cần mở ra liên kết. Thuộc tính này có các giá trị sau.
- _blank: mở liên kết ở cửa sổ hay tab mới trên trình duyệt.
- _self : mở liên kết trên cùng 1 cửa sổ/tab, đây là tham số mặc định, tức là nếu bạn không khai báo giá trị nào cho thuộc tính target thì chính là _self.
- _parent: mở liên kết ở frame cha.
- _top: mở liên kết ở cửa sổ đầy đủ [maximize]
- framename: mở liên kết trong frame theo tên.
Ví dụ sau sẽ mở liên kết trong 1 cửa sổ/tab mới thông qua giá trị _blank.
Visit Dammio!Ví dụ sau thì liên kết sẽ được mở ở cửa sổ màn hình phóng cực đại [maximize].
Visit Dammio!Liên kết hình ảnh
Ngoài việc sử dụng liên kết văn bản, chúng ta còn có thể dùng liên kết hình ảnh.Thuộc tính border:0 để bỏ viền đen mặc định khi hiển thị hình ảnh.
Tạo liên kết bookmark
Các liên kết bookmark được tạo ra cho phép người dùng đi đến các phần khác nhau trên cùng 1 trang web nhanh hơn. Bookmark rất hữu ích nếu nội dung trang web nhiều và dài. Để tạo bookmark, đầu tiên bạn tạo 1 bookmark sau đó, thêm liên kết đến nó. Khi liên kết này được nhất, trang web sẽ cuộn đến vị trí bookmark.Đầu tiên, tạo bookmark với id=”gt” như sau.
Giới thiệu
Sau đó, thêm liên kết để đi đến phần giới thiệu trong cùng 1 trang web
Đi đến phần Giới thiệuĐoạn mã đầy đủ như sau.
Đi đến phần Giới thiệu
Phần 1
Phần 1
Phần 2
Phần 2
Phần 3
Phần 3
Phần 4
Phần 4
Giới thiệu
Phần giới thiệu trang web dammio.com.
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Phần tiếp theo
Hoặc bạn có thể thêm liên kết đi đến phần giới thiệu ở 1 trang web khác như sau.
Giới thiệuĐường dẫn bên ngoài
Các trang bên ngoài có thể được tham chiếu với đường URL đầy đủ hoặc 1 phần đường dẫn quan hệ với trang hiện tại.Ví dụ liên kết đến trang index.html nằm trong thư mục html ở website dammio.com.
HTML cơ bảnVí dụ liên kết đến thư mục html nằm trên cùng 1 website.
HTML cơ bảnVí dụ liên kết đến trang intro.html nằm trên cùng 1 thư mục của trang hiện tại ở cùng 1 website.
HTML cơ bảnKết luận: Bài viết đã cung cấp cho các bạn kiến thức về liên kết trong HTML. Các liên kết đóng vai trò rất quan trọng trong việc liên kết, điều hướng nội dung trên 1 website cũng như các website khác. Vì vậy, bạn bắt buộc phải học và nắm vững cách áp dụng liên kết để phát triển và thiết kế website.