c01tongquan1 baitaplaptrinhwebphiaclient8119 c02html

<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1>

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM</b>

<b>KHOA CÔNG NGHỆ THƠNG TIN</b>



BÀI TẬP THỰC HÀNH

<b>LẬP TRÌNH WEB PHÍA CLIENT</b>

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

<b>GIỚI THIỆU</b>

 Bài tập được xây dựng nhằm giúp các bạn sinh viên Cao đẳng, Đại học làm quen
với ngơn ngữ lập trình web phía Client.

 Bài tập này được chia thành Lab tương ứng với từng nội dung học trên lý thuyế,
mỗi lab sẽ có quy định số tiết thực hành và nội dung cụ thể.

 Mục tiêu bài tập thực hành là tạo ra một sản phẩm website (trang blog) thực thụ
bằng ngôn ngữ HTML, CSS và JS. Bên cạnh đó là bộ sản backEnd được sử dùng
từ bộ thư viện mẫu AdminLTE.

 Tạo nguồn tài ngun đầu vào thực hành cho mơn Lập trình web phía Server,
chính vì vậy sau khi thực hành xong mơn này các bạn sinh viên nên giữ lại sản
phẩm của thực hành của môn này.

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

<b>Lab 1</b>

<b>(Thời lượng: 15 tiết)</b>

<b>NỘI DUNG</b>

<b>PHẦN 1: ĐỊNH DANG TIÊU ĐỀ VÀ ĐOẠN VĂN BẢN</b>

<i>a. Sử dụng các cặp thẻ hn, với n là số tự nhiên từ 1 đến 6 để soạn thảo tài liệu dưới </i>
đây

<b>Mục tiêu:</b>

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

b. Sử dụng cặp thẻ <p> </p>. Các văn bản nằm trong cặp thẻ này sẽ được hiểu là
một đoạn văn bản, mỗi đoạn văn bản sẽ được xuống dòng và cách nhau với tỷ lệ
nhất định

<b>PHẦN 2: CÁC THẺ ĐỊNH DẠNG VĂN BẢN</b>
<b>a. Các thẻ định dạng chữ viết</b>

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

Gợi ý một số thẻ định dạng:

 <strong>: In đậm chữ viết.
 <i>: In nghiêng chứ viết.
 <u>: Gạch chân chữ viết.
 <strike>: Gạch ngang chữ viết.
 <em>: Nhấn mạnh câu.

 <code>: Định dạng cho một đoạn mã nào đó.
 <hr>: Thước kẻ ngang trên tài liệu.

 <mark>: Tơ sáng chữ viết.

<b>b) Thẻ trích dẫn</b>

Sử dụng các cặp thẻ trích dẫn <Quote> và thẻ <cite> để thể hiện một câu nói như
một câu trích dẫn có thể định dạng thêm tên người trích dẫn một cách chuyên

nghiệp hơn. Hãy sử dụng các cặp thẻ này để định dạng đoạn văn dưới đây.

<b>c)</b> <b>Thẻ định dạng sẵn</b>

Thẻ <pre> </pre> này thường được dùng để đăng một câu đối thoại hoặc in một
đoạn mã để cho dễ phân biệt với các văn bản thông thường

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6></div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

<b>Bài 1: Dùng các tag HTML định dạng văn bản trong trang web Emphasis.htm</b> sau:
b)

<b>Bài 2: Sử dụng ngơn ngữ HTM soạn thảo trang Web có nội dung và định dạng theo mẫu (Lưu </b>
<b>tập tin tên Cohaimo.htm) </b>

<b>Yêu cầu:</b>

 Có nộI dung thanh tiêu đề, định dạng đậm, nghiêng, gạch chân, gạch ngang chữ,
 Có phân cách các đoạn, xuống dịng cho mỗi câu thơ, có câu ghi chú

 <b>Cố định nội dung bài thơ khơng bị rớt dịng khi độ rộng cửa sổ trình duyệt khơng đủ, </b>

<b>Bài 3: Sử dụng ngơn ngữ HTM soạn thảo trang Web có nội</b>

<b>dung và định dạng theo mẫu (Lưu tập tin tên:</b>

<b>ChisoTrenduoi.htm)</b>

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

