Web front-end (12) - HTML - Liên kết trang web_3

Bài trước: Web front-end (11) - HTML - Liên kết trang web_2

-----

1.1.1       Liên kết trong một trang web

Liên kết trong một trang web thường được sử dụng trong trường hợp trang web có nội dung trải dài theo chiều dọc. Khi đó, người dùng sẽ cảm thấy tiện lợi hơn nếu họ có thể bấm vào các liên kết để tới thẳng phần nội dung cần xem, thay vì vừa phải kéo thanh cuộn, vừa phải xem đã tới phần nội dung quan tâm hay chưa. Hoặc, khi người dùng đọc tới phần cuối của một tài liệu dài, thay vì phải dùng thanh cuộn, thì họ có thế bấm vào liên kết để trở về đầu trang.

Để tạo liên kết trong một trang, cần thực hiện hai bước:

– Bước 1: tạo các điểm đích trên trang web

– Bước 2: tạo liên kết đến các điểm đích

Để dễ hiểu, phần này sẽ làm Danh mục các thuật ngữ. Trên đầu trang là một hàng chữ cái, sắp xếp theo thứ tự ABC, khi người dùng bấm vào chữ cái, sẽ hiển thị các thuật ngữ bắt đầu bằng chữ cái tương ứng. Ví dụ, khi người dùng bấm vào chữ H, thì sẽ hiển thị các thuật ngữ bắt đầu bằng chữ H.

Tạo các điểm đích trên trang web

Liên kết trong một trang web là liên kết tới các vị trí cụ thể trên trang. Các vị trí này được đánh dấu bằng thuộc tính id trong các phần tử HTML.

Việc đầu tiên là đặt các thuộc tính id ở các vị trí thích hợp, việc này còn được gọi là phân mảnh trang web (fragment) thành những phần nhỏ hơn và đặt cho mỗi phân mảnh một cái tên (giá trị của thuộc tính id), tên này phải là duy nhất trong phạm vi trang web.

Học tới đây, bạn đã có cơ hội thực hành với #fragment_id trong một URL.

scheme://domain:port/path?query_string#fragment_id

Ví dụ,

<h2 id="start-h">H</h2>

                        <dl>

                                    <dt>Harddisk</dt>

                                    <dd>Đĩa cứng</dd>

                                    <dt>Hardware</dt>

                                    <dd>Phần cứng</dd>

                        </dl>

Tạo liên kết đến điểm đích

Sau khi đã có các đích đến, giờ sẽ tạo các liên kết, để khi người dùng bấm vào, nội dung vùng đích sẽ hiển thị trên trình duyệt.

Sử dụng phần tử a để tạo liên kết, thuộc tính href sẽ trỏ tới đích đến, đó là giá trị của id với dấu # phía trước.

Ví dụ,

[HTML]

<p>... G | <a href="#start-h">H</a> | I | K | L | M | L | ...</p>

[Kết quả]

Khi người dùng bấm vào chữ H, trình duyệt sẽ hiển thị các thuật ngữ bắt đầu bằng chữ H.

Dưới đây là mã HTML hoàn chỉnh, gồm liên kết tới một số thuật ngữ và mục “Về đầu trang”.

[thuat-ngu.html]

<!DOCTYPE html>

