Giáo trình Thiết kế web căn bản với HTML, JavaScript, ASP - Phần 1

Khám phá thiết kế web căn bản với HTML, JavaScript và ASP trong phần 1. Nắm vững kiến thức cần thiết để bắt đầu xây dựng trang web.

• Trường học: Trường Đại Học Công Nghệ Thông Tin
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Thiết Kế Web Căn Bản Với Html Javascript Asp Phần 1
• Loại tài liệu: bài giảng
• Năm xuất bản: 2023
• Địa điểm: Hồ Chí Minh

Mục lục chi tiết

• 1. PHẦN I: HTML - HYPER TEXT MARKUP LANGUAGE
• 1.1. BẮT ĐẦU VỚI HTML
• 1.1.1. Bạn cần có gì để bắt đầu với HTML
• 1.2. SỬ DỤNG CÁC PHƯƠNG TIỆN
• 1.2.1. Sử dụng Notepad và trình duyệt web
• 1.3. CĂN BẢN ĐỊNH DẠNG HTML
• 1.3.1. Giới thiệu các tag HTML và định dạng cơ bản của một trang HTML
• 1.3.2. Cách dùng các tag HTML để vận dụng với văn bản
• 1.3.3. Sử dụng các đề mục, các đoạn văn bản, và ngắt dòng
• 1.3.4. Cách thay đổi kích thước và màu sắc văn bản
• 1.3.5. Cách dùng các ký tự đặc biệt trong HTML
• 1.3.6. Cách liên kết với các trang khác trong HTML
• 1.3.7. Cách đặt các hình ảnh vào trang web của bạn
• 1.3.8. Thử dùng một số tag văn bản khác
• 1.3.9. Sử dụng ghi chú (comment) trong code HTML
• 1.3.10. Cách thêm danh sách (list) vào trang web của bạn
• 1.3.11. Cách dùng các thuộc tính của tag BODY để làm đẹp trang web
• 1.3.12. Cách thay đổi màu mặc nhiên của phông chữ
• 1.3.13. Cách thay đổi màu của link trong trang web của bạn
• 1.3.14. Thêm hoặc thay đổi màu nền của trang web
• 1.3.15. Cách cho một hình ảnh làm hình ảnh nền của trang web
• 1.3.16. Cách định lại kích thước của hình ảnh
• 1.3.17. Làm thế nào để link dùng một hình ảnh
• 1.3.18. Cách xuống dòng tự động (wrap) văn bản bao quanh hình ảnh
• 1.3.19. Một thuộc tính (alternative - alt) khác của hình ảnh
• 1.3.20. Nhảy đến đầu trang, cuối trang hay một vị trí bất kỳ
• 1.3.21. Cách để tạo một email link
• 1.3.22. Các mẹo khác với email link
• 1.3.23. Cách thêm các form vào trang web
• 1.3.24. Cách để chơi nhạc và nghe âm thanh
• 1.3.25. Dùng META tag để các search engine thấy trang web của bạn
• 1.3.26. Cách tự động chuyển hướng người sử dụng
• 1.3.27. Sử dụng đường gạch ngang

  ---

• 1.3.28. Sử dụng các phông chữ khác nhau trên trang web
• 1.3.29. Cách tạo một link mở một cửa sổ trình duyệt mới
• 1.3.30. Cách cho một ảnh nền cố định vào trang web
• 1.3.31. Cách thêm một marquee (dòng chữ chạy) vào trang web
• 1.4. BẢNG TRONG HTML
• 1.4.1. Cách cho một bảng (table) vào trang web
• 1.4.2. Cách dùng các thuộc tính khác của bảng
• 1.4.3. Đặt các bảng trong một bảng lớn hơn
• 1.4.4. Canh lề các bảng với một ảnh ẩn
• 1.4.5. Dùng các bảng lồng nhau thay vì dùng mẹo hình ảnh
• 1.5. SỬ DỤNG CÁC FRAME
• 1.5.1. Cách thêm các khung (frame) vào trang web
• 1.5.2. Cách liên kết giữa các frame, thay đổi thuộc tính của frame, và sử dụng tag NOFRAME
• 1.5.3. Làm cho các thanh cuộn và các đường viền biến mất
• 1.5.4. Cách chèn frame nội (inline) trong trang HTML
• 1.5.5. Cách cho một image map vào trang web
• 1.5.6. Cách bỏ các đường gạch dưới của các link
• 2. PHẦN II: JAVASCRIPT
• 2.1. CẦN CÓ GÌ ĐỂ SỬ DỤNG JAVASCRIPT
• 2.2. PHẦN CĂN BẢN JAVASCRIPT
• 2.2.1. Các căn bản để chèn JavaScript vào trang web
• 2.2.2. Cách thêm JavaScript đầu tiên vào trang web
• 2.2.3. Cách làm một nút bấm (button) phản ứng với JavaScript
• 2.2.4. Tạo các nút tương tác với history
• 2.2.5. Thông báo, cảnh báo
• 2.2.6. Thêm các biến và các hàm vào trong các script
• 2.2.7. Các toán tử logic và các câu lệnh có điều kiện
• 2.2.8. JavaScript Prompts
• 2.2.9. Các hộp thoại xác nhận
• 2.2.10. Lấy thông tin trình duyệt
• 2.2.11. Chuyển hướng - Redirection
• 2.2.12. Cách dùng JavaScript để mở một cửa sổ mới
• 2.2.13. Làm thế nào để gọi hàm mà không dùng các nút bấm
• 2.3. PHẦN JAVASCRIPT NÂNG CAO
• 2.3.1. Sử dụng mảng trong JavaScript
• 2.3.2. Sử dụng mảng liên hợp trong JavaScript
• 2.3.3. Tải trước các hình ảnh
• 2.3.4. Thay đổi hình ảnh khi di chuyển chuột qua nó
• 2.3.5. Làm hiệu ứng với nhiều hình ảnh
• 2.3.6. Tạo hiệu ứng cho một ảnh khác
• 2.3.7. Kiểm tra các đối tượng thay vì kiểm tra trình duyệt
• 2.4. FRAME VÀ JAVASCRIPT
• 2.4.1. Kết hợp dùng JavaScript và Frame
• 2.4.2. Thay đổi hai Frame cùng lúc
• 2.4.3. Soạn thảo HTML cho frame bên trong
• 2.5. LÀM VIỆC VỚI FORM
• 2.5.1. Cách xử lý các phần tử của form
• 2.5.2. Dùng các hộp danh sách để đi đến trang khác
• 2.5.3. Dùng hộp danh sách không cần nhấn nút
• 2.5.4. Sử dụng các hộp danh sách với các frame
• 2.5.5. Tạo các hình ảnh “nhấn được” giống như button của form
• 2.5.6. Cách làm cho một file JavaScript làm việc trên nhiều trang HTML
• 2.6. ĐỐI TƯỢNG NGÀY THANG (DATE OBJECT)
• 2.6.1. Sử dụng date object và các phương thức (method) của nó để tạo một đồng hồ
• 2.6.2. Thêm một vài tính năng mới cho đồng hồ
• 2.7. ĐỐI TƯỢNG TOÁN HỌC (MATH OBJECT)
• 2.7.1. Các phương thức hữu dụng cho việc tính toán
• 2.7.2. Lấy các số và các chuỗi ngẫu nhiên
• 2.8. XỬ LÝ CHUỖI
• 2.8.1. Sử dụng charAt và indexOf
• 2.8.2. Sử dụng phương thức split
• 3. PHẦN III: ASP ACTIVE SERVER PAGES
• 3.1. Active Server Pages là gì?
• 3.2. Bạn có thể làm gì với Active Server Pages?
• 3.3. Trang ASP trông như thế nào?
• 3.4. Các server-side script trông như thế nào?
• 3.5. Hiển thị ngày giờ hiện hành
• 3.6. Hiển thị văn bản
• 3.7. Sử dụng các hàm ngày tháng, thời gian và văn bản
• 3.8. Sử dụng biến và form trong Active Server Pages
• 3.9. Next, Do While, End Select
• 3.10. Viết các thủ tục
• 3.11. Include / virtual
• 3.12. Phương pháp Session
• 3.13. Phương pháp Application
• 3.14. Đối tượng Dictionary
• 3.15. Cookies
• 3.16. Mở file và đọc nội dung từ một file văn bản
• 3.17. Ghi vào file văn bản, global.asa
• 3.18. Các hàm về các thứ

