BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: “Nghiên cứu xây dựng các bài thực hành ảo tương tác cho học sinh phổ thông.”

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.83 MB, 87 trang )

LỜI CẢM ƠN

Em xin chân thành cảm ơn thầy Phạm Văn Hà là giáo viên hướng
dẫn trong đề tài mà em thực hiện, em rất trân trọng sự giúp đỡ nhiệt tình
của thầy trong quá trình học tập cũng như quá trình làm báo cáo thực tập
tốt nghiệp và đồ án tốt nghiệp để em có thể hoàn thành tốt đồ án này.
Em cũng xin cảm ơn khoa Công Nghệ Thông Tin đã tạo điều kiện tốt
nhất để em có được rất nhiều kiến thức bổ ích để nhanh chóng làm quen
với công việc cũng như áp dụng trong các sản phẩm của mình. Khoa Công
Nghệ Thông Tin đã cho em cơ hội tham gia các chương trình kết nối với
doanh nghiệp cực kì bổ ích và thực tế, giúp chúng em được đi ra các doanh
nghiệp và tham gia vào các dự án thực tế để chúng em tiếp thu được rất
nhiều các kiến thức và kĩ năng mới cực kì hữu ích cho bản thân và công
việc trong tương lai. Các thầy, cô trong khoa đã ân cần dạy dỗ, hết sức tạo
điều kiện cho chúng em trong suốt quá trình học tập và rèn luyện tại trường.
Từng giờ lên lớp, từng buổi ngoại khóa mà nhà trường tổ chức đều mong
muốn chúng em có thật nhiều kiến thức, thật nhiều kĩ năng để chúng em
cứng cáp hơn, tự tin hơn, mở rộng khả năng và tìm kiếm cho bản thân
những cơ hội thực sự phù hợp. Em chẳng biết nói gì hơn ngoài việc gửi lời
cảm ơn chân thành nhất tới tất cả các thầy cô, mong các thầy, các cô luôn
giữ gìn sức khỏe để tiếp tục dìu dắt các thế hệ học sinh trở thành những
con người tài năng và có ích cho xã hội.
Và cuối cùng, em cũng xin cảm ơn trường Đại học Công nghiệp Hà
Nội là ngôi trường tuyệt đẹp và tốt nhất mà em đã tin tưởng theo học. Xin
cảm ơn trường vì những đóng góp đã giúp em có được kiến thức không chỉ
về mặc học vấn mà còn những kiến thức về xã hội để giúp em có thể vững
bước trên con đường của chính mình.

1

TÓM TẮT BÁO CÁO ĐỒ ÁN
Sau sản phẩm của quá trình thực tập tốt nghiệp, được sự góp ý và định
hướng phát triển theo nhu cầu thực sự của doanh nghiệp cũng như là nhu
cầu của xã hội, em quyết định sẽ tiếp tục phát triển sản phẩm demo của
mình cho bài báo cáo đồ án tốt nghiệp ngành công nghệ thông tin trở nên
hoàn thiện và phong phú hơn.
Mục đích của báo cáo nhằm trình bày:
- Kết quả nghiên cứu tìm hiểu về HTML5.
- Kết quả nghiên cứu tìm hiểu về CSS3.
- Cách sử dụng tool Adobe Illustrator để thiết kế giao diện SVG.
- Kiến thức tìm hiểu về Jquery.
- Phát triển một ứng dụng có sử dụng các kiến thức đã nghiên cứu và
tìm hiểu.
Các kết luận chính của báo cáo:
- Html5 và Csss3 là công nghệ phát triển website mới nhất hiện nay, đã
khắc phục được rất nhiều thiếu sót của các phiên bản trước, không thể
phủ định rằng bộ đôi này có rất nhiều điểm mạnh nhưng lại khá đơn
giản và không còn nghi ngờ gì khi khẳng định rằng đây là công nghệ
cốt lõi của Internet trong một tương lai không xa.
- jQuery là 1 thư viện được viết trên top của javascript, hệ thống lại các
hàm của javascript để cho ngắn gọn, dễ nhớ, dễ dùng. Nó giúp ta có
để giải quyết được hầu hết các sự kiện xuất hiện trên trình duyệt và
làm cho website trở nên linh hoạt và sinh động hơn rất nhiều so với
bình thường. Với rất nhiều ưu điểm như dễ sử dụng, dễ mở rộng,
được hỗ trợ trên hầu hết các trình duyệt và tạo ra rất nhiều hiệu ứng
đẹp mắt, Jquery được các nhà phát triển website trên toàn thế giới tin
tưởng. Theo thống kê, có tới 99% số website trên thế giới được viết có
sử dụng Jquery.
- Việc tăng cường xây dựng và phát triển các ứng dụng hỗ trợ quá
trình học tập và giảng dạy là thực sự cần thiết, vừa giảm nhẹ được

khối lượng kiến thức cần truyền đạt cũng như tiếp thu trong mỗi tiết
học, vừa tạo điều kiện cho thế hệ trẻ sớm được tiếp cận với công nghệ
để nhanh chóng phát triển khả năng tư duy cũng như trí óc sáng tạo
cho mỗi thế hệ học sinh.

