› site › thayminhvu... BÀI TẬP THỰC HÀNH THIẾT KẾ WEB Phần 1: NGÔN NGỮ …BÀI TẬP THỰC HÀNH THIẾT KẾ WEB Phần 1: NGÔN NGỮ HTML Yêu cầu chung Tạo

Bài tập Thiết Kế Web

Trang 1

BÀI TẬP THỰC HÀNH THIẾT KẾ WEB Phần 1: NGÔN NGỮ HTML Yê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

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 Yê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.

Màu nền tùy ý. tất cả văn bản không bị rớt dòng.

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


Trang 2

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.


Trang 3

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 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: [email protected]

http://www.vnexpress.net/

http://www.tuoitre.com.vn/

http://www.nhacso.net/

http://www.ngoisao.net/

http://www.echip.com.vn/

http://www.vietnamnet.vn/


Trang 4

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


Trang 5

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) Yê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ế”

Khi Click liên kết “Chính trị ”

100

500

600 150

http://www.laodong.com.vn/

http://www.vnexpress.net/

http://www.tuoitre.com.vn/


Trang 6

Phần 2 : 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>

<h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> <p><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. <span class="highlight">This is a text.</span></p>

</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 theo 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> <br />Some text here.Some text here. Some text here.<br />Some text here.Some text here. Some text here.<br />Some text here.Some text here. Some text here.<br />Some text here.Some text here.</div></div> </body>


Trang 7

</html>

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"> <p><img src="ThapEiffel.bmp" width="136" height="200" alt="Eiffel tower"> <p>Scale model of the Eiffel tower in Parc Mini-France </div>

<p align=justify> Hình ảnh và phụ đề. . . . .</p> </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>


Trang 8

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


Trang 9

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>


Trang 10

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;


Trang 11

text-decoration: none; } .thumbnail span img{ border-width: 1; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 60px; /*position where enlarged image should offset horizontally */ }

File HTML <html> <head> <title>Table</title> <link rel="stylesheet" type="text/css" href="Thumnail.css" /> </head> <body> <a class="thumbnail" href="#"><img src="h1.jpg" width="45" height="45"> <span><img src="h2.jpg" with="200" height="200"><BR>Đây là đoạn CSS đơn giản để làm gallery dạng thumbnail, rất 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</span></a> </body> </html>


Trang 12

Phần 3: 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> <p><input TYPE="button" VALUE=" BACK " onClick="history.go(-1)"> </p> </form> <p>Click the back to see the Example!</p>

</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 = "http://www.tuoitre.com.vn/" } } </script> Hãy click vào đây để truy cập website <a href="" onClick="Hoidap(); return false;">Báo Tuổi Trẻ </a>


Trang 13

Bài tập 5: Hãy tạo một chương trình tính toá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"> <p><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"> </p> </form> </body></html>

Bài tập 6: 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: ","[email protected]"); what=prompt("Enter the subject: ","none"); if (confirm("Are you sure you want to mail "+who+" with the subject of "+what+"?")==true){


Trang 14

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 7: 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<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;

} </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>


Trang 15

Bài tập 8: 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;


Trang 16

} alert("Đăng ký thành công! Chúc mừng bạn"); return true; } </Script> </head> <Body> <h3 Align=Center> ĐĂ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ý"><Input type=reset value="Bỏ qua"</td></tr> </table></form> </body> </html>


Trang 17


Trang 18

Documents

› site › thayminhvu... BÀI TẬP THỰC HÀNH THIẾT KẾ WEB Phần 1: NGÔN NGỮ …BÀI TẬP THỰC HÀNH THIẾT KẾ WEB Phần 1: NGÔN NGỮ HTML Yêu cầu chung Tạo