Thiet Ke Web

TRƯỜNG ĐẠI HỌC ĐÀ LẠT
KHOA CÔNG NGHỆ THÔNG TIN
KS. Thái Duy Quý
Giáo trình tóm tắt
THIẾT KẾ WEB
(Lưu hành nội bộ)
Tài liệu dành cho học viên lớp Thiết kế Web ngắn hạn
Đà Lạt, ngày 10/11/2008

Thiết kế web Thái Duy Quý
Mục lục:
......................................................................................................................................6
Phần 1: Giới thiệu tổng quan. ............................................................................................7
1 Bài mở đầu: Giới thiệu tổng quan về hệ thống web......................................................8
1.1. Nội dung: .............................................................................................................8
1.2. Một số khái niệm: ................................................................................................8
1.3. Phân loại website: ..............................................................................................11
1.4. Một số bước chính trong phát triển website: .....................................................12
1.5. Một số vấn đề cần chú ý: ...................................................................................12
1.6. Công bố website trên Internet: ...........................................................................13
6.a. Các điều kiện cần thiết: ..................................................................................13
6.b. Xây dựng website: .........................................................................................14
2 Lab1: Cách tạo Domain Free......................................................................................17
Phần 2: HTML...................................................................................................................25
1 Bài 1: Giới thiệu các thẻ HTML cơ bản......................................................................26
1.1. Giới thiệu: ..........................................................................................................26
1.2. Thẻ(tags): ...........................................................................................................26
1.3. Cấu trúc một trang web: .....................................................................................27
3.a. Soạn thảo trang web đầu tiên: ........................................................................27
3.b. Thẻ định dạng ký tự: ......................................................................................29
3.c. Tiêu đề, đoạn văn, ngắt dòng: ........................................................................29
3.d. Danh sách: ......................................................................................................29
3.e. Chèn ảnh: ........................................................................................................30
2 Lab1: Dùng các thẻ HTML thiết kế trang web Excite.htm........................................31
2.1. Yêu cầu: .............................................................................................................31
2.2. Hướng dẫn giải: ..................................................................................................31
2.3. Kết quả hiển thị: .................................................................................................33
3 Bài 2: Các thẻ HTML(tiếp)........................................................................................35
3.1. Siêu liên kết (Hyperlink): ...................................................................................35
3.2. Bảng biểu: ..........................................................................................................36
4 Lab1: Dùng các thẻ HTML thiết kế trang web Free.com..........................................38
4.1. Yêu cầu: .............................................................................................................38
4.2. Hướng dẫn giải: ..................................................................................................38
5 Lab2: Dùng các thẻ HTML thiết kế trang web Scaal.com.........................................44
5.1. Yêu cầu: .............................................................................................................44
5.2. Hướng dẫn giải: ..................................................................................................45
6 Bài 3: Các thẻ HTML Form........................................................................................54
6.1. Các đối tượng nhập dữ liệu: ...............................................................................54
6.2. Form: ..................................................................................................................54
6.3. Hộp nhập văn bản 1 dòng (Oneline Textbox): ...................................................55
6.4. Checkbox: ..........................................................................................................55
6.5. Option Button (Radio Button): ..........................................................................56
6.6. Nút lệnh (Button): ..............................................................................................56
6.7. Combo Box (Drop-down menu): .......................................................................56
Tài liệu dành cho Lớp ngắn hạn Thiết kế web Trang 2
6.8. Listbox: ..............................................................................................................57

6.9. Hộp nhập văn bản nhiều dòng (TextArea): ........................................................57
7 Lab1: Dùng các thẻ Form thiết kế trang web về phiếu đăng ký................................59
7.1. Yêu cầu: .............................................................................................................59
7.2. Hướng dẫn giải: ..................................................................................................60
8 Bài 4: Luyện tập: Thiết kế trang web sp.co................................................................64
1.a. Yêu cầu: ..........................................................................................................65
1.b. Hướng dẫn giải: ..............................................................................................66
Phần 3: Macromedia Dreamweaver...................................................................................73
1 Cách tạo ra một project cho website. .........................................................................73
2 Bài 1: Giới thiệu về Macromedia Dreamweaver 8.0..................................................74
2.1. Giới thiệu: ..........................................................................................................74
1.a. Giao diện: Start Page: .....................................................................................74
1.b. Cửa sổ tài liệu: ...............................................................................................75
2.2. Tổ chức trang web: .............................................................................................77
2.3. Các công cụ chính: .............................................................................................80
2.4. Luyện tập: ..........................................................................................................83
3 Lab1: Thiết kế trang web: Beauty.com ......................................................................85
3.1. Yêu cầu: .............................................................................................................85
3.2. Hướng dẫn giải: ..................................................................................................85
3.3. Kết quả: ..............................................................................................................88
4 Bài 2: Một số tính năng trong Macromedia Dreamweaver 8.0...................................89
4.1. Background: .......................................................................................................89
4.2. Background-color: .............................................................................................89
4.3. Background – Image: .........................................................................................89
4.4. Lớp – Layer: .......................................................................................................90
4.5. Các thao tác trên Layer: .....................................................................................91
5 Lab1: Thiết kế trang web: Temp.com ........................................................................98
5.1. Yêu cầu: .............................................................................................................98
5.2. Hướng dẫn giải: ..................................................................................................99
6 Bài 3: Luyện tập: Thiết kế trang web HomeBank.com.............................................105
6.1. Yêu cầu: ...........................................................................................................105
6.2. Hướng dẫn giải: ................................................................................................105
Phần 4: Cơ bản về Photoshop..........................................................................................110
1 Bài 1: Giới thiệu chung về Photoshop. ....................................................................111
1.1. Giới thiệu: .........................................................................................................111
1.2. Giao diện: .........................................................................................................111
1.3. Mở một file hình: .............................................................................................111
2 Bài 2: Công cụ Slide from guide trong Photoshop. .................................................113
2.1. Cách thực hiện: ................................................................................................113
3 Lab1: Tạo website HTML Lenam Wedding..............................................................119
3.1. Yêu cầu: ............................................................................................................119
3.2. Hướng dẫn giải: ................................................................................................119
4 Lab2: Tạo website HTML LG..................................................................................123
4.1. Yêu cầu: ...........................................................................................................123
4.2. Hướng dẫn giải: ................................................................................................123
Phần 5: CSS trong Macomedia Dreamweaver 8.0...........................................................127

1 Bài 1: Định dạng website bằng CSS. ......................................................................128
1.1. CSS ..................................................................................................................128
1.2. Cách chèn CSS: ................................................................................................128
1.3. Khai báo và sử dụng style: ...............................................................................129
1.4. Các trường hợp sử dụng CSS:...........................................................................131
1.5. Phương pháp thực hiện CSS trong Macromedia Dreamweaver: .....................135
2 Lab1: Thiết kế trang web: Online Comunication....................................................137
2.1. Yêu cầu: ...........................................................................................................137
2.2. Thiết lập website cho bài tập.............................................................................139
2.3. Thiết lập thuộc tính trang, Chọn thẻ Title/Encoding trong chức năng Page
Properties:................................................................................................................140
3 Lab2: Thiết kế trang web: ASEAN...........................................................................143
3.1. Yêu cầu: ...........................................................................................................143
3.2. Hướng dẫn giải:.................................................................................................144
4 Lab3: Thiết kế trang web: Beauty.............................................................................148
4.1. Yêu cầu: ...........................................................................................................148
4.2. Hướng dẫn giải: ................................................................................................148
Phần 6: Các tính năng nâng cao Macomedia Dreamweaver 8.0......................................153
5 Bài 1: Đối tượng Form, Movie.................................................................................154
5.1. Đối tượng Form: ..............................................................................................154
5.2. Cách sử dụng: ...................................................................................................154
2.a. Thẻ Form: .....................................................................................................155
2.b. Thẻ Text Field: .............................................................................................155
2.c. Thẻ Hidden Field: .........................................................................................156
2.d. Thẻ Textarea : ...............................................................................................156
2.e. Thẻ CheckBox: .............................................................................................157
2.f. Thẻ Radio Button: .........................................................................................157
2.g. Thẻ Radio Group...........................................................................................158
2.h. Thẻ List Item.................................................................................................158
2.i. Thẻ Button.....................................................................................................158
5.3. Đối tượng Media: ............................................................................................161
5.4. Cách thực hiện: ................................................................................................161
5.5. Chèn đối tượng Movie: ....................................................................................162
5.6. Chèn Movie chạy nhạc nền cho trang web:......................................................163
5.7. Chèn đối tượng Flash: ......................................................................................163
6 Lab1: Thiết kế trang Đăng ký...................................................................................167
6.1. Yêu cầu: ...........................................................................................................167
6.2. Hướng dẫn giải: ................................................................................................168
7 Lab2: Thiết kế trang Feedback .................................................................................172
7.1. Yêu cầu: ...........................................................................................................172
7.2. Hướng dẫn giải: ................................................................................................173
8 Bài 2: Thiết kế web với Frameset và các tính năng DHTML...................................177
8.1. Thiết kế web với Frameset: ..............................................................................177
1.a. Giới thiệu: ....................................................................................................177
1.b. Định dạng cho Frame....................................................................................179
8.2. Thiết kế Frameset bằng Macromedia Dreamweaver. .......................................180

8.3. Các tính năng DHTML trong thiết kế web. .....................................................182
9 Lab1: Thiết kế trang Trang dân gian Việt Nam.........................................................186
9.1. Yêu cầu: ...........................................................................................................186
9.2. Hướng dẫn giải: ................................................................................................186
10 Lab2: Tự tạo trang web bằng mẫu có sẵn. .............................................................192
10.1. Yêu cầu: .........................................................................................................192
10.2. Cách thực hiện: ..............................................................................................192
Phần 7: Cơ bản về ngôn ngữ Javascript...........................................................................194
1 Bài 1: Giới thiệu và áp dụng Javascipt......................................................................195
1.1. Giới thiệu: ........................................................................................................195
1.2. Nhúng JavaScript vào trong tập tin HTML: ....................................................195
1.3. Sử dụng tập tin JavaScript bên ngoài: ..............................................................195
1.4. Làm việc với các dialog boxes..........................................................................196
1.5. Tạo biến trong JavaScript:................................................................................196
1.6. Toán tử trong Javascript:...................................................................................197
1.7. Cấu trúc điều khiển trong Javascript.................................................................197
1.8. Sử dụng đối tượng Document: .........................................................................198
1.9. Sử dụng đối tượng window...............................................................................199
1.10. Làm việc với status bar: .................................................................................199
1.11. Mở và đóng các cửa sổ: ..................................................................................200
1.12. Sử dụng đối tượng string: ..............................................................................201
2 Lab1: Làm quen với ngôn ngữ Javascript.................................................................202
3 .................................................................................................................................215
4 Lab2: Một số mã lệnh cơ bản....................................................................................216
5 Lab3: Một số mã lệnh nâng cao. ..............................................................................224
5.1. Lab4: Tham khảo các trang web về Javascript. ...............................................234
Phần 8: Phụ lục................................................................................................................235
1 Phụ lục các lớp CSS(lab 1 – bài 1 – phần 5): ...........................................................237
Lời nói đầu
Ngày nay, khi mà hệ thống web đang đạt tới giai đoạn phát triển mạnh mẽ
và nhu cầu rất lớn từ người dùng thì việc biết và xây dựng được một website là
một nhu cầu tất yếu không chỉ dành cho người học Công nghệ thông tin mà là cho
bất kỳ một ai ham thích khám phá công nghệ.
Chính vì những yếu tố đó mà khoa Công nghệ thông tin được sự đồng ý của
trường đã mở khóa học ngắn hạn có tên là Thiết kế web.
Khóa học này cung cấp cho học viên các khái niệm ban đầu về hệ thống
website, và theo đó sẽ từng bước xây dựng một trang web cá nhân đơn giản theo
sáng tạo của mỗi người.
Khóa học cũng tạo điều kiện cho sinh viên nắm bắt được các công cụ và
các phần cần thiết để có thể tiếp tục học các phần web nâng cao hơn.
Tác giả xin chân thành cảm ơn các thầy cô giáo trong khoa Công nghệ
thông tin, các bạn sinh viên và học viên đã góp ý và chỉnh sửa cho giáo trình này.
Trong quá trình soạn thảo chắc chắn còn nhiều thiếu sót, rất mong được sự góp ý
của quý độc giả.
Mọi chi tiết góp ý xin gửi về địa chỉ:
Thái Duy Quý, khoa Công nghệ thông tin, đại học Đà Lạt.
Hoặc email: thaiduyquy@gmail.com
Phần 1: Giới thiệu tổng quan.

Lớp Thiết kế web là một lớp ngắn hạn được tổ chức tại khoa CNTT dành cho
các học viên trong và ngoài khoa Công nghệ thông tin nhằm giúp cho học viên
biết và thiết kế được trang web đơn giản trên Html, CSS, Javascript.
Nội dung học: 08 bài chia thành các phần:
– Các khái niệm liên quan đến website
– Làm quen và thiết kế với các thẻ HTML
– Thiết kế web trên phần mềm Macromedia Dreamwever 8.0
– Tìm hiểu CSS
– Tìm hiểu Javascript.
Tương ứng với mỗi bài lý thuyết sẽ có bài lab tương ứng đi kèm, thực hiện ngay
tại lớp. Và sẽ có các bài kiểm tra tương ứng giữa các nội dung.
1 Bài mở đầu: Giới thiệu tổng quan về hệ thống web.

1.1. Nội dung:
 Một số khái niệm
 Phân loại trang web
 Một số bước chính trong phát triển website
 Công bố website trên internet
 Tạo Domain Free trên Internet
1.2. Một số khái niệm:
Mạng máy tính(Computer Network): là hệ thống các máy tính được kết
nối với nhau nhằm mục đích trao đổi dữ liệu thông qua mạng. Có nhiều loại
mạng như: LAN, MAN, WAN, Internet, ...
Giao thức(Protocol): là tập hợp các quy tắc được thống nhất giữa các máy
tính trong mạng nhằm thực hiện trao đổi dữ liệu được chính xác.
Ví dụ: TCP/IP, HTTP, FTP,…
Địa chỉ IP: Để xác định một máy tính trong mạng ta dựa trên giao thức
TCP/IP. Hai máy tính trong mạng có 2 địa chỉ IP khác nhau.
Các địa chỉ IP có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255). Ví dụ: 203.162.18.59:
địa chỉ máy chủ web của ĐHSP Hà Nội.
Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ loopback) là địa chỉ của chính máy tính
đang sử dụng dùng để thử mạng.
Tên miền(Domain Name): Tên miền là tên được gắn với 1 địa chỉ IP do
máy chủ DNS ánh xạ, thường ở dạng văn bản nên thân thiện với con người và
dễ dàng sử dụng.
Tên miền được chia thành nhiều cấp, phân biệt bởi dấu chấm (.). Đánh số
cấp lần lượt từ phải sang trái bắt đầu từ 1. Cấp lớn hơn là con của cấp nhỏ hơn.
Ví dụ: itt.dlu.edu.vn gắn với 203.162.18.59 trong đó:
– vn: Nước Việt Nam (Cấp 1)
– edu: Tổ chức giáo dục (Cấp 2)
– dlu: Tên cơ quan (Cấp 3)
– it: đơn vị nhỏ trong cơ quan (Cấp 4)
Đặc biệt: Tên localhost được gắn với 127.0.0.1
Máy chủ-máy phục vụ(Server): Là máy tính chuyên cung cấp tài nguyên,
dịch vụ cho máy tính khác và thường được cài các phần mềm chuyên dụng để
có khả năng cung cấp các dịch vụ cho các máy con hoạt động.
Một máy chủ có thể dùng cho một hay nhiều mục đích. Tên máy chủ
thường gắn với mục đích sử dụng. Ví dụ:
– File server: máy chủ chuyên dùng cho việc lưu trữ và tải file.
– Application server: Máy chủ chạy các chương trình ứng dụng
– Mail server: Máy chủ chuyên dùng cho lưu trữ thư điện tử.
– Web server: Máy chủ dùng cho hệ thống web.
Trên thực tế thì các máy chủ thường có cấu hình cao, khả năng hoạt động ổn
định, bên cạnh đó máy chủ còn phải có hệ thống phục hồi(backup) để đề phòng
các trường hợp gặp sự cố(Dead).
Máy khách(Client): Là máy khai thác dịch vụ của máy chủ và phải kết nối
với máy chủ. Với mỗi dịch vụ, thường có các phần mềm chuyên biệt để khai
thác.
Một máy tính có thể vừa là khách(client) vừa là chủ(server) nghĩa là máy
tính đó có thể khai thác dịch vụ của chính nó.
Cổng dịch vụ(Service Port) : Là một số từ 0 đến 65535 nhằm xác định
dịch vụ của máy chủ. Lưu ý là 2 dịch vụ khác nhau thì sẽ chiếm các cổng khác
nhau. Mỗi dịch vụ thường chiếm các cổng xác định. Ví dụ: Dịch vụ Web có cổng
80, dịch vụ truyền tải file FTP sử dụng cổng 21, ...
Chuỗi định vị tài nguyên (địa chỉ): URL (Uniform Resource Locator): Tài
nguyên là các file trên mạng. Một URL dùng để xác định vị trí và cách khai
thác file đó.
Cấu trúc:
giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file
Ví dụ: http://www.dlu.edu.vn:8080/html/test.htm
Trong một số trường hợp mặc định, nhiều thành phần có thể bỏ qua:
– Giao thức, cổng: Được trình duyệt đặt mặc định.
– Tên file: được máy chủ đặt mặc định
Trang web(Web page): Là một trang chứa nội dung, có thể được viết bằng
nhiều ngôn ngữ khác nhau nhưng kết quả trả về client là HTML, máy khách muốn
đọc dữ liệu thì phải dùng tới các trình duyệt(Browser).
Web site: Là tập hợp các trang web có nội dung thống nhất phục vụ cho một
mục đích nào đó. Vì dụ: vnexpress.net là web site tin tức nhanh của Việt Nam.
World Wide Web (WWW): Là tập hợp các web site trên mạng internet.
Web server: Là một máy tính hoặc phần mềm phục vụ web. Hiện nay có một
số phần mềm web server chuyên dụng như:
– Apache: mã nguồn mở
– Internet Information Services (IIS): Sản phẩm của Microsoft
Web Browser: Là phần mềm chạy trên máy client để khai thác dịch vụ web.
Một số Web browser thông dụng:
– Nescape
– Mozilla Firefox
– Google Chrome.
– Internet Explorer (IE): tích hợp sẵn trong windows.
– ......
1.3. Phân loại website:

Dựa vào công nghệ phát triển, có thể phân web thành 2 loại:
– Web tĩnh: Là web được thiết kế không tương tác với người dùng, chỉ
nhằm mục đích giới thiệu. Các đặc điểm chính của web tĩnh:
• Dễ phát triển.
• Sử dụng chủ yếu là HTML.
• Người làm web tĩnh thường dùng các công cụ trực quan để
tạo ra trang web như MS Pront Page MS Word, Macromedia
Dreamweaver, NotePad, ....
– Web động: Là web tương tác được với người dùng thông qua hệ
quản trị Cơ sở dữ liệu. Các đặc điểm chính của web động:
• Khó phát triển hơn.
• Tương tác mạnh
• Sử dụng nhiều ngôn ngữ khác nhau như ASP, ASP.NET, PHP,
JSP, .....
• Thường phải viết nhiều mã lệnh và phải lập trình bằng một
ngôn ngữ nào đó.
1.4. Một số bước chính trong phát triển website:
Tương tự với phân tích và thiết kế hệ thống.
– Đặc tả: Mô tả giao diện, các chức năng cần thiết.
– Phân tích: Phân tích xem làm từng chức năng sẽ phải cần có công tụ
gì, làm như thế nào.
– Thiết kế: Dùng các công cụ để thiết kế website.
– Lập trình: Dùng ngôn ngữ lập trình kết hợp với thiết kế để tạo ra sản
phẩm.
– Kiểm thử: Quá trình này kiểm tra lại toàn bộ hệ thống trước khi đưa
ra chạy thực tế.
1.5. Một số vấn đề cần chú ý:
 Đặc tả, trả lời các câu hỏi:
– Web để làm gì?
– Ai dùng?
– Trình độ người dùng?
– Nội dung, hình ảnh?
 Phân tích, trả lời các câu hỏi:
– Mối liên quan giữa các nội dung?
– Thứ tự các nội dung?
 Thiết kế, trả lời các câu hỏi:
– Sơ đồ cấu trúc website
– Giao diện
– Tĩnh hay động
– CSDL
– Nội dung từng trang
– Liên kết giữa các trang
 Xây dựng, trả lời các câu hỏi:
– Cấu trúc thư mục
– Các modul dùng chung
…
 Kiểm thử, trả lời các câu hỏi:
– Kiểm tra trên nhiều trình duyệt
– Kiểm tra trên nhiều loại mạng
– Kiểm tra tốc độ
– Kiểm tra các liên kết
– Thử các lỗi bảo mật
– …
1.6. Công bố website trên Internet:
6.a. Các điều kiện cần thiết:
 Xây dựng website: thao tác này phải thực hiện hoành thành thông qua các
quá trình trên và phải có quyền sử dụng hợp pháp đối với websitr đó.
 Tìm Domain:
– Sử dụng tên miền con miễn phí: thông qua mạng có thể tìm các tên
miền miễn phí như: domaindlx. Webng, ....
– Đăng ký tên miền riêng với các nhà cung cấp tên miền ở trong và
ngoài nước như: Mắt Bảo, VDC, .....
 Hosting
– Sử dụng miễn phí của các nhà cung cấp, thường thì bị hạn chế dung
lượng.
– Thuê không gian riêng: Hiện nay có rất nhiều nhà cung cấp cho phép
thuê hosting để lưu trữ và người dùng sẽ trả tiền hàng tháng hoặc
hàng năm thông qua tài khoản.
– Tự host website của mình: Nếu hệ thống bảo mật tốt, người dùng có
thể tự xây dựng host cho mình.
 Duy trì và phát triển và quảng bá website: Trang web đẩy lên mạng muốn
thu hút người xem thì phải bảo trì, phát triển bằng cách cập nhật các nội
dung mới, ngoài ra còn phải có phương pháp quảng bá trên các công cụ tìm
kiếm.
6.b. Xây dựng website:
 Thông tin “tĩnh” hay “động”
– Web tĩnh: Xây dựng đơn giản, bắt mắt và lôi cuốn người xem.
– Web động: Xây dựng hiệu quả, chất lượng và nhiều tính năng.
– Portal: Tương tác tốt với người dùng, người dùng sẽ có nhiều quyền
lợi khi tham gia.
 Giá thành:
– Web tĩnh: Tính theo các kiểu trang
• Trang đơn giản: 70 – 150.000đ/trang
• Trang hiệu ứng hình ảnh tốt: 150 – 350.000đ/trang
– Web động: Tính theo các mục, các khối chức năng, tùy vào mỗi công
ty mà có các gói riêng.
• Thiết kế CSDL
• Các chức năng phía user: đưa tin, phân loại, tìm kiếm…
• Các chức năng phía Admin: Đăng nhập, xem/thêm/sửa/xóa tin
bài, báo cáo, thống kê…
Tóm lại: Từ 5 triệu trở lên. (Thông dụng: 10-30 triệu)
Phân tích: Cần phải phân tích được là có nên đăng ký tên miền, thiết kế và
duy trì website hay không? Và nếu có thì đăng ký tên miền với tên thế nào, thể
loại gì, theo hệ thống của Việt Nam hay theo các hệ thống tên miền bên ngoài.
Có đủ thẩm quyền và chất lượng để tự xây dựng Host cho website của mình
không? Và để phục vụ website, có các phương án như thế nào dành cho: Nhân
sự, kinh phí, cơ chế tổ chức, hoạt động, quy trình làm việc, ....
Đăng ký tên miền: Trước hết là phải xác định tên của hệ thống website bao
gồm: Tên tiếng Việt, tên giao dịch tiếng Anh và tên viết tắt. Sau đó xác định
nơi đăng ký tên miền và hosting. Ngày nay với sự phát triển của khoa học kĩ
thuật thì thủ tục đăng ký đơn giản, nhanh chóng có kinh phí rẻ. Theo thống kê
trung bình Việt Nam từ 450.000 đến 480.000 đ/năm, nước ngoài từ 8 đến
12USD/năm.
Hosting: Xác định môi trường vận hành của website là máy chủ
Windows(thường hỗ trợ ASP, PHP…, SQL Server, MySQL…, giá thành
thường cao) hay máy chủ Linux( thường hỗ trợ PHP, JSP…, MySQL…, giá
thành rẻ hơn như độ bảo mật yếu hơn). Ngoài ra còn phải xác định dung lượng
thực tế của website, khả năng sẽ mở rộng, xác định băng thông, các dịch vụ
đảm bảo an toàn, an ninh, backup dữ liệu…
Phát triển website: Sử dụng các chiến lược marketing như thư điện tử(email),
đầu tư quảng cáo 1 đợt trên các phương tiện truyền thông (Báo, đài, Tivi…),
liên kết với các site cùng loại, giới thiệu lẫn nhau, ....
Quảng bá website: Để quảng bá tốt website, có thể theo các phương pháp sau:
 Đăng ký Website vào các máy tìm kiếm trong nước và thế giới (search
engine):
• Vietnam Searchengine: Panvietnam, vinaseek…
• Global Searchengine: google, altavista, hotboot…
 Nâng cao vị trí của Website trong hệ thống xếp hạng Website thế giới.
• Google rank (the important of website: 1-10)
• Alexa rank: Traffic ranking of website.
 Nâng tầm phát triển Website:
– Tự động hoá dần các chức năng của Website.
– Biến Website thành một môi trường kinh doanh thực sự hiệu quả
24/24 trên Internet.
2 Lab1: Cách tạo Domain Free.

Domain Free là các domain miễn phí, cho phép người dùng tạo ra các website, lưu
trữ và duy trì website. Hiện nay có rất nhiều trang web cho phép người dùng lưu
trữ website:
1. Trang web: www.jimdo.com: Tạo nhanh một trang web cá nhân miễn phí
đơn giản và không có quảng cáo:
2. Trang web: www.domaindlx.com:
3. Trang web www.webng.com:
4. Trang web: www.unonic.com: cho phép thay đổi tên miền thành đơn giản
hơn. Ví dụ: www.duyquy.domaindlx.com thành www.duyquy.net.tf.
Thường thì cách đẩy 1 website lên mạng là giống nhau, sau đây giới thiệu phương
pháp đẩy lên mạng thông qua trang webng:
Trên thanh địa chỉ, gõ: www.webng.com, xuất hiện giao diện đăng ký:
Click here
Thiết lập thông tin cá nhân:
Tên đầy đủ
Địa chỉ Email
Tên thành viên
Mật khẩu
Nhập lại mật khẩu
Nhập mã: 4 7 3 7 5
Click chọn
Click here
Ví dụ:
Tạo thành công:
Kiểm tra email:
Kích hoạt tài khoản:
Kích hoạt tài khoản
Đăng nhập để tải web lên:
Trang chủ khi đăng nhập:
Click here
Quản lý files:
Tạo file Tạo thư mục
Upload file
Danh sách File và Thư

mục
Duyệt một trang web:
Phần 2: HTML
Phần này sẽ cung cấp cho học viên các khái niệm và phương pháp làm việc
với các thẻ HTML.
Nội dung:
 Giới thiệu về HTML
 Các thẻ HTML cơ bản
 Cách làm việc với các thẻ.
 Một số bài lab liên quan.
1 Bài 1: Giới thiệu các thẻ HTML cơ bản

1.1. Giới thiệu:
HTML(HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản
dùng cho việc viết các trang web. HTML do Tim Berner Lee phát minh và
được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994.
HTML sử dụng các thẻ (tags) để định dạng dữ liệu, không phân biệt chữ
hoa, chữ thường. Các trình duyệt thường không báo lỗi cú pháp HTML. Nếu
viết sai cú pháp chỉ dẫn đến kết quả hiển thị không đúng với dự định. Đây gọi
là ngôn ngữ thông dịch, khác với ngôn ngữ biên dịch như nhiều ngôn ngữ
khác.
1.2. Thẻ(tags):
HTML có rất nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác nhau. Có 2 loại
thẻ: thẻ đóng và thẻ mở.
Cách viết thẻ:
– Thẻ mở: <tên_thẻ>. Ví dụ: <u>, <p>, <img>…
– Thẻ đóng tương ứng: </tên_thẻ>. Ví dụ: </u>, </p>
Chú ý là luôn có thẻ mở nhưng có thể không có thẻ đóng tương ứng. Ví dụ:
<img> không có thẻ đóng.
Thuộc tính (property) của thẻ: Một thẻ có thể có các thuộc tính nhằm bổ sung
tính năng và tác dụng cho thẻ. Mỗi thuộc tính có tên thuộc tính (tên_TT). Viết thẻ
có thuộc tính: <tên_thẻ tên_TT1=“giá_trị1” tên_TT2=“giá_trị2”…>
Chú ý: là có thể thay đổi thứ tự, số lượng các thuộc tính mà không gây ra lỗi cú
pháp; Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau. Chỉ giống nhau
ở các thẻ, thuộc tính cơ bản; Thẻ đóng của thẻ có thuộc tính vẫn viết bình thường
(</tên_thẻ>).
Trang web đầu tiên: Trang HTML có phần mở rộng (đuôi) là .HTM hoặc
.HTML. Có thể tạo trang HTML bằng bất cứ trình soạn thảo “văn bản thuần” nào.
Ví dụ: MS Word, Notepad, EditPlus, Turbo Pascal,…Bên cạnh đó cũng có nhiều
trình soạn thảo HTML cho phép NSD soạn thảo trực quan, kết quả sinh ra HTML
tương ứng như: Microsoft FrontPage, Macromedia Dreamweaver, ....
1.3. Cấu trúc một trang web:
<HTML>
<HEAD>

</HEAD>
<BODY>

</BODY>
</HTML>
Thẻ: <HTML> là thẻ mở đầu cho các trang web, yêu cầu phải có.
Thẻ: <HEAD>: chứa các giá trị tiêu đề hoặc định dạng chính.
Thẻ: <BODY>: chứa nội dung website.
3.a. Soạn thảo trang web đầu tiên:
Mở trình soạn thảo văn bản thuần (VD Notepad) gõ vào nội dung như dưới đây,
sau đó lưu lại với tên “Index.htm” và chọn Encoding là UTF-8:
<HTML>
<HEAD>
<TITLE>Chao hoi</TITLE>
</HEAD>
<BODY>
Chao mung ban den voi <u>HTML</u>
</BODY>
</HTML>
Thử nghiệm: Mở trình duyệt web (IE):

– Vào File/Open, chọn file index.htm vừa lưu
– Nhấn OK → Có kết quả như hình dưới đây:
Thay đổi nội dung:

– Quay lại Notepad, sửa lại nội dung trang web rồi nhấn Ctrl+S để lưu
lại
– Chuyển sang IE, nhấn nút Refresh (F5) để thấy kết quả mới
Ghi chú: Các thẻ được nêu tiếp theo mặc định đặt ở trong phần <body>…
</body>.
Soạn thảo văn bản: Văn bản được soạn thảo như bình thường trong các file
HTML. Một số lưu ý:
– Mọi khoảng trống, dấu xuống dòng trong HTML được thể hiện trên
trang web là 1 khoảng trống duy nhất
– Để gõ một số ký tự đặc biệt ta phải sử dụng mã:
• Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự
trống):
• Dấu nhỏ hơn (<) và lớn hơn (>): < >
• Dấu ngoặc kép (“): "
• Ký hiệu : ©
• …
– Ghi chú trong HTML: <! -- dòng ghi chú -->

Các thẻ cơ bản trong HTML:
3.b. Thẻ định dạng ký tự:
 Đậm, nghiêng, gạch chân: <b>…</b>, <i>…</i>, <u>…</u>
 Chỉ số trên:<sup>…</sup>
 Chỉ số dưới: <sub>…</sub>
 Font chữ: <font>…</font>
– Thuộc tính:
• face=“tên font chữ”
• size=“kích thước”
• color=“màu”, viết bằng tên tiếng Anh (red, blue,…) hoặc viết
dạng #RRGGBB, RR, GG, BB ở dạng hexa. Ví dụ: #FFFFFF:
Trắng, #FF0000: đỏ,…
3.c. Tiêu đề, đoạn văn, ngắt dòng:
 Tiêu đề: với kích thước nhỏ dần
– <h1>…</h1>
– …
– <h6>…</h6>
Sau mỗi tiêu đề, văn bản tự động xuống dòng.
Thuộc tính:
• align=“cách căn chỉnh lề”: left, right, center, justify
 Đoạn văn: <p>…</p>
Thuộc tính:
• align tương tự <h>
 Xuống dòng: <br>
3.d. Danh sách:
Thẻ danh sách(list) dùng để liệt kê các phần tử. Có 2 loại: Danh sách có thứ
tự 1,2,3,… (Ordered List) và không có thứ tự (Unordered List). Một danh sách
phải gồm có nhiều phần tử. Cách tạo danh sách:
– Có thứ tự: <OL>Các phần tử</OL>

– Không có thứ tự: <UL>Các phần tử</UL>
– Tạo 1 phần tử trong danh sách: <LI>Tiêu đề phần tử</LI>
Chú ý: Một phần tử có thể là 1 danh sách con.
3.e. Chèn ảnh:
Dùng thẻ <img>, đây là một thẻ không có thẻ đóng. Có các thuộc tính:
• src=“địa chỉ ảnh”: Nếu chèn ảnh trong cùng web site thì nên
sử dụng đường dẫn tương đối.
• alt=“chú thích cho ảnh”: sẽ được hiển thị khi trình duyệt
không hiện ảnh hoặc ảnh lỗi hoặc khi di chuyển chuột lên ảnh
• width=“rộng”, height=“cao”: độ rộng và độ cao của ảnh:
– n: (n là số) Quy định độ rộng, cao là n pixels
– n%: Quy định độ rộng, cao là n% độ rộng, cao của đối
tượng chứa ảnh.
• border=“n”: n là số: kích thước đường viền ảnh. =0: ảnh
không có đường viền.
• align=“hiệu chỉnh ảnh”: left, right, middle, top, texttop,…
2 Lab1: Dùng các thẻ HTML thiết kế trang web Excite.htm.

2.1. Yêu cầu:
Học viên sử dụng các tag HTML được học (body, img, table, font,…), các hình
ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin
noidung.txt để xây dựng trang Excite.htm theo mẫu index.jpg.
2.2. Hướng dẫn giải:

Dùng Notepad hay các chương trình nhập liệu tạo một tập tin văn bản, Lưu với
phần mở rộng HTM hoặc HTML, Encoding: chọn UTF-8:
Dùng các cặp thẻ: <html>, <head>, <title> và <body> để tạo cấu trúc trang Web:
<html>
<head>
<title>Excite</title>
</head>
<body>
</body>
</html>
Dùng thuộc tính background để định hình nền trang, dùng các cặp thẻ: <P>, <BR>
để định dạng đoạn, Dùng thẻ <IMG> để chèn hình ảnh:
<body background= "IMAGES/BACKGR.GIF">

<p><br><br><p>
<img src="IMAGES/Banner.gif">
2.3. Kết quả hiển thị:
Dùng các cặp thẻ: <B>, <U>, <FONT>, <BASEFONT> và các thuộc tính FACE,
COLOR, SIZE để định dạng văn bản.
Tương tự, dùng các cặp thẻ: <IMG>, <B>, <U>, <FONT>, và các thuộc tính
FACE, COLOR, SIZE để định dạng văn bản và Hoàn chỉnh trang web:
3 Bài 2: Các thẻ HTML(tiếp)

