LUẬN văn sư PHẠM vật lý THIẾT kế WEBSITE CÔNG NGHỆ 12 sử DỤNG PHẦN mềm MACROMEDIA DREAMWEAVER 8

TRƢỜNG ĐẠI HỌC CẦN THƠ
KHOA SƢ PHẠM
BỘ MÔN VẬT LÝ


LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC

THIẾT KẾ WEBSITE CÔNG NGHỆ 12
SỬ DỤNG PHẦN MỀM
MACROMEDIA DREAMWEAVER 8

Giáo viên hướng dẫn
Vƣơng Tấn Sĩ
Giáo viên phản biện
Phạm Phú Cƣờng
Dƣơng Bích Thảo

Sinh viên thực hiện
Lý Hồng Đạt
Lớp Sƣ phạm Vật lý – Công nghệ K33
MSSV : 1076677

Niên khóa : 2007 - 2011


uận v n t t n

Thiết kế Website Công nghệ 12

ệp Đại học

LỜI CẢM ƠN

Xin chân thành cảm n t ầy Vƣơng Tấn Sĩ đã tận tìn
ớng dẫn và tạo mọ đ ều
kiện thuận lợi cho em hoàn thành luận v n t t nghiệp Thiết kế website Công nghệ 12 sử
dụng phần mềm Macromedia Dreamweaver 8.
Em xin chân thành cảm n cô Dƣơng Bích Thảo và thầy Phạm Phú Cƣờng đã
nhiệt tình góp ý kiến để em khắc phục và sửa chữa những thiếu sót và hoàn thiện luận
v n n.
Em xin chân thành cảm n quý t ầy, cô trong Bộ môn vật lý, tr ờn Đại học Cần
T đã truyền đạt cho em những kiến thức, k n n và p
n p áp s p ạm tạo đ ều
kiện hoàn thành luận v n này.
Tôi xin chân thành cảm n các bạn sinh viên ở lớp S p ạm Vật lý – Công nghệ
K33 đã n ệt tìn
úp đỡ để tôi có thêm tài liệu và p
n p áp t ết kế Website Công
nghệ 12.
Xin chân thành cảm n!
Cần T , t án 5, n m 2011

Lý Hồn Đạt

GVHD V

n Tấn S

SVTH: Lý Hồn Đạt

uận v n t t n

Thiết kế Website Công nghệ 12

ệp Đại học

NHẬN XÉT CỦA GIÁO VIÊN HƢỚNG DẪN


.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................

.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................

GVHD V

n Tấn S

SVTH: Lý Hồn Đạt


uận v n t t n

Thiết kế Website Công nghệ 12

ệp Đại học

NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN


.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................

.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................

GVHD V

n Tấn S

SVTH: Lý Hồn Đạt


uận v n t t n

Thiết kế Website Công nghệ 12

ệp Đại học

MỤC ỤC
PHẦN MỞ ĐẦU ..... ............................................................................................... 1
I. Ý DO CHỌN ĐỀ TÀI ................................................................................... 1
1. Hoàn cản t ực tế ...................................................................................... 1
2.Mục đíc của đề tà ..................................................................................... 2
3. G ớ ạn của đề tà ..................................................................................... 2
II. CÁC GIẢ THUYẾT CỦA ĐỀ TÀI ................................................................ 2
III. PHƯƠNG PHÁP VÀ PHƯƠNG TIỆN THỰC HIỆN ĐỀ TÀI ..................... 3
1. P
n p áp ............................................................................................. 3
2. P
n t ện ............................................................................................... 3
IV. CÁC BƯỚC TIẾN HÀNH ĐỀ TÀI .............................................................. 3
V. CÁC THUẬT NGỮ QUAN TRỌNG SỬ DỤNG TRONG ĐỀ TÀI............... 4
PHẦN NỘI DUNG .................................................................................................. 5
I. THỰC TRẠNG XUNG QUANH VẤN ĐỀ NGHIÊN CỨU CỦA ĐÈ TÀI ..... 5
1. T ực trạn xun quan nộ dun t ết kế web............................................ 5
2. T ực trạn sử dụn côn n ệ t ôn t n tron tr ờn ọc ......................... 5
II. NGHIÊN CỨU Ý THUYẾT ........................................................................ 7
1. G ớ t ệu SGK Côn n ệ 12 ................................................................... 7
2. P
n p áp dạy ọc tíc cực và ứn dụn côn n ệ t ôn t n vào dạy
ọc tíc cực ................................................................................................................... 7
2.1. P
n p áp dạy ọc tíc cực ............................................................ 7
2.2. Ứn dụn côn n ệ t ôn t n tron dạy ọc ..................................... 10
3. Tìm ểu về web ...................................................................................... 10
3.1. Giớ t ệu n ôn n ữ HTM ............................................................... 10

3.2. Các t àn p ần tron HTM ............................................................. 11
3.3. Các Ta c bản ................................................................................. 12
3.4. Địn dạn v n bản ............................................................................. 14
3.5. Kí tự đặc b ệt ..................................................................................... 16
3.6. Danh sách (list) ................................................................................. 17
3.7. Bản tron HTM ............................................................................. 18
4. Cấu trúc tran web Côn n ệ 12 ............................................................. 20
III. THIẾT KẾ WEB .......................................................................................... 21
1. Tìm ểu nộ dun tà l ệu ......................................................................... 21
2. C uẩn bị và tìm ểu p ần mềm................................................................ 22
2.1. C uẩn bị các p ần mềm ..................................................................... 22
GVHD V

n Tấn S

SVTH: Lý Hồn Đạt


Thiết kế Website Công nghệ 12

uận v n t t n

ệp Đại học

2.1. Tìm ểu các p ần mềm ..................................................................... 23
3. Tìm ểu ìn ản m n ọa và đoạn p m t l ệu .................................... 36
4. Tạo ản
ao d ện tran nộ dun , ớ t ệu, trắc n ệm, ả trí ............. 36
5. Tạo các banner, menu ............................................................................... 38
5.1. Tạo banner các tran c ín ............................................................... 38

