You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tuỳ chỉnh đường dẫn và cách mở cho một liên kết trong HTML

Tuỳ chỉnh đường dẫn và cách mở cho một liên kết trong HTML

Hôm nay chúng ta sẽ đến một phần hoàn toàn mới trong HTML. Bạn chắc chắn sẽ bị phấn khích khi học thuộc tính này.

Xem thêm bài viết

Chúng ta vừa trải qua hai bài học khá thú vị về thẻ A trong HTML. Chúng ta sẽ tiếp tục tìm hiểu những điều thú vị tiếp theo được ẩn chứa trong thẻ A. Thẻ A mang lại nhiều sự tiện lợi dành cho bạn. Bạn có thể liên kết nội cho trang web thông qua thẻ A. Bạn có thể thực hiện một liên kết hình ảnh dành cho những liên kết bạn cảm thấy cần có sự đặc biệt trong trang HTML. Thật sự thẻ A đã giúp cho bạn khai sinh những điều tuyệt vời dành cho trang web.

Mỗi khi bạn muốn đọc một tin tức  hấp dẫn. Bạn nhấn vào. Bài viết ban muốn đọc có thể hiển thị theo hai kiểu. Kiểu đầu tiên là bài viết sẽ hiển thị ngay trên tab hiện tại của bạn. Kiểu thứ hai là bài viết sẽ được hiển thị trong một tab mới. Một số trang web sẽ mở cửa sổ mới tại những mục cần mở cửa sổ mới để bạn không mất đi các  thông tin cũ. Theo đó có nhiều thông tin bạn cần giữ lại và cần mở tin tức mới trong một tab hoàn toàn riêng biệt. Hoặc đối với những thông tin không mấy quan trọng thì bài viết mới sẽ được chuyển đến ngay trên tab hiện tại. Bạn muốn điều khiển trang web của mình giống như thế. Dễ dàng thôi.

Thẻ A giúp được gì trong trường hợp này

Nếu bạn tìm đến thẻ A.Bạn có lời rồi. Trong thẻ A mặc dù không có thẻ để giúp bạn đạt được mục tiêu. Nhưng thẻ A có thuộc tính để làm được điều này. Đó là thuộc tính Target. Chúng ta không có thẻ Target trong HTML để làm việc này. Thay vào đó chúng ta có thuộc tính để thực hiện trơn tru mọi việc. Thuộc tính Target mang đến cho bạn khả năng tuỳ biến cho việc mở một liên kết trong trình duyệt. Bạn có thể mở ngay tại tab hiện tại, mở sang tab mới,…

Hiện nay chúng ta chỉ dùng hai giá trị trong thuộc tính Target. Những giá trị còn lại thường dùng cho Fame. Hiện nay fame đã thuộc hàng hiếm trong thiết kế trang web.

Cú pháp thuộc tính Target

<a href= “…” target= “_…”>Content</a>

Cú pháp thẻ A không gây khó khăn cho bạn vì đã khá quen thuộc với các bạn rồi. Bạn chỉ cần thêm thuộc tính Target vào thẻ mở A. Lưu ý cho bạn là trước giá trị trong thuộc tính Target chúng ta sẽ có một dấu _ .

Ví dụ

 

<!doctype html>
<html>

<head>
    <title>Trang web giới thiệu ẩm thực sáng tạo</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay" />
    <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#" class="main-top">Giới thiệu dự án</a> |
        <a href="#" class="main-top">Mục tiêu dự án</a> |
        <a href="#" class="main-top">Điểm nhấn dự án</a>
    </nav>
   
    
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <div>
        <h2>Giới thiệu dự án</h2>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <h2>Mục tiêu dự án</h2>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <h2>Điểm nhấn dự án</h2>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        </div>
        <a href="form.html" target="_blank"><button class="button2">THEO DÕI THÔNG TIN CỦA CHÚNG TÔI</button></a>
</body>

</html>

Kết quả ví dụ

Các giá trị của thuộc tính Target

Chúng ta sẽ có 5 giá trị cho thuộc tính. Chúng ta sẽ dùng phổ biến hai giá trị là blank và top. Ba giá trị còn lại thường được sử dụng cho Fame.

Các giá trị bao gồm:

  • _blank: mở trang web bằng tab mới.
  • _top: nội dung của trang web được nạp ngay trên tab hiện tại của bạn.
  • _self: nội dung sẽ được nạp ngay chính trên fame mà người dùng vừa click vào
  • _parent: nội dung sẽ được nạp ngay trên fame cha. Fame chứa Fame mà người dùng vừa click vào.
  • _famename: giá trị của thuộc tính name trong fame mà ta muốn nội dung trang sẽ được nạp vào fame đó.

Cách sử dụng thuộc tính Target khá đơn giản. Dễ dàng ứng dụng thuộc tính này trong nhiều trường hợp khác nhau. Bên cạnh đó bạn còn có thể sử dụng thẻ A một cách hợp lý hơn. Giữ lại những thông tin mà theo bạn là cần thiết hiển thị cho người dùng bằng giá trị blank. Những tin tức không cần ghi nhớ lâu dài bạn có thể sử dụng giá trị top.

Bài học của chúng ta đã xong. Bây giờ là đến giờ luyện tập của các bạn. Chúc các bạn học vui!

Bài tập

Hãy tạo ra một liên kết mà khi nhấn vào liên kết, liên kết sẽ dẫn bạn đến trang bạn cần bằng cách mở một tab mới trên trình duyệt.

 




Đặt câu hỏi cho bài viết này ?