3.1. Siêu liên kết (Hyperlink):
Là khả năng cho phép tạo liên kết giữa 1 đối tượng với một phần nội dung. Khi
click chuột vào đối tượng thì phần nội dung sẽ được hiện ra. Đối tượng sử
dụng để kích chuột vào là: Đối tượng liên kết. Đối tượng đó có thể là: văn bản,
hình ảnh, một phần của ảnh, ...
Cấu trúc của thẻ: <a>Đối tượng liên kết</a>
– Thuộc tính:
• href=“đích liên kết”: Nếu trong cùng web nên sử dụng đường
dẫn tương đối.
• target=“tên cửa sổ đích”. Tên CS phân biệt chữ hoa/thường. Có
một số tên đặc biệt:
– _self: cửa sổ hiện tại
– _blank: cửa sổ mới
– Chú ý là nếu muốn liên kết với địa chỉ e-mail thì đặt đường dẫn là:
href=“mailto:địa_chỉ_e-mail”; Thực hiện lệnh JavaScript khi kích
chuột vào thì đặt href=“javascript:lệnh”. Địa chỉ nội dung sẽ được
hiện ra được gọi là Đích liên kết.
Ví dụ:
 <a href=“trangchu.htm”>Trang chu</a>
 <a href=”http://www.google.com”>Trang google</a>
 <a href="mailto:thaiduyquyctk27@gmail.com">mail</a>
 <a href="mailto: thaiduyquyctk27@gmail.com? Subject=
Test&body=This is a test“><img src = “imagename.jpg"
border="0"></a>
 …
Màu của liên kết: Màu của liên kết được thiết lập nhằm thể hiện các trạng
thái của liên kết:
<body link="blue" alink="white" vlink="gray“>.

Trong ví dụ này:
 Trước khi click: màu xanh (blue).
 Clicking: màu trắng (white)
 Sau khi click: màu nâu (gray)
3.2. Bảng biểu:
HTML coi một bảng gồm nhiều dòng, một dòng gồm nhiều ô, và chỉ có ô
mới chứa dữ liệu của bảng.
Sau đây là các thẻ để thiết lập bảng biểu:

– Tạo bảng: <table>…</table>: Mỗi bảng chỉ có 1 cặp thẻ này.
– Tạo dòng: <tr>…</tr>: Bảng có bao nhiêu dòng thì có bấy nhiêu cặp
thẻ này.
– Tạo ô:
• Ô tiêu đề của bảng: <th>…</th>
• Ô dữ liệu: <td>…</td>
Tổng số thẻ <td> và <th> bằng số ô của bảng. Dòng có bao nhiêu ô thì có
bấy nhiêu thẻ <td> và/hoặc <th> nằm trong cặp thẻ <tr>…</tr> tương ứng.
Chú ý: Để có được một ô trống trong bảng (ô không có dữ liệu) thì cần đặt
nội dung ô là:
Thuộc tính của thẻ <table>:

– border=“số”: kích thước đường viền. Đặt bằng 0 (mặc định): không
có đường viền.
– width=“rộng”, height=“cao”: độ rộng và độ cao của bảng. Có thể
đặt theo 2 cách:
• n: (n là số) Quy định độ rộng, cao là n pixels
• n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng
chứa bảng.
– cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp
– cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô
– bgcolor=“màu”: màu nền của bảng.
– background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho bảng.
Nên sử dụng đường dẫn tương đối nếu có thể.
Thuộc tính của thẻ <td>,<th>:
– bgcolor=“màu”: màu nền của ô
– background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho ô.
Nên sử dụng đường dẫn tương đối nếu có thể.
– width=“rộng”, height=“cao”: độ rộng và độ cao của ô. Có thể đặt
theo 2 cách:
• n: (n là số) Quy định độ rộng, cao là n pixels
• n%: Quy định độ rộng, cao là n% độ rộng, cao của bảng.
– align=“căn_lề”: cách căn chỉnh dữ liệu trong ô theo chiều ngang:
left, right, center, justify.
– valign=“căn lề đứng”: cách căn chỉnh dữ liệu trong ô theo chiều
đứng: top, middle, bottom.
– colspan=“số”: số cột mà ô này chiếm (mặc định là 1)
– rowspan=“số”: số dòng mà ô này chiếm (mặc định là 1).
– nowrap: nếu có sẽ làm cho dữ liệu trong ô không tự xuống dòng.
4 Lab1: Dùng các thẻ HTML thiết kế trang web Free.com.

4.1. Yêu cầu:
Học viên sử dụng các tag HTML được học (body, img, table, font, …), các hình
ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin
noidung.txt để xây dựng trang Free.htm theo mẫu index.jpg.

Bước 1:
Dùng Notepad tạo một tập tin văn bản, Lưu với phần mở rộng HTM hoặc
HTML, Encoding: chọn UTF-8.
Bước 2:
<html>
<head>
<title>.: FREE SITE :.</title>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#3399CC">
</body>
</html>
Bước 3:
Tạo bảng biểu theo bố cục:
Bước 4:
Dùng thẻ <IMG> và các cặp thẻ: <B>, <U>, <FONT>, <BASEFONT> và
các thuộc tính FACE, COLOR, SIZE để định dạng văn bản
Bước 5:
Dùng thẻ <IMG> để chèn hình ảnh vào các ô, Chèn và định dạng văn bản
Bước 6:
Dùng thẻ <IMG> để chèn hình ảnh vào các ô, chèn và định dạng văn bản
Bước 7:
Chèn và định dạng văn bản, Hoàn chỉnh trang web:
5 Lab2: Dùng các thẻ HTML thiết kế trang web Scaal.com.

5.1. Yêu cầu:
Học viên sử dụng các tag HTML được học (body, img, table, font, a, …), các
hình ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin
noidung.doc để xây dựng trang index.htm ( theo mẫu index.jpg) và trang
story.htm (theo mẫu story.jpg).
• Trang index.htm được thiết kế với yêu cầu sau:
– Tạo liên kết trên nút [Our Story] đến trang story.htm.
– Nút [product] và [this week] có liên kết rỗng.
• Trang story.htm được thiết kế với yêu cầu sau:

– Khi click vào banner sẽ liên kết đến index.htm
– Trong phần nội dung, khi click vào chữ SCAAL đầu tiên sẽ liên kết
tới phần “What makes SCAAL the best coffee?” của trang.
– Khi click vào biểu tượng >>top sẽ liên kết về đầu trang
– Khi click vào iMedia.com sẽ mở trang web www.imedia.com
Khi click vào webmaster@imedia.com sẽ gởi thư theo địa chỉ đó.

Trang Index.htm:
Bước 1:
Bước 2:
Dùng các cặp thẻ: <html>, <head>, <title> và <body> để tạo cấu trúc trang
Web, dùng các cặp thẻ DIV, IMG để chèn hình ảnh:
<html>
<head>
<title>SCAAL</title>
</head>
<body leftmargin="0" topmargin="0">
<div align="center">
<IMG height="60" src="images/logo_scaal.gif" width="700">
</div>
</body>
</html>
Bước 3:
Code:
Bước 4:
Thiết kế giao diện trang:
– Dùng thẻ <IMG> để chèn hình ảnh
– Dùng thẻ <FONT>, và các thuộc tính FACE, COLOR, SIZE để định
dạng văn bản
Dùng thẻ <A> và các thuộc tính để tạo liên kết:
Bước 5:
Dùng thẻ <IMG> để chèn hình ảnh vào các ô, Tạo liên kết tới trang
STORY.HTML. Hoàn chỉnh giao diện.
Trang Story.htm:
Bước 1:
Lưu lại tập tin STORY.HTML từ tập tin INDEX.HTML, Encoding: chọn UTF-8.
Bước 2:
Bước 3:
Chèn và định dạng văn bản, Tạo liên kết điểm dừng, hoàn chỉnh trang web.
6 Bài 3: Các thẻ HTML Form

Các đối tượng HTML Form cho phép thiết kế các chức năng tương tác với người
dùng.
6.1. Các đối tượng nhập dữ liệu:
Các đối tượng này cho phép người sử dụng nhập dữ liệu trên trang web. Dữ
liệu này có thể được gửi về server để xử lý.Người sử dụng nhập dữ liệu thông
qua các điều khiển (controls). Có nhiều loại control:
1. Form
2. Oneline Textbox
3. Checkbox
4. Radio Button
5. Button
6. Combo box (drop-down menu)
7. Listbox
8. Hộp nhập văn bản nhiều dòng (TextArea).
.....
Tất cả các điều khiển đều có tên được quy định qua thuộc tính name. Tuy
nhiên có một số điều khiển thì name không quan trọng (các điều khiển mà sau này
không cần lấy dữ liệu). Các điều khiển từ số 2 đến số 5 được định nghĩa nhờ thẻ
<input> và thuộc tính type sẽ xác định là điều khiển nào sẽ được tạo ra.
Sau đây là các thuộc tính liên quan đến từng đối tượng:
6.2. Form:
Là đối tượng bên ngoài, sử dụng để chứa mọi đối tượng khác. Đối tượng form
không nhìn thấy khi trang web được hiển thị, nó quy định một số thuộc tính quan
trọng như method, action cho việc tải và nhận các giá trị được tải đến hoặc đẩy đi.
Cấu trúc thẻ tạo form: <form>…</form>
Các thuộc tính cơ bản:
– name=“tên_form”: Là dịnh danh cho form, không quan trọng lắm
– action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn tương đối
nếu nằm trong cùng 1 web
– method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị:
• GET: (mặc định): nhận dữ liệu.
• POST: đẩy dữ liệu đi.
6.3. Hộp nhập văn bản 1 dòng (Oneline Textbox):
Sử dụng để nhập các văn bản ngắn (trên 1 dòng) hoặc mật khẩu.
Cấu trúc thẻ: <input>
Thuộc tính:
– name=“tên_đt”: quan trọng
– type=“text”:Ô nhập văn bản thường
– type=“password”: ô nhập mật khẩu.
– value=“giá trị mặc định”
6.4. Checkbox:
Cho phép chọn nhiều lựa chọn trong một nhóm lựa chọn được đưa ra bằng
cách đánh dấu (“tích”).
Cấu trúc thẻ: <input>: mỗi ô nhập cần 1 thẻ
Thuộc tính:
– name=“tên_đt”: quan trọng
– type=“checkbox”
– value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD
chọn ô này.
– checked: nếu có thì nút này mặc định được chọn.
6.5. Option Button (Radio Button):

Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra. Trên 1
form có thể có nhiều nhóm lựa chọn kiểu này.
Cấu trúc thẻ: <input>: Mỗi ô cần 1 thẻ
Thuộc tính:
– name=“tên_đt”: quan trọng. Các đối tượng cùng tên thì thuộc cùng
nhóm.
– type=“radio”
– value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD
chọn ô này.
– checked: nếu có thì nút này mặc định được chọn
6.6. Nút lệnh (Button):

Sử dụng để NSD ra lệnh thực hiện công việc. Trên hệ thống web có 3 loại nút:
– submit: Tự động ra lệnh gửi dữ liệu
– reset: đưa mọi dữ liệu về trạng thái mặc định
– normal: người lập trình tự xử lý
Cấu trúc thẻ: <input>
Thuộc tính:
– name=“tên_ĐT”: thường không quan trọng
– type=“submit”: nút submit
– type=“reset”: nút reset
– type=“button”: nút thông thường (normal), it sử dụng.
– value=“tiêu đề nút”
6.7. Combo Box (Drop-down menu):
Bao gồm một danh sách có nhiều phần tử. Tại
một thời điểm chỉ có 1 phần tử được chọn. Người sử
dụng có thể chọn 1 phần tử trong danh sách xổ xuống bằng cách kích vào mũi tên
bên phải hộp danh sách.
Cấu trúc thẻ tạo hộp danh sách: <select>Danh sách phần tử</select>
Thuộc tính:
– name=“tên_ĐT”: quan trọng
Cấu trúc thẻ tạo 1 phần tử trong danh sách:
<option>Tiêu đề phần tử</option>
Thuộc tính:
– value=“giá trị”: giá trị chương trình nhận được nếu phần tử được
chọn.
– selected: nếu có thì phần tử này mặc định được chọn.
6.8. Listbox:
Tương tự như Combo box, tuy nhiên có thể nhìn thấy nhiều phần tử cùng lúc,
có thể lựa chọn nhiều phần tử
Cấu trúc thẻ: <select>…</select>
Thuộc tính: tương tự của combo tuy nhiên có 2 thuộc
tính khác:
– size=“số dòng”
– multiple: cho phép lựa chọn nhiều phần tử cùng lúc.
Thẻ <option>…</option> tương tự của combo box.
6.9. Hộp nhập văn bản nhiều dòng (TextArea):
Cho phép nhập văn bản dài trên nhiều dòng.
Cấu trúc thẻ: <textarea> Nội dung mặc định
</textarea>
Thuộc tính:
– name=“tên_ĐT”: quan trọng
– rows=“số dòng”, tính theo số dòng
văn bản.
– cols=“số cột”, tính theo số ký tự chuẩn trên dòng.
7 Lab1: Dùng các thẻ Form thiết kế trang web về phiếu đăng ký
7.1. Yêu cầu:

Học viên sử dụng các tag HTML được học (body, img, table, font, a, form,
input,…), các hình ảnh trong thư mục Images để xây dựng trang phieudangky.htm
theo mẫu phieudangky.jpg với các yêu cầu sau:
– Thông tin trong hộp chọn Lĩnh vực gồm các mục: Công nghệ Web,
Lập trình viên, Đồ họa.
– Bố cục hình ảnh, nội dung theo mẫu.
– Khi click vào nút [Gởi thông tin] sẽ gởi yêu cầu theo địa chỉ:
thaiduyquyctk27@gmail.com .
– Khi click vào nút [Nhập lại] sẽ xóa nội dung trong các ô nhập liệu.

Bước 1:
Bước 2:
Dùng các cặp thẻ: <html>, <head>, <title> và <body> để tạo cấu trúc trang
Web, Dùng các cặp thẻ DIV, IMG để chèn hình ảnh:
<html>
<head>
<title>PHIẾU ĐĂNG KÝ</title>
</head>
<body leftmargin="0" topmargin="0">
Bước 3:
Cấu trúc trang phiếu đăng ký:
Bước 4:
Dùng thẻ <IMG> để chèn hình ảnh, Dùng thuộc tính BACKGROUND tạo nền cho
ô.
Bước 5:
Hoàn thiện phầ nội dung:
– Dùng thẻ <FORM>
– Dùng thẻ <INPUT>, <TEXTAREA>
– Dùng thẻ <SELECT>
– Hoàn chỉnh giao diện.
8 Bài 4: Luyện tập: Thiết kế trang web sp.co.

Trang giới thiệu:
Trang Liên hệ:
1.a. Yêu cầu:

Học viên sử dụng các thẻ và thuộc tính HTML được học (body, img, table,
font, a, …), các hình ảnh trong thư mục Images và nội dung được cung cấp sẵn
trong tập tin noidung.txt để xây dựng trang gioithieu.htm (theo mẫu gioithieu.jpg)
và trang lienhe.htm (theo mẫu lienhe.jpg).
Trang gioithieu.htm được thiết kế với yêu cầu sau:
– Tạo liên kết trên nút [GIỚI THIỆU CÔNG TY] đến trang
gioithieu.htm.
– Nút [LIÊN HỆ] đến trang lienhe.htm.
Tạo liên kết ngoại đến các Email spco@hcm.fpt.vn, spco@hcm.vnn.vn và
website http://www.spvietnam.com.
Trang lienhe.htm được thiết kế với yêu cầu sau:

– Tạo các đối tượng trong biễu mẫu
– Tạo liên kết trên nút [GIỚI THIỆU CÔNG TY] đến trang
gioithieu.htm.
– Nút [LIÊN HỆ] đến trang lienhe.htm.

– Khi nhấn vào nút [Gởi thông tin] sẽ gởi yêu cầu theo địa chỉ:
hiepdlu@gmail.com
– Khi click vào nút [Điền lại] sẽ xóa nội dung trong các ô nhập liệu.
1.b. Hướng dẫn giải:

Trang gioithieu.htm:
Bước 1:
Dùng Notepad hay các chương trình saọn thảo văn bản tạo một tập tin văn
bản, Lưu với phần mở rộng HTM hoặc HTML, Encoding: chọn UTF-8.
Bước 2:
<html>
<head>
<title>Giới thiệu SP.Co</title>
</head>
<body bgcolor=“black”>
</body>
</html>
Bước 3:
Dùng các cặp thẻ <TABLE>,<TR> và <TD> để tạo bố cục cho trang.
Dùng các thuộc tính: Width, Height, colspan, rowspan, align, valign,
cellPadding, cellSpacing, bgcolor,… để định dạng bố cục.
Bước 4:
Dùng thẻ <IMG> và các thuộc tính SRC, BORDER,.. Để chèn và định dạng
các hình ảnh.
Bước 5:
Chèn văn bản từ tập tin NOIDUNG.TXT
– Dùng các thẻ <P>, <BR> để chia đoạn
– Dùng thẻ <FONT>, <BASEFONT> và các thuộc tính để định dạng
văn bản
– Dùng các cặp thẻ <UL><LI> để tạo danh sách
– Dùng thẻ <A> để tạo liên kết

– Dùng thẻ HR để tạo đường phân cách
– Hoàn chỉnh trang web.
Thiết kế trang lienhe.htm:
Bước 1:
Mở tập tin GIOITHIEU.HTM, Lưu lại với tên LIENHE.HTM
Bước 2:
Đổi tiêu đề trang web, dùng thẻ <IMG> chèn hình ảnh: tượng trưng và tiêu đề.
Bước 3:
Dùng cặp thẻ <FORM> tạo đối tượng biểu mẫu:
– Dùng các cặp thẻ <TABLE>,<TR> và <TD> để tạo bố cục cho
trang.
– Dùng các thuộc tính: width, height, align, valign, cellPadding,… để
định dạng bố cục
Bước 4:
Hoàn chỉnh giao diện
– Dùng cặp thẻ <INPUT> và các thuộc tính để chèn ô nhập liệu và nút
bấm
– Dùng cặp thẻ <TEXTAREA> để chèn ô nhập liệu nhiều dòng
Phần 3: Macromedia Dreamweaver