5.2 Tạo các menu c ín ............................................................................ 50
6. Tạo trắc n ệm bằn Flas 8 ................................................................... 59
7. C ỉn sửa nộ dun , ìn ản ................................................................... 70
7.1. Dùn p ần mềm P otos op ............................................................... 70
7.2. Dun p ần mềm Sna It 10 ................................................................. 70
8. Tạo các tran web ................................................................................. 72
8.1. Tạo tran web tạm (Templates).......................................................... 72
8.2. Tạo tran nộ dun ............................................................................. 76
8.3. Tạo tran trắc n ệm ........................................................................ 87
8.4. Tạo tran ả trí ................................................................................ 88
8.5 Tạo tran c ủ Index ............................................................................ 93
PHẦN KẾT UẬN ............................................................................................ 102
I. NHẬN ĐỊNH CHUNG ................................................................................. 102
II. NHỮNG KHÓ KHĂN CỦA ĐỀ TÀI.......................................................... 102
III. HƯỚNG PHÁT TRIỂN CỦA ĐỀ TÀI ...................................................... 102
TÀI IỆU THAM KHẢO ..................................................................................... 103

GVHD V

n Tấn S

SVTH: Lý Hồn Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

PHẦN MỞ ĐẦU
I. LÝ DO CHỌN ĐỀ TÀI

1. Hoàn cảnh thực tế
Trong thời đại ngày nay sự phát triển nhanh của công nghệ thông tin đã thúc đẩy các
l nh vực và các ngành khoa học, kinh tế, giáo dục... phát triển theo. Tri thức luôn không
ngừng phát triển, những phát minh mới, những ứng dụng mới, những tri thức đòi hỏi
chúng ta phải c p nh t liên tục. Việc sử dụng Internet hiện nay đã trở nên ph iến g n
g i và d dàng sử dụng. Mọi ng ời sử dụng Internet để làm ph ng tiện thông tin liên lạc,
khai thác thông tin học t p nghiên cứu, đ a dữ liệu lên mạng hay tải dữ liệu về nhà sử
dụng...
Trong công cuộc công nghiệp hóa hiện đại hóa đ t n ớc, Đảng đã xác định đ i mới
và phát triển nền giáo dục Việt Nam là v n đề t t yếu và c n thiết. Nhằm đáp ứng nhu c u
đào tạo nguồn nhân lực cho đ t n ớc, chỉ thị 58- CT/TW của Bộ chính trị đã khẳng định
"Đẩy mạnh ứng dụng công nghệ thông tin trong công tác giáo dục và đào tạo ở các c p
học, c học, ngành học. Phát triển các hình thức đào tạo từ xa phục vụ cho nhu c u học
t p của toàn xã hội".
Thực tế cho th y ch t l ợng giáo dục và đào tạo trong nhà tr ờng ph thông ở n ớc
ta đang từng ớc đ ợc nâng cao. Và việc cải cách sách giáo khoa là một ớc tiến r rệt
của nền giáo dục Việt Nam.
Tuy nhiên nền giáo dục n ớc ta vẫn còn kém phá triển so với xu thế tiến ộ của thời
đại. Do c sở v t ch t trang thiết ị ở tr ờng ph thông ch a đáp ứng hết nhu c u của
sách giáo khoa làm hạn chế các u điểm của sách giáo khoa mới. Đặc iệt đối với ch ng
trình sách giáo khoa v t lý hiện nay, tuy nội dung phong phú và hiện đại h n, mang tính
khoa học và sát thực tế h n. Nh ng vẫn ch a đủ để việc dạy và học đạt hiệu quả cao, nên
c n áp dụng ph ng pháp tiên tiến và các ph ng tiện hiện đại.
Vì v y việc đ a công nghệ thông tin vào việc giảng dạy và ứng dụng trong nghiên
cứu khoa học là điều quan trọng và c n thiết. Đây là v n đề mà mọi ng ời quan tâm đặc
iệt. Là sinh viên ngành s phạm và là một giáo viên t ng lai việc tiếp c n công nghệ
thông tin là không thể thiếu đ ợc. Vì những lý do trên tôi quyết định chọn đề tài lu n v n
tốt nghiệp "Thiết kế Website Công nghệ 12" Đây là đề tài mà tôi mong muốn thực hiện
mang lại nguồn tài liệu cho học sinh tự học ở nhà và là tài liệu tham khảo cho giáo viên
trong việc giảng dạy.

GVHD: V

ng T n S

-1-

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

2. Mục đích của đề tài
Xây dựng Website Công nghệ 12 nhằm phục vụ cho việc dạy và học ộ môn Công
nghệ 12. Trang we đ ợc xây dựng dựa theo nội dung sách giáo khoa Công nghệ lớp 12,
gồm 07 ch ng nhằm góp một ph n nhỏ trong công cuộc đ i mới ph ng pháp dạy học
hiện nay.
3. Giới hạn của đề tài
“Website Công nghệ 12” chủ yếu dựa vào sách giáo khoa là chính..
Do thời gian nghiên cứu đề tài có giới hạn nên trang We ch a th t hoàn thiện. Nội
dung kiến thức đ a vào còn hạn chế, các hình ảnh trực quan, ảnh động và các đoạn video
minh họa nhúng vào trang We ch a th t nhiều. Mặt khác do kiến thức tin học còn yếu
kém, nên việc hoàn thành lu n v n còn nhiều khó kh n.

II. CÁC GIẢ THUYẾT CHỌN ĐỀ TÀI
- Tuy hiện nay n ớc ta đang thực hiện đ i mới và phát triển nền giáo dục. Nh ng
việc dạy học ằng việc sử dụng sách giáo khoa là chủ yếu. Nội dung sách giáo khoa mặc
dù đ ợc đ i mới nh ng vẫn ch a đủ để việc dạy và học đạt hiệu quả cao. Sách giáo khoa

Công nghệ 12 chủ yếu trình ày nội dung c ản, hình ảnh minh họa còn trừu t ờng khiến
cho học sinh khó hình dung v n đề và ít gây đ ợc sự hứng thú trong học t p cho học sinh.
- Mặt khác xã hội ngày càng phát triển, công nghệ thông tin không ngừng mở rộng và
tiếp c n g n h n với mọi ng ời. Một cuốn sách giáo khoa không thể nào chứa đựng đ y
đủ t t cả những v n đề c ản và nâng cao của mỗi ài học, mặt khác việc c p nh t,
sung thông tin không thể thực hiện đ ợc một cách nhanh chóng, kịp thời.
- Nh ng với “Website Công nghệ 12” có hình ảnh mô phỏng trực quan, các đoạn
video sinh động sẽ gây hứng thú và sự t p trung của học sinh trong việc học. Nh v y,
học sinh d dàng hình dung và hiểu ài h n, từ đó có thể phát triển v n đề của ài học và
nâng cao khả n ng t duy tích cực cho mình. Giáo viên không những đem đến cho học
sinh một l ợng kiến thức về môn học mà còn d dàng thể hiện đ ợc các ph ng pháp nêu
v n đề, thực hiện đánh giá học sinh toàn diện khách quan ngay trong quá trình dạy học.
Ph n trắc nghiệm có thể giúp học sinh tự ôn t p ở nhà nhờ có ch ng trình tự ch m điểm
và có đáp án, giúp học sinh kiểm tra đ ợc mức độ nh n thức của mình. Trang We này sẽ
là nguồn tài liệu
ích cho học sinh lớp 12 và giáo viên có thể l y làm kho t liệu cho
việc dạy học.

