Bài tập chương trình lớp chuyên đề ngành lập trình

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ầ

Trang 1

227 Nguyễn Văn Cừ – Quận 5 – Tp Hồ Chí Minh

Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn

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

Trang 2

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



Trang 3

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

 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ế:

1 Tiêu đề cửa sổ  Thể hiện dòng chữ ”Shop Thiên Thanh, th ời trang nam nữ”



Trang 4

2 Nội dung trang

web

 Sử dụng tag <div> để tạo layout như hình trên

 Hướng dẫn:

1 Tiêu đề cửa sổ <title>Shop Thiên Thanh, thời trang nam nữ </title>

2 Nội dung trang web

<! start header >

<div id="header" style="width: 1000px; height: 100px; margin: 0 auto; background-color:

#FFFFFF; border: 1px solid #8C0209;">

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

Trang chủ Quần áo nữ Quần áo nam Phụ kiện Tin tức sự kiện

</div>

<! end menu >

<! start content Page >

<! start sidebar1 >

<div style="border: 1px solid #1a24fc"> <!—M ục 1 >

</div>

</div>

<div style="border: 1px solid #1a24fc;"> <!—M ục 2 >

Hỗ trợ trực tuyến

</div>

</div>

<div style="border: 1px solid #1a24fc;"> <!—M ục 3 >

<div style="height: 40px;background-color:#8C0209;color: #FFFFFF"> Thống kê</div>

Trang 5

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 >

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 id="footer" style="width: 960px;height: 70px; margin: 0 auto;padding: 0 20px;

background-color: #FFFFFF; border: 1px solid #8C0209;">

Design by Alphatek Company

</div>

</body>

Trang 6

2.2 Hiệu chỉnh nội dung cơ bản của TrangChu.html

Hình 1: Ph ần Header

Hình 2: M ục bài viết

 Sử dụng các tag cơ bản để hiệu chỉnh các nội dung cơ bản của TrangChu.html

1 Header  Hiệu chỉnh như hình 1

2 Bài viết

(Hình 2)

 ”Chào mừng bạn ” : size lớn nhất, màu đỏ

 ”Hãy thỏa sức shopping ”: size nhỏ hơn, màu đỏ

 ” Thiên Thanh ” : in đậm

màu chữ

1 Header  Sử dụng tag <h1>, <p>, <span> và các thuộc tính:

float, padding, color, font-weight

#8C0209

2 Bài viết  Sử dụng tag <h1>,<h3>, <p>, <span> và các thuộc

tính: font-weight, color

Trang 7

2.3 Định dạng chung cho TrangChu.html

 Sử dụng các thuộc tính để định dạng chung cho TrangChu.html

 Font chữ: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial,

Helvetica, Verdana, sans-serif

 Kích thước font: 0.875em

 Văn bản: canh đều

Trang 8

1 Header (hình 1)  Gắn hình ảnh logo và định dạng lại tiêu đề

2 Banner

(hình 2)

 Chèn hình quảng cáo công ty

 Định vị dòng chữ ”<< Cửa hàng của chúng tôi >>” lên trên

Trang 9

 Chèn ký tự đặt biệt  vào đầu dòng

 Danh sách hình: chèn 7 hình vào, mỗi hình có chiều cao là 160px, rộng là 103.5px

4 Bài viết

(hình 3)

 Định dạng khoảng cách giữa 2 dòng đầu

 Bổ sung dòng ”<< Xem chi tiết >>”

1 Header (hình 1)  Bổ sung thuộc tính sau vào logo:

background: url( /images/img01.jpg) no-repeat left top;

2 Banner

(hình 2)

 Chèn hình quảng cáo công ty: dùng tag <img>

 ”<< Cửa hàng của chúng tôi >>” : dùng tag <p> lồng trong

tag div

<div id="bangron" style= position:relative; left: 450px; top:-418px; width:300px; height:30px;

background-color:white; color:#8C0209;">

<p style= font-weight: bold; text-align:

center;font-size:14pt;">««  Cửa hàng của chúng tôi  »»

 Danh sách hình: dùng tag <img> với thuộc tính width và height

4 Footer  Giống hướng dẫn của hedaer

 Đặt văn bản vào tag <p> và định dạng lại

  : © và  : •

 Đặt hai tag <img> vào trong tag <p> và định dạng lại

