Tìm hiểu về HTML5 và CSS3

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ì vậy nhóm chúng dem đã chọn đề tài tài: “Tìm hiểu về HTML5 và CSS3”.

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ụn

g 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ì vậy nhóm chúng dem đã

chọn đề tài tài: “Tìm hiểu về HTML5 và CSS3”.

Hưng Yên, ngày tháng năm 2013

Nhóm sinh viên thực hiện

Nguyễn Thế Anh

Đỗ Thị Giang

I Tổng quan về HTML5 và CSS3

1 HTML5 và CSS3 là gì?

HTML5 và CSS3 là các version mới hơn của HTML và CSS Nó được bổ sungthêm các đặc tính mới để giúp cho việc thiết kế web dễ dàng hơn, đồng thờilàm cho trang web hiển thị sinh động hơn với người xem

2 Vài đặc điểm mới

a Video:

HTML5 giúp người thiết kế nhũng một video vào trang web đơn giản Còn vớingười xem, HTML5 cho phép họ xem video mà không cần phải thêm một pluginnhư Flash hoặc Silverligh vào trình duyệt Tính năng video mới này sẽ là một sựtrợ giúp tuyệt vời cho những người sử dụng các thiết bị di động để duyệt web Hiệntại trình duyệt Safari, Chrome và Internet Exporer 9 hỗ trợ HTML5 video địnhdạng H.264 CÒn Firefox hiên thời chỉ hỗ trợ HTML5 video định dạng OggVorbis

b Các hiệu ứng động và trò chơi

HTML5 và CSS3 phối hợp với nhau giúp người thiết kế web dễ dàng hơn trongviệ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 đếnFlash

c Làm cho trang web hấp hẫn hơn:

HTML5 và CSS3 cũng làm cho các ứng dụng trong web và các trang web hấphẫn hơn Nhiều màu sắc hơn, hỗ trợ đường cong, làm mờ, góc tròn (bo tròn góccác đối tượng trong trang), lưu offline… Những điều này làm cho một trangweb đẹp hơn, bắt mắt hơn và làm cho việc hiển thị thông tin trong trang sát vớinhững gì mà người thiết kế tưởng tượng trong đầu

3 Khả năng tương thích:

HTML5 và CSS3 vẫn chưa được hoàn tát, nhưng chúng đã làm thay đổi bộ mặt của trang web Một số trình duyệt như các phiên bản hiên hành của Safari và chrome đã thực hiện được một số tính năng từ các phiên bản dự thảo của HTML5 và CSS3 Và với việc sử dụng những trình duyệt này bạn có thể xem nhiều trang web mà trong đó cũng sử dụng HTML5 và CSS3 như CNN.com, The NewYork

- Phiên bàn IE8 hỗ trợ HTML5 rất hạn chế,còn IE9 sẽ hỗ trợ H264 video, âm thanh nhùng, đồ họa vector tỷ lệ và CSS3

- HTML5 và CSS3 được kết hợp với các công nghệ khác như JavaScrip có thể rất hữu ích cho phong cách, định dạng và tốc độ hoạt động của bất kỳ trang webnào nếu được sử dụng đúng Hai ngôn ngữ sẽ cách mạng hóa cách chúng ta lập

trình và xem Internet với các tính năng cải tiền all-in-one, có thể loại bỏ việc phải sử dụng nhiều ứng dụng của bên thứ ba (ví dụ như Flash)

I Tìm hiểu về HTML5

1 Lịch sử hình thành và phát triển của HTML5

- Năm 2004 “WHAT” với những thành viên đến từ Apple, MozillaFoundation, và Opera Software được lập ra với nhiệm vụ phát triểnHTML5

- Tháng 10-2006 W3C (world wide web Consortium) thống báo họ sẽ hợp tácvới “WHAT” W3C quyết định sẽ không phát triển XHTML nữa và thay vào

đó sẽ hợp tác với WHAT để phát triển HTML5

- Năm 2008 phiên bản đầu tiên HTML5 ra mắt Phiên bản thử nghiệm đầutiên của HTML5 được viết bới Ian Hickson được giới thiệu HTML5 vẫnđang trong quá trình phát triển công nghệ

- Năm 2008 Firefox 3 tương thích với HTML5 trên trình duyệt ChromeSafari và tất nhiên là IE cũng bắt đầu tương thích

- Tháng 1 -2010 YouTobe ra mắt trình chơi video bằng HTML5

- Tháng 4 -2010 Steve Jobs tuyên bố không với Flash qua 1 bức thư Jobs lígiải sap flash không được sử dụng trên các thiết bị của Apple, mà thay vào