GVHD: V

ng T n S

-2-

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

III. PHƢƠNG PHÁP VÀ PHƢƠNG TIỆN THỰC HIỆN ĐỀ TÀI
1. Phƣơng pháp
- Tìm hiểu và nghiên cứu ngôn ngữ thiết kế We , các ph n mềm hỗ trợ:
+ Ph n mềm Macromedia Dreamweaver 8.
+ Ph n mềm Macromedia Flash 8.
+ Ph n mềm Ado e Photoshop CS3.
+ Ph n mềm Flash Menu La s Prov2.08.
+ Ph n mềm SnagIt10.
+ Ph n mềm EWB 5.12.
+ Ph n mềm Aleo Flash Intro Banner Maker.
+ Ph n mềm SocuSoft We Video Player.
+ Ph n mềm SmartDraw 2010.
+ Ph n mềm Easy GIF Animator.
+ Ph n mềm Wondershare Flash Gallery Factory v5.1.
+ Aleo Flash MP3 Player Builder.
- Nghiên cứu nội dung.
- Nghiên cứu tìm hiểu những hình ảnh, những thông tin, dữ liệu có liên quan đến đề
tài.
- Tạo nội dung cho trang We . Tạo và xử lý hình ảnh minh họa, hình ảnh mô phỏng
động.
- Thiết kế trang We , liên kết và nhúng nội dung, hình ảnh vào trong trang We site.
2. Phƣơng tiện
- Máy vi tính.
- Các loại sách tin học liên quan đến đề tài.
- Các đ a CD cài đặt ph n mềm và dạy thiết kế We
- Sách giáo khoa Công nghệ 12 nâng cao.
- Mạng Internet.

IV. CÁC BƢỚC THỰC HIỆN ĐỀ TÀI

Đề tài đ ợc thực hiện qua 3 giai đoạn:
Giai đoạn 1: Tìm hiểu nội dung, chuẩn ị và tìm hiểu các ph n mềm hỗ trợ. Tạo và
tìm kiếm các hình ảnh t liệu liên quan.
Giai đoạn 2: Viết lu n v n và viết ài áo cáo.
GVHD: V

ng T n S

-3-

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

Giai đoạn 3: Báo cáo lu n v n.
Thời gian thực hiện đ u tháng 5/2010.