<b>Bài 4: Sử dụng ngôn ngữ HTM soạn thảo trang Web có nội dung và định dạng theo mẫu (Lưu </b>
<b>tập tin tên: Kyhieudacbiet.htm)</b>

 Các ký hiệu sử dụng mã tên hay mã

code

 2 đường kẽ ngang khơng bóng, kích
thước 100% và 50% cửa sổ

 Có màu đỏ cho các ký tự đặc biệt.
 Màu nền tùy ý. tất cả văn bản khơng bị

rớt dịng.

<b>Bài 5: Dùng các thuộc tính chèn hình nến</b>

trang, định dạng màu chữ, … để tạo trang web sau:

<b>Bài 6: Tạo hiệu ưng chuyển động cho các dòng văn bản trên trang (Lưu tập tin tên: </b>
<b>Hieuungvb.htm)</b>

Lặp liên tục từ trái sang phải, chữ đỏ, cỡ 4

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9></div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

<b>PHẦN 3: ẢNH TRONG HTML</b>

Sử dụng thẻ <img> trong HTML để load ảnh, một số thuộc tính có trong thẻ như
 Src: Đường dẫn đến file ảnh (lưu ý trên website phải dùng đường dẫn TƯƠNG ĐỐI).
 Width: độ rộng của ảnh.

 Height: độ cao của ảnh

 Alt: là một thuộc tính ủy quyền, nếu hình ảnh khơng hiển thị, nó sẽ xác định một văn bản
thay thế cho hình ảnh đó.

 Title: khi hover tới ảnh, sẽ hiển thị mơ tả ảnh đó.

<b>Lưu ý: </b>



<i>Khi thiết lập người ta chỉ set 1 trong 2 chiều thôi, điều này giúp ảnh sẽ ko bị bễ</i>



<i>Các trình duyệt nếu khơng để border thì mặc định bằng 0 có nghĩa là khơng xuất hiện, </i>
<i>nhưng IE thì lại mặc định là có, nên để đồng nhất các truyền duyệt thì nên chủ động set </i>
<i>border=0</i>

a. Thuộc tính màu nền trong HTML

 Nhắc lại về mã màu. Trong thiết kế web người ta sử dụng 3 dạng màu cho
việc sử dụng.

i. Sử dụng 16 màu tiêu chuẩn trong W3C.

</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>

iii. Sử dụng RGB

</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>

 Sử dụng ảnh làm nền để tạo nền cho webstie theo hình bên dưới.

<b>Bài 1: Dùng tag <IMG> và thuộc tính align thiết kế trang web sau:</b>

</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13>

<b>Bài 3:</b>Thiết kế theo mẫu có : Ảnh canh lề
phải văn bản canh đều bao quanh lề trái,
kích thước ngang ảnh 130. Trên ảnh có
câu chú thích “Bill Gates (trái) và Tổng
thống Bồ Đào Nha”, Có ảnh nền trang mờ
bất động. (Ảnh được lưu trong thư mục
Images của WebSite).

<b>PHẦN 4: DÙNG TAG <OL> VÀ <UL> <DL> </b>

b. Danh sách trong HTML

 Danh sách KHƠNG CĨ thứ tự

<b>Nhắc lại kiến thức:</b>

<b><ul> - Một danh sách không có thứ tự. Nó được sắp xếp bằng cách sử dụng </b>

các bullet thường.

<b><ol> - Một danh sách đã qua sắp xếp. Nó sử dụng một lược đồ số để liệt kê </b>

danh sách.

<b><dl> - Danh sách định nghĩa trong HTML. Sắp xếp danh sách theo cách </b>

</div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>

 Thay đổi kiểu bullet trong danh sách (mặc định “chấm tròn”)

</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>

 Hãy thử sử dụng thuộc tính type cho <ol> theo gợi ý bên dưới để xem danh
sách có sự thay đổi như thế nào.

 Hãy sử dụng thuộc tính start cho thẻ <ol> để xác định điểm bắt đầu cho dãy
số bạn muốn.

<b>Bài 1: (Lưu tập tin tên: ChuongTrinhDTWeb1.htm)</b>

 Dòng đầu cỡ tiêu đề H3, màu đỏ

 Các dòng nội dung dạng danh sách khơng đánh số thứ tự. Màu xanh.
 Dịng cuối có sử dụng văn bản dạng chú thích, có màu khác

