Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

BÀI THỰC HÀNH 1: NGÔN NGỮ HTML - CSS VÀ DHTML

BUỔI THỰC HÀNH 1

Câu 1. Tạo trang Web có nội dung như sau:

Câu 2. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Dòng dầu tiên: canh giữa, màu xanh lá mạ (#006600)
- Dòng 2: màu xanh dương (#0000FF)

1
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

- Dòng 4 - tựa đề ”MẸ!”: chữ đậm có màu hồng đậm và nền màu hồng nhạt (#FF3399,
#FECFFD)
- 3 đọan thơ: in nghiêng, có 3 màu chữ khác nhau
- Mỗi đọan cách nhau bởi 1 cây thước ngang
- Toàn bộ bài thơ có màu nền là màu vàng nhạt (#FFFFCC)

Câu 3. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Nền: Màu nâu đất (#A06D21)
- Chữ: Màu trắng (#FFFFFF)
- Hình nền: Đặt giữa trang và không di chuyển khi cuộn trang
- Dòng đầu tiên: Canh giữa, màu vàng đậm (#FFCC00)

2
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

Câu 4. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Nền: Tô đầy trang bằng hình ảnh
- Chữ: Màu xanh ve chai đậm (#008888)
- Dòng dầu tiên: Khổ chữ lớn và canh giữa
- Đọan văn bản thứ hai: nền màu xanh ve chai, chữ trắng in đậm và nghiêng (#339999,
#FFFFFF)

Câu 5. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Dạng công thức hóa học và biểu thức phương trình bậc hai, có chữ màu đỏ (#FF0000)
- Đọan code vòng lặp For: chữ màu xanh dương đậm, nền màu xám, có định dạng canh lề
(#0000CC, #CCCCCC)

3
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

Câu 6. Tạo trang Web có nội dung như sau:

4
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

BUỔI THỰC HÀNH 2

Câu 1. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Khi nhấn chuột vào dòng ”Trung Tâm Tin Học ...” : Mở ra trang web: https://www.
hcmus.edu.vn/

Câu 2. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Nền màu vỏ hột gà (#FFEDCA)

5
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

- Dòng tiêu đề bảng: Nền màu nâu đất và chữ màu trắng (#CC6600, #FFFFFF)
- Màu nền xen kẽ giữa các dòng là màu trắng và màu vỏ hột gà (#FFFFFF, #FFEDCA)

Câu 3. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Font chữ là Tahoma và có kích thước là 12px
- Dòng tiêu đề: nền màu đỏ bầm, chữ trắng (#CC0033;#FFFFFF)

6
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

Câu 4. Tạo trang Web có nội dung như sau:

Yêu cầu:
- 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)
Câu 5. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Khi chọn Đồng ý: Xuất nội dung ô Mã người dùng ở dưới nút Đồng ý

7
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

BUỔI THỰC HÀNH 3

Câu 1. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Điều khiển Nghề nghiệp có danh sách như 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!”

8
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

Câu 2. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Điều khiển Chọn tour có danh sách như 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!”

9
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

Câu 3. Tạo trang Web có nội dung như sau:

Yêu cầu:
- Tạo 3 frame, trong đó:
o Frame đầu: Chứa trang Tieude.html
o Frame bên trái: Chứa trang Thucdon.html
o Frame bên phải: Thể hiện nội dung trang tương ứng với thực đơn được chọn, mặc định
là trang Bai_1.html

10
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

Câu 4. Tạo trang Web có nội dung như sau:

11
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

BÀI THỰC HÀNH 2: NGÔN NGỮ LẬP TRÌNH JAVASCRIPT

BUỔI THỰC HÀNH 4

Câu 1. Cho người dùng nhập vào tên và tuổi. Hãy viết lại tên và tuổi của người đó ra màn hình
(hàm document.write), trong đó tên có chữ đậm, tuổi được gạch chân.
Câu 2. Cho người dùng nhập vào ngày, tháng, năm sinh của họ, sau đó hiển thị tuổi tương ứng
(document.write) với nội dung là chữ đậm, gạch dưới, màu đỏ.
Câu 3. Tạo 3 nút, “Xanh", "Đỏ", “Vàng”. Khi người dùng click vào một trong các nút trên thì
nền của tài liệu chuyến sang màu tương ứng.
Câu 4. Tạo một danh sách lựa chọn gồm có 4 màu: red, blue, brown và lavender. Khi người
dùng chọn một màu thì màu nền của tài liệu sẽ thay đổi tương ứng.
Câu 5. Tạo một trang có một ảnh, khi di chuyển chuột vào thì đổi thành ảnh khác, di chuyển
chuột ra thì đổi thành ảnh khác, click chuột vào ảnh thì đổi ảnh khác.
Câu 6. Viết ra chương trình in ra màn hình của trang web giá trị từ 1 - 50 với điều kiện các số
chẵn có màu đỏ và các số lẻ có màu xanh.
Câu 7. Cho người dùng nhập vào ngày, tháng, năm sinh của họ với năm sinh không được lớn
hơn năm hiện tại, sau đó hiển thị tuổi tương ứng (hàm alert) với nội dung là chữ đậm, gạch
dưới.
Câu 8. Cho người dùng nhập vào một số nguyên. Nếu nhập số 1 thì mở trang
http://www.vinhuni.edu.vn, nếu nhập số 2 thì mở trang https://nghean.gov.vn, nếu nhập số 3 thì
mở trang http://www.microsoft.com, còn nếu nhập một số khác với 1, 2 hay 3 thì mở trang
http://www.google.com.

12
Bài tập thực hành Lập trình Web - Viện KT & CN – Trường Đại học Vinh

BUỔI THỰC HÀNH 5

Câu 1. Tạo một trang có 3 ô textbox và một nút “Tính tổng”. Khi người dùng nhập vào 2 số
vào 2 ô đầu và click vào nút “Tính tổng” thì kết quả tổng 2 số vừa nhập sẽ được hiển thị ở ô
textbox thứ 3.

Câu 2. Hãy tạo một chương trình máy tính điện tử như sau:

Câu 3. Tạo một textarea và một textbox. Với yêu cầu như sau: Khi người sử dụng gõ các phím
vào trong textarea thì độ dài ký tự chứa trong textarea đó sẽ được hiển thị trong textbox. Nếu
số lượng ký tự trong textarea gõ vào vượt quá 10 ký tự thì thông báo: "Bạn đã gõ quá số ký tự
cho phép !".

Câu 4. Tạo 3 textbox, có tên lần lượt là: SoLuong (Số lượng), DonGia (Đơn giá) và
ThanhTien (Thành tiền). Khi người dùng nhập giá trị trong DonGia thì kết quả sẽ được cập
nhật ngay trong ô ThanhTien.

Câu 5. Tạo một trang có chứa bảng cửu chương 2 đến bảng cửu chương 9.
Câu 6. Tạo một trang có chứa bảng cửu chương 9 đến bảng cửu chương 2.
Câu 7. Tạo các thẻ input nhập số điện thoại, email, ngày tháng, nhấn nút kiểm tra thì sẽ kiểm
tra xem số điện thoại, email và ngày tháng nhập vào có đúng định dạng hay không?

13