V. CÁC THUẬT NGỮ QUAN TRỌNG SỬ DỤNG TRONG ĐỀ TÀI
- WWW: World Wide We dịch vụ quan trọng của Internet cho phép tra cứu, trao
đ i tài nguyên thông tin, thực hiện giao dịch trên Internet.
- HTML: (Hyper Text Markup Language là ngôn ngữ để tạo ra những trang siêu v n
ản Hyper Text , đ ợc dùng trong dịch vụ WWW để tạo ra các trang We t nh.
- Hyper link: hệ thống liên kết các ph n tử thông tin nhờ vào các liên kết có thể kích
hoạt.
- Giao thức HTTP Hyper Text Transfer Protocol một giao thức ở t ng ứng dụng
trong mô hình mạng internet, dùng giao tiếp giữa We Browser và We Server.
- Webpage: là trang thông tin hiển thị d ới dạng siêu v n ản đ ợc tạo từ ngôn ngữ

HTML.
- We site: T p hợp những trang We đ ợc liên kết với nhau theo một c u trúc nào đó
của một t chức hay cá nhân.
- Homepage Index : Là trang đ u tiên của một trang We , cung c p một cái nhìn t ng
quát về We site.
- URL: (Uniform Resource Locator địa chỉ dùng để chỉ định vị nguồn tài nguyên
trong dịch vụ We . Mỗi tài liệu và t p tin trên internet đều có một URL riêng.

GVHD: V

ng T n S

-4-

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

PHẦN NỘI DUNG
I.THỰC TRẠNG VẤN ĐỀ XUNG QUANH NỘI DUNG NGHIÊN
CỨU CỦA ĐỀ TÀI
1. THỰC TRẠNG XUNG QUANH NỘI DUNG THIẾT KẾ WEB
Ngày nay, máy tính với công nghệ ph n mềm và ph n cứng có tốc độ phát triển cao
đ ợc sử dụng rộng rãi. H u nh mỗi ng ời đều có một máy tính tại nhà và sử dụng những
tiện ích của nó. Một tiện ích mà nó đem lại là cung c p thông tin thông qua dịch vụ Web.
Hiện nay we đã không còn xa lạ với mọi ng ời và việc sử dụng nó c ng khá d dàng.
Kết quả khảo sát do T chức Pew Internet and American Life Project Mỹ thực hiện

nh n th y Internet ngày càng có vai trò quan trọng trong cuộc sống hàng ngày của mỗi
ng ời. Khoảng 45% ng ời l ớt we 60 triệu ng ời đ ợc hỏi cho iết Internet đã giúp họ
đ a ra những quyết định mang tính ớc ngoặt hoặc đối diện với những khoảnh khắc
đáng nhớ trong đời, t ng từ 40% trong khảo sát thực hiện n m 2002.
Chính vì v y các chuyên gia ph n mềm liên quan đến thiết kế we đã nhanh
chóng nắm ắt đ ợc nhu c u c n thiết của ng ời dùng nên đã cho ra đời nhiều ngôn ngữ
thiết kế We chuyên nghiệp nh : PHP, ASP, HTML, XML, JAVA, VISUAL,… và các
ph n mềm hỗ trợ nh : Microsoft Office FrontPage, DreamWeaver MX, Macromedia
Flash MX, …Tuy nhiên, hiện nay Macromedia Dreamweaver 8 đ ợc nhiều ng ời sử
dụng ởi những tiện lợi của nó nh ta có thể phát triển thành một trang we , với những
ngôn ngữ ASP, VBS, Script, và thay đ i nội dung linh hoạt.

2. THỰC TRẠNG SỬ DỤNG CÔNG NGHỆ THÔNG TIN (CNTT)
TRONG TRƢỜNG HỌC
Bộ Giáo dục và Ðào tạo GD và ÐT vừa có v n ản gửi các c sở GD và ÐT yêu c u
thực hiện tốt nhiệm vụ ứng dụng công nghệ thông tin CNTT trong giáo dục, giai đoạn
2008 - 2012, góp ph n nâng cao hiệu quả và ch t l ợng giáo dục.
Ứng dụng CNTT trong đ i mới ph ng pháp dạy học: Triển khai áp dụng CNTT
trong dạy và học, hỗ trợ đ i mới ph ng pháp giảng dạy, tích hợp ứng dụng CNTT ngay
trong mỗi môn học một cách hiệu quả và sáng tạo ở những n i có điều kiện thiết ị tin
học; xây dựng nội dung thông tin số phục vụ giáo dục. Phát huy tính tích cực tự học, tự
tìm tòi thông tin qua mạng internet của ng ời học; tạo điều kiện để ng ời học có thể học

GVHD: V

ng T n S

-5-

SVTH: Lý Hồng Đạt

Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

ở mọi n i, mọi lúc, tìm đ ợc nội dung học phù hợp; xóa ỏ sự lạc h u về công nghệ và
thông tin do khoảng cách địa lý đem lại. Khuyến khích giáo viên, giảng viên soạn ài
trình chiếu, ài giảng điện tử và giáo án trên máy tính. Khuyến khích giáo viên, giảng
viên trao đ i kinh nghiệm.
Triển khai mạnh mẽ công nghệ học điện tử E-Teaching . T chức cho giáo viên,
giảng viên soạn ài giảng điện tử E-teaching trực tuyến; t chức các khóa học trên mạng,
t ng tính mềm dẻo trong việc lựa chọn c hội học t p cho ng ời học.
Riêng môn v t lý CNTT sẽ giúp học sinh l nh hội tốt nh t các iểu t ợng, khái niệm
định lu t , định lí, các học thuyết khoa học…Tri thức mà học sinh chiếm l nh đ ợc h u
hết đ ợc ắt đ u từ việc quan sát sự v t, hiện t ợng trong tự nhiên hoặc từ các thí nghiệm.
Những mô hình trừu t ợng, các ph n mềm dạy học giúp học sinh khám phá ản ch t,
nguyên lí v t lý và c u trúc của đối t ợng. Cùng với ph ng tiện dạy học, CNTT cung
c p các thông tin về các hiện t ợng và đối t ợng đ y đủ chính xác h n, làm t ng nhu c u
và hứng thú, lòng yêu mến khoa học, giúp cho học sinh có thể tiếp c n đ ợc với nhiều đối
t ợng do CNTT làm t ng tính trực quan của dạy học, giáo dục học sinh cách thức nghiên
cứu tài liệu, cách làm việc khoa học. Nh ng thực tế việc sử dụng CNTT vào học t p của
học sinh và giảng dạy của học sinh hiện nay là r t ít vì những t liệu dành cho môn học ít,
cách viết ch a lôi cuốn học sinh, nội dung ít có ph n liên hệ thực tế.

GVHD: V

ng T n S

-6-

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

II. NGHIÊN CỨU LÝ THUYẾT
1. GIỚI THIỆU SÁCH GIÁO KHOA CÔNG NGHỆ 12
Sách giáo khoa (SGK) Công nghệ lớp 12 đ ợc viết theo tin th n nối tiếp ch ng trình
THCS mới, có kiến thức thói quen và ph ng pháp học t p có ph n khác tr ớc. Một số
khái niệm đã đ ợc học ở THCS sẽ đ ợc tiếp thu và phát triển.
Sách giáo khoa Công nghệ 12 có hai ph n đ ợc chia thành 07 ch ng trong đó có t t
cả 30 ài học, trong đó có 18 ài lý thuyết, 11 bài thực hành và 1 bài ôn t p, t ng số tiết là
35. Các ài thực hành giúp cho học sinh d tiếp thu h n kiến thức của ài học.
Ở mỗi đ u ài học có vài câu nêu v n đề c n đạt, nhằm giúp giáo viên, học sinh d đi
đến yêu c u của mỗi ài.
Mỗi đ u ch ng có hình ảnh minh họa về nội dung đ ợc trình ày trong ch ng đã
có nêu vắn tắt các v n đề đ ợc đề c p trong ch ng.

2. PHƢƠNG PHÁP DẠY HỌC TÍCH CỰC VÀ ỨNG DỤNG CÔNG
NGHỆ THÔNG TIN VÀO DẠY HỌC TÍCH CỰC
2.1. Phƣơng pháp dạy học tích cực
2.1.1. Một số khái niệm
a. Tính tích cực
Tính tích cực là một trong những phẩm ch t vốn có của con ng ời trong đời sống
xã hội. Khác với động v t, con ng ời không chỉ tiêu thụ những gì có sẵn trong thiên nhiên
mà còn chủ động ằng lao động, sản xu t ra những của cải v t ch t c n cho sự tồn tại của
xã hội, sang tạo ra nền v n hóa của mọi thời đại. Hình thành và phát triển tính tích cực

của xã hội đã là củng cố một trong các nhiệm vụ chủ yếu của giáo dục nhằm đào tạo
những con ng ời n ng động, thích ứng và góp ph n phát triển cộng đồng. Có thể xem tính
tích cực nh là một điều kiện đồng thời là một kết quả của sự phát triển nhân cách trong
quá trình giáo dục.
. Ph ng pháp tích cực
Ph ng pháp học tích cực để chỉ những ph ng pháp dạy học phát huy tính tích
cực, chủ động sáng tạo của ng ời học. Ph ng pháp học tích cực h ớng tới việc hoạt
động hóa, tích cực hóa hoạt động nh n thức của ng ời học ngh a là t p trung vào phát huy
tính tích cực của ng ời học chứ không phải t p trung vào ng ời dạy.

GVHD: V

ng T n S

-7-

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

2.1.2. Những dấu hiệu đặc trƣng của các phƣơng pháp dạy học tích cực
Có 4 dấu hiệu:
a. Dạy học thông qua các hoạt động của học sinh
Trong ph ng pháp tích cực, ng ời học, đối t ợng của hoạt động dạy, đồng thời
là chủ thể của hoạt động học, đ ợc cuốn hút vào các hoạt động học t p do giáo viên t
chức và chỉ đạo. Thông qua đó, tự lực khám phá những điều mình ch a iết chứ không
phải là thụ động tiếp thu những tri thức đ ợc giáo viên sắp đặt ra theo suy ngh của mình.

Từ đó, vừa nắm đ ợc kiến thức, kỹ n ng mới, vừa nắm đ ợc ph ng pháp tìm ra kiến
thức, k n ng đó, không r p khuôn theo mẫu có sẵn, đ ợc ộc lộ và phát huy tiềm n ng
sáng tạo. Dạy theo cách này thì giáo viên không chỉ đ n giản là truyền đạt kiến thức mà
còn h ớng dẫn hành động.
. Dạy học chú trọng rèn luyện ph ng pháp tự học
Ph ng pháp tích cực xem việc rèn luyện ph ng pháp học t p cho học sinh
không chỉ là ph ng pháp nâng cao hiệu quả dạy học mà còn là mục tiêu học. Trong
ph ng pháp học thì cốt l i là ph ng pháp tự học. Nếu rèn luyện cho ng ời học có đ ợc
ph ng pháp, k n ng, thói quen và ý chí tự học thì sẽ tạo cho họ có lòng ham học, kh i
d y nội lực vốn có của mỗi ng ời, kết quả học t p sẽ nâng lên g p ội. Vì v y, ngay nay
ng ời ta nh n mạnh hoạt động học trong quá trình dạy học, nỗ lực tạo ra sự chuyển iến
từ học t p thụ động sang tự học chủ động, đặt v n đề phát triển tự học ngay trong tr ờng
ph thông, không chỉ tự học trong tr ờng ph thông, không phải tự học ở nhà mà cả tự
học trong tiết học có sự h ớng dẫn của giáo viên.
c. T ng c ờng học t p cá thể phối hợp với học nhóm
Nếu trình độ kiến thức t duy của học sinh không đồng đều tuyệt đối thì khi áp
dụng ph ng pháp tích cực nh ng phải ch p nh n sự phân hóa về c ờng độ, tiến độ hoàn
thành nhiệm vụ học t p, nh t là khi ài học đ ợc thiết kế thành một chuỗi công tác độc
l p. Áp dụng ph ng pháp ở trình độ càng cao thì sự phân hóa càng lớn. Việc sử dụng các
ph ng tiện công nghệ thông tin trong nhà tr ờng sẽ đáp ứng nhu c u cá thể hóa học t p
theo nhu c u và khả n ng của mỗi học sinh.
Tuy nhiên trong học t p, không mỗi tri thức k n ng, thái độ hình thành ằng
những hoạt động độc l p cá thể. Lớp học là môi tr ờng giao tiếp th y trò, trò với trò, tạo
nên mối quan hệ hợp tác giữa các cá nhân trên con đ ờng chiếm l nh nội dung học t p.
Thông qua thảo lu n, tranh lu n trong học t p, ý kiến mỗi cá nhân đ ợc ộc lộ, khẳng
định hay ác ỏ. Qua đó ng ời học nâng mình lên một trình độ mới, ài học v n dụng

GVHD: V

ng T n S

-8-

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

đ ợc vốn hiểu iết và kinh nghiệm của mỗi học sinh và của cả lớp chứ không phải chỉ
dựa trên vốn hiểu iết và kinh nghiệm sống của th y giáo
d. Kết hợp đánh giá của th y với tự đánh giá của trò
Trong dạy học, việc đánh giá học sinh không chỉ nhằm mục đích nh n định thực
trạng và điều chỉnh hoạt động học của trò mà còn đồng thời tạo điều kiện nh n định thực
trạng và điều chỉnh hoạt động dạy của th y. Tr ớc đây mọi ng ời vẫn th ờng hay có quan
niệm giáo viên là độc quyền đánh giá học sinh. Nh ng trong ph ng pháp tích cực, giáo
viên phải h ớng dẫn học sinh tự đánh giá để điều chỉnh cách học. Liên quan đến điều này,
giáo viên c n tạo thu n lợi để học sinh tự tham gia đánh giá lẫn nhau. Tự đánh giá đúng
và điều chỉnh hoạt động kịp thời là n ng lực r t c n cho sự thành đạt trong cuộc sống mà
mỗi th y cô c ng nh nhà tr ờng phải trang ị cho học sinh.
Với ph ng pháp này, giáo viên trở thành ng ời thiết kế, t chức, h ớng dẫn các
hoạt động độc l p hoặc theo nhóm nhỏ để học sinh tự chiếm l nh nội dung học t p, chủ
động đạt mục tiêu kiến thức, k n ng, thái độ theo yêu c u của ch ng trình. Ở trên lớp,
với ph ng pháp tích cực này thì học sinh hoạt động là chính, giáo viên nhàn hạ h n.
Song khi soạn giáo án giáo viên đã phải đ u t công sức, thời gian r t nhiều so với kiểu
dạy học thụ động, mới có thể thực hiện ài lên lớp với vai trò là ng ời gợi mở, xúc tác
động viên, cố v n, trọng tài trong các hoạt động tìm tòi hào hứng, tranh lu n sôi n i của
học sinh.
2.1.3. Áp dụng

Đây là một ph ng pháp thoáng nghe th y r t trừu t ợng nh ng khi áp dụng vào bài
giảng cụ thể thì r t d hiểu. Và một điều đặc iệt là mang lại kết quả tốt trong việc truyền
đạt kiến thức cho học sinh.
a. T p cho học sinh thói quen phân tích ài t p:
Tìm hiểu k nội dung của ài t p, khai thác triệt để các dữ kiện, giả thuyết của ài
t p, tìm hiểu đ ợc ph ng pháp giải và các kiến thức thích hợp, phân tích đ ợc mối liên
hệ hình thành giả thuyết và kết quả của ài toàn.
. Rèn luyện cho học sinh tự xây dựng ch ng trình giải
Phát thảo dự kiến con đ ờng chung để giải, xây dựng l p lu n cụ thể logic, định
h ớng tr ớc rồi mới giải ài toán, học sinh tự rút ra s đồ giải các ài toán cùng dạng.
c. Sau khi dạy xong giáo viên đặc iệt chú ý đến khâu lời giải
Chẳng hạn khi giải một ph ng trình, học sinh đối chiếu nghiệm tìm đ ợc các
điều kiện đã cho hoặc thay vào ph ng trình đó để đánh giá kết quả. Đối với ph ng trình
l ợng giác học sinh th ờng mắc sai l m khi kiểm tra nghiệm, kết hợp hay loại nghiệm,

GVHD: V

ng T n S

-9-

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

c n phải xem xét đ y đủ các tr ờng hợp cụ thể của ph ng trình để xác định đúng t p
nghiệm, việc kiểm tra lời giải th ờng tiến hành theo hai ớc:

- Xác định lại tính đúng đắn của ớc một và hai định tính .
- Rà soát lại quá trình thao tác đã sử dụng để giải toán định l ợng .
d. Rèn luyện cho học sinh khả n ng nghiên cứu lời giải.
Nghiên cứu, khai thác, phân tích và tìm tòi lời giải khoa học nh t cho ài t p sẽ
giúp học sinh có thói quen t p d ợt nghiên cứu khoa học, nắm ắt đ ợc ản ch t giải
quyết v n đề ài toán. Việc làm này r t quan trọng để rèn luyện t duy giải toán cho học
sinh.
e. Đặc iệt c n h ớng dẫn học sinh tìm các ài t p có liên quan và sáng tạo các ài
t p mới. Học sinh phải phân tích ài t p để nắm vững đặc điểm và ản ch t các yếu tố
thuộc ài t p, th y đ ợc mối liên hệ giữa các ài t p khác nhau. Có thể thay đ i điều kiện
hoặc các yếu tố đã cho để đi đến một ài t p mới.
2.2. Ứng dụng công nghệ thông tin vào dạy học tích cực
N ớc ta đã và đang thực hiện chiến l ợc cải cách sách giáo khoa cho các c p học
ph thông. Có thể nói cho đến nay đã hoàn thành việc cải cách SGK. Ch ng trình cải
cách mang tính hiện đại h n, sát thực tế h n, phù hợp với hoàn cảnh đ t n ớc và xã
hội…nhằm mục đích đ a nền giáo dục Việt Nam theo kịp xu thế phát triển đ t n ớc nói
riêng, trên thế giới nói chung. Nh ng nếu chỉ cải cách sách giáo khoa thì không thể nói là
cải cách giáo dục. Cải cách SGK phải đi đôi với ph ng pháp dạy và ph ng pháp học.
Việc này đòi hỏi ng ời giáo viên phải iết thay đ i cách dạy. Và việc ứng dụng công
nghệ thông tin là một trong những cách dạy học có hiệu quả mang lại lợi ích cao trong
giáo dục.

3. TÌM HIỂU VỀ WEB
3.1. Giới thiệu về ngôn ngữ HTML
HTML (Hyper Text Markup Language là một ngôn ngữ đánh d u siêu v n ản
dùng để thiết kế trang we . Ngôn ngữ này mô tả cách thức mà dữ liệu hiện thị thông qua
các t p kí hiệu đánh d u gọi là tag HTML tag , các tag này còn đ ợc gọi là Elements.
HTML giờ đây đã trở thành một chuẩn Internet do t chức World Wide Web
Consortium W3C duy trì. Trang HTML đ ợc l u với ph n mở rộng .htm hoặc .html. Để
tạo trang HTML, ạn có thể sử dụng t kì ch ng trình soạn thảo v n ản nào nh :

Notepad, MS Frontpage, Dreamweaver,…

GVHD: V

ng T n S

- 10 -

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

3.2. Các thành phần trong trang HTML
3.2.1. Cấu trúc một trang HTML
Trong HTML luôn ắt đ u ằng tag <html> và kết thúc ằng tag </html>
- C u trúc một trang HTML
<html>
<head>
< title> Tựa đề</ title>
</head>
<body>
Nội dung trang wed
</body>
</ html>
- C u trúc trên gồm hai thành ph n chính:
 Đ u trang: Nội dung nằm trong cặp tag < head> </head>, chứa một số thông
tin tóm tắt về trang we nh tiêu đề, tác giả….

 Thân trang: Các nội dung nằm trong cặp tag < ody></ ody>, chứa toàn ộ nội
dung c n hiển thị trong cửa s trình duyệt.
Chú ý:
Xâu ký tự nằm giữa <title></title> không hiển thị trên trang we mà hiển thị
tại thanh phía trên của Browser.
Xâu ký tự nằm giữa <title></title> đ ợc đặt trong ph n header khi trang we
đ ợc in ra.
Xâu ký tự nằm giữa <title></title> đ ợc ghi lại khi ạn c p nh t trang we này
vào mục các trang yêu thích.
Ví dụ:
Mã nguồn
<html>
<head>
<title> Tựa đề </title>
</head>
<body>Website Công nghệ 12</body>
</html>
Kết quả
Website Công nghệ 12
GVHD: V

ng T n S

- 11 -

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

3.2.2. Cú pháp chung của tag
Một tag thông th ờng gồm các ph n: tag mở start tag , các thuộc tính ( attributes)
và tag đóng end tag).
 Cú pháp:
< Tên tag Thuộc tính1 = “ giá trị” Thuộc tính2 = “ giá trị” …>
Nội dung
</ Tên tag>
3.3. Các tag cơ bản
3.3.1. Định nghĩa cấu trúc trong trang HTML
 Gồm các tag:
 <html></html>: xác định thành ph n ắt đ u và kết thúc của trang HTML
(HTML Document).
 < head></head>: chứa các thông tin t ng quát về trang we meta- information)
và không thể hiện trên cửa s trình duyệt. Các tag nằm lồng trong tag gồm có:
 < title></title>: thông tin đ ợc thể hiện trên thanh tiêu đề của trình duyệt.
 <meta>: khai báo các thông tin trang web.
 <link>: đây là tag rỗng, chứa khai áo đến t p tin có liên quan đến trang we
nh t p tin định dạng thể hiện . Ccs , xử lý .js ,…
 <style></style>: khai áo các mẫu định dạng chung cho một Element nào đó
trong trang we tag

, < ody>, <div>, …
 <script></script>: khai áo ph n ngôn ngữ tham gia xử lý trong trang we , ví
dụ nh ngôn ngữ JavaScript.
 < base>: Xác định địa chỉ URL c sở cho t t cả các liên kết trong một trang,
không có tag đóng.
 < body></body>: nội dung chính của trang we , đ ợc thể hiện trong màn hình
của trình duyệt.
3.3.2. Các tag tiêu đề - Headings
Dùng để định dạng kh chữ dạng tiêu đề, theo quy định từ nhỏ đến lớn, gồm các

tag

,

,

,

,

và

.
HTML sẽ tự động thêm một dòng vào tr ớc và sau dòng định dạng là heading
Ví dụ:
Mã nguồn

Dòng 1

GVHD: V

ng T n S

- 12 -

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

Dòng 2

Dòng 3

Kết quả

Dòng 1
Dòng 2
Dòng 3

3.3.3. Phân đoạn (paragraphs) và ngắt dòng (line break)
Khi ta đánh máy một v n ản trong một ch ng trình soạn thảo v n ản nào đó, ta
chỉ c n m phím Return để kết thúc một dòng hay một đoạn v n, nh ng ta c n phải làm
nhiều thao tác h n khi muốn phân định riêng các đoạn v n khác nhau trong một trang

we . Browser tự động ỏ qua các mã xuống dòng ình th ờng.
Vì vậy:
- Để phân iệt các đoạn v n ta dùng tag

, và tag

không c n tag đóng.
HTML sẽ tự cộng thêm một dòng trắng tr ớc và sau đoạn v n ản.
Ví dụ:
Mã nguồn
Bài t p 1

Bài t p 2

Bài t p 3

Kết quả
Bài t p 1
Bài t p 2
Bài t p 3
- Để chuyển sang một dòng mới nh ng ch a kết thúc đoạn v n ản, ta dùng tag

. Tag dùng < r> không c n tag đóng.
Ví dụ
Mã nguồn
Bài t p 1 < r>
Bài t p 2 < r>
Bài t p 3 < r>
Kết quả
Bài t p 1
Bài t p 2
Bài t p 3
GVHD: V

ng T n S

- 13 -

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

3.3.4. Đƣờng kẻ ngang tag <hr> ( horizontal rule)
Tag <hr> dùng để tạo ra một đ ờng kẻ ngang. Bạn có thể sử dụng thuộc tính size
và width để thay đ i độ rộng và chiều dài đ ờng kẻ.
Đ ờng kẻ ngang chủ yếu đ ợc dùng để phân định một trang we thành những
ph n có tính logic và d nhìn. Có không nhiều khả n ng đồ họa trong ngôn ngữ HTML,
ởi v y đ ờng kẻ ngang là một dụng cụ r t có ích.
Mã nguồn
Kết quả
<HR>
<HR size=10>
<HR Noshade>
<HR width = 20>
<HR color = “ FF0000”>
Có thể t ng hợp các tùy chọn trên
3.3.5. Thẻ chú dẫn tag <!-- -- > (Comment)
Giống nh các ngôn ngữ khác, HTML cho phép đặt những chú dẫn, dùng để ghi
chú trong trang html và nó là một ph n quan trọng trong khi soạn thảo. Trình duyệt
browser) bỏ qua ph n v n ản nằm trong thẻ chú dẫn nên ng ời sử dụng không thể nhìn
th y chúng trên trang we . Nh ng có thể th y chúng khi xem mã nguồn. Chú dẫn đ ợc
giới hạn ởi tiền tố <!-- và h u tố -- >.
3.4. Định dạng văn bản
HTML cung c p cho chúng ta khá nhiều tag dùng để định dạng v n ản, song song
đó HTML c ng có thuộc tính style cho h u hết các tag. Thuộc tính này cực kỳ hữu ích

