BÀI TẬP THỰC HÀNH THIẾT KẾ WEB
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.05 MB, 37 trang )
Bài tập Thiết Kế Web
BÀI TẬP THỰC HÀNH THIẾT KẾ WEB
Phần 1: NGƠN NGỮ HTML
u cầu chung
• Tạo cây thư mục có cấu trúc như sau, lưu giữ các tập tin HTM
vào thư mục HTMLS
• Nội dung văn bản sử dụng bảng mã Unicode
• Mỗi thư mục sẽ lưu 1 loại tập tin, Lưu giữ bài tập để sử dụng
về sau
BÀI TẬP 01
Sử dụng trình soạn thảo NotePad soan thảo nội dung sau lưu vào thư mục HTML
• Đặt tên là: Wellcom.htm
• Save as type: All Files
• Encoding: UTF-8
•
•
•
<HTML>
<HEAD>
<TITLE> Well com to HTML </TITLE>
</HEAD>
<BODY>
Chào mừng bạn đã đến với ngôn ngữ thiết kế web HTML (Hypertext Makup
Language)
</BODY>
</HTML>
Mở xem kết quả trang HTML
Xem Source Code trang web từ trình duyệt
Mở tập tin HTML từ trình soạn thảo và lưu lạI với tên khác là: Wellcom2.HTM
Điều chỉnh nội dung hiện thị trong trang là: Chúc các bạn học tốt ngôn ngữ
HTML
BÀI TẬP 02 (Lưu tập tin tên Cohaimo.htm)
Sử dụng ngôn ngữ HTM soạn thảo trang Web có nội dung và định dạng theo mẫu
u cầu:
• 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ú
• 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ÀI TẬP 03 (Lưu tập tin tên: ChisoTrenduoi.htm)
Yêu cầu: Dòng 1 cỡ chữ 4 in đậm
BÀI TẬP 04 (Lưu tập tin tên: Kyhieudacbiet.htm)
• 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.
Biên soạn: Dương Thành Phết
Trang 1
Bài tập Thiết Kế Web
•
Màu nền tùy ý. tất cả văn bản khơng bị rớt dịng.
Biên soạn: Dương Thành Phết
Trang 2
Bài tập Thiết Kế Web
BÀI TẬP 05: (Lưu tập tin tên: Hieuungvb.htm)
Tạo hiệu ưng chuyển động cho các dòng văn bản trên trang:
Lặp liên tục từ trái sang phải, chữ đỏ, cỡ 4
LoạI hiệu ứng: Đến viền trang hiệu ứng chuyển
động ngược lại (Alternate).
BÀI TẬP 06: (Lưu tập tin tên:
ChuongTrinhDTWeb1.htm)
• 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ÀI TẬP 07: (Lưu tập tin tên: ChuongTrinhDTWeb2.htm)
• 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ÀI TẬP 08: (Lưu tập tin tên: ChuongTrinhDTWeb.htm)
Thiết kế dạng danh sách có đánh số thứ tự lồng nhau. Đường kẽ ngang khơng bóng 30%
cửa sổ. Dịng cuối dạng văn bản chú
thích.
BÀI TẬP 09: (Lưu tập tin tên: ChuongTrinhDTTHVP.htm)
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.
Biên soạn: Dương Thành Phết
Trang 3
Bài tập Thiết Kế Web
BÀI TẬP 10: (Lưu tập tin tên: TaisanBill.htm)
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 th61ng 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ÀI TẬP 11: (Lưu tập tin tên: Nhacnen.htm)
Thiết kế trang Web có nhúng 1 tập tin nhạc (Audio,Video, Flash) tự
động phát và lặp lạI liên tục Control điều khiển canh giữa
BÀI TẬP 12: (Lưu tập tin tên: Chuotdongho1.htm)
Truy cập vào Website: www.javaScriptbank.com
www.echip.com.vn hoặc www.google.com.vn tìm “thư
viện javaScript “ chọn hiệu ứng chuột đồng hồ thực hiện
nhúng trực tiếp vào trang web.
BÀI TẬP 13: (Lưu tập tin tên: Chuotdongho2.htm)
Thực hiện nhúng hiệu ứng JavaScript Chuột đồng hồ vào trang web thông qua tập tin
dongho.js.
BÀI TẬP 14
(Lưu tập tin tên: ChuongTrinhDaoTao.htm)
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.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ÀI TẬP 15: (Lưu tập tin tên: DanhBaWeb.htm)
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:
Biên soạn: Dương Thành Phết
Trang 4
Bài tập Thiết Kế Web
BÀI TẬP 16: (Lưu tập tin tên: Albumnhac.htm)
Play các tập tin nhạc ở 1 cửa sổ. Dịng chữ : “Nhạc Online” có
hiệu ứng chuyển động tùy ý.
BÀI TẬP 17: (Lưu tập tin tên: KetQuaHocTap.htm)
Yêu cầu: Thiết kế & Trình bày theo mẫu:
• 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 ý
• Canh lề và trộn ơ đúng theo mẫu,
BÀI TẬP 18: (Lưu tập tin tên: Dangnhap.htm)
Thiết kế trang sử dụng Form trình bày các đốI tượng:
Textbox,Password,SubmitButton,ResetButton
Nên kết hợp Table để trình bày
BÀI TẬP 19: (Lưu tập tin tên: Timkiem.htm)
Thiết kế trang tìm kiếm liên kết với Google theo
mẫu
BÀI TẬP 20: (Lưu tập tin tên: Gopy.htm)
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ÀI TẬP 21: (Lưu tập tin tên: Thamdoykien.htm)
Thiết kế trang sử dụng Form tạo các đối tượng bên trong theo mẫu. Nên kết hợp Table để
trình bày
Biên soạn: Dương Thành Phết
Trang 5
Bài tập Thiết Kế Web
BÀI TẬP 22: (Lưu tập tin tên: LKWebsite.htm)
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ÀI TẬP 23 (Lưu tập tin tên: Tintuc.htm)
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 cho 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.HTM”
• “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.htm”
• Các trang thiết kế theo mẩu sau:
Khi Cllick liên kết: “Kinh tế”
100
500
150
Khi Click liên kết “Chính trị ”
Biên soạn: Dương Thành Phết
600
Trang 6
Bài tập Thiết Kế Web
Phần 2: NGÔN NGỮ KỊCH BẢN JAVASCRIPT
Bài Tập 1: Tạo Giao Diện Như Sau
Yêu cầu: Khi Click chuột vào Radio Button thì có các thơng điệp (Message) tương ứng
<Form>
1:<INPUT TYPE="radio" NAME="radio" value="Bạn chọn số 1" onClick="alert(value)">
2:<INPUT TYPE="radio" NAME="radio" value=" Bạn chọn số 2 " onClick="alert(value)">
3:<INPUT TYPE="radio" NAME="radio" value=" Bạn chọn số 3” onClick="alert(value)" >
</Form>
Bài tập 2: Tạo Giao Diện Như Sau
Yêu cầu: Khi Click chuột vàonút Message thì hiện lên câu chào
<Form>
<input type="button" value="message" onClick="alert('How are you'); return true">
</Form>
BàI tập 3: Chào tạm biệt
Khi đóng cửa sổ trình duyệt hoặc chuyển sang
trang Web khác thì xuất hiện lời chào tạm biệt
<body onUnload="window.alert('This Message Appears When you exit a page!!!!!!!')">
<form>
<input TYPE="button" VALUE=" BACK " onClick="history.go(-1)">
</form>
Click the back to see the Example!
</body>
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ì ta link dến trang đó,
khơng thì ta khơng là gì cả
<script>
function Hoidap(){
question = confirm("Bạn thật sự muốn truy cập Website")
if (question !="0"){
top.location = " />}
}
</script>
Hãy click vào đây để truy cập website
<a href="" onClick="Hoidap(); return false;">Báo Tuổi Trẻ </a>
Biên soạn: Dương Thành Phết
Trang 7
Bài tập Thiết Kế Web
Bài tập 5: Hãy tạo một chương trình tính tốn như sau:
<html>
<head><script LANGUAGE="JavaScript">
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)
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
}
</script>
<title></title>
</head>
<body>
<form name="formx">
<input type="text" size="4" value="12" name="a">
<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" size="4" value="3" name="b"> =
<input type "number" value="0" name="ans" size="9">
</form>
</body></html>
Bài tập 6: Tạo một chương trình mơ tả “Lịch để bàn” như sau :
<body>
<script LANGUAGE="JavaScript">
monthnames = new Array("January","Februrary","March","April","May","June",
"July","August","September","October","November","Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
Biên soạn: Dương Thành Phết
Trang 8
Bài tập Thiết Kế Web
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("
document.write("<tr><td colspan=7>
+ thisyear + "</strong>
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
Biên soạn: Dương Thành Phết
Trang 9
Bài tập Thiết Kế Web
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
</script>
</body></html>
Bài tập 7: Gửi thư
Khi Click vào link hoặc button thì cho phép ta nhập vào địa chỉ người nhận và subject.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function mailsome1(){
who=prompt("Enter recipient's email address: ","");
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+'';
}
}
</SCRIPT>
<BODY>
<CENTER>
<a href='javascript:mailsome1()'>E-Mail Someone!</a>
<FORM>
<input type=button value="E-Mail Someone!" onClick="mailsome1()">
</FORM>
</CENTER>
Bài tập 8: Viết chương trình cho phép link dến một trang Web khác trong đó cho phép tuỳ
chọn các đối tượng Window
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
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="
+ 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");
}
Biên soạn: Dương Thành Phết
Trang 10
Bài tập Thiết Kế Web
function clear(form) {
document.form1.wid.value="";
document.form1.heigh.value="";
}
</SCRIPT>
<BODY>
<CENTER>
Please choose from the following selections to customize your window
<TABLE cellpadding=5 border><TR><TD><PRE>
<FORM name=form1 ACTION="javascript:" METHOD="POST">
<INPUT TYPE="text" NAME="url" value="" >: URL
<INPUT TYPE="checkbox" NAME="tool">: Toolbar
<INPUT TYPE="checkbox" NAME="loc_box">: Location
<INPUT TYPE="checkbox" NAME="dir">: Directories
<INPUT TYPE="checkbox" NAME="stat">: Status
<INPUT TYPE="checkbox" NAME="menu">: Menubar
<INPUT TYPE="checkbox" NAME="scroll">: Scrollbars
<INPUT TYPE="checkbox" NAME="resize">: Resizable
<INPUT TYPE="text" NAME="wid" value= >: Width
<INPUT TYPE="text" NAME="heigh" value=>: Height
<BR><CENTER>
<INPUT TYPE="button" VALUE="=ENTER=" OnClick="customize(this.form)">
<INPUT TYPE="reset" VALUE="=RESET=" onClick="clear(this.form)">
</PRE></TD></TR></TABLE>
</FORM>
</CENTER>
Bài tập 9: Kiểm tra tính hợp lệ của thông tin nhập vào
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
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 !");
return false;
}
for (var i=0;i
if (digits.indexOf(temp)==-1){
alert("Invalid Age !");
return false;
}
}
return true;
}
</SCRIPT>
<BODY>
<FORM name="testform" onSubmit="return validate()">
Name:<input type="text" size=30 name="Name">
Age:<input type="text" size=3 name="age">
<input type="submit" value="Submit">
</FORM>
</BODY>
Biên soạn: Dương Thành Phết
Trang 11
Bài tập Thiết Kế Web
Bài tập 10: Kiểm tra tính hợp lệ của thông tin nhập vào
<html>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<head>
<Script language=JavaScript>
function kiemtra(){
var ht=window.document.dangky.txthoten.value;
var na=window.document.dangky.nam.value;
var email=window.document.dangky.em.value;
var tdn=window.document.dangky.tdn.value;
var mk=window.document.dangky.mk.value;
var nlmk=window.document.dangky.nlmk.value
if(ht.length==0){
alert("vui lòng nhập họ ten");
window.document.dangky.txthoten.focus();
return false;
}
if(na.length==0){
alert("hãy điền năm sinh");
window.document.dangky.nam.focus();
return false;
}
if(isNaN(na)==true){
alert("Day khong phai la so");
window.document.dangky.nam.value="";
document.dangky.nam.focus();
return false;
}
re=/\w+@\w+\.\w+/;
if (email==""){
alert("Bạn chưa nhập email")
window.document.dangky.em.value="";
document.dangky.em.focus();
return false
}
else if(re.test(email)==false){
alert("Email không đúng định dạng!")
document.dangky.em.focus();
return false
}
if(tdn.length==0){
alert("hãy điền tên đăng nhập");
window.document.dangky.tdn.focus();
return false;
}
if(mk.length==0){
alert("hãy nhập mật khẩu");
window.document.dangky.mk.focus();
return false;
}
if(nlmk.length==0) {
alert("hãy nhập lại mật khẩu");
window.document.dangky.nlmk.focus();
return false;
}
if(mk != nlmk){
alert("mật khẩu và nhập lại mật khẩu ko trùng nhau");
window.document.dangky.nlmk.focus();
return false;
Biên soạn: Dương Thành Phết
Trang 12
Bài tập Thiết Kế Web
}
alert("Đăng ký thành công! Chúc mừng bạn");
return true;
}
</Script>
</head>
<Body>
ĐĂNG KÝ THÀNH VIÊN </H3>
<form action=dangkythanhvien.htm name=dangky method=post onSubmit="return kiemtra()">
<table border=0 align=center width="500">
<tr><td width="150">Họ và Tên:(*)</td><td width="350"><input type=text name="txthoten" >
</td></tr>
<tr><td >Giới Tính :</td><td >
<select name=gt size="1">
<option value=0>Nam
<option value=1>Nữ
</select></td></tr>
<tr><td>Ngày sinh :(*)</td>
<td >Ngày:<select name=ngay>
<option value=1>01<option value=2>02
<option value=3>03<option value=4>04
<option value=5>05<option value=6>06
<option value=7>07<option value=8>08
<option value=9>09<option value=10>10
<option value=11>11<option value=12>12
<option value=13>13<option value=14>14
<option value=15>15<option value=16>16
<option value=17>17<option value=18>18
<option value=19>19<option value=20>20
<option value=21>21<option value=22>22
<option value=23>23<option value=24>24
<option value=25>25<option value=26>26
<option value=27>27<option value=28>28
<option value=29>29<option value=30>30
<option value=31>31</select>
Tháng:<select name=thang>
<option value=1>01<option value=2>02
<option value=3>03<option value=4>04
<option value=5>05<option value=6>06
<option value=7>07<option value=8>08
<option value=9>09<option value=10>10
<option value=11>11<option value=12>12</select>
Năm:<input type=text size="3" name="nam"></td>
</tr>
<tr><td>Email (*)</td><td><input name="em" type="text" maxlength="40" size=20></td></tr>
<tr><td>Tên Đăng Nhập :(*)</td><td><input type=text name=tdn size=20></td></tr>
<tr><td>Mật khẩu :(*)</td><td><input type=password name=mk size=20 ></td></tr>
<tr><td>Nhập lại Mật khẩu :(*)</td><td><input type=password name=nlmk size=20 ></td></tr>
<tr><td></td><td ><input type=submit value="Đăng ký"></table></form>
</body>
</html>
Biên soạn: Dương Thành Phết
Trang 13
Bài tập Thiết Kế Web
BàI tập 11: Tạo dòng chữ chạy trên thanh trạng thái: “Welcome to Total.. .”
<html>
<head><script LANGUAGE="JavaScript">
function scrollit(seed) {
var m1 = "Welcome to Total JavaScript 99! ";
var m2 = "..... You can find all the scripts you need here! ";
var m3 = "......Enjoy ";
var m4 = "";
var msg=m1+m2+m3+m4;
var out = " ";
var c = 1;
if (seed > 100) {
seed--;
cmd="scrollit("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
window.status=out;
cmd="scrollit("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
window.status=out;
cmd="scrollit("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollit(100)",75);
}
}
}
</script>
</head>
<body onLoad="scrollit(100)">
</body>
</html>
BàI tập 12: Tạo dòng chữ chạy trong TextBox
<script language="JavaScript">
var max=0;
function textlist(){
max=textlist.arguments.length;
for (i=0; i
}
tl=new textlist( "This is a message", "Another one", "And this will be the third",
"And the fourth is the last !" );
var x=0; pos=0;
Biên soạn: Dương Thành Phết
Trang 14
Bài tập Thiết Kế Web
var l=tl[0].length;
function textticker() {
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
if(pos++==l) { pos=0; setTimeout("textticker()",1000); x++;
if(x==max) x=0; l=tl[x].length; } else
setTimeout("textticker()",50);
}
</script>
<html>
<head>
<title> </title>
</head>
<body onLoad="textticker()">
<form name="tickform">
<input type="text" name="tickfield" size="40">
</form>
</body>
</html>
Ví dụ 13: Tạo ngày tháng chạy trên thanh trạng thái
<html><head><title> </title></head>
<body>
<script LANGUAGE="JavaScript">
var osd = " ";
osd +="This is yet another JavaScript Scroll example ";
osd +="from the good folks at The JavaScript Source. ";
osd +="This one has the date and time at the front.";
osd +="Did you notice? It's coming around again, look! ";
osd +="
";
var timer;
var msg = "";
function scrollMaster () {
msg = customDateSpring(new Date());
clearTimeout(timer);
msg += " " + showtime() + " " + osd;
for (var i= 0; i < 100; i++){
msg = " " + msg;
}
scrollMe()
}
function scrollMe(){
window.status = msg;
msg = msg.substring(1, msg.length) + msg.substring(0,1);
timer = setTimeout("scrollMe()", 200);
}
function showtime (){
var now = new Date();
var hours= now.getHours();
var minutes= now.getMinutes();
var seconds= now.getSeconds();
var months= now.getMonth();
var dates= now.getDate();
var years= now.getYear();
var timeValue = "";
timeValue += ((months >9) ? "" : " ");
timeValue += ((dates >9) ? "" : " ");
timeValue = ( months +1);
timeValue +="/"+ dates;
Biên soạn: Dương Thành Phết
Trang 15
Bài tập Thiết Kế Web
timeValue +="/"+ years;
var ap="A.M.";
if (hours == 12) {
ap = "P.M.";
}
if (hours == 0) {
hours = 12;
}
if(hours >= 13){
hours -= 12;
ap="P.M.";
}
var timeValue2 = " " + hours;
timeValue2 += ((minutes < 10) ? ":0":":") + minutes + " " + ap;
return timeValue2;
}
function MakeArray(n) {
this.length = n;
return this;
}
monthNames = new MakeArray(12);
monthNames[1] = "Janurary";
monthNames[2] = "February";
monthNames[3] = "March";
monthNames[4] = "April";
monthNames[5] = "May";
monthNames[6] = "June";
monthNames[7] = "July";
monthNames[8] = "August";
monthNames[9] = "Sept.";
monthNames[10] = "Oct.";
monthNames[11] = "Nov.";
monthNames[12] = "Dec.";
daysNames = new MakeArray(7);
daysNames[1] = "Sunday";
daysNames[2] = "Monday";
daysNames[3] = "Tuesday";
daysNames[4] = "Wednesday";
daysNames[5] = "Thursday";
daysNames[6] = "Friday";
daysNames[7] = "Saturday";
function customDateSpring(oneDate) {
var theDay = daysNames[oneDate.getDay() +1];
var theDate =oneDate.getDate();
var theMonth = monthNames[oneDate.getMonth() +1];
var dayth="th";
if ((theDate == 1) || (theDate == 21) || (theDate == 31)) {
dayth="st";
}
if ((theDate == 2) || (theDate ==22)) {
dayth="nd";
}
if ((theDate== 3) || (theDate == 23)) {
dayth="rd";
}
return theDay + ", " + theMonth + " " + theDate + dayth + ",";
}
scrollMaster();
</script></body></html>
Biên soạn: Dương Thành Phết
Trang 16
Bài tập Thiết Kế Web
Bài Tập 14: Tạo dòng chữ bay vào thanh trạng tháI từng chữ cái một
<html>
<head><script LANGUAGE="JavaScript">
function scroll(jumpSpaces,position) {
var msg = "Another JavaScript Example! Do you like it?"
var out = ""
if (killScroll) {return false}
for (var i=0; i
out += msg.charAt(i);
}
for (i=1;i
}
out += msg.charAt(position);
window.status = out;
if (jumpSpaces <= 1) {
position++;
if (msg.charAt(position) == ' ') {
position++;
}
jumpSpaces = 100-position;
}
else if (jumpSpaces > 3) {
jumpSpaces *= .75;
}else {
jumpSpaces--;
}
if (position != msg.length) {
var cmd = "scroll(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,5);
} else {
scrolling = false;
return false;
}
return true;
}
function startScroller() {
if (scrolling)
if (!confirm('Re-initialize snapIn?'))
return false;
killScroll = true;
scrolling = true;
var killID = window.setTimeout('killScroll=false',6);
scrollID = window.setTimeout('scroll(100,0)',10);
return true;
}
var scrollID = Object
var scrolling = false
var killScroll = false
</script>
</head>
<body onLoad="startScroller()">
</body></html>
Bài Tập 15: Tạo 3 button như sau :
<html>
<head><title>Create a New Window</title></head>
<body>
<form NAME="winform">
Biên soạn: Dương Thành Phết
Trang 17
Bài tập Thiết Kế Web
onClick="NewWin=window.open('','NewWin','toolbar=no,status=no,width=200,height=100');">
<input TYPE="button" VALUE="Close New Window" onClick="NewWin.close();">
<input TYPE="button" VALUE="Close Main Window" onClick="window.close();">
</form>
</body></html>
Bài Tập 16: Cửa sổ tự trượt
<script language="JavaScript1.2">
var currentpos=0,alt=1,curpos1=0,curpos2=-1;
function initialize(){
startit();
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop;
else
temp=window.pageYOffset;
if (alt==0)
alt=1;
else
alt=0;
if (alt==0)
curpos1=temp;
else
curpos2=temp;
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+1;
else
currentpos=window.pageYOffset+1;
window.scroll(0,currentpos);
}else{
currentpos=0;
window.scroll(0,currentpos);
}
}
function startit(){
setInterval("scrollwindow()",10);
}
window.onload=initialize;
</script>
Bài tập 17: Tạo Combo box có fulldown menu
<html>
<head><script LANGUAGE="JavaScript">
function formHandler(){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}
</script>
</head>
<body>
<form name="form">
<select NAME="site" SIZE="1" onChange="formHandler()">
<option VALUE>Go to.... </option>
<option VALUE="">Metacrawler </option>
<option VALUE="">Altavista </option>
Biên soạn: Dương Thành Phết
Trang 18
Bài tập Thiết Kế Web
<option VALUE="">Webcrawler </option>
<option VALUE="">Lycos </option>
<option VALUE="">The JavaScript Source </option>
</select>
</form>
</body>
</html>
Bài Tập 18: Tạo hiệu ứng ; khi đưa chuột vào thì xuất hiện ảnh khác khi đưa ra khỏi ảnh thì
hiện ảnh cũ
<html>
<head><title>Document Title</title></head>
<body link="ffffff" alink="ffffff" vlink="ffffff">
<font SIZE="+2" FACE="Coronet">
onMouse<b><i>Over</i></b></font>
<a href="index.htm" onMouseOver="s.src='_view1.gif'" onMouseOut="s.src='_view2.gif'">
<img SRC="_view2.gif" name="s" width="158" height="29"></a>
<font SIZE="+2" FACE="Coronet">onMouse<b><i>Out</i></b></font>
<b>Pass the mouse over the images </b>
<b>Check out the script! See how easy this function is.</b>
</body></html>
Bài Tập 19: Tạo nút bấm khi người dùng bấm vào thì hiện mã nguồn chương trình
<FORM>
OnClick='window.location="view-source:" +window.location.href'>
</FORM>
Bài Tập 20: Sử dụng Cookies để đếm số lần truy cập trang Web
<html><head><script LANGUAGE="JavaScript">
function GetCookie (name) {
var arg = name + "=" , alen = arg.length , clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments, argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null , var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null , var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" +
domain)) +((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var expDays = 30;
Biên soạn: Dương Thành Phết
Trang 19
Bài tập Thiết Kế Web
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count');
SetCookie('count',newcount,exp);
return count;
}
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
</script>
</head>
<body>
<script LANGUAGE="JavaScript">
document.write("You've been here <b>" + amt() + "</b> times.")
</script>
</body>
</html>
Biên soạn: Dương Thành Phết
Trang 20
Bài tập Thiết Kế Web
Phần 3 : Ngôn Ngữ CSS
Bài tập 1: Tạo trang mơ hình về định dạng văn bản: Định nghĩa thẻ tiêu đề H1, H2 và thẻ P
có mà tùy ý và áp dụng vào 3 dịng đầu. Dùng thẻ Span thực tạo điểm nhấn: Tô sáng nền,
chữ đậm áp dụng vào dòng thứ 4.
<html>
<head>
<style type="text/css">
h1 {
color: #00ff00
}
h2 {
color: #dda0dd
}
p {color: rgb(0,0,255)}
span.highlight{
background-color:yellow;
font-weight:bold
}
</style>
</head>
<body>
This is header 1
This is header 2
This is a paragraph
<span class="highlight">This is a text.</span> This is a text. This is a text. This is a
text.This is a text. This is a text.
</body>
</html>
Bài tập 2: Tạo trang mơ hình về tạo góc gấp cho khung văn bản: Khung có độ rộng 300px,
có khung viền kết hợp gấp góc dưới phải.(gấp góc là 1 ảnh do giáo viên cung cấp. áp dụng
vào thoe hình mẫu
<html>
<head>
<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}
.curlycontainer .innerdiv{
background: transparent url(brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>
</head>
<body>
<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b>
Some text here.Some text here. Some text here.
Some text here.Some
text here. Some text here.
Some text here.Some text here. Some text here.
Some text
here.Some text here.</div></div>
</body>
</html>
Biên soạn: Dương Thành Phết
Trang 21
Bài tập Thiết Kế Web
Bài tập 3: Mơ hình vấn đề chèn hình ảnh và phụ đề theo hình mẫu: Hình ảnh trơi về bên
phải, trong một khoảng trống bằng khoảng 20% độ rộng của các đoạn xung quanh, có
đường viên, văn bản phụ đề in nghiêng, canh giữa, cỡ nhỏ.
Hướng dẫn:
• File css
•
div.figure {
float: right;
width: 20%;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
div.figure p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}
File HTML
<html>
<head> <title>Hinh Anh Va Phu De</title>
<link rel="stylesheet" type="text/css" href="hinhanh.css" />
</head>
<body>
<div class="figure">
<img src="ThapEiffel.bmp" width="136" height="200" alt="Eiffel tower">
Scale model of the Eiffel tower in Parc Mini-France
</div>
Hình ảnh và phụ đề. . . . .
</body> </html>
Bài tập 4: Mơ hình định dạng bảng đơn giản dùng CSS: Định dạng Font chữ, cỡ chữ
khoảng các lề, có viền, màu nên cho dịng tiêu đề . .. . theo hình mẫu:
Hướng dẫn:
• File css
•
.tablelist {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0px;
border: 1px solid #EBDDBC;
}
.tablelist th {
margin: 0;
padding: 4px 6px;
border: 1px solid #EBDDBC;
background-color: #F1EFD8;
}
.tablelist td {
margin: 0;
padding: 4px;
border: 1px solid #EBDDBC;
}
File HTML
<html>
<head> <title>Table</title>
Biên soạn: Dương Thành Phết
Trang 22
Bài tập Thiết Kế Web
<link rel="stylesheet" type="text/css" href="Table.css" />
</head>
<body>
<H3> DANH SÁCH NHÂN VIÊN </H3>
<table class="tablelist">
<tr>
<th>Số thứ tự</th>
<th>Họ và tên</th>
<th>Giới tính</th>
</tr>
<tr>
<td>1</td>
<td>Nguyễn Quang Thọ</td>
<td>Nam</td>
</tr>
<tr>
<td>2</td>
<td>Trần Mai Dung</td>
<td>Nữ</td>
</tr>
</table>
</body>
</html>
Bài tập 5: Mơ hình tạo màu cho thanh cuộn cửa sổ : Sử dụng màu sắc tùy ý cho các thanh
phần thanh cuộn theo hình mẫu:
Hướng dẫn:
• File css
•
body {
scrollbar-face-color : SILVER;
scrollbar-shadow-color :BLACK;
scrollbar-highlight-color :RED;
scrollbar-3dlight-color : GREEN;
scrollbar-darkshadow-color : LIME;
scrollbar-track-color : YELOW;
scrollbar-arrow-color : RED;
}
File HTML
<html>
<head> <title>Table</title>
<link rel="stylesheet" type="text/css" href="Mauthanhcuon.css" />
</head>
<body>
Chào các bạn. . . . . .
</body>
</html>
Bài tập 6: Tạo Menu 1 tầng dọc với hiệu ứng đổi màu nền và màu chữ có khung viền bao
theo hình mẫu:
Hướng dẫn:
• File css
ul,li,a {
display:block;
margin:0;
padding:0;
border:0;
}
ul {
width:150px;
border:1px solid #9d9da1;
Biên soạn: Dương Thành Phết
Trang 23
Bài tập Thiết Kế Web
background:white;
list-style:none;
•
}
li {
position:relative;
padding:1px;
padding-left:26px;
background:url("item_moz.gif") no-repeat;
z-index:9;
}
a{
padding:2px;
border:1px solid white;
text-decoration:none;
color:gray;
font-weight:bold;
width:100%;
}
a:hover {
border-color:gray;
background-color:#bbb7c7;
color:black;
}
File HTML
<html>
<head> <title>Menu 1 tang </title>
<link rel="stylesheet" type="text/css" href="Menu1tang.css" />
</head>
<body>
<ul>
<li><a href="#"> Trang chủ</a></li>
<li><a href="#"> Tin tức</a> </li>
<li><a href="#"> Giải Trí</a> </li>
<li><a href="#"> Liên hệ</a> </li>
</ul>
</body>
</html>
Bài tập 7: Dùng css áp dụng dóng hàng khi thiết kế form khơng dùng thẻ Table theo hình
mẫu:
Hướng dẫn:
• File css
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width: 1em;
}
Biên soạn: Dương Thành Phết
Trang 24
Bài tập Thiết Kế Web
•
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
br{
clear: left;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
File HTML
<html>
<head> <title>Form dùng Tableless</title>
<link rel="stylesheet" type="text/css" href="Tableless.css" />
</head>
<body>
<form>
<label for="user">Name</label>
<input type="text" name="user">
<label>Email Address:</label>
<input type="text" name="emailaddress" >
<label>Comments:</label>
<textarea name="comments"></textarea>
<label>Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes">
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
</body>
</html>
Bài tập 8: Dùng css tạo gallery dạng thumbnail (Over chuột vào vào ảnh sẽ hiển thị khung chứa ảnh và
nhiều nội dung khác) , thuận tiện cho việc tạo gallery trong phần admin hoặc trong các icon của mẫu tin
•
File CSS
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 200px;
border: 1px dashed gray;
width:280px;
text-align: justify;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 1;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
Biên soạn: Dương Thành Phết
Trang 25