Tóm tắt

I. Hướng dẫn tự học thiết kế web căn bản từ A Z cho người mới

Bắt đầu hành trình tự học thiết kế web là một quyết định quan trọng, mở ra cánh cửa đến với ngành công nghệ thông tin đầy tiềm năng. Quá trình này đòi hỏi sự hiểu biết nền tảng về các công nghệ cốt lõi như HTML, CSS, JavaScript cho phía client và các ngôn ngữ kịch bản phía server như ASP. Bài viết này là phần đầu tiên trong chuỗi hướng dẫn chi tiết về thiết kế web căn bản, tập trung vào việc xây dựng một trang web từ những viên gạch đầu tiên. Nội dung được chắt lọc từ tài liệu nghiên cứu của tác giả Hồ Hoàng Triết, cung cấp một lộ trình rõ ràng, từ việc định nghĩa các khái niệm front-end là gì, back-end là gì cho đến việc chuẩn bị những công cụ cần thiết nhất. Mục tiêu là trang bị kiến thức vững chắc cho những người mới bắt đầu, giúp họ hiểu rõ vai trò của từng công nghệ và cách chúng phối hợp với nhau để tạo nên một website hoàn chỉnh. Từ việc tạo ra cấu trúc bằng HTML, thêm phong cách với CSS, tạo sự tương tác với JavaScript, cho đến xử lý logic phía máy chủ với ASP, mỗi phần đều được giải thích một cách trực tiếp và dễ hiểu. Đây là bước đệm quan trọng cho bất kỳ ai muốn tham gia vào một khóa học lập trình web chuyên sâu hơn trong tương lai.

1.1. Lập trình web cho người mới bắt đầu Front end và Back end

Trong lĩnh vực lập trình web cho người mới bắt đầu, việc phân biệt rõ hai khái niệm Front-end và Back-end là điều kiện tiên quyết. Front-end, hay còn gọi là lập trình phía client (client-side), bao gồm tất cả những gì người dùng nhìn thấy và tương tác trực tiếp trên trình duyệt. Nó được xây dựng chủ yếu từ ba công nghệ nền tảng: HTML (HyperText Markup Language) để tạo ra cấu trúc trang HTML và nội dung; CSS (Cascading Style Sheets) để định dạng, trang trí và tạo bố cục; và JavaScript để tạo ra các hiệu ứng động và tương tác người dùng. Ngược lại, Back-end, hay lập trình phía server (server-side), là bộ não của website, xử lý các logic nghiệp vụ, quản lý dữ liệu và tương tác với cơ sở dữ liệu. Các công nghệ Back-end phổ biến bao gồm PHP, Python, Java, và trong khuôn khổ tài liệu này là ASP (Active Server Pages). Back-end chịu trách nhiệm nhận yêu cầu từ Front-end, xử lý thông tin, truy vấn cơ sở dữ liệu và trả kết quả về cho người dùng. Hiểu rõ sự khác biệt này giúp người học định hình được lộ trình học tập và xác định lĩnh vực chuyên môn muốn theo đuổi.

1.2. Các công cụ cần thiết để tự học thiết kế web hiệu quả