2

Mục lục:

3

DANH SÁCH CÁC HÌNH VẼ SỬ DỤNG TRONG BÁO CÁO
Hình 3.4: Sản phẩm hoàn chỉnh của bài thực hành 1.
Hình 3.5: Thiết kế giao diện bài thực hành 2.
Hình 3.6: Sản phẩm hoàn chỉnh bài thực hành 2..
Hình 3.7: Thiết kế giao diện bài thực hành 3.
Hình 3.8: Sản phẩm hoàn chỉnh bài thực hành 3.
Hình 3.9: Giao diện bài thực hành 4.1.
Hình 3.10: Giao diện bài thực hành 4.2.
Hình 3.11: Giao diện bài thực hành 5.
Hình 3.12: Giao diện bài thực hành 6.
Hình 3.13: Giao diện bài thực hành 7.

DANH SÁCH CÁC BẢNG BIỂU SỬ DỤNG TRONG BÁO CÁO
Bảng 1.1: Các hàm cơ bản trong Jquery....................................................................27
Bảng 1.2: Các trạng thái của sự kiện drap and drop..................................................32

I. PHẦN MỞ ĐẦU

1. Lý do chọn đề tài
Xã hội ngày càng tiến bộ, nhu cầu tiếp cận thông tin của mọi người
ngày càng lớn, và việc sớm tiếp cận với công nghệ thông tin sẽ giúp cho
mọi người nhanh chóng hiểu được công nghệ, gợi mở sức sang tạo
cũng như khả năng tư duy vì thế giới công nghệ là thế giới của sự sáng
tạo vô bờ bến. Bên cạnh đó việc áp dụng công nghệ thông tin vào giáo
dục giúp cho cả nhà trường và giáo viên, học sinh giảm bớt các gánh
nặng về khối lượng kiến thức cũng như cách thức truyền đạt của giáo
viên và khả năng tiếp thu kiến thức của học sinh, sinh viên được phù
hợp. Ở các nước hiện đại, các trang web hỗ trợ học tương tác như vậy
có khá nhiều, dễ dàng cho việc nghiên cứu và học tập tại nhà trở nên dễ
dàng hơn.
Sau những năm học trung học phổ thông, em hiểu được nỗi khó khăn
của các thầy, cô trong các bài thực hành. Lượng học sinh đông, thiết bị
4

thực hành cũng như thời gian và không gian thực hành hạn chế. Lượng
kiến thức trong mỗi bài thực hành khá lớn và khả năng tiếp thu của học
sinh trong mỗi bài thực hành lại ảnh hưởng trực tiếp đến các kiến thức lý
thuyết cơ sở mà các học sinh được học trước và sau đó. Cộng thêm một
yếu tố khách quan là khả năng truyền đạt của giáo viên tới mỗi đối
tượng học sinh lại khác nhau. Nên kết quả sau mỗi buổi thực hành
không được như mong đợi. Hiểu được lý do đó, cộng thêm một lời ngỏ ý
của thầy giáo dạy học 3 năm trung học phổ thông, nên em quyết định sẽ
tìm hiểu giải pháp để giải quyết được vấn đề này.
Là một học sinh rất yêu thích môn vật lý và sinh học, cộng với những
hiểu biết về công nghệ thông tin, lòng đam mê tìm hiểu những công
nghệ mới. Em nghĩ trách nhiệm của bản thân mình sau bốn năm học tại
trường là nên làm một sản phẩm có tính thực tế, khả năng sử dụng cao,

vận dụng được nhiều kiến thức mình học được và mang yếu tố cá nhân
bên trong sản phẩm đó.
Từ những lý do trên, sau một thời gian nghiên cứu tìm hiểu cộng với
sự gợi mở hướng dẫn của thầy Phạm Văn Hà trực tiếp hướng dẫn thực
tập tốt nghiệp. Nên em đã quyết định tìm hiểu và phát triển một trang
web với một vài bài thực hành demo để vận dụng tất cả những kiến thức
em học hỏi được nhằm tạo ra một sản phẩm có ích và nắm được công
nghệ để phát triển và hoàn thiện sản phẩm của mình trong tương lai.

2. Mục tiêu và nhiệm vụ nghiên cứu.
2.1 Mục tiêu.
Tìm hiểu những kiến thức thực tế, những công nghệ mới đã và đang
được sử dụng tại các doanh nghiệp để biết được nhu cầu thực tế của xã
hội và các xu thế tương lai của công nghệ.
Nghiên cứu, thiết kế và xây dựng website trực tuyến hỗ trợ việc dạy
và học các bài thực hành / thí nghiệm các môn khoa học phổ thông như
vật lý, sinh học, địa lý trong nội dung chương trình trung học phổ thông
dựa trên mô phỏng và tương tác ảo.s
2.2 Nhiệm vụ nghiên cứu.
• Nghiên cứu cơ sở lý thuyết về HTML5 sử dụng SVG, CSS3,
Jquery.
5

