Tải bản đầy đủ (.docx) (32 trang)

TÌM HIỂU HTML 5 VÀ ỨNG DỤNG XÂY DỰNG WEBSITE DEMO NGHE NHẠC TRỰC TUYẾN

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.39 MB, 32 trang )

ĐẠI HỌC THÁI NGUYÊN
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &
TRUYỀN THÔNG

BÁO CÁO THỰC TẬP CƠ SỞ

ĐỀ TÀI
TÌM HIỂU HTML 5 VÀ ỨNG DỤNG XÂY DỰNG
WEBSITE DEMO NGHE NHẠC TRỰC TUYẾN

Giáo viên hướng dẫn: Tiến Sĩ.Bùi Ngọc Tuấn
Sinh viên thực hiện: Lê Xuân Thường
Lớp: CNTT_12C

THÁI NGUYÊN, NĂM 2016

1


MỤC LỤC

2


DANH MỤC HÌNH ẢNH
Hình 1.1: Lịch sử phát triển của công nghệ web………………………..11
Hình 1.2: Định dạng âm thanh thẻ audio………………………………..21
Hình 1.3: Giao diện trang chủ index…………………………………….25
Hình 1.4: Giao diện tab nhạc trữ tình……………………………………25
Hình 1.5: Giao diện tab nhạc trẻ…………………………………………26
Hình 1.6: Giao diện bài hát vụn vỡ………………………………………26


Hình 1.7: Giao diện bài hát nắm lấy tay anh………………………….....27
Hình 1.8: Giao diện bài hát Giọt nắng bên thềm…………………………27
Hình 1.9: Giao diện bài hát Nơi ấy con tìm về…………………………..28
Hình 1.10: Giao diện bài hát Nơi nào có em……………………………..28

3


LỜI NÓI ĐẦU
Hiện nay, công nghệ dành cho thiết bị di động ngày càng phát triển.
Nếu như trước đây, bạn phải dùng chiếc máy tính để bàn (MTĐB) cồng kềnh
cùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máy
tính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều trình
duyệt khác (Firefox, Opera…) bạn có thể dễ dàng lướt “net” ở bất kỳ đâu.
Tuy nhiên với các thiết bị, trình duyệt web khác nhau, nội dung hiển thị trên
màn hình sẽ khác nhau. Chẳng hạn, trên máy tính bạn xem trang web này rất
tốt, nhưng trên ĐTTM thì giao diện và cấu trúc trang bị xáo trộn. Hay bạn có
thể xem phim rất tốt với IE nhưng với Firefox thì không.
Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên
bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thông tin
trên internet.
HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có
những tính năng ưu việt hơn. Không những vậy, HTML5 còn đem đến cho
người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài
nguyên phong phú hơn.
HTML5 cũng làm cho các ứng dụng web và các trang web hấp dẫn
hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng
ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ
đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử
dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ

offline. Tất cả những điều này làm một trang Web trở nên dễ nhìn hơn, bắt
mắt hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng
tượng trong đầu hơn.
Đó là lý do em lựa chọn đề tài “Tìm hiểu về HTML5 và xây dựng
website demo nghe nhạc trực tuyến”

4


CHƯƠNG I. CƠ SỞ LÝ THUYẾT
1.1. Tổng quan về website
Website là một tập hợp các trang web (web pages), còn gọi là trang
web, trang mạng) bao gồm văn bản, hình ảnh, video, flash v.v…thường chỉ
nằm

trong

một

tên

miền

(domain

name) hoặc tên

miền

phụ


(subdomain).Trang web được lưu trữ ( web hosting) trên máy chủ web (web
server)



thể

truy

cập

thông

qua

Internet trên World

Wide

web của Internet. Một trang web là tập tin HTML hoặc XHTML có thể truy
nhập dùng giao thức HTTP. Website có thể được xây dựng từ các tệp tin
HTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ
(website động). Website có thể được xây dựng bằng nhiều ngôn ngữ lập
trình khác nhau (PHP,.NET, Java, Ruby on Rails...)
Nhờ có Web nên dù không phải là chuyên gia mọi người có thể sử
dụng Internet một cách dễ dàng. Phần mềm để xem Web gọi là trình duyệt
(Browser). Một số trình duyệt phổ biến hiện nay là Internet Explorer của
Microsoft tiếp đó là Navigator của Netcape.
1.1.1. Lịch sử hình thành và phát triển của world wide web