Để bắt đầu tự học thiết kế web, không cần đến những phần mềm phức tạp hay đắt tiền. Theo tài liệu “Căn bản thiết kế Web” của Hồ Hoàng Triết, các công cụ khởi đầu vô cùng đơn giản và dễ tiếp cận. Công cụ đầu tiên và quan trọng nhất là một trình soạn thảo văn bản (text editor). Với hệ điều hành Windows, Notepad là đủ để viết những dòng mã HTML, JavaScript đầu tiên. Tuy nhiên, các trình soạn thảo hiện đại hơn như Visual Studio Code, Sublime Text, hoặc Atom được khuyến khích vì chúng có các tính năng hỗ trợ như tô màu cú pháp, gợi ý mã, giúp quá trình viết code nhanh và ít lỗi hơn. Công cụ thứ hai là một trình duyệt web (web browser) như Google Chrome, Mozilla Firefox, hoặc Microsoft Edge. Trình duyệt không chỉ để hiển thị kết quả trang web vừa tạo, mà còn là công cụ gỡ lỗi (debug) mạnh mẽ, đặc biệt cho mã JavaScript. Người học chỉ cần tạo một file với đuôi .html, viết mã trong trình soạn thảo, lưu lại và mở file đó bằng trình duyệt để xem thành quả. Sự đơn giản trong khâu chuẩn bị này giúp người mới tập trung hoàn toàn vào việc học cú pháp và logic lập trình.

II. Những rào cản khi bắt đầu thiết kế web HTML JS ASP

Việc tiếp cận lĩnh vực thiết kế web căn bản luôn đi kèm với những thách thức không nhỏ, đặc biệt với những người chưa có nền tảng về công nghệ. Một trong những rào cản lớn nhất là khối lượng kiến thức khổng lồ và sự đa dạng của các công nghệ. Người học thường cảm thấy choáng ngợp khi phải tìm hiểu đồng thời HTML, CSS, JavaScript và cả các khái niệm về lập trình phía server như ASP. Việc không phân biệt rõ vai trò và phạm vi của từng công nghệ dẫn đến sự nhầm lẫn và khó khăn trong việc áp dụng vào thực tế. Thách thức tiếp theo đến từ việc hiểu sai hoặc hời hợt các khái niệm cốt lõi. Nhiều người chỉ học thuộc lòng các thẻ HTML mà không nắm vững cấu trúc trang HTML chuẩn, hoặc sao chép các đoạn mã JavaScript mà không hiểu về javascript DOM và cơ chế xử lý sự kiện. Điều này tạo ra một nền tảng kiến thức yếu, khó có thể phát triển các ứng dụng phức tạp sau này. Cuối cùng, sự khác biệt căn bản giữa lập trình phía client (front-end) và phía server (back-end) cũng là một trở ngại lớn, đòi hỏi một tư duy logic và cách tiếp cận hoàn toàn khác biệt để có thể làm chủ cả hai mảng.

2.1. Khó khăn trong việc hiểu rõ cấu trúc trang HTML chuẩn

Một trong những khó khăn ban đầu nhưng rất phổ biến là việc nắm vững cấu trúc trang HTML. Mặc dù HTML có vẻ đơn giản với các thẻ đánh dấu, việc xây dựng một cấu trúc đúng chuẩn và có ngữ nghĩa (semantic) lại là một thử thách. Người mới học thường bỏ qua tầm quan trọng của các thẻ như <head>, <body>, hoặc sử dụng sai mục đích của các thẻ tiêu đề từ <h1> đến <h6>. Tài liệu của Hồ Hoàng Triết nhấn mạnh rằng một file HTML luôn phải có cấu trúc cơ bản bao gồm thẻ <html> bao bọc toàn bộ, bên trong là <head> chứa các thông tin meta, tiêu đề (<title>) và <boby> chứa toàn bộ nội dung hiển thị. Việc thiếu hiểu biết về cấu trúc này không chỉ làm trang web hiển thị sai lệch trên các trình duyệt khác nhau mà còn ảnh hưởng tiêu cực đến SEO (Search Engine Optimization). Các công cụ tìm kiếm dựa vào cấu trúc HTML có ngữ nghĩa để hiểu nội dung trang. Vì vậy, việc xây dựng một nền tảng vững chắc về cấu trúc là bước đầu tiên và quan trọng nhất để vượt qua rào cản khi học thiết kế web.

2.2. Thách thức khi phân biệt lập trình phía client và server

Sự khác biệt giữa lập trình phía client (client-side) và lập trình phía server (server-side) là một khái niệm trừu tượng và gây nhiều khó khăn cho người mới. Lập trình client-side, tiêu biểu là JavaScript, chạy hoàn toàn trên trình duyệt của người dùng. Mã lệnh được tải về và thực thi trên máy của người dùng, chịu trách nhiệm cho các tác vụ như xác thực form, tạo hiệu ứng, thay đổi nội dung trang mà không cần tải lại. Ngược lại, lập trình phía server, như với ASP, được thực thi trên một máy chủ web từ xa (ví dụ: máy chủ web IIS). Máy chủ xử lý yêu cầu, truy cập cơ sở dữ liệu, thực hiện các logic phức tạp và chỉ gửi kết quả cuối cùng (thường là mã HTML) về cho trình duyệt. Sự nhầm lẫn giữa hai môi trường này có thể dẫn đến các lỗi nghiêm trọng, chẳng hạn như cố gắng dùng JavaScript để kết nối trực tiếp đến cơ sở dữ liệu (một hành động không an toàn và không thể thực hiện) hoặc dùng ASP để xử lý các hiệu ứng giao diện tức thời. Việc hiểu rõ nơi mã lệnh được thực thi và vai trò của từng phía là chìa khóa để xây dựng các ứng dụng web hiệu quả và an toàn.

III. Nền tảng thiết kế web căn bản Xây dựng cấu trúc với HTML