Phần này sẽ cung cấp các kiến thức liên quan đến:
 Các khái niệm cơ bản trong Macromedia Dreamweaver 8.0
 Các thành phần cơ bản giúp cho việc thiết kế website.
 Các hiệu ứng động trên web.
 Các sự kiện tác động lên web.
1 Cách tạo ra một project cho website.
2 Bài 1: Giới thiệu về Macromedia Dreamweaver 8.0.

Macromedia Dreamweaver là một chương trình Visual Editor chuyên
nghiệp để tạo, trang trí và quản lý các trang web. Macromedia Dreamweaver cung
cấp các công cụ phác thảo trang web cao cấp, hỗ trợ các tính năng DHTML
(Dynamic HTML) mà không cần viết các dòng lệnh.
1.a. Giao diện: Start Page:
– Open a Recent Item: Chứa danh sách 10 thành phần được mở gần
đây, giúp người dùng mở nhanh các ứng dụng được tạo gần nhất.
– Create New : Chọn 1 trong những tùy chọn sẽ tạo 1 File HTML,
Cold Fusion, PHP, ASP VB Script, ASP NET C#, JavaScript, XML,
XSLT ( Entire Page ), CSS, … Người dùng có thể chọn More để hiển
thị Hộp Thoại New Document cung cấp nhiều lựa chọn hơn.
– Create From Samples: Chứa các Folder, từng Folder chứa nhiều
trang mẫu trình bày đẹp.
1.b. Cửa sổ tài liệu:
Hình sau đây là 1 Cửa sổ tài liệu Dreamweaver đơn giản. Nếu mở nhiều files cùng
lúc, ta thấy các Tab nằm dọc ở phần trên cùng cửa sổ. Nhấp vào một Tab để chỉnh
sửa trên chính Tab đó.
Thuộc tính trang: Thuộc tính trang quy định một số tính chất của trang. Để thực
hiện, click phải lên trang chọn Page Properties:
Thẻ Appearance: Quy định các thuộc tính liên quan đến hình thức trang như: Font
chữ, kích thước mặc định, màu chữ, màu nền, ....
Thẻ Title/Encoding: Quy định các thuộc tính mã hóa cho trang. Chọn
Unicode(UTF-8) để có thể viết tiếng Việt trên trang.
2.2. Tổ chức trang web:

Tổ chức trang web sẽ tạo điều kiện cho việc tạo ra một dự án web mang
tính cấu trúc, nhằm tạo thuận lợi cho việc đẩy trang lên domain. Sau khi tạo một
trang HTML, vào Sites -> Manage Sites:
Chọn New - > Site:
Điền các thông tin về website, về đường dẫn. Chọn OK, chọn Done. Ta có
kết quả:
Dạng cửa sổ: Có 3 dạng cửa sổ giúp cho các lập trình có thể thao tác dễ dàng, bao
gồm dạng cửa sổ, dạng chia đôi và dạng code.
CODE: Dùng cho việc viết và chỉnh sửa code cho trang web:
SPLIT: Phân đôi màn hình code và design:
DESIGN: Dùng cho việc thiết kế web bằng giao diện
2.3. Các công cụ chính:

• Thanh INSERT :
 COMMON : Đây là tập hợp chứa các Đối tượng thường được sử
dụng nhiều nhất như: liên kết, ảnh, lịch, …
 LAYOUT: Hiện ra gồm các Tables – Div – Layer – Frame. Các Đối
tượng này giúp cho việc trình bày trang một cách hiệu quả:
 FORM : Gồm các thành phần Form như trường Text, Button, …
 TEXT: Giúp tạo các Style cho văn bản trên trang.
 HTML: Cho phép bạn chèn các đối tượng như Table – Frame –
Script
 APPLICATION: Giúp cho bạn làm việc với các cơ sở dữ liệu.
 FLASH ELEMENTS: Chứa 1 đối tượng xem ảnh Flash
 FAVORITES: Dùng để chỉnh sửa, và chứa những gì bạn muốn nó có.

Để làm điều này > Nhấp Phải > Chọn lựa để thêm những đối tượng
thường được sử dụng nhiều nhất.
• Panel:
Panel là các thanh công cụ bên phải màn hình. Các Panel có khi bị mất,
chọn Menu Window > Arrange Panels để chúng xuất hiện lại. Thường mặc
định hiện hữu là : Application – Tag Inspector – CSS – File. (H7).
Mỗi Panel có tính năng riêng của nó, giúp dễ dàng khảo sát – chỉnh sửa
những đối tượng liên quan đến chúng.
Nút Panel Options sẽ xuất hiện Menu dựa vào Panel và Tab mà bạn đang
làm việc.
2.4. Luyện tập:

Học viên sử dụng Macromedia Dreamware tạo trang web có dạng sau:
- Tên trang web: muabanhoa.com
- Có thư mục images chứa hình ảnh
- Có 2 trang con:
- Index.html
- Giohang.html
- Trang index.html: chèn vào một hình bất kỳ. Trên đầu có ghi: Chào mừng
bạn đến với web muabanhoa.com, Cuối cùng có ghi: giohang và link qua
trang giohang.html.
- Trang giohang.html ghi: Đây là giỏ hàng. Trở về trang chủ: link qua trang
chủ.
3 Lab1: Thiết kế trang web: Beauty.com

3.1. Yêu cầu:
Học viên sử dụng các hình ảnh trong thư mục Images, để xây dựng trang
index.htm theo mẫu index.jpg gồm các yêu cầu sau:
– Dùng Layout table và layout cell để thiết kế trang
– Định tiêu đề, mã ký tự
– Bố cục hình ảnh.

Thiết lập Website cho bài tập:
 Site name: đặt tên website
 Local root folder: chọn thư mục chứa tập tin HTML và Images
 Default images folder: chọn thư mục Images.
 Tạo mới tập tin HTML và lưu với tên INDEX.HTML
Định dạng thuộc tính trang
 Chọn thẻ Appearance:

– Background color: #FFFFFF.
– Left, Top, Right, Bottom Margin: 0 pixels
 Chọn thẻ Title/Encoding:

– Title: .: Beauty.com :.
– Encoding: Unicode (UTF-8)
 Tạo bảng biểu: 730x530 px, CellPad: 0px; CellSpace: 0px, Align: Center:
 Kẻ các ô với công cụ: Layout Cell

 Bố cục các hình ảnh trong thư mục Images.
 Hoàn chỉnh giao diện
3.3. Kết quả:
4 Bài 2: Một số tính năng trong Macromedia Dreamweaver 8.0

4.1. Background:
Thuộc tính background(Bg) cho phép hiệu chỉnh các thông số liên quan đến
nền của văn bản:
– Hình nền(Bg Image).
– Màu nền(Bg Color)
4.2. Background-color:
Thuộc tính Bg Color cho phép chọn hoặc điền màu cho nền:
4.3. Background – Image:

Thuộc tính Bg image cho phép chọn hình nền.
Trong phần code của thuộc tính này, có thể thiết lập một số thông số sau:
• Background – attachment: đính kèm một vài kiểu.
• Background-positions: vị trí của background.
• Background-repeat: có lặp lại không ?
4.4. Lớp – Layer:

Chức năng layer cho phép thực hiện các thao tác trên từng lớp, để có thể điểu
khiển được văn bản động. Có rất nhiều tính năng được thực hiện thông qua layer
nhằm làm cho trang web sinh động hơn.
Cách thực hiện các thao tác trên layer:
– Trong phần Layout: ta thiết lập chế độ Standard, trên trang ta để

Design
– Nhấp chuột trái vào Draw Layer, nhấp vào nơi cần vẽ, kéo và rê
chuột.
– Thanh phía đưới sẽ hiện ra các thuộc tính của một layer:
• LayerID: chỉ danh của Layer
• L,R,W,H: các thuộc tính khác.
• .....
4.5. Các thao tác trên Layer:

• Sử dụng Behavier:
Thao tác này giúp người dùng
định dạng được các đối tượng
động cho website. Cách thực
hiện:
– Chọn lớp cần tạo sự kiện.
– Vào Tag Inspector chọn Behavior, chọn vào biểu tượng Add
Behavior
– Chọn Set Text:
• Set Text of Behavior: thực hiện sự kiện cho Text.
• Set Text of Status Bar: thực hiện sự kiện cho thanh Status.
– Hộp thoại cho chức năng Set Text of Layer:
– Hộp thoại cho chức năng Set Text of Status Bar:
– Trong các thuộc tính bên phải, chọn các sự kiện cần thể hiện.
• Sử dụng Timeline:
Thanh Timelines cho phép người dùng thực hiện các thao tác trên đối tượng
lớp. Timelines được thực hiện bằng cách cho chạy các frame cần thiết, tạo ra
một khối ảnh động trong thời gian nào đó. Thanh Timelines khi thực hiện sẽ
tạo ra các dòng code bằng Javascript trên trang web. Cách thực hiện:
– Chọn chế độ Design, vào Window\Timelines.
– Sau khi chọn, ta có thành phần Timelines .
– Ví dụ: Cần cho vật chuyển động từ trên xuống, ta thực hiện các thao
tác sau:
 Chọn đối tượng cần thực hiện(thường là đối tượng lớp-layer)
 Vào Window\Timelines:
 Nhấn chuột trái vào đối tượng, kéo thả vào Timeline có màu
đỏ để tạo frame bắt đầu.
 Kéo frame theo thời gian cần thiết, sau đó kéo hình đế nơi cần
chuyển động đến.
 Nhấp chuột và thả vào vị trí sau.
 Chọn các thuộc tính: Autoplay, Loop

 Nhấn F5 để thấy kết quả.
• Các thuộc tính của Border:

Các thuộc tính border cho phép thực hiện các thuộc tính liên quan đến boder
của table, cell. Các thuộc tính này phải được thực hiện bằng code. Để thực hiện
trong thuộc tính của table, td gõ “style=“ như hình dưới đây:
 Border-collapse: thu bớt khoảng cách giữa 2 boder

 Border-top: thiết lập các thuộc tính cho đường chỉ trên.
Ví dụ: ta có thiết lập:
<table width="200" border="0" style="border-top:#000000 2px dotted">
Kết quả:
• Các thuộc tính của link:

Các thuộc tính này nằm trong thẻ Page Properties. Các thuộc tính links cho
phép người dùng thiết lập các thuộc tính cho thẻ link như:
 Link Color: màu cho các kiên kết, màu mặc định
 Visited Links: Màu cho liên kết khi rê chuột vào
 Rollover links: Màu cho liên kết khi nhấp chuột
 Active links: Màu của liên kết khi thả chuột, sau khi nhấp.
5 Lab1: Thiết kế trang web: Temp.com
5.1. Yêu cầu:

Học viên sử dụng các hình ảnh trong thư mục Images, nội dung được cung cấp sẵn
trong tập tin noidung.doc để xây dựng trang tem.htm theo mẫu index.jpg gồm các
yêu cầu sau:
– Sử dụng ảnh thiết kế sẵn được cung cấp trước, bố cục trang web theo
đúng mẫu (chia đều màn hình.
– Sắp xếp các layer có hình ảnh thiết kế theo bố cục.
– Tạo bộ nút HOME, SUUTAP, CLB bằng Flash Text và cho liên kết
rỗng.
– Đặt logo làm nền cho khung bên trái
– Thay đổi thuôc tính khung để trang trí đường viền
– Cho phép hình tem ở giữa trang rơi từ trên xuống dưới.
Khi rê chuột vào các hình tem minh họa thì hiện ra chuỗi thông báo “Tem đang
được bán”, khi rê chuột ra khỏi hình thì chuỗi thông báo biến mất.

Bước 1:
Thiết lập website cho bài tập
– Site name: đặt tên website
– Local root folder: chọn thư mục chứa tập tin HTML và Images.
– Default images folder: chọn thư mục Images
Bước 2:
Tạo mới tập tin HTML và lưu với tên INDEX.HTM:
Bước 3:
Định dạng thuộc tính trang
• Chọn thẻ Appearance:
– Background color: #FFFFFF

– Left, Top, Right, Bottom Margin: 0 pixels
• Chọn thẻ Title/Encoding:

– Title: .: Tem :.
Bước 4:
Tạo bảng biểu: 1024x610 px; CellPad: 0px; CellSpace: 0px; Align: Center
– Kẻ hai ô: 512x610px
– Định hình nền và tô màu ô
Bước 5:
Tạo bảng biểu: 496x226 px; CellPad: 0px; CellSpace: 0px; Align: Center, tô
hình nền:
– Bố cục các hình ảnh tem, Gán behavior “Set Text of Layer”
– Tạo hai Lớp (Layer).
Bước 6:
Bố cục các hình ảnh và chèn nội dung, Tạo bảng “NHÓM…” và định
đường biên cho bảng.
Bước 7:
Diễn hoạt hình Tem tượng trưng và Hoàn chỉnh giao diện.
6 Bài 3: Luyện tập: Thiết kế trang web HomeBank.com.

6.1. Yêu cầu:
Học viên sử dụng các hình ảnh trong thư mục Images, để xây dựng trang
index.htm theo mẫu template.jpg gồm các yêu cầu sau:
– Dùng Layout table và layout cell để thiết kế trang
– Định tiêu đề, mã ký tự

• Thiết lập website cho bài tập:
– Local root folder: chọn thư mục chứa tập tin HTML và Images
– Default images folder: chọn thư mục Images.
– Tạo mới tập tin HTML và lưu với tên INDEX.HTML
• Thiết lập thuộc tính trang:
 Chọn thẻ Appearance:
 Background color: #033266
 Left, Top, Right, Bottom Margin: 0 pixels

 Chọn thẻ Title/Encoding:
 Title: HomeBank
 Encoding: Unicode (UTF-8)
• Tạo bảng biểu: 780x660 px, CellPad: 0px; CellSpace: 0px, Align: Center.
• Kẻ các ô: thiết kế banner, Tạo thực đơn “Trang chủ…” và tạo liên kết
rỗng.
• Định trang thái liên kết, Chọn thẻ Links trong chức năng Page
Properties:
– Link font: tahoma
– Size: 11
– Link color: #FFFFFF
– Underline style: Show underline only on rollover.
• Kẻ ô bên lề trái, đồng thời tô hình nền “nen_trai.gif”, Tạo bảng biểu và bố
cục các hình ảnh.
• Kẽ ô bên lề phải, đồng thời tô hình nền “nen_phai.gif”, Tạo bảng biểu và
bố cục các hình ảnh.
• Tạo bảng biểu: thiết kế hình ảnh tượng trưng. Hoàn chỉnh giao diện
Phần 4: Cơ bản về Photoshop

Phần này cung cấp cho học viên các nội dung:
 Giới thiệu Photoshop.
 Tác dụng của Photoshop trong việc thiết kế website.
 Giao diện chính, cách sử dụng một số công cụ.
 Phương pháp dùng Slide From Guide.
 Thực hành các bài lab liên quan.
1 Bài 1: Giới thiệu chung về Photoshop.

Photoshop là một phần mềm cho phép chỉnh sửa các hình ảnh dưới dạng
layer. Phần mềm này là một công cụ thuận tiện cho việc thiết kế các trang web.
1.2. Giao diện:
- Thanh menu: chứa các chức năng cơ bản trong photoshop

- Thanh Công cụ: cho phép chọn lựa các công cụ để thực hiện.
- Thanh Thuộc tính: thể hiện các thuộc tính của từng công cụ.
- Các Layer: là các lớp tương ứng cho từng phần của ảnh.
1.3. Mở một file hình:
- Vào file chọn Open.
- Nhấp lên màn hình Photoshop.
- Nhấn Ctrl + O.
Chi tiết tham khảo thêm tại các giáo trình Photoshop.
2 Bài 2: Công cụ Slide from guide trong Photoshop.

Công cụ này trong Photoshop cho phép cắt các hình thành từng phần riêng biệt
nhằm giúp cho việc thiết kế web được thuận tiện.
2.1. Cách thực hiện:
• Mở hình bằng photoshop:
• Nhấn Crtl + R để xuất hiện thước kẻ trên và bên trái:
• Dùng công cụ Move Tool: đặt chuột trên các lề và kéo thành các đường
thẳng đứng hoặc nằm ngang thích hợp.
• Sử dụng công cụ Slice Tool để cắt thành các hình nhỏ. Chọn chức năng
Slice From Guides:
• Nhấn Crtl và nhấp vào Slice để chọn và bỏ chọn Slice.
• Vào File chọn Save for Web
• Nhấn Save: Chọn đường dẫn cần lưu, ta được kết quả.
3 Lab1: Tạo website HTML Lenam Wedding

3.1. Yêu cầu:
Bài tập ứng dụng công cụ Slice và tối ưu hóa ảnh cho Web:
– Sử dụng Guides
– Các lệnh Zoom
– Nhóm công cụ Slice
– Tối ưu hóa ảnh (Save As Web).

Thực hiện theo các bước sau:
– Mở tập tin template.psd
– Xác định các Guides
Dùng công cụ Slice cắt hình theo các Guides đã định hoặc có thể dùng Slices
From Guides để tự động tạo các slice
Chọn kiểu tập tin kết xuất và quan sát chất lượng hình ảnh, kiểm tra kích cỡ tập
tin.
Dùng trình duyệt để kiểm tra tập tin HTML sau khi cắt.
Kiểm tra thư mục Images được tạo ra sau khi tối ưu hình ảnh.
4 Lab2: Tạo website HTML LG

4.1. Yêu cầu:
Bài tập ứng dụng công cụ Slice và tối ưu hóa ảnh cho Web:
– Sử dụng Guides
– Các lệnh Zoom
– Nhóm công cụ Slice
– Tối ưu hóa ảnh (Save As Web).

Thực hiện theo các bước sau:
– Mở tập tin index.psd
– Xác định các Guides
Dùng công cụ Slice cắt hình theo các Guides đã định.
Đặt tên cho các slice.
Chọn kiểu tập tin kết xuất và quan sát chất lượng hình ảnh. Kiểm tra kích cỡ tập
tin. Save As Web.
Dùng trình duyệt để kiểm tra tập tin HTML sau khi cắt.
Kiểm tra thư mục Images được tạo ra sau khi tối ưu hình ảnh.
Phần 5: CSS trong Macomedia Dreamweaver 8.0

Phần này cung cấp cho học viên các nội dung:
 Giới thiệu CSS
 Các tính năng của CSS
 Cấu trúc của các thành phần CSS
 Cách nhúng CSS vào website.
 Phương pháp sử dụng CSS trong Macromedia Dreamweaver.
 Thực hiện một số bài lab tương ứng.
1 Bài 1: Định dạng website bằng CSS.

1.1. CSS
CSS(Cascading Style Sheet) là mẫu quy định cách thức thể hiện các thẻ
HTML, các Style được đưa vào HTML 4.0 để giải quyết một số vấn đề và giúp tiết
kiệm được rất nhiều thời gian và công sức cho việc thiết kế web. Có thể định nghĩa
nhiều style vào một thẻ HTML (Cascading).
Có 4 loại style:
– Inline Style (Style được qui định trong 1 thẻ HTML cụ thể)
– Internal Style (Style được qui định trong phần <HEAD> của 1 trang
HTML )
– External Style (style được qui định trong file .CSS ngoài)
– Browser Default (thiết lập mặc định của trình duyệt).
Thứ tự ưu tiên: Mức ưu tiên giảm dần từ trên xuống
1.2. Cách chèn CSS:
CSS được chèn vào website thông qua các cách sau
 Đặt trong <head>…</head>
 Internal style:
<style type=“text/css”>

</style>
 External style:
– Định nghĩa style trong file riêng (thường có đuôi .CSS)
– Nhúng file CSS đã định nghĩa vào trang web:
<link href=“địa chỉ file" rel="stylesheet" type="text/css">
 Inline style:
<tên_thẻ style=“tt1:gt1;tt2:gt2;…”>
1.3. Khai báo và sử dụng style:
 Chú ý: Style phân biệt chữ hoa, chữ thường. Để ghi chú trong style sử
dụng:
/*
Đoạn ghi chú
*/
 Khai báo:
selector {
Property1: Value1;
Property2: Value2;
}
 Style áp dụng cho thẻ cụ thể:
 Trường hợp 1 thẻ: Đặt selector là tên_thẻ
p{
color: red;
}
 Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ phân cách bởi dấu
phẩy:
h1,h2,h3,h4,h5,h6{
font-family:arial;
}
 Tạo lớp:
 Gắn với thẻ cụ thể: Đặt selector là tên_thẻ.tên_lớp
p.loai1{
color:red;
}
p.loai2{
color:blue;
}
 Không gắn với thẻ cụ thể: bỏ phần tên_thẻ đi, giữ lại dấu chấm:
.loai3{
color:green;
}
 Sử dụng lớp:
 Đặt thuộc tính class của thẻ=“tên_lớp”:
<tên_thẻ class=“tên_lớp”>
 Ví dụ:
<p class=“loai1”>Đoạn này màu đỏ</p>
<h1 class=“loai2”>Style không có hiệu lực</h1>
<h2 class=“loai3”>Tiêu đề màu xanh</h3>
 Định danh:
Tương tự như class. Thay dấu chấm (.) thành dấu thăng (#). Để định
danh cho thẻ cụ thể ta dùng tên_thẻ #định_danh{…}
Tổng quát: #định_danh{…}
 Ví dụ:
p#doan1{
color:red;
}
#loai2{
color:blue;
}
 Sử dụng định danh:
 Mỗi định danh là duy nhất trên trang. Đặt thuộc tính id của thẻ =