• Nghiên cứu và tìm hiểu về sử dụng công cụ Adobe Photoshop,
Adobe Illustrator để tạo ra SVG.
• Nghiên cứu tìm hiểu về cơ sở lý thuyết các bài thí nghiệm, các
công thức tính toán.
• Thiết kế giao diện theo các bài thí nghiệm sao cho hợp lý và thuận
tiện.

• Xây dựng chương trình kết hợp giữa lý thuyết và bản thiết kế chi
tiết tạo ra sản phẩm.
2.3 Yêu cầu.
• Nghiên cứu tìm hiểu bộ 3 công nghệ HTML5, CSS3, Jquery có
kết hợp với Bootstrap.
• Nghiên cứu các kĩ thuật mô phỏng thực tại ảo có tương tác.
• Phân tích, thiết kế và phát triển các bài thực hành / thí nghiệm ảo
tương tác đáp ứng được các yêu cầu như sau:
- Xây dựng trang truy cập chính;
- Xây dựng demo từ 10 đến 15 bài thực hành / thí nghiệm sử
dụng tương tác đồ họa kết hợp với các kiến thức phổ
thông, phù hợp với đối tượng học;
- Cho phép sử dụng website trên nhiều môi trường: desktop,
tablet, smartphone;
- Giao diện thân thiện;

3. Đối tượng nghiên cứu
• Website tương tác học và dạy học trực tuyến. Một website tương
tự như một website trong trương trình đào tạo học và dạy học của
Mỹ rất nổi tiếng trong phạm vi các môn học vật lý và sinh học, hóa
học: />• Xây dựng website bằng công nghệ mới HTML5 và CSS3 có kết
hợp với Jquery .

4. Giới hạn đề tài
Chức năng chủ yếu của trang web là tương tác thực hành với các bài
thí nghiệm trong một vài môn học như:
• Thực hành về quá trình tạo thành ảnh của thấu kính hội tụ.
• Momen lực. Điều kiện cân bằng của vật rắn quanh một trục cố
định.
• Định luật Faraday về hiện tượng cảm ứng điện từ.

• Pin quang điện và ứng dụng của pin quang điện.
6

• Tác động có hướng của dòng điện một chiều – quy tắc bàn tay
trái.
• Hệ tuần hoàn.
• Cấu tạo và chu kì hoạt động của tim.
• Cấu tạo và hoạt động của cơ và xương.

5. Phương pháp nghiên cứu
• Tìm hiểu sách giáo khoa và tài liệu của nhà xuất bản giáo dục.
• Tìm hiểu tại các diễn đàn về Công Nghệ Thông Tin, các forum về
lập trình web, lập trình Jquery, thiết kế sử dụng Adobe Illustrator.
• Tìm hiểu tại các diễn đàn về vật lý, hóa học, địa lý .v.v..
• Học cách thiết kế các đối tượng, demo các vật thể đơn giản.
• Tìm hiểu các thư viện mẫu, các plug–in hỗ trợ lập trình, thiết kế.
• Tìm hiểu, tham khảo ý kiến của các anh chị, các bạn bè có kiến
thức sâu và am hiểu về lĩnh vực mình đang nghiên cứu.
• Tham khảo các dữ liệu tại kho tài liệu và từ điển tra cứu của
doanh nghiệp.

7

II. PHẦN NỘI DUNG
CHƯƠNG I: CƠ SỞ LÝ THUYẾT
HTML5 & CSS3 là công nghệ mới nhất được giới thiệu vào năm 2009
và chỉ trong vòng 2 năm chúng đã trở thành một cơn bão quét ngang
qua làng công nghệ website mặc dù nó còn thiếu một vài tags nhưng

không thể phủ nhận được những tiện ích HTML5 mang lại đã thực sự
làm các nhà phát triển webpage thấy hứng thú với HTML & CSS3.
1.1: Giới thiệu HTML5
HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World
Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không
xa, được đề xuất đầu tiên bởi Opera Software. Đây là phiên bản thứ 5
của ngôn ngữ HTML và hiện tại vẫn đang được phát triển bởi World
Wide Web Consortium. Mục tiêu cốt lõi khi thiết kế ngôn ngữ là cải thiện
khả năng hỗ trợ cho đa phương tiện mới nhất trong khi vẫn giữ được
việc con người và các thiết bị, các chương trình máy tính như trình duyệt
web, trình đọc màn hình, v.v.. có thể đọc, hiểu, hay xử lý một cách dễ
dàng. HTML5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML4 và bổ
sung thêm các đặc tả nổi trội của XHTML, DOM, đặc biệt là JQuery.
Là phiên bản tiếp sau của HTML 4.01 và XHTML 1.1, HTML5 là một
phản ứng để đáp lại lời phê bình rằng HTML và XHTML được sử dụng
phổ biến trên World Wide Web là một hỗn hợp các tính năng với các
thông số kĩ thuật khác nhau, được giới thiệu bởi nhiều nhà sản xuất
phần mềm ví dụ Adobe, Sun Microsystems, Mozilla, Apple, Google,… và
có nhiều lỗi cú pháp trong các văn bản web. Đây là một nỗ lực để tạo
nên một ngôn ngữ đánh dấu có thể được viết bằng cú pháp HTML hoặc
XHTML. Nó bao gồm các mô hình xử lý chi tiết để tăng tính tương thích,
mở rộng, cải thiện và hợp lý hóa các đánh dấu có sẵn cho tài liệu, đưa
ra các đánh đấu mới và giới thiệu giao diện lập trình ứng dụng
(application programming interfaces API) để tạo ra các ứng dụng Web
phức tạp. Cùng một lý do như vây, HTML5 là một ứng cử viên tiềm năng
cho nền tảng ứng dụng di động. Nhiều tính năng của HTML5 được xây
dựng với việc xem xét chúng có thể sử dụng được trên các thiết bị di
động như điện thoại thông minh và máy tính bảng hay không.
HTML 5 kết hợp với CSS 3 sẽ được áp dụng trên tất cả các trang
web trong tương lai gần. Cả hai yếu tố này giúp công cụ internet tìm