Vào 03/1989, Tim Berners-Lee công bố sự ra đời của mạng toàn cầu
World Wide Web (WWW) dựa trên công nghệ hypertext. Dự án siêu văn
bản toàn cầu cho phép các nhà vật lý có thể cùng làm việc với nhau trên
mạng. Năm 1991, phòng thí nghiệm vật lý thực nghiệm châu Âu (CERN) tại
Thụy Sĩ công bố trước toàn thế giới về sự ra đời của WWW. Với sự giúp đỡ
của ngôn ngữ siêu văn bản (Hypertext Markup Language - HTML), một
không gian ảo chứa thông tin, tài liệu, âm thanh, hình ảnh video xuất hiện.
Trên internet, kết nối là những sợi cáp nối các máy tính với nhau; còn trên
web, kết nối là những đường liên kết siêu văn bản. Internet tồn tại được là
nhờ những chương trình liên kết giữa các máy tính. Mạng toàn cầu - WWW
không thể tồn tại nếu không có các mạng cơ sở (mạng của các đường truyền

5


và các chương trình liên kết), nhưng mạng toàn cầu cũng làm cho mạng cơ
sở trở nên hữu ích hơn, bởi điều con người thật sự quan tâm là thông tin chứ
không phải là máy tính và cáp truyền dữ liệu.
Năm 1991, dự án của Tim Berners trở thành sự thật. Hệ thống chia sẻ
thông tin, giờ đây có tên phổ biến là World Wide Web, đã được đưa vào sử
dụng trong cộng đồng Vật lý thông qua máy vi tính của CERN, được các nhà
vật lý gọi là Máy Chủ Web (Web Server-thực chất vào lúc đó là Text
Server).
Tháng giêng năm 1992, World Wide Web được phổ biến rộng rãi đến
công chúng qua mạng lưới Internet- mạng máy tính lớn nhất thế giới. Và
cuối năm 1992, thế giới có khỏang 50 máy chủ Web họat động. Hầu hết các
máy được đặt ở các trường Đại Học
Vào năm 1995, World Wide Web bắt đầu được thương mại hóa. Các tập
đòan lớn như AT&T, Digital Equipment Corporation, IBM, MCI, Novell và
Sun Microsystems thiết lập các máy chủ Web để cung cấp thông tin và thông

tin thị trường cho bất cứ ai có máy vi tính kết nối Internet và trình duyệt
Web.
Việt Nam chính thức kết nối internet tháng 12/1997.
1.1.2.

Phân biệt Web tĩnh, web động

Trang Web tĩnh
Web tĩnh là website sử dụng hoàn toàn ngôn ngữ HTML (có đuôi html
hoặc htm), sau khi tải trang HTML từ máy chủ xuống, trình duyệt (IE,
Firefox, Opera,...) sẽ biên dịch mã và hiển thị nội dung trang web, người
dùng hầu như không thể tương tác với trang web.
Ví dụ: Người dùng không thể gửi bài, đặt hàng, người quản lý website
không thể thêm bớt, sửa xóa thông tin về sản phẩm...
Ưu điểm của website tĩnh:
Chạy nhanh.
Ít tốn tài nguyên máy chủ.
Gần như không thể hack.

6


-

Chi phí tạo thấp.
Nhược điểm của website tĩnh
Website tĩnh tương tự như 1 tờ báo giấy, không có sự tương tác giữa

người truy cập và website, khách không thể tự thay đổi nội dung website,
do đó chi phí sửa nội dung sẽ rất cao.

Trang web động
Web động là website có sự tương tác 2 chiều giữa người truy cập, người
quản lý và website.
Ưu điểm của website động:
-

-

Khả năng tương tác với người dùng,
Ngôn ngữ lập trình cấp cao cho phép tạo ra các website với nhiều mục
đích sử dụng.
Thỏa mãn nhu cầu truy cập của khách hàng.
Nhược điểm của website động:
Dữ liệu lớn, cấu trúc phức tạp, chi phí thiết kế cao.

1.2. Ngôn ngữ HTML
1.2.1. Định nghĩa HTML
HTML được biết đến là một loại ngôn ngữ dùng để mô tả hiển thị các trang web:
-

-

Hyper Text Markup Language chính là HTML (Viết tắt)
Nhiều người nhầm tưởng HTML là ngôn ngữ lập trình nhưng sự thực
không phải như vậy, nó là một ngôn ngữ đánh dấu
Một ngôn ngữ đánh dấu là một bộ các thẻ đánh dấu
Để có thể miêu tả trang web ta cần đánh dấu các thẻ HTML
Lịch sử hình thành và quá trình phát triển của HTML:
Ai phát minh ra HTML và mục đích ban đầu của ngôn ngữ này là gì?
Chúng ta đều biết rằng Thụy Sĩ, hay chính xác hơn , Geneva là quê hương

của CERN - Viện Thí Nghiệm Vật Lí Phân Tử Châu Âu (Conseil Européen
pour la Recherche Nucléaire, theo tiếng Pháp) và cũng chính tại đây, “Thí
Nghiệm Thiên Nhiên Kỉ” đã được tiến hành. Đây là một sự kiện gây chấn động,
thu hút nhiều mối quan tâm của dư luận. Rất nhiều người trong số họ coi thí
nghiệm và nơi diễn ra thí nghiệm này như là khởi đầu của sự Khải Huyền(trong
Kinh Thánh). Dù gì đi nữa thì tôi cũng không muốn có thêm bất cứ bình luận

7


