Mục tiêu: - Trình bày được lịch sử của WWW; - Trình bày được cấu trúc của một trang HTML và các thẻ HTML cơ bản, cách bố trí, xử lý và ứng dụng file CSS; - Thực hiện thiết kế được giao
TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML
Lịch sử World Wide Web (www)
Mục tiêu: Trình bày được lịch sử của WWW
1.1 Giới thiệu về World Wide Web (www)
Ngày nay, máy tính được sử dụng như một công cụ hữu ích để truy cập Internet chủ yếu nhằm tìm kiếm thông tin đa dạng như văn bản, hình ảnh, âm thanh và các nội dung đa phương tiện, giúp người dùng dễ dàng tiếp cận dữ liệu một cách nhanh chóng và thuận tiện.
Nhu cầu tìm kiếm thông tin ngày càng tăng đã đặt ra thách thức về cách sử dụng máy tính một cách dễ dàng để truy cập Internet Việc này giúp người dùng tận dụng tối đa công cụ tra cứu và tìm kiếm thông tin trên mạng rộng lớn, đồng thời nâng cao hiệu quả tiếp cận kiến thức, phục vụ công việc và học tập hàng ngày một cách thuận tiện và nhanh chóng.
Ý tưởng siêu văn bản (Hypertext), được nhà tin học Ted Nelson đề xuất từ năm 1965, đã giúp các vấn đề về tổ chức và truy cập thông tin trở nên dễ dàng hơn Đến năm 1989, dự án này chính thức được triển khai bởi kỹ sư trẻ người Anh, Tim Berners-Lee, mở ra kỷ nguyên mới cho các hệ thống thông tin và trình duyệt web hiện đại.
World Wide Web (WWW) là một mạng lưới các tài nguyên thông tin phong phú và đa dạng, được xây dựng dựa trên ba cơ chế chính nhằm đảm bảo các tài nguyên này trở nên dễ truy cập và sẵn có rộng rãi cho người dùng WWW giúp kết nối các dữ liệu và nội dung trên toàn thế giới, mang lại trải nghiệm truy cập nhanh chóng và thuận tiện Chính nhờ các cơ chế này, WWW trở thành một nền tảng thông tin mở rộng và phổ biến nhất hiện nay.
- Cơ chế đặt tên cùng dạng đối với việc định dạng các tài nguyên trên WWW (như các URL)
- Các giao thức, để truy cập tới các tài nguyên qua WWW (như HTTP)
- Siêu văn bản, để dễ dàng chuyển đổi giữa các tài nguyên (như HTML)
Mọi tài nguyên sẵn dùng trên WWW – tài liệu HTML, ảnh, video clip, chương trình v v - có một địa chỉ mà có thể được mã hóa bởi một URL
URL đóng vai trò như một con trỏ quan trọng dùng để xác định vị trí của các tài nguyên trên môi trường Internet Nhờ có URL, trình duyệt web có thể dễ dàng tham chiếu đến các Web Server hoặc các dịch vụ trực tuyến khác, giúp truy cập thông tin nhanh chóng và thuận tiện Điều này làm cho URL trở thành yếu tố cốt lõi trong việc định vị và truy cập dữ liệu trên Internet một cách hiệu quả.
Các URL thường gồm 3 phần:
- Việc đặt tên của các cơ chế dùng để truy cập tài nguyên
- Tên của máy tính lưu trữ (tổ chức) tài nguyên
- Tên của bản thân tài nguyên, như một đường dẫn
Ví dụ: URL xác định trang W3C Technical Reports là http://www.w3.org/TR
URL này cho thấy có một tài liệu sẵn có theo giao thức HTTP, được lưu trữ trên máy chủ của w3.org và có thể truy cập dễ dàng qua đường dẫn cụ thể.
“/TR” Các cơ chế khác ta có thể thấy trong các tài liệu HTML bao gồm
“mailto” đối với thư điện tử và “ftp” đối với FTP
Ví dụ sau đây chỉ tới hộp thư (mailbox) của người dùng:
Mọi góp ý, xin gửi thư tới
Joe Cool
Fragment identifiers in URLs are used to specify a particular resource or section within a webpage These URLs end with a "#" followed by a fragment label, known as a fragment identifier For example, the URL "http://somesite.com/html/top.html#section_2" directs the browser to a specific section named "section_2" within the page Using fragment identifiers enhances user navigation by allowing direct access to specific parts of a webpage, improving overall usability and SEO performance.
Các URL tương đối không theo cơ chế đặt tên cố định, thường tham chiếu tới tài nguyên trên cùng máy chủ chứa tài liệu hiện tại Chúng có thể bao gồm các thành phần đường dẫn tương đối như “ ” để di chuyển một cấp trong cấu trúc thư mục và cũng có thể chứa dấu hiệu đoạn (fragment identifier) để trỏ trực tiếp đến phần cụ thể của tài nguyên Việc sử dụng URL tương đối giúp quản lý liên kết linh hoạt và phù hợp trong các dự án web có cấu trúc phức tạp.
Ví dụ của giải pháp URL tương đối, giả sử chúng ta có URL gốc:
“http://www.acme.com/support/intro.html”
URL tương đối trong đánh dấu dưới đây cho một liên kết siêu văn bản:
Suppliers sẽ mở rộng thành URL đầy đủ
“http://www.acme.com/support/suppliers.html” trong khi URL tương đối trong việc đánh dấu cho một ảnh dưới đây
sẽ mở rộng thành URL đầy đủ “http://www.acme.com/icons/logo.gif”
Các URL được dùng để:
- Liên kết tới tài liệu hoặc tài nguyên khác
- Liên kết tới kiểu dạng bên ngoài hoặc kịch bản (script)
Web Browser và Web Server giao tiếp với nhau thông qua một giao thức được gọi là HTTP Sự kết nối HTTP qua 4 giai đoạn:
Hình 1.1: Sự kết nối HTTP
- Tạo kết nối: Web Browser giao tiếp với Web Server nhờ địa chỉ URL
- Internet và số cổng (ngầm định là 80) được đặc tả trong URL
Khi trình duyệt web gửi yêu cầu đến máy chủ, quá trình này bắt đầu bằng việc gửi thông tin thông qua các phương thức như GET hoặc POST Phương thức GET được sử dụng để yêu cầu lấy một đối tượng hoặc dữ liệu từ máy chủ, trong khi phương thức POST dùng để gửi dữ liệu tới máy chủ nhằm xử lý hoặc lưu trữ Việc lựa chọn phương thức phù hợp giúp đảm bảo quá trình truyền tải dữ liệu hiệu quả và an toàn hơn trong quá trình truy cập web.
- Phản hồi: Web Server gửi một phản hồi về Web Browser nhằm đáp ứng yêu cầu của Web Browser
Kết thúc kết nối xảy ra khi quá trình trao đổi giữa trình duyệt web và máy chủ web hoàn tất, khiến mối liên hệ giữa Client và Server chấm dứt Điều này giúp hạn chế lưu lượng truy cập trên mạng, tối ưu hoá hiệu quả truyền dữ liệu và giảm thiểu tình trạng tắc nghẽn mạng, mang lại lợi ích lớn trong quản lý lưu lượng và nâng cao hiệu suất mạng.
Nhập môn ngôn ngữ HTML (Hyper Text Markup Language)
Mục tiêu: Trình bày được cấu trúc của một trang HTML và các thẻ
Ngôn ngữ phổ biến dùng bởi World Wide Web là HTML (Hyper Text
Markup Language) Nó được dùng cho các mục đích sau:
- Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách, ảnh, v.v…
- Truy tìm thông tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào một nút
Thiết kế các định dạng cho phép kiểm soát giao dịch từ xa một cách hiệu quả, hỗ trợ người dùng trong việc tìm kiếm thông tin, tạo sản phẩm và đặt hàng Giải pháp này đảm bảo quy trình giao dịch an toàn, linh hoạt và thuận tiện, nâng cao trải nghiệm người dùng trong các hoạt động thương mại điện tử.
- Bao gồm spread-sheets, video clips, sound clips, và các ứng dụng trực tiếp khác trong các tài liệu của họ
HTML đánh dấu văn bản dưới dạng các thẻ (Tag) Cấu trúc thẻ HTML có dạng như sau:
- Thẻ đóng: văn bản chịu tác động
+ : bắt đầu hiệu ứng thẻ
+ : kết thúc hiệu ứng thẻ
Ví dụ: văn bản này được in đậm sẽ cho kết quả ở trình duyệt là: văn bản này được in đậm
- Thẻ mở: văn bản chịu tác động
Ví dụ: Đoạn 1
Đoạn 2 sẽ cho kết quả là: Đoạn 1 Đoạn 2
- Về quy tắc các thẻ có thể lồng lẫn nhau nhưng vẫn phải đảm bảo đúng cú pháp của thẻ đó.
Trang và văn bản trên trang
Mục tiêu: Biết cách tổ chức được thông tin trong trang chủ và bố trí văn bản trên trang; Thực hiện thiết kế được giao diện
Trang web có hai đặc trưng cơ bản:
- Siêu văn bản (hypertext): bao gồm các văn bản, hình ảnh tĩnh, hình ảnh động, âm thanh, màu sắc và các thành phần khác
- Siêu liên kết (hyperlink): có nhiều mối liên kết đa dạng với các trang và các thành phần khác ở bất cứ một website nào trên phạm vi toàn cầu
Website là tập hợp các trang web (webpage) liên kết với nhau cùng chủ đề tại một địa chỉ duy nhất, giúp người dùng dễ dàng truy cập thông tin Trong một website, người dùng có thể di chuyển giữa các trang bằng các liên kết hyperlink, tạo thành một hệ thống điều hướng thuận tiện và dễ sử dụng.
Các loại trang chủ yếu của website:
Trang chủ hoặc trang gốc (Master page) là phần quan trọng nhất của mỗi website, thể hiện rõ chủ đề và mục đích của site thông qua cách bố trí danh mục tin tức, giao diện mỹ thuật nổi bật và thiết kế hấp dẫn.
Trang nội dung là trang chứa toàn bộ nội dung của một mục tin, giúp người đọc dễ dàng tiếp cận thông tin chính Ngoài ra, trang còn tích hợp các danh mục tin con theo chủ đề của mục tin cha, hỗ trợ phân loại và tìm kiếm nội dung một cách thuận tiện Các liên kết liên kết tới các trang khác cũng được đưa ra để tạo ra hệ thống liên kết nội bộ tối ưu, nâng cao trải nghiệm người dùng và cải thiện SEO cho website.
Trang đầu, hay còn gọi là trang chủ, là trang xuất hiện ngay sau khi khởi động trình duyệt; nó có thể là trang mặc định hoặc người dùng tùy chỉnh, nhưng không phải là trang đặc biệt hoặc không thay đổi theo thời gian.
Trang đặc biệt hay còn gọi là trang xuất hiện trên nền trang chủ khi khởi động trình duyệt web, thường chứa nội dung quan trọng hoặc thông báo đặc biệt Trang này có thể tồn tại trong thời gian ngắn và nhằm gửi những thông điệp nổi bật, thu hút sự chú ý của người dùng ngay từ lần truy cập đầu tiên Với khả năng tùy biến cao, trang đặc biệt giúp truyền tải tin tức nhanh chóng và hiệu quả đến mọi người.
Một trang web thường gồm một vài trang màn hình.
Ngôn ngữ đặc tả Script
Mục tiêu: Ghi nhớ các lệnh điều khiển của ngôn ngữ đặc tả Script
Kịch bản hay script là một chương trình chạy theo chế độ thông dịch trên máy khách hoặc máy chủ, nhằm tạo ra các ứng dụng web dựa trên nền tảng lập trình Việc sử dụng script giúp cải thiện hiệu suất và khả năng tương tác của các ứng dụng web, đảm bảo trải nghiệm người dùng mượt mà hơn Script đóng vai trò quan trọng trong phát triển web, giúp tối ưu hóa quy trình vận hành và nâng cao tính bảo mật của hệ thống.
Client-side là các đoạn mã script được bổ sung vào trang web, giúp tạo ra các trang web tương tác và sinh động hơn bằng cách triển khai các hiệu ứng động dựa trên mô hình đối tượng trình duyệt (BOM: Browser Object Model).
- Server-side: sử dụng các đối tượng liên quan để chạy các script trên server
Trong tài liệu này, chúng tôi giới thiệu sơ lược về ngôn ngữ đặc tả VBScript, một trong những loại ngôn ngữ phổ biến như JavaScript, VBScript, Jscript, nhằm hỗ trợ các học viên có thể tham khảo thêm khi thực hiện lập trình chức năng cho website.
Trong VBScript, việc khai báo biến được thực hiện thông qua từ khóa `Dim`, giúp xác định biến một cách dễ dàng Các biến trong VBScript không cần phải xác định kiểu dữ liệu rõ ràng, điều này tạo điều kiện thuận lợi cho việc lập trình linh hoạt hơn Các biến không có cấu trúc được xem là biến vô hướng, có khả năng chứa và tự chuyển đổi giữa hầu hết các kiểu dữ liệu khác nhau, nâng cao tính linh hoạt và tiện ích khi làm việc với dữ liệu trong VBScript.
Hằng được khai báo bằng từ khóa Const Ví dụ:
Mảng được định nghĩa và truy xuất thông qua chỉ số
- Dim a(10) ‘Khai báo mảng một chiều a có 10 phần tử’
- Dim b(5,10) ‘Khai báo mảng hai chiều b’
- Redim a(20) ‘Khai báo lại mảng a tăng thêm 10 phần tử vẫn giữ lại giá trị 10 phần tử đầu’
VBScript cho phép sử dụng các toán tử xử lý chuỗi, so sánh và các phép gán, tính toán số học như sau:
Toán tử Tên gọi Ví dụ
\ Chia phần nguyên 7\3 (kết quả: 2)
Mod Chia lấy dư 7 mod 3 (kết quả: 1)
& hoặc + Cộng chuỗi “he” & “llo” (kết quả: “hello”)
>< bằng lớn hơn nhỏ hơn khác lớn hơn hoặc bằng nhỏ hơn hoặc bằng Not, And, Or, Xor Toán tử logic If(x>2)and(yx)then
4.3 Các cấu trúc điều kiện
4.3.1 Lệnh If then và If … then … else
If then
If then
- Ở lệnh 1 khối lệnh 1 được thực hiện nếu trả về giá trị
- Ở lệnh 2 khối lệnh 1 được thực hiện nếu trả về giá trị True, ngược lại khối lệnh 2 sẽ được thực hiện