8

kiếm đơn giản, tương tác nhiều hơn và tốt hơn. Trang web sẽ đơn giản
hơn trong thiết kế và code. Ngôn ngữ HTML đầu tiên áp dụng cho web
vào năm 2008 và được phát triển bởi tập đoàn mạng toàn cầu(World
Wide Web Consortium).
Vậy có gì mới trong HTML5?
Nếu so sánh giữa bề mặt thì HTML4 và HTML5 thì rất khó để nhận
biết html4 và html5 chỉ đến khi vào code bạn mới biết. Đặc biệt các nhà
phát triển trình duyệt rất thích các thông số kĩ thuật mới của html5 để
render mặc định của trình duyệt.
HTML5 được cung cấp miễn phí cho cả developers lẫn người dùng,
không như flash, flash player thì miễn phí nhưng bộ phát triển lại có giá
rất cao. Không phải ai cũng có thể sử dụng được.
HTML5 sẽ có lợi thế hơn về tính phổ biến khi bước vào môi trường di
động. Ví dụ: Flash là plug-in còn HTML5 thì được trực tiếp render từ
browser nên chắc chắn tính phổ biến sẽ cao hơn rất nhiều.
- HTML 5 đơn giản hơn. Ví dụ : nếu bạn vẫn bực mình về DOCTYPE
thì nay chuyện đó chỉ còn là dĩ vãng.
DOCTYPE của XHTML Strict 1.0 là :
Còn của HTML5 chỉ đơn giản là
<!DOCTYPE HTML>.
Ngoài ra các yếu tố truyền thông cũng là một điểm mạnh của HTML5
chúng bao gồm audio, video .Trong ngôn ngữ HTML5 có sự hỗ trợ rất
lớn đối với video và audio.
Cụ thể các điểm mới, nổi bật bao gồm:
- Các phần tử dạng khối (block elements):
• <header>, <footer>: Các thẻ header và footer được định nghĩa

trước, do đó không cần phải đặt ID cho các thành phần này.
• <article>: Dùng để đánh dấu một bài viết, một comment hoặc
một thông báo.
• <aside>: Dùng để đánh dấu nội dung ngoài lề của một trang
web, ví dụ như một sidebar.

9

• <nav>: Thanh điều hướng hoặc menu giờ có thể được đặt
trong thẻ này, nó sẽ tự động tạo ra cho chúng ta một danh sách
trông giống như một thanh điều hướng thực sự.
• <section>: Với cặp thẻ này, chúng ta có thể định nghĩa bất kỳ
phân vùng nào trên trang web của mình. Nó cũng khá giống so
với thẻ <div>.
- Các phần tử nội tuyến(inline elements)
• <mark>: Dùng để xác định văn bản được đánh dấu, sử dụng
khi muốn làm nổi bật văn bản của mình
• <time>: Dùng để xác định thời gian, ngày tháng, hoặc năm
sinh.
• <meter>: Dùng để định nghĩa một phép đo. Sử dụng chỉ cho
phép đo với giá trị tối thiểu và tối đa.
• : Dùng để mô tả tiến trình làm việc.
- <canvas>: Kết hợp với JQuery, tạo một vùng có thể vẽ đồ họa.
- <video>,<audio>: Đính kèm video hoặc âm thanh.
Cấu trúc của một website cơ bản:

Hình 1.1: Cấu trúc của một website
•
•

•
•
•

Header: Chứa tiều đề hoặc phụ đề trang.
Navigation: Phần chuyển hướng trang (chứa các thẻ link).
Article và Section: Dùng tạo nhóm (Hiển thị tin tức).
Aside: Tạo nội dung bổ sung.
Footer: Chứa thông tin trang, bài viết, hoặc một phần website,
…
10

Chi tiết:
<!doctype html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header>

Page title

</header>
<nav>

</nav>
<section id="intro">

</section>
<section>

</section>
<aside>

</aside>
<footer>

</footer>

</body>
</html>