Trang 10

2.5 Tạo Thực đơn và hiệu chỉnh phần Sidebar trong Trangchu.html

Trang 11

1 Thực đơn (menu)

(hình 1)

 Dùng hình ảnh tạo nền đỏ khung menu

 Tạo các chức năng trên thực đơn, mỗi chức năng là một liên kết

2 subsidebar  Gồm hai phần: bar_title và subsidecontent (hoặc khung

 Các dòng được gạch dưới và có màu đỏ

5 subframe  Chứa nội dung của mục ”Hỗ trợ trực tuyến” và ”Thống kê”

6 Footer  Gắn liên kết cho đoạn ”Alphatek Company” :

 Dùng 3 tag <div> lồng vào div menu

 Dùng tag <ul>, <li> lồng vào tag <div>

Trang 12

4 subframe <div class="subframe" style= height: 220px;

position:relative;top:-20px;float:left; width:99%;

text-align:center;color:#8c0209; border:1px solid

#8c0209;padding-top:20px; border-top:0px solid #FFFFFF;"> <img src=" /images/Yahoo.png" /><br />

< > Hot line: < >0914 024 357</b> </p

</div>

 Mở rộng

 Bổ sung chức năng liên hệ vào phần Header

2.6 Bổ sung mục ”Thời trang nam” vào trang Trangchu.html

Hình 1: M ục Thời trang nam

 Sử dụng bộ tag <table>

Trang 13

1 Danh sách

hình

 Tạo danh sách hình ảnh có dạng dòng, cột như hình 1

 Hình ảnh và tên sản phẩm được gắn vào một liên kết

 Hướng dẫn

1 Danh sách

hình

<div class="tieude" >&loz; Thời trang nam </div>

Trang 14

1 SanPhamMoi.html  Thiết kế giống hình 1

2 HoTroOnline.html  Thiết kế giống hình 2

3 ThongKe.html  Thiết kế giống hình 3

4 TrangChu.html  Nhúng 3 trang trên vào phần Sidebar1

1 TrangChu.html <div id="sidebar1" >

scrolling="no" style= border: none">

</iframe>

</div>

Trang 15

</iframe>

</div>

</iframe>

</div>

2.8 Bổ sung chức năng Tìm kiếm và Mua hàng vào TrangChu.html

Hình 1: Menu có ch ức năng Tìm kiếm

Hình 2: Th ời trang nam có Nút mua hàng

 Sử dụng các tag tạo điều khiển

1 Tên sản

phẩm

 Tạo điều khiển dùng để nhập tên sản phẩm, với:

 Giá trị mặc định: Tên s ản phẩm

Trang 16

hàng  Tạo nút lệnh có dạng , đặt vào phía bên trái Đơn giá của mục

”Thời Trang nam” (hình 2)

<input type="text" id="txtTim" style= margin: 13px 0px 0px;

width: 180px;height: 25px; border: 1px solid style: italic; color:#787878;" value="Tên sản phẩm" />

#CA8186;font-2 Nút tìm  Sử dụng tag <input>, với thuộc tính:

 type = ”image”

 title = ”Tìm sản phẩm”

 src = Search2.png

<input type="image" id="btnTim" title="Tìm sản phẩm"

src=" /images/Search2.png" style= height:25px; margin-left:

26px; position:relative;top:8px;width: 23px;border: none;"/>

 Mở rộng

 Học viên có thể tạo trang Header.html, Menu.html, Footer.html

 Sau đó gắn vào TrangChu.html và sử dụng cho các trang khác

Trang 17

BÀI 3: Tạo web page với ngôn ngữ HTML5

- S ử dụng các tag ngữ nghĩa

3.1 Thay thế các tag ngữ nghĩa cho TrangChu.html

 Sử dụng các tag ngữ nghĩa

 Thay thế các tag ngữ nghĩa thích hợp cho TrangChu.html

< nav class = "menu_bg" >

<li><a href="TrangChu.html" >Trang chủ</a></li>

div id="banner"></div> <! banner quảng cáo công ty >

div class="contentItem" ></div> <! Thời trang hot >



Trang 18

article id = "article" ></ article > <! Bài viết >

div class="contentItem"></div> <! Thời trang nam >

Trang 19

BÀI 4: Hoàn chỉnh giao diện web với CSS

- T ạo giao diện trang web bằng CSS

4.1 Tạo tập tin Default.css

- Sử dụng CSS để tạo các loại style

- Tạo tập tin Default.css

- Tạo các style tương ứng với từng thành phần đã chia layout và các lớp style dùng chung trong website

a img { border: none; }

.jRight{text-align: right}

.jLeft{text-align: left}

Trang 20

.sidebar{ }

#sidebar1 { float: left; }

#sidebar2 { float: right; }

.subsidebar{ width: 220px;padding-bottom: 10px;}

/*4.1 Định dạng chung cho các trang trong <iframe> */

.subsidecontent ul li img{ width: 100% }

/*5 Nội dung chính mainContent */

#bangron {font-size: 14pt;font-weight: bold; text-align: center}

/* 5.2 các content item - Trang chủ */

.tieude { }

.imghot, .dshinh {margin-top: 4px}

.imghot img{ width: 103.5px; height: 160px}

#article{padding-bottom: 0px;line-height: 200%}

#article h1{ }

#article h3{ margin: 0; font-weight: normal}

#article { padding: 0px 20px }

#article readmore { text-align: right; font-weight: bold;color: #8C0209

} /* Học viên bổ sung thêm*/

