Ver 2022, FIT Thực hành Phát triển ứng dụng Webp

1 LAB Form

1. Tạo trang html mới, lưu với tên form1.html.

2. Nhấp chuột trong vùng form, chèn table 2 cột, 10 hàng, cellpadd=4, border=1,
width=500, cellspace=0, caption= ĐĂNG KÝ THẢNH VIÊN CLB YÊU NHẠC
3. Nhấp ở cột trái rồi gõ vào các nhãn :

4. Nhấp ô phía sau Họ tên, chèn Input (Text) ID=txtHoTen

5. Nhấp ô phía sau Tên đăng nhập, chèn Input (Text)ID=txtUserName
6. Nhấp ô phía sau Mật khẩu, chèn Input (Password) ID=txtPass
7. Nhấp ô phía sau Gõ lại mật khẩu, chèn Input (Password) ID=txtRepass
8. Nhấp ô phía sau Phái, chèn 2 Input (Radio) có tên=rdPhai (name giống nhau cho 2
radio button), 2 mục Nam = 0, Nữ = 1
9. Nhấp ô phía sau Ngoại ngữ, chèn 3 Input (Checkbox) lần lượt có ID=chkAnh,
Label=Anh, ID=chkPhap, Label=Pháp, ID=chkHoa, Label=Hoa
10. Nhấp ô phía sau Nghề nghiệp, chèn Select có ID=cboNgheNghiep, thêm 4 mục:
Label= Bạn làm nghề gì, Value=0
Label= Học sinh - Sinh viên, Value=1
Label= Giáo viên, Value=2
Label= Nhân viên, Value=3
(HD trực tiếp)
11. Nhấp ô phía sau Hình, chèn Input (File) ID= fHinh
12. Nhấp ô phía sau Sở thích, chèn TextArea ID=txtSoThich.
13. Chọn 2 ô của hàng cuối Merge lại, chỉnh Align=Center
14. Nhấp ô cuối, chèn Input(Submit) ID=btnDangKy, Value= Đăng ký
15. Nhấp sau nút dangky, chèn Input(Reset) ID=btnXoa, Value= Làm lại
16. Nhấp sau nút xoa, chèn Input (Hidden) tên là NgayDangKy, Value= 11/11/2011

Chú ý: Sử dụng các thẻ HTML5 Form để thiết kế. Tự thêm các thuộc tính requried,
placeholder, …
KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 1
 Ver 2022, FIT Thực hành Phát triển ứng dụng Webp

17. Tạo class tên

.mytextbox{ color: #99FF33; background-color: #006699;
border: 1px solid #996633; width: 300px;
}
Xong thì set class cho hoten, username, pass, repass, nghenghiep, hinh, sothich
18. Tạo style
#form1 table { border: 5px groove #993366;
background-color: #FFCCCC;color: #003399;
}
Chú ý: Style này để định dạng table trong form đăng ký (tên của form là form1)
19. Tạo style
#form1 table td {border: 1px solid #CC9999;}
20. Chỉnh CSS cho table tự canh giữa màn hình (magrin: 0px auto;).
21. Bấm F12 xem thử

KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 2

 Ver 2022, FIT Thực hành Phát triển ứng dụng Webp

Yêu cầu bổ sung:

1. Thêm trường độ tuổi trung bình chạy từ 18  45, mặc định 20.
2. Thêm trường thành phố: sử dụng datalist cho tùy chọn thành phố (tên thành phố
sinh viên tùy ý nhập, tối thiểu 7 thành phố).
3. Chỉnh sửa các thuộc tính theo CSS3 như border-radius, box-shadow, text-shadow,
multi-background, …

2 CSS3

2.1 Tạo chữ dropcap

<style>
p:first-letter {

KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 3

 Ver 2022, FIT Thực hành Phát triển ứng dụng Webp

float: left;
font-size: 45px;
line-height: 1;
font-weight: bold;
margin-right: 9px;
}
</style>

2.2 Tạo trang dạng cột báo

Sửa bài tập 2.1 để tự động chia 3 cột theo chiều rộng trang.
column-count: 3;
column-rule: 1px solid blue;
-webkit-column-count: 3;
-webkit-column-rule: 1px solid blue;