Kết luận: HTML 5 là một phần tương lai của Web. Các phần tử mới
của nó cho phép đánh dấu rõ ràng hơn, đơn giản hơn, làm cho các trang
hiển nhiên hơn, tường minh hơn. Mặc dù không phải tất cả các trình
11

duyệt hiện giờ đều sẽ hỗ trợ những phần tử mới này từ lúc đầu, điều đó
cũng tương tự đối với hầu hết các phần tử được đưa vào sau khi HTML
lần đầu tiên được phát minh: img, table, object…. Sự hỗ trợ sẽ đến với
trong một ngày gần đây. Trong khi đó, trình duyệt vẫn sẽ tự bỏ qua đối
với các phần tử chưa được nhận biết, có nghĩa là những người dùng với
các trình duyệt cũ vẫn sẽ có thể đọc các trang HTML 5. Những người
dùng với các trình duyệt hiện đại hơn sẽ có được trải nghiệm nâng cao,
nhưng không ai bị loại bỏ cả.
1.2: Giới thiệu HTML5 – SVG
SVG (Scalable Vector Graphics) chuẩn đồ hoạ vector có khả năng
mở rộng. Đối với đồ hoạ vector thì chúng ta thường biết đến đó là Adobe
Illustrator, hình ảnh được vẽ bằng vector thì có thể tha hồ phóng to mà

không sợ hiện tượng vỡ hạt như các định dạng hình ảnh thông thường
khác. Và vì ưu điểm của nó, nên nó đã có thể được đưa vào web. Tất
nhiên, SVG đã được hỗ trợ trong HTML5.

Hình 1.2: Sử dụng Adobe Illustrator để thiết kế giao diện SVG
Các ưu điểm của SVG:
Ưu điểm của việc sử dụng SVG thay vì các định dạng hình ảnh khác
như (JPG hay PNG):
• SVG có thể được tạo hoặc chỉnh sửa bằng bất kì trình soạn thảo
text đơn giản nào.
• SVG có thể được tìm kiếm, đánh dấu, nén và dùng script.
12

•
•
•
•

SVG có khả năng mở rộng.
SVG có thể in được với mọi chất lượng và mọi độ phân giải.
SVG có thể phóng to nhưng không vỡ ảnh.
SVG hầu như được hỗ trợ trên tất cả các trình duyệt như Firefox,
Chrome, Internet Explorer, Safari….
• Các hình ảnh SVG không bị giảm chất lượng khi chúng bị phóng
to hay thay đổi kích thước.
• SVG có dung lượng nhỏ hơn các file ảnh định dạng JPG và GIF.
• Văn bản bên trong hình ảnh SVG có thể được tương tác bằng
chuột hoặc có thể tìm kếm trên các công cụ tìm kiếm.
-

Một số điều nổi bật trong HTML5-SVG:
• HTML5 cho phép nhúng SVG trực tiếp với cặp thẻ <svg></svg>
như ví dụ:
<svg xmlns=" />...
</svg>

• Tạo hình tròn với SVG trong HTML5:

cx="value" cy="value" r="value" fill="color value"
stroke="color value" stroke-width="value" />

Trong đó:
 cx,cy: khoảng cách từ hình tròn đến lề bên trái của trình
duyệt(cx) và khoảng cách từ hình tròn đến lề dưới của trình
duyệt(cy).
 r: bán kính hình tròn.
 fill: màu của hình. Nếu thuộc tính này không được khai báo,
màu mặc định sẽ là màu đen.
 stroke: màu của đường viền. Nếu thuộc tính này không được
khai báo, mặc định hình sẽ không có đường viền.
 stroke-width: độ dày của đường viền.
• Tạo hình chữ nhật:
width="value"
height="value"
fill="color
stroke="color value" stroke-width="value" />

value"

Trong đó



width,height: chiều rộng và chiều cao của hình.
fill: màu của hình. Nếu thuộc tính này không được khai báo,
màu mặc định sẽ là màu đen.
13




stroke: màu của đường viền. Nếu thuộc tính này không được
khai báo, mặc định hình sẽ không có đường viền.
stroke-width: độ dày của đường viền.

• Tạo đường thẳng
x1="value"
y1="value"
x2="value"
style="stroke:color value;stroke-width:value"/>

y2="value"

Trong đó:
 x1: điểm bắt đầu của đường thẳng trong trục x.

 y1: điểm bắt đầu của đường thẳng trong trục y.
 x2: điểm kết thúc của đường thẳng trong trục x.
 y2: điểm kết thúc của đường thẳng trong trục y.
• Tạo hình ellipse

Trong đó:
 rx: Bán kính chiều ngang.
 ry: Bán kính chiều dọc.
• Tạo hình đa giác

Trong đó:
 points: Chỉ định giá trị x(ngang) và y(dọc) của mỗi điểm. Một
hình đa giác cần ít nhất 3 điểm hoặc nhiều hơn.
• Tạo đường gấp khúc
style="fill:#fff;stroke:#f00;stroke-width:2" />
• Chèn văn bản
<text x="0" y="15" fill="#f00" >Some text</text>
Trong đó:
 x, y: Là giá trị tọa độ bắt đầu viết text.
