Bài tập thực hành ngôn ngữ HTML

, ô. 
 7/18 
Câu 3: Sử dụng ngôn ngữ HTML soạn thảo trang Web có nội dung và định dạng theo mẫu: 
BẢNG GIÁ ĐĂNG KÝ CƯỚC DỊCH VỤ INTERNET 
 VNN FPT 
 Cước truy cập Internet Thẻ kết nối Internet 
 Thời gian Cước truy cập(đ/ph) Số giờ kết nối Mệnh giá thẻ 
 0h-07h 100 14h 100.000đ 
 07h-19h 210 33h 200.000đ 
 19h-24h 150 55h 300.000đ 
Cước thuê bao trong tháng: 27.273đ/tháng 110h 500.000đ 
NHẬP THÔNG TIN MUA THẺ 
Họ và tên: 
Số CMND: 
Đăng ký: 
Mua thẻ: 
  100.000đ 
  200.000đ 
  300.000đ 
  500.000đ 
 Cập nhật Huỷ bỏ 
Yêu cầu: 
  Chọn màu nền tuỳ ý cho trang 
  Chọn màu nền dòng tiêu đề và dòng cuối cho bảng, màu chữ tùy ý 
  Độ rộng Table=800, Khoảng cách giữa các ô =0 , độ dày đường viền 1, màu viền tùy ý 
  Canh lề và trộn ô đúng theo mẫu. 
  Tạo form nhập thông tin mua thẻ như trong mẫu 
Câu 4: Sử dụng CSS trong định dạng: kiểu chữ, font chữ, bảng, dòng, ô của bảng ở mẫu trên. 
TUẦN 6: 
 ÔN TẬP HTML và CSS (tt). KIỂM TRA GIỮA KỲ 
Câu 1: Sử dụng HTML và sử dụng định dạng mẫu CSS định dạng văn bản mẫu sau: 
 Ảnh tuỳ ý 
 8/18 
Câu 2: Sử dụng HTML tạo form sau: 
 9/18 
TUẦN 7: THỰC HÀNH DREAMWAVER 
Sử dụng Dreamwaver 8.0 thực hành các mẫu trang Web các bài tập 6-12 (bài tập giao ở phần Tuần 1) 
TUẦN 8: THỰC HÀNH DREAMWAVER(tt) 
Sử dụng Dreamwaver 8.0 thực hành các mẫu trang Web các bài tập 12-20 (bài tập giao ở phần Tuần 1) 
TUẦN 9: TẠO WEB CHUYÊN ĐỀ 
Thiết kế Website giới thiệu cửa hàng sách với cấu trúc trang chủ như sau: 
 Phần banner: hình ảnh, giới thiệu cửa hàng sách, hình ảnh quảng cáo (nếu có) 
 Ngày tháng năm 
 Tạo form đăng Các liên kết nhanh: quay lại trang chủ/Sách bán chạy/Sách giảm giá 
 nhập 
 Phần trang chính, hiển thị các nội dung khi Phần phụ giới thiệu: 
 Tạo form tìm kiếm nhấn chuột vào các liên kết - các loại sách bán chạy.(tối đa 5 
 thông tin đầu sách) 
 - các loại sách giảm giá.(tối đa 5 
 Menu chính: đầu sách) 
 (giới thiệu các chủ 
 đề của sách) 
 Kinh tế 
 Phát luật 
 Tin học 
 … 
 Thông tin về bản quyền Website. 
 Thông tin liên hệ 
Yêu cầu: 
1) Sử dụng công cụ thiết kế phần mềm Dreamwaver 8.0. 
2) Sử dụng tư liệu và ảnh qua CD 
3) Tạo Website lưu trữ tại ổ đĩa: D:/Tên sinh viên 
4) Tạo trang chủ. 
- theo cấu trúc yêu cầu, hình thức dễ nhìn, cóliên kết đầy đủ đến các trang liên kết ở câu 5. 
5) Tạo các trang liên kết (giống phần banner, menu chính và phần phụ, chỉ thay đổi nội dung ở phần trang chính): 
- Trang giới thiệu sách Kinh tế khi nhấn chuột vào chủ đề Kinh tế ở menu chính 
- Trang giới thiệu sách Pháp luật khi nhấn chuột vào chủ đề Pháp luật ở menu chính. 
- Trang giới thiệu sách Tin học khi nhấn chuột vào chủ đề Tin học ở menu chính . 
- Trang giới thiệu chi tiết thông tin về sách bán chạy khi nhấn chuột chọn 1 sách bán chạy tại phần phụ. (thực hiện 1 
trang về 1 loại sách) . 
- Trang giới thiệu chi tiết thông tin về sách giảm giá khi nhấn chuột chọn 1 sách giảm giá tại phần phụ. (thực hiện 1 
trang về 1 loại sách) 
- Trang giới thiệu sách bán chạy trong cửa hàng (tối đa 10 sách) khi nhấn chuột vào liên kết nhanh dưới phần banner. 
- Trang giới thiệu sách giảm giá trong cửa hàng (tối đa 10 sách) khi nhấn chuột vào liên kết nhanh dưới phần banner. 
 10/18 
TUẦN 10: THỰC HÀNH JAVASCRIPT 
1. Bài tập 1: 
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: 
1: 
2: 
3: 
2. Bài tập 2 
Khi Click chuột vào nút Message thì hiện lên câu chào: 
3.Bài tập 3 
Chào tạm biệt 
Khi đóng cửa số trình duyệt thì xuất hiện lời chào tạm biệt. 
Click the back to see the Example 
 11/18 
Click the back to see the Example! 
4. Bài tập 4: 
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ả. 
function rusure(){ 
question = confirm("YOUR CONFIRM MESSAGE") 
if (question !="0"){ 
top.location = "YOUR LINK GOES HERE" 
} 
} 
Now put this anywhere in your page and change YOUR LINK DESCRIPTION 
YOUR LINK DESCRIPTION 
5.Bài tập 5: 
Hãy tạo một chương trình máy tính như sau: 
function a_plus_b(form) { 
a=eval(form.a.value) 
b=eval(form.b.value) 
c=a+b 
form.ans.value = c 
} 
function a_minus_b(form) { 
a=eval(form.a.value) 
b=eval(form.b.value) 
c=a-b 
form.ans.value=c 
} 
function a_times_b(form) { 
a=eval(form.a.value) 
b=eval(form.b.value) 
c=a*b 
form.ans.value=c 
} 
function a_div_b(form) { 
a=eval(form.a.value) 
 12/18 
b=eval(form.b.value) 
c=a/b 
form.ans.value = c 
} 
function a_pow_b(form) { 
a=eval(form.a.value) 
b=eval(form.b.value) 
c=Math.pow(a, b) 
form.ans.value = c 
} 
E:\button\windowsizer_.htm 
 <input type="button" value=" + " 
onClick="a_plus_b(this.form)"> <input type="button" value=" - " 
onClick="a_minus_b(this.form)"> <input type="button" value=" x " 
onClick="a_times_b(this.form)"> <input type="button" value=" / " 
onClick="a_div_b(this.form)"> <input type="button" value=" ^ " 
onClick="a_pow_b(this.form)"> = 
<input 
type "number" value="0" name="ans" size="9"> 
TUẦN 11: THỰC HÀNH JAVASCRIPT (tt) 
6.Bài tập 6: 
Tạo một chương trình lịch để bàn như sau: 
 Lich nam 
<!-- Begin 
monthnames = new Array("January","Februrary","March","April","May","June", 
"July","August","September","October","November","Decemeber"); 
var linkcount=0; 
function addlink(month, day, href) { 
 13/18 
var entry = new Array(3); 
entry[0] = month; 
entry[1] = day; 
entry[2] = href; 
this[linkcount++] = entry; 
} 
Array.prototype.addlink = addlink; 
linkdays = new Array(); 
monthdays = new Array(12); 
monthdays[0]=31; 
monthdays[1]=28; 
monthdays[2]=31; 
monthdays[3]=30; 
monthdays[4]=31; 
monthdays[5]=30; 
monthdays[6]=31; 
monthdays[7]=31; 
monthdays[8]=30; 
monthdays[9]=31; 
monthdays[10]=30; 
monthdays[11]=31; 
todayDate=new Date(); 
thisday=todayDate.getDay(); 
thismonth=todayDate.getMonth(); 
thisdate=todayDate.getDate(); 
thisyear=todayDate.getYear(); 
thisyear = thisyear % 100; 
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear)); 
if (((thisyear % 4 == 0) && !(thisyear % 100 == 0))||(thisyear % 400 == 0)) monthdays[1]++; 
startspaces=thisdate; 
while (startspaces > 7) startspaces-=7; 
startspaces = thisday - startspaces + 1; 
if (startspaces < 0) startspaces+=7; 
document.write("<table border=2 bgcolor=white "); 
document.write("bordercolor=black>"); 
document.write(""+ monthnames[thismonth] + " " + thisyear+ 
""); 
document.write(""); 
document.write("Su"); 
document.write("M"); 
document.write("Tu"); 
document.write("W"); 
document.write("Th"); 
document.write("F"); 
document.write("Sa"); 
document.write(""); 
document.write(""); 
for (s=0;s<startspaces;s++) { 
document.write(" "); 
} 
 14/18 
count=1; 
while (count <= monthdays[thismonth]) { 
for (b = startspaces;b<7;b++) { 
linktrue=false; 
document.write(""); 
for (c=0;c<linkdays.length;c++) { 
if (linkdays[c] != null) { 
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) { 
document.write(""); 
linktrue=true; 
} 
} 
} 
if (count==thisdate) { 
document.write(""); 
} 
if (count <= monthdays[thismonth]) { 
document.write(count); 
} 
else { 
document.write(" "); 
} 
if (count==thisdate) { 
document.write(""); 
}if ( 
linktrue) 
document.write(""); 
document.write(""); 
count++; 
} 
document.write(""); 
document.write(""); 
startspaces=0; 
} 
document.write(""); 
// End --> 
7.Bài tập 7: 
Khi click vào link và button thì cho phép nhập vào địa chỉ người nhận và tiêu đề thư. 
<!-- Begin 
function mailsome1(){ 
 15/18 
who=prompt("Enter recipient's email address: ","antispammer@earthling.net"); 
what=prompt("Enter the subject: ","none"); 
if (confirm("Are you sure you want to mail "+who+" with the subject of "+what+"?")==true){ 
parent.location.href='mailto:'+who+'?subject='+what+''; 
} 
}/ 
/ End --> 
E-Mail Someone! 
8.Bài tập 8 
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 
<!-- Begin 
function customize(form) { 
var address = document.form1.url.value; 
var op_tool = (document.form1.tool.checked== true) ? 1 : 0; 
var op_loc_box = (document.form1.loc_box.checked == true) ? 1 : 0; 
var op_dir = (document.form1.dir.checked == true) ? 1 : 0; 
var op_stat = (document.form1.stat.checked == true) ? 1 : 0; 
var op_menu = (document.form1.menu.checked == true) ? 1 : 0; 
var op_scroll = (document.form1.scroll.checked == true) ? 1 : 0; 
var op_resize = (document.form1.resize.checked == true) ? 1 : 0; 
var op_wid = document.form1.wid.value; 
var op_heigh = document.form1.heigh.value; 
var option = "toolbar="+ op_tool +",location="+ op_loc_box +",directories=" 
 16/18 
+ op_dir +",status="+ op_stat +",menubar="+ op_menu +",scrollbars=" 
+ op_scroll +",resizable=" + op_resize +",width=" + op_wid +",height="+ op_heigh; 
var win3 = window.open("", "what_I_want", option); 
var win4 = window.open(address, "what_I_want"); 
}f 
unction clear(form) { 
document.form1.wid.value=""; 
document.form1.heigh.value=""; 
} 
// End --> 
Please choose from the following selections to customize your window 
: URL 
: Toolbar 
: Location 
: Directories 
: Status 
: Menubar 
: Scrollbars 
: Resizable 
: Width 
: Height 
10. Bài tập 10: 
Kiểm tra tính hợp lệ của thông tin nhập vào: 
<!-- Begin 
function validate(){ 
var digits="0123456789" 
var temp 
if (document.testform.Name.value=="") { 
alert("No Name !") 
return false 
} 
if (document.testform.age.value=="") { 
alert("Invalid Age !") 
 17/18 
return false 
} 
for (var i=0;i<document.testform.age.value.length;i++){ 
temp=document.testform.age.value.substring(i,i+1) 
if (digits.indexOf(temp)==-1){ 
alert("Invalid Age !") 
return false 
} 
} 
return true 
}// End --> 
Name: 
Age: 
TUẦN 12: ÔN TẬP VÀ KIỂM TRA GIỮA KỲ 
 18/18