TRUNG TAÂM TIN HOÏC - ÑAÏI HOÏC KHOA HOÏC TÖÏ NHIEÂN TP. HCM
227 Nguyeãn Vaên Cöø – Quaän 5 – Tp. Hoà Chí Minh
Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn
Maõ taøi lieäu: DT_NCM_LT_BT_LTWEB
Phieân baûn 4.5 – Thaùng 12/2013
BÀI TẬP
CHƯƠNG TRÌ NH
LỚP CHUYÊN ĐỀ
NGÀNH LẬP TRÌ NH
---
LẬP TRÌ NH WEB VỚI
HTML5, CSS3 và
jQUERY
Baøi taäp
L
ập tr
ình Web v
ới HTML5, CSS3 v
à jQuery Trang 1/44
BÀI 1: Tổng quan về lập trình web
- Làm quen v
ới môi trường cài đặt trang web tĩnh
1.1. Làm quen với các môi trường cài đặt ngôn ngữ HTML, CSS và JavaScript:
Mục tiêu:
Làm quen môi trường cài đặt Aptana Studio
Yêu cầu:
Sử dụng Aptana Studio (HV có thể dùng các phần mềm khác)
Tổ chức một website tĩnh, gồm các thư mục sau:
o Images: lưu trữ tập tin hình ảnh
o Style: lưu trữ tập tin .css
o Script: lưu trữ tập tin .js
Baøi taäp
L
ập tr
ình Web v
ới HTML5, CSS3 v
à jQuery Trang 2/44
BÀI 2: Tạo web page với ngôn ngữ HTML
- Thi
ết kế một trang web cơ bản
- T
ạo form và các điều khiển trong form
2.1. Tạo layout cho TrangChu.html
Mục tiêu:
Sử dụng tag < div> và các thuộc tính cơ bản để tạo layout
Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Tiêu đề cửa sổ Thể hiện dòng chữ ”Shop Thiên Thanh, th
ời trang nam nữ”
Baøi taäp
L
ập tr
ình Web v
ới HTML5, CSS3 v
à jQuery Trang 3/44
2 Nội dung trang
web
Sử dụng tag < div> để tạo layout như hình trên
Hướng dẫn:
Stt Đối tượng Code
1 Tiêu đề cửa sổ < title> Shop Thiên Thanh, thời trang nam nữ < /title>
2 Nội dung trang web
< body style= "margin-top:20px; padding:0; background:# 787878;">
< !-- start header -->
< div id= "header" style= "width: 1000px; height: 100px; margin: 0 auto; background-color:
# FFFFFF; border: 1px solid # 8C0209;">
< div id= "logo" style= "width: 1000px;height: 100px;">
Shop Thiên Thanh THỜI TRANG NAM NỮ
< /div>
< /div>
< !-- end header -->
< !-- start menu -->
< div id= "menuContaniner" style= "width: 990px; margin: 0 auto;background-color:
# FFFFFF; border: 1px solid # 8C0209;padding: 0px 5px 0px 5px">
< div id= "menu" style= "width: 990px; margin: 0 auto; height: 50px;">
Trang chủ Quần áo nữ Quần áo nam Phụ kiện Tin tức sự kiện
< /div>
< /div>
< !-- end menu -->
< !-- start content Page -->
< div id= "mainContainer" style= "width: 990px; margin: 0 auto;background-color: # FFFFFF;
border: 1px solid # 8C0209;padding: 20px 5px 0px 5px">
< !-- start sidebar1 -->
< div id= "sidebar1" style= "width: 220px;font-size: 12px;float: left;">
< div style= "border: 1px solid # 1a24fc"> < !—M
ục 1
-->
< div style= "height: 40px;background-color:# 8C0209;color: # FFFFFF">
Sản phẩm mới
< /div>
< div style= "height: 100px" > Các mục chọn </div>
< /div>
< div style= "border: 1px solid # 1a24fc;"> < !—M
ục 2
-->
< div style= "height: 40px;background-color:# 8C0209;color: # FFFFFF">
Hỗ trợ trực tuyến
< /div>
< div style= "height: 100px"> Hot line: 0914 024 357< /div>
< /div>
< div style= "border: 1px solid # 1a24fc;"> < !—M
ục 3
-->
< div style= "height: 40px;background-color:# 8C0209;color: # FFFFFF">
Thống kê< /div>
Baøi taäp
L
ập tr
ình Web v
ới HTML5, CSS3 v
à jQuery Trang 4/44
< div style= "height: 100px">
Số người online: 100500<br />
Số người truy cập: 300100
< /div>
< /div>
< /div>
< !-- end sidebar1 -->
< !-- start content -->
< div id= "maincontent" style= "float: left;width: 770px;">
< div style= "height: 400px;padding-left: 20px; background-color: # dedff9;">
Cửa hàng của chúng tôi
< /div> < !—m
ục 1
-->
< div style= "padding-left: 20px;"> < !—m
ục 2
-->
< div style= "margin-top: 10px;padding-left:20px; padding-top:5px;
background-color:# 8C0209;color:# FFFFFF; height:30px;"> Thời trang cực hot !!! </div>
< div style= "margin-top: 4px"> Danh sách hình các sản phẩm hot. < /div>
< /div>
< !—m
ục 3
-->
< div style= "padding-bottom: 0px;line-height: 200%;padding-left: 20px;">
Chào mừng bạn đến với shop quần áo rẻ đẹp!<br />
Hãy thỏa sức shopping online cùng shop quần áo rẻ đẹp nhé <br />
Để chuẩn bị cho một ngày mới năng động và hiệu quả, bạn không thể lơ là
trong việc chọn lựa cho mình một bộ cánh tươm tất và thật xinh xắn. Diện cho mình những
bộ áo quần hợp thời trang, vừa thanh lịch lại vừa rất trẻ trung, duyên dáng, sành điệu… đó
chính là điều mà< br />
Shop Thiên Thanh muốn giới thiệu với các bạn.
< /div>
< div style= "padding-left: 20px;"> < !—m
ục 4
-->
< div style= "margin-top: 10px;padding-left:20px; padding-top:5px;
background-color:# 8C0209; color:# FFFFFF; height:30px"> Thời trang nam</div>
< div style= "margin-top: 4px"> Danh sách hình quần áo nam </div>
< /div>
< /div>
< !-- end content -->
< div style= "clear: both;"> &nbsp;< /div>
< /div>
< !-- end page -->
< !— start Footer-->
< div id= "footer" style= "width: 960px;height: 70px; margin: 0 auto;padding: 0 20px;
background-color: # FFFFFF; border: 1px solid # 8C0209;">
2009 All Rights Reserved < br />
Design by Alphatek Company
< /div>
< /body>