cho định dạng, nó đóng vai trò g n giống nh chức n ng Format trên thanh thực đ n của
MS Word.
Khi sử dụng thuộc tính style ạn có thể tô màu nền, màu chữ, kẻ đ ờng viền,… cho
đoạn v n ản.
3.4.1. Các tag định dạng
 Ký tự định dạng trƣớc
Trình duyệt sẽ không quan tâm đến cách trình ày code HTML mà chỉ dựa vào
các tag để trình ày nội dung trang we . Dù ạn nh p nhiều khoảng trắng nh ng nó chỉ
hiểu một khoảng trắng, ạn có xuống dòng thì nó vẫn trình ày nội dung trên một dòng
trừ khi có tag quy định xuống dòng (tag
hay

và ạn có thụt đ u dòng
(Indentation) thì nó vẫn ỏ qua. Để giải quyết khó kh n này ta có thể sử dụng tag định
dạng tr ớc: mở đ u ằng thẻ

 và kết thúc ằng thẻ </pre> , tag này sẽ giữ nguyên
GVHD: V

ng T n S

- 14 -

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

định dạng trong trang HTML, ngh a là nó thể hiện các khoảng trắng, xuống dòng trong
code HTML nh khi ạn soạn thảo trên trình duyệt.
 Khối trích dẫn
Khối trích dẫn th ờng đ ợc dùng trong các tr ờng hợp sử dụng các trích dẫn mở
rộng. Toàn khối trích dẫn sẽ đ ợc c n lề thụt vào ở cả hai phía và tạo thành một khối

riêng so với các đoạn khác của trang v n ản HTML. Khối trích dẫn mở đ u ằng thẻ
<blockquote> và kết thúc ằng thẻ </blockquote>.
 Kiểu chữ
Các kiểu chữ trong ngôn ngữ HTML cho phép ạn điều khiển đ ợc vẻ ề ngoài ản
thân các kí tự, chẳng hạn chúng ta có thể định dang một từ là đậm hoặc nghiêng. Các
định dạng này có thể áp dụng từ phạm vi một đoạn v n hay toàn ộ v n ản cho đến các
ký tự đ n lẻ. Các kiểu chữ nói chung chia làm hai nhóm: có tính v t lý và có tính ch t
logic.
Kiểu có tính chất vật lý
Mã nguồn
< > đ m </ >
<u> gạch d ới</u>
<i> in nghiêng </i>
<tt> teletype</tt>

Kết quả
đậm
gạch d ới
in nghiêng
teletype

M<sup> 2</sup>

M2

V<sub> 1</sub>
<big></big>

V1
Phóng lớn chữ


<small></small>
<del> gạch ỏ </del>

Thu nhỏ chữ
gạch ỏ

Kiểu có tính logic
Mã nguồn
<em> nh n mạnh</em>

Kết quả
nhấn mạnh

<strong> nh n mạnh h n</strong>
<cite> trích dẫn </cite>
<code> code</code>
<samp> sample </samp>
<kbd> keyboard </kbd>
<var> variable</var>
<dfn> giải thích<dfn>

nhấn mạnh hơn
trích dẫn
code
sample
keyboard
variable
giải thích


GVHD: V

ng T n S

- 15 -

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

3.4.2. Thuộc tính style
Ta có thể sử dụng thuộc tính này trong đa số các tag HTML để định dạng. Thuộc
tính style có r t nhiều chi tiết, ở đây chỉ trình ày một số chi tiết c ản th ờng dùng :
Thuộc tính style
Thuộc tính
Font - size

Kết quả
Kh chữ

Font - style
Font - family

Kiểu chữ
Tên font chữ

Font - weight

Color

Nét chữ đậm hoặc chọn kích th ớc
Màu chữ

Text - decoration

Gạch d ới, gạch trên, gạch ỏ, hoặc ỏ
hết định dạng
Màu nền
Màu đ ờng viền
Kiểu đ ờng viền

Background - color
Border - color
Border - style

Chúng ta c ng có thể sử dụng tag < font> để định dạng v n ản, tag này có các thuộc
tính:
+ face: tên font chữ
+ size: kh chữ
+ color: màu chữ
3.5. Ký tự đặc biệt
Một số các ký tự nh : <, >, ©, ®,… có ý ngh a đặc iệt trong HTML, vì v y ta
không thể dùng nó nh các ký tự ình th ờng đ ợc. Do đó HTML cung c p các giá trị
đặc iệt t ng ứng với các ký tự này để hỗ trợ cho chúng ta trong quá trình viết code
HTML.
Các giá trị này có 3 ph n: ký hiệu &, tên đại diện cho ký tự và cuối cùng là d u
ch m phẩy ;). Trong ph n tên, chúng ta có thể thay ằng ký tự # và số đại diện.
Ví dụ :Để thể hiện d u < , ta dùng < hoặc <