<html>

            <head>

                        <title>Hoc lam web</title>

                        <meta charset="utf-8">

            </head>

            <body>

                        <p id="start-all">... E | <a href="#start-f">F</a> | <a href="#start-g">G</a> | <a href="#start-h">H</a> | I | K | L | M | L | ...</p>

                        <h2 id="start-f">F</h2>

                        <dl>

                                    <dt>File</dt>

                                    <dd>Tập tin</dd>

                                    <dt>False</dt>

                                    <dd>Sai</dd>

                                    <dt>Footer</dt>

                                    <dd>Phần chân trang</dd>

                                    <dt>Fetch</dt>

                                    <dd>Lấy lệnh</dd>

                        </dl>

                        <p><a href="#start-all">Về đầu trang</a></p>

                        <h2 id="start-g">G</h2>

                        <dl>

                                    <dt>GB</dt>

                                    <dd>Gigabyte</dd>

                                    <dt>GDP</dt>

                                    <dd>Gross domestic product</dd>

                                    <dt>GPO</dt>

                                    <dd>Group Policy Object</dd>

                                    <dt>GUI</dt>

                                    <dd>Graphic User Interface</dd>

                        </dl>

                        <p><a href="#start-all">Về đầu trang</a></p>   

                        <h2 id="start-h">H</h2>

                        <dl>

                                    <dt>Harddisk</dt>

                                    <dd>Đĩa cứng</dd>

                                    <dt>Hardware</dt>

                                    <dd>Phần cứng</dd>

                                    <dt>HTML</dt>

                                    <dd>HyperText Markup Language</dd>

                                    <dt>HTTP</dt>

                                    <dd>Hypertext Transfer Protocol</dd>

                                    <dt>Hyperlink</dt>

                                    <dd>Siêu liên kết hay đơn giản là liên kết (link) là một tham chiếu đến tài liệu, người dùng có thể bấm vào siêu liên kết để đến được phần nội dung tương ứng. Một siêu liên kết có thể trỏ đến tài liệu khác hoặc một phần cụ thể bên trong tài liệu hiện hành.</dd>

                                    <dt>Hypertext</dt>

                                    <dd>Siêu văn bản là một tài liệu có chứa siêu liên kết, do có chứa siêu liên kết nên nó cho phép truy tìm các nội dung không theo tuần tự. Người đọc có thể tự do duyệt theo các dấu vết liên quan qua suốt tài liệu đó, thậm chí qua cả tài liệu khác, bằng các mối liên kết xác định sẵn, do người sử dụng tự lập nên.</dd>     

                        </dl>

                        <p><a href="#start-all">Về đầu trang</a></p>

            </body>

</html>

1.1.2       Liên kết đến phân đoạn trong trang khác

Để liên kết đến một phân đoạn trong trang web khác, cùng website, chỉ cần thêm đường dẫn thư mục tương đối (relative path) của trang web đích vào thuộc tính href, cùng với dấu # và giá trị của id. Ví dụ, tại trang index.html, nếu muốn liên kết tới các thuật ngữ bắt đầu bằng chữ H của trang thuat-ngu.html thì thêm đoạn mã sau,

[index.html]

<a href="thuat-ngu.html#start-h">H</a>

Để liên kết đến phân đoạn trong một trang web thuộc website khác, chỉ cần thêm URL tuyệt đối của trang web đích vào thuộc tính href, cùng với dấu # và giá trị của id. Ví dụ, tại trang index.html, nếu muốn liên kết tới các thuật ngữ bắt đầu bằng chữ H của trang thuat-ngu.html thuộc website www.vidu.com thì thêm đoạn mã sau,

[index.html]

<a href="http://www.vidu.com/thuat-ngu.html#start-h">H</a>

Cần lưu ý là, chúng ta không thể thay đổi mã nguồn trang web của người khác, do vậy, chỉ có thể liên kết đến các phân đoạn có sẵn của trang web đích. Để xem các phân đoạn trên trang web đích, mở trang web và dùng chức năng “View page source” của trình duyệt để xem. Nếu mã nguồn của trang web đích có thay đổi, làm mất các id của phân đoạn, thì liên kết kiểu này sẽ trỏ về đầu trang đích thay vì trỏ tới một vị trí cụ thể trong trang đích.

1.1.3       Hiển thị trang đích

Khi người dùng bấm vào một liên kết, có năm cách khác nhau để hiển thị trang đích (trang được liên kết đến). Để lựa chọn cách hiển thị trang đích, sử dụng thuộc tính target của phần tử a. Sau đây là các giá trị của thuộc tính target:

_blank: mở trang đích ở tab/cửa sổ mới

_top: mở trang đích tại tab/cửa sổ hiện hành

_self: mở trang đích tại frame hiện hành (đây là chế độ mặc định), nếu trang web không chia frame thì _self_top là tương đương.

_parent: mở trang đích tại frame cha/chứa frame hiện hành

– _framename: mở trang đích tại frame có tên cụ thể (giá trị thuộc tính name của frame)

Ví dụ sau sẽ mở trang đích ở tab mới,

<a href="http://www.google.com" target="_blank">Trang Google</a>

