Web front-end (10) - HTML - Liên kết trang web_1

Bài trước: Web front-end (9) - HTML - Một số phần tử HTML khác

-----

1.1       Liên kết trang web

Sau các bài học trước, bạn đã có thể sử dụng các thẻ HTML để tạo ra một trang web, với nội dung dạng văn bản. Trang web này được xem như một tài nguyên web, được định vị bằng một địa chỉ duy nhất (URL), được sử dụng để làm nguyên liệu, nhằm tạo thành các nút, là một điểm đến trong không gian thông tin toàn cầu (web).

Phần này, bạn sẽ tìm hiểu, để liên kết giữa các phần trong một trang web, giữa các trang web trong cùng một website, giữa các trang ở khác website. Đây chính là một trong những công việc để tạo ra mạng lưới liên kết (links), nhờ đó, người dùng có thể lang thang từ nơi này tới nơi khác trong hệ thống web.

1.1.1       Trang web, website, ứng dụng web

Trước khi tìm hiểu về cách hoạt động của liên kết, bạn sẽ tìm hiểu một số khái niệm như trang web, trang web tĩnh, trang web động, website và ứng dụng web.

Trang web

Khi làm trang web tĩnh ở các bài học trước, là bạn đã phần nào trải nghiệm với khái niệm trang web.

Trang web (webpage, web page) là một tài liệu, được sử dụng trong hệ thống web, hoặc trong trình duyệt. Tài liệu chính là một vật mang tin, “vật” ở đây chính là một tập tin, “tin” ở đây là siêu văn bản. Bạn mở trình duyệt, nhập vào một địa chỉ web, ví dụ “https://www.w3.org”, gõ phím Enter, khi đó, mọi thông tin xuất hiện trên màn hình chính là trang web ở dạng “thành phẩm”.

Với người dùng, trang web là một trang thông tin, được thể hiện trên trình duyệt. Với hệ thống máy tính, trang web là một tập tin; tùy thuộc vào ngôn ngữ tạo ra trang web, nó sẽ có phần mở rộng khác nhau, ví dụ: .html, .php, .aspx, .jsp.

Tuy nhiên, dù sử dụng ngôn ngữ gì để tạo ra trang web, thì cuối cùng, trang web cũng phải được chuyển về dạng tài liệu HTML, trước khi trình duyệt có thể hiển thị nó. Trình duyệt sẽ dich và thực thi mã HTML, mã CSS, mã JavaScript, kết hợp với hình ảnh, âm thanh, video, để hiển thị nội dung ra màn hình.

Khi ở dạng mã nguồn, trang web chỉ là văn bản thô (plain text), nghĩa là chỉ gồm các kí tự ở dạng tự nhiên nhất, dạng mã ASCII, không được định dạng, không có hình ảnh, âm thanh, video.

Ví dụ, để xem trang web ở dạng mã HTML, tại trình duyệt, bấm chuột phải vào một trang web bất kỳ, chọn “View page source”, một cửa sổ mới hiện ra, đó chính là nội dung của trang web ở dạng mã HTML.

Trang web là các trang đơn vị để cấu thành website, mỗi trang có một mục đích cụ thể, một website có thể được cấu thành từ một hoặc nhiều trang, ví dụ trang chủ, trang tin, trang quản trị, trang đăng nhập.

Trang web được chia thành hai loại: trang web tĩnh và trang web động. Bạn có thể đọc lại khái niệm trang web tĩnh ở bài học trước, trong phần “Tạo một trang web đơn giản”.

Trang web động

Trang web động (dynamic web page, live web page, hoặc interactive web page) là trang web mà nội dung của nó có thể thay đổi tùy thuộc vào ngữ cảnh và điều kiện khác nhau. Việc thay đổi có thể được thực hiện tại phía server (server-side), bằng các ngôn ngữ lập trình phía server, như C#, PHP, Java, Python, Ruby, JavaScript; hoặc tại phía client (client-side) bằng ngôn ngữ lập trình phía client, như JavaScript, hoặc kết hợp cả phía client và phía server bằng kĩ thuật Ajax.

Website

Vì chưa biết từ tiếng Việt tương đương, nên dùng luôn tiếng Anh cho khái niệm website.

Website là một tập hợp nhiều trang web có liên quan đến nhau. Thông thường, website có một cái tên duy nhất, gọi là tên miền (domain name), ví dụ: www.w3.org. Website được đặt trên máy chủ web (web server). Người dùng có thể truy cập tới website bằng mạng công cộng (Internet) hoặc mạng nội bộ (LAN) thông qua địa chỉ của nó (URL).

Người ta sử dụng website cho nhiều mục đích khác nhau, ví dụ: giải trí, mạng xã hội, tin tức, giáo dục. Website có thể thuộc về cá nhân, công ty, chính phủ hoặc các tổ chức xã hội.

Có thể xuất bản các website ra công chúng để mọi người truy cập và hình thành không gian thông tin toàn cầu (WWW - World Wide Web). Hoặc không xuất bản ra công chúng, mà chỉ cho phép một số ít người truy cập, ví dụ website nội bộ của một công ty, chỉ cho phép các nhân viên của công ty truy cập, lúc này website trở thành một phần của mạng Intranet.

Người dùng có thể truy cập website bằng máy tính để bàn (desktop), máy tính xách tay (laptop), máy tính bảng (tablet), điện thoại thông minh (smartphone) và ti vi thông minh (smart TV).

Website được chia thành hai loại là website tĩnh (static website) và website động (dynamic website).

Website tĩnh là website chỉ chứa các trang web tĩnh.

Website động là website có chứa các trang web động.

Ứng dụng web

Ứng dụng web (web application hoặc web app) là một chương trình máy tính hoạt động dựa trên mô hình client-server. Trong đó, chương trình được lưu trên server, giao diện người dùng được chạy trên một trình duyệt web. Tạm hiểu là, chương trình để ở một nơi (server), người dùng thì lại ở một nơi khác (client), hay chương trình để ở máy tính này, nhưng khi sử dụng thì lại dùng ở một máy tính khác. Nó khác so với ứng dụng trên máy tính đơn.

Ứng dụng web hoạt động dựa trên nền tảng web. Người dùng có thể chạy ứng dụng thông qua Internet, Intranet. Để tạo ra ứng dụng web, người ta thường sử dụng các ngôn ngữ lập trình kết hợp với các framework chuyên dụng.

Chưa có sự phân biệt rõ ràng giữa trang web động và ứng dụng web, nói chung cứ website nào có chức năng tương tự như một ứng dụng máy tính hoặc ứng dụng di động thì được xem như một ứng dụng web.

Một số ví dụ về các ứng dụng web: thư điện tử, bán hàng trực tuyến, diễn đàn, nhật kí mạng, bản đồ, quản lý nhân lực, quản lý y tế và chăm sóc sức khỏe.

So sánh sự khác nhau giữa website động và ứng dụng web:

Website động

Ứng dụng web

– Cho phép người dùng tương tác và thêm nội dung, tuy nhiên phần lớn nội dung vẫn là do nhà phát triển tạo ra.

– Ít phức tạp và dễ phát triển hơn so với ứng dụng web.

– Hoạt động dựa trên sự tương tác từ người dùng, hầu hết nội dung và dữ liệu là do người dùng đóng góp

– Giống như một ứng dụng máy tính

– Phức tạp và cần nhiều kĩ năng hơn để phát triển so với website động

1.1.2       Tạo liên kết

Trong HTML, sử dụng phần tử a để tạo các liên kết, a viết tắt của anchor (cái mỏ neo).

Muốn tạo liên kết cho một đoạn văn bản, chỉ việc bao đoạn văn bản đó bằng phần tử a, đi kèm là thuộc tính href cho biết nơi được liên kết đến, href là viết tắt của hypertext reference – tham chiếu tới siêu văn bản. Ví dụ,

[HTML]

<a href="http://www.google.com">Trang web của Google</a>

[Kết quả]

Đoạn mã HTML trên sẽ tạo ra liên kết cho chuỗi “Trang web của Google”, khi người dùng bấm vào chuỗi này, trình duyệt sẽ mở trang web có địa chỉ là “http://www.google.com”.

Để tạo liên kết cho hình ảnh, chỉ việc bao hình ảnh đó bằng phần tử a, đi kèm là thuộc tính href cho biết nơi được liên kết đến. Mà hình ảnh được tạo ra bằng phần tử img, do vậy thực tế là đặt phần tử img vào trong phần tử a. Ví dụ,

[HTML]

<a href="http://www.google.com"><img src="logo.gif" alt="logo cong ty"></a>

[Kết quả]

Khi người dùng bấm vào hỉnh ảnh trên giao diện trang web, trình duyệt sẽ mở trang web có địa chỉ là “http://www.google.com”.

Mặc định, hầu hết các trình duyệt sẽ định dạng phần văn bản có gắn liên kết là màu xanh da trời (blue), và gạch chân; các liên kết đã được người dùng bấm chuột vào sẽ có màu tím (purple). Tất nhiên, người lập trình có thể thay đổi các định dạng mặc định này.

Bạn có thể đặt mọi phần tử hiển thị nội dung của HTML vào trong phần tử a để tạo một liên kết.

Thuộc tính href

Trình duyệt sẽ dựa vào giá trị của thuộc tính href để biết được tài liệu được liên kết đến là gì. Giá trị của href là URL của một trang web, hoặc của một tài nguyên web bất kì (hình ảnh, âm thanh, video). Nó được bao lại bằng dấu nháy kép.

URL có hai loại, là URL tuyệt đối và URL tương đối.

- URL tuyệt đối

URL tuyệt đối (absolute URL): cung cấp đường dẫn đầy đủ, để có thể lấy được tài nguyên, bao gồm giao thức (protocol), tên miền (domain name), đường dẫn tập tin (pathname). URL tuyệt đối được sử dụng để liên kết đến một tài nguyên trên Internet (không nằm trên server của bạn). Ví dụ,

href=“http://www.google.com/”

- URL tương đối

URL tương đối (relative URL): cung cấp đường dẫn tương đối, để có thể lấy được tài nguyên, thường được sử dụng khi cần liên kết đến một tài nguyên, nằm trên cùng server. Khi đó, URL sẽ không cần có giao thức và tên miền, mà chỉ cần đường dẫn tập tin (pathname). Ví dụ,

href=“images/logo.gif”

Có ba kiểu liên kết hay được sử dụng là: liên kết tới các trang bên ngoài website, liên kết trong một website và liên kết trong một trang web. Lưu ý: hai khái niệm site và website là tương đương, tuy nhiên, từ website được dùng nhiều hơn.

-----

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

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