Ưu điểm của việc dùng tên là d nhớ nh ng không phải trình duyệt nào c ng đều hỗ
trợ cách dùng tên, do đó chúng ta nên dùng số đại diện vì t t cả các trình duyệt đều hiểu
cách này.
Một điểm c n l u ý là các giá trị này phân iệt HOA/ th ờng.
GVHD: V

ng T n S

- 16 -

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

3.6. Danh sách – list
Các lý do cho th y tại sao danh sách lại r t có ích. Bởi vì : nó có tính h p dẫn trực
quan, nó có thể đ ợc sử dụng để nhóm các yếu tố hoặc ý kiến t ng tự, chúng ta có thể d
dàng đọc l ớt qua các danh sách và ghi nhớ các yếu tố t ng ứng. HTML cung c p một
nhóm khá đa dạng các kiểu danh sách khác nhau. Mỗi loại danh sách có một loại định
dạng riêng. Chúng ao gồm:
 Danh sách có trật tự
Danh sách có tr t tự tự động đánh số từng thành tố của danh sách.
Mã nguồn
<ol>
<li> K thu t điện tử </li>
<li> K thu t điện </li>
</ol>


Kết quả
1. K thu t điện tử
2. K thu t điện

 Danh sách không có trật tự
Danh sách không có tr t tự đánh d u chẳng hạn các núm tròn cho từng yếu tố của
danh sách
Mã nguồn
<ul>
<li> K thu t điện tử </li>
<li> K thu t điện </li>
</ul>