Kết luận: HTML5-SVG là một bức tranh phức tạp có thể tạo ra được
bằng cách sắp xếp thật tỉ mỉ từng thành phần đơn giản, độc lập và được
định nghĩa sẵn bằng các mã và thẻ. Hoặc đơn giản hơn, chúng ta có thể
sử dụng bộ công cụ của Adobe Illustartor để thỏa sức sáng tạo và chỉnh
14

sửa nội dung của website, sau đó suất ra định dạng SVG rồi nhúng trực

tiếp vào trang web là chúng ta có thể sử dụng dễ dàng và trực quan.
1.3: Giới thiệu CSS3.
CSS viết tắt của từ Cascading Style Sheets, ý nghĩa nó là gì chúng ta
không cần quan tâm để làm gì mà chỉ cần biết CSS là một file có phần
mở rộng là .css, nhiệm vụ của nó là tách riêng phần định dạng (style) ra
khỏi nội dung trang HTML.
Khi sử dụng css chúng ta sẽ dễ dàng quản lý nội dung trang HTML,
dễ điều khiển phần định dạng, và đặc biệt là sẽ tốn ít thời gian khi code
hay chỉnh sửa, giả sử khi chúng ta có có ~100 file HTML có tiêu đề như
nhau, các tiêu đề này được định dạng trong từng trang HTML, khi chúng
ta muốn chỉnh sửa các tiêu đề này, thì chúng ta sẽ phải mở và chỉnh
từng trang trong ~100 file, việc này mất rất nhiều thời gian cộng với sự
nhàm chán, còn nếu ~100 file này được kết hợp với 1 file CSS thì việc
định dạng tiêu đề trong ~100 file này chỉ mất vài phút. Điều đó đồng
nghĩa với việc chúng ta tiết kiệm được công sức và chi phí để tạo ra một
trang web.
1.3.1: Cấu trúc cơ bản của một dòng lệnh Css như sau:
Selector{
Properties: value;
}
Trong đó:
• Selector: là thành phần nhận biết thẻ HTML để định dạng. Có 03
cách để định nghĩa Selector: Basic Selector, id và Class.
 Basic Selector: sử dụng chính thẻ của HTML để mô tả trong
CSS.
h1{
}

color: navy;

Trong ví dụ trên là định nghĩa cho các thẻ

trong HTML.
Điều đó có nghĩa là tất cả các thẻ

trong tài liệu HTML sẽ
được chuyển sang màu xanh đậm (nany).
 Id: được sử dụng để đặt tên cho một định dạng cụ thể nào đó
sẽ được dùng trong html. Thông thường những thành phần
định dạng id này được dùng cho một đối tượng hoặc một nhóm
đối tượng cụ thể trong trang HTML.
Định nghĩa id trong CSS:
#main{
padding: 0;

15

}

position: relative;
margin: 0 auto;
width: 100%;

Sử dụng id trong HTML:
<div id = main>
<label for="username">User Name:</label>
<input type= "textbox" name= "username" value= "">
</input>
</div>

 Class: được định nghĩa cho những khối định dạng chung được
sử dụng nhiều lần ở nhiều nơi.
Định nghĩa class trong CSS:

.main_color{
color:blue;
}

Sử dụng class trong HTML:
<div id = copyright>

Nam

</div>

Copyright

by

Nguyen

Hai

• Properties: là các thuộc tính của thẻ HTML.
• Value: là giá trị của thuộc tính, quyết định nó sẽ được thể hiện như
thế nào.
Ví dụ:
h1{

color:navy;

}
.main_color{
color:blue;
}

#main{
padding: 0;
position: relative;
margin: 0 auto;
width: 100%;
}

1.3.2: Cách sử dụng CSS để định dạng cho trang Web
Ở trên chúng ta đã tìm hiểu cơ bản về cách viết CSS, bây giờ chúng
ta sẽ tìm hiểu cách sử dụng chúng để định nghĩa vào trang HTML. Có 03
cách sử dụng CSS vào trang HTML.
 Viết trực tiếp vào thẻ HTML
<div id = copyright>

16

Copyright by Nguyen Hai Nam

</div>

Cách này thường được sử dụng khi chúng ta cần định nghĩa cho một
vài thẻ riêng lẻ trong trang HTML.
 Định nghĩa Style cùng với trang HTML
Viết trực tiếp đoạn CSS vào trang HTML tại phần thẻ <head></head>
sau đó ở bên dưới chúng ta sử dụng như bình thường.
Cách này được sử dụng khi bạn xây dựng Style cho từng trang riêng
lẻ:
<head>
<style>
h1{

color: navy;
}
#main{
width:300px;
padding: 1em;
}
#copyright {
font-size:75%;
text-align: right;
}
.main_color{
color:blue;
}
</style>
</head>
<bodỵ>

Login form

</div>

17

</body>

 Viết Style ra một trang riêng.