HTML (HyperText Markup Language) là xương sống của mọi trang web, là ngôn ngữ đánh dấu siêu văn bản định hình nên cấu trúc và nội dung thô. Việc làm chủ HTML là bước đi không thể thiếu trong mọi hướng dẫn tạo website tĩnh hay động. Trong phần này, chúng ta sẽ khám phá những kiến thức cốt lõi nhất về HTML, dựa trên phương pháp tiếp cận trực quan từ tài liệu gốc. Nội dung sẽ đi sâu vào việc định nghĩa và sử dụng các thẻ HTML cơ bản để xây dựng nên một trang web hoàn chỉnh. Một trang HTML chuẩn luôn bao gồm các thành phần chính: khai báo <!DOCTYPE>, thẻ <html> bao bọc toàn bộ, phần <head> chứa thông tin mô tả và tiêu đề, và phần <body> chứa toàn bộ nội dung hiển thị cho người dùng. Việc hiểu rõ và tuân thủ cấu trúc trang HTML này không chỉ đảm bảo trang web hoạt động ổn định trên mọi trình duyệt mà còn là yếu tố nền tảng cho việc tối ưu hóa công cụ tìm kiếm (SEO). Bên cạnh đó, các kỹ thuật định dạng văn bản, chèn hình ảnh, tạo liên kết và xây dựng bố cục bằng bảng sẽ được trình bày chi tiết, cung cấp bộ công cụ đầy đủ để người học có thể tự tay tạo ra những trang web đầu tiên.

3.1. Hướng dẫn tạo website tĩnh với các thẻ HTML cơ bản

Một hướng dẫn tạo website tĩnh luôn bắt đầu với việc sử dụng các thẻ HTML cơ bản. Tài liệu của Hồ Hoàng Triết giới thiệu một loạt các thẻ thiết yếu. Thẻ <p> dùng để định nghĩa một đoạn văn bản. Thẻ <h1> đến <h6> được dùng để tạo các cấp tiêu đề, với <h1> là quan trọng nhất. Để định dạng văn bản, có thể dùng thẻ <b> (in đậm), <i> (in nghiêng), và <u> (gạch chân). Thẻ <a> (anchor) với thuộc tính href là công cụ để tạo liên kết đến các trang khác. Để chèn hình ảnh, thẻ <img> với thuộc tính src (source) được sử dụng để chỉ định đường dẫn đến file ảnh. Ngoài ra, các thẻ ngắt dòng <br> và tạo đường kẻ ngang <hr> cũng rất hữu ích trong việc trình bày nội dung. Việc kết hợp các thẻ này cho phép xây dựng một trang web tĩnh đơn giản nhưng đầy đủ thông tin. Ví dụ, để tạo một tiêu đề và một đoạn văn bản có chứa liên kết, mã HTML sẽ có dạng: <h1>Tiêu đề trang</h1> <p>Đây là nội dung, hãy nhấn vào <a href="trang-khac.html">liên kết</a> này.</p>. Nắm vững các thẻ này là nền tảng để xây dựng những cấu trúc phức tạp hơn.

3.2. Kỹ thuật định dạng văn bản hình ảnh và liên kết trong HTML

HTML cung cấp nhiều thuộc tính để tùy chỉnh cách hiển thị của văn bản, hình ảnh và liên kết. Để thay đổi màu sắc và kích thước văn bản, thẻ <font> với các thuộc tính color và size có thể được sử dụng, dù phương pháp này hiện nay đã lỗi thời và được thay thế bằng CSS. Tuy nhiên, trong khuôn khổ học tập cơ bản, nó vẫn giúp hình dung về cách các thuộc tính hoạt động. Với hình ảnh, thẻ <img> có các thuộc tính quan trọng như width và height để điều chỉnh kích thước, alt để cung cấp văn bản thay thế (tốt cho SEO và khả năng truy cập), và align để canh lề hình ảnh so với văn bản xung quanh. Đối với liên kết, thẻ <a> có thuộc tính target="_blank" để mở liên kết trong một tab mới, một kỹ thuật rất phổ biến. Kết hợp hình ảnh và liên kết, ta có thể tạo ra một banner có thể nhấp chuột: <a href="link.html"><img src="banner.jpg" alt="Banner quảng cáo"></a>. Việc làm chủ các thuộc tính này giúp trang web trở nên sinh động và chuyên nghiệp hơn.

IV. Cách thêm tương tác vào web căn bản với JavaScript DOM

Sau khi đã có một cấu trúc vững chắc bằng HTML, bước tiếp theo trong thiết kế web căn bản là thêm vào sự sống động và tương tác thông qua JavaScript. JavaScript là ngôn ngữ lập trình phía client, cho phép thay đổi nội dung, cấu trúc và phong cách của trang web một cách linh hoạt mà không cần phải tải lại trang. Chìa khóa để làm được điều này nằm ở khái niệm JavaScript DOM (Document Object Model). DOM là một giao diện lập trình ứng dụng (API) cho các tài liệu HTML, biểu diễn cấu trúc của trang web dưới dạng một cây các đối tượng. Mỗi phần tử trên trang, từ thẻ <body>, <p>, cho đến <img>, đều là một đối tượng (node) trong cây DOM. JavaScript có thể truy cập, thay đổi, thêm hoặc xóa các node này. Hiểu và thao tác thành thạo với DOM là kỹ năng cốt lõi của lập trình front-end. Phần này sẽ giới thiệu cách JavaScript tương tác với DOM và cách xử lý các sự kiện trong JavaScript như nhấp chuột, di chuyển chuột, để tạo ra những trải nghiệm người dùng phong phú và hấp dẫn, biến một trang web tĩnh thành một ứng dụng web thực thụ.

4.1. Giới thiệu về JavaScript DOM và cách thao tác phần tử

Mô hình Đối tượng Tài liệu, hay JavaScript DOM, là cách trình duyệt biểu diễn một trang HTML. Nó coi tài liệu HTML như một cấu trúc cây, trong đó mỗi phần tử, thuộc tính và đoạn văn bản đều là một "nút" (node). JavaScript cung cấp các phương thức để truy cập và thao tác các nút này. Các phương thức phổ biến để chọn một phần tử bao gồm getElementById(), getElementsByTagName(), và querySelector(). Ví dụ, để thay đổi nội dung của một đoạn văn có id="demo", ta có thể viết: document.getElementById("demo").innerHTML = "Nội dung mới";. Ngoài việc thay đổi nội dung (innerHTML), JavaScript còn có thể thay đổi thuộc tính (ví dụ: element.src cho hình ảnh) và cả các thuộc tính CSS (element.style.color). Khả năng thao tác trực tiếp lên các phần tử HTML này mở ra vô vàn khả năng, từ việc cập nhật thông tin người dùng theo thời gian thực đến việc tạo ra các hiệu ứng hình ảnh phức tạp, là nền tảng của mọi ứng dụng web hiện đại.