định_danh: <tên_thẻ id=“định_danh”>
 Ví dụ:
<p id=“doan1”>Đoạn này màu đỏ</p>

<h1 id=“loai2”>Tiêu đề xanh</h1>
1.4. Các trường hợp sử dụng CSS:
 CSS Background
 CSS Text
 CSS Font
 CSS Border
 CSS Margin
 CSS Padding
 CSS List
 CSS Dimension
 CSS Classification
 CSS Positioning
 CSS Pseudo-class
 CSS Pseudo-element
 CSS Media Types
 CSS định dạng nền:
Tên thuộc tính Ý nghĩa Giá trị

background- Xác định xem hình nền sẽ nằm cố định hay di chuyển Scroll
attachment khi thanh cuộn di chuyển Fixed
Background-color Định màu nền cho một thẻ. Transparent, Color-rgb, Color-hex,
background-color: #ffee33; Color-name
background-color: red;
Background-image Đặt hình nền cho thẻ. url
background-image: url(đường_dẫn_hình) None
Background-position Xác định vị trí của hình nền. x% y%, x y,

background-position: center right; top left, center center
Background-repeat Xác định cách lặp lại hình nền. Repeat, no-repeat
Repeat-x, repeat-y
background Cách viết ngắn gọn để định dạng hình nền cho các element. Viết theo thứ tự: Background-
color Background-image Background-repeat background-attachment Background-position
 CSS cho văn bản:

color Đặt màu chữ Color-rgb, color-hex, color-name
direction Hướng bắt đầu của chữ ltr, rtl

Letter-spacing Khoảng cách giữa các ký tự Normal
Length
Text-align Canh lề (trái, phải, giữa, đều) cho đoạn văn bản Left, right, center, justify
Text-decoration Thêm hiệu ứng (gạch chân, gạch ngang, nhấp nháy…) None, underline, overline, blink
cho đoạn văn bản
Text-indent Thụt đầu dòng 1 đoạn văn bản (chỉ có tác dụng trên Length
dòng đầu tiên) x%
Text-shadow Đổ bóng cho chữ None, color, length
Text-transform Điểu khiển các kí tự (chữ hoa, chữ thường, …) trong None, capitalize, uppercase,
một element lowercase
Word-spacing Khoảng cách giữa các từ trong một đoạn Normal
Length
 CSS và Font
Font-family Định nghĩa danh sách tên các font dùng định dạng cho Font-name
văn bản.
Font-size Kích thước của font-chữ: Xx-small, x-small, small, smaller, medium, large, larger, x-large,
xx-large, length, %
Font-style Định kiểu chữ None, italic, oblique
Font-variant Hiển thị văn bản theo kiểu chữ hoa (nhỏ) hoặc bình None, small-caps
thường
Font-weight Độ đậm của chữ: normal, bold, bolder, lighter, 100 .. 900
Line-height Khoảng cách giữa các dòng
font Cách viết ngắn gọn để định dạng font chữ và văn bản.
Viết theo thứ tự: font-style font-variant font-weight
font-size/line-height font-family
 CSS và đường viền:

Border-top-color Đặt màu cho đường viền trên của đối tượng color:hex,name,rgb
Border-top-style Kiểu đường viền trên (liền nét, gạch đứt, chấm,…) Solid, dash, dotted, …
Border-top-width Độ dày của đường viền Thin, medium, thick length
border-top Cách viết tắt để định dạng cho đường viền trên: border-top-width border-top-style border-
top-color
Border-color Màu của đường viền color:hex,name,rgb
border Cách viết tắt để định dạng các đường viền cho đối tượng:border-width border-style border-
color
Border-width Độ dày của đường viền
Border-style Kiểu đường viền
 Mô hình 3-d của CSS Box – Model:
 Các thuộc tính khác:

display Cách hiển thị đối tượng: none, inline, block, list-item, compact, group, …
position Cách định vị trí (tương đối, tuyệt đối, cố định, …) của Fixed, relative, absolute, static
một đối tượng
float Định vị trí tương đối của 1 đối tượng này so với đối Left, right, none
tượng kia
visibility Cho phép hiển thị đối tượng hay không
cursor Chỉ định kiểu con trỏ chuột: crosshair, pointer, move, text, wait, url(), auto, help, default, e-
resize, ne-resize,…
 CSS và Hyperlink
Để dùng cho liên kết ta dùng thẻ <a>. Thẻ <a> có 4 trạng thái:
– link : trạng thái bình thường
– visited : trạng thái liên kết sau khi được nhấp chuột
– hover : trạng thái liên kết khi rê chuột vào
– active : trạng thái liên kết khi đang nhấp chuột
Để định dạng cho liên kết, ta viết
– Selector:link, selector:visited, selector:hover, selector:active
– Ví dụ:
/* Định dạng cho mọi thẻ <a> */
• a:link, a:visited { color: blue; text-decoration: none; }
• a:hover, a:active { color: red; text-decoration: underline; }
/* Định dạng cho mọi thẻ <a> có thuộc tính class = “lienket” */
• .lienket:link, .lienket:visited { color: blue; text-decoration:
none; }
• .lienket:hover, .lienket:active { color: red; text-decoration:
underline; }
1.5. Phương pháp thực hiện CSS trong Macromedia Dreamweaver:

Macromedia Dreamwearver hỗ trợ dễ dàng cho việc viết và nhúng các file CSS
vào web.
Cách thực hiện:
Tạo file CSS: Vào File chọn New, chọn CSS:
Gõ tên lớp cần thực hiện:
Lưu lại vào dự án.

Muốn gắn file CSS vào trang web, thự hiện như sau:
Click phải vào trang, chọn Attack CSS:
Sau đó cần gắn Class cho đối tượng nào thì Click phải vào đối tượng đó, chọn CSS
Style, chọn lớp tương ứng.
2 Lab1: Thiết kế trang web: Online Comunication

2.1. Yêu cầu:
Học viên sử dụng các hình ảnh trong thư mục Images và nội dung được cung cấp
sẵn trong tập tin noidung.txt để xây dựng trang index.html:
 Tạo tập tin CSS, theo yêu cầu:

– Định lại thẻ BODY:
– Khoảng cách các lề: 0px
– Hình nền: bg.gif
 Tạo lớp định dạng đường biên:
– Màu: fc8e03
– Độ lớn: 2px
– Nét liền
 Tạo lớp định dạng nội dung trang web:
– Font: arial
– Kích cở: 11px
– Màu: 8e8b86
– Màu nền: trắng
– Khoảng cách các biên: 10px
 Tạo lớp nền chuyển sắc theo yêu cầu:
– Tập tin nền: bg_chuyensac.jpg
– Màu nền: FCD001
– Khoảng cách biên trái: 5px;
 Tạo Định dạng cho tiêu đề 1:
– Font: Verdana
– Size: 20px
– Kiểu in nghiên
– Màu: 9d2c00
– Font: Arial
– Size: 11px
– Kiểu in đậm
– Màu: 000000
– Font: Arial
– Size: 11px
– Màu: 9d2c00
– Font: Arial
– Size: 11px
– Màu: FFFFFF
– Font: Arial
– Size: 18px
– In nghiên và đậm
– Màu: 000000
 Tạo Định dạng cho trạng thái liên kết văn bản:
– Font: Arial
– Size: 11px
– In đậm, không gạch chân
– Màu: 000000
– Khi rê chuột vào: Gạch chân
2.2. Thiết lập website cho bài tập
Tạo mới tập tin HTML và lưu với tên INDEX.HTML
2.3. Thiết lập thuộc tính trang, Chọn thẻ Title/Encoding trong chức
năng Page Properties:
– Title: Online communication
Tạo tập tin CSS: Định lại thẻ BODY với các thuộc tính: margin và background-
image.
Gắn tập tin CSS vào tập tin INDEX.HTML.
Tạo bảng biểu: 720x620px; CellPad: 0px; CellSpace: 0px; Align: Center.
Trong tập tin CSS vừa tạo, thêm các lớp định dạng và trạng thái liên kết:
 Lớp nền chuyển sắc với: hình nền: bg_chuyensac.jpg, màu nền: #FCD001,
biên trái: 5px
 Lớp đường_biên: màu #FC8E03, 2px, nét liền
 Lớp nội dung: font: arial, 11px, màu: #8E8B86, màu nền: trắng, khoảng
cách biên:10px
 Lớp tiêu đề 1: font: Verdana, 20px, nghiêng, màu: #9D2C00
 Lớp tiêu đề 2: font: arial, 11px, màu đen, in đậm
 Lớp tiêu đề 3: font: arial, 11px, màu: #9D2C00
Tạo các ô:
 Thiết kế Banner
 Thiết kế thực đơn và tạo swap images
 Thiết kế phần nội dung và áp các CSS tương ứng
 Thiết kế hình ảnh và văn bản cho lề phải, Áp các CSS định dạng tương ứng
cho các tiêu đề.
 Kiểm tra và hoàn chỉnh giao diện:
3 Lab2: Thiết kế trang web: ASEAN

3.1. Yêu cầu:
Học viên sử dụng các hình ảnh trong thư mục Images và nội dung được cung cấp
sẵn trong tập tin noidung.txt để xây dựng trang about.html (theo mẫu about.jpg)
với các yêu cầu sau:
 Bố cục hình ảnh cho trang Web theo đúng mẫu thiết kế.
 Tạo tập tin CSS để định lại trạng thái liên kết cho các nút: about, guess
rooms, conference, Asean travel, Entertainment, Reservation, Feedback.
– bình thường: font Arial, kích cở 9px, màu trắng, không gạch chân
– rê chuột vào: gạch chân, màu vàng.
 Định lại thẻ BODY:
– Khoảng các lề: 0px
– Màu nền: #C0C0C0
– Đổi màu thanh cuộn:
 Face: #A0A0A0
 Track: #C0C0C0.
 Tạo thêm một lớp khung:
– Màu: vàng
– Biên phải: 1px
– Kiểu: solid
 Tạo lớp nội dung:
– Font: Verdana
– Size: 9pt
 Định lại danh sách liệt kê:
– Hình ảnh: arraow.gif
 Tạo hiệu ứng đổi hình cho các nút :
– Local of hotel
– Description of hotel
– Hotel contact detail.

 Tạo liên kết như sau:
– Bấm vào logo ASEAN liên kết về trang index.htm
– Tạo liên kết điểm dừng cho các nút Local of hotel, Description of
hotel, Hotel contact detail.

 Thiết lập website cho bài tập:
– Default images folder: chọn thư mục Images.
 Mở tập tin đã thiết kế ABOUT_BEGIN.HTML, lưu lại với tên

ABOUT.HTML
 Tạo tập tin CSS

– Hiệu chỉnh lại các thuộc tính của trang như: biên, màu nền, màu
thanh cuộn.. Trong thẻ <BODY>.
– Hiệu chỉnh lại trạng thái liên kết bằng cách định lại thẻ <A>.
– Tạo các lớp định dạng: Biên phải của khung, Danh sách, Nội dung
văn bản của trang.
– Hiệu chỉnh lại danh sách liệt kê
– Tạo lớp định dạng nội dung: (chẳng hạn nút Local of hotel, trạng
thái ban đầu là tập tin locahotel.gif, khi rê chuột vào thì đổi thành tập
tin locahotel _over.gif)
– Vị trí: Outside, Arrow: #FFFFFF
 Gắn vào tập tin ABOUT.HTML:
 Áp các lớp vào trang Web và hoàn chỉnh giao diện:
4 Lab3: Thiết kế trang web: Beauty

4.1. Yêu cầu:
Học viên sử dụng các thẻ HTML đã được học trong các bài trước, các hình
ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin noidung.txt
để xây dựng trang beauty.html (theo mẫu index.jpg).

 Thiết lập website cho bài tập
 Default images folder: chọn thư mục Images
 Tạo tập tin CSS, Định lại thẻ BODY với các thuộc tính: margin và
background-color:
body {
margin:0px 0px 0px 0px;
background-color:#000000;
}
 Gắn tập tin CSS vào tập tin INDEX.HTML
 Tạo bảng biểu: 760x700 px, CellPad: 0px; CellSpace: 0px, Align: Center,
Thiết kế banner và các thực đơn
 Trong tập tin CSS vừa tạo, thêm các lớp định dạng và trạng thái liên kết:
 Lớp nền:
.nen {
background-image:url(Images/bg.gif);
background-repeat:repeat-y;
background-color:#000000;
border-bottom:#FFFFFF 1px solid;
color:#FFFFFF;
padding-left:10px;
}
 Hiệu chỉnh trạng thái liên kết
