Bài tập thiết kế Web bằng HTML

 Bài tập HTML 1 (Cơ bản, định dạng) 
 1/ Headings.html (Sử dụng 
 Heading) 
 2/ HeadingCenter.html (Phối hợp 
 các tag 
3/ Alignment.html (Phoái hôïp caùc Tag) 
4/ Emphasis.html 
 1 
 Bài tập HTML 2 (Cơ bản, định dạng) 
1/ trungtamtinhoc.html 
2/ ngonnguhtml.html 
 2 
 Bài tập HTML 3 (Image) 
1/ Image1.html 
2/ Image2.html 
Höôùng daãn: Môû taäp tin Image.html, theâm vaøo doøng leänh 
 2/ 
 3 
 Bài tập HTML 4(Bulleted) 
1/ Unordered.html. 2/ Ordered.html. 
3/ Definition.html 
 dl 
 dt 
 dd 
 4 
4/ Chuongtrinhdaotao.HTML 
5/chuongtrinhthietkeweb.HTML 
6/ chuongtrinhnganhwebsite.HTML 
7) Tạo file tonghop.html sau: 
 5 
 Bài tập HTML 5 (Liên kết) 
1/ Tạo tập tin Link.html : Tạo các liên kết đến các bài đã tạo phần trước 
 2/ Tạo tập tin Search.html để xây dựng trang Web sau 
  for Google 
  for Altavista 
  for Yahoo 
 6 
 Bài tập HTML 6 – Liên kết đến trong một trang 
1/ chuongtrinhTKWeb.html 
Phần I: HTML 
Phần II: Java Script 
Phần III: Photoshop 
Phần IV: Flash 
Phần V: Hình ảnh 
 Phần I: HTML 
Giới thiệu về các thẻ trong HTML dùng để thiết kế và tạo trang Web, Nội dung gồm các phần sau: 
 • Thẻ tạo một file định dạng HTML 
 • Thẻ định dạng Font chữ và đoạn văn 
 • Thẻ làm việc với danh sách 
 • Thẻ tạo liên kết 
 • Thẻ làm việc với bảng 
 • Thẻ làm việc với khung 
 • Thẻ tạo Form 
 Phần II: Java Script 
Giới thệu về cách nhúng các đoạn mã Java Script vào trong một trang Web, ... 
 Phần III: Photoshop 
Giới thiệu cách sử dụng phần mềm Photoshop 8 để chỉnh sửa một hình ảnh, gồm các nội dung sau: 
 I. Tổng quan phần mềm Photoshop 
 II. Cấu trúc một ảnh màu và độ phân giải 
 III. Một số thao tác cơ bản 
 IV. Lớp và thứ tự lớp 
 V. Môt số phương pháp tách ảnh và chỉnh sửa ảnh 
 Phần IV: Flash 
 Giới thiệu cách sử dụng phần mềm Macromedia Flash 8 để tạo các đoạn phim Flash đơn giản để có 
 thể nhúng vào trang Web, gồm các nội dung sau: 
  Giới thiệu 
  Công cụ trong Flash 
  Biên tập đối tượng 
  Lớp và các thuộc tính cơ bản 
  Khung hình 
  Phân cảnh, biểu tượng và thư viện 
 7 
 Bài tập HTML 7 – Liên kết tổng hợp 
1/ kythuatvientinhoc.html 
Yêu cầu: 
 • Thiết kế nội dung theo mẫu 
 • Tại mục 2 tạo liên kết thực hiện mở 1 trang ChuongTrinhDTWeb.HTML (Cùng cửa sổ) 
 • Học phần I, II, III thực hiện tạo liên kết đấn từng học phần tương ứng trong cung trang hiện tại. 
2/ danhbawebsite.html 
Yêu cầu: 
 Tạo liện kết đến các Website lần lượt theo trình tự: 
 www.vnexpress.net 
 www.tuoitre.com.vn 
 www.nhacso.net 
 www.ngoisao.net 
 www.echip.com.vn 
 www.vietnamnet.vn 
 Mở cửa sổ hộp thư cho phép soan gởI thư đến: hpt7777@gmail.com 
 8 
 Bài tập HTML 8 (Table) 
1/ Horizontal.html 
2/ Table1.html 
3/ Table2.html 
 9 
4/ Table3.html (Tables with links) 
5/ Table4.html 
 10 
 Bài tập HTML 9 - Table 
1/ Speedcompany.html 
 11 
2/ Diemdulichngaytet.html 
 12 
 Bài thực hành HTML 10 (Form) 
 1 Dangnhap.html 2/ thamdoykien.html 
3/ Submit.html 
 13 
4/ Laythongtin.html 
 14 
5/ Dangkymail.html 
6/ Phanhoiykien.html 
 15 
7/ Phieuthanhtoan.html 
8/ Dangky2.html 
 16 
 Bài tập HTML 11 (CSS) 
Dùng CSS, tạo trang menu.html như sau: 
- Khi đưa chuột qua liên kết nào liên kết đó sẽ đổi màu. 
- Liên kết đã được thăm sẽ có màu khác so với các liên kết còn lại 
 17 
 Bài tập HTML 12 (Frame-CSS) 
1. Tạo 3 rang con: Banner.html, menu.html, gopy.html 
Cách làm: 
- Trang banner.html chứa hình ảnh 
- Trang menu.html: Chứa menu, thiết kế bằng css 
- Trang gopy.html Chứa Form đóng góp ý kiên 
2. Tạo trang chủ: index.html. 
Cách làm: Dùng Frame để tổ chức trang index.html gồm 3 trang con đã tạo ở 
trên 
 banner.htm 
 menu.htm content.htm 
3. Tạo thêm các trang con: gioithieu.html, daily.html, dichvu.html, hoptac.html, 
 quangcao.html. 
4. Đặt liên kết cho mục chọn tương ứng trên menu đến các trang con vừa tạo. 
 18 
 Bài tập HTML 13 
Yêu cầu: 
 • Trang web gồm có 3 khung có tên là : “Khungtren”, “Khungtrai”, “Noidung” 
 • Khoảng cách giữa các khung là 0, 
 • “Khung trên”: Chèn 1 Tập tin ảnh làm Banner, Khoảng cách lề trái, phảI khung=0, Không co 
 thay đổI kích thước 
 • “Khung trái” : là trang DMTin.HTML chứa 2 liên kết mở 2 trang tương ứng: “Tinkt.HTML” & 
 “TinCT.HTML” 
 • “Khung nộI dung”: Hiện thị các trang được tạo liên kết từ khunbg trái. Mặc định ban đầu hiện 
 trang “TinKT.HTML” 
 • Các trang thiết kế theo mẩu sau: 
 Khi Cllick liên kết: “Kinh tế” 
 100 
 500 
 150 600 
 Khi Click liên kết “Chính trị ” 
 19 
 Bài tập JAVASCRIPT 