Việc lựa chọn kiểu hiển thị trang đích cần được cân nhắc cẩn thận, vì nó ảnh hưởng nhiều đến tâm lý, và trải nghiệm của người dùng.

1.1.4       Gửi email, gọi điện thoại bằng liên kết

Gửi email bằng liên kết

Người duyệt web có thể gửi email tới một địa chỉ cụ thể bằng liên kết.

Để thực hiện việc này, thiết lập giá trị trong thuộc tính hrefmailto.

Ví dụ,

[HTML]

<a href="mailto:nguyenvanteo@gmail.com">Liên hệ với ông Tèo</a>

[Kết quả]

Trên giao diện web, khi người dùng bấm vào dòng chữ “Liên hệ với ông Tèo”, trình duyệt sẽ mở một chương trình soạn thảo email với địa chỉ người gửi và người nhận đã được điền sẵn. Nếu trình duyệt chưa có kết nối sẵn với một chương trình soạn thảo email, thì nó sẽ yêu cầu người dùng thực hiện một số thiết lập, trước khi có thể gửi email bằng cách này.

Lưu ý, việc gửi email bằng liên kết không được khuyến khích sử dụng, vì việc để một địa chỉ email trên trang web sẽ giúp cho các chương trình gửi thư rác (spam mail) có thể lấy được và thực hiện việc gửi thư rác. Nếu muốn lấy thông tin phản hồi từ người dùng thì nên sử dụng Form để thay thế.

Trong trường hợp phải để địa chỉ email ở trên trang web thì nên viết dưới dạng “con người có thể hiểu được, trong khi các chương trình quét địa chỉ email tự động sẽ không nhận ra”, ví dụ,

nguyenvanteo@gmail.com thì viết thành nguyenvanteo [-at-] gmail [dot] com.

Gọi điện thoại bằng liên kết

Vì có nhiều người đang sử dụng điện thoại thông minh để duyệt web, do vậy, có thể sử dụng liên kết để gọi tới một số điện thoại. Khi người dùng chạm vào liên kết, họ sẽ nhận được một thông báo yêu cầu xác minh việc gọi điện, nếu họ đồng ý, cuộc gọi sẽ được thực thi.

Để tạo liên kết có thể gọi điện, trong thuộc tính href thiết lập giá trị là “tel: số điện thoại đích”.

Ví dụ,

[HTML]

<a href="tel: +84988987654">Liên hệ với chúng tôi (+84) 988 987 654</a>

[Kết quả]

Nếu người dùng sử dụng điện thoại thông minh, khi chạm vào liên kết, sẽ có cuộc gọi tới số máy “+84988987654”, nếu người dùng sử dụng máy tính, thì trình duyệt sẽ không làm gì cả, hoặc cho phép người dùng mở một ứng dụng trên máy tính mà nó có thể thực hiện cuộc gọi (ví dụ Skype).

Một số lưu ý:

– Số điện thoại phải bao gồm cả dấu “+” và mã điện thoại quốc gia, ví dụ Việt nam là +84

– Liên kết cũng nên hiển thị luôn số điện thoại, để trong trường hợp chức năng gọi điện tự động không thực hiện được thì người dùng vẫn có thể nhập số điện thoại và tạo cuộc gọi bằng tay.

1.1.5       Tải tập tin bằng liên kết

Có thể sử dụng liên kết để cho phép người dùng tải một tập tin về máy, một số loại tập tin hay được tải là: .DOC, .PDF, .ZIP.

Để thực hiện, chỉ việc để đường dẫn của tập tin trong thuộc tính href của phần tử a.

Ví dụ,

[HTML]

<a href="TaiLieu.docx">Bấm vào đây để tải tài liệu</a>

HTML5 có thêm thuộc tính “download”, sử dụng thuộc tính này để đặt tên mới cho tập tin khi tải xuống máy người dùng.

Ví dụ sau sẽ đặt tên mới cho tập tin là DuLieu.docx sau khi người dùng tải về máy,

[HTML]

<a href="TaiLieu.docx" download="DuLieu.docx">Bấm vào đây để tải tài liệu</a>

1.1.6       Xem và đọc thêm

– Dùng các từ khóa sau tìm kiếm trên mạng để đọc thêm: trang web, trang web tĩnh, trang web động, web page, static web page, flat page, stationary page, dynamic web page, live web page, interactive web page, website.

