Chương 1. Giúp sinh viên sử dụng được ngôn ngữ CSS để định dạng trang Web. Chương 3 - Ngôn ngữ JAVASCRIPT: Trình bày một số bài tập có sử dụng ngôn ngữ Javascript để điều khiển một số hành vi của trang. Chương 4 - Ngôn ngữ ASP.NET: Hệ thống các bài tập tổng hợp các trang trong quá trình thiết kế trên HTML được chuyển qua ASP.NET và phát triển thêm một số trang để hoàn thiện một website cơ bản.
Mỗi phần bài tập đi theo trình tự từ thiết kế trang tổng thể tới trang chi tiết. Giúp sinh viên nắm được quy trình thiết kế và lập trình một Website trên ngôn ngữ ASP. Trong phạm vi hạn hẹp của tài liệu này không thể đề cập được tất cả vấn đề trong lĩnh vực Thiết kế và Lập trình Web đòi hỏi. Nhóm tác giả rất mong muốn nhận được sự góp ý của độc giả để tài liệu được hoàn thiện tốt hơn.
Mùa thu 2017 Nhóm tác giả 4 C N 1. Mục tiêu Thiết kế được giao diện trang Web với các thẻ HTML. êu cầu chung Tạo cấu trúc thư mục lưu trữ Web như sau: Mỗi thư mục lưu định dạng file tương ứng. Hình ảnh sử dụng để làm các bài tập được cung cấp sẵn tại địa chỉ https://tinyurl.com/TKvaLTWeb Sử dụng một trong các phần mềm thiết kế Website (Notepad, Dreamweaver, Sublime text, Atom, …).
Các bài tập được lưu vào thư mục BaitapHTML. ài tập thực hành Bài tập phần này sẽ kết hợp với các định dạng CSS (phần hướng dẫn trong Chương 2) để thực hiện các trang: Trangchu.html: Được tách ra thành từng phần riêng (mỗi phần là một bài tập trong chương này) và được kết hợp lại trong Bài tập 10.html: Tương ứng ở các bài tập 1, 4, 5, 6. Các trang này khi hoàn thiện sẽ được hiển thị tại vùng Sanpham (Hình trên) để tạo thành một Website với các trang có bố cục thống nhất. Thiết kế trang Gioithieu.html 7 Ý nghĩa sử dụng: Là trang giới thiệu công ty chủ quản Website.
êu cầu: Đoạn văn bản 1: Size 6, in đậm, canh lề giữa Khi click chuột vào www.com sẽ liên kết đến trang chủ của website này, khi click chuột vào hotro@abc.com sẽ liên kết cho gửi email tới địa chỉ này, khi click chuột vào Liên hệ sẽ liên kết tới trang liên hệ (Lienhe. Đoạn văn bản “Nguyên tắc hoạt động”: Size 5, in đậm, màu đỏ. Đoạn văn bản “Định hướng kinh doanh: Size 5, in đậm, màu xanh. Dùng thẻ ul, ol để tạo danh sách có thứ tự và không có thứ tự cho các nội dung văn bản.
ướng dẫn: Tạo file và lưu với tên Gioithieu.html Tạo các cặp thẻ quy định và phần của trang web: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nhà sách ABC</title> </head> <body> </body> </html> Tạo nội dung cho trang (trong cặp thẻ body): Dùng thẻ h2 với thuộc tính align="center" (hoặc thẻ p kết hợp với thẻ font với thuộc tính size (quy định cỡ chữ) và thẻ b (in đậm)) cho đoạn văn bản 1: <h2 align="center">GIỚI THIỆU CÔNG TY CỔ PHẦN THƢƠNG MẠI VÀ DỊCH VỤ SÁCH ABC</h2> Dùng thẻ p kết hợp thẻ b và thẻ a để định dạng và tạo liên kết cho đoạn 2: <p><b>Cty Cổ phần Thƣơng Mại và Dịch vụ sách ABC</b> là một trong số ít công ty Thƣơng mại điện tử đầu tiên tại Việt Nam bắt đầu với Website <a href="www.com</a> từ tháng 12/2005.</p> Tương tự dùng thẻ p kết hợp thẻ b và font với thuộc tính color để tạo các đoạn “Nguyên tắc hoạt động” và “Định hướng kinh doanh: 8 <p><b><font color="red"><b>NGUYÊN TẮC HOẠT ĐỘNG</font></b></p> <p><b><font color="blue">ĐỊNH HƢỚNG KINH DOANH</font></b></p> Dùng thẻ ul và ol để tạo các danh sách: <ul> <li>Tuyệt đối tôn trọng bản quyền và luật xuất bản</li> <li>Cam kết tạo ra những cuốn sách có chất lƣợng, có giá trị, luôn bắt kịp xu thế thời đại</li> <li>Lấy độc giả làm trung tâm</li> <li>Gia tăng lợi ích cho các đối tác</li> <li>Khơi dậy và phát huy khả năng sáng tạo của mỗi cá nhân</li> </ul> <ol> <li>Mua bản quyền, dịch và xuất bản các ấn phẩm từ tiếng nƣớc ngoài ra tiếng Việt và ngƣợc lại với các tủ sách: <ul type="disc"> <li><i>V- Biz:</i> Những cuốn sách cung cấp những cách tƣ duy, kinh nghiệm, kĩ năng mang tính ứng dụng cao cho các nhà lãnh đạo, những ngƣời hoạt động trong lĩnh vực kinh doanh, nhân viên công sở,… </li> <li><i>V-Buddism:</i> Tủ sách Phật pháp ứng dụng của Thaihabooks luôn nhận đƣợc sự quan tâm, tin tƣởng của Phật tử và bạn đọc. Các cuốn sách mang lại những triết lý sâu sắc của nhà Phật nhƣng vẫn gắn liên với cuộc sống hàng ngày, giúp mỗi ngƣời sống hạnh phúc và có ý nghĩa hơn.</li> <li><i>V-Parents:</i> Những cuốn sách giúp các bậc cha mẹ nuôi dạy con cái tốt hơn, thấu hiểu con hơn dựa trên sự tƣ vấn của những chuyên gia hàng đầu Việt Nam và thế giới.</li> <li><i>V-Teen:</i> Những cuốn sách giúp tháo gỡ vƣớng mắc, khơi dậy tiềm năng, định hƣớng nghề nghiệp cho tuổi mới lớn.</li> <li><i>V-Smile:</i> Bao gồm những các cuốn sách về chủ đề văn hoá, văn học, giáo dục, lịch sử, du ký… làm phong phú thêm đời sống tinh thần, bổ sung những kiến thức và chuyên sâu về nhiều lĩnh vực trong cuộc sống cho bạn đọc. </li> </ul> </li> <li>Cung cấp các dịch vụ liên quan đến bản quyền và xuất bản</li> 9 <li>Cung cấp sách, báo,tạp chí, và các ấn phẩm khác đến tay độc giả</li> <li>In ấn và các dịch vụ liên quan đến in ấn</li> <li>Tổ chức các sự kiện liên quan đến sách, báo chí và xuất bản</li> </ol> Dùng thẻ h4 (hoặc thẻ p kết hợp với thẻ font quy định kích thước chữ), thẻ i (in nghiêng), thẻ a (tạo liên kết) cho đoạn văn bản cuối: <h4><i>Trong trƣờng hợp quý khách có bất kỳ nhu cầu hay câu hỏi nào về sách, đừng ngần ngại gởi email về cho chúng tôi theo địa chỉ: <a href="mailto:hotro@abc.com"> hotro@abc.com </a> hoặc gởi để lại tin nhắn tại trang <a href="Lienhe.html"> Liên hệ</a></i></h4> ài tập 2. Thiết kế trang Left.html Ý nghĩa sử dụng: Là phần liên kết tới các trang khác trong Website và sẽ hiển thị ở phần bên trái của các trang.
êu cầu: Các mục “Sách theo chủ đề” và “Sách theo nhà xuất bản”: Size 6, in đậm. Tạo danh sách Sách theo chủ đề và Sách theo nhà xuất bản. Khi chọn các mục trong hai danh sách sẽ có liên kết (thiết lập liên kết rỗng). 10 ướng dẫn: Tạo file và lưu với tên Left.
Sử dụng thuộc tính bgcolor="màu" trong thẻ body để thiết lập màu nền cho trang. Dùng thẻ p và b để tạo nội dung “Sách theo chủ đề” và “Sách theo nhà xuất bản”. Dùng thẻ ul với thuộc tính type="square" để quy định bullet cho các mục trong danh sách, dùng thẻ li và a với thuộc tính href="#" để tạo các mục có liên kết trong danh sách: <ul type="square"> <li><a href="#">Ngoại ngữ</a></li>. </ul> ài tập 3.
Thiết kế trang Sanpham.html Ý nghĩa sử dụng: Là trang dùng để liệt kê các sản phẩm (tin tức,…). êu cầu: Dùng thẻ div để tạo khối chứa nội dung. Toàn bộ nội dung trang được canh lề giữa. Mục “Giáo trình Tin học cơ bản”: Size 6, in đậm, màu xanh.
Khi click vào mục này sẽ liên kết đến trang Chitietsanpham.html ở Bài tập 4 (Chương 1). 11 Mục “26,000 VNĐ”: Size 5, màu đỏ. Chèn hình ảnh ở trong thư mục Images ướng dẫn: Tạo file và lưu với tên Sanpham. Sử dụng thuộc tính bgcolor="màu" trong thẻ body để thiết lập màu nền cho trang.
Tạo thẻ div với thuộc tính align="center" để canh giữa cho các nội dung. Dùng thẻ p, thẻ b và thẻ font với thuộc tính size="6" color="blue" để tạo nội dung “Giáo trình tin học căn bản” Dùng thẻ img để chèn hình sách và nút chọn mua. Dùng thẻ p để tạo nội dung “Đơn giá”, thêm thẻ font với thuộc tính size="5" color="red" cho nội dung “26,000 VNĐ”. Thiết kế trang Chitietsanpham.html 12 Ý nghĩa sử dụng: Là trang hiển thị chi tiết sản phẩm (tin tức,…) tương ứng được chọn ở trang sản phẩm.
êu cầu: Dùng thẻ table để cấu trúc trang. ướng dẫn: Tạo file và lưu với tên Chitietsanpham. Tạo thẻ table với các thuộc tính: width: 500 border: 1 cellspacing: 0 rows: 10 columns: 2 Hàng đầu tiên (thẻ tr đầu tiên) dùng một thẻ td với thuộc tính colspan="2" để gộp hai ô làm một các thuộc tính align và bgcolor để canh lề và quy định màu nền. Thẻ tr thứ hai có hai thẻ td, thẻ td đầu dùng thuộc tính rowspan="6" để mở rộng ô xuống phía dưới 6 hàng.
5 thẻ tr tiếp theo chỉ còn lại một thẻ td. 3 thẻ tr cuối mỗi thẻ có một thẻ td với thuộc colspan="2". Sử dụng thẻ img để chèn hình, thẻ i để in nghiêng, thẻ b để in đậm, thẻ font với thuộc tính color để đổi màu cho một số nội dung văn bản. Thiết kế trang Dangnhap.html 13 Ý nghĩa sử dụng: Dùng để tạo các trang đăng nhập cho Website.
êu cầu: Tạo trang với thẻ form cho người dùng nhập các thông tin như tên đăng nhập và mật khẩu và nhấn nút Đăng nhập để gửi thông tin. Click mục Đổi mật khẩu sẽ liên kết tới trang Doimatkhau. ướng dẫn: Tạo file và lưu với tên Dangnhap. Tạo thẻ form với các thuộc tính action="#" name="dangnhap" method="post".
Dùng thẻ table cấu trúc các thành phần trong form như sau: ĐĂN N ẬP Tên đăng nhập: Mật khẩu: Đăng nhập Đổi mật khẩu Dùng các thẻ input với thuộc tính: type="text" cho ô nhập liệu Tên đăng nhập type="password" cho ô nhập liệu Mật khẩu type="submit" cho nút Đăng nhập Dùng thẻ a với thuộc tính href="Doimatkhau.html" cho mục “Đổi mật khẩu” 14 ài tập 6. Thiết kế trang Dangky.html Ý nghĩa sử dụng: Tạo trang cho phép người dùng đăng ký thông tin để cấp quyền sử dụng một số chức năng trong website. êu cầu: Tạo form chứa nội dung trang để khi người dùng click nút Đăng ký sẽ gửi thông tin trong form đi xử lý và click nút Hủy sẽ xóa hết thông tin trong form. Thông tin được gom thành hai nhóm là Thông tin cá nhân và Thông tin đăng nhập.
Ô ngày sinh cho phép chọn giá trị từ 01 tới 31, ô tháng sinh cho phép chọn giá trị từ 01 tới 12. Giới tính cho phép chọn Nam hoặc Nữ. Email yêu cầu phải nhập đúng định dạng email. Tên đăng nhập, mật khẩu và nhập lại mật khẩu yêu cầu không được rỗng.
ướng dẫn: Tạo file và lưu với tên Dangky. 15 Tạo thẻ form với các thuộc tính: action="#" name="dangky" method="post" Dùng thẻ fieldset kết hợp thẻ legend để tạo đường viền và văn bản bao các nhóm. <fieldset> <legend><b>Thông tin cá nhân</b></legend> .
