Bài tập thiết kế web cơ bản

Bài thực hành 1
Link Source Code ở dưới cùng
Sử dụng dữ liệu được cung cấp bởi thư mục txt để tạo thành các trang html có yêu cầu như sau
html 1:

Lưu ý:
-

Đặt tên : tuan_1_bai_1.html

html 2:

GV: Nguyễn Mai Huy


Bài thực hành 1

Lưu ý:
html 3 :

Đặt tên : tuan_1_bai_2.html


Bài thực hành 1

Lưu ý:
html 4:

Đặt tên : tuan_1_bai_3.html

Bài thực hành 1

Lưu ý:
-

Đặt tên : tuan_1_bai_4.html

Sử dụng dữ liệu được cung cấp bởi thư mục txt để tạo thành các trang html có yêu cầu như sau
html 1:


Bài thực hành 1


Bài thực hành 1

Lưu ý:
-

Đặt tên : tuan_2_bai_1.html

html 2:
Tạo trang html có nội dung giống với nội dung của bài viết có tên “'Ma quỷ' đơng đặc phố Tây Bùi Viện
đêm Halloween” trên zing news. Một phần của bài viết này có hình như minh họa dưới đây


Bài thực hành 1

Link bài viết: />Lưu ý:
-

Hình ảnh, video của bài viết cần phải được lưu tập trung vào trong thư mục images
Đặt tên : tuan_2_bai_2.html

html 3 :
Tạo trang html có nội dung là thơng tin giới thiệu về sản phẩm SONY Xperia XZ2, thuộc phần giới thiệu
sản phẩm này trên website của thế giới di động. Phần giới thiệu sản phẩm có minh họa như sau


Bài thực hành 1

Lưu ý:
html 4:

Link của phần giới thiệu sản phầm Xperia XZ2:
/>Đặt tên : tuan_2_bai_3.html


Bài thực hành 1


Bài thực hành 1


Bài thực hành 1

Lưu ý: Đặt tên : tuan_2_bai_4.html
Bài 1:
Tạo trang phục vụ cho việc thu thập thông tin người dùng giống như Gmail

Khi nhấn vào nút “tiếp theo”, giao diện thứ 2 sẽ xuất hiện như sau


Bài thực hành 1

Nếu nhấn vào nút “Trở lại”, giao diện trước đó sẽ hiện ra để cho phép điều chỉnh thong tin đã
nhập.
Bài 2:
Tạo giao diện thu thập thông tin tài khoản người dùng với 2 trang giống như Yahoo Mail


Bài thực hành 1

Bài 3:
Tạo các trang phục vụ cho việc thu thập thông tin người dùng Hotmail với các trang như sau:


Bài thực hành 1


Bài thực hành 1


Bài thực hành 1

Bài 1:
Tạo giao diện trang chủ của Opera.com [Link: ]


Bài thực hành 1

Bài 2:
Tạo 1 trang web giống như trang chủ của Microsoft
[Link: />

Bài thực hành 1


Bài thực hành 1

Bài 3:
Tạo giao diện của trang chủ FireFox như hình minh họa dưới đây
[Link: />

Bài thực hành 1


Bài thực hành 1


Bài thực hành 1


Bài thực hành 1

Bài 1:
Xây dựng 1 trang web với giao diện như hình minh họa sau:


Bài thực hành 1

Sau khi người dung nhấn vào nút “Nạp tin mới”

Yêu cầu:

-

Khi người dung nhấn vào nút “Nạp tin mới”, trên vùng nội dung của trang web sẽ xuất hiện
thêm 2 “miếng” thơng tin như hình minh họa

-

Thơng tin cần chèn vào vùng nội dung có thể do Sinh viên tự sưu tầm, hoặc tự tạo Gợi ý:

-

Sử dụng phương thức getElementById("duLieu") trên đối tượng document để trỏ đến
vùng nội dung cần thêm thông tin (duLieu: là ID của vùng nội dungtrang web, nơi sẽ them các
miếng thong tin vào khi người dung nhấn nút Nạp tin mới)

-

Sử dụng thuộc tính “innerHTML” để nhận giá trị là chuỗi HTML cần chén
Xây dựng hàm có sử dụng các phương thức & thuộc tính ở trên để thực hiện them dữ liệu cho
vùng nội dung của trang web. Sau đó đặt tên cho hàm này (Giả sử: insertNews())


Bài thực hành 1

-

Bẫy sự kiện onclick trên thành phần “Nạp tin mới” của trang web để gọi hàm đã tạo ở trên thi
hành Bài 2:

Tạo 1 trang web cho phép tính chi phí xây tường của một miếng đất có thong số nhập bởi người
dung với giao diện như sau:

Yêu cầu:

-

Chương trình cho phép người dung nhập vào các thong số như: Chiều dài, chiều rộng miếng
đất và chiều cao của tường cần xây. Chương trình sẽ tính diện tích tường bao cần xây và chi phí
xây dựng (Giả sử: 1 m2 tường tốn chi phí 530000) Gợi ý:

-

Để lấy giá trị của 1 input hatml tag (Dữ liệu do người dùng nhập vào) ta truy xuất thuộc tính
value của đối tượng tương ứng

Source code: />usp=sharing