– Website: https://en.wikipedia.org/wiki/Website

– Web application: https://en.wikipedia.org/wiki/Web_application

Jenifer Niederst Robbins, Learning Web Design, O’Reilly, 2018, trang 113 – 130.

Creating hyperlinks, Mozilla Developer Network (MDN)

– [view] Add links: https://www.youtube.com/watch?v=kUMe1FH4CHE&t=3595s

1.1.7       Bài tập và thực hành

Bài tập 1. Viết lại các đoạn mã trong phần lý thuyết.

Bài tập 2. Tạo phần đầu của CV như hình sau:


Lưu ý: phần này giúp bạn làm quen với CV, và để thực hành HTML, nên hơi phức tạp, thực tế khi viết CV không cần làm như vậy, mà chỉ quan tâm tới nội dung. bố cục các thông tin.

Yêu cầu:

– Chỉ dùng HTML để tạo nội dung, chưa cần định dạng bằng CSS

– Khi mở trang web, icon trên tab trình duyệt (favicon, biểu tượng của website) là hình của bạn

– Bấm vào nút Download CV, sẽ tải CV của bạn ở dạng tập tin .pdf

– Bấm vào nút Hire Me, trên giao diện trình duyệt sẽ hiển thị vùng Contact của CV

– Bấm vào địa chỉ email sẽ hiển thị ứng dụng soạn email

– Bấm vào số điện thoại sẽ gọi điện bằng điện thoại (nếu duyệt web bằng điện thoại), hoặc bằng skype (nếu duyệt web bằng máy tính)

Bài tập 3. [Ngoài chuyên môn, bài tập còn giúp bạn rèn khả năng đọc hiểu tiếng Anh, vì vậy bạn không nên dùng công cụ để dịch tự động.]

The most important lesson in this part is how to write URLs for links and images. Here’s another chance to brush up on your pathname skills.

Using the directory hierarchy shown in following figure, write out the markup for the following links and graphics.

This figure should provide you with enough information to answer the questions.


1. In index.html (the site’s home page), write the markup for a link to the tutorial.html page.

<a href="tutorial.html">Tutorial</a>

2. In index.html, write the anchor element for a link to instructions.html.

3. Create a link to family.html from the page tutorial.html.

4. Create a link to boot.html from the family.html page, but this time, start with the root directory.

5. Create a link back to the home page (index.html) from instructions.html.

6. Create a link to the website for this book (learningwebdesign.com) in the file intro.html.

7. Create a link to instructions.html from the page usa.html.

8. Create a link back to the home page (index.html) from acorn.html.

We haven’t covered the image (img) element in detail yet, but you should be able to fill in the relative URLs after the src attribute to specify the location of the image files for these examples.

9. To place the graphic arrow.gif on the page index.html, use this URL:

<img src=" " alt="">

10. To place the graphic arrow.gif on the page intro.html, use this URL:

<img src=" " alt="">

11. To place the graphic bullet.gif on the friends.html page, use this URL:

<img src=" " alt="">

[Gợi ý làm bài tập]

Bài tập 2.

– Tổ chức thư mục dự án như sau

\teocv

  -index.html

  -teocv.pdf

  -images

    --favicon.ico

    --avatar.jpg

– Trang web để tạo favicon từ một ảnh thông thường : https://favicon.io/

– Đoạn mã tạo favicon:

<link rel="icon" href="images/favicon.ico" type="image/x-icon">

Mã nguồn tham khảo

[index.html]

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Teo's CV</title>

    <link rel="icon" href="images/favicon.ico" type="image/x-icon">

</head>