nào về câu chuyện này, điều đáng bàn ở đây đó là : Geneva , Thụy Sĩ là quê
hương của HTML.
Tim Berners-Lee là cha đẻ của HTML (Wikipedia viết rằng: Ngôn ngữ
siêu văn bản là “văn bản được hiển thị trên máy tính hoặc các thiết bị điện tử
khác . Ngôn ngữ này có dính dáng tới những ngôn ngữ khác mà người đọc có
thể truy cập ngay lập tức, thường là bằng một cú nhấp chuột hay là bằng một tổ
hợp phím tắt ”). Năm 1989, ông nghiên cứu ra ngôn ngữ HTML như là một
giao thức truyền đạt thông tin giữa giới khoa học với nhau và thành công của nó
vẫn còn cho đến ngày nay. Tim đầu tiên tạo ra 20 thẻ trong HTML, lấy ý tưởng
từ ngôn ngữ SGML, nhưng điều kì diệu đáng kinh ngạc là ở chỗ 13 trong số 20
thẻ đó vẫn còn được hiển thị trong HTML4.
-

HTML1:
HTML1 không cho phép truyền đạt cấu trúc trang phức tạp, nhưng vừa đủ

để cho phép tạo ra một trang web đơn giản. Vạn sự khởi đầu nan. Phiên bản đầu
tiên được tung ra vào cuối năm 1990 và gần như một năm sau, ngôn ngữ này
mới thực sự được ứng dụng. Năm 1993 các chuẩn HTML trở thành nền tảng
của Mosaic- Trình duyệt đầu tiên của Internet.

-

HTML2:
Nhiều công ty lớn đã đánh giá không đúng sức mạnh của ngôn ngữ siêu văn

bản, nhưng cuối cùng thì các chuẩn HTML cũng được phổ biến rộng rãi. Bởi vì
không có một tổ chức nào đứng ra hỗ trợ cho sự phát triển ngôn ngữ HTML,
mọi thứ bị ngừng trệ. Vào tháng 7 năm 1994, HTML 2 được phát hành. HTML
2 là phiên bản cải tiến của HTML. Phiên bản lần này được tạo ra bởi sự nỗ lực
rất lớn của những người yêu thích HTML trên khắp thế giới. Những người này
đã đảm nhận một nỗ lực khổng lồ khi chú ý đến tất cả đóng góp từ khắp nơi
trên thế giới cho phiên bản mới này. Trước tình hình này, cũng trong cùng năm
1994, Tập Đoàn Tài Chính World Wide Web được thành lập với người đứng
đầu là Tim Berners-Lee. Năm 1995, thẻ mới là thẻ “bgcolor”(màu nền) hay thẻ
“font face”(font chữ?) được đưa vào ứng dụng; Tôi đưa ra những ví dụ về các

8


thẻ này nhằm nhấn mạnh trình độ đã đạt tới của chuẩn HTML vào thời điểm
hiện tại…chúng ta có thể nói rằng sự khác biệt giữa phiên bản đầu tiên và phiên
bản năm 1995 là rất lớn.
HTML 3

-

Internet làm cho ngôn ngữ HTML phát triển và chính nó cũng ứng dụng
những phát triển của HTML. W3C chấp nhận những phiên bản cải tiến của
HTML với các thẻ mới và các chức năng mới. Dave Ragget đã mua về một
phiên bản thú vị với rất nhiều thẻ HTML hấp dẫn và phiên bản này đã được cải

tiến rất hay. Nhưng vì nó làm chậm đường truyền của các trình duyệt nên phiên
bản này đã bị bỏ đi. Phiên bản HTML 3.2 là phiên bản mạnh nhất của sê-ri này
và trước khi được tung ra, nó được duyệt bởi W3C và bởi các nhà cung cấp
trình duyệt chóp bu là Netscape và Microsoft.
-

HTML4:
Người ta dành cả năm 1997 để phát triển phiên bản HTML4, một bước tiến

triển quan trọng trong những phiên bản cũ. HTML4 có những công cụ có giá trị
mang lại thêm nhiều đất sáng tạo cho dân thiết kế web: CSS. Ban đầu CSS cũng
không được coi là quan trọng lắm, nhưng đến nay, người ta đánh giá nó cũng
quan trọng không kém gì bản thân HTML. Một sự kiện quan trọng nữa là sự
phát triển của các trình duyệt: Microsoft ứng dụng hầu như tất cả các thẻ và
trình duyệt Internet Explorer được người sử dụng yêu thích hơn ,làm lu mờ
Netscape. Vào tháng 4 năm 1998 HTML4 đã được chứng nhận bởi W3C và
tương lai trở nên sáng lạn hơn. HTML có một “đối thủ” gọi là
XHTML(Extensible HyperText Markup Language- tạm dịch: ngôn ngữ đánh
dấu siêu văn bản mở rộng) và từ năm 1998 đến nay, cuộc chiến vẫn diễn ra ác
liệt , nhưng cuối cùng có lợi nhất vẫn là người sử dụng Internet.
-

HTML5

Vào tháng 1 năm 2008, W3C tung ra bản nháp của HTML5 và thế thượng
phong có vẻ nghiêng về HTML(so với XHTML). Phần lớn chúng ta đều biết

9



khả năng của bản HTML4.01- phiên bản gần đây nhất, nhưng những tính năng
mới của phiên bản thứ 5 này là gì?
Cá nhân tôi cho rằng phiên bản lần này sẽ mang lại nhiều cải tiến và chúng ta
nên chuẩn bị tinh thần chờ đợi một vài năm để đưa nó vào hoạt động, tức là cho
đến lúc các nhà thiết kế Web làm chủ được các chức năng mới của phiên bản
lần này. Một trong những thẻ làm người sử dụng trở nên mê mệt sẽ là thẻ có
chức năng cho phép xem videos mà không cần phải cài đặt Flash hay bất cứ
plug-in phụ nào. Các cuộc tranh luận sẽ vẫn còn tiếp tục nhưng chắc chắn sẽ là
về các chức năng mới của phiên bản lần này.
Những thẻ thú vị là những thẻ cho phép bạn dễ dàng quản lí dữ liệu hơn như
là:
-

Thẻ article

-

Aside

-

Nav

-

Header

-

Footer


Tự tên của các thẻ này đã nói lên chức năng của chúng, những thẻ HTML
mới này sẽ là vũ khí cho các chuyên viên thiết kế web tương lai. Số lượng thẻ
trong phiên bản lần này có thể sẽ nhiều hơn phiên bản trước ngay cả khi một số
thẻ ở phiên bản trước đã được bỏ đi ở bản HTML5 như các thẻ: basefont, big,
font, s, strike, small, b, I,…
Bản HTML5 có nhiều thẻ nhưng cũng có nhiều vấn đề và rất khó để quả
quyết một cách chắc chắn bởi vì mọi việc còn có thể khác hẳn vào ngày mai.
Một thực tế chắc chắn đó là: bởi vì phiên bản lần này được nghiên cứu bởi các
tập đoàn và các chuyên viên thiết kế, nên kết quả chỉ có thể là bước nhảy vọt
đầy ấn tượng trong dòng chảy của sự phát triển Web, Internet và thiết kế. Trong
chuẩn mới thực sự hoàn chỉnh của HTML, một nhân tố vô cùng quan trọng sẽ
đóng góp vào vai trò ảnh hưởng của HTML 5, đó là: CSS3.

10


Tin tốt là những phiên bản mới của CSS đi kèm với HTML 5 sẽ cho phép các
nhà thiết kế có thể thỏa sức sáng tạo. Hi vọng rằng không lâu nữa HTML 5 sẽ
thực sự đi vào sử dụng và chúng ta sẽ được nhìn thấy các Websites thiết kế
bằng HTML 5 trong thời gian gần đây.

Hình 1.1: Lịch sử phát triển của công nghệ web
Thành phần của HTML
Các dạng thẻ HTML:
-

Thẻ HTML dùng để viết lên những thành tố HTML
Thẻ HTML được bao quanh bởi hai dấu lớn hơn < và > nhỏ hơn.
Những thẻ HTML thường có một cặp giống như <b> và </b>

Thẻ thứ nhất là thẻ mở đầu và thẻ thứ hai là thẻ kết thúc.
Dòng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung.
Những thẻ HTML không phân biệt in hoa và viết thường.
Ví dụ: dạng <b> và <B> đều như nhau

Thành phần HTML
-

Thành phần của HTML bắt đầu với thẻ: <b>
Nội dung của nó là: web design resources
Thành phần của HTML kết thúc với thẻ: </b>
Mục đích của thẻ <b> là để xác định một thành phần của HTML phải

-

được thể hiện dưới dạng in đậm
Phần này bắt đầu bằng thẻ bắt đầu <body> và kết thúc bằng thẻ kết thúc
</body>. Mục đích của thẻ <body> là xác định thành phần của HTML
bao gồm nội dung của tài liệu.

11


Bố cục chuẩn của một trang tài liệu HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo Website</title>
</head>
<body>

</body>
</html>
-

<!DOCTYPE>: phần khai báo chuẩn của html hay xhtml
<head></head>: Phần khai báo ban đầu, khai báo về meta, title, css,
javascript.. Đây là nơi người lập trình đưa ra thông tin ban đầu về trang web,
nó có thể là tiêu đề trang web, mô tả trang web, về tác giả trang web, về thời
gian refresh trang, về bộ gõ tiếng việt của trang… những nội dung trên sẽ

-

không được hiển thị trên trình duyệt.
<body></body> : phần chưa nội dung của trang web, nơi hiển thị nội dung.

-

Phần thân của trang web có thể đc bố cục thành 3 phần cơ bản đó là:
Header: là phần đầu của nội dung trang web, nó thường được dùng để đặt

-

logo web, tên website..
Body_main: là phần thân nội dung trang web, nó là phần đặt menu chính

-

menu phụ của trang web, các bài viết của trang web, các liên kết khác…
Footer: Là phần chân của nội dung trang web, thường được dùng để ghi bản
quyền trang web, tác giả trang web, thông tin liên hệ.


Một số điều cần lưu ý khi soạn thảo siêu văn bản bằng HTML:
-

Nhiều dấu cách liền sau cũng chỉ có tác dụng như một dấu cách. Phải sử dụng

-

thẻ để thể hiện nhiều dấu giãn cách liền nhau.
Gõ enter để xuống dòng xem như một dấu cách, để xuống hàng thì phải sử dụng
thẻ tương ứng

12


-

Có thể viết tên thẻ không phân biệt chữ in thường và in hoa.
Ví dụ: </BR> và
là như nhau.
1.2.2. Giới thiệu về HTML5
HTML5 là một phiên bản mới của HTML/ XHTML trong đó nó đặc biệt
tập trung vào những mong muốn và nhu cầu của các nhà phát triển ứng dụng
web. Nó cho phép các nhà phát triển thực hiện nhiều tính năng mới trong những
điều mà họ tạo ra, ví dụ có rất nhiều chức năng kéo và thả mới, các yếu tố kết
cấu mới cũng được cải thiện nhằm hỗ trợ cho âm thanh và video.
HTML5 là sự phát triển mạnh mẽ đột biến của HTML. Đây là hình thức
định dạng cốt lõi của hầu hết các website trên internet cho đến năm 2004, ngôn
ngữ HTML được phát triển bởi World Wide Web Consortium. Rất nhiều nhà
phát triển đã thất vọng với những cải tiến trong ngôn ngữ HTML mà W3C đã đề
xuất, nhiều ý kiến cho thấy họ đã mất liên kết với các nhu cầu web hiện đại và

phát triển ứng dụng. Một nhóm mới có tên WHATWG (Web Hypertext
Application Technology Working Group) nắm quyền phát triển ngôn ngữ này và
đã đặt tên nó là các chi tiết kĩ thuật của HTML5.
HTML5 tạo ra sự trải nghiệm người dùng hấp dẫn hơn. Các trang được
thiết kế bằng HTML5 có thể cung cấp một trải nghiệm giống như các ứng dụng
của máy tính để bàn. HTML5 cũng cung cấp phát triển nhiều nền tảng nâng cao
bằng cách kết hợp khả năng của các API với sự có mặt ở khắp mọi nơi của trình
duyệt. Khi sử dụng HTML5, các nhà phát triển có thể cung cấp một trải nghiệm
ứng dụng hiện đại, trôi chảy qua các nền tảng. Khi nói tới HTML5, nghĩa là
đang sử dụng phép tốc ký cho sự đổi mới liên tục. Các thẻ mới, các phương thức
mới và một framework phát triển chung dựa trên các sự tác động lẫn nhau của
HTML5 và hai đối tác của nó, CSS3 và JavaScript. Đây là cốt lõi của hiện tượng
xử lý ứng dụng lấy máy khách làm trung tâm.
Ngoài việc triển khai các kỹ thuật và các phương thức của công nghệ
HTML5 cho máy tính để bàn, có thể triển khai thực hiện HTML5 trong nhiều
trình duyệt điện thoại di động web có tính năng phong phú một thị trường đang
phát triển, khi đã chứng kiến sự phổ biển của các hệ điều dành web Apple
iPhone, Google Android và các điện thoại chạy Palm HTML5 cung cấp:
-

Các thẻ mô tả chính xác những gì chúng được thiết kế.
Tăng cường khả năng truyền thông trên mạng.
Cải thiện khả năng lưu trữ chung.
Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền.

- Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cư trú

và máy chủ.
- Truy vấn dữ liệu đã được lưu trữ tốt hơn.
- Cải thiện tốc độ nạp và lưu trang.


13


- Hỗ trợ cho CSS3 để quản lý giao diện

người dùng đồ họa (GUI), có nghĩa là
HTML5 có thể được định hướng nội dung.
- Cải thiện xử lý biểu mẫu trình duyệt.
- Một API cơ sở dữ liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy khách.
.
- Canvas và video, để thêm đồ họa và video mà không cần cài đặt các
plug-in của bên thứ ba.
- Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị của
máy điện thoại thông minh kết hợp với các dịch vụ và các ứng dụng đám mây
di động.
- Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho phép
truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện toán
đám mây.
1.2.3. Các cấu trúc mới trong HMTL5
Đầu tiên, chúng ta nói về cấu trúc mới thay đổi của HTML 5 gồm những tag
mang tính chất đột phá:
-

Tag <section></section> được định nghĩa cho ý nghĩa của nó. Section tag là một
đại diện cho những phần chung của tài liệu hoặc ứng dụng. nó thể hiện một

-

nhóm chuyên đề về nội dung, thông thường thể hiện với các heading

Tag article là tag <article> đại diện cho phần self-contained của toàn bộ tài liệu,
ứng dụng của website. Có thể là một diễn đàn, bài viết, tạp chí, blog, bình luận

-

người dùng, widget hoặc tiện ích khác
Aside tag <aside></aside> là một trong những tag quan trong của html 5 nó
được định nghĩa như một phần nội dung của toàn trang và cũng có thể được xem

-

là tách biệt với nội dung đó. Và nó thương biểu thị như là slidebars
Header tag <header></header> là một trong những phần tử của html5 nó thể
hiện để biểu thị tiêu đề từ h1 --> h6, hoặc những nhóm, tập hợp các biểu tượng

-

logos
Hgroup tag cho biết sự thể hiện sự quan trọng của nó so với các phần tử. Các
phần tử tag có thể sử dụng kèm theo là các header của html từ h1 --> h6 khi

-

chứa nhiều cấp, các header con, các title, hoặc các taglines
Footer tag được biểu thị dưới dạng <footer></footer> là phần tử nằm trong
html5 dùng để chứa nội dung của các footer như là thông tin về công ty, phone,
copyright data, like.

14



- Nav tag <nav></nav> là một phần đại diện của page thể hiện chức năng link
từ một page này đến page khác hoặc đến một phần của page “a section with
navigation links".
1.2.4. Các thẻ mới trong HTML5
Thẻ canvas
-

-

-

Canvas HTML5 là một phần tử vẽ và tạo hình ảnh động vô cùng có ích. Canvas
sử dụng JavaScript để vẽ đồ họa trực tiếp trên trang web. Đây là vùng chữ nhật
mà bạn định nghĩa và điều khiển và nó cho phép dựng hình 2D và hình ảnh
bitmap động, theo bảng kịch bản lệnh.
Canvas HTML5 là lý tưởng để sản xuất tài liệu hình ảnh thú vị nhằm nâng cao
các UI, các bản vẽ, các album ảnh, các biểu đồ, các đồ thị, các hình ảnh động, và
các ứng dụng bản vẽ nhúng. Phần tử Canvas có một số phương thức để vẽ các
đường, hình chữ nhật, hình tròn, và các nhân vật.
Thẻ canvas được dùng để hiển thị đồ họa, việc vẽ đồ họa do javascript thực hiện.
Cú pháp: style=”đường viền”></canvas>
Ví dụ:
style="border:1px
solid #000000;">
</canvas>
- Ưu điểm:
Có thể lưu ảnh dạng .png hoăc .jpg.

Rất thích hợp xây dựng games đồ họa.
Thẻ drag and drop
Là khả năng kéo và thả một đối tượng, nó là một trong những tính năng
mới khá hay của HTML5.
Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn "lấy" một đối
tượng và kéo nó đến một vị trí khác nhau.
-

-

Trong HTML5, kéo và thả là một phần của tiêu chuẩn, và bất kỳ yếu tố
có thể kéo.

Để thực hiện một phần tử kéo, thiết lập các thuộc tính kéo cho đúng:
<img draggable="true">

-

Những gì để kéo: xác định những gì sẽ xảy ra khi các phần tử được kéo.
function drag(ev)
{
15


ev.dataTransfer.setData("Text",ev.target.id);
}
Phương pháp dataTransfer.setData () thiết lập kiểu dữ liệu và các giá trị của dữ
liệu kéo
Các kiểu dữ liệu là "Văn bản" và giá trị là id của các phần tử kéo ("drag1").
-


Nơi để thả: event.preventDefault()

-

Làm Drop: Khi dữ liệu được kéo giảm, một sự kiện xảy ra thả.
Trong ví dụ trên, thuộc tính ondrop gọi một chức năng, thả (sự kiện):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Mã giải thích:
-

Gọi preventDefault () để ngăn chặn xử lý trình duyệt mặc định của dữ liệu

-

(mặc định là mở như liên kết trên thả).
Lấy dữ liệu kéo với phương pháp ("Text") dataTransfer.getData. Phương
pháp này sẽ trả lại bất kỳ dữ liệu đã được thiết lập để cùng loại trong

-

setData () phương pháp
Các dữ liệu kéo là id của phần tử kéo ("drag1")
Thêm các yếu tố lôi kéo vào các yếu tố giảm.


Thẻ video
-

Trước khi HTML5, không có tiêu chuẩn cho hiển thị video / phim trên các

-

trang web.
Trước khi HTML5, video chỉ có thể chơi với một plug-in (như đèn

-

flash). Tuy nhiên, các trình duyệt khác nhau hỗ trợ các plug-in khác nhau.
HTML5 xác định một nguyên tố mới trong đó quy định một cách tiêu chuẩn
để
16


nhúng một đoạn video hoặc phim trên một trang web: các yếu tố <video>.
-

Để hiển thị một đoạn video trong HTML5.

Ví dụ:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Thẻ video xác định một đoạn video, chẳng hạn như một đoạn phim hoặc một

trường video.
Cú pháp: <video src="" controls="controls">Dòng thông báo</video>
Đoạn text nằm bên trong <video> và </video> sẽ hiển thị khi trình
duyệt không hỗ trợ tag <video>
Thường dùng kèm với tag <source> để hiện thị được nhiều nội dung hơn.
Ví dụ:
<video src=”đường dẫn tới file video” controls=”controls”>Trình duyệt đang
dùng không hỗ trợ tag video</video>
Hiển thị nhiều nội dung với tag <source>
<video controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Do trình duyệt hỗ trợ các định dạng file video khác nhau, nên cách dùng trên
có thể chạy video cho nhiều trình duyệt và hệ điều hành khác nhau.
Thuộc tính kiểm soát thêm điều khiển video, như chơi, tạm dừng, và khối lượng.
Nó cũng là một ý tưởng tốt để luôn luôn bao gồm chiều rộng và chiều cao thuộc
tính. Nếu chiều cao và chiều rộng được thiết lập, không gian cần thiết cho video
được dành riêng khi trang web được tải. Tuy nhiên, nếu không có những thuộc
tính, trình duyệt không biết kích thước của video, và không thể bảo lưu không
gian phù hợp với nó. Hiệu quả sẽ được rằng cách bố trí trang sẽ thay đổi trong
quá trình tải (trong khi tải video).
Bạn cũng nên chèn nội dung văn bản giữa các <video> và </ video> cho các
trình duyệt không hỗ trợ các yếu tố <video>.
Các yếu tố <video> cho phép nhiều yếu tố <source>. yếu tố <source> thể
liên kết đến các file video khác nhau. Trình duyệt sẽ sử dụng định dạng được
công nhận đầu tiên.

17



-

HTML5 có các phương thức DOM, tài sản, và các sự kiện cho <video> và các
yếu tố <audio>.

-

Những phương pháp, tài sản, và các sự kiện cho phép bạn thao tác <video> và
các yếu tố <audio> sử dụng JavaScript.

-

Có nhiều phương pháp để chơi, tạm dừng, và tải, ví dụ và có tài sản (như thời
gian và khối lượng). Ngoài ra còn có các sự kiện DOM có thể thông báo cho bạn
khi các yếu tố <video> bắt đầu để chơi, tạm dừng, chấm dứt, vv..

Một số thuộc tính trong thẻ video:
Thuộc tính

Giá trị

Ví dụ

Mô tả

audio

Muted


Audio=”muted”

Xác định trạng
thái mặc định của
âm thanh

Autoplay

Autoplay

Autoplay=”autoplay”

Xác định trạng
thái tự động chạy
của video

Controls

Controls

Controls=”controls”

Hiển thị bộ điều

18


khiển của video
Height


Pixel

Height=”100px”

Xác định chiều
cao của video

Loop

Loop

Loop=”loop”

Xác định video
có được lặp lại
hay không

Poster

URL

Poster=”image/img_video.gif”

Xác định hình
đại diện cho
video

Preload

Preload


Preload=”preload”

Xác định việc tải
video khi tải
trang

Src

URL

Src=”video/video.mp4”

Xác định đường
dẫn của video

Width

Pixel

Width=”100px”

Xác định chiều
rộng của video

19


Thẻ audio
Trước khi HTML5, không có tiêu chuẩn để chơi các file âm thanh trên một trang

web.
- Trước khi HTML5, tập tin âm thanh phải được chơi với một plug-in (như đèn flash). Tuy
nhiên các trình duyệt khác nhau hỗ trợ các plug-in khác nhau.
- HTML5 xác định một nguyên tố mới trong đó quy định một cách tiêu chuẩn để nhúng một
tập tin âm thanh trên một trang web: các yếu tố <audio>.
- Để chơi tập tin âm thanh trong HTML5.
Ví dụ:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
- Thẻ <audio> định nghĩa âm thanh, như nhạc hay trường audio khác.
- Cú pháp: <audio src="đường dẫn tới file audio" controls="controls">
Dòng thông báo</audio>
- Thuộc tính kiểm soát thêm điều khiển âm thanh, giống như chơi, tạm dừng, và khối lượng.
Bạn cũng nên chèn nội dung văn bản giữa các <audio> và </ âm thanh> cho các trình
duyệt không hỗ trợ các yếu tố <audio>.
Các yếu tố <audio> cho phép nhiều yếu tố <source>. yếu tố <source> có thể liên kết đến
tập tin âm thanh khác nhau.Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.
Thường dùng kèm với tag <source> để hiện thị được nhiều nội dung hơn.
- Ví dụ:
<audio src="nhac.mp3" controls="controls">Trình duyệt sử dụng không hỗ trợ tag
audio</audio>
Hiển thị nhiều nội dung với tag <source>
<audio controls="controls">
<source src="nhac.mp3" type="audio/mp3">
<source src="nhac.ogg" type="audio/ogg">
</audio>
Do các trình duyệt hỗ trợ định dạng file audio khác nhau, nên cách dùng trên có thể

chạy video cho nhiều trình duyệt và hệ điều hành khác nhau.

20


Format

MIME-type

MP3

audio/mpeg

Ogg

audio/ogg

Wav

audio/wav

Hình 1.2: Định dạng âm thanh thẻ audio
Các thuộc tính trong thẻ audio:
Thuộc tính
Autoplay

Giá trị
Autoplay

Ví dụ

Autoplay=”autoplay”

Controls

Controls

Controls=”controls”

Loop

Loop

Loop=”loop”

preload

Auto
Metadata
None

Preload=”auto”

Src

URL

Src=”media/autio.mp3


Mô tả

Âm thanh tự
động chạy
Hiển thị tính
năng điều khiển
Hiển thị tính
năng lặp lại khi
chạy xong đoạn
âm thanh
Xác định âm
thanh có chạy
không khi tải
trang
Xác định đường
dẫn tới file âm
thanh

Thẻ input mới trong HTML5
- Input Type: color
Ví dụ: <form action="demo_form.asp">
Select your favorite color: <input type="color" name="favcolor">

<input type="submit">
</form>
- Input Type: date
Ví dụ: Birthday: <input type="date" name="bday">
-

Input Type: datetime
Ví dụ: Birthday (date and time): <input type="datetime" name="bdaytime">
21



-

Input Type: datetime-local
Ví dụ: Birthday(date and time): <input type="datetime-local" name="bdaytime">

-

Input Type: email
Ví dụ: E-mail: <input type="email" name="email">

-

Input Type: month
Ví dụ: Birthday (month and year): <input type="month" name="bdaymonth">

-

Input Type: number
Ví dụ: Quantity (between 1 and 5): min="1" max="5">

-

Input Type: range
Ví dụ: <input type="range" name="points" min="1" max="10">

-

Input Type: search

Ví dụ: Search Google: <input type="search" name="googlesearch">

-

Input Type: tel
Ví dụ: Telephone: <input type="tel" name="usrtel">

-

Input Type: time
Ví dụ: Select a time: <input type="time" name="usr_time">

-

Input Type: url
Ví dụ: Add your homepage: <input type="url" name="homepage">

-

Input Type: week
Ví dụ: Select a week: <input type="week" name="week_year">
Phần tử mới của thẻ form trong HTML5

-

Thẻ <datalist> định nghĩa một danh sách tùy chọn, được sử dụng cùng các
Thành phần <input /> nhằm xác định giá trị các thành phần <input /> có thể có
(tương tự như <select> - <option>).
Ví dụ:
<form action="# " method="get">


22


<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
Thẻ <keygen /> xác định một cặp trường khóa chính sử dụng cho <form>.
Khi <form > được submit các khóa riêng (private key) được lưu trữ tại client, và
các khóa chung được gửi (public key) đến máy chủ.
Ví dụ:
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
Các thuộc tính trong form:
Thuộc
tính
Autofocu
s
Challenge


Giá trị

Ví dụ

Mô tả

Autofocus

Autofocus=”autofocus”

Challenge

Chanllenge=”chanllenge”

Disabled

Disable

Disable=”disable”

Form

Tên form

Form=”formName”

Name

Text


Name=”nextName”

Tập trung vào trang đang
tải cho trường nhập
Cho biết giá trị của keygen
thay đổi khi submit
Không hiển thị nội dung
trong keygen
Cho biết keygen thuộc
form nào
Xác định tên duy nhất cho
<input>

CHƯƠNG 2: THIẾT KẾ WEBSITE DEMO NGHE NHẠC TRỰC TUYẾN
2.1.
Giới thiệu bản demo
Sử dụng Notepad++ để làm website
23


Với ý tưởng xây dựng một website nghe nhạc trực tuyến đơn giản dễ sử dụng cho
người nghe. Bài báo cáo sẽ chỉ cho bạn cách tạo một trang web nghe nhạc trực
tuyến đơn giản.
Website trong bài báo cáo này thuộc loại website tĩnh.
Về phần giao diện trang chủ gồm danh mục nhạc trẻ, nhạc vàng, nhạc trữ tình, top
bài hot, các album, video nhạc và danh sách nhạc mới.
2.2. Yêu cầu cài đặt và cấu hình máy tính
Để sử dụng được trang web này yêu cầu phần cứng của máy tính như sau:
-


Hệ điều hành Win Xp trở lên

-

Ram 1G

-

ổ cứng 160G
Cài đặt phần mềm soạn thảo HTML như Notpad++, Adobe Dreamwear… trình
duyệt web như Internet Explorer, Chrome, Fifox..
2.3. Chi tiết bản demo website nghe nhạc trực tuyến
Giao diện trang chủ gồm có các mục: Nhạc trẻ, nhạc vàng, nhạc trữ tình, trung tâm
là danh sách các album, bên phải là danh sách các bản nhạc hot, phía dưới là danh
sách các bài nhạc mới.
Dưới đây là một số hình ảnh về giao diện của website demo nghe nhạc trực tuyến

Hình 1.3: Giao diện trang chủ

24


Hình 1.4: Giao diện của tab Nhạc trữ tình

Hình 1.5: Giao diện tab Nhạc Trẻ
25


×