You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Thuộc tính ID giúp bạn thực hiện điều chỉnh phần văn bản bạn muốn

Thuộc tính ID giúp bạn thực hiện điều chỉnh phần văn bản bạn muốn

Hôm nay chúng ta sẽ cùng tìm hiểu một thuộc tính khác trong thẻ A mà bạn rất thường xuyên sử dụng.

Xem thêm bài viết

Ở bài học trước chúng ta đã được học về cách sử dụng thuộc tính Target của thẻ A. Hôm nay chúng ta sẽ tiếp tục một thuộc tính rất hữu ích dành cho bạn trong bài học về các liên kết. Các liên kết của bạn không chỉ giúp cho bạn chuyển trang web hiện tại sang những trang web mới. Mà bạn còn có những liên kết rất cần thiết ngay trong chính trang web mà người dùng đang mở. Không phải lúc nào chúng ta cũng sử dụng thẻ liên kết để thực hiện việc chuyển người dùng sang trang mới.

Thẻ liên kết có thể làm được những gì ngoài liên kết các trang

Bạn có để ý khi bạn đọc hết một tin tức nào đó cũng là lúc mà thanh cuộn dọc của bạn cũng đã nằm ở phía dưới. Thanh cuộn không còn cuộn được nữa. Với những bài viết ngắn thì không sao. Nhưng nếu đó là một bài viết dài thì bạn sẽ càm thấy vô cùng mỏi tay khi phải thực hiện kéo lên kéo xuống trong trang. Các nhà phát triển web muốn cho người dùng một cách nhanh hơn để thực hiện điều này. Vì thế nên họ mới nghĩ về một loại thẻ có khả năng làm được những việc như thế. Thẻ ID trong HTML xem chừng khá lý tưởng cho việc này. Nhưng thẻ thì không biết phải áp dụng như thế nào. Cũng vì như vậy nên họ đã chuyển từ việc tạo thẻ sang một thuộc tính ID có chức năng tương tự.

Thuộc tính ID ra đời rất đúng lúc

Phải nói là đúng lúc thật. Vì sau khi thuộc tính này ra đời thì chúng ta đã có sự xuất hiện của biểu tượng mũi tên hướng lên. Khi bạn trỏ chuột vào hình ảnh mũi tên bên góc phải thì mũi tên sẽ giúp bạn trở về đầu trang. Thuộc tính ID ra đời rất đúng lúc.

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

<a href= “…” id= “Tên thẻ”>Content</a>

Lưu ý là bạn chỉ có thể tạo ra một cái tên duy nhất cho mỗi một thẻ mà bạn nhập trong trang HTML. Nếu bạn có 1 thẻ P được đánh số từ 1 đến 10 thì bạn không thể nào đặt tên cho 10 thẻ P đó là myContent được. Bởi ID sẽ không hoạt động. ID chỉ tạo ra một cái tên duy nhất dành cho mỗi thẻ. Thế nên nếu thẻ P thứ nhất tên myContent thì thẻ P thứ 2 bạn phải đặt tên là myText hoặc một tên nào đó mà bạn dễ nhớ nhất.

Ngoài việc giúp bạn tạo ra những nút về đầu trang thì thuộc tính ID còn giúp bạn tạo ra những link của một bài viết có nhiều chương. Giúp bạn truy cập từng chương vô cùng đơn giản.

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="#gthieu" class="main-top">Giới thiệu dự án</a> |
        <a href="#muc-tieu" class="main-top">Mục tiêu dự án</a> |
        <a href="#diem-nhan" 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>
        <a><h2 id="gthieu">Giới thiệu dự án</h2></a>
        <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>
        <p>Nếu như bạn biết được một ngày nào đó chính bạn cũng sẽ có cảm giác ấn tượng đến khó phai với bất cứ thứ gì mà bạn đãn từng sinh ra tại đây</p>
        <a id="muc-tieu"><h2>Mục tiêu dự án</h2></a>
        <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>
        <a id="diem-nhan"><h2>Điểm nhấn dự án</h2></a>
        <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>

Ví dụ trên cho bạn thấy được khả năng đi đến liên kết dựa vào thẻ ID. Bạn sẽ được hình dung rõ ràng hơn khi chúng ta cùng xem video để bạn có thể hiểu rõ hơn quá trình thao tác cho bài học này.

Thuộc tính ID quá hay luôn. Bạn có thể nhờ đó mà tạo ra những thứ thú cị cho trang web của bạn. Hôm nay chúng ta đã học rất nhiều rồi. Vì thế mà bạn có thể cần phải luyện tập đôi chút đó. Chúc bạn học vui!




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