Hướng dẫn chuyển trang trong html
|
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 webLý 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ốnVí dụ, bạn muốn http://trang-của-bạn.com tự chuyển hướng sang http://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.phpVí 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ướngCách 1: Chuyển hướng bằng bản gi tên miềnBạ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 HTMLTô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: Ví dụ liên kết trang http://www.dammio.com với văn bản hiển thị là “Lập trình và thiết kế Web“. 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à http://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ộ About Dammio.com Khi 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ỉ http://www.dammio.com/about.html. Màu liên kết
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). 
Thuộc tính target
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
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 Đầu tiên, tạo bookmark với id=”gt” như sau.
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.
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 Ví dụ liên kết đến trang index.html nằm trong thư mục html ở website dammio.com. HTML cơ bản Ví dụ liên kết đến thư mục html nằm trên cùng 1 website. HTML cơ bản Ví 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ản Kế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. |