<body>

    <main>

        <img src="images/avatar.jpg" width="200" height="200">

        <h2>Nguyen Van Teo</h2>

        <p>Graphic Designer & Web Developer</p>

        <a href="teocv.pdf" target="_blank">Download CV</a>

        <a href="#contact">Hire Me</a>

        <section id="about">

            <h2>About Me</h2>

            <p>Hello, I'm Nguyen Van Teo. I am passionate about UI/UX design and Web Design. I am a skilled Front-end Developer and master of Graphic Design tools such as Photoshop, Sketch and Figma</p>

            <p>Age: 22</p>

            <p>Email: <a href="mailto:nguyenvanteo@gmail.com">nguyenvanteo[-at-]gmail[dot]com</a></p>

            <p>Phone: <a href="tel: +84988987654">(+84) 988 987 654</a></p>

            <p>Address: 140, Phu Dong Thien Vuong, Dalat, Vietnam</p>

        </section>

        <section id="contact">

            <h3>Contact</h3>

            <form action="mailto:nguyenvanteo@gmail.com" method="post" enctype="text/plain">

                <input type="text" placeholder="Your Name"> <br>

                <input type="text" placeholder="Your E-mail"> <br>

                <textarea name="" id="" cols="30" rows="4" placeholder="Your message"></textarea><br>

                <button>Send</button><br>

            </form>

            <p>Age: 22</p>

            <p>Email: <a href="mailto:nguyenvanteo@gmail.com">nguyenvanteo[-at-]gmail[dot]com</a></p>

            <p>Phone: <a href="tel: +84988987654">(+84) 988 987 654</a></p>

            <p>Address: 140, Phu Dong Thien Vuong, Dalat, Vietnam</p>

        </section>

    </main>

</body>

</html>

[giao diện]


Bài tập 3.

1. In index.html (the site’s home page), write the markup for a link to the tutorial.html page.

<a href="tutorial.html">Tutorial page</a>

2. In index.html, write the anchor element for a link to instructions.html.

<a href="examples/instructions.html">Instructions page</a>

3. Create a link to family.html from the page tutorial.html.

[tutorial.html]

<a href="examples/people/family.html">Family page</a>

4. Create a link to boot.html from the family.html page, but this time, start with the root directory.

[family.html]

<a href="/examples/things/boot.html">Boot page</a>

5. Create a link back to the home page (index.html) from instructions.html.

[instructions.html]

<a href="/index.html">Home page</a>

Hoặc

<a href="../index.html">Home page</a>

6. Create a link to the website for this book (learningwebdesign.com) in the file intro.html.

[intro.html]

<a href="https://learningwebdesign.com/">Learning web design website</a>

7. Create a link to instructions.html from the page usa.html.

[usa.html]

<a href="../instructions.html">Instructions page</a>

8. Create a link back to the home page (index.html) from acorn.html.

[acorn.html]

<a href="/index.html">Home page</a>

9. To place the graphic arrow.gif on the page index.html, use this URL:

[index.html]

<img src="images/arrow.gif" alt="">

10. To place the graphic arrow.gif on the page intro.html, use this URL:

[intro.html]

<img src="/images/arrow.gif" alt="">

11. To place the graphic bullet.gif on the friends.html page, use this URL:

[friends.html]

<img src="/images/bullet.gif" alt="">

1.1.8       Câu hỏi ôn tập

Câu hỏi 1. Phát biểu nào sau đây không đúng?

A. Trang web là thành phần để tạo ra website, ứng dụng web

B. Với người dùng, rất khó để phân biệt giữa website và ứng dụng web

C. Mã nguồn của một trang web, luôn có phần mở rộng là .html

D. Để tạo ra một ứng dụng web, bạn luôn phải sử dụng nhiều ngôn ngữ khác nhau (ví dụ HTML, CSS, JavaScript, SQL, PHP)

Câu hỏi 2. Ý nghĩa của 2 dấu chấm (..), trong lệnh <a href="../index.html">Quay về trang chủ</a> là gì?

A. Trở về thư mục gốc

B. Trở về thư mục cha

C. Quay về trang chủ

D. Đi xuống thư mục con

Câu hỏi 3. Dấu thăng (#) trong lệnh <a href="thuat-ngu.html#start-h">H</a> mang ý nghĩa gì?

A. Liên kết tới vị trí có class="start-h" trong mã nguồn

B. Trở về đầu trang web

C. Đi tới cuối trang web

D. Liên kết tới vị trí có id="start-h" trong mã nguồn

Câu hỏi 4. Hyperlinks allow us to link ______ to other ______ or resources, link to specific parts of _______, or make apps available at a web address.

A. documents

B. web

C. languages

D. tags

Đáp án: 1 (C), 2 (B), 3 (D), 4 (A)

-----

Cập nhật: 11/5/2024
-----

Tải tài liệu đầy đủ: Tự học HTML căn bản