<b>Bài 2: (Lưu tập tin tên: ChuongTrinhDTWeb2.htm)</b>

 Dòng đầu cở tiêu đề H3, Đỏ

 Các dòng nội dung dạng DS có đánh số thứ
tự, màu xanh.(Màu nền tuỳ ý.)

<b>Bài 3: (Lưu tập tin tên: ChuongTrinhDTWeb.htm)</b>

<ol type="1"> - Giá trị mặc định

<ol type="I"> - Giá trị số La Mã dạng chữ hoa.
<ol type="i"> - Giá trị sô La Mã dạng chữ thường.
<ol type="a"> - Chữ cái thường.

<ol type="A"> - Chữ cái hoa.

</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>

<b>Bài 4: Thiết kế dạng danh sách có đánh số thứ tự lồng nhau. Đường kẽ ngang khơng bóng 30%</b>

cửa sổ. Dịng cuối dạng văn bản chú thích.

<b>Bài 5: (Lưu tập tin tên: ChuongTrinhDTTHVP.htm)</b>

Thiết kế dạng danh sách định nghĩa. Màu chữ tùy ý. Có ảnh nền tùy ý Lưu trong thư mục
Images.

</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17></div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18>

<b>PHẦN 5: TABLE</b>

Sử dụng thẻ <table> và các thẻ <tr>, <td>,<th> để xây dựng các bảng sau:
 Bảng đơn giản

 Bảng có tiêu đề bảng

 Bảng có thuộc tính cellpadding và cellspacing

 Bảng có sử dụng thuộc tính colspan và rowspan

 Bảng có sử dụng thuộc tính màu nền

</div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19>

 <i>Bảng có sử dụng thuộc tính màu border và with, heigh của khung.</i>

<b>Bài 1: Dùng chức năng table tạo trang web sau:</b>

<b>Bài 2: Lưu tập tin tên: KetQuaHocTap.htm</b>
<b>Yêu cầu: Thiết kế & Trình bày theo mẫu: </b>

 Màu nền dòng tiêu đề và dòng cuối, màu
chữ tùy ý

 Độ rộng Table=600, Khoảng cách giữa
các ô =0 , độ dày đường viền 1, màu
viền tùy ý

</div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>

<b>Bài 3: Dùng chức năng table kết hợp thuộc tính colspan, rowspan và image tạo các trang </b>

web sau:

<b>Bài 4: </b>Dùng chức năng table kết hợp thuộc tính colspan, rowspan và image tạo các trang
web sau:

</div>
<span class='text_page_counter'>(21)</span><div class='page_container' data-page=21></div>
<span class='text_page_counter'>(22)</span><div class='page_container' data-page=22></div>
<span class='text_page_counter'>(23)</span><div class='page_container' data-page=23>

<b>Bài 2: Thiết kế trang Web theo mẫu sau:</b>

<b>Bài 3: Thiết kế nội dung theo mẫu (Lưu tập tin tên: ChuongTrinhDaoTao.htm)</b>
<b>Yêu cầu: </b>

 Tại mục 2 tạo liên kết thực hiện mở 1 trang