1/ Chonso.html 
Tạo giao diện như sau: 
Yêu cầu : 
Khi Click chuột vào Radio Button yhì thông điệp (Message) tương ứng cho biết bạn chọn số nào? 
2/ Thongdiep.html 
Tạo giao diện như sau: 
Yêu cầu: Khi Click chuột vào nút Message thì hiện lên câu chào bất kỳ 
3/ chuyenlienket.html 
Yêu cầu: Khi nhập vào liên kết ( thì Windows hỏi, nếu OK thì chuyển đến trang liên kết, nếu 
Cancel thì không thực hiện gì cả. 
4/ maytinh.html 
Hãy tạo một chương trình máy tính như sau: 
5/ lich.html 
Tạo một chương trình lịch để bàn như sau: 
 20 
6/ mocuaso.html 
Viết chương trình link đến một trang Web khác trong đó cho phép tùy chọn các đối tượng Windows 
7/ kiemtrahople.html 
Kiểm tra tính hợp lệ của thông tin nhập vào: 
 21 
 BÀI TẬP JAVASCRIPT 
Bài 1: matran.html 
Viết chương trình nhập vào 2 số m(dòng),n(cột) (dùng hàm prompt để nhập). Sau đó xuất ra trang 
Web một Table theo dạng sau: 
Ví dụ (m=3,n=4) 
11 12 13 14 
21 22 23 24 
31 32 33 34 
Bài 2: danhsachsinhvien.html 
Viết chương trình nhập vào Mã số SV, Họ tên, Lớp (dùng hàm prompt để nhập) Sau đó hiển thị thông 
tin vừa nhập vào ra bảng theo dạng sau: 
Bài tập 3: dsnut_radio.html 
Viết chương trình nhập vào số 3 số m,n , p (dùng hàm prompt). Sau đó tạo ra một Form gồm có m 
phần tử Text , n nhóm radio mỗi nhóm có 2 tùy chọn các nút radio có giá trị lần lượt là 1->2*n , và 1 
Dropdown menu(Listbox) có p tùy chọn mỗ i option có giá trị lần lượt là 1 ->p vàText của option là 
Text1 ->Textp. (Lưu ý là các phần tử trên Form phải có tên khác nhau.) 
Bài 4: thongtindangky.html 
Viết chương trình tạo một Form như sau: 
Sau đó nhập liệu vào Form khi bấm nút Nhap(button) rồi hiển thị kết quả ra dạng như sau: lấy dữ liệu 
trường Họ tên hiển thị vào ô YourName, Mật khẩu vào ô YourPWD 
Bài 5. Kiemtrathongtindangky.html 
 22 
Yêu cầu như bài 4 nhưng kiểm tra dữ liệu các trường phải không rỗng và trường Password có ít nhất 
6 ký tự nếu trường nàokhông thỏa yêu cầu thì hiển thị thông báo và đưa con trỏ về ô đó để yêu cầu 
người sử dụng nhập lại dữ liệu. 
Bài 6: thaydoianh.html 
Thiết kế trang như sau: 
Bấm vào nút Play thì chương trình thay đổi hình thay đổi một cách ngẫu nhiên (2 giây đổi 1 hình) Bấm 
stop thì dừng lại 
Bài 8: cuahangbonsai.html 
Thiết kế trang như sau. Khi người sử dụng nhập vào trường số lượng và rời khỏi trường này thì ô 
Tổng thành tiền sẽ được cập nhật(lưu ý nếu nhập vào không phải là số thì thông báo yêu cầu nhập 
lại) 
Bài 9: giacathitruong.html 
Cho trang Web sau 
 23 
Trong nó gồm các tùy chọn sau: 
Mua vào, Bán ra là trường textbox 
Loại xe là Dropdown Menu gồm các option 
Text Value 
Toyota ../images/mer2.jpg 
KIA ../images/otoa1.jpg 
Ford ../images/t2.jpg 
Cập nhật cho: gồm 2 tùy chọn lần lượt có giá trị là 1 , 0 mặc định không được chọn nút nào. 
Update, State là nút button. 
Yêu cầu xử lý: 
 1) Khi trang load lên thì con trỏ nhập liệu trong trường ‘Mua vào’ và nút State ở chế độ không cho 
 phép chọn. 
 2) Khi di chuyển con trỏ ra khỏi trường ‘Mua vào’ nếu như giá trị trường này là số và không rỗng 
 thì nút State sáng lên. 
 3) Khi Click vào mục chọn hình quãng cáo thì sẽ thể hiện hình đó bên vùng bên. 
 4) Khi bấm vào nút Update và nếu nút radio ‘Vàng’ được chọn thì cập dữ liệu ở ‘Bảng tin thị 
 trường’ trong mục ‘Vàng’ còn ngược lại thì cập nhật ở mục ‘USD’ tương ứng với trường ‘Mua 
 vào’ của cột ‘Mua vào’ và trường ‘Bán ra’ của cột ‘Bán ra’ (Dùng inner để cập nhật) 
 24 
Bài 10: dangkyhocphan.html 
Cho trang web sau: 
Yêu cầu: (Tự thêm các option trong Listbox và đặt giá trị trong radio) 
 Hãy nhập dữ liệu trên Form sau đó bấm Dang ky thì dữ liệu sẽ hiện thị vào các cột tương ứng a,b,c,d 
.(Lưu ý là dữ liệu trước đó vẫn còn) dùng: 
 a) innerHTML hoặc innerText 
 b) Iframe 
 Ví dụ: Thiết kế Form như sau: 
 Viết chương trình xử lý theo yêu cầu sau: 
 1. Khi trang load lên thì nút Nhap ở chế độ mờ và con trỏ nhập liệu ở ô họ tên. 
 2. Khi rời khỏi trường Lớp nếu trường họ tên và lớp khác rỗng thì nút Nhap sáng lên. 
 3. Bấm nút Nhap thì dữ liệu hiển thị vào bảng “Danh Sach Sinh Vien” ở bên dưới và nút Nhap 
 lại mờ 
 25 
26 
 BÀI TẬP THIẾT KẾ WEB TỎNG HỢP 
Dùng các thẻ HTML để thiết kế các trang web sau: 
Bài 1: 
Bài 2: 
Bài 3: 
 27 
Bài 4: 
Bài 5: 
Bài 6: 
 28 
Bài 7: 
Bài 8: 
 29 
Bài 9: 
Bài 10: 
 30 
Bài 11: 
Bài 12: 
 31 
Bài 13: 
Bài 14: 
 32 
Bài 15: 
Bài 16: 
 33 
Bài 17: 
Bài 18: 
 34