4.2. Xử lý sự kiện trong JavaScript để tạo nút bấm tương tác

Tương tác người dùng là cốt lõi của một trang web động, và điều này được thực hiện thông qua việc xử lý sự kiện trong JavaScript. Sự kiện là những hành động xảy ra trên trang web, chẳng hạn như người dùng nhấp chuột vào một nút (click), di chuyển chuột qua một hình ảnh (mouseover), hoặc nhấn một phím trên bàn phím (keydown). JavaScript cho phép gán các hàm (function) để "lắng nghe" và phản hồi lại các sự kiện này. Ví dụ, để tạo một nút bấm hiển thị một thông báo khi được nhấp, ta có thể viết mã HTML: <button onclick="showAlert()">Nhấn vào tôi</button> và mã JavaScript: function showAlert() { alert('Xin chào!'); }. Theo tài liệu của Hồ Hoàng Triết, việc tạo các nút bấm phản ứng với JavaScript là một trong những bài học đầu tiên để hiểu về tính tương tác. Kỹ thuật này không chỉ giới hạn ở nút bấm mà còn có thể áp dụng cho bất kỳ phần tử nào trên trang, cho phép tạo ra các menu, form xác thực, và các thành phần giao diện phức tạp khác.

V. Phương pháp lập trình phía server với ASP và VBScript

Khi một trang web cần xử lý dữ liệu, tương tác với cơ sở dữ liệu hoặc cá nhân hóa nội dung cho người dùng, lập trình phía server trở nên cần thiết. ASP (Active Server Pages) là một công nghệ của Microsoft cho phép nhúng mã kịch bản phía máy chủ vào các trang HTML. Các đoạn mã này sẽ được thực thi trên máy chủ web IIS (Internet Information Services) trước khi trang được gửi đến trình duyệt của người dùng. Ngôn ngữ kịch bản mặc định và phổ biến nhất được sử dụng với ASP cổ điển là ngôn ngữ VBScript, một ngôn ngữ có cú pháp đơn giản, dễ học, dựa trên Visual Basic. Phần này sẽ giới thiệu những khái niệm cơ bản về ASP.NET cơ bản, cách viết các đoạn mã VBScript để xử lý các tác vụ đơn giản như hiển thị ngày giờ hệ thống, xử lý dữ liệu từ form, và thực hiện các vòng lặp, câu lệnh điều kiện. Đồng thời, một cái nhìn tổng quan về cách kết nối CSDL với ASP cũng sẽ được đề cập, mở ra khả năng xây dựng các ứng dụng web động có khả năng lưu trữ và truy xuất dữ liệu, nền tảng cho các hệ thống quản lý nội dung, diễn đàn, hay các trang thương mại điện tử.

5.1. Giới thiệu ASP.NET cơ bản và vai trò của máy chủ web IIS

ASP, và sau này là ASP.NET cơ bản, là một framework phát triển web của Microsoft. Một trang ASP không phải là file HTML tĩnh mà là một chương trình được thực thi trên máy chủ. Mã kịch bản trong trang ASP được bao bọc bởi các dấu <% ... %>. Khi một người dùng yêu cầu một trang .asp, máy chủ web IIS sẽ xử lý file này. IIS tìm và thực thi tất cả các đoạn mã kịch bản bên trong các dấu <% %>. Kết quả của việc thực thi này (có thể là văn bản, số liệu từ cơ sở dữ liệu, hoặc HTML được tạo ra động) sẽ được chèn vào vị trí tương ứng trong trang. Cuối cùng, IIS gửi đi một trang HTML thuần túy, hoàn chỉnh về phía trình duyệt của người dùng. Người dùng cuối không bao giờ thấy được mã nguồn ASP, họ chỉ nhận được kết quả cuối cùng. Mô hình này đảm bảo tính bảo mật cho logic nghiệp vụ và thông tin kết nối cơ sở dữ liệu, vì tất cả chúng đều nằm lại trên máy chủ.

5.2. Cú pháp VBScript và cách hiển thị dữ liệu động cơ bản

Ngôn ngữ được sử dụng chủ yếu trong ASP cổ điển là ngôn ngữ VBScript. Cú pháp của VBScript khá đơn giản. Để khai báo một biến, ta dùng từ khóa Dim. Các cấu trúc điều khiển quen thuộc như If...Then...Else và các vòng lặp For...Next, Do...While đều được hỗ trợ. Một trong những ứng dụng đầu tiên và đơn giản nhất là hiển thị thông tin động. Ví dụ, để hiển thị ngày giờ hiện tại của máy chủ, ta có thể viết trong file ASP như sau: Hôm nay là: <% =Now() %>. Khi IIS xử lý trang này, hàm Now() của VBScript sẽ được gọi để lấy ngày giờ hệ thống, và chuỗi kết quả sẽ được chèn vào trang HTML trước khi gửi đi. Tương tự, ta có thể dùng biến để lưu trữ và hiển thị thông tin: <% Dim ten ten = "Triet" Response.Write("Xin chào, " & ten) %>. Response.Write là lệnh dùng để ghi chuỗi ra trang kết quả. Những cú pháp cơ bản này là nền tảng để xây dựng các logic phức tạp hơn.

5.3. Tổng quan về kết nối CSDL với ASP cho ứng dụng web