ChuongTrinhDTWeb.htm (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 cùng trang
hiện tại. Cuố trang có liên kết “Đầu trang” để
về đầu trang(Thu nhỏ cửa sổ khi xem để
kiểm tra các liên kết nội bộ trang)

<b>Bài 4: Thiết kế nội dung theo mẫu (Lưu tập tin tên:</b>
<b>DanhBaWeb.htm)</b>

<b>Yêu cầu: Tạo liện kết đến các Website lần lượt</b>

theo trình tự:

<b>www.vnexpress.net</b>
<b>www.tuoitre.com.vn</b>
<b>www.nhacso.net</b>
<b>www.ngoisao.net</b>
<b>www.echip.com.vn</b>

<b>www.vietnamnet.vn</b>

Mở cửa sổ hộp thư cho phép soan gởi thư đến:

</div>
<span class='text_page_counter'>(24)</span><div class='page_container' data-page=24>

<b>PHẦN 7: FORM</b>

<b>Bài 1: Thiết kế trang sử dụng Form trình bày các đốI tượng:</b>

Textbox,Password,SubmitButton,ResetButton
Nên kết hợp Table để trình bày

<b>Bài 2: Thiết kế trang tìm kiếm liên kết với Google theo mẫu </b>
<b> (Lưu tập tin tên: Timkiem.htm)</b>

<b>Bài 3: (Lưu tập tin tên: Gopy.htm)</b>

Thiết kế trang sử dụng Form tạo các đối tượng bên trong

theo mẫu thực hiện liên kết gửi nội dung đến địa chỉ mail của bạn hoặc

Nên kết hợp Table để trình bày

<b>Bài 3: (Lưu tập tin tên: Thamdoykien.htm)</b>

</div>
<span class='text_page_counter'>(25)</span><div class='page_container' data-page=25>

<b>Bài 4: Form Tạo các trang web sau sử dụng các thẻ form, input, select, Tạo một Autocomplete </b>

List theo mẫu sau:

</div>
<span class='text_page_counter'>(26)</span><div class='page_container' data-page=26>

<b>Bài 6: (Lưu tập tin tên: LKWebsite.htm)</b>

Thiết kế trang sử dụng Form tạo ComboBox chứa các mục liến kết đến các Website tương ứng
khi người dùng chọn 1 mục

www.laodong.com.vn
www.vnexpress.net
www.tuoitre.com.vn

<b>Bài 7: Dùng chức năng form tạo trang web sau:</b>

Với phần tử input type = text, dùng thuộc tính placeholder để mô tả giá trị sẽ

</div>
<span class='text_page_counter'>(27)</span><div class='page_container' data-page=27></div>
<span class='text_page_counter'>(28)</span><div class='page_container' data-page=28>

<b>Bài 8: Dùng chức năng form tạo trang web sau:</b>

</div>
<span class='text_page_counter'>(29)</span><div class='page_container' data-page=29></div>
<span class='text_page_counter'>(30)</span><div class='page_container' data-page=30>

<b>Bài 11: thẻ là phần tử khung nhúng vào 1 trang web, nội dung khung là 1 trang web khác hoặc 1 </b>

tài liệu HTML khác. Hãy tạo 1 trang nhúng vào YouTube Video.

</div>
<span class='text_page_counter'>(31)</span><div class='page_container' data-page=31>

<b>Lab 2</b>

<b> PHẦN DREAMWEAVER</b>

<b>(Thời lượng: 5 tiết)</b>

Dùng

Dreamwearver thiết kế các trang web sau:

<b>Bài 1:</b>

<b>Bài 2:</b>

<b>Mục tiêu:</b>

</div>
<span class='text_page_counter'>(32)</span><div class='page_container' data-page=32>

<b>Bài 3:</b>

</div>
<span class='text_page_counter'>(33)</span><div class='page_container' data-page=33>

<b>Bài 5 : </b>

</div>
<span class='text_page_counter'>(34)</span><div class='page_container' data-page=34></div>
<span class='text_page_counter'>(35)</span><div class='page_container' data-page=35></div>
<span class='text_page_counter'>(36)</span><div class='page_container' data-page=36>

<b>Lab 3</b>

<b>(Thời lượng: 5 tiết)</b>

Bài tập 1: Thực hiện lại code và kết quả theo như hình bên dưới bằng 2 cách viết
CSS (External Style, Interanl Style, inline Style).

Bài tập 2: Định nghĩa màu nền và mầu chữ

<b>Mục tiêu:</b>

@ Biết cách sử dụng 3 loại chèn CSS vào trang web

@ Biết cách sự dụng một số thuộc tính của CSS cho việt định

</div>
<span class='text_page_counter'>(37)</span><div class='page_container' data-page=37>

Bài tập 3: khung viền (border) và màu kết hợp

Bài tập 4: Kết hợp border với margin

</div>
<span class='text_page_counter'>(38)</span><div class='page_container' data-page=38></div>
<span class='text_page_counter'>(39)</span><div class='page_container' data-page=39>

<b>Lab 5</b>

<b>(Thời lượng: 10 tiết)</b>

<b>NỘI DUNG</b>

<b>Bài tập 1: Sử dụng CSS và HTML để thiết kế các mẫu layout sau đây (Lưu ý: tạo file CSS riêng </b>

từ bên ngoài). Độ rộng layout web là 900px, các thành phần còn lại bên trong thí sinh tự cho
theo tỉ lệ như trong hình.

<b>Mục tiêu:</b>

@ Biết cách sự dụng một số thuộc tính của CSS cho thiết kế
giao diện.

 Width, height, Float, clear, Postion, z-index, Margin,
padding, Box-sizing.

@ Biết xây dựng một số dạng layout.

@ Sử dụng chức năng trong photoshop trong việc xử lý giao
diện

</div>
<span class='text_page_counter'>(40)</span><div class='page_container' data-page=40>

 <b>Bài tập 2: Sử dụng CSS và HTML để thiết kế các mẫu layout sau đây (Lưu ý: tạo file </b>
<b>CSS riêng từ bên ngoài). Độ rộng layout web là 900px, khoảng cách hở giữa các </b>

<b>thành phần là 15px, các thành phần cịn lại bên trong thí sinh tự cho theo tỉ lệ như trong </b>

hình.

</div>
<span class='text_page_counter'>(41)</span><div class='page_container' data-page=41></div>
<span class='text_page_counter'>(42)</span><div class='page_container' data-page=42>

<b>Hướng dẫn:</b>

</div>
<span class='text_page_counter'>(43)</span><div class='page_container' data-page=43></div>
<span class='text_page_counter'>(44)</span><div class='page_container' data-page=44>

<b>Menu:</b>

</div>
<span class='text_page_counter'>(45)</span><div class='page_container' data-page=45>

<b>Hướng dẫn:</b>

</div>
<span class='text_page_counter'>(46)</span><div class='page_container' data-page=46>

<b>Hướng dẫn:</b>

<b>Bài tập 8:</b> Tạo 1 menu như hình sau (dùng CSS3)

</div>
<span class='text_page_counter'>(47)</span><div class='page_container' data-page=47>

<b>Bài tập 9: </b>Dùng thuộc tính before, after:

</div>
<span class='text_page_counter'>(48)</span><div class='page_container' data-page=48>

<b>Bài tập 10: </b>Tạo đối tượng cho phép kết hợp hiệu ứng (transition) chuyển tiếp: chiều rộng, chiều
cao, màu nền, biến đổi (transform).

</div>
<span class='text_page_counter'>(49)</span><div class='page_container' data-page=49>

<b>Bài tập 11:Cho Đoạn HTML mẫu như hình bên trái, hãy sử dụng CSS để xây dựng lên </b>

</div>
<span class='text_page_counter'>(50)</span><div class='page_container' data-page=50></div>
<span class='text_page_counter'>(51)</span><div class='page_container' data-page=51>

<b>Bài tập 12: Xây dựng Layout và template theo mẫu đã cho bên dưới.</b>

</div>
<span class='text_page_counter'>(52)</span><div class='page_container' data-page=52>

<i>Hình: Template yêu cầu</i>

Bài tập 13: CSS nâng cao, responsive.

</div>
<span class='text_page_counter'>(53)</span><div class='page_container' data-page=53></div>
<span class='text_page_counter'>(54)</span><div class='page_container' data-page=54>

<i>(Với kích thước màn hình nhỏ 800px)</i>

</div>
<span class='text_page_counter'>(55)</span><div class='page_container' data-page=55>

<b>Lab 5</b>

<b>(Thời lượng: 5 tiết)</b>

<b>NỘI DUNG</b>

1.

Download gói giao diện AdminLTE 2.x link sau:

/>

2. Hãy tạo các trang có nội dung sau đây.

a. Trang đăng nhập (login): login.html

b. Trang thông tin chung: dashboard.html

Yêu cầu:

 Làm quen với gói giao diện AdminLTE

</div>
<span class='text_page_counter'>(56)</span><div class='page_container' data-page=56>

c. Trang danh sách sản phẩm: list.html

</div>
<span class='text_page_counter'>(57)</span><div class='page_container' data-page=57></div>
<span class='text_page_counter'>(58)</span><div class='page_container' data-page=58>

<b>Lab 6</b>

<b>JAVASCRIPT và JQUERY</b>

<b>(Thời lượng: 20 tiết)</b>

<b>Bài 1: Tạo các trang web sử dụng Javascript: (dùng function trong Javascript) 1. Tạo trang cho </b>

phép người dùng nhập vào chiều dài, chiều rộng của một hình chữ nhật (dùng hàm prompt). Tính
chu vi và diện tích.

<b>Bài 2: 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 </b>

ra trang Web một Table theo dạng sau: Ví dụ (m=3,n=4)

Hàm tồn cục:

u cầu:

 Hiểu rõ ngơn ngữ lập trình JavaScript (kiểu dữ liệu, tốn tử,
biểu thức, cấu trúc điều khiển, vịng lặp, mảng …)

 Hiểu rõ và áp dụng được mơ hình DOM.

 Áp dụng được Filter - Transition với JavaScript

</div>
<span class='text_page_counter'>(59)</span><div class='page_container' data-page=59></div>
<span class='text_page_counter'>(60)</span><div class='page_container' data-page=60></div>
<span class='text_page_counter'>(61)</span><div class='page_container' data-page=61>

Gọi lại function intable trong sự kiện onload của thẻ body

<b>Bài 3: Viết chương trình tạo bảng lượng giác (sin & cos) cho các góc từ 00 , 150, 300, …, 1800 </b>

</div>
<span class='text_page_counter'>(62)</span><div class='page_container' data-page=62>

Hướng dẫn: sử dụng đối tượng Math (Math.sin(x), Math.cos(x)) và vòng lặp để in table (giống
bài 3) Đối tượng Math: Cú pháp để gọi các thuộc tính và phương thức của Math như sau:

<b>Bài 4: </b>

(xử lý sự kiện chuột: onmouseover, onmouseout) Tạo trang web chứa một hình. Khi
người dùng trỏ chuột và hình thì sẽ chuyển sang hình khác và khi chuột ra khỏi hình thì quay trở
về hình ban đầu. Hướng dẫn:

<b>Bài 5: </b>

(sự kiện bàn phím onkeyup, onkeydown, onkeypress) Tạo trang web cho phép người
dùng nhập thông tin tên: - Kiểm tra không cho người dùng nhập số - Sau khi người dùng nhập ký
tự nào, ký tự đó sẽ chuyển thành chữ hoa

</div>
<span class='text_page_counter'>(63)</span><div class='page_container' data-page=63>

<b>Bài 6: Tạo trang web cho biết ngày, tháng, năm hiện tại. Đối tượng Date:</b>

</div>
<span class='text_page_counter'>(64)</span><div class='page_container' data-page=64></div>
<span class='text_page_counter'>(65)</span><div class='page_container' data-page=65>

<b>Bài 7: Viếtt chương trình nhập vào MASV, HOTEN, LOP (dùng hàm prompt để nhập) Sau đó</b>

hiển thị thơng tin vừa nhập vào ra bảng theo dạng sau:

</div>
<span class='text_page_counter'>(66)</span><div class='page_container' data-page=66>

Dấu * là bắt buộc nhập Tên đăng nhập phải bắt đầu bằng ký tự Mật khẩu ít nhất là 6 ký tự
Nhập lại mật khẩu phải trùng với mật khẩu Ngày sinh phải hợp lệ Điện thoại phải là số
-Email phải đúng mẫu địa chỉ email - Khi người dùng nhấn nút Đăng ký, nếu thơng tin nhập chưa
hợp lệ phải có thông báo hợp lý (thông báo kế bên phần tử nhập trên trang web hoặc dùng hàm
alert()), nếu thông tin nhập hợp lý sẽ mở trang mới và hiển thị các thông tin đã đăng ký như sau:

</div>
<span class='text_page_counter'>(67)</span><div class='page_container' data-page=67></div>
<span class='text_page_counter'>(68)</span><div class='page_container' data-page=68></div>
<span class='text_page_counter'>(69)</span><div class='page_container' data-page=69></div>
<span class='text_page_counter'>(70)</span><div class='page_container' data-page=70></div>
<span class='text_page_counter'>(71)</span><div class='page_container' data-page=71>

<b>Bài 9: Tạo trang web có giao diện như bên dưới và yêu cầu xử lý: khi người dùng nhập vào ô số</b>

lượng mua trên từng sản phẩm thì ơ tổng thành tiền bên dưới sẽ cập nhật theo.

</div>
<span class='text_page_counter'>(72)</span><div class='page_container' data-page=72>

<b>Trong nó gồm các tùy chọn sau:</b>
<b>Mua vào, Bán ra là trường textbox</b>

<b>Loại xe là Dropdown Menu gồm các option</b>

Text Value

<b>Toyota</b> <b>../images/mer2.jpg</b>

<b>KIA</b> <b>../images/otoa1.jpg</b>

<b>Ford</b> <b>../images/t2.jpg</b>

<b>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 </b>
<b>chọn nút nào.</b>

<b>Update, State là nút button.</b>

u cầu xử lý:

<b>1) Khi trang load lên thì con trỏ nhập liệu trong trường ‘Mua vào’ và nút State ở</b>
<b>chế độ không cho phép chọn.</b>

