Bài trước: Web (7) - Lộ trình học web front-end
-----
1
Web
1.1
Web là gì?
Web còn có tên gọi khác là WWW[1],
hoặc World Wide Web. Web là không gian thông tin toàn cầu.
Năm 1989, Tim Berners-Lee là người phát minh ra web. Một năm
sau đó, ông cũng là người đã tạo ra chương trình để đọc thông tin trên web, gọi
là trình duyệt web (web browser), hay được gọi tắt là trình duyệt (browser).
Không gian thông tin toàn cầu có một số đặc điểm sau:
– Có phạm vi toàn cầu: người dùng ở mọi nơi đều có thể truy
cập vào không gian thông tin này. Họ chỉ cần có một trong các thiết bị như máy
tính, tivi, điện thoại thông minh (smartphone), máy tính bảng (tablet) hoặc một
thiết bị điện tử bất kỳ (gọi chung là máy tính), miễn là có kết nối tới
Internet.
– Thông tin trong hệ thống web tồn tại ở nhiều dạng: văn bản
(text), hình ảnh, video, âm thanh. Các thông tin này được gọi chung là tài nguyên
web. Mỗi tài nguyên web được xác định bằng một địa chỉ cụ thể gọi là URL.
– Không gian thông tin được tạo ra bởi rất nhiều các liên kết
(link) (cũng được gọi là siêu liên kết - hyperlink) giữa các tài nguyên web với
nhau. Các liên kết này được các lập trình viên tạo ra trong quá trình làm web,
thực chất nó là liên kết tới các URL.
– Hạ tầng của không gian thông tin toàn cầu chính là
Internet. Hạ tầng Internet gồm hai loại: hạ tầng cứng và hạ tầng mềm. Trong đó,
hạ tầng cứng bao gồm các thiết bị mạng, máy tính, môi trường truyền; và hạ tầng
mềm gồm các giao thức và các phần mềm.
Mỗi khi nói đến web, người ta thường nhắc đến các thành phần
có liên quan như: máy tính, mạng, Internet, web, trình duyệt, máy tìm kiếm
(search engine) hay được gọi là trang tìm kiếm, và nội dung.
Để dễ hiểu về web, hãy quan sát quá trình bạn lên mạng, để tìm
hiểu về thuật ngữ “World Wide Web” chẳng hạn:
– Đầu tiên, bạn cần có một máy tính kết nối vào mạng
Internet
– Mở trình duyệt, nhập từ khóa “World Wide Web” vào một
trang tìm kiếm bất kỳ (ví dụ Google), bấm Enter để tìm kiếm
– Trang tìm kiếm sẽ trả về các liên kết (link) tới trang web
cụ thể (các URL) có nội dung liên quan tới “World Wide Web”.
– Bạn bấm vào các liên kết để mở nội dung (content) cần tìm
hiểu. Mỗi kết quả tìm kiếm sẽ có một URL khác nhau
1.2 Nội dung của web
Nội dung trên web rất đa dạng, có thể là văn bản, hình ảnh,
video, âm thanh. Bạn hãy mở các trang web có nội dung tương ứng, sau
đó chép đường dẫn (URL) của mỗi trang, lưu lại và quan sát các URL.
Ví dụ:
– Trang web có nội dung là văn bản: https://en.wikipedia.org/wiki/World_Wide_Web
– Trang web có nội
dung là hình ảnh: https://pixabay.com/vi/
– Trang web có nội
dung là video: https://www.youtube.com/watch?v=J8hzJxb0rpc
– Trang web có nội dung âm thanh: https://www.thisamericanlife.org/706/a-mess-to-be-reckoned-with
– Đa số các trang web sẽ có nội dung là kết hợp của nhiều dạng
dữ liệu khác nhau, vừa có văn bản, hình ảnh, video và âm thanh. Ví dụ các ứng dụng
web hoặc các trang thương mại điện tử.
Là một lập trình viên trong tương lai, bạn nên suy nghĩa về việc làm thế nào để biểu diễn được các loại thông tin (văn bản, hình ảnh, âm thanh, video) lên một trang web, sau đó đưa trang web lên hệ thống web.
Quan sát các URL ở ví dụ trên sẽ thấy, mỗi URL luôn bắt đầu
là https:// hoặc http://, sau đó là một chuỗi các kí tự, kí hiệu khác nhau.
Con người đã ứng dụng web vào rất nhiều lĩnh vực, từ y tế,
văn hóa, kinh tế, chính trị, giáo dục, truyền thông, giải trí.
1.3 Xem và đọc thêm
Bạn có thể đọc
thêm về world wide web trên mạng, bằng cách vào trang tìm kiếm bất kỳ, gõ từ
khóa “world wide web tutorial”, “học world wide web”, mở trang kết quả bằng tiếng
Việt hoặc tiếng Anh để đọc thêm. Ví dụ: https://en.wikipedia.org/wiki/World_Wide_Web
Bạn có thể xem thêm về world wide web trên mạng, bằng cách vào trang chuyên về video gõ từ khóa “world wide web tutorial” “tìm hiểu về world wide web”, mở một vài clip bằng tiếng Việt hoặc tiếng Anh để xem.
– World wide web (computer science): https://www.youtube.com/watch?v=guvsH5OFizE
– World wide web: https://www.youtube.com/watch?v=83y4X8S2BEI
– World wide web là gì? https://www.youtube.com/watch?v=cgUZmx7EhKU
1.4 Bài tập và thực hành
|
Cách đặt tên thư mục/tập tin |
|
Việc đặt tên thư mục/tập
tin theo quy ước giúp hình thành tính cẩn thận, tính chuyên nghiệp, dễ dàng
làm việc với các thành viên khác trong nhóm và hạn chế việc phát sinh các lỗi
không đáng có. Sau đây là một số
quy ước nên theo: – Sử dụng phần mở rộng
của tập tin (filename extension) chính xác, ví dụ các tập tin HTML sẽ có phần
mở rộng là .html, hoặc hình ảnh thì sẽ có phần mở rộng là .gif, .png,
.jpg hoặc .jpeg. – Không đặt tên thư
mục/tập tin có dấu tiếng Việt, có thể đặt tên tập tin bằng tiếng Anh, hoặc tiếng
Việt không dấu, ví dụ login.html hoặc dang-nhap.html. – Không nên đặt tên
thư mục/tập tin có chứa khoảng trắng, với các tên gồm nhiều từ, thì nên nối
các từ đó bằng dấu gạch nối (-) (hyphen), hoặc gạch chân ( _ ) (underline,
underscore), ví dụ dang-nhap.html hoặc dang_nhap.html. Cũng có thể viết liền
và viết hoa chữ cái đầu tiên của mỗi từ, ví dụ: dangNhap.html, hoặc
DangNhap.html. – Không sử dụng các
kí tự đặc biệt (special characters) để đặt tên, ví dụ không sử dụng các kí tự
sau: %, ?, #, /, :, ;, *. Nên đặt tên bằng các kí tự thông thường (letter),
kí số (number), dấu gạch nối, dấu gạch chân, dấu chấm. – Một số hệ thống có
phân biệt chữ hoa và chữ thường, ví dụ DANG-NHAP.html sẽ khác với dang-nhap.html vì vậy nên sử dụng toàn bộ là chữ thường. – Tên tập tin nên đặt
ngắn gọn, giúp dễ đọc, dễ quản lý. – Tự lựa chọn và
hình thành cho mình phong cách đặt tên cho chuyên nghiệp, thống nhất, điều
này giúp việc lập trình dễ dàng hơn, ví dụ sẽ ít bị gõ sai tên các tập tin
khi cần tham chiếu đến nó. |
Bài tập 1. Tạo liên kết để mở một trang web trên hệ thống
web.
– Bước 1. Mở một trình soạn văn bản thuần (plain text) bất kỳ
(ví dụ Notepad)
– Bước 2. Nhập vào đoạn mã sau:
<a href="https://en.wikipedia.org/wiki/World_Wide_Web">Đọc thêm về World Wide Web trên Wikipedia</a>
– Bước 3. Lưu tập tin với tên bất kỳ, với phần mở rộng là
“html”, ví dụ bai_tap1.html
Chú ý: khi lưu trong Notepad, để chắc chắn phần mở rộng của
tập tin là “.html” chứ không phải là “.html.txt” thì trong lúc lưu, tới phần nhập
tên cho tập tin, mục File name, nhớ bao phần tên và phần mở rộng bằng dấu nháy
kép (“”), ví dụ “bai_tap1.html”.
– Bước 4. Mở tập tin bai_tap1.html bằng
trình duyệt
– Bước 5. Trên trình duyệt sẽ xuất hiện dòng chữ:
Đọc thêm về World Wide Web trên Wikipedia
– Bước 6. Bấm vào dòng chữ trên, để mở trang nội dung viết về
“World Wide Web”.
Bài tập 2. Phát triển từ bài tập 1, hãy tạo năm liên kết đến
năm trang web mà bạn hay mở mỗi ngày.
Tham khảo:
[bai_tap2.html]
<a href="https://tuoitre.vn/">Đọc tin tức</a>
<a href="https://www.youtube.com/">Nghe nhạc</a>
<a href="https://www.thisamericanlife.org/">Học tiếng Anh</a>
<a href="https://www.udemy.com/">Học lập trình</a>
<a href="http://legiacong.blogspot.com/">Viết blog</a>
– Mở trình duyệt (chrome), vào mục Settings \ ở khung bên
trái, chọn On startup \ chọn tiếp Open a specific page or set of pages \ chọn
tiếp mục Add a new page \ nhập đường dẫn trang web bạn vừa tạo, ví dụ: file:///C:/Users/Maxsys/Desktop/ bai_tap2.html
– Tắt trình duyệt và mở lại, bạn sẽ thấy trang web của bạn xuất
hiện khi mở trình duyệt
1.5 Câu hỏi ôn tập
Câu 1. WWW là viết tắt của?
A. Wordl Wide Wed
B. World Wide Web
C. Word Wide Web
D. Word Wibe Web
Câu 2. URL là
gì?
A. Một giao thức trong Internet
B. Xác định tên của một máy tính trên mạng
C. Định vị một tài nguyên cụ thể trên web
D. Một chuẩn trong truyền dữ liệu trên web
Câu 3. The Web is an information system where documents
and other web resources are identified by Uniform Resource Locators (URLs, such
as https://example.com/), which may be interlinked by ________, and are
accessible over the Internet.
A. URL
B. pages
C. computers
D. hyperlinks
Câu 4. HTML
là viết tắt của?
A. HyperText Makeup Language
B. HTTP Technology Model Language
C. HyperText Markup Language
D. HyperTest Makeup Language
Câu 5. Trình duyệt web là một ứng dụng phần mềm để truy
cập thông tin trên World Wide Web. Mỗi trang web, hình ảnh và video riêng lẻ được
xác định bằng một _________ riêng biệt, cho phép các trình duyệt truy xuất và
hiển thị chúng trên thiết bị của người dùng.
A. công nghệ
B. mã HTML
C. liên kết
D. URL