- Thay thế các inline style trong TrangChu.html bằng các style trong tập Default.css

Trang 21

- Thay thế các inline style trong SanPhamMoi.html, HoTroOnline.html, ThongKe.html bằng các style trong tập Default.css

4.3 Tạo trang DangKy.html (bài làm ở nhà)

Hình 1: Trang DangKy.html

Hình 2: Trang GioHang.html

Trang 22

Hình 3: Trang TinThoiTrang.html

- Sử dụng HTML5 kết hợp với CSS để tạo trang web

- Sử dụng các tag điều khiển và form

- Tạo trang GioHang.html (hình 2)

- Tạo trang TinThoiTrang.html (hình 3)

- Tạo Trang DangKy.html với yêu cầu

Trang 23

2 Sidebar1  Nhúng trang SanPhamMoi.html, HoTroOnline.html, ThongKe.html

3 Sidebar2  Nhúng trang GioHang.html, TinThoiTrang.html

4 Content  Tạo form đăng ký thành viên mới

 Tạo điều khiển trong form (Hình 1)

5 Footer  Giống TrangChu.html

Trang 24

BÀI 5: Tùy biến giao diện web với CSS3

- T ạo giao diện chuyên nghiệp với CSS3

5.1 Hiệu chỉnh tập tin Default.css

Trang 25

- Sử dụng các thuộc tính CSS3

- Bổ sung các thuộc tính CSS3 tương ứng với các thành phần sau trong tập tin Default.css: (Lưu ý: không còn sử dụng hình ảnh để tạo giao diện các thành phần này nữa)

1 #logo

(hình 1)

 Nền trắng, bo tròn góc trên bên trái

 Chứa hình Logo.gif bên trái

 Tag <h1> chứa dòng ”Shop Thiên Thanh” được đỗ bóng màu xám

2 #menu

(hình 2)

 Nền tô đỏ và đậm dần từ trên xuống

 Bo tròn góc trên trái và góc dưới phải (30px)

3 bar_title

(hình 3)

 Nền tô đỏ và đậm dần từ trên xuống

 Bo tròn góc trên trái và góc dưới phải (20px)

4 tieude  Nền tô đỏ và nhạt dần từ trái qua phải

 Bo tròn góc trên trái và góc trên phải (10px)

5 formbox  Bo tròn góc trên trái và góc dưới phải (40px)

- Hiệu chỉnh lại các trang: TrangChu.html, DangKy.html, SanPhamMoi.html,

HoTroOnline.html, ThongKe.html, GioHang.html, TinThoiTrang.html, cho phù hợp với CSS3 mới hiệu chỉnh

1 #logo

(hình 1)

width: 930px;height: 100px; padding-left: 70px;

background: url( /images/Logo.gif) no-repeat left center;

/* Gradient từ trên xuống*/

background: -webkit-linear-gradient(#aa0514, #6e0001);

Định dạng
Số trang	45
Dung lượng	2,51 MB