Bài tập HTML và CSS

TRUNG TÂM TIN HỌC - ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP HCM 227 Nguyễn Văn Cừ – Quận – Tp Hồ Chí Minh Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn BÀI TẬP CHUYÊN ĐỀ NGÔN NGỮ HTML Và CSS CuuDuongThanCong.com https://fb.com/tailieudientucntt Bài tập Bài ™ Ý nghĩa: Tạo trang web có nội dung tập Sử dụng tag ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Trang web − Tiêu đề cửa sổ: Sử dụng tag Nội dung trang web − Sử dụng tag để tạo trang web trên, đó: ƒ Dòng đầu tiên: Canh ƒ Đọan văn ”Trung Tâm ngôn ngữ HTML”: Canh Chuyên đề HTML CSS CuuDuongThanCong.com 1/19 https://fb.com/tailieudientucntt Bài tập Bài ™ Ý nghĩa: Tạo trang web có nội dung tập Sử dụng tag bản, có tơ màu cho đoạn văn ™ u cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu Trang web − Tiêu đề cửa sổ: Sử dụng tag Nội dung trang web Sử dụng tag thuộc tính tag để định dạng: − Dòng dầu tiên: canh giữa, màu xanh mạ #006600 − Dòng 2: màu xanh dương #0000FF − Dòng - tựa đề ”MẸ!”: chữ đậm có màu hồng đậm màu hồng nhạt #FF3399, #FECFFD − đọan thơ: in nghiêng, có màu chữ khác − Mỗi đọan cách thước ngang − Toàn thơ có màu màu vàng nhạt Chuyên đề HTML CSS CuuDuongThanCong.com #FFFFCC 2/19 https://fb.com/tailieudientucntt Bài tập Bài 3: Trang Định dạng trang web ™ Ý nghĩa: Tạo trang web có nội dung viết Vạn Lý Trường Thành, có định dạng trang web ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu Trang web − Tiêu đề cửa sổ: Định dạng trang web Nội dung trang web Sử dụng tag thuộc tính tag để định dạng trang web: − Định dạng chung: + Nền: Màu nâu đất #A06D21 + Chữ: Màu trắng #FFFFFF + Hình nền: Đặt trang không di chuyển cuộn trang − Dòng dầu tiên: Canh giữa, màu vàng đậm Chuyên đề HTML CSS CuuDuongThanCong.com #FFCC00 3/19 https://fb.com/tailieudientucntt Bài tập Bài 4: Trang Định dạng trang web (bài làm thêm) ™ Ý nghĩa: Tạo trang web có nội dung viết Lâu đài gỗ Pattaya, có định dạng trang web ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu Trang web − Tiêu đề cửa sổ: Định dạng trang web Nội dung trang web Sử dụng tag thuộc tính tag để định dạng trang web: − Định dạng chung: + Nền: Tơ đầy trang hình ảnh + Chữ: Màu xanh ve chai đậm #008888 − Dòng dầu tiên: Khổ chữ lớn canh − Đọan văn thứ hai: màu xanh ve chai, chữ trắng in đậm nghiêng #339999,#FFFFFF Bài Chuyên đề HTML CSS CuuDuongThanCong.com 4/19 https://fb.com/tailieudientucntt Bài tập ™ Ý nghĩa: Tạo trang web có nội dung định dạng theo nhiều hình thức ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu Trang web − Tiêu đề cửa sổ: Định dạng văn Nội dung trang web Sử dụng tag định dạng văn để tạo trang web: − Định dạng hình − Dạng cơng thức hóa học biểu thức phương trình bậc hai, có chữ màu đỏ #FF0000 − Đoạn code vòng lặp For: chữ màu xanh dương đậm, màu xám, có định dạng canh lề #0000CC, #CCCCCC Bài ™ Ý nghĩa: Tạo trang web có nội dung viết Thượng Hải, định dạng theo nhiều hình thức ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Trang web − Tiêu đề cửa sổ: Định dạng văn Nội dung trang web Sử dụng tag định dạng văn thuộc tính định dạng để tạo trang web: Chuyên đề HTML CSS CuuDuongThanCong.com 5/19 https://fb.com/tailieudientucntt Bài tập − Định dạng hình − Đọan văn đầu: canh lề trái − Dòng Bến Thượng Hải: canh lề phải, size=20px − Đọan văn cuối: canh lề phải Bài ™ Ý nghĩa: Tạo trang web có nội dung thơng tin Cơng ty Hoa tươi Nhân Ái, định dạng theo nhiều hình thức ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Trang web − Tiêu đề cửa sổ: Ký tự đặc biệt, chèn hình ảnh, tạo danh sách liên kết Nội dung trang web Sử dụng tag định dạng thuộc tính định dạng để tạo trang web: − Định dạng hình − Khi nhấn chuột vào dòng ”Trung Tâm Tin Học ” : Mở trang web TTTH – http://www.csc.hcmuns.edu.vn Bài 8: Trang Tạo bảng Chuyên đề HTML CSS CuuDuongThanCong.com 6/19 https://fb.com/tailieudientucntt Bài tập ™ Ý nghĩa: Tạo trang web có nội dung danh sách ăn ngon Hà Nội ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Trang web − Tiêu đề cửa sổ: Tạo bảng Nội dung trang web − Nền màu vỏ hột gà Hằng số màu #FFEDCA − Hình ảnh: Canh trái − Bảng biểu: + Dòng tiêu đề: Nền màu nâu đất chữ màu trắng #CC6600, #FFFFFF + Màu xen kẽ dòng màu trắng màu vỏ hột gà #FFFFFF, #FFEDCA Bài 9: Trang Tạo bảng, trộn dòng cột ™ Ý nghĩa: Tạo trang web có nội dung chương trình học ngành Lập trình ™ Yêu cầu thiết kế: Chuyên đề HTML CSS CuuDuongThanCong.com 7/19 https://fb.com/tailieudientucntt Bài tập Stt Đối tượng Yêu cầu Hằng số màu Trang web − Tiêu đề cửa sổ: Tạo bảng, trộn dòng cột Nội dung trang web − Font chữ Tahoma có kích thước 12px − Bảng biểu: gồm 11 dòng cột + Dòng tiêu đề: màu đỏ bầm, chữ trắng + Trình bày bảng biểu hỉnh #CC0033;#FFFFFF 10 Bài 10: Trang Tạo bảng, trộn dòng cột (bài làm thêm) ™ Ý nghĩa: Tạo trang web có nội dung viết quảng cáo chương trình khuyến dầu gội Double Rich ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Hằng số màu Trang web − Tiêu đề cửa sổ: Tạo bảng, trộn dòng cột Nội dung trang web − Bảng biểu: Gồm dòng, cột − Dòng đầu: Nền đỏ đậm, chữ trắng, có hình ảnh #FF0000, #FFFFFF − Dòng 3: Nền đỏ nhạt, chữ đỏ đậm #FFBBBB, #FF0000 − Định dạng nội dung bảng biểu hình 11 Bài 11: Trang Tạo form điều khiển form Chuyên đề HTML CSS CuuDuongThanCong.com 8/19 https://fb.com/tailieudientucntt Bài tập ™ Ý nghĩa: Tạo trang web Đăng nhập ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Trang web − Tiêu đề cửa sổ: Tạo form điều khiển form Nội dung trang web − Tạo form − Tạo table form − Tạo điểu khiển (đ.k) Text Fields nút Button − Tạo đ.k nhãn dùng để xuất nội dung Mã người dùng ™ Yêu cầu xử lý: Stt Đối tượng Nút Đồng ý Yêu cầu xử lý chức − Khi chọn: Xuất nội dung ô Mã người dùng điều khiển nhãn 12 Bài 12 ™ Ý nghĩa Chuyên đề HTML CSS CuuDuongThanCong.com 9/19 https://fb.com/tailieudientucntt Bài tập Tạo trang web cho phép người dùng điền thông tin vào Phiếu đăng ký tham gia trương trình khuyến ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Trang web − Tiêu đề cửa sổ: Tạo form điều khiển Nội dung trang web − Tạo form − Tạo table form − Tạo điểu khiển Text Fields, Radio, Drop-down box nút Button − Đ.k Nghề nghiệp có danh sách sau: − Tạo điều khiển nhãn dùng để in câu thông báo ”Bạn đăng ký thành công!!!” ™ Yêu cầu xử lý: Stt Đối tượng Nút Đồng ý Yêu cầu xử lý chức − Khi chọn: Xuất nội dung câu thông báo 13 Bài 13 ™ Ý nghĩa Tạo trang web cho phép người dùng điền thông tin vào phiếu Đăng ký du lịch ™ Yêu cầu thiết kế: Chuyên đề HTML CSS CuuDuongThanCong.com 10/19 https://fb.com/tailieudientucntt Bài tập Stt Đối tượng u cầu Trang web − Tiêu đề cửa sổ: Tạo form điều khiển Nội dung trang web − Tạo form − Tạo table form − Tạo điểu khiển Text Fields, Checkbox, Radio, Drop-down box, OptionGroup, Textarea nút Button − Điều khiển Chọn tour có danh sách sau: − Tạo điều khiển nhãn dùng để in câu thông báo ”Bạn đăng ký thành công!!!” ™ Yêu cầu xử lý: Stt Đối tượng Nút Đồng ý Yêu cầu xử lý chức − Khi chọn: Xuất nội dung câu thông báo 14 Bài 14: Trang Tạo frame ˆ Tạo trang tiêu đề: Tieude.html ™ Yêu cầu thiết kế: Stt Đối tượng Nội dung trang web Yêu cầu Hằng số màu − Nền màu xanh dương đậm #003399 − Chữ màu trắng #FFFFFF ˆ Tạo trang thực đơn: Thucdon.html Chuyên đề HTML CSS CuuDuongThanCong.com 11/19 https://fb.com/tailieudientucntt Bài tập ™ u cầu thiết kế: Stt Đối tượng Nội dung trang web Yêu cầu Hằng số màu #DEF0FA − Trang web: Nền màu xanh da trời − Tạo danh sách tiêu đề tập, dòng liên kết đến trang web tập tương ứng ˆ Tạo trang chủ: ™ Ý nghĩa: Tạo trang web xem nội dung tập ngôn ngữ HTML ™ Yêu cầu thiết kế: Stt Đối tượng Trang web Yêu cầu − Tiêu đề cửa sổ: Tạo frame Chuyên đề HTML CSS CuuDuongThanCong.com 12/19 https://fb.com/tailieudientucntt Bài tập Nội dung trang web − Tạo frame, đó: + Frame đầu: Chứa trang Tieude.html + Frame bên trái: Chứa trang Thucdon.html + Frame bên phải: Thể nội dung trang tương ứng với thực đơn chọn Mặc định trang Bai 1.html 15 Bài 15: Trang Tạo iframe trang web ™ Ý nghĩa Tạo trang web xem nội dung tập ngôn ngữ HTML ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Trang web − Tiêu đề cửa sổ: Tạo iframe Nội dung trang web − Tạo table chứa nội dung trên, đó: + Ô đầu: Chứa nội dung tiêu đề + Ô bên trái: Chứa thực đơn tập, dòng liên kết đến trang web tập tương ứng + Ô bên phải: Thể nội dung trang tương ứng với thực đơn chọn Mặc định trang Bai 1.html ™ Yêu cầu xử lý: Stt Đối tượng Thực đơn tập Yêu cầu − Khi chọn: Thể nội dung trang web tương ứng ô bên phải 16 Bài 16: Trang Bài tổng hợp Chuyên đề HTML CSS CuuDuongThanCong.com 13/19 https://fb.com/tailieudientucntt Bài tập Chun đề HTML CSS CuuDuongThanCong.com 14/19 https://fb.com/tailieudientucntt Bài tập ™ Ý nghĩa: Tạo trang web có nội dung chuyên mục thắc mắc “Ai? Cái gi? Ở đâu?” ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Trang web − Tiêu đề cửa sổ: Bài tập tổng hợp Nội dung trang web − Tạo table chứa nội dung trên, đó: + Dòng đầu: Chứa nội dung tiêu đề hình ảnh + Ơ bên trái: Chứa thực đơn chuyên mục, dòng liên kết đến mục tương ứng với ô bên phải + Ô bên phải: Thể nội dung chi tiết chuyên mục ™ Yêu cầu xử lý: Stt Đối tượng Yêu cầu Thực đơn chuyên mục − Khi chọn, di chuyển đến mục tương ứng ô bên phải Về đầu trang − Khi chọn, di chuyển đầu trang web Chuyên đề HTML CSS CuuDuongThanCong.com 15/19 https://fb.com/tailieudientucntt Bài tập 17 Bài 17: Trang Ẩm thực Nam Bộ Hình 1: Khi mở trang Hình 2: Khi rê chuột vào hình ảnh ™ Ý nghĩa Tạo trang web có nội dung viết Ẩm thực Nam bộ, có hiệu ứng văn đường viền ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Tên lớp CSS Trang web − Tiêu đề cửa sổ: Sử dụng DHTML với CSS Nội dung trang web − Sử dụng CSS để : + Tạo lớp có vị trí tương đối lớp có vị trí tuyệt đối, Chun đề HTML CSS CuuDuongThanCong.com binhthuong 16/19 https://fb.com/tailieudientucntt Bài tập kết hợp lớp để tạo tựa đề có độ bóng chữ .bong + Tạo lớp định dạng Dropcap dropcap + Tạo lớp định dạng kiểu màu đường viền, màu chữ, khơng thể hình có vị trí tuyệt đối Dùng định dạng cho khung ”Hương vị miền Nam” khung + Định dạng lại tag

