You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Thẻ Link sẽ giúp bạn nhúng các kiểu dữ liệu khác nhau vào HTML

Thẻ Link sẽ giúp bạn nhúng các kiểu dữ liệu khác nhau vào HTML

Hôm nay chúng ta sẽ học một thẻ có khả năng liên kết đến nhiều ngôn ngữ khác trong HTML.

Xem thêm bài viết

Chúng ta đã học được cũng kha khá các thẻ trong HTML rồi. Có những thẻ nằm ở phần Head. Có thẻ nằm ở phần Body. Công dụng của mỗi thẻ lại khác nhau. Vì thế mà bạn học bao nhiêu thẻ cũng không cảm thấy phí phạm thời gian. Hôm nay chúng ta sẽ học một thẻ khác. Thẻ này cú pháp thì đơn giản nhưng chúng chẳng hề đơn giản chút nào. Công dụng của chúng có một chút liên quan đến CSS. Không chỉ là liên quan đến CSS mà đôi khi còn liên quan rất nhiều đến các trang HTML khác. Đây là một thẻ khó. Một phần là do chúng là một thẻ được dùng trong HTML có tác dụng đối với CSS là chủ yếu. Chắc chắn các bạn sẽ cảm thấy có chút khó khăn. Nhưng sau đó bạn sẽ quen dần.

Thẻ nào giúp bạn nhúng một trang CSS vào HTML?

Mình đang nói đến thẻ Link trong HTML. Chức năng của thẻ này khá đơn giản. Mục đích của chúng là xác định mối quan hệ giữa tài liệu và những nguồn ngoài tài liệu của bạn. Nghe qua thấy mệt rồi đúng không? Bạn chì cần hiểu đơn giản là khi bạn trang trí bằng kỹ thuật CSS. Bây giờ bạn muốn đưa CSS vào trang HTML thì bạn phải sử dụng thẻ này. Nếu không thì công sức bạn ngồi viết CSS sẽ trở thành công cốc.

Cú pháp thẻ Link

Cú pháp:

<link href= “…” rel= “…” type= “…”>

hoặc  

<link href= “…” rel= “…” type= “…”/>

 

Giá trị của thuộc tính Href vô cùng giản đơn. Trong khi đó giá trị của thuộc tính Rel có khá nhiều và Rel dùng để xác định mối liên hệ giữa tài liệu hiện tại của bạn với tài liệu liên kết. Thẻ này bắt buộc phải có. Thêm một thuộc tính mà bạn bắt buộc phải có chính là thuộc tính Type. Thuộc tính này cần phải có để giúp cho trình duyệt phân biệt được nhiều trang HTML mà bạn đang dẫn link sang trang HTML hiện tại thuộc dạng gì.

Đây là một cách để bạn có thể liên kết giữa trang HTML với trang CSS hoặc trang khác. Type là một loại được qui định sẵn. Nếu bạn đang liên kết trang CSS vào trang HTML thì đồng nghĩa là khi bạn chọn tô màu đỏ trong CSS thì trang HTML cũng sẽ hiển thị màu sắc bạn đã quy định trong CSS.

Ví dụ

Trang HTML bạn muốn nhúng file vào. Ở đây chúng ta sẽ dùng trang HTML có tên là try.html.

<!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" />
    

</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>
        <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>
        
</body>

</html>

Trang CSS bạn chuẩn bị nhúng vào file HTML. File CSS này có tên là style.css. Chúng ta sẽ sử dụng tạm thời các cú pháp của CSS để thực hiện ví dụ này. 

.button1{
    color: white;
    background-color: firebrick;
    border: none;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    
}
h1 {
    color: darkblue;
    text-align: center;
    font-size: 50px;
    
}
h2 {
    color:darkred;
    text-align: center;
    font-size: 40px;
    
}
nav{
    text-align: center;
    font-size: 25px;
    text-decoration: none;
    
}
a {
    text-decoration: none;

    
}

Cú pháp của chúng ta sẽ sử dụng thẻ Link để chèn vào trang HTML như sau.

<!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>
        <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>
        
</body>

</html>

Kết quả ví dụ

Lúc chưa thêm file style.css

Khi đã nhúng file style.css

Thẻ này là loại thẻ khó. Trong ví dụ mình đã cung cấp khá nhiều các Type thông dụng và bạn thường xuyên sử dụng trong HTML. Vì đây là bài rất khó. Nên bài tập sẽ là gấp đôi nhé! Chúc các bạn luyện lập chăm chỉ, vui vẻ bên những dòng code!

 




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