2.3 Transform
Tạo đoạn mã:
<ul>
<li><a href="#">Hover me!</a></li>
<li><a href="#">Hover me!</a></li>
<li><a href="#">Hover me!</a></li>
<li><a href="#">Hover me!</a></li>
</ul>
Bổ sung CSS transform:
li a:hover {
-webkit-transform: rotate(-10deg) scale(2);
transform: rotate(-10deg) scale(2);
}
Chạy thử demo:

KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 4

 Ver 2022, FIT Thực hành Phát triển ứng dụng Webp

3 Bài tập CSS

Yêu cầu trình bày sản phẩm như sau:

Ý tưởng thiết kế của một sản phẩm:

KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 5

 Ver 2022, FIT Thực hành Phát triển ứng dụng Webp

Mã HTML cho một sản phẩm cụ thể:

<div class="hh-box">
<div class="hh-box-name">Nokia 2012</div>
<img class="hh-box-image" src="images/product.png"/>
<div class="hh-box-price">$99.99</div>
<div class="hh-box-actions">
<a href="?mahh=1001"><img src="images/Favourites.png"/></a>
<a href="?mahh=1001"><img src="images/Letter.png"/></a>
<a href="?mahh=1001"><img src="images/Basket.png"/></a>
</div>
<img src="images/new-icon.jpg" class="hh-box-icon" width="60" />
</div>

Mã CSS tương ứng:

/*--hàng hóa--*/
.hh-box
{
border-radius: 5px; box-shadow: 0 0 5px silver;
position:relative; display: inline-block;
margin:25px 5px 5px 5px; padding: 15px 0px;
text-align:center; width:200px;
}
.hh-box:hover
{
box-shadow: 0 0 5px red;
}
.hh-box-image
{
width:130px; height:130px;
}
.hh-box-icon

KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 6

 Ver 2022, FIT Thực hành Phát triển ứng dụng Webp

{
position:absolute; top:0px; right:0px;
}
.hh-box-name
{
position:absolute;
left:0px; top:-20px; width: inherit;
text-align:center;
}
.hh-box-price
{
position:absolute; left:8px; bottom:8px;
font-weight:bold; color:silver;
}
.hh-box-actions
{
position:absolute; right:8px; bottom:5px; width:25px;
}
.hh-box-actions img
{
cursor:pointer; border:0px;
}

4 Thiết kế menu ngang

4.1 Menu ngang 1 cấp

HTML Code:

CSS Code:

KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 7

 Ver 2022, FIT Thực hành Phát triển ứng dụng Webp

h1{
text-align:center;
color:#F00; font-family:Arial;
}
.menu{
width:1200px; height:50px;
margin:auto; background-color:#CCC;
}
.menu ul{
padding:0; margin:0;
list-style:none;
}
.menu ul li{ float:left; }
.menu ul li a{
text-decoration:none;
padding:0 20px;
font-family:Arial;
color:#000;
font-size:14px;
line-height:50px;
display:block;
}
.menu ul li a:hover{
background-color:#333; color:#FFF;
line-height:48px;
border-bottom:2px solid #F00;
}

4.2 Menu ngang 2 cấp

CSS code:
.menu_ngang{
width:960px; height:50px; background-color:#CCC;
}

.menu_ngang ul{
margin:0; padding:0; list-style:none; float:left;
}

.menu_ngang ul li{
float:left; position:relative;

KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 8

 Ver 2022, FIT Thực hành Phát triển ứng dụng Webp

.menu_ngang ul li a{
text-decoration:none; color:#333; padding:0 20px;
line-height:50px; border-right:1px solid #333;
}

.menu_ngang ul li ul{
position:absolute;
background-color:#ccc;
display:none; width:110%;
}

.menu_ngang ul li ul li a{
border-right:none; border-bottom:1px solid #FFF;
line-height:30px; display:block;
text-align:left; width:100%;
}

.menu_ngang ul li ul li a:hover{ font-weight:bold; }

.menu_ngang ul li:hover ul{ display:block; }

HTML code:

KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 9

Ver 2022, FIT Thực hành Phát triển ứng dụng Webp

5 HTML5 Drag and Drop – Rubik

Sử dụng hình ảnh trong gói Rubik.rar và áp dụng API Drap & Drop của HTML5 để
hiện thực trang web sau:
Trước khi drap & drop

Sau khi drap & drop

----Kết thúc Lab----

Cú pháp nộp bài: Lab02_MSSV_Họ tên

KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 10