Sức mạnh thực sự của lập trình phía server nằm ở khả năng tương tác với cơ sở dữ liệu. Việc kết nối CSDL với ASP cho phép các ứng dụng web lưu trữ, truy xuất, cập nhật và xóa dữ liệu một cách có hệ thống. Trong ASP, quá trình này thường được thực hiện thông qua ADO (ActiveX Data Objects). ADO cung cấp một bộ các đối tượng để làm việc với dữ liệu. Đối tượng Connection được dùng để thiết lập kết nối đến một cơ sở dữ liệu (ví dụ: Microsoft Access, SQL Server). Đối tượng Recordset được dùng để chứa kết quả trả về từ một câu lệnh truy vấn SQL. Một quy trình cơ bản bao gồm: tạo một đối tượng Connection, mở kết nối bằng một chuỗi kết nối (connection string), tạo một đối tượng Recordset, thực thi một câu lệnh SQL để điền dữ liệu vào Recordset, sau đó duyệt qua Recordset để hiển thị dữ liệu lên trang. Mặc dù chi tiết kỹ thuật phức tạp, việc hiểu được quy trình tổng quan này là bước đầu tiên để xây dựng các ứng dụng web động, dựa trên dữ liệu.

VI. Tổng kết khóa học thiết kế web căn bản hướng đi tiếp theo

Phần đầu tiên của series thiết kế web căn bản đã cung cấp một cái nhìn toàn diện về ba trụ cột chính của việc phát triển web: HTML, JavaScript, và ASP. Bằng cách tuân thủ một lộ trình học tập có cấu trúc, bắt đầu từ việc xây dựng "bộ xương" với HTML, thêm vào "da thịt và cơ bắp" với JavaScript, và cuối cùng là trang bị "bộ não" với ASP, người học có thể xây dựng một nền tảng kiến thức vững chắc. Việc nắm rõ vai trò của từng công nghệ, từ việc tạo ra cấu trúc trang HTML tĩnh cho đến việc xử lý sự kiện trong JavaScript và thực hiện lập trình phía server, là yếu tố quyết định để có thể tiến xa hơn. Kiến thức được trình bày trong phần này là bước đệm không thể thiếu, chuẩn bị cho những chủ đề nâng cao hơn như CSS để tạo giao diện chuyên nghiệp, các framework JavaScript hiện đại, và các hệ quản trị cơ sở dữ liệu mạnh mẽ. Hoàn thành phần này đồng nghĩa với việc đã sẵn sàng để tiếp tục khám phá các khóa học lập trình web chuyên sâu, mở ra nhiều cơ hội nghề nghiệp trong ngành công nghệ.

6.1. Tóm tắt kiến thức cốt lõi HTML JavaScript và ASP

Kiến thức cốt lõi được đúc kết từ phần này bao gồm ba mảng chính. Thứ nhất, HTML là ngôn ngữ đánh dấu dùng để định nghĩa cấu trúc và ngữ nghĩa của nội dung web. Việc sử dụng thành thạo các thẻ HTML cơ bản để tạo tiêu đề, đoạn văn, liên kết và hình ảnh là kỹ năng nền tảng. Thứ hai, JavaScript là ngôn ngữ lập trình phía client, mang lại tính tương tác cho trang web bằng cách thao tác trên JavaScript DOM và xử lý các sự kiện của người dùng. Nó cho phép thay đổi nội dung trang một cách linh hoạt mà không cần tải lại. Cuối cùng, ASP là công nghệ phía máy chủ, sử dụng ngôn ngữ VBScript để xử lý logic, tương tác với cơ sở dữ liệu và tạo ra nội dung động. Sự kết hợp của ba công nghệ này tạo thành một mô hình phát triển web hoàn chỉnh, từ giao diện người dùng đến xử lý nghiệp vụ ở hậu trường.

6.2. Lộ trình phát triển từ khóa học lập trình web căn bản

Sau khi hoàn thành khóa học lập trình web căn bản này, có nhiều hướng đi để phát triển kỹ năng. Đối với mảng Front-end, bước tiếp theo là học sâu về CSS để có thể tùy chỉnh giao diện một cách chuyên nghiệp, bao gồm các khái niệm như Flexbox, Grid, và Responsive Design để trang web hiển thị tốt trên mọi thiết bị. Sau đó, việc tìm hiểu các thư viện và framework JavaScript như React, Angular, hoặc Vue.js sẽ giúp xây dựng các ứng dụng đơn trang (SPA) phức tạp và hiệu quả. Đối với mảng Back-end, người học có thể tiếp tục với ASP.NET Core, một phiên bản hiện đại, mã nguồn mở và đa nền tảng của ASP.NET. Ngoài ra, việc học thêm về các hệ quản trị cơ sở dữ liệu như SQL Server, MySQL, và các ngôn ngữ lập trình phía server khác như PHP, Python (Django/Flask) hay Node.js sẽ mở rộng đáng kể bộ công cụ và cơ hội nghề nghiệp trong lĩnh vực phát triển web.

Trích đoạn nội dung tài liệu

HỒ HOÀNG TRIẾT CĂN BẢN THIẾT KẾ WEB HTML JAVASCRIPT ASP NHA XUAT BAN THONG KE Căn bản thiết kế Web Mục Lục MỤC LỤC 5 PHAN I HTML HYPER TEXT MARKUP LANGUAGE.9 BAT ĐẦU VỚI HTML.111 naxee 9 Bạn cần có gì để bắt đầu uới HTML. SỬ DỤNG CÁC PHƯƠNG TIỆN. Su dung Notepad v4 trinh duyét web. CAN BAN DINH DANG HTML Giới thigu cde tag HTML va dinh dang co ban cua mét trang HTML Cách dùng các tag HTML để uận dụng uới uăn bản Sử dụng các đề mục, các đoạn uăn bản, uà ngắt dòng Cách thay đổi kích thước uà mòu sắc uăn bản.

Cách dùng các ky tự đặc biệt trong HTML. Cách liên kết uới các trang khác trong HTML Cách đặt các hình ảnh uào trang uueb của bạn. Thử dùng một số tag uăn bản khúc. Sử dụng ghỉ chú (comment) trong code html.

Cách thêm danh sách (list) uào trang web cua ban. Cách dùng các thuộc tính của tag BODY để làm đẹp trang web. 42 Cách thay đổi màu mặc nhiên của phông chữ. Cách thay đổi màu của link trong trang web cia ban.