Theo cách này bạn viết style ra một trang riêng và lưu dưới file .css.
Ví dụ viết đoạn css sau và lưu dưới tên file login.css.
h1{
color: navy;
}
#main{
width:300px;
padding: 1em;
}
#copyright {
font-size:75%;
text-align: right;
}
.main_color{
color:blue;
}

Sau đó chúng ta khai báo sử dụng Css trong phần head của file html
như sau:
<head>
<link rel="stylesheet" href="login.css">
</head>
<bodỵ>

Login form

</div>
</body>

Như vậy, ta đã biết cách cơ bản để viết và sử dụng css như thế nào
đối với tập tin html sao cho việc định dạng website dễ dàng, thuận tiện
và nhanh chóng nhất.

18

1.3.3 : Những điểm mới trong Css3
Css3 là bản nâng cấp đáng kể của css.
Css3 là tiêu chuẩn mới nhất cho css. Do đó, trình duyệt của chúng ta
cũng phải là mới nhất để có thể hỗ trợ được css3.
Css3 bổ sung rất nhiều thành phần mới giúp người lập trình web
giảm thiểu được rất nhiều tài nguyên từ thành phần bổ sung bên ngoài,
đặc biệt css3 rất có lợi cho website làm việc hiệu quả mà ít tốn dung
lượng tài nguyên, thời gian tải trang. Nó bao gồm:
- CSS3 Border
- CSS3 Backgrounds
- CSS3 Gradients
- CSS3 Text Effects
- CSS3 Fonts
- CSS3 2D Transforms
- CSS3 3D Transforms
- CSS3 Transitions
- CSS3 Animations
- CSS3 Multiple Columns

- CSS3 User Interface
Trong phạm vi đề tài không nghiên cứu quá sâu về css3, nên việc tìm
hiểu css3 chỉ dừng lại ở đây, đảm bảo đáp ứng đủ nhu cầu sử dụng css
để định dạng đơn giản một website.
1.4: Giới thiệu Jquery
JQuery là một thư viện được xây dựng dựa trên ngôn ngữ Javascript,
do đó bạn có thể sử dụng tất cả các phương thức, thuộc tính cũng như
các tiện ích mà Javascript hỗ trợ (string, number, array, object,
function…). JQuery được tích hợp nhiều module khác nhau từ module
hiệu ứng cho đến module truy vấn selector. JQuery được sử dụng đến
99% trên tổng số website trên thế giới.
Có một câu slogan của JQuery được gắn ở bất kỳ đâu là “write less,
do more” , hiểu đơn giản chính là viết mã ít mà hiệu quả đạt được lại tối
đa. Điều này đúng so với JQuery cũng như các thư viện khác của
javascirpt. Chính vì lẽ đó mà các JQuery selector được xây dựng theo
hướng đơn giản và dễ dùng.

19

Do các chức năng của website chủ yếu được viết bằng JQuery nên
chúng ta tập chung nghiên cứu và tìm hiểu rõ về JQuery để hiểu cách
xây dựng và vận hành website.
1.4.1: Các đối tượng cơ bản của Jquery.
 Đối tượng String.
Một chuỗi trong JQuery là một đối tượng không đổi chứa 0, 1 hoặc
nhiều ký tự. Sau đây là một ví dụ hợp lệ về một String trong JQuery:
"This is JQuery String"
'This is JQuery String'
'This is "really" a JQuery String'

"This is 'really' a JQuery String"
 Đối tượng Number.
Đối tượng Number trong JQuery là định dạng độ chính xác kép (64
bit) theo chuẩn IEEE 754. Chúng là không đổi, như đối tượng String.
Sau đây là ví dụ hợp lệ về một số trong JQuery:
5350
120.27
 Đối tượng Boolean.
Một boolean trong JQuery có thể nhận hoặc true hoặc false. Nếu một
số là 0, thì mặc định của nó là false. Nếu một chuỗi là trống, thì mặc định
là false.
Sau đây là các ví dụ hợp lệ về đối tượng boolean trong JQuery và giá
trị trả về của nó.
true

// true

false

// false

0

// false

1

// true

""

// false

"hello" // true

 Đối tượng Object.
Jquery hỗ trợ tốt khái niệm Object. Chúng ta có thể tạo một object
như sau:
var emp = {
name: "Zara",
age: 10

20

};

Và chúng ta có thể trực tiếp truy vấn như sau:
// Getting object properties
emp.name

// ==> Zara

emp.age

// ==> 10

 Đối tượng Array.
Chúng ta có thể định nghĩa các mảng như sau:
var x = [];

Date.
Bảng dưới liệt kê các hàm JQuery quan trọng:
21

Bảng 1.1: Các hàm cơ bản trong Jquery
STT Phương thức & Miêu tả
1

charAt()
Trả về ký tự tại chỉ mục (index) đã cho.

2

concat()
Kết nối hai chuỗi văn bản và trả về một chuỗi mới.

3

forEach()
Gọi một hàm cho mỗi phần tử của một mảng.

4

indexOf()
Trả về chỉ mục về sự xuất hiện đầu tiên bên trong việc gọi đối
tượng String với giá trị đã cho, hoặc -1 nếu không tìm thấy.

5

