(NB) Giáo trình Thiết kế và lập trình web cung cấp cho người học kiến thức cơ bản về lập trình web phía Server (Back End). Mô đun giúp người học xây dựng ứng dụng web tương đối hoàn chình bằng cách kết hợp kiến thức của mô đun/môn học HTML &CSS, Javascript cho phần Front Page. Mời các bạn cùng tham khảo nội dung phần 1 của giáo trình.
TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML
CSS (Cascading Style Sheets)
2 Bài 2: Thiết kế Web tĩnh 20 3 16
2 Trang và văn bản trên trang
3 Bảng biểu (Table) và trang khung
5 Các yếu tố động trên trang
3 Bài 3: Xây dựng Web động
1 Tổng quan về ASP.Net và ADO.Net
2 Các đối tượng ASP.Net
3 Biến và cấu trúc điều khiển
5 Các đối tượng ADO.Net
4 Bài 4: Ngôn ngữ lập trình Web
2 Cấu trúc cú pháp và ngôn ngữ
3 Lập trình kết nối dữ liệu
4 Framework hỗ trợ phát riển ứng dụng web
5 Bài 5: Các đối tượng và quản lý trạng thái
6 Bài 6: Triển khai ứng dụng Web
2 Quy trình triển khai và quản lý ứng dụng web
3 Xây dựng và quản lý các services
Thi kết thúc mô đun 1 1
BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML
Mã bài: MĐCNTT26-01 Giới thiệu:
Bài học này cung cấp cái nhìn tổng quan về lịch sử của World Wide Web (www), giải thích về URL, giao thức HTTP và ngôn ngữ phổ biến HTML (Hyper Text Markup Language) được sử dụng trên nền tảng này.
- 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 diện;
- Biết cách tổ chức được thông tin trong trang chủ và bố trí văn bản trên trang.
- Ghi nhớ các lệnh điều khiển của ngôn ngữ đặc tả Script.
- Thực hiện các thao tác an toàn với máy tính.
1 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 trở thành công cụ thiết yếu để truy cập Internet, chủ yếu phục vụ cho việc tìm kiếm thông tin Thông tin này có thể bao gồm văn bản, hình ảnh, âm thanh và nội dung đa phương tiện.
Nhu cầu tìm kiếm thông tin ngày càng gia tăng đã đặt ra câu hỏi về cách sử dụng máy tính và Internet một cách hiệu quả để tra cứu và tìm kiếm thông tin trong kho tàng dữ liệu khổng lồ trên mạng toàn cầu.
Ý tưởng về siêu văn bản (Hypertext) được nhà tin học Ted Nelson đề xuất vào năm 1965 đã tạo điều kiện thuận lợi cho việc phát triển nội dung trực tuyến Đến năm 1989, Tim Berners-Lee, một kỹ sư trẻ người Anh, đã chính thức khởi động dự án này, mở ra kỷ nguyên mới cho Internet.
World Wide Web (WWW) là một mạng lưới thông tin phong phú, được xây dựng dựa trên ba cơ chế chính nhằm cung cấp tài nguyên một cách rộng rãi và dễ dàng cho người dùng.
- 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 là một công cụ quan trọng giúp xác định vị trí tài nguyên trên Internet Nhờ vào các URL, trình duyệt web có thể kết nối với máy chủ web hoặc các dịch vụ khác trực tuyến.
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 biết có một tài liệu có sẵn qua giao thức HTTP, lưu trữ tại máy chủ www.w3.org, có thể truy cập thông qua đường dẫn "/TR" Ngoài ra, trong các tài liệu HTML, còn có các cơ chế khác như "mailto" để gửi thư điện tử và "ftp" cho giao thức FTP.
Ví dụ sau đây chỉ tới hộp thư (mailbox) của người dùng:
Joe Cool
Fragment identifiers in URLs are used to locate specific resources These URLs end with a "#" followed by a connection identifier, known as a fragment identifier For example, the URL that marks a section named "section_2" is: http://somesite.com/html/top.html#section_2.
URL tương đối không tuân theo cơ chế đặt tên cố định, mà thường chỉ định tài nguyên trên cùng một máy chủ với 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, chẳng hạn như “ ” để chỉ lên một cấp trong cấu trúc đường dẫn, và cũng có thể chứa các dấu hiệu đoạn.
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.
Web Browser gửi yêu cầu tới Web Server bằng cách sử dụng phương thức GET để lấy đối tượng từ Server hoặc phương thức POST để gửi dữ liệu tới một đối tượng trên Server.
- 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 giữa Web Browser và Web Server đánh dấu sự chấm dứt của quá trình trao đổi dữ liệu Mối liên hệ giữa Client và Server chỉ tồn tại trong thời gian này, giúp giảm thiểu lưu lượng truy cập trên mạng, mang lại lợi ích lớn cho hiệu suất hoạt động.
2 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ẻ HTML cơ bản.
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 kiểm soát giao dịch từ xa giúp người dùng dễ dàng tìm kiếm thông tin, tạo sản phẩm và đặt hàng một cách hiệu quả.
- 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ẻ đó.
3 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à một tập hợp các trang web (webpage) liên quan đến cùng một chủ đề, được tổ chức tại một địa chỉ cụ thể Người dùng có thể di chuyển giữa các trang này thông qua các liên kết (hyperlink).
Các loại trang chủ yếu của website:
Trang chủ, hay còn gọi là trang gốc, là phần quan trọng nhất của mỗi website, thể hiện rõ chủ đề và nội dung chính thông qua việc bố trí danh mục tin và thiết kế mỹ thuật nổi bật.
Trang nội dung là nơi tập trung thông tin chi tiết về một mục tin cụ thể, đồng thời bao gồm các danh mục tin con liên quan đến chủ đề của mục tin cha Ngoài ra, trang này còn cung cấp các liên kết để người đọc dễ dàng truy cập tới các trang khác.
THIẾT KẾ WEB TĨNH
Bảng biểu (Table) và trang khung (Frame)
Liên kết – Link
3 Bài 3: Xây dựng Web động
1 Tổng quan về ASP.Net và ADO.Net
2 Các đối tượng ASP.Net
3 Biến và cấu trúc điều khiển
5 Các đối tượng ADO.Net
4 Bài 4: Ngôn ngữ lập trình Web
2 Cấu trúc cú pháp và ngôn ngữ
3 Lập trình kết nối dữ liệu
4 Framework hỗ trợ phát riển ứng dụng web
5 Bài 5: Các đối tượng và quản lý trạng thái
6 Bài 6: Triển khai ứng dụng Web
2 Quy trình triển khai và quản lý ứng dụng web
3 Xây dựng và quản lý các services
Thi kết thúc mô đun 1 1
BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML
Mã bài: MĐCNTT26-01 Giới thiệu:
Bài học này cung cấp cái nhìn tổng quan về lịch sử của World Wide Web (WWW), giải thích về URL, giao thức HTTP và ngôn ngữ phổ biến HTML (Hyper Text Markup Language) được sử dụng trên nền tảng này.
- 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 diện;
- Biết cách tổ chức được thông tin trong trang chủ và bố trí văn bản trên trang.
- Ghi nhớ các lệnh điều khiển của ngôn ngữ đặc tả Script.
- Thực hiện các thao tác an toàn với máy tính.
1 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 trở thành công cụ thiết yếu để truy cập Internet, chủ yếu phục vụ cho việc tìm kiếm thông tin Thông tin mà người dùng tìm kiếm có thể bao gồm văn bản, hình ảnh, âm thanh và các nội dung đa phương tiện khác.
Nhu cầu tìm kiếm thông tin ngày càng tăng cao, đặt ra câu hỏi về cách sử dụng máy tính và Internet hiệu quả Để khai thác tối đa nguồn thông tin rộng lớn trên mạng, người dùng cần biết cách truy cập và sử dụng các công cụ hỗ trợ tìm kiếm một cách dễ dàng.
Ý tưởng về siêu văn bản (Hypertext) do Ted Nelson đề xuất vào năm 1965 đã giúp đơn giản hóa vấn đề này Đến năm 1989, Tim Berners-Lee, một kỹ sư trẻ người Anh, đã chính thức thực hiện dự án này.
World Wide Web (WWW) là một mạng lưới thông tin phong phú, sử dụng ba cơ chế chính để tối ưu hóa khả năng truy cập tài nguyên cho người dùng Những cơ chế này giúp đảm bảo rằng thông tin được cung cấp một cách rộng rãi và hiệu quả nhất có thể.
- 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 là một công cụ quan trọng giúp xác định vị trí tài nguyên trên Internet Qua các URL, trình duyệt web có thể kết nối với máy chủ web hoặc các dịch vụ khác, tạo điều kiện cho việc truy cập thông tin một cách dễ dàng và nhanh chóng.
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 có thể được hiểu là một tài liệu có sẵn qua giao thức HTTP, lưu trữ tại máy chủ www.w3.org và có thể truy cập qua đường dẫn "/TR" Ngoài ra, trong các tài liệu HTML, chúng ta cũng thấy các cơ chế khác như "mailto" để gửi thư điện tử và "ftp" cho việc truyền tệp qua FTP.
Ví dụ sau đây chỉ tới hộp thư (mailbox) của người dùng:
Joe Cool
Fragment identifiers in URLs are used to locate specific resources within a webpage These types of URLs end with a "#" followed by an identifier, known as a fragment identifier For example, the URL that marks a section named "section_2" is: http://somesite.com/html/top.html#section_2.
URL tương đối không tuân theo cơ chế đặt tên cố định và thường chỉ định một tài nguyên trên cùng một máy chủ với 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, chẳng hạn như “ ” để chỉ lên một cấp trong cấu trúc đường dẫn, và có thể chứa các dấu hiệu đoạn.
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.
Web Browser gửi yêu cầu đến Web Server bằng cách sử dụng phương thức GET để lấy đối tượng từ Server hoặc POST để gửi dữ liệu đến một đối tượng trên Server.
- 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 giữa Web Browser và Web Server đánh dấu sự chấm dứt quá trình trao đổi dữ liệu Mối liên hệ giữa Client và Server chỉ tồn tại trong thời gian trao đổi, điều này giúp giảm thiểu lưu lượng mạng một cách hiệu quả.
2 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ẻ HTML cơ bản.
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 kiểm soát giao dịch từ xa giúp người dùng dễ dàng tìm kiếm thông tin, tạo sản phẩm và đặt hàng một cách hiệu quả.
- 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ẻ đó.
3 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à một tập hợp các trang web (webpage) liên quan đến một chủ đề chung, tất cả được tổ chức tại một địa chỉ duy nhất Người dùng có thể dễ dàng di chuyển giữa các trang này thông qua các liên kết (hyperlink).
Các loại trang chủ yếu của website:
Trang chủ, hay còn gọi là trang gốc (Master page), là phần quan trọng nhất của mỗi website, thể hiện rõ ràng chủ đề của trang thông qua cách bố trí danh mục tin và thiết kế mỹ thuật nổi bật.
Trang nội dung là nơi tập trung thông tin của một mục tin, bao gồm các danh mục tin con liên quan đến chủ đề chính và các liên kết đến các trang khác.