Thêm hoặc thay đổi màu nền của trang web Cách cho một hình ảnh làm hình ảnh nên của trang ueb'.46 Cách định lại bích thước của hình ảnh. nàấu tecoi87 Làm thế nòo để link dùng một hình ảnh.38 Cách xuống dòng tự động (urap) uăn bản bao guanh- “hình ảnh. Một thuộc tính (alterndtiue - dlt) khác của hình ảnh Nhảy đến đầu trang, cuối trang hay một uị trí bất kỳ. Cách để tạo một email link Các mẹo khác uới email linh.

Căn bản thiết kế Web Cách thêm các form uòo trang web. Cách để chơi nhạc uà nghe âm thanh. é Dang META tag dé cdc search engine théy trang web cia ban. Cách tự động chuyển hướng người sử dụng.

Sử dụng đường gạch ngang <HR> Sử dụng các phông chữ khác nhau trên trang tueb. Cách tạo một link mở một cửa sổ trình duyệt mới. Cách cho một ảnh nên cố định uào trang tu©b.: Nghi Cách thêm một marquee (dòng chữ chạy) uào thang Meh .ð0 BẢNG TRONG HTML Cách cho mét bang (table) véo trang web. Cách dùng các thuộc tính khác của bảng Đặt các bảng trong một bảng lớn hơn.

Canh lè các bảng uới một ảnh ẩn. Dùng các bảng lông nhau thay 0ì dùng mẹo hình ảnh. SU DUNG CAC FRAME. Cách thém cdc khung (frame) vao trang web.

Cách liên kết giữa các frame, thay đổi thuộc tính của frame, VG SU dung Ídg nOƒTGIn68.àccằccceeeerirrierrrree 107 Làm cho các thanh cuộn oà các đường uiên biến mất Cách chèn frame nội (tnline) trong trang HTML. Cách cho một image map ào trang tueb. oc Cách bỏ các đường gạch dưới của các link. PHAN II JAVASCRIPT.050 -CÂN CÓ GÌ ĐỀ SỬ DỤNG JAVASCRIPT.

PHAN CAN BẢN JAVASCRIPT. Cac căn bản để chèn JavaScript vao trang W Cách thêm JauaScript đầu tiên uào trang ueb. Cách làm một nút bấm (button) phản ting vdi JavaScript 122 Tạo các nút tương tác uới hi8Ory. «sec +cccsceee 126 Thông báo, cảnh báo Thêm các biếm uà các hàm uùo trong các seript Các toán tử logic uà các câu lệnh có điêu kiện Căn bản thiết kế Web JauaScript Prompts.

Các hộp thoại xác nhận. Lấy thông tin trình duyệt. Chuyển hướng - Redirection. Cách dùng JavaScript dé mở một cửa sổ mới Làm thế nào để gọi hàm mù không dùng các nút bấm PHAN JAVASCRIPT NANG CAO.

g8 Sử dụng mảng trồng JavaScript. Sử dụng mảng liên hợp trong JavaScript Tỏi trước các hình ảnh. Thay đổi hình ảnh khi di chuyển chuột qua nó. Làm hiệu ứng uới nhiều hình ảnh.

Tạo hiệu ứng cho một ảnh khác. Kiểm tra các đối tượng thay uì kiểm tra trình duyệt FRAME VÀ JAVASCRIPT Két hop ding JavaScript va Frame Thay đổi hai Frame cùng lúc. Soạn thảo HTML cho frame bên trị LÀM VIỆC VỚI FORM Cách xử lý các phân tử của form. Dùng các hộp danh sách để đi đến trang khác.

Dùng hộp danh sách không cân nhấn nút. Sử dụng các hộp danh sách uới các ffame. Tạo các hình ảnh “nhấn được” giống như button của firm 2 Céch lam cho mét file JavaScript lam viée trên nhiễu trang html. 210 ĐỐI TƯỢNG NGÀY THANG (DATE OBJECT).

212 Sw dung date object uà các phương thức (method) của nó để tạo một đông hô.ccccccee “ Thêm một uòi tính năng mới cho đông hồ. ĐỐI TƯỢNG TOAN HOC (MATH OBJECT). Các phương thức hữu dụng cho uiệc tính toán Lấy các số uò các chuỗi ngẫu nhiên Căn bản thiết kế Web XU LÝ CHUỖI Sử dụng charAt va indexOf. Sử dụng phương thức split.

PHAN III ASP ACTIVE SERVER PAGES. 234 Active Server Pages 16 gi? .iccessssscssssssssssssestessssssssesssesaeeneens 234 Ban cé thé lam gi véi Active Server Pages?. Trang ASP trông như thế nào?. Các seruer-side script trông như thế nao? Hiển thị ngày giờ hiện hành Hiển thị uăn bản Sử dụng các hàm ngày tháng, thời gian uò uăn bản.

Sử dụng biến, uà form trong Actiue Seruer Pages.Next Do While.End Select Viết các thủ tục. Include/ virtual Phương pháp S Phương pháp Applicdtio Đối tượng Dictionary Cookies _-- Mở file va doc nội dung từ một file uăn bản. ghi uào file uăn, bẳn,.asa Các hàm vé ede thi. : Căn bản thiết kế Web Phần I HTML, Hyper Text Markup Language Bắt đầu với HTML Bạn cần có gì để bắt déu véi HTML Để bắt đầu dùng HTML, bạn cân có một số thứ.

Sau đây là danh sách các phần cân có: 1. Cần có một trình soạn thảo văn bản. Nếu sử dụng hệ điều hành Windows, Nofepad là đủ. Cần có một trình duyệt.

Nếu có khả năng, dùng Netscape Navigator hay Microsoft Explorer phién ban mới nhat.- để hiển thị các trang HTML. Sử dụng các phương tiện Sw dung Notepad va trinh duyệt ueb. Trước khi bắt đầu dùng HTML (Hyper Text Markup Language), bạn cần thân thiện với các phần mềm bạn sẽ dùng. Bây giờ Căn bản thiết kế Web nhập vào các dòng code sau vào Notepad.