: Tạo hình ảnh đầu danh sách − Sử dụng tag học, kết hợp với lớp CSS để tạo trang web ™ Yêu cầu chức (phần mở rộng học) Stt Đối tượng Hình ảnh Yêu cầu xử lý chức − Khi rê chuột vào hình ảnh: ƒ Xuất khung ”Hương vị miền Nam” (hình 2) − Khi rê chuột khỏi hình ảnh: ƒ Trở trạng thái ban đầu (hình 1) 18 Bài 18: Trang Bài viết Mũi né Hình 1: Khi mở trang Hình 2: Khi rê chuột vào hình xuất tựa đề viết Chuyên đề HTML CSS CuuDuongThanCong.com 17/19 https://fb.com/tailieudientucntt Bài tập Hình 3: Khi click chuột vào hình xuất nội dung viết ™ Ý nghĩa: Tạo trang web có nội dung viết Mũi Né, có hiệu ứng hình ảnh, văn chuột ™ Yêu cầu thiết kế: Stt Đối tượng Yêu cầu Trang web − Tiêu đề cửa sổ: Sử dụng CSS Nội dung trang web − Sử dụng CSS để: Tên lớp CSS ƒ Tạo lớp định dạng nội dung viết cho tag (hình 3) ƒ Thay đổi biểu tượng chuột rê vào hình ảnh baiviet − Sử dụng tag học, kết hợp với lớp CSS để tạo trang web ™ Yêu cầu chức (phần mở rộng học) Stt Đối tượng Hình ảnh Yêu cầu xử lý chức − Khi rê chuột vào hình ảnh: ƒ Xuất tựa đề ”Mũi Né – Huyền bí quyến rũ” (hình 2) ƒ Thay đổi biểu tượng chuột − Khi rê chuột khỏi hình ảnh: ƒ Mất tựa đề − Khi nhấn chuột vào hình xuất nội dung viết phía bên phải hình (hình 3) Trang web − Khi nhấn chuột vào trang web nội dung viết Chuyên đề HTML CSS CuuDuongThanCong.com 18/19 https://fb.com/tailieudientucntt Bài tập MỤC LỤC Bài Bài Bài 3: Trang Định dạng trang web Bài 4: Trang Định dạng trang web (bài làm thêm) Bài Bài Bài Bài 8: Trang Tạo bảng Bài 9: Trang Tạo bảng, trộn dòng cột 10 Bài 10: Trang Tạo bảng, trộn dòng cột (bài làm thêm) 11 Bài 11: Trang Tạo form điều khiển form 12 Bài 12 13 Bài 13 10 14 Bài 14: Trang Tạo frame 11 15 Bài 15: Trang Tạo iframe trang web .13 16 Bài 16: Trang Bài tổng hợp 13 17 Bài 17: Trang Ẩm thực Nam Bộ .16 18 Bài 18: Trang Bài viết Mũi né 17 Chuyên đề HTML CSS CuuDuongThanCong.com 19/19 https://fb.com/tailieudientucntt ... trang web tương ứng ô bên phải 16 Bài 16: Trang Bài tổng hợp Chuyên đề HTML CSS CuuDuongThanCong.com 13/19 https://fb.com/tailieudientucntt Bài tập Chun đề HTML CSS CuuDuongThanCong.com 14/19 https://fb.com/tailieudientucntt... Khi nhấn chuột vào trang web nội dung viết Chuyên đề HTML CSS CuuDuongThanCong.com 18/19 https://fb.com/tailieudientucntt Bài tập MỤC LỤC Bài Bài Bài 3: Trang... Đọan văn ”Trung Tâm ngôn ngữ HTML : Canh Chuyên đề HTML CSS CuuDuongThanCong.com 1/19 https://fb.com/tailieudientucntt Bài tập Bài ™ Ý nghĩa: Tạo trang web có nội dung tập Sử dụng tag bản, có tơ