a{
font-family:verdana;
font-size:13px;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
 Tạo lớp tiêu đề:
.tieude {
font-family:tahoma;
font-size:12px;
color:#000000;
font-weight:bold;
}
 Tạo lớp liên kết:
a.path {
font-family:arial;
font-size:11px;
color:#FFFFFF;
text-decoration:none;
font-weight:normal;
}
a.path:hover {
text-decoration:underline;
color:#FFFF00;
}
 Tạo lớp lề trái:
.le_trai {
background-image:url(Images/bg.gif);
background-repeat:repeat-y;
padding-left:10px;
padding-top:20px;
}
 Định nghĩa lại hộp nhậu liệu Textarea
textarea {
font-family:arial;
font-size:11px;
border:0px;
background-color:#de959c;
scrollbar-face-color: #efc1c4;
scrollbar-track-color: #de959c;
scrollbar-arrow-color: #000000;
}
Tạo lớp nội dung:
.noidung {
font-family:tahoma;
font-size:11px;
color:#FFFFFF;
padding-left:20px;
padding-top:20px;
}
 Tạo swap images cho các nút liên kết
– Tạo liên rỗng và cuộn liên kết từ dưới lên cho hộp CONSULTANT
– Tạo đối tượng chứa văn bản Textarea, đồng thời dùng CSS đổi màu
thanh cuộn
 Tạo bảng biểu thiết kế nội dung trang web, và Hoàn chỉnh giao diện.
Phần 6: Các tính năng nâng cao Macomedia Dreamweaver

8.0
Phần này cung cấp cho học viên các kiến thức liên quan đến:
 Các đối tượng Form, Movie
 Các tính năng DHTML.
 Thiết kế website với FrameSet.
 Thực hiện các bài lab liên quan.
5 Bài 1: Đối tượng Form, Movie

5.1. Đối tượng Form:
Các đối tượng Form cho phép chèn và thiết lập các đối tượng của winform. Các
đối tượng này tạo ra các công cụ thuận tiện cho việc giao tiếp giữa người dùng với
hệ thống web.
5.2. Cách sử dụng:
Trên thanh Insert chọn Form:
Có 6 loại đối tượng:

– Đối tượng Form: cho phép chèn 1 thẻ form trong trang web. Các
đối tượng khác của form phải nằm trong thẻ này.
– Đối tượng Text: cho phép chèn các ô để nhận dữ liệu.
– Đối tượng chọn lựa(selection): cho phép chèn các đối tượng cho
người dùng chọn.
– Đối tượng Danh sách(List): tạo ra một danh sách có sẵn.
– Đối tượng Button: tạo các dạng nút bấm cho người dùng.
– Đối tượng nhãn(lable): dùng để chèn các dòng văn bản cho các đối
tượng khác.
2.a. Thẻ Form:

Thẻ Form dùng để tạo ra một vùng cho phép các đối tượng khác hoạt động.
Thẻ Form cũng dùng để đẩy các nội dung trong trang ra trang khác theo yêu cầu
của người dùng.
 Ví dụ:
 Các thuộc tính:

– FormName: tên của thẻ
– Action: dạng hoạt động, đây thường là đích đến cho dữ liệu.
– Method: phương thức hoạt động.
• Post: đẩy dữ liệu đi.
• Get: lấy dữ liệu về.
• Default: không trạng thái.
• ...
2.b. Thẻ Text Field:
Dùng cho việc chèn đối tượng là TextBox, cho phép nhập liệu.
2.c. Thẻ Hidden Field:

Cho phép chèn một đối tượng, có giá trị nhưng bị ẩn đi. Thẻ Hidden Field
có tác dụng rất lớn trong việc cất giấu giá trị trong trang web.
2.d. Thẻ Textarea :
Dùng cho việc chèn đối tượng là một vùng nhập liệu, nhằm mục đích cho
người dùng nhập một lúc nhiều dữ liệu.
2.e. Thẻ CheckBox:

Tạo ra các chọn lựa cho người dùng. Người dùng có thể chọn nhiều cách cùng lúc.
2.f. Thẻ Radio Button:

Tạo ra các chọn lựa cho người dùng nhưng chỉ được phép chọn một cách.
2.g. Thẻ Radio Group

Tạo ra một nhóm các đối tượng radio.
2.h. Thẻ List Item

Tạo ra một Combobox cho phép người dùng chọn lựa.
2.i. Thẻ Button

Tạo button trong trang web, nhằm tạo ra sự kiện click co người dùng. Có 2
dạng button:
– Button Submit: đẩy dữ liệu đi.
– Button Reset: xóa hết các giá trị cho các control.
Thiết lập các thuộc tính bắt buộc:

Các thuộc tính bắt buộc là các thuộc tính bắt buộc cho người dùng, nhằm mục đích
ràng buộc người dùng thao tác lên đối tượng web. Trong Macromedia
Dreamweaver việc thiết lập các thuộc tính này được thực hiện dễ dàng bằng các
công cụ.
 Đặt tên cho các thẻ:
 Chọn thẻ Form:
 Chọn Tag Form(bên phải), chọn Behaviors, Nhấp chuột vào dấu +, Chọn
Validate Form:
 Trong phần Validate, chọn một số thuộc tính sau:

 Name Fields: chọn đối tượng cần thiết lập.
 Required: đối tượng đó bắt buộc nhập.
 Accept: Theo dạng nào.
 Sau khi kết thúc, thực chất của việc thiết lập các thuộc tính bắt buộc là các
hàm Javascript, ta có thể xem các hàm được viết bằng cách qua phần code:
5.3. Đối tượng Media:

Đối tượng Multimedia là các đối tượng đa phương tiện, được hỗ trợ bằng
cách nhúng các thành phần vào trong trang. Các đối tượng multimedia được tích
hợp bằng cách chạy song song như là thành phần của trang hoặc có thể chạy dựa
trên một plugin của hệ thống. Các đối tượng này sẽ tạo ra tính sinh động của trang
web.
Các đối tượng Multimedia được chia thành nhiều dạng:
 Các đối tượng audio, movie: là các đối tượng chạy bằng hình ảnh,
âm thanh, file nhạc.
 Các đối tượng Flash: các đối tượng này là các file flash dạng *.swf
 Các đối tượng Apllet: là các đối tượng được lập trình bằng ngôn ngữ
Java.
 ....
 Chọn nơi cần chèn trong trang web
 Trên thanh Menu: Insert\Media
5.5. Chèn đối tượng Movie:

Các đối tượng Movie được
Dreamweaver hỗ trợ khi chèn vào bằng
cách đính kèm với một Plugin(thường là
Windows Media Player). Các đối tượng
này tạo nên tính sinh động cho trang
web. Hỗ trợ nhiều file định dạng như:
mp3, wav, wma, wmv, ….
Chèn Movie chạy trên Plugin:
 Cần chèn đối tượng nào, ta chọn đối tượng đó.
 Copy các file nhạc vào cùng với dự án web(nên để trong cùng một thư
mục).
 Trên thanh Menu: Insert\Media\ Plugin.
 Chọn bài file cần thực hiện, nhấn OK.
Kết quả trên giao diện:
Trên Code:
Lưu ý là có thể các thuộc tính được thiết lập nhưng chưa đầy đủ, ta phải
thêm các thuộc tính mới như autostart="true“, id = “newwin”, …
5.6. Chèn Movie chạy nhạc nền cho trang web:
Các thao tác giống với cách thực hiện khi chạy trên plugin nhưng ta thêm
thuộc tính hidden="true":
5.7. Chèn đối tượng Flash:

Các đối tượng Flash được tạo ra bằng công cụ Macromedia Flash. Đây là các
đối tượng nhằm tô điểm cho trang web thêm phần sinh động, hấp dẫn. Các đối
tượng Flash có đuôi mở rộng là *.swf.
Giả sử cần chèn 1 bài hát vào trang web được thiết kế bằng flash. Copy file
flash vào cùng với dự án web. Trên thanh Menu: Insert\Media\Flash. Chọn file
cần chèn, nhấn OK.
Kết quả trên giao diện:
Trên Code:
Nhấn F12 ta có kết quả:
Ngoài cách chèn vào 1 file Flash có sẵn, Dreamweaver 8 còn hỗ trợ chèn thêm
các dạng Flash tự tạo. Đây là một đặc tính riêng, nhằm giúp cho người dùng
nhanh chóng có các hiệu ứng Flash mà không cần xây dựng trước đó.
Sau đây là một vài dạng:
Flash Text: Là Flash tạo hiệu ứng cho các dòng chữ.
Flash Button:Hiệu ứng Flash tạo ra các nút bấm nghệ thuật.
Flash Paper: Flash tạo ra trong trang.
Flash Video:
6 Lab1: Thiết kế trang Đăng ký

6.1. Yêu cầu:
 Học viên sử dụng các hình ảnh trong thư mục Images để xây dựng trang
thamgia.html (theo mẫu thamgia.jpg) với các yêu cầu sau:
 Tạo tập tin CSS với các thiết lập hiện thị sau:
– Định lại thẻ BODY
• Các lề trang: 0px;
– Tạo lớp tiêu đề:
• Font: tahoma
• màu: #000000
• Kích thước: 24px, in đậm
– Tạo lớp nội dung:

• Font: tahoma
• màu: #000000
• Kích cở: x-small
– Tạo lớp biên trái:
• màu: #00905d
• kiểu nét gạch
• độ lớn 2px
• khoảng cách biên: 10px
– Local root folder: chọn thư mục chứa tập tin HTML và Images.
 Tạo mới tập tin HTML và lưu với tên DANGKY.HTML.
 Chọn thẻ Title/Encoding trong Page properties:

– Title: Đăng ký
 Tạo tập tin CSS, thiết lập các định dạng:

– Thuộc tính trang
– Đường biên
– Tiêu đề
– Nội dung
 Tạo bảng biểu: 720x620px; CellPad: 0px; CellSpace: 0px; Align: Center.
 Tạo các đối tượng:
– Tạo Đối tượng Biểu mẫu FORM

– Tạo bảng biểu chứa nội dung
– Thiết kế các đối tượng FORM
 Thêm các thuộc tính bắt buộc:

Thêm Behavior “Validate Form” để kiểm tra tính hợp lệ của các giá trị trong
biểu mẫu, Hoàn chỉnh giao diện.
7 Lab2: Thiết kế trang Feedback

7.1. Yêu cầu:
Học viên sử dụng tập tin feedback.html và các hình ảnh trong thư mục
Images để xây dựng trang feedback.html (theo mẫu feedback.jpg) với các yêu cầu
sau:
 Thêm các định dạng vào tập tin CSS với các thiết lập hiện thị sau:
– Tạo lớp định dạng lại các ô nhập liệu:
• Đường biên: 0x
• Màu nền: #C0C0C0
• Đường biên dưới: màu đen, 1px và đường gạch
– Tạo lớp định dạng lại nút bấm:
• Hình nền: nutbam.gif
• Nền không lặp
• màu: #EEEEEE
– Kiểm tra tính hợp lệ của dữ liệu trong các ô nhập liệu:
• First name: bắt buộc nhâp liệu
• Tel: bắt buộc nhâp liệu
• E-mail: dạng địa chỉ email
– Nhấn nút [Submit] Gởi form theo dạng E-mail theo địa chỉ mail của
bạn
– Nhấn nút [Reset] điền lại thông tin.
Mở tập tin feedback.html:
 Tạo đối tượng FORM
– Tạo bảng biểu để bố cục đối tượng.

– Tạo các đối tượng trong FORM
 Mở tập tin style.css:
 Tạo các lớp CSS định dạng:

o Ô nhập liệu
o Hiệu chỉnh nút bấm
o Nội dung.
 Áp dụng các lớp CSS cho các đối tượng trong FORM:
 Thêm Behavior: “Validate Form” để kiểm tra tính hợp lệ của các giá trị
trong biểu mẫu và Hoàn chỉnh giao diện.
8 Bài 2: Thiết kế web với Frameset và các tính năng DHTML

8.1. Thiết kế web với Frameset:
1.a. Giới thiệu:
Frame Set trong thiết kế web là việc phân chia thành các vùng trong trang web,
giúp ích cho việc thiết kế trang web theo từng thành phần. Frameset giúp cho việc
định hình trang web thành từng vùng để dễ điều khiển và thực hiện thao tác nhanh
hơn.
Ví dụ, trang web sau đây sử dụng Frameset: có 4 vùng cơ bản được sử dụng là
Top, Left, Content và Bottom, mỗi vùng được xây dựng từ một trang riêng rẽ.
 Tạo frame:
Frame chia trình duyệt ra làm nhiều khung nhỏ hơn và mỗi khung cho phép
hiện 1 trang web riêng biệt vì thế bạn phải tạo một trang web chứa các khung đó.
Trang đó gọi là frame set, nếu mỗi frame như 1 quyển sách thì frame set chính là
cái tủ sách để xếp các quyển sách chung với nhau.
 Tạo frame cơ bản.
Sau thẻ đóng </head> dùng thẻ<frameset> với các thông số sau:
- cols="a, b": Chia trình duyệt ra làm nhiều cột với các giá trị a, b, c, ... Phần
rộng của mỗi cột có thể tính bằng pixel hay % của cửa sổ trình duyệt.
- rows="a, b": Tương tự trên nhưng là chia theo hàng.

Ngoài 2 giá trị là pixel và % còn có 1 giá trị nữa là *, nghĩa là phần còn lại.
Nếu bạn chọn frame 1 là 40%, frame 2 là 40%, frame 3 dùng * có nghĩa là
20%.
Sau đó dùng tag con <frame> cho từng frame riêng biệt với các thông số:
- name: bí danh của khung giúp chỉ định đúng frame khi ta muốn tải 1 trang
khác thay thế vào.
- src: đường dẫn đến trang web được chọn để hiển thị trong frame.
Chú ý là tag <frame> không có khoá đóng. Sau cùng kết thúc bằng </frameset>.
 Bố cục của Frame
<html>
<head>
<title> Trang chủ </title>
</head>
<frameset>
<frame>
<frame>
........
<frame>
</frameset>
</html>
 Ví dụ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
</FRAMESET>
</HTML>
 Kết quả có dạng:
1.b. Định dạng cho Frame

Chỉnh lề cho frame: Với chỉ số mặc địng thì mỗi frame sẽ cách các lề của cửa sổ
trình duyệt là 8 pixel. Có hai giá trị cần quan tâm ở đây là:
- Marginwidth: Chỉnh cho 2 bên khung frame với đơn vị tính là pixel.
- Marginheight: Chỉnh cho khoảng trên dưới khung frame tính bằng pixel.
Chỉnh màu đường viền cho frame: Dùng thông số phụ là bordercolor. Nếu đặt
trong tag <frameset> thì qui định cho toàn bộ tất cả frame, nếu đặt trong tag
<frame> thì chỉ có tác dụng trong frame đó.
Hiệu chỉnh đường viền cho frame: Các frame thường có khoảng trống mặc định
là 5 pixel khoảng cách với nhau. Nếu muốn điều chỉnh thì dùng thông số phụ
border trong tag <frameset>. Nếu muốn che giấu đường viền của frame thì dùng
thông số frameborder=0 trong tag <frameset>.
Link cho frame: Chọn frame hiển thị cho link, trong web chứa link gõ link như
sau: <a href="link" target="bí danh frame"> Nội dung link </a> với bí danh chính
là phần name được qui định trước. Nếu muốn trang web mới hiển thị trong frame
nào chỉ cần cho bí danh của frame đó vào target.
Có thể thay đổi đích mặc định cho link bằng cách trong tag <head> của
trang chứa link (không phải trang chứa frame set) dùng tag <base> như sau: <base
target="bí danh frame">.
8.2. Thiết kế Frameset bằng Macromedia Dreamweaver.
Macromedia Dreamweaver 8 hỗ trợ rất nhiều cho phương pháp thiết kế
bằng Frame Set. Bằng hình ảnh trực quan,
thiết kế Frame Set bằng Dreamweaver sẽ
dễ dàng hơn.
Phương pháp thực hiện: Thiết lập
Website Project, định hướng Frame: xác
định xem trang web xây dựng cần có bao
nhiêu Frame. Xây dựng từng trang tương
ứng cho từng Frame. Lưu các trang này
vào dự án:
 Vào File\New
 Trong hộp thoại Document, chọn thẻ General\ Framsets.
 Chọn dạng Frame thích hợp trong phần Framesets.
 Nhấn Ctrl+S để lưu Frameset vừa chọn.
 Vào Windows\Frames để mở cửa sổ Frame:
 Bên phải trong thẻ Frames, chọn từng

frame. Với mỗi frames, trong phần
properties chọn thuộc tính Src.
 Hộp thoại Src cho phép chọn trang html nào được add vào frame đó.
 Nhấn F12 để chạy và xem kết quả.

8.3. Các tính năng DHTML trong thiết kế web.
 Chuyển động theo timeline.
 Hoán vị hình ảnh
 Chuyển động Text và đối tượng theo Marquee.
 Thay đổi thuộc tính cho đối tượng.
 Thiết lập menu cho đối tượng.
Chuyển động đối tượng theo Marquee: Đây là phương pháp thường được áp
dụng cho việc chuyển động các đối tượng trong website.
Cú pháp: <marquee>Đối tượng cần chuyển động</marquee>
Thuộc tính:
– behavior: dạng chuyển động.
• Scroll: quay vòng
• alternate: luân phiên

• slide: chạy 1 lần.
– direction: chiều chuyển động.
– scrolldelay: độ chậm của chuyển động(milisecond)
– Ví dụ:
<marquee behavior="scroll" direction="left" width="200" scrolldelay="100">Chao Thai Duy Quy</marquee>
Thay đổi thuộc tính cho đối tượng: Mỗi một

đối tượng đều có các thuộc tính đặc trưng. Các
thuộc tính này được thiết lập sẵn khi tạo ra đối
tượng. Ta có thể thay đổi các thuộc tính này thông
qua việc thực hiện một sự kiện nào đó
(mousemove, mouseout, mouseclick, …).
Cách thực hiện:Chọn đối tượng, bên phải trong
thẻ Tag Inspestor, thêm sự kiện Change
Properties.Trong hộp thoại Change Properties,
ta quan tâm tới các thuộc tính sau:
– Type of object: Các kiểu đối tượng
thực hiện hiệu ứng.
– Name object: Tên các đối tượng cần thực hiện.
– Select: chọn các thuộc tính cần thay đổi.
– New value: giá trị mới cho sự thay đổi.
Chọn OK, thay đổi tên các sự kiện trong vùng Behaviors cho phù hợp. Chú ý là
ở phần code, nó là một hàm, được viết bằng javascript.
Thiết lập Menu cho đối tượng: Macromedia Dreamweaver hỗ trợ cho người
dùng phương pháp tạo ra một menu cho đối tượng. Menu này chỉ mang tính minh
họa, nếu muốn thực hiện các menu cao cấp, bạn phải viết bằng javascript.
Cách thực hiện:Chọn đối tượng, bên phải trong thẻ Tag Inspestor, thêm sự
kiện Show Pop-Up Menu, Trong hộp thoại Show Pup-Up Menu ta quan tâm tới
phần:
 Contents(Nội dung của menu):
– +,- Thêm danh mục Menu
– Text: gõ text cho Menu
– Link: Link cho menu, nếu không có thì đặt
#(rỗng).
 Appearance: Định dạng cho menu. Ta có các định
dạng như Font chữ, kích thước, hay màu cho Menu.
 Advanced:Các định dạng khác như độ rộng, ví trí,
hay tô viền xung quanh menu.
 Position: Các dạng của Menu.
Chọn các định dạng, sau đó nhấn OK. Nhấn F12 ta được kết quả:
9 Lab1: Thiết kế trang Trang dân gian Việt Nam

9.1. Yêu cầu:
Học viên sử dụng các hình ảnh trong thư mục Images, nội dung trong tập
tin noidung.txt để xây dựng trang gioithieu.htm (theo mẫu gioithieu.jpg) với các
yêu cầu sau:
 Thiết kế theo dạng trang khung (Frameset)gồm 2 khung (Trái, Phải)

 Khung Trái với hệ thống liên kết:
– [Trang Chủ]: về trang Index.htm
– [Danh Họa VN]: Một Popup menu gồm 2 danh họa
(| Nguyễn Phan Chánh| Trương Hán Minh |)
– [Tranh Dân Gian]: Một Popup menu gồm 3 phân lọai
(|Tranh Đông Hồ | Tranh hàng trống |Tranh thờ miền núi |)
 Với nhóm ảnh minh họa của khung Trái, Khi rê vào các ảnh (h1.jpg, h2.jpg,
h3.jpg, h4.jpg), thì ảnh đó sẽ nằm ở lớp trên cùng (Z-index).
 Khung trên : Chứa lọat ảnh minh họa. Dùng Marquee làm lọat ảnh này
chạy qua lại ngang màn hình
 Thiết kế trang nội dung.
 Mô phỏng trang:
Bước 1:
Thiết kế trang trái LEFT.HTML
Thiết lập website cho bài tập:
 Default images folder: chọn thư mục Images
 Tạo mới tập tin HTML và lưu với tên LEFT.HTML
Định thuộc tính trang: Chọn thẻ Appearance trong Page properties:
 Màu nền: #DFAB83
 Margin: 0px
Chọn thẻ Title/Encoding trong Page properties:
 Title: Trang trái

Tạo bảng biểu: 200x620 px; CellPad: 0px; CellSpace: 0px;
Thiết kế nút bấm: Trang chủ, Tin Tức
Thiết kế Popup-Menu
Thiết kế và tạo tương tác cho các lớp hình
Hoàn chỉnh giao diện như hình bên.
Bước 2:
Thiết kế trang trên TOP.HTML
Tạo mới tập tin HTML và lưu với tên TOP.HTML.
Định thuộc tính trang: Chọn thẻ Appearance trong Page Properties:
 Màu nền: #DFAB83
 Margin: 0px
 Title: Trang top
Thiết kế và tạo tương tác cho các hình ảnh tượng trưng
Hoàn chỉnh giao diện như hình dưới đây:
Bước 3:
Thiết kế trang NOIDUNG.HTML
Tạo mới tập tin HTML và lưu với tên NOIDUNG.HTML
Định thuộc tính trang: Chọn thẻ Appearance trong Page Properties:
 Hình nền: nen2.gif

 Repeat: Repeat - y
 Margin: 0px
 Title: Nội dung
Thiết kế nội dung và hình ảnh.
Hoàn chỉnh giao diện như hình dưới đây:
Bước 4:
Thiết kế GIOITHIEU.HTML
Tạo mới trang khung – Framesets:
Lưu trang khung:
Hiển thị bảng Frame, chọn từng Frame gắn cho các tập tin tương ứng và hiệu
chỉnh thông số.
Kiểm tra và hoàn chỉnh giao diện:
10 Lab2: Tự tạo trang web bằng mẫu có sẵn.

10.1. Yêu cầu:
Trong nội dung của Lab này, các học viên sẽ thực hiện:
– Xem và chỉnh sửa một số dạng web có sẵn.
– Ôn tập một số kiến thức.
Khởi động Dreamweaver, trong phần Create from Samples:
 Chọn Page Design(CSS): có các trang được thiết kế sẵn dưới dạng CSS.
 Chọn Starter Pages: Các trang được thiết kế sẵn theo nhiều
Chọn các dạng trang thích hợp, nhấn OK, Create sau đó nhấn F12 để chạy trang
web.
Với việc chọn các dạng trang, ta có thể tùy biến giao diện, từ đó có thễ tạo một
trang web cho chính mình với các kiến thức đã học:
– Tạo trang, thiết lập thuộc tính trang.

– Thực hiện thiết kế với layout table, layoutcell, layer, …
– Thực hiện các behavior cho từng đối tượng.
– Thực hiện định dạng trang web với CSS.
– Thực hiện trang với Frame Set
Phần 7: Cơ bản về ngôn ngữ Javascript

Phần này cung cấp các kiến thức liên quan đến:
 Khái niệm về Javascript.
 Cú pháp và khai báo ngôn ngữ Javascript.
 Cách sử dụng Javascript trong web
 Thực hiện các bài lab liên quan.
1 Bài 1: Giới thiệu và áp dụng Javascipt

Javascript là một ngôn ngữ thông dịch (interpreter) có đặc tính:
• Đơn giản.
• Động (Dynamic).
• Hướng đối tượng (Object Oriented).
1.2. Nhúng JavaScript vào trong tập tin HTML:
<SCRIPT language=”JavaScript”>
// JavaScript Program
</SCRIPT>
Thuộc tính của thẻ SCRIPT
+ SRC :Địa chỉ URL chỉ đến tập tin chương trình JavaScript (*.js)
+ language : Chỉ định ngôn ngữ được sử dụng trong Script và các phiên bản
sử dụng (ví dụ như JavaScript, VBScript, C#, …).
1.3. Sử dụng tập tin JavaScript bên ngoài:
<SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.hcmuns.edu.vn/scroll.js”>
</SCRIPT>
Thêm chương trình vào tập tin HTML:
<HTML>
<HEAD>
<TITLE>Listing 2.1</TITLE>
</HEAD>
<BODY>
Here is result:
<SCRIPT LANGUAGE="Javascript">
document.writeln("It work<BR>");
</SCRIPT>
</BODY>
</HTML>
Sử dụng Javascript: JavaScript xây dựng các hàm,các phát biểu,các toán tử và
các biểu thức trên cùng một dòng và kết thúc bằng ; Ví dụ: document.writeln("It
work<BR>"); Một khối lệnh được bao bởi { }. Để xuất dữ liệu ra cửa sổ trình
duyệt ta dùng 2 phương pháp là document.write() và document.writeln()
Ví dụ:
document.write(“Test”);
document.writeln(“Test”);
1.4. Làm việc với các dialog boxes
 Hàm alert() để hiển thị thông báo theo một chuỗi.
Ví dụ: alert(“Chào mừng bạn đến với Javascript”) ;
 Hàm confirm() để hiễn thị hộp thoại Yes/No.
Ví dụ: confirm("Wrong ! press OK for a second change") ;
 Hàm prompt () để nhận giá trị của người dùng nhập vào.
Ví dụ: name=prompt(“Nhập tên:","name"); sẽ cho kết quả như hình dưới:
1.5. Tạo biến trong JavaScript:

var example;
var example=”Hello”;
Ta có thể dùng document.write(example); để xuất
nội dung của biến.
Ví dụ:
<script language="javascript">
var a = 1, b =2, c =a+b;
document.write(a+"+"+b+"="+c);
</script>
1.6. Toán tử trong Javascript:

• = Dấu gán. Ví dụ: var x=5;
• +=, -=, *=, /= Các phép toán dồn. Ví dụ: var x=10 ; x +=2 ; // x = 12
• x++, x--: phép toán tăng 1 ngôi.
• /, % : phép toán chia và lấy phần nguyên.
• &&, ||, ! Phép toán và, hoặc, not.
• (đk)?a:b Toán tử điều kiện.
• “a”+”b” : toán tử chuỗi.
1.7. Cấu trúc điều khiển trong Javascript.
Câu lệnh if:
if (điều kiện)
{ Mã JavaScript}
else
{ Mã JavaScript}
Ví dụ:
if (day==”Saturday”) {
document.writeln(“It‘s the weekend”);
alert(“ It’s the weekend”);
}else
alert(“ It’s the weekend”);
Vòng lặp for :
Cú pháp: for ( init value ; condition ; update expression )
Ví dụ :
for (i = 0 ; i < 5 ; i++)
{
document.writeln("<p>Ngay thu " +
i+"</p>");
}
</script>
Vòng lặp while :
Cú pháp:
While ( điều kiện)
{
lệnh JavaScript ;
}
Ví dụ:
var num=1;
while(num<=10)
{
document.writeln(num); num++;
}
1.8. Sử dụng đối tượng Document:
Documentlà đối tượng của môi trường Navigator. Nó có các thành phần có thể
giúp cho chương trình JavaScript đều có thể sử dụng đối tượng này để xử lý.
 Các thuộc tính (properties) của đối tượng document
. alink . lastModified
. anchor . linkColor
. bgColor . links
. cookies . location
. fgColor . referrer
. form . title
. vlinkColor
Các phương thức của đối tượng document
. clear()
. close()
. open()
. write()
. writeln()
1.9. Sử dụng đối tượng window.

Các thuộc tính của đối tượng Window.
• defaultStatus: Giá trị mặt nhiên được hiển thị ở thanh trạng thái.
• frames: Mảng các đối tượng chứa đựng một mục cho mỗi frame con trong
một frame tài liệu
• parent : Được sử dụng trong FRAMSET.
• self: Cửa sổ hiện hành , dùng để phân biệt giữa các cửa sổ hiện hành và các
forms có cùng tên .
• status: Giá trị của chuỗi văn bản được hiển thị tại thanh status bar. Dùng để
hiển thi các thông báo cho người sử dụng .
• top: Đỉnh cao nhất của cửa sổ cha.
Các phương thức của đối tượng window
 alert() : Hiện 1 thông báo trong hộp thoại với OK button.
 close() : Đóng cửa sổ hiện hành.
 open() : Mở một cửa sổ mới với 1 tài liệu được chỉ ra hoặc mở một tài liệu
trong một tên cửa sổ được chỉ định.
 prompt() : Hiện một hộp thông báo
 setTimeout(), clearTimeout() : phương thức này cung cấp cách gọi phát
biểu JavaScript sau một khoảng thời gian trôi qua. Ngoài ra đối tượng
window có thể thực hiện event handler : onLoad=statement
1.10. Làm việc với status bar:
Khi di chuyển qua một hyperlink, hiện ra một thông báo tại thanh status bar
của bowser. Ta dựa vào event onMouseOver và bằng cách đặt self.status là một
chuỗi. Ví dụ:
<BODY>
<A HREF=“plc.htm” onMouseOver=”self.status=’Chuyen de PLC’ ;return
true ;” >Lop chuyen de PLC </A>
<A HREF=“tkweb.htm” onMouseOver=”self.status=’Thiet Ke Trang Web’

;return true ; “ >Thiet Ke Web</A>
</BODY>
1.11. Mở và đóng các cửa sổ:
Sử dụng phương thức open() và close() ta có thể điều khiển việc mở và đóng
cửa sổ popup.
Ví dụ:
open (“URL” , “WindowName” , “featureList”) ;
Các thuộc tính:
• toolbar : tạo một toolbar chuẩn
• location: tạo một vùng location
• directories: tạo các button thư mục chuẩn
• status: tạo thanh trạng thái.
• menubar : tạo thanh menu tại đỉnh của cửa sổ
• scrollbars: tạo thanh scroll bar
• resizable: cho phép user thay đổi kích thước cửa sổ
• width : chỉ định chiều rộng cửa sổ theo đơn vị pixel
• height : chỉ định chiều cao cửa sổ theo đơn vị pixel
Ví dụ:
<SCRIPT LANGUAGE="JavaScript">
function openWindow(url,name) {
popupWin = window.open(url, name, "scrollbars=yes,width=200,
heigth=100 ");
}
</SCRIPT>
<body>
<a href="javascript:openWindow('duyquy.html','Win')">New Window</a>
</body>
1.12. Sử dụng đối tượng string:

String là một đối tượng của JavaScript dùng cho việc xử lý chuỗi. Giá trị của biến
string được đặt giữa hai dấu ngoặc kép.
Thuộc tính của đối tượng string: .length giữ số kí tự của string.
Các phương thức cơ bản:
 charAt(index): trả về ký tự tại vị trí index.
 fontcolor(color): tô màu cho chuỗi.
 fontsize(size): định kích thước chuỗi.
 indexOf(character,[fromIndex]): lấy chỉ số của ký tự, trả về -1 nếu không
có.
 lastIndexOf(character,[fromIndex]): lấy chỉ số cuối cùng của ký tự, trả về -1
nếu không có.
 substring(startIndex,endIndex): cắt chuỗi.
 toLowerCase(): chuyển thành chuỗi thường.
 toUpperCase(): chuyển thành chuỗi hoa.
2 Lab1: Làm quen với ngôn ngữ Javascript.

Mục đích:
- Làm quen với các phương thức và sự kiện trong Javascript.
- Thực hiện được việc nhúng các mã javascript vào trong trang web.
- Chạy chương trình Macromedia Dreamweaver 8
- Thiết lập website cho bài tập(site name, local root folder, default images folder,
Title/encoding).
- Thực hiện các bài tập sau:
Bài 1: Radio Button alert
Tạo giao diện sau:
Yêu cầu:
Tạo ra các Radio Button, mỗi lần click vào nút nào thì hiện lên một hộp thoại
thông báo: "Bạn chọn số ...".
Hướng dẫn:
Cách 1:
- Chạy chương trình Dreamweaver 8. Tạo 1 file mới với tên index1.html.
- Chèn vào các radio button, đặt tên cho các radio này:
Trong phần code:Vào từng radio gõ thêm: value="Bạn chọn số 1"

onClick="alert(value)
Code tham khảo:

<form>
Chọn các chức năng:
<p>
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>
Cách 2:
Trong phần code:Giữa 2 thẻ <head> và </head>, bạn chèn đoạn code như hình
sau:
Trong các thẻ radio button, bạn thêm vào sự kiện onClick như hình ảnh sau:
Code tham khảo:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bai Lab 1 </title>
function XuatMsg(Str)
{
alert(Str) ;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
1: <input name="radio" type="radio" value="Bạn chọn số 1"
onclick="XuatMsg(value)" />
onclick="XuatMsg(value)"/>
</form>
</body>
</html>
Cách 3:
Vào File\New, trong hộp thoại New Document, ở thẻ Basic page chọn Javascript,
nhấn Create:
Nhấn Ctrl + S, lưu với tên file Script.js
Chèn đoạn code sau, như hình:
Vào code trang chính, gõ đoạn code như hình vẽ sau:
Trong phần radio button, dùng sự kiện Onclick gọi hàm đã viết trong file Script
trên:
Code tham khảo:

<head>
<title>Untitled Document</title>
<script language="javascript" src="Script.js">
</script>
</head>
<body>
onclick="XuatMsg(value)" />

</form>
</body>
</html>
Chú ý:
Từ các bài sau, các bạn tự do trong việc thiết kế theo một trong ba cách trên,
tuy nhiên khuyến cáo các bạn chèn theo cách thứ ba. Vì cách này thường
được áp dụng.
Bài 2: Nhập và xuất chuỗi

Yêu cầu:
Nhập vào một chuỗi, hoặc một số, sau đó xuất ra màn hình:
Hướng dẫn:
- Tạo tập tin index.html.
- Tạo các ô TextBox, Button trên file đó.
- Giữa hai thẻ <head> và </head> bạn gõ code như hình:
Trong thẻ form, gõ code như hình:
Nhấn F12, chạy và xem kết quả.

Code tham khảo:
<head>
function XuatGiaTri(form)
{
alert(form.txtInput.value) ;
}
</script>
</head>
<body>
<label>
Nhập vào giá trị
<input type="text" name="txtInput" />
</label>
<label>
<input type="button" name="Button" value="OK" onclick="XuatGiaTri(form1)"
/>
</label>
</form>
</body>
</html>
Bài 3: Nhập và xuất chuỗi trên hộp thoại alert.
Yêu cầu:
Nhập vào một chuỗi, hoặc một số trên hộp thoại, sau đó xuất ra màn hình vào ô
TextBox:
Hướng dẫn:
Tạo tập tin index.html.
Tạo các ô Button, TextBox trên file đó.
Giữa hai thẻ <head> và </head> bạn gõ code như hình:
Trong thẻ form, gõ code như hình:
Nhấn F12, chạy và xem kết quả.

Code tham khảo:
<head>
function XuatGiaTri(form)
{
var name=prompt("Nhập tên của bạn:","name");
form1.txtInput.value = name ;
}
</script>
</head>
<body>
<label>
<input type="button" name="Button" value="Nhấn Nút để nhập"
onclick="XuatGiaTri(form1)" />
</label>
<label>
Tên bạn vừa nhập:
<input type="text" name="txtInput" />
</label>
</form>
</body>
</html>
Bài 3: Chào tạm biệt
Yêu cầu:
Khi chuyển qua trang khác hoặc khi đóng cửa sổ trình duyệt thì xuất hiện hộp
thoại:
Hướng dẫn:
Chạy chương trình Dreamweaver 8. Tạo 1 file mới với tên index.html.
Trong phần code, trong thẻ <head></head> bạn tạo ra một hàm(function) tên là
TamBiet, trong hàm này bạn gõ:
window.alert('Chào tạm biệt các bạn, hẹn gặp lại !!!!!!!') ;
trong thẻ body gõ: onUnload="TamBiet()"
Code tham khảo:
<html>
function TamBiet()
{
window.alert('Chào tạm biệt các bạn, hẹn gặp lại !!!!!!!') ;
}
</script>
<head>
<title>Click the back to see the Example</title>
<meta name="GENERATOR" content="Copyright Next Step Software 1998 (c)">
</head>
<body onUnload="TamBiet()">
</body>
</html>
Bài 4: Link tiếp hay không ?

Yêu cầu:
Khi nhấp vào liên kết thì window hỏi, nếu nhấn OK thì đến trang đó, nếu không
thì không làm gì cả:
Hướng dẫn:
Chạy chương trình Dreamweaver 8. Tạo 1 file mới với tên index.html.
Trong phần code, trong thẻ <head></head> bạn tạo ra một hàm(function) tên là
ChacChan(), trong hàm này bạn gõ:
question = confirm("Bạn chắc chắn không lưu luyến trang này nữa ?")
if (question !="0"){
top.location = "Bạn đến trang này nè !!!"
Trong thẻ body, bạn tạo ra một link với thẻ a, bạn gõ:
<a href="" onClick="rusure()">www.thietkeweb.com</a>
Code tham khảo:
<html>
<script>
function rusure(){
question = confirm("Bạn chắc chắn không lưu luyến trang này nữa ?")
if (question !="0"){
top.location = "Bạn đến trang này nè !!!"
}
}
</script>
<head>
<title>Click the back to see the Example</title>
<meta name="GENERATOR" content="Copyright Next Step Software 1998 (c)">
</head>
<body>
<a href="" onClick="rusure()">www.thietkeweb.com</a>
</body>
</html>
4 Lab2: Một số mã lệnh cơ bản

Mục đích:
- Thực hiện việc nhúng các mã lệnh cơ bản lên trang web.
- Xem và tìm hiểu cách thức hoạt động của các mã lệnh này.
Title/encoding).
Bài 1: Đồng hồ điện tử
Yêu cầu:
Hiện đồng hồ điện tử ngay giữa màn hình, bạn thử thay đổi màu cho đồng hồ này.
Code tham khảo:

<html>
<head>
</head>
<body>
<script type="text/javascript">
function showtime(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"):
document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML="<b style='font-size:30;color:blue;'>"+ctime+"</b>"
setTimeout("showtime()",1000)
}
window.onload=showtime
</script>
<span id=tick2></span>
</body>
</html>
Bài 2: Máy tính điện tử
Code tham khảo:
<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) {
c=a-b
form.ans.value=c
}
function a_times_b(form) {
c=a*b
form.ans.value=c
}
function a_div_b(form) {
c=a/b
form.ans.value = c
}
function a_pow_b(form) {
c=Math.pow(a, b)
form.ans.value = c
}
</script>
<title>E:\button\windowsizer_.htm</title>
</head>
27
<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 3: Chữ chạy ở thanh TaskBar
Yêu cầu:
Tạo ra dòng chữ chạy trên thanh trạng thái:
Code tham khảo:
<html>
<head>
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;
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
window.status=out;
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollit(100)",75);
}
}
}
</script>
<title></title>
</head>
<body onload="scrollit(100)">
</body>
</html>
Bài 4: Giới thiệu
Bạn hãy xem trang web sau, bạn tạo ra một trang mới, sau đó tìm cách lấy và chèn
đoạn mã trên vào trang của bạn.
Học viên thử tìm hiểu xem các dòng code này được viết như thế nào ?
Bài 4: Lịch trên web
Học viên thử tìm hiểu xem các dòng code này được viết và bố trí như thế nào ?
Bài 5: Dòng chữ nhảy múa theo chuột
Bài 6: Text quảng cáo

Bài 7: Đổi đơn vị
Bài 8: Đổi màu sắc
Bài 9: Disco Lights
Bài 10: Đồng hồ xoay trên chuột.
Yêu cầu:
Bạn có thấy trong 2 bài lab này mình dùng con chuột có chiếc đồng hồ xinh xắn đi
theo không?. Bạn hãy làm một trang web như thế thử coi.
Hướng dẫn:
Bạn download file này lên máy, sau đó phân tích code xem đoạn nào thực hiện
điều đó, sau đó tự nhúng vào code của mình.
5 Lab3: Một số mã lệnh nâng cao.

Mục đích:
- Thực hiện việc viết và nhúng các mã lệnh, tạo ra các công cụ và giao diện cần
thiết.
- Xem và tìm hiểu cách thức hoạt động của các công cụ này.
Title/encoding).
- Làm các ví dụ mẫu, sau đó xây dựng dựa trên gợi ý.
Bài 1: thiết kế giao diện với IFrame
Khái niệm:
IFrame là một hình thức tạo ra một khung trang, nằm ngay trong trang web, cho
phép người dùng hiễn thị dữ liệu nhanh trong một vùng của trang web.
Phương pháp:
- Dùng Javascript, tạo ra một hàm LoadIFrame() nhằm tải nội dung của trang vào
trong một thẻ div.
- Trong trang giao diện, tạo ra một thẻ div với một id nào đó để truyền vào hàm
LoadIFrame().
- Sử dụng sự kiện onClick để thao tác vói dữ liệu.
Ứng dụng:
IFrame có ứng dụng nhiều trong việc tạo ra các tab trên web, tạo ra vùng dữ liệu
hiễn thị tin tức nhanh.
- Thiết lập WebsiteProject(Vào Site\Manage Sites)
- Vào File\New chọn Javascript, đặt tên file là Script.js
- Viết hàm sau:

function LoadIFrame(id, Scr){
if (document.getElementById)
document.getElementById(id).src=Scr
}
- Tạo một trang mới là index.html
- Trong trang index.html, vào phần code, trong thẻ head ta gọi file Script.js qua
bằng câu lệnh:
<script language="javascript" type="text/javascript" src="Script.js"></script>
- Trong phần body, thiết lập thẻ form, sau đó chèn vào một thẻ iframe với id tùy
thích, trong ví dụ này mình đặt id là Dest với các thiết lập khác sau đó:

<iframe id="Dest" scrolling="yes" marginwidth="0" marginheight="0"
frameborder="0" vspace="yes" hspace="yes" style="overflow:visible;
width:100%; height:400px;">
</iframe>
- Ở phía trên thẻ iframe, bạn thiết lập các đường link với các dòng chữ: Trang 1,
Trang 2, Trang 3, Trang 4, ....
Trong mỗi thẻ link, phần code bạn thiết lập cho sự kiện onClick gọi tới hàm
LoadIFrame() với các thông số tương ứng:
<a href="#" onclick="LoadIFrame('Dest','index1.html');">Trang 1 </a>
<a href="#" onclick="LoadIFrame('Dest','index4.html');">Trang 4</a>
<br />
Trong đó:
- 'Dest': là tên của thẻ Iframe, 'index1.html' là trang web cần gọi tới.
- href ="#": là một link được thiết lập với link rỗng, liên kết được gọi tới trong
hàm bởi việc gọi các file tương ứng.
Sau đây là toàn bộ phần code trong file index.html:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="Script.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<form id="form1" runat="server">
<a href="#" onclick="LoadIFrame('Dest','index4.html');">Trang 4</a>
<br />

<iframe id="Dest" scrolling="yes" marginwidth="0" marginheight="0"

frameborder="0" vspace="yes" hspace="yes" style="overflow:visible;
width:100%; height:400px;">
</iframe>
</form>
</body>
</html>
Giao diện:
- Cùng dự án, ta tạo thêm các trang index1.html, index2.html, index3.html,

index4.html
Trong mỗi trang, bạn ghi vào dòng chữ: "Đây là trang thứ ..."
Kết quả chạy như sau:
Bài tập:
Sử dụng các file hình và flash trong thư mục BaiTap để thiết kế một giao diện như
hình sau:
Yêu cầu:
- Phần Banner là một hình ảnh Flash.
- Các phần như: "Tin tức sự kiện, Tiêu điểm, ..." mỗi khi click vào thì nội dung
được hiện vào IFrame ở phía dưới.
- Phần toàn cảnh, khi đưa chuột vào thì đổi hình.
- Phần right, bottom là các banner quảng cáo.

- Phần Hỗ trợ trực tuyến, sử dụng đoạn mã sau:
<a href="ymsgr:sendIM?thaiduyquy_lp_ctk27"><img
src="http://opi.yahoo.com/online?u=thaiduyquy_lp_ctk27&m=g&t=1" border="0"
style="width: 90px; height: 22px" /></a>
Bài 2: Sắp xếp dữ liệu trên Client
Mục đích:
- Dữ liệu khi lấy từ máy chủ về nếu sắp xếp trên Server thì sẽ mất rất nhiều thời
gian, nếu ta tiến hành sắp xếp nó ở Client thì sẽ tiện dụng hơn.
Phương pháp:
- Dùng hàm Sort của Javascript.
- Đưa vào một control để có thể sắp xếp nó.
- Xét xem cần sắp xếp tại cột nào.
Ví dụ:
Họ và tên Tuổi Điạ chỉ
Nguyen Van A 30 1A/9 Phù Đổng Thiên Vương
Nguyen Van B 22 1BIS Đồi Trà
Nguyen Van C 35 66F Nguyễn Công Trứ
Nguyen Van D 32 10A Bùi Thị Xuân
Hướng dẫn:
- Các hàm sắp xếp dữ liệu:
//===========================================SAP XEP DU LIEU
===============================================
// sap xep du lieu tren "ctrl" theo cot "m".
// Sap xep du lieu tren control ctr,
var order = 1;
function sort(ctrl, m)
{
var count = ctrl.rows.length; // lay so hang cua bang
for (var i=1; i<count-1; i++) // tien hanh sap xep

{
for (var j=i+1; j<count; j++)
{
var t1 = ctrl.rows(i).childNodes.item(m).innerText; // lay gia tri so sanh
var t2 = ctrl.rows(j).childNodes.item(m).innerText;
if (getOrder(t1, t2)) // so sanh

{
var cols = ctrl.rows(i).childNodes.length; // lay so cot tren mot hang
for (var k=0; k<cols; k++)

{
t1 = ctrl.rows(i).childNodes.item(k).innerHTML; // hoan vi du lieu giua hai
t2 = ctrl.rows(j).childNodes.item(k).innerHTML; // hang theo tung cot
ctrl.rows(i).childNodes.item(k).innerHTML = t2;
ctrl.rows(j).childNodes.item(k).innerHTML = t1;
}
}
}
}
if (order == 1) // neu thu tu tang
order = 0; // lan sap tiep theo se la giam
else
order = 1; // lan sap tiep theo se la tang
}
// kiem tra chieu (thu tu) sap xep
function getOrder(p, q)
{
if (order == 1) // sap tang

{
if (p > q)
return true;
else
return false;
}
else // sap giam
{
if (p > q)
return false;
else
return true;
}
}
//=========================================================
==============================
- Control cần sắp xếp: table, với id là table1
<table width="448" border="1" id="table1">
<tr>
<td width="135"><div align="center" class="style13"><strong><a
href="javascript:sort(table1, 0)">Họ và tên</a></strong></div></td>
<td width="80"><div align="center" class="style13"><strong><a
href="javascript:sort(table1, 1)">Tuổi</a></strong></div></td>
<td width="211"><div align="center" class="style13"><strong>Điạ chỉ
</strong></div></td>
</tr>
<tr>
<td>Nguyen Van A </td>
<td>30</td>
<td>1A/9 Phù Đổng Thiên Vương </td>
</tr>
<tr>
<td>Nguyen Van B </td>
<td>22</td>
<td>1BIS Đồi Trà </td>
</tr>
<tr>
<td>Nguyen Van C </td>
<td>35</td>
<td>66F Nguyễn Công Trứ </td>
</tr>
<tr>
<td>Nguyen Van D </td>
<td>32</td>
<td>10A Bùi Thị Xuân </td>
</tr>
</table>
Bài 3: Các bài code có sẵn.
Mục đích:
- Tạo cho học viên cách tìm hiểu và sử dụng code có sẵn viết bằng Javascript để từ
đó học viên tự đi tìm các code cho mình.
- Trong bài này, các học viên có thể xem trước giao diện, hoặc download file nén
về nhà nghiên cứu.
Yêu cầu:
- Học viên phải nghiên cứu và đọc bằng tiếng Anh
- Học viên vào phần Samples để xem một cách tường minh các ví dụ
1. COOLjsMenu Standard 2.9.4
- Tạo ra các dạng menu rất đẹp mắt.

- Học viên có thể xem trước hoặc download về nhà bằng file zip
2. COOLjsTree Standard 2.8.7
- Tạo ra các dạng tree view cho hệ thống website .
3. COOLjsOutlookBar Standard 1.2.3
- Tạo ra các dạng button bên trái màn hình .
5.1. Lab4: Tham khảo các trang web về Javascript.

1. google.com
Vào www.google.com bạn gõ "Javascript"+'chức năng mà bạn muốn".
Ví dụ: bạn cần viết các tab trong javascript, bạn gõ: javascript + tab
2. www.thegioiweb.com
Đây là trang có rất nhiều mã nguồn liên quan đến thiết kế website.
3. www.asp.net
Trang web về thiết kế website bằng asp.net, ajax, javascript, ... rất chuyên nghiệp.
4. http://echip.com.vn/echiproot/javascript/index.html
Đây là các đoạn mã bằng javascript được tạp chí Echip tổng hợp, mình đã
download về rồi, bạn có thể click vào đây lấy về.
Phần 8: Phụ lục

Nội dung:
Cung cấp các CSS tham khảo cho các bài.
Phụ lục các lớp CSS(lab 2 – bài 1 – phần 5):

.border { .noidung {
border:#fc8e03 2px solid; font-family:arial;
} font-size:11px;
color:#8e8b86;
.nen_chuyen_sac { padding-left:10px;
background-image:url(Images/bg_chuyensac.jpg); padding-right:10px;
background-color:#FCD001; padding-top:10px;
padding-left:5px; background-color:#FFFFFF;
} }
.tieude_01 { .tieude_04 {
font-family:Verdana; font-family:arial;
font-size:20px; font-size:11px;
font-style:italic; color:#FFFFFF;
color:#9d2c00; }
}
.tieude_05 {
.tieude_02 { font-family:arial;
font-family:arial; font-size:18px;
font-size:11px; font-style:italic;
color:#000000; font-weight:bold;
font-weight:bold; color:#000000;
} padding-left:5px;
}
.tieude_03 {
font-family:arial; a{
font-size:11px; font-family:arial;
color:#9d2c00; font-size:11px;
} color:#000000;
font-weight:bold;
a:hover { text-decoration:none;
text-decoration:underline; }
}
1 Phụ lục các lớp CSS(lab 1 – bài 1 – phần 5):

BODY { .bien_phai {
margin:0px 0px 0px 0px; border-right-width:1px;
background-color:#C0C0C0; border-right-color:#FFFF00;
scrollbar-face-color: #A0A0A0; border-right-style:solid;
scrollbar-track-color: #C0C0C0; padding-right:5px;
scrollbar-arrow-color: #FFFFFF; padding-left:5px;
} }
.a{ li {
font-family:arial; list-style-image:url(Images/arrow.gif);
font-size:9px; list-style-position:outside;
color:#FFFFFF; line-height:20px;
text-decoration:none; }
}
.noidung {
a:hover { font-family: verdana;
color:#FFFF00; font-size: 9pt;
text-decoration:underline; }
}

body { .tieude {
margin: 0px; font-family: tahoma;
} font-size:24px;
.bien { color:#000000;
border-left:#00905d dashed 2px; font-weight:bold;
padding-left:10px; }
} .noidung {
font-family: tahoma;
font-size:x-small;
color:#000000;
}

.noidung { .nut {
font-family: verdana; background-image:url(Images/nutbam.jpg);
font-size: 9pt; background-repeat:no-repeat;
} background-color:#eeeeee;
.nhap_lieu { }
border:0px;
border-bottom:#000000 1px dashed;
background-color:#C0C0C0;
}

Thiet Ke Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Thiet Ke Web

Uploaded by

Copyright:

Available Formats

TRƯỜNG ĐẠI HỌC ĐÀ LẠT

KHOA CÔNG NGHỆ THÔNG TIN

KS. Thái Duy Quý

Giáo trình tóm tắt

Đà Lạt, ngày 10/11/2008

6.8. Listbox: ..............................................................................................................57

Phần 5: CSS trong Macomedia Dreamweaver 8.0...........................................................127

8.2. Thiết kế Frameset bằng Macromedia Dreamweaver. .......................................180

Lời nói đầu

Phần 1: Giới thiệu tổng quan.

1 Bài mở đầu: Giới thiệu tổng quan về hệ thống web.

1.3. Phân loại website:

2 Lab1: Cách tạo Domain Free.

2. Trang web: www.domaindlx.com:

3. Trang web www.webng.com:

Thiết lập thông tin cá nhân:

Địa chỉ Email

Tên thành viên

Nhập lại mật khẩu

Tạo thành công:

Kiểm tra email:

Kích hoạt tài khoản:

Kích hoạt tài khoản

Đăng nhập để tải web lên:

Trang chủ khi đăng nhập:

Tạo file Tạo thư mục

Danh sách File và Thư

Duyệt một trang web:

1 Bài 1: Giới thiệu các thẻ HTML cơ bản

Thử nghiệm: Mở trình duyệt web (IE):

– Nhấn OK → Có kết quả như hình dưới đây:

Thay đổi nội dung:

– Ghi chú trong HTML: <! -- dòng ghi chú -->

– Có thứ tự: <OL>Các phần tử</OL>

2 Lab1: Dùng các thẻ HTML thiết kế trang web Excite.htm.

2.2. Hướng dẫn giải:

<body background= "IMAGES/BACKGR.GIF">

3 Bài 2: Các thẻ HTML(tiếp)

<body link="blue" alink="white" vlink="gray“>.

Sau đây là các thẻ để thiết lập bảng biểu:

Thuộc tính của thẻ <table>:

4 Lab1: Dùng các thẻ HTML thiết kế trang web Free.com.

4.2. Hướng dẫn giải:

5 Lab2: Dùng các thẻ HTML thiết kế trang web Scaal.com.

• Trang story.htm được thiết kế với yêu cầu sau:

5.2. Hướng dẫn giải:

6 Bài 3: Các thẻ HTML Form

6.5. Option Button (Radio Button):

6.6. Nút lệnh (Button):

7.1. Yêu cầu:

7.2. Hướng dẫn giải:

8 Bài 4: Luyện tập: Thiết kế trang web sp.co.

Trang Liên hệ:

1.a. Yêu cầu:

Trang lienhe.htm được thiết kế với yêu cầu sau:

– Nút [LIÊN HỆ] đến trang lienhe.htm.

1.b. Hướng dẫn giải:

– Dùng thẻ <A> để tạo liên kết

Thiết kế trang lienhe.htm:

Phần 3: Macromedia Dreamweaver

2 Bài 1: Giới thiệu về Macromedia Dreamweaver 8.0.

2.2. Tổ chức trang web:

Chọn New - > Site:

SPLIT: Phân đôi màn hình code và design: