Tìm hieu html5 và css3

TRƯỜNG ĐẠI HỌC CNTT VÀ TT
KHOA CÔNG NGHỆ THÔNG TIN
o O o
THỰC TẬP CƠ SỞ
Đề tài :
TÌM HIỂU, GIỚI THIỆU VỀ HTML5 VÀ CSS3
ỨNG DỤNG XÂY DỰNG TRANG WEB
CHO SIÊU THỊ ĐIỆN MÁY HC

Giáo viên hướng dẫn : ThS. DƯƠNG THU MÂY
Sinh viên thực hiện : NÔNG VĂN THÁI
Lớp : MMT-K10A

Thái Nguyên, ngày tháng năm 2014
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
……………………………………………………………………………………
…
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
Thái nguyên, ngày tháng năm 2014
( Kí và ghi rõ họ tên )

MỤC LỤC
DANH MỤC CÁC KÝ TỰ, CÁC TỪ VIẾT TẮT
Từ viết tắt Từ đầy đủ Giải thích
CNTT Công nghệ thông tin
TT Truyền thông
HTML Hyper Text Markup Language
CSS Cascading Style Sheets
LỜI MỞ ĐẦ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 và CSS3 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.
Ngoài ra, HTML5 và CSS3 sẽ giúp các nhà thiết kế web dễ dàng hơn trong
việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến
Flash. Một số ví dụ về những gì bạn có thể làm với HTML5, CSS3 và một ít hỗ
trợ từ JavaScript đó là Akihabra Games và Star Wars AT-AT Walker. Thiết kế
Shack cũng có một số ví dụ hiệu ứng động CSS3 khác. Mặc dù không thể thay
thế hoàn toàn cho Flash nhưng HTML5 và CSS3 sẽ có nhiều hứa hẹn trong lĩnh
vực này.
Đó là lý do em lựa chọn đề tài “Tìm hiểu về HTML5 và CSS 3, ứng dụng
xây dựng trang web quản lý thông tin cá nhân”.
Trong đề tài thực tập của mình em tập chung vào nghiên cứu các nội
dung chính sau:
Chương 1: Lịch sử hình thành và phát triển của HTML và CSS
Chương 2: Các thuộc tính mới trong HTML5 và CSS3
Chương 3: Giới thiệu bản DEMO (trang web quản lý thông tin cá nhân)
Em xin chân thành cảm ơn các thầy, cô giáo khoa Công Nghệ Thông Tin,

ĐH Công Nghệ Thông Tin và Truyền Thông đã giảng dạy em các bộ môn trong
thời gian vừa qua. Đặc biệt là thầy giáo Phạm Hồng Việt là giáo viên hướng dẫn
trực tiếp, đã tận tình chỉ bảo em hoàn thành đề tài.
CHƯƠNG I: TỔNG QUAN VỀ HTML VÀ CSS
1.1 HTML
 Định nghĩa về 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 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.
HTML 1 (Nhiều dân thiết kế/lập trình không coi HTML1 như là một phiên
bản của HTML )
HTML 1 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.
HTML 2
Nhiều công ti 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 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 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
• …vân vân
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,… vân vân.
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.
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.
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
• 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.
1.2 CSS
CSS là chữ viết tắt của cụm từ tiếng Anh “Cascading Style Sheet”, là kiểu
thiết kế sử dụng nhiều lớp định dạng chồng lên nhau. CSS được tổ chức World
Wide Web (W3C) giới thiệu vào năm 1996. Cách đơn giản nhất để hiểu CSS là
hãy coi nó như một phần mở rộng của HTML để giúp đơn giản hóa và cải tiến
việc thiết kế cho các trang web.
Mỗi khi bạn bắt đầu một Style Sheets, thì bắt buộc mở bằng <head> và kết
thúc bằng </head> và tiếp theo sau đó là khai báo <style> và kết thúc bằng
</style> và sau những bước trên thì bạn có thể nhìn thấy nguyên đoạn code như
sau:
<head>
<style>
và ở giữa này là nơi bạn thêm vào sau này
</style>
</head>

* Cấu trúc của CSS:
Tag {definition1; definition2; ; definition n}
ví dụ sau đây về dòng lệnh của CSS:
H2 {font-size: 16pt; font-style: italic; font-family: arial}
 Ưu điểm của CSS
- CSS có thể tách riêng phần định dạng ra khỏi nội dung một trang web, do
đó nó sẽ rất thuận tiện khi bạn muốn thay đổi giao diện của một trang web.
- CSS là một sợi chỉ xuyên suốt trong quá trình thiết kế một website bởi vì nó
cho phép nhà thiết kế kiểm soát toàn bộ giao diện, kiểu cách và sự sắp đặt
của nhiều trang hay nhiều đối trong một lần định nghĩa. Để thay đổi tổng
thể hay nhiều đối tượng có cùng Style, bạn chỉ cần thay đổi Style đó và lập
tức tất cả các thành phần áp dụng Style đó sẽ thay đổi theo. Nó giúp bạn tiết
kiệm công sức rất nhiều.
- Do định nghĩa các Style có thể được tách riêng ra khỏi nội dung của trang
web, chúng được các trình duyệt load một lần và sử dụng cho nhiều lần, do
đó nó giúp các trang web nhẹ hơn và chạy nhanh hơn.
 Các đặc tính cơ bản của CSS
- CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các
thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể
đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng
là “.css”, thường người ta hay đặt tên nó là stylesheet.css. CSS nó phá vỡ
giới hạn trong thiết kế Web, bởi chỉ cần một file CSS có thể cho phép bạn
quản lí định dạng và layout trên nhiều trang khác nhau. Các nhà phát triển
Web có thể định nghĩa sẵn thuộc tính của một số thẻ HTML nào đó và sau
đó nó có thể dùng lại trên nhiều trang khác.
- Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của
bạn phía trong thẻ <Head>…</Head>, hoặc ghi nó ra một file riêng với phần
mở rộng “.css”, ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng
biệt.
Thứ tự xếp lớp

Style nào sẽ được áp dụng khi có nhiều hơn một style được chỉ định cho
một thành phần HTML. Tùy vào từng cách đặt khác nhau mà mức độ ưu tiên cho
nó cũng khác nhau. Mức độ ưu tiên này tuân theo thứ tự sau:
• Style nội tuyến – Style đặt trong từng thẻ HTML riêng biệt.
• Stylet bên trong – Style đặt bên trong cặp thẻ <Head> … </Head>.
• Style bên ngoài – Style đặt trong các file riêng có đuôi “.css”.
• Style theo mặc định của trình duyệt.
- CSS có tính kế thừa và tính kết hợp
Tính kế thừa
Giả sử rằng ở đầu file styleshet.css bạn khai báo cho Body có các thuộc tính
sau:
body {
font: Arial, Verdana;
background: #FF6600;
}
Nhưng trong trường hợp bạn muốn khai báo cho các đối tượng nhỏ hơn
nằm trong đó như Sidebar:
#sidebar {
with: 300px;
padding: 10px;
font: Tahoma, Verdana;
}
Sau đoạn khai báo này thì Sidebar sẽ có thuộc tính:
#sidebar {
background: #FF6600;
with: 300px
padding: 10px;
font: Tahoma, Verdana;
}
Như vậy, Sidebar đã kế thừa thuộc tính background của Body, và trong đó

thuộc tính font là Tahoma đã đè lên thuộc tính font Arial ở lần khai báo trước.
Tính kết hợp
Có thể định nghĩa nhiều CSS cùng một thuộc tính thay vì phải định nghĩa
riêng lẻ từng cái một.
 Các phiên bản của css
Sau gần một thập niên, CSS do W3C khởi xướng đã được xuất bản với
phiên bản CSS 2.1 kèm với thông số kỹ thuật chính thức. Bản thử nghiệm lần
đầu tiên của CSS 2.1 ra đời vào năm 2004.
CSS là kiểu ngôn ngữ dành cho web, hỗ trợ mạnh mẽ cho người dùng về
cách dàn trang và thiết kế. Thêm vào đó, CSS giúp bạn có thể quản lý các trang
web dễ dàng hơn. Nhưng quá trình thử nghiệm và vận hành thực tế cho thấy CSS
2.1 có thể là một nền tảng ổn định. Chuẩn này chứa một số lượng lớn định dạng
các tính năng. Tất cả tính năng đã được thử nghiệm qua những cách kết hợp khác
nhau.
Css phiên bản 2.1 với các đặc tả kĩ thuật hình thức được đánh giá trên một số
trình duyệt.
1.3 Các phiên bản và cách thức lập trình javascript.
Ban đầu JavaScript có tên là Live Script được phát triển bởi tên tuổi lẫy
lừng Nestcape. Sau khi ra mắt vào năm 1995 nó được Apple, Borland, Informix,
Oracle, Sybase, HP và IBM hỗ trợ. Hiểu được tầm quan trọng của lập trình trên
nền web Microsoft cũng nhảy vào hỗ trợ và vận động để ECMA (hiệp hội các
nhà sản xuất máy tính) công nhận JavaScript là ngôn ngữ lập trình tiêu chuẩn của
tổ chức quốc tế này. Microsoft sau đó dựa trên JavaScript để tạo ra ngôn ngữ lập
trình VBScript nhưng JavaScript vẫn mãi là ngôn ngữ tiêu chuẩn của thế
giới web.
JavaScript được tích hợp vào trong tập tin HTML nó có khả năng sử dụng
các CGI (chuẩn kết nối chương trình ứng dụng với webserver) xử lý các thông
tin và biểu mẫu giúp trang web thêm sinh động.
Rất dễ dàng tạo ra các trang web từ ngôn ngữ HTML, nhưng đó là các
trang web tĩnh. Các tài liệu HTML không thể tương tác với người dùng ngoài

việc cung cấp các đường link đến các tài nguyên khác trên internet. Tuy nhiên
việc tạo ra các CGI (Common Graphics Interface) đã mở ra cơ hội mới để làm
các trang HTML tĩnh tại sinh động hơn.
JavaScript ra đời dựa trên một nhu cầu hợp lý là giảm tải cho các server.
Thay vì tất cả các các thông tin dữ liệu phải được trao đổi trực tiếp giữa trình
duyệt và web server thì nó được JavaScript tiền xử lý ngay trên trình duyệt trước
khi gởi đến các web server.JavaScript đã làm giảm lưu lượng truy cập giữa server
và client hay nói cách khác nó đã biến máy tính của bạn thành một server tạm
thời xử lý một số tác vụ đơn giản. Ví dụ, một trang thu thập dữ liệu từ người
dùng có thể sử dụng các đoạn code JavaScriptđể xác nhận tính hợp lý của thông
tin trước khi gởi các dữ liệu này về server để xử lý.
JavaScript có một nhiều tính năng và lệnh để thực hiện các phép tính toán
học, xử lý chuỗi, âm thanh, hình ảnh, các cửa sổ trình duyệt, kiểm tra các đường
dẫn URL, và thông tin được nhập vào các biểu mẫu online. Các đoạn code xử lý
này được chèn trực tiếp vào trang web và được trình duyệt xử lý ngay trên máy
tính của bạn.
 Một số đặc tính cơ bản của ngôn ngữ lập trình javascript
JavaScript có mười đặc điểm cơ bản mà bất cứ một coder nào cũng phải
biết.
- JavaScript có thể xử lý các mã HTML. JavaScript nó được đính kèm và
thực thi trong các tài tài liệu HTML. Hầu hết các đối tượng JavaScript đều
liên quan đến các thẻ HTML (HTML tags). JavaScript dựa vào HTML để
giúp các ứng dụng web hoạt động
- JavaScript phụ thuộc môi trường hoạt động. JavaScript là một ngôn ngữ
kịch bản, một chương trình chạy trực tiếp trên trình duyệt web (Firefox,
Opera, Netscape Navigator, Internet Explorer, Safari, etc ). Việc quan tâm
đến môi trường hoạt động của JavaScript rất quan trọng vì các ứng
dụng JavaScript sẽ hoạt động khác nhau trên các trình duyệt khác nhau.
- JavaScript hoàn toàn là một ngôn ngữ biên dịch – nó được trình duyệt
biên dịch và thực thi. Nó không cần một trình biên dịch tiền xử lý.

- JavaScript là một ngôn ngữ linh hoạt. Trong JavaScript ta có thể khai báo
nhiều kiểu biến, thực thi các chương trình với các biến không xác định.
- JavaScript dựa trên các đối tượng – JavaScript là một ngôn ngữ lập trình
hướng đối tượng giống như Java. Thực ra phải nói chính xác là “dựa trên các
đối tượng” vì các đối tượng của JavaScript đáp ứng tức thời và không có tính
kế thừa.
- JavaScript được điều khiển bởi các sự kiện – Hầu hết các đoạn
code JavaScript đáp ứng các sự kiện do người dùng hoặc hệ thống gây nên.
Các đối tượng HTML thường dùng để tăng cường hỗ trợ các sự kiện.
- JavaScript không phải là Java - hai ngôn ngữ được tạo ra bởi các công ty
khác nhau. Mặc dù sự trùng tên không phải ngẫu nhiên mà vì lý do tiếp thị.
- JavaScript là một ngôn ngữ đa dụng. Ngôn ngữ lập trình này được dùng
trong các trường hợp để giải quyết nhiều vấn đề khác nhau như: toán học, đồ
họa…
- JavaScript đang được phát triển không ngừng. Đây là một điều tốt nhưng
nó cũng gây ra vấn đề đối với các lập trình viên, họ phải luôn luôn cập nhật
kiến thức để tạo ra các ứng dụng phù hợp cho người dùng trên các trình
duyệt khác nhau.
- JavaScript bao hàm rất nhiều lĩnh vực. Mặc dù JavaScript được tạo ra chủ
yếu dành cho máy khách (client) nhưng nó cũng được sử dụng ở các server
nữa. JavaScript ngôn ngữ tự nhiên của các công cụ phát triển web như
Macromedia Dreamweaver hay IntraBuilder Borland
 Các Phương Pháp Nhúng Javascript Vào HTML.
Ngôn ngữ Javascript họat động tương tác với Ngôn ngữ HTML. Bởi vì
chương trình dịch Mã Javascript đã được tích hợp vào Trình duyệt, do vậy cũng
giống nhiều ngôn ngữ thiết kế Web khác (như CSS), Javascript cung cấp 3
phướng pháp chèn mã vào trang HTML như sau:
 Các phiên bản của javascript và những trình duyệt phổ biến có hỗ trợ
cho từng phiên bản.
Phiên bản Ngày công bố Trình duyệt

Tương thích
chuẩn
1.0 12-1995
Navigator 2, Internet
Explorer 3
Không
1.1 4-1996
Navigator 4, Internet
Explorer 4
Một phần chuẩn
ECMAScript 1
1.2 12-1996
Navigator 4.06,
Internet Explorer 5
ECMAScript
1,ISO-16262
1.3 8-1998
Phiên bản 1.4 không
xuất hiên trong bất kỳ
trình duyệt nào
ECMAScript
1,ISO-16262
1.5 4-2000
Navigator 26 và 7,
Internet Explorer 35.5
và 6, mozilla 1
ECMAScript 3
2.0 2003 ECMAScript 4
CHƯƠNG II: TỔNG QUAN VỀ HTML5 VÀ CSS3
2.1 HTML5

 Sự ra đời của HTML5
HTML5 sẽ cho phép một lớp ứng dụng web mới ra đời, hỗ trợ nội dung đa
phương tiện và các tính năng offline mà không cần đến những công nghệ độc
quyền đi kèm.
Các đặc tính của HTML5 đã và đang được nói đến rất nhiều. Ngôn ngữ
web này sẽ kế tiếp sự nghiệp của HTML4. HTML5 là phiên bản sửa đổi thứ 5
của ngôn ngữ World Wide Web: the Hypertext Markup Language (HTML) – đây
được xem là ngôn ngữ chung của web. Nhóm Web Hypertext Application
Technology Working Group (WHATWG) đã bắt đầu nghiên cứu về các đặc tính
của HTML5 từ tháng 10/2009, dưới dự án Web Applications 1.0.
Năm 2022 mới hoàn thiện
Mặc dù hiện nay HTML5 được nói đến rất nhiều và các công trình nghiên
cứu về HTML5 đã bắt đầu từ giữa những năm 2000, song các đặc tính kỹ thuật
của nó dự kiến sẽ được hoàn thiện vào tận năm 2022. HTML4 chính thức xuất
bản vào năm 1999.
Chính xác thì các công trình nghiên cứu về HTML5 bắt đầu vào tháng
6/2004, do các tổ chức World Wide Web Consortium HTML Working Group
(W3C HTML WG) và WHATWG cùng phối hợp thực hiện.
Ian Hickson, biên tập kỹ thuật của HTML5, nói ông hy vọng những đặc
tính kỹ thuật của HTML5 sẽ được trình lên W3C Candidate Recommendation
vào năm 2012 và lên W3C Recommendation vào năm 2022. Tuy nhiên, nhiều
đặc tính kỹ thuật của HTML5 đã ổn định và có thể được ứng dụng ngay từ bây
giờ.
Theo Hickson, khung thời gian đệ trình và thử nghiệm kỹ thuật HTML5 là:
- Dự thảo đầu tiên gửi lên W3C vào tháng 10/2007.
- Dự thảo cuối cùng vào tháng 10/2009.
- Kêu gọi thử nghiệm vào năm 2011.
- Bản Đề cử (Candidate Recommendation) vào năm 2012.
- Dự thảo bộ thử nghiệm đầu tiên vào năm 2012.
- Dự thảo thử nghiệm thứ hai vào năm 2015.

- Phiên bản thử nghiệm cuối cùng vào năm 2019.
- Phát hành lại Dự thảo Last Call Working Draft vào năm 2020.
- Đề cử dự kiến vào năm 2022.
HTML5 sẽ thay thế HTML4, DOM2 HTML và XHTML 1.
 Các thuộc tính mới trong HTML5
Các tính năng video của HTML5 – cho phép đơn giản hoá việc thêm một
video vào trang Web – đã được nhận được nhiều sự chú ý, không những thế
HTML5 còn có nhiều tính năng làm nó trở nên tuyệt vời đối với người sử dụng
cũng như các nhà phát triển web.
 Video và hiệu ứng Flash
HTML5 sẽ cho phép bạn xem video mà không cần sử dụng một plugin như
Flash hoặc Silverlight.
 Những lợi ích lớn với tính năng video của HTML5
- Thứ nhất, nó là miễn phí và không cần cài plug-in Adobe Flash Player.
- Thứ hai, Flash có thể làm chậm 1 phần máy tính của bạn.
- Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài
nguyên hệ thống.
 HTML5 có một số mục tiêu để phân biệt nó với HTML:
HTML 5 vẫn giữ cho mình những cấu trúc cơ bản như HTML nhưng bên
cạnh đó bổ sung thêm các tập lệnh mới, kết hợp với CSS 3, tạo ra phân khung
cho trang. Có những câu lệnh trong HTML sẽ không được dùng trong HTML 5.
Bên cạnh đó HTML 5 còn có khả năng hỗ trợ người lập trình như lập trình API
(Application Programming Interface) và DOM (Document Object Model – Trong
HTML đã được ứng dụng).
Một số trình duyệt có hỗ trợ HTML 5: Firefox, Chrome, Safari, Opera và đến
nay Microsoft cũng đã đưa HTML 5 vào trong sản phẩm mới IE 9 của mình.
HTML 5 sẽ là ngôn ngữ nền tảng web trong tương lai gần ….
- Tính tiện dụng: đặt người dùng lên hàng đầu nên cú pháp của HTML5 khá
thoải mái (dù chưa được chặt chẽ như XHTML), thiết kế hỗ trợ sẵn bảo mật,
và sự tách biệt giữa phần nội dung và trình bày ngày càng thể hiện rõ: công

việc định dạng hầu hết do CSS đảm nhiệm, HTML5 không còn hỗ trợ phần
lớn các chức năng định dạng trong các phiên bản HTML trước đây.
- Khả năng hoạt động xuyên suốt giữa các trình duyệt: HTML5 cung cấp các
khai báo đơn giản hơn và một API mạnh mẽ. Một ví dụ dễ thấy là khai báo
DOCTYPE:
HTML4: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN” “ />HTML5: <!DOCTYPE html>
So với các phiên bản trước, đặc tả HTML5 dài hơn đáng kể nhằm chi tiết hóa
mọi hành vi để đảm bảo chúng thống nhất giữa các trình duyệt khác nhau.
- Khả năng truy xuất rộng rãi: HTML5 mang lại sự hỗ trợ tốt hơn cho các
ngôn ngữ và cho người khuyết tật, đồng thời cũng có thể hoạt động trên các
thiết bị và nền tảng khác nhau.
- Điểm đặc trưng đầu tiên của một ngôn ngữ đánh dấu (markup language) là
các thẻ. Và ở mặt này thì HTML5 được bổ sung rất nhiều cái mới, từ các thẻ
tổ chức nội dung (article, aside, title…) đến các thẻ hỗ trợ tương tác và
multimedia (video, audio…). Trong HTML5 cũng xuất hiện một khái niệm
gọi là semantic markup, tức là các thẻ có mang ngữ nghĩa. Các thẻ này ra đời
từ việc khảo sát các trang web và nhận diện một số thói quen đặt tên phổ
biến (một số phần của trang web thường luôn được đặt một cái tên như
“header”, “footer”, “nav”). Ngoài sự rõ ràng, sử dụng các semantic markup
còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng
chúng để phân loại kết quả.
Bên cạnh đó, thẻ <form> của HTML5 cũng được xem là một cải tiến lớn.
Giờ đây với Form 2.0 (một cách gọi form trong HTML5), tất cả những chức
năng mà bạn cần (định dạng, validate data…) đã được xây dựng trực tiếp vào
trong HTML. Bạn không còn cần đến Ajax, Flash hay các công nghệ hỗ trợ để
làm công việc này nữa!
Không chỉ dừng lại ở các tag, HTML5 bao gồm một tập các API hấp dẫn.
Vài API thú vị có thể kể đến như:
- Canvas

- Geolocation
- WebSocket
- Web Storage
- WebWorkers
…
Vậy là các thẻ đánh dấu sẽ đa dạng hơn nhưng sẽ mang lại cho bạn sự tiện dụng
hơn khi bạn không phải đặt một mớ thẻ div cùng với một mớ id và class một
cách dày đặc, nhờ vậy cấu trúc đánh dấu sẽ trở nên rõ và giễ hiểu hơn.
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
Started out as a nice winter HTML5 thêm một số thẻ mới đặc biệt để xác
định những cấu trúc phổ biến như:
- session: nó cũng giống như một phần hoặc một chương của một quyển
sách, hay một đoạn trong một chương
- header: phần đầu hiển thị trên trang, không giống như thẻ head
- footer: phần dưới chân trang giống như chữ ký trong một thông điệp email
- nav: một tập liên kết tới những trang khác.
Ví dụ sau chúng ta sẽ xem xét về sự khác biệt từ cách đánh dấu truyền thống
và cách đánh dấu của HTML5.
Cách đánh dấu truyền thống:
<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<div id="page">

<div id="header">
<h1><a href=" mit Schlag</a></h1>
</div>
<div id="container">
<div id="center" class="column">
<div class="post" id="post-1000572">
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>
<div class="entry">
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15. </p>
</div>
</div>
<div class="post" id="post-1000571">
<h2><a href=
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>
<div class="entry">