<b>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à</b>
<b>số và khơng rỗng thì nút State sáng lên.</b>

<b>3) Khi Click vào mục chọn hình qng cáo thì sẽ thể hiện hình đó bên vùng bên.</b>

<b>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>

<b>‘Bảng tin thị trường’ trong mục ‘Vàng’ cịn ngược lại thì cập nhật ở mục</b>
<b>‘USD’ tương ứng với trường ‘Mua vào’ của cột ‘Mua vào’ và trường ‘Bán ra’</b>
<b>của cột ‘Bán ra’ (Dùng inner để cập nhật)</b>

<b>Bài 11: Bạn hãy thực hiện tạo giao diện trang web và hoàn tất các yêu cầu sau: - Thêm các thông</b>

</div>
<span class='text_page_counter'>(73)</span><div class='page_container' data-page=73>

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

<b>Ví dụ: Thiết kế Form như sau:</b>

<b>Bài 12: Viết chương trình xử lý theo yêu cầu sau:</b>

a) Khi trang load lên thì nút Nhap ở chế độ mờ và con trỏ nhập liệu ở ô họ tên.
b) 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

leân.

</div>
<span class='text_page_counter'>(74)</span><div class='page_container' data-page=74>

<b><html></b>
<b><head></b>

<b><meta http-equiv="Content-Language" content="en-us"></b>
<b><meta http-equiv="Content-Type" content="text/html; </b>