length()
Trả về độ dài của chuỗi.

6

pop()
Gỡ bỏ phần tử cuối của một mảng và trả về phần tử đó.

7

push()
Thêm một hoặc nhiều phần tử tới phần cuối của một mảng và trả
về độ dài mới của mảng đó.

8

reverse()
Đảo ngược thứ tự các phần tử trong một mảng – phần tử đầu tiên
thành cuối cùng và cuối cùng thành đầu tiên.

9

sort()
Sắp xếp phân loại các phần tử của một mảng.

10

substr()
Trả về các ký tự trong một mảng bắt đầu từ vị trí đã cho từ số các
ký tự đã xác định.

11

toLowerCase()
Trả về giá trị chuỗi đang gọi được biến đổi thành kiểu chữ thường.

12

toString()
Trả về sự biểu diễn chuỗi của giá trị số.

13

toUpperCase()
22

Trả về giá trị chuỗi đang gọi được biến đổi thành chữ hoa.
Như vậy, chúng ta đã nắm được các thành phần cơ bản thường
xuyên được sử dụng trong jQuery.
1.4.2: Các JQuery Selector đơn giản.
JQuery selector là một thành phần quan trọng trong thư viện jquery.
Selector có thể được sử dụng để chọn một hoặc nhiều thành phần html.
Thành phần HTML nào được chọn thì chúng ta có thể thực hiện các thao
tác jquery lên nó. JQuery selector lựa chọn các thành phần html dựa trên
tên, id, class, attribute,…của chúng. Tất cả các JQuery selector bắt đầu với
ký hiệu $().
 Sử dụng JQuery Selector theo tên thẻ HTML:
$(“p”): Chọn tất cả các thẻ p.
$(“a”): Chọn tất cả các thẻ a.

Ví dụ:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>

Đoạn code trên dùng để xử lý khi nhấn nút button thì tất cả các thẻ p bị ẩn đi.
 Sử dụng JQuery Selector theo ID:
$(“#test”): Chọn thẻ có id = test
$(“#myid”): Chọn thẻ có id = myid
Ví dụ:
<script>
$(document).ready(function(){
$("button").click(function(){

23

$("#myid").hide();
});
});
</script>

Đoạn code trên để thực hiện khi nhấn nút button thì thẻ nào có id = myid
sẽ bị ẩn đi.
 Sử dụng JQuery Selector theo Class:
$(“.test”): Chọn thẻ có class = test

$(“.myclass”): Chọn thẻ có class = myclass
Ví dụ:
<script>
$(document).ready(function(){
$("button").click(function(){
$(".myclass").hide();
});
});
</script>

Đoạn code trên để thực hiện khi nhấn nút button thì thẻ có class =
myclass sẽ bị ẩn đi.
 Các lựa chọn khác:
$(“*”): Chọn tất cả
$(this): Chọn thẻ HTML hiện tại
$(“p#myid”): Chọn tất cả thẻ p có id = myid
$(“p.myclass”): Chọn tất cả thẻ p có class = myclass
$(“[href]”): Chọn tất cả các thẻ có thuộc tính href
$(“ul li:first”): Chọn thẻ li đầu tiên trong thẻ ul
$(“ul li:first-child”): Chọn thẻ li đầu tiên của mỗi thẻ ul
$(“ul li:last-child”): Chọn thẻ li cuối cùng của mỗi thẻ ul
$(“ul li:nth-child(2) “): Chọn thẻ li thứ 2 của mỗi thẻ ul
$(“:button”): Chọn tất cả thẻ button và thẻ input có type =
button
$(“tr:even”): Chọn tất cả thẻ tr ở vị trí chẵn
$(“tr:odd”): Chọn tất cả thẻ tr ở vị trí lẻ.
24

1.4.3: Các sự kiện trong jQuery.

Tất cả các hành động của người truy cập mà trang web có thể trả lời
được gọi là sự kiện. Thông thường chúng ta sử dụng các sự kiện cơ bản
như: Click, touch, drag-drop, snap…
 Sự kiện Click
Là sự kiện kích chuột lên một thành phần của trang web bao gồm 4
hoạt động nhỏ hơn:
• Click:

<script>
$("p").click(function(){
$(this).hide();
});
</script>

Khi click vào thẻ

thì thẻ đó ẩn đi.
• Double Click

<script>
$("p").dblclick(function(){
$(this).hide();
});
</script>

Khi click đúp chuột vào thẻ

thì thẻ đó mới ẩn đi.
• Hover

<script>
$("#demo").hover(function(){
alert("Bạn đã hover lên phần tử có ID là demo");
});

</script>

Khi đưa chuột đi qua vùng đối tượng có id = demo thì xuất hiện hộp
thoại thông báo trên.
• Focus
Sự kiện focus thường sử dụng với các thành phần trong form
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
});
</script>

Khi focus chuột vào thẻ input thì thẻ input sẽ đổi màu.
Ngoài những sự kiện trên thì còn rất nhiều sự kiện click khác trong
jquery mà chúng ta sẽ gặp trong quá trình làm việc như mouse up,
25