đó là HTML5

- Tháng 5-2010 trang chia sẻ tài liệu Scribd chuyển sang sử dụng HTML5,tọa lên giao diện người dung tốt hơn cho những người sử dụng dịch vụ của

họ trên các thiết bị máy tính bảng

- Tháng 12 -2010 Chrome web Store mở cửa được xây dựng trên nềnHTML5 Điều này giúp cho các thiết bị tablets mua phần mềm dễ dàng hơn

- Tháng 7-2011 Pandora.com sử dụng HTML5 Trang nghe nhạc online nổitiếng Pandora bắt đấu sử dụng trình chơi nhạc bằng HTML5 Nó được đánhgiá là nhanh và nhẹ hơn Flash

- Tháng 9-2011 34% trong top 100 websites sử dụng HTML5

2 Định nghĩa về HTML5

HTML5 là sự phát triển mạnh mẽ đột biến của HTML, viết tắt của cụm từ HyperText Markup Language Đây là hình thức định dạng cốt lõi của hầu hết các websitetrên internet HTML5 với phiên bản đầu tiên được hình thành trong năm 2008 nhưngmãi tới năm 2011 mới chính thức được ra mắt với một ánh hào nhoáng của công nghệhiện đại Tuy nhiên, trong thời điểm đó rất nhiều trình duyệt chưa kịp thay đổi để hỗ

trợ nó Đến ngày nay, hầu hết các trình duyệt phổ biến như Chrome, Safari, Firefox,Opera, IE đều hỗ trợ HTML5 Điều đó đã tạo ra một cuộc cách mạng lớn cho nền côngnghệ web.

HTML5 là sự kế thừa của HTML 4.01, được phát hành đầu tiên vào năm 1999.Việc tạo ra một ngôn ngữ mới dựa theo các tiêu chuẩn như:

- Các tính năng mới phải dựa trên HTML, CSS, DOM, và JavaScript

- Làm giảm nhu cầu cho các plugins bên ngoài (như Flash)

- Xử lý lỗi tốt hơn

- Đánh dấu để thay thế kịch bản

- HTML5 nên phát triển cho các thiết bị độc lập

- Quá trình phát triển nên được công khai nhằm cho các tổ chức khác có thể lấy làm cơ

sở phát triển

3 Tổng quan về cú pháp HTML5

a Cấu trúc file mã HTML5

- Khai báo DOCTYPE

Được sử dụng để kiểm tra hợp lệ các tài khoảnn <!Doctype html>

- Vung nội dung Metadata:

Là phần mềm nội dung thiết lập cách trình bày hoặc hành vi của các nội dungcòn lại trên trang

Có thể sử dụng nội dung metadata để thiết lập quan hệ giữa các tài liệu HTMLThường xuyên chứa các từ khóa hoặc mô ta cho trong web, và được các bộ máytìm kiếm sử dụng để phân loại trang web

Được đặt trong thành phần của <Head>

- Vùng flow

Đại diện cho các phần tử được coi là nội dung của trang web

Các thẻ đánh dấu nội dung đều thuộc vùng này

Những phần tử được thêm mới trong HTML5 : <Article>, <Aside>, <Audio>,

<Canvas>, <Hgroup>,…

- Vùng Sectioning

Là vùng nội dung mới của HTML5

Bao gồm 4 phần từ: <article>, <aside>, <nav>, và <section>

Là văn bản của tài liệu bao gồm các phần tử đánh dấu văn bản bên trong mộtđoạn văn

Là tập con của vùng Flow

Hình 3

- Phần tử Article và section

Trang web mà bạn đang thiết kế có chứa một phần Article, giữ nội dung thực sựcủa trang Bạn sử dụng thẻ <article> để tạo vùng này, và thẻ đó định nghĩa nội dung cóthể được sử dụng độc lập với các nội dung khác được tìm thấy trên trang này Ví dụ,nếu bạn muốn tạo ra một nguồn cấp dữ liệu RSS, bạn có thể sử dụng <article> để xácđịnh nội dung duy nhất Thẻ<article> xác định nội dung có thể được gỡ bỏ và được đặttrong ngữ cảnh khác và có thể hoàn toàn dễ hiểu

Vùng Article trong kế hoạch của Acme United có chứa ba vùng Section Bạntạo ra các vùng này bằng cách sử dụng thẻ<section> Một <section> chứa các vùngthành phần của nội dung trang web có liên quan Thẻ <section> — vàthẻ<article> nữa — có thể chứa các header (tiêu đề), các footer (chân trang), hoặc bất

