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.
-----