<b>charset=windows-1252"></b>

<b><meta name="GENERATOR" content="Microsoft FrontPage 4.0"></b>
<b><meta name="ProgId" content="FrontPage.Editor.Document"></b>
<b><title>THEM SINH VIEN</title></b>

<b><script></b>

<b><!-- Cau 1--></b>
<b> function Init()</b>
<b> {</b>
<b> frmnhap.ht.focus()</b>
<b> frmnhap.nh.disabled=true</b>
<b> }</b>
<b><!---Cau 2--></b>
<b> function Test()</b>
<b> {</b>
<b> var hten,lop;</b>
<b> hten=frmnhap.ht.value;</b>
<b> lop=frmnhap.lo.value;</b>
<b> if(hten=="")</b>
<b> {</b>

<b> alert("Ban quen nhap ho ten roi")</b>
<b> return;</b>

</div>
<span class='text_page_counter'>(75)</span><div class='page_container' data-page=75>

<b> if(lop=="")</b>
<b> {</b>

<b> alert("Ban quen nhap lop roi")</b>

<b> return;</b>
<b> }</b>
<b> frmnhap.nh.disabled=false</b>
<b> </b>
<b> }</b>
<b> var count;</b>
<b> count=1;</b>
<b> function WriteData()</b>
<b> {</b>
<b> var hten,lop;</b>
<b> var pdau,pthan,pthem,pcuoi</b>
<b> hten=frmnhap.ht.value;</b>
<b> lop=frmnhap.lo.value;</b>
<b>Idhten.innerHTML=hten</b>
<b>Idlop.innerHTML=lop</b>
<b>Idhten.id="Idhten"+count</b>
<b>Idlop.id="Idlop"+count</b>
<b>count++;</b>
<b>pthan=Iddata.innerHTML</b>

<b>pdau="<table id=Iddata border='1' cellpadding=1 </b>
<b>cellspacing='1' width='100%' </b>

<b>STYLE='border-collapse:collapse'>"</b>
<b>pthem="<tr>"</b>

<b> pthem=pthem+ " <td width=50% id=Idhten </b>

<b>style='font-family: Tahoma; font-size: 10pt; color: #336699; font-weight:</b>
<b>bold'>&nbsp;</td>"</b>

<b> pthem=pthem+" <td width=50% id=Idlop style='font-family: </b>
<b>Tahoma; font-size: 10pt; color: #336699; font-weight: </b>

<b>bold'>&nbsp;</td>"</b>

<b> pthem=pthem+ " </tr>"</b>
<b> pcuoi="</table>"</b>
<b>Iddata.outerHTML=pdau+pthan+pthem+pcuoi</b>
<b>frmnhap.nh.disabled=true</b>
<b>frmnhap.ht.value=""</b>
<b>frmnhap.lo.value=""</b>
<b> }</b>
<b></script></b>
<b></head></b>
<b><body onload=Init()></b>

</div>
<span class='text_page_counter'>(76)</span><div class='page_container' data-page=76>

<b> <table width=100% border="1" cellspacing="1" cellpadding=1 </b>
<b>cellspacing="1" STYLE="border-collapse:collapse"></b>

<b> <tr></b>

<b> <td width="100%" colspan="2" style="font-family: Times </b>
<b>New Roman; font-size: 14pt; color: #808000; font-weight: </b>
<b>bold" align="center" bgcolor="#E6FFF9">THEM</b>

<b> SINH VIEN</td></b>
<b> </tr></b>

<b> <tr></b>

<td width="26%" style="font-family: Tahoma; font-size:
10pt; color: #336699; font-weight: bold"

align="right">H&#7885;

<b> tên</td></b>

<b> <td width="74%" style="font-family: Tahoma; font-size: </b>
<b>10pt; color: #336699; font-weight: bold"><input type="text" </b>

<b>name="ht" size="20"></td></b>

<b> </tr></b>
<b> <tr></b>

<b> <td width="26%" style="font-family: Tahoma; font-size: </b>
<b>10pt; color: #336699; font-weight: bold" </b>

<b>align="right">L&#7899;p</td></b>

<b> <td width="74%" style="font-family: Tahoma; font-size: </b>
<b>10pt; color: #336699; font-weight: bold"><input type="text" </b>

<b>name="lo" size="20" onblur="Test()"></td></b>

<b> </tr></b>
<b> <tr></b>

<td width="26%" style="font-family: Tahoma; font-size:

10pt; color: #336699; font-weight: bold" align="right"></td>

<b> <td width="74%" style="font-family: Tahoma; font-size: </b>
<b>10pt; color: #336699; font-weight: bold"><input type="button"</b>
<b>value="Nhap" onclick="WriteData()" name="nh"></td></b>

<b> </tr></b>
<b> <tr></b>

<b> <td width="100%" style="font-family: Times New Roman; </b>
<b>font-size: 14pt; color: #CC3300; font-weight: bold" </b>

<b>align="center" colspan="2" bgcolor="#E6FFF9">DANH</b>
<b> SACH SINH VIEN</td></b>

<b> </tr></b>
<b> <tr></b>

<b> <td width="100%" style="font-family: Tahoma; font-size:</b>
<b>10pt; color: #336699; font-weight: bold" align="center" </b>

<b>colspan="2"></b>

<b> <table id=Iddata border="1" cellpadding=1 </b>
<b>cellspacing="1" width="100%" </b>

</div>
<span class='text_page_counter'>(77)</span><div class='page_container' data-page=77>

<b> <td width="50%" style="family: Tahoma; </b>
<b>font-size: 10pt; color: #336699; font-weight: bold" align="center"</b>
<b>bgcolor="#E0E0E0">H&#7884;</b>

<b> TÊN</td></b>

<b> <td width="50%" style="family: Tahoma; </b>
<b>font-size: 10pt; color: #336699; font-weight: bold" align="center"</b>
<b>bgcolor="#E0E0E0">L&#7898;P</td></b>

<b> </tr></b>
<b> <tr></b>

<b> <td width="50%" id=Idhten style="font-family: </b>
<b>Tahoma; font-size: 10pt; color: #336699; font-weight: </b>
<b>bold">&nbsp;</td></b>

</div>

<!--links-->
<a href=' /><a href=' /><a href=' /> Soạn bài sử dụng một số biện pháp nghệ thuật trong văn bản thuyết minh

• 3
• 952
• 0