Chung ta sé dùng nó với trình duyệt sau này. <HTML> <HEAD> % <TITLE>Test Page</TITLE> </HEAD> <BODY> - : Hi there, you have just written your first web page! </BODY> : </HTML> Sau khi nhập vào xong, chọn menu “File” va nhan “Save As”. Thao tác này sẽ hỏi bạn tên bạn đặt cho file. Nhập vào /es¿.

Tại vị trí cuối của hộp thoại bạn thấy mét hép danh sdch “Save file as Type” hay “Save as Type”. Giá trị m&c nhién 1a. Ban chon All File (*. C6 thé bạn thấy tương tự nhự hình bên dưới: , Duley eos x Cae co 10 Căn bản thiết kế Web Bạn có thể chọn ổ đĩa và thư mục bạn muốn lưu trữ vào (vi du: c:\myfiles), va nhén “Save”.

Ban lam tương tự như trên cho các ñle HTML bạn sẽ tạo sau này. , Trong trường hợp trong hộp thoại khéng cé All Fiies(*.*), hệ điêu hành lưu thành ¿es¿. Đề tránh trường hợp này, bạn nên đặt tên file trong dấu ngoặc kép “test.htm”, như sau: Mỹ Recent rnd File name: | test.him'| = _ Save Save as type: [Tea Documents [*.txt} =] Cancel Encoding: JANSI x Bây giờ bạn sẽ dùng trình duyệt web để xem.bạn vừa tạo. Chạy trình duyệt.

Nếu trình duyệt hồi kết nối vào Internet, nhan “Cancel” va ban sé thay mét trang trắng. Hay cũng có thể thấy một trang thông báo lỗi trình duyệt không thể kết nối vào http:⁄/somepage.btm hoặc cái gi đó ⁄ 11 Căn bản thiết kế Web tương tự. Bạn có thể nhấn OK để nhận được một trang trắng. Trong hộp nhập dia chi, nhập vào đường dẫn của file html, vi du: e:VnypoagesVtesthim.

Sau đó nhấn ENTER. Trinh duyệt sẽ hiển thị trang HTML này lên. Một cách khác là dùng hộp thoại Open thay vì nhập vao dia thi. Chon menu “File” trén trinh duyét, chon “Open”.

Hộp thoại Open mở ra, bạn tìm và chọn file test.htm và nhấn Open. Hình bên dưới cho thấy mục nông trong menu File của Internet Explorer: Print. Ctrip a Le Opens 3 document in this window, 12 Căn bản thiết kế Web Sau khi chọn mục Open: xà) Type the Intemet address of a document or folder, and Internet Explorer will open it for you. Sen: [B} c:imyfiles\test.htm = IT Open as Web Folder Sau khi mé file html nay trén trinh duyét, ban séẽ thấy như sau: 3 Test Page - Microsoft Internet Explorer File Edt View Favortes Tools Help 2“ - Ô-bì 3 | Osea Address |@) C:\myfilestest.

Một tag (thẻ) luôn luôn bắt đầu với dấu nhỏ hơn, như sau: <. Các tag kết thúc với dấu lớn hơn, >. Một ví dụ về tag dùng để gạch dưới văn bản, <U>. Bạn đặt tag này trước dòng văn bản bạn muốn gạch đưới.

Tag này gọi là tag mở, dùng nó để bắt đầu mộf hành động mà bạn muốn thực hiện. Để kết thúc việc gạch dưới văn bản, bạn phải dùng một tag đóng. Một tag đóng thường là giống với tag mở, nhưng có dấu sổ đứng trước tên lệnh;ví đự; </U>,; Do đó, nếu bạn muốn gạch dưới cụm từ “HTML Rules!”, bạn sẽ viết như sau trong trình soạn thảo văn bản: <U>HTML Rules!</U> : Két quả xuất hiện trên trình duyệt như sau: Ble Edt View Favorkes Tools Help = Owe =][yma > |a Adress |B) c:inyfiestestinm EJGo |unks » ~ HIML Rules! li —LLT N2 14 Căn bản thiết kế Web Không phải tất cả các tag đều bắt buộc có một tag đóng. Ví dụ như là tag hình ảnh, dùng để đặt một hình ảnh lên trang HTML.

Nó giống như sau: <IMG SRC=“myimage. Một số ví dụ khác như là tag xuống dòng: <BR>, đường ngang: <HR>, và tag đoạn van ban: <P>. Bạn không cân phải viét hoa cdc tag. Tag <P> va <p> là như nhau.

Và bạn có thể dùng bao nhiêu khoảng trống cũng được. Ví dự: <U> Underline Me! </U> tương đương với: <U> Underline Me! </U> và cũng tương đương với: <U> Underline Me! </U> Một ñle HTML cơ bản sẽ có định dạng như bên dưới: <HTML> che <HEAD> <TITLE>I Love HTML</TITLE> </HEAD> <BODY> Everything displayed on your page will be in here. ` </BODY> </HTML> Cái chúng ta thấy đầu tiên là tag <HTML>. Day là đấu hiệu bắt đầu một 8le HTML.

Tag đóng, </HTM+>, nằm ở vị trí cuối của le HTML. Bạn cũng có thể:đöán ra đây là 1B Căn bản thiết kế Web dấu hiệu kết thúc tài liệu HTML (HTML document). Moi thứ còn lại (các tag, văn bản. ) sẽ nằm giữa hai tag này.

Tag tiếp theo là tag <HEAD>. Nó mở ra một phần để bạn đặt tựa để của trang web, sử dụng các từ khoá, và thêm các thông tin mô tả của trang web. Phần này kết thúc bằng tag </HEAD>. Trong ví dụ trên, phần HEAD chỉ chứa TITLE.

Tag <TITLE> cho phép bạn tạo tựa để cho trang Web. Các tựa để này chỉ được sử dụng cho các động cơ tìm kiếm, bookmark, và tựa để được hiển thị trên thanh tiêu đẻ của cửa sổ trình duyệt. Để kết thúc tựa dé, ding tag </TITLE>. Như trong vi du trên, tựa để là “I Love HTML”.