Kết quả
 K thu t điện tử
 K thu t điện

 Danh sách định nghĩa
Mỗi yếu tố của danh sách gồm hai thành ph n:
- Tiêu đề đ ợc canh lề phía trái chỉ ra ởi thẻ<dt>
- Ph n giải ngh a đ ợc c n lề thụt h n sang phía phải chỉ ra ởi thẻ <dd>
Mã nguồn
<dl>
<dt> K thu t điện tử </dt>
<dd> Nội dung k thu t điện tử </dd>
<dt> K thu t điện </dt>
<dd> Nội dung k thu t điện </dd>
</dl>


GVHD: V

ng T n S

- 17 -

Kết quả
K thu t điện tử
Nội dung k thu t điện tử
K thu t điện
Nội dung k thu t điện

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

 Danh sách kiểu thực đơn
Mỗi yếu tố của danh sách đ ợc c p một chỉ số chẳng hạn một d u tròn. Trông r t
giống danh sách không có tr t tự.
Mã nguồn
<menu>
<li> K thu t điện tử </li>
<li> K thu t điện </li>
</menu>

Kết quả
 K thu t điện tử

 K thu t điện

 Danh sách kiểu thƣ mục
Trông khá giống danh sách không có tr t tự.
 Tổ hợp các kiểu danh sách
Ta có thể t hợp các kiểu danh sách với nhau.
3.7. Bảng trong trang HTML
Bảng tạo cho ạn cảm giác thoải mái khi tìm kiếm. Ngoài ra, dùng ảng trình ày
c ng r t tiện lợi. Bạn có thể đ a v n ản, hình ảnh, danh sách và th m chí ạn còn có thể
chèn thêm vào đó một ảng mới. Bảng HTML c ng có các chức n ng trình ày, định
dạng, đ ờng iên nh ảng trong MS- Word, MS- Excel.
 Định dạng bảng
Thẻ
<tr>
<td>
<th>
 Các tham số trong thẻ
Tham số
Border = n
Width = n%
Cellpadding = n
Cellspaccing = n
Colspan = n
Rowspan = n
Align = ( left, right, center)
GVHD: V

ng T n S

Ý nghĩa

Tạo dòng
Tạo cột
Tạo dòng tiêu đề ( Chữ in đậm, canh giữa)

Ý nghĩa
Định dạng đ ờng viền với đ ờng viền n
Định dạng chiều rộng của ảng n%
Khoảng cách giữa v n ản và ô
Khoảng cách giữa các iên trong và ngoài của ô
Chia cột thành n cột
Chia dòng thành n dòng
Định dạng lề theo chiều ngang của v n ản
- 18 -

SVTH: Lý Hồng Đạt


Thết Kế Website Công nghệ 12

Lu n v n tốt nghiệp Đại học

Valign = (top, bottom, Định dạng lề theo chiều dọc của v n ản
middle)
Clear = (left, right, all)
Chia dòng thành n dòng

Ví dụ : Ta có mã nguồn sau:
<HEAD>
<TITLE>Tạo ảng trong HTML</ TITLE >
</HEAD>

<BODY>
<OL><LI><B>Bảng 1</B></LI></OL>
<TABLE BORDER="2" WIDTH="30%">
<TR>
<TH>CHƯƠNG</TH>
<TH>SỐ BÀI</TH>
</TR>
<TR>
<TD>CHƯƠNG 6</TD>
<TD>8 BÀI</TD>
</TR>
<TR>
<TD>CHƯƠNG 7</TD>
<TD> 7 BÀI</TD>
</TR>
</TABLE>
</body>
</html>

Kết quả sẽ đƣợc nhƣ sau:

GVHD: V

ng T n S

- 19 -

SVTH: Lý Hồng Đạt