Bài trước: HTML (9) - Một số phần tử HTML khác
-----
13. 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. 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), là một nút trên không gian thông tin.
Bài học này, bạn sẽ tìm hiểu về cách để 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.
13.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 bài tập ở các phần trước, là bạn đã phần nào trải nghiệm với khái niệm trang web.
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 lập trình viên, trang web là một tập tin; tùy thuộc vào ngôn ngữ sử dụng, tập tin sẽ có phần mở rộng khác nhau, ví dụ: .html, .php, .aspx, .jsp, .js. Hệ thống sẽ dịch và thực thi các đoạn mã để tạo ra trang thông tin.
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ẽ dịch 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.
Trang web tĩnh
Trang web tĩnh (static web page) là trang web mà nội dung hiển thị cho người dùng không thay đổi theo thời gian, trừ khi lập trình viên trực tiếp chỉnh sửa mã nguồn của tập tin đó.
Ví dụ: Một trang giới thiệu về cơ quản, tổ chức chỉ gồm văn bản mô tả lịch sử hình thành, sơ đồ tổ chức và thông tin liên hệ.
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 thời gian, 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
Trong tiếng Việt, từ “website” thường được giữ nguyên.
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 |
13.2 Tạo liên kết
Trong HTML, sử dụng phần tử a để tạo các liên kết. Tên phần tử a là 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.