kỳ các thành phần nào khác cần thiết để hoàn thành phần này Thẻ <section> dùng chonội dung tạo nhóm Nội dung cho cả hai thẻ <section> và thẻ <article>thường bắt đầubằng một <header> và kết thúc bằng một <footer>, với nội dung cho thẻ này ở giữa

Thẻ <section> cũng có thể chứa các thẻ <article>, cũng giống nhưthẻ <article> có thể chứa các thẻ <section> Thẻ<section> nên được dùng để tạo nhómcác thông tin giống nhau, và thẻ <article> nên được sử dụng cho các thông tin như mộtbài viết hoặc một blog mà chúng có thể bị gỡ bỏ và được đặt trong một ngữ cảnh mới

mà không ảnh hưởng đến ý nghĩa của nội dung Thẻ <article> như tên gọi của nó, cungcấp một gói thông tin đầy đủ Ngược lại, thẻ <section> chứa thông tin liên quan, trừthông tin không thể được đặt trong một ngữ cảnh khác với chính nó, do nghĩa của nó

sẽ bị mất

4 với một ví dụ về cách sử dụng thẻ <article> và <section>

Hình 4

- Phần tử Aside

Bạn tạo vùng Aside theo kế hoạch Acme United bằng cách sử dụng thẻ <aside>.Hãy sử dụng thẻ này khi bạn muốn tạo nội dung bổ sung mà không còn chỗ nào đểthêm vào bài viết Trong các tạp chí, các vùng nhận xét thường được sử dụng để làmnổi bật một điểm nào đó và được thực hiện trong chính bài viết đó Thẻ <aside> chứanội dung có thể được loại bỏ mà không ảnh hưởng đến các thông tin được truyền đạtbởi bài viết, phân đoạn, hoặc trang chứa nó

Hình 5 đưa ra một ví dụ về cách sử dụng thẻ <aside>

Hình 5

- Phần tử Footer

Phần tử <footer> chứa thông tin về một trang, bài viết, hoặc một phần, chẳnghạn như tác giả hoặc ngày viết bài Là phần cuối trang, nó có thể chứa bản quyền hoặccác thông tin pháp lý quan trọng khác, như trong hình 6

Mã html

Hình minh họa

Thẻ Audio

Tag <audio> định nghĩa âm thanh, như nhạc hay trường audio khác

Thường dùng kèm với tag <source> để hiện thị được nhiều nội dung hơn

Cấu trúc:

<audio src=” đường dẫn file” controls=”controls”>dòng thông báo</audio>

Thuộc tính tùy chọn

Mã html

Hình minh họa

Thẻ Canvas

Tag <canvas> được dùng để hiển thị đồ họa

Tag <canvas> sử dụng như vùng chứa đồ họa, việc vẽ đồ họa sẽ do script thực hiện.Cấu trúc: <canvas></canvas>

Thuộc tính

Mã html

Hình minh họa

Tác dụng của các thành phần mới trong HTML5:

- Thay thế bởi một cấu trúc trang web thống nhất, dễ đọc hơn

HTML5 không thay thế bất kỳ cú pháp HTML nào, mà chỉ bổ sung thêm các thànhphần (thẻ) mới vào danh sách hiện có

II Tìm hiểu về CSS3

1 Tổng quan về CSS3.

Là tiêu chuẩn mới nhất của CSS CSS3 tuy chưa được chính thức sử dụngrộng rãi nhưng những gì mà nó có thể làm được quả là rất đáng mong đợi Vềmặt nguyên lý thì có vẻ sự ra đời của CSS3 đã phần nào lấn sân của Javascript.Bởi vì người ta nói rằng HTML dùng để thể hiện nội dung, CSS dùng để trìnhbày cấu trúc và Javascript thì tương tác với người dùng Nhưng những tính năngmới của CSS3 như transition và animation phần nào đã làm thay đổi nguyên lýnày

Hiện tại khi sử dụng Javscript người lập trình bao giờ cũng phải tính đếnđiều kiện trình duyệt của người dùng không bật Javascript Nhưng nếu trongtương lai (hy vọng không xa) chúng ta có thể tạo ra những hiệu ứng động đơngiản mà không cần sự hỗ trợ của Javascript thì cũng rất tiện chứ sao Trong bàinày tôi sẽ cùng bạn khám phá một vài trong rất nhiều những cách sử dụngtransition khác nhau của CSS3

2 Làm việc với các thuộc tính mới trong CSS3.

Border-radius:

Thuộc tính border trong css3 dùng để định dạng các dạng bo góc

- Thuộc tính

+ Boder-top-left-radius: 5px: Góc trên bên trái sẽ được uốn cong

+ Boder-top-right-radius: 5px : Góc trên bên phải sẽ được uốn cong

+ border-bottom-left-radius: 5px: Góc dưới - bên trái sẽ được uốn cong+ border-bottom-right-radius: 5px: Góc dưới - bên phải sẽ được uốn cong + border-radius: 5px 10px 4px 8px: Cả 4 góc đều được uốn cong

- Cú pháp: border-image: source slice width outset repeat;

+ Slice: Phần bù bên trong của hình border

+ Outset: Số lượng diện tích mà hình nền border mở rộng

- Thuộc tính:

+ Border-image-source: Đường dẫn đến image dùng làm border

+ border-image-slice 1 giá trị: Phần lát cắt image với 4 thành phần của bordernhư nhau.

+ border-image-slice 2 giá trị: Phần lát cắt image với 2 thành phần ngang củaborder như nhau và 2 thành phần dọc cũng như nhau

+ border-image-slice 3 giá trị: Phần lát cắt image với thành phần dọc củaborder như nhau

+ border-image-slice 4 giá trị: Phần lát cắt image với 4 thành phần của borderkhác nhau

+ border-image-width 1 giá trị : Bề rộng image với 4 thành phần của bordernhư nhau

+ border-image-width 2 giá trị : Bề rộng image với 2 thành phần ngang củaborder như nhau và 2 thành phần dọc cũng như nhau

+ border-image-width 3 giá trị : Bề rộng image của thành phần trái và phảibằng nhau

+ border-image-width 4 giá trị : Bề rộng image của 4 thành phần khác nhau + border-image-outset 1 giá trị : Xác định giá trị image vượt ra ngoài vùnggiới hạn của vùng bao, với 4 thành phần của border vượt ra ngoài như nhau + border-image-outset 2 giá trị : Xác định giá trị image vượt ra ngoài vùnggiới hạn của vùng bao, với 2 thành phần trái và phải bằng nhau và 2 thành phầntrên dưới bằng nhau

+ border-image-outset 3 giá trị : Xác định giá trị image vượt ra ngoài vùnggiới hạn của vùng bao, với 2 thành phần trái và phải bằng nhau

+ border-image-outset 4 giá trị : Xác định giá trị image vượt ra ngoài vùng giớihạn của vùng bao, với 4 thành phần khác nhau

+ border-image-repeat với giá trị repeat : Image của border sẽ được lặp lại, cảphần nội dung và phần border

+ border-image-repeat với giá trị round : Image của border sẽ được lặp lại, cảphần nội dung và phần border, tuy nhiên vùng lặp sẽ tự động tỷ lệ cho phù hợpvới vùng bao

+ border-image-repeat với giá trị stretch : Image của border sẽ được kéo dài,nếu border-image-repeat không khai báo thì border image sẽ có dạng stretch + border-image-repeat với 2 giá trị : Image của border sẽ được lặp lại với 2thành phần trên và dưới giống nhau, trái và phải giống nhau

+ border-image : Tổng hợp của các dạng border-image trên

gradient, o-linear-gradient, moz-linear-gradient, webkit-linear-gradient, linear-gradient và webkit-gradient Cách này giúp hình đổ bóng được đẹp hơn,linh động hơn và tiết kiệm băng thông cũng như tăng tốc độ tải cho trang

Background-image: -moz-linear-gradient (white, black) ;

Background-image: -webkit-gradient (linear, 0 0, 0 100%, from (white), to (black));}

- Thuộc tính:

+ Thêm góc độ và nhiều điểm dừng:

+ Tăng thêm sự đa dạng của gradient

+ Kiểm soát tốt hơn

Ví dụ: Background-image: -moz-linear-gradient (45deg, white, green, black);

Background-image: -moz-radial-gradient(60% 60%, circle closest-comer, white,black);

+ Lặp lại gradient:

Background-image: -moz-repeating-linear-gradient(left, white 80%, black, white);+ Sử dụng hệ màu RGBA để định nghĩa gradient

.gradient h1{

Margin:0; font-weight:bold; font-size:48px; color:#c33; text-align:center,

Background-image: -moz-linear-gradient(rgba(174, 185, 196, 0.9), rgba(110,124,140, 0.9));}

+ Transition-duration: Quy định thời gian chuyển đổi

+ Transition-timing-function: Xác định tốc độ đường cong của hiệu ứng chuyểntiếp

+ Một số giá trị của transition-timing-function

+ Linear: Chỉ định một hiệu ứng chuyển tiếp với cùng một tốc độ từ đầu đến