Tìm hiểu HTML5, CSS3, thiết kế website tin tức. Sử dụng HTML5,CSS3 để thiết kế. Code giao diện của các tiểu mục, phần trang chủ,...phần đăng nhập có dử dụng javaScript. Mua code những phần sau liên hệ gmail: nguyetkettcdgmail.com
Trang 1-o0o -BÁO CÁO THỰC TẬP CƠ SỞ
Đề tài Tìm hiểu về HTML5, CSS3, thiết kế website tin tức
Giảng viên hướng dẫn:
Sinh viên thực hiện:
Lớp:
MSV:
Thái Nguyên, tháng 3 năm 2020
Trang 3M C L C Ụ Ụ
L I NÓI Đ U Ờ Ầ
Trang 4Hi n nay, công ngh dành cho thi t b laptop, máy tính b ng, di đ ngệ ệ ế ị ả ộngày càng phát tri n N u nh trể ế ư ước đây, người dùng ph i dùng chi c máyả ếtính đ bàn c ng k nh cùng trình duy t web IE (Internet Explorer) đ lể ồ ề ệ ể ướtweb, thì gi đây v i máy tính xách tay (laptop), đi n tho i thông minhờ ớ ệ ạ(Smartphone) cùng r t nhi u trình duy t khác (Firefox, Opera, Googleấ ề ệChrome,…) người dùng có th d dàng lể ễ ướt “net” b t kì n i đâ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 có th xem các trang web này r t t t,ẳ ạ ể ấ ố
nh ng trên đi n tho i thông minh thì giao di n và c u trúc trang b xáoư ệ ạ ệ ấ ị
tr n Hay có th xem phim r t t t v i Google Chrome nh ng v i Opera, IE,ộ ể ấ ố ớ ư ớ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 là s n ph m c a s phát tri n ti p theo c a HTML, đó là vi tả ẩ ủ ự ể ế ủ ế
t t c a thu t ng ngôn ng web Hyper Text Markup Language, là đ nh d ngắ ủ ậ ữ ữ ị ạ
c t lõi h u h t website hi n nay.ố ầ ế ệ
HTML5 cho phép phát tri n, l p trình web t o ra các trang web cóể ậ ạ
nh ng tính u vi t h n Không nh ng v y, HTML5 còn đem đ n cho ngữ ư ệ ơ ữ ậ ế ườidù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 công 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ơ ắ ắ ơ ọ ứ ở ớ ữ ế
Trang 5Ngoà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 ngế ộ ố ụ ề ữ ười dùng có th làm v i HTML5,ể ớCSS3 và m t s ít h tr t JavaScript Thi t k Shack cũng có m t 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 ư ề ứ ẹ ự
Trang 7Nh ng th HTML đ u có nh ng thu c tính riêng Nh ng thu c tính nàyữ ẻ ề ữ ộ ữ ộcung c p thông tin v thành ph n HTML c a trang web Tag này xác đ nhấ ề ầ ủ ịthành ph n thân trang HTML: <body> V i m t thu c tính thêm vào làầ ớ ộ ộbgcolor, có th báo cho chể ương trình duy t bi t r ng màu n n c a trangệ ế ằ ề ủnày là màu màu xanh, gi ng nh sau: <body bgcolor = “green”> ho c <bodyố ư ặbgcolor = “#01F701”> (#01F701 là giá tr hex c a màu) Th này sẽ đ nhị ủ ẻ ị
d ng b ng HTML: <table> v i m t thu c tính đạ ả ớ ộ ộ ường vi n <table boder =ề
“0”>
Thu c tính luôn luôn đi kèm m t c p nh name/value: name = “value”ộ ộ ặ ư(tên = “giá tr ”) thu c tính luôn luôn đị ộ ược thêm vào th m đ u c a thànhẻ ở ầ ủ
ph n HTML D u ngo c kép, “green” ho c ‘green’ầ ấ ặ ặ
Giá tr thu c tính nên đị ộ ược đ t trong d u trích d n “ và ” Ki u ngo c képặ ấ ẫ ể ặ
nh v y thì ph bi n h n, tuy nhiên ki u đ n nh ‘ và ’ cũng có th đư ậ ổ ế ơ ể ơ ư ể ượcdùng Ví d tronng m t vài trụ ộ ường h p đ c bi t hi m, ví d nh giá trợ ặ ệ ế ụ ư ịthu c tính đã mang d u ngo c kép r i, thì vi c s d ng ngo c đ n là c nộ ấ ặ ồ ệ ử ụ ặ ơ ầthi t.ế
Ví d : Name = ‘Lap “trinh” web’ụ
1.1.3 C u trúc c b n c a HTML ấ ơ ả ủ
M t tài li u HTML luôn độ ệ ược gói trong c p tag <html> và </html> ặ
C p tag <body> và </body> sẽ là n i mô t nh ng gì có th nhìn th y c aặ ơ ả ữ ể ấ ủtrang
=> Nh v y, m t trang web vi t b ng html sẽ có c u trúc c b n nh sau:ư ậ ộ ế ằ ấ ơ ả ư
Trang 8Ngoài ph n body còn có ph n head, đầ ầ ược vi t b i c p tag <head> và ế ở ặ
</head> N u s d ng c p tag này, b t bu c ph i vi t them m t c p tag n aế ử ụ ặ ắ ộ ả ế ộ ặ ữ
đó là <title> và </title> Gi a <title> và </title> là tên c a trang web đữ ủ ược
Trang 9Thường đượ ử ục s d ng đ th hi n cho tiêu đ c a bài vi t, b n tin hayể ế ệ ề ủ ế ảcác m c nh n m nhụ ấ ạ
Trang 10Đo n văn b n trong html (HTML P ạ ả aragraphs)
N i dung văn b n độ ả ược th hi n trong c p thể ệ ặ ẻ <p> </p>
<p>Đây là đo n văn b n</p>ạ ả
Trang 11Liên k t (HTML Links) ế
HTML s d ng th <a> (Anchor) đ t o đử ụ ẻ ể ạ ường liên k t đ n m t tài li uế ế ộ ệkhác Th anchor có th liên k t đ n b t c m t tài nguyên nào trênẻ ể ế ế ấ ứ ộinternet, chúng có th là m t trang HTML, m t t m hình, m t file nh c, m tể ộ ộ ấ ộ ạ ộ
b phim,…ộ
Cú pháp đ t o m t th anchorể ạ ộ ẻ
<a href= “url”>na la</a>
Th <a> đẻ ượ ử ục s d ng đ t o m t đi m neo và liên k t b t đ u t đó,ể ạ ộ ể ế ắ ầ ừthu c tính href độ ượ ử ục s d ng đ ch ra tài li u sẽ để ỉ ệ ược liên k t đ n, và chế ế ữ
na xu t hi n gi a hai tag < và > sẽ đấ ệ ở ữ ược hi n th dể ị ướ ại d ng siêu liên k tế
Ta dùng c p thặ ẻ <a> </a> đ làm công vi c liên k t các trang web v iể ệ ế ớnhau
Thu c tính c a thộ ủ ẻ <a> g m:ồ
• href: qui đ nh đ a ch mà url tr t iị ị ỉ ỏ ớ
• target: qui đ nh liên k t sẽ đị ế ược m ra đâuở ở
Trang 12 K t qu ế ảhiển thị trong cửa sổ trình duyệt:
Nh n vào “Go to google page” trang google đấ ược m ra trên m t c a s m iở ộ ử ổ ớ
Xu ng dòng (HTML Line Breaks) ố
Th <br> đẻ ược s d ng khi mu n k t thúc m t dòng nh ng l i khôngử ụ ố ế ộ ư ạ
mu n b t đ u m t đo n văn b n khác Th <br> sẽ t o ra m t l n xu ngố ắ ầ ộ ạ ả ẻ ạ ộ ầ ốdòng khi vi t nó <p>Xin chào<br>Các b n</p>, th <br> là m t th tr ngế ạ ẻ ộ ẻ ố
nó không c n th đóng d ng </br>.ầ ẻ ạ
Ví d :ụ
K t qu ế ảhiển thị trong cửa sổ trình duyệt:
Trang 13Ký t đự ược dùng nhi u nh t trong HTML có lẽ là nbsp (non-breakingề ấspace) Thường thì HTML c t b t kho ng tr ng trong ch ắ ớ ả ố ữ
Ví d : N u vi t 10 ch tr ng trong text thì HTML sẽ lo i b 9 trong s đó.ụ ế ế ỗ ố ạ ỏ ố
Đ thêm kho ng tr ng vào ch ph i s d ng ký t đ c bi t là  .ể ả ố ữ ả ử ụ ự ặ ệ
B ng HTML và thu c tính đ ả ộ ườ ng biên
V i HTML cũng có th t o b ng cho trang web.ớ ể ạ ả
B ng đả ược đ nh d ng b i th <table> M t b ng đị ạ ở ẻ ộ ả ược chia ra làm nhi uềhàng v i nhi u th <tr>, m i hàng đớ ề ẻ ỗ ược chia ra làm nhi u c t d li u v iề ộ ữ ệ ớ
th <td> Ch td là ch vi t t t c a “table data”, là n i dung c a c t d li uẻ ữ ữ ế ắ ủ ộ ủ ộ ữ ệ
có th bao g m ch , hình nh, danh sách, đo n v n, form và b ng,…ể ồ ữ ả ạ ắ ả
N u không thi t l p đế ế ậ ường biên cho b ng thì b ng sẽ đả ả ược hi n th màể ịkhông có đường biên Đôi khi nó h u d ng nh ng thữ ụ ư ường th b ng có đỉ ả ườngbiên
Ví d :ụ
K t qu ế ảhiển thị trong cửa sổ trình duyệt:
Th table ẻ
Trang 14M t form là vùng mà nó bao g m nh ng thành ph n c a form Thànhộ ồ ữ ầ ủ
ph n c a form là nh ng thành ph n cho phép ngầ ủ ữ ầ ười dùng có th đi n thôngể ềtin nh là trư ường ch , menu th xu ng, nút radio và các h p ki m vào m tữ ả ố ộ ể ộform
M t form độ ược xác đ nh b i th <form>ị ở ẻ
Trang 15Text field đượ ử ục s d ng khi đánh ch , s ,… vào m t formữ ố ộ
K t qu ế ả hiển thị trong cửa sổ trình duyệt:
Note: Khi form thì b n đi H n n a trên h u h t các trình duy t trị ẩ ơ ữ ầ ế ệ ườngtext được m c đ nh là 20 ký tặ ị ự
Trang 16 K t qu ế ả hiển thị trong cửa sổ trình duyệt:
H p ki m ộ ể
H p ki m độ ể ượ ử ục s d ng khi người dùng có th ch n nhi u l a ch n h nể ọ ề ự ọ ơ
K t qu ế ả hiển thị trong cửa sổ trình duyệt:
Trang 17Thu c tính ho t đ ng c a form và nút Submit Khi ngộ ạ ộ ủ ười dùng nh pấchu t vào nút “Submit”, n i dung c a form đó sẽ độ ộ ủ ược g i đ n m t tin khác.ử ế ộThu c tính ho t đ ng c a form xác đ nh tên c a file mà nó sẽ g i n i dungộ ạ ộ ủ ị ủ ử ộ
đ n T p tin đó đế ệ ược xác đ nh trong thu c tính ho t đ ng c a form vàị ộ ạ ộ ủ
thường thì nó sẽ có nh ng hành đ ng v i d li u mà nó nh n đữ ộ ớ ữ ệ ậ ược
Ví d :ụ
K t qu ế ả hiển thị trong cửa sổ trình duyệt:
Khi gõ tên vào trường ch trên và nh p vào Submit, nó sẽ g i thông tinữ ở ấ ử
đó vào m t trang g i là “form.html” Trang đó sẽ cho th y d li u nh nộ ọ ấ ữ ệ ậ
được
Trang 18HTML images ( Hình nh ) ả
V i HTML có th hi n hình nh trong tài li uớ ể ệ ả ệ
Trong HTML, hình nh đả ược xác đ nh b i th <img> Đ hi n th m tị ở ẻ ể ể ị ộhình trên trang web, c n ph i s d ng thu c tính src Src là ch vi t t t c aầ ả ử ụ ộ ữ ế ắ ủsource Giá tr c a thu c tinhsrc là đ a ch URL c a hình nh mu n hi n thị ủ ộ ị ỉ ủ ả ố ể ịtrên trang web
Thu c tính c a th <img>ộ ủ ẻ g m:ồ
• src: ch ra đỉ ường d n file nhẫ ả
• alt: đ mô t n i dung sẽ hi n th khi để ả ộ ể ị ường d n t i file nh không t n t iẫ ớ ả ồ ạ
• title = “Tiêu đ ” : n i dung hi n th khi đ a tr chu t lên hình.ề ộ ể ị ư ỏ ộ
• width, height: đ r ng và đ cao c a file độ ộ ộ ủ ược tính b ng excel, n u không cóằ ếwidth và height thì m c đ nh sẽ l y kích thặ ị ấ ướ ố ủc g c c a file
Cú pháp đ xác đ nh m t t m hình:ể ị ộ ấ
<img src = “url”>
Trình duy t sẽ hi n th hình nh n i mà có th image đệ ể ị ả ơ ẻ ược chen trong tài
li u N u mu n thêm th image vào gi a m t đo n văn, trình duy t sẽ hi nệ ế ố ẻ ữ ộ ạ ệ ể
Trang 20Các th đ nh d ng text (HTML Text Formatting) ẻ ị ạ
• <b> (bold): Ch In đ mữ ậ
• <u> (Underline): Ch g ch chânữ ạ
• <i> (italic): Ch in nghiêngữ
• <big> (Big): Ch l n h nữ ớ ơ
• <sub> (Subscrip) Ch s dỉ ố ướ VD: i
• <sup> (Superscript): Ch s trênỉ ố VD:
Trang 21L i chú thích trong HTML ờ
Th chú thích đẻ ượ ử ục s d ng đ thêm l i chú thích trong mã ngu n c aể ờ ồ ủHTML M t dòng chú thích sẽ độ ược b qua b i trình duy t Có th s d ngỏ ở ệ ể ử ụchú thích đ gi i thích v code, đ su này có ph i quay l i ch nh s a gì thìể ả ề ể ả ạ ỉ ửcũng d nh h n.ễ ớ ơ
<! Chú thích trong này > ở
1.2 CSS
1.2.1 Đ nh nghĩa v CSSị ề
CSS (Cascading Style Sheets) : là ki u thi t k s d ng nhi u l p đ nhể ế ế ử ụ ề ớ ị
d ng ch ng lên nhau CSS đạ ồ ược tooe 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
CSS ti t ki m r t nhi u công vi c.ế ệ ấ ề ệ Nó có th ki m soát b c c c a nhi uể ể ố ụ ủ ềtrang web cùng m t lúc.ộ
V i CSS, b n có th ki m soát màu s c, phông ch , kích thớ ạ ể ể ắ ữ ướ ủc c a văn
b n, kho ng cách gi a các ph n t , cách các ph n t đả ả ữ ầ ử ầ ử ược đ nh v và b trí,ị ị ố
Trang 22hình n n ho c màu n n sẽ đề ặ ề ược s d ng, các màn hình khác nhau cho cácử ụthi t b và kích thế ị ước màn hình khác nhau, và nhi u h n n a!ề ơ ữ
Trang 23Khai báo ngay trên các element c a HTML ủ
Trang 24- Color : xác đ nh màu văn b n sẽ đị ả ượ ử ục s d ng
- Font – family: xác đ nh phông ch sẽ đị ữ ượ ử ục s d ng
- Font – size: xác đ nh kích thị ước văn b n sẽ đả ượ ử ục s d ng
- Border: xác đ nh đị ường vi n xung quanh ph n t HTMLề ầ ử
- Padding: xác đ nh m t kho ng đ m (kho ng tr ng) gi a văn b n vàị ộ ả ệ ả ắ ữ ả
đường vi nề
- Margin: xác đ nh l (kho ng tr ng) bên ngoài đị ề ả ắ ường vi nề
Ví dụ:
1.2.3 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 đó sẽ r t thu t ti n khi 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ế ế ể ộ ệ ể ự ắ
d t c a nhi u trang hay nhi u đ i tặ ủ ề ề ố ượng m t l n đ nh nghĩa Đ thay đ iộ ầ ị ể ổ
t ng th hay nhi u đ i tổ ể ề ố ượng có cùng Style, 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ó 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 25CH ƯƠ NG 2: NH NG ĐI M KHÁC BI T VÀ N I B T C A HTML5 VÀ CSS3 Ữ Ể Ệ Ổ Ậ Ủ
2.1 HTML5
Kh năng tả ương thích: HTML5 v n gi l i các cú pháp truy n th ngẫ ữ ạ ề ố
trước đây, và n u m t vài tính năng m i nào đó c a HTML5 ch a đế ộ ớ ủ ư ược trìnhduy t h tr thì nó ph i có m t c ch fall back đ render trong các trìnhệ ỗ ợ ả ộ ơ ế ểduy t cũ Đệ ương nhiên là, HTML5 không th xóa b t t c nh ng gì đã cóể ỏ ấ ả ữ
su t h n 20 năm ch trong m t ngày M c dù đi u này cũng không đ ngố ơ ỉ ộ ặ ề ồnghĩa v i vi c HTML5 h tr t t c các trình duy t, nh ng n u b n có m tớ ệ ỗ ợ ấ ả ệ ư ế ạ ộtrình duy t đ cũ đ không tệ ủ ể ương thích v i HTML5, có lẽ đã đ n lúc b nớ ế ạnâng c p trình duy t m i.ấ ệ ớ
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ẽ ơ ả ơ ộ ạ
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ể ặ ư ầ ủ ộ ữ ấ
Trang 26m 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ẻ ữ ẻ ờ ừ ệ ả trangweb 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ạ ầ ế ệ ỗ
Trang 27+ 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 câu l nh trong HTML sẽ không đữ ệ ược dùng trong HTML 5
Bên c nh đó HTML5 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 ObjectModel – Trong HTML đã đượ ức ng d ng).ụ
Các u đi m c a HTML5 cho l p trình viên Ư ể ủ ậ
HTML5 mu n l p trình viên có nhi u h n s linh ho t trong vi c thi tố ậ ề ơ ự ạ ệ ế
k website và có r t nhi u c i ti n m nh mẽ đáng đ nh c đ n nh sau:ế ấ ề ả ế ạ ể ắ ế ư
Persistent error handling
H u h t các trình duy t đ u h tr parse cho nh ng c u trúc khôngầ ế ệ ề ỗ ợ ữ ấchính xác c a HTML code, nh ng nhi u năm v trủ ư ề ề ước, không có chu n nàoẩ
đ x lý vi c này Có nghĩa là l p trình viên khi g p trình duy t m i ph i tể ử ệ ậ ặ ệ ớ ả ự
ki m tra HTML trên các trình duy t đ đ m b o l i có th để ệ ể ả ả ỗ ể ược x lý b iử ởnhi u ki n trúc khác nhau Vì v y, s đ ng nh t v kh năng x lý l i c aề ế ậ ự ồ ấ ề ả ử ỗ ủHTML5 là m t khác bi t và l i th r t l n trong v n đ này S t i u trongộ ệ ợ ế ấ ớ ấ ề ự ố ưthu t toán parsing đậ ược dùng trên HTML5 là m t l i th không th đ mộ ợ ế ể ế
được Th ng kê cho th y g n 90% website có th có l i v coding cho nênố ấ ầ ể ỗ ề
vi c x lý nh ng l i nh v y là r quan tr ng H n n a, qu n lý l i cũngệ ử ữ ỗ ư ậ ấ ọ ơ ữ ả ỗ
ti t ki m đế ệ ược chi phí và th i gian cho l p trình viên.ờ ậ
Trang 28C i thi n ng nghĩa cho elements ả ệ ữ
Đ c i thi n l i code, To enhance code insinuation, m t s c i ti n đãể ả ệ ỗ ộ ố ả ế
được th c thi n cho vai trò ng nghĩa c a m t s elements đã có s n.ự ệ ữ ủ ộ ố ẵSection, article, nav và header là nh ng element m i đã thay th h u h t cácữ ớ ế ầ ếelement div cũ, và vi c này cũng giúp ích r t nhi u cho vi c quét l i, vì nóệ ấ ề ệ ỗ
đ ph c t p h n nhi u.ỡ ứ ạ ơ ề
Tăng tính t ươ ng thích cho ng d ng web ứ ụ
M t trong s các m c đích chính c a HTML5 là cho phép trình duy t xộ ố ụ ủ ệ ử
lý nh là m t n n t ng ng d ng Website trong quá kh ít ph c t p h nư ộ ề ả ứ ụ ứ ứ ạ ơ
nh ng qua th i gian, đòi h i cũng tăng lênh HTML5 cho phép l p trình viênư ờ ỏ ậtăng quy n qu n tr c a hi u năng website Trong quá kh , l p trình viênề ả ị ủ ệ ứ ậ
ph i dùng r t nhi u phả ấ ề ương th c khác nhau vì h n ch v công ngh phíaứ ạ ế ề ệserver và browser extension ch a có Bây gi , v i HTML5, không c n ph iư ờ ớ ầ ả
s d ng JS ho c Flash đ ch y n a (nh đã t ng ph i làm v i HTML4) vìử ụ ặ ể ạ ữ ư ừ ả ớcác element hi n di n trong HTML5 đã có kh năng th c thi t t c ch cệ ệ ả ự ấ ả ứnăng
D ng web mobile d dàng h n ự ễ ơ
K c bây gi , t o m t phiên b n mobile cho website cũng có th khi nể ả ờ ạ ộ ả ể ế
l p trình viên đau đ u Nhân kh u c a vi c s h u đi n tho i di đ ng đãậ ầ ẩ ủ ệ ở ữ ệ ạ ộbùng n trong th p k qua, t o nên m t nhu c u th c s cho vi c nâng c pổ ậ ỷ ạ ộ ầ ự ự ệ ấchu n HTML Ngẩ ười dùng cu i mu n có th truy c p web b t kỳ lúc nào v iố ố ể ậ ấ ớ
b t kỳ thi t b nào, cho nên vi c có m t website responsive là c n thi t.ấ ế ị ệ ộ ầ ếHTML5 h tr r t nhi u cho di đ ng, vì có th ph c v cho các thi t b đi nỗ ợ ấ ề ộ ể ụ ụ ế ị ệ
t này.ử
Canvas element
M t tính năng độ ược nh c đ n nhi u nh t c a HTML là elementắ ế ề ấ ủ
Trang 29khi có r t nhi u website v n s d ng Flash, HTML5 v n khi n cho nhi uấ ề ẫ ử ụ ẫ ế ề
người yêu thích h n, tin hay không, Flash sẽ s m tr nên l i th i.ơ ớ ở ỗ ờ
S d ng canvas element, l p trình viên có th vẽ đ h a s d ng nhi uử ụ ậ ể ồ ọ ử ụ ềmàu và hình d ng khác nhau ch b ng cách dùng script ạ ỉ ằ (ví d : JavaScript).ụCũng c n bi t là canvas ch là graphic container đ đ nh nghĩa hình nh, m tầ ế ỉ ể ị ả ộscript c n ph i đầ ả ược th c thi Ví d khi mà JavaScript đự ụ ược dùng chung v iớcanvas là:
<canvas id=”TestCanvas” width=”200″ height=”100″></canvas>
var c = document.getElementById(“TestCanvas”);
var context = c.getContext(“2d”);
context.fillStyle = “#FF0000”;
context.fillRect(0,0,140,75);
The Menu element
Element m i thêm là <menu>ớ và <menuitem> là thành ph n tầ ương tác
được, chuyên dùng nh ng không hay đư ược bàn đ n trong c ng đ ng l pế ộ ồ ậtrình viên Tuy nhiên, nh ng element này có th đữ ể ược dùng đ đ m b o khể ả ả ảnăng tương tác c a web.ủ
<menu> tag được dùng đ đ i di n cho l nh menu trong mobile ho cể ạ ệ ệ ặdesktop application vì tính đ n gi n Cách dùng có th là:ơ ả ể
Trang 30B n có th thêm attributes tùy ý trạ ể ước khi có HTML5, nh ng r t khó, víư ấ
d , trong HTML4, custom attributes sẽ đôi khi làm t t trang c a b n hoànụ ắ ủ ạtoàn, và chúng có th thể ường gây xung đ t d li u D li u data-* attributeộ ữ ệ ữ ệtrong HTML5 đã kh c ph c đắ ụ ược vi c này Có r t nhi u cách dùng choệ ấ ềattribute này, nh ng cái chính là làm n i ch a thông tin c a các elementsư ơ ư ủkhác nhau Bây gi , custom data có th đờ ể ược thêm vào, nó cũng giúp l pậtrình viên tăng c h i t o m t trang web tơ ộ ạ ộ ương tác t t và hi u qu cao màố ệ ảkhông c n ph i tìm hi u v server ho c call Ajax.ầ ả ể ề ặ
T m bi t cookies ạ ệ
Local storage là m t nâng c p c c l n c a HTML5 Trong nh ng ngàyộ ấ ự ớ ủ ữ
trước-HTML5, n u l p trình viên mu n l u b t kỳ thông tin nào, h ph iế ậ ố ư ấ ọ ả
t o cookies Cookies có th l u m t vài lo i d li u (ch a k , m i ngạ ể ư ộ ạ ữ ệ ư ể ọ ườighét chúng) và đi u này làm localstorage tr nên có nhi u l i th h n so v iề ở ề ợ ế ơ ớHTML5 localStorage object là m t ph n c a global windows namespace vàộ ầ ủ
có th để ược truy c p b t kỳ đâu n u mu n qua scripts.ậ ấ ế ố
M t s trình duy t có h tr HTML 5: Firefox, Chrome, Safari, Operaộ ố ệ ỗ ợMicrosoft cũng đã dc công b là sẽ đ 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 ….ầ
M t phiên b n m i c a b t kỳ ngôn ng nào cũng t t h n, và HTML5 làộ ả ớ ủ ấ ữ ố ơ
m t minh ch ng t t nh t V i m i năm trôi qua, l p trình viên sẽ càng cáiộ ứ ố ấ ớ ỗ ậthi n, t n d ng u th c a HTML5 H n n a, social media cũng đệ ậ ụ ư ế ủ ơ ữ ược trông
đ i sẽ làm thay đ i h n n a ngôn ng này.ợ ổ ơ ữ ữ
Khi làn sóng thay đ i t n công nhi u l p trình viên trên th gi i, có thổ ấ ề ậ ế ớ ể
th y đấ ược s tích h p HTML5 sẽ ngày càng nhay Đ t i u hi u su t c aự ợ ể ố ư ệ ấ ủ
nh ng trình duy t tân ti n ngày nay, hãy s d ng HTML5 s m nh t có th ữ ệ ế ử ụ ớ ấ ể2.2 CSS3
Trang 31trong ti n trình c a Thu c tính CSS.ế ủ ộ CSS3 ch a t t c m i th có trongứ ấ ả ọ ứCSS2.1 (phiên b n trả ướ Nó cũng b sung các tính năng m i đ giúp cácc) ổ ớ ểnhà phát tri n gi i quy t m t s v n đ mà không c n đánh d u phi ngể ả ế ộ ố ấ ề ầ ấ ữnghĩa, t p l nh ph c t p ho c hình nh b sung.ậ ệ ứ ạ ặ ả ổ
Thay đ i l n nh t hi n c a CSS3 là vi c gi i thi u các mô-đun.ổ ớ ấ ệ ủ ệ ớ ệ u đi mƯ ể
c a các mô-đun là ủ cho phép thu c tính độ ược hoàn thành và phê duy t nhanhệ
h n vì các phân đo n đơ ạ ược hoàn thành và được phê duy t theo t ng kh i.ệ ừ ố Các tính năng được bao g m trong CSS3 bao g m h tr cho các b ch nồ ồ ỗ ợ ộ ọ
b sung, đ bóng, góc tròn, nhi u hình n n, hình đ ng, đ trong su t ổ ổ ề ề ộ ộ ố
Nó ch a “thu c tính CSS” (đã đứ ộ ược chia thành các ph n nh h n).ầ ỏ ơ Ngoài racòn có các mô-đun m i đớ ược thêm vào M t s mô-đun quan tr ng nh tộ ố ọ ấtrong CSS3 là:
Ví dụ:
+ Đ bóngổ
Trang 32+ Cách khai báo nhi u hình n n cách nhau b i d u ph yề ề ở ấ ẩ
ph nầ t tiêng bi t nào đó (trử ệ ước đây ph i dùng javascript đ làm vi c này) ả ể ệ
Dướ đây là m t s pseudo-classes m ii ộ ố ớ
• first-of-type: Ch n ph n t đ u tiên c a th nào đó ọ ầ ử ầ ủ ẻ
• last-child: Ch ch n ph n t cu i cùng ỉ ọ ầ ử ố
• nth-child(n): ch n ph n t th nọ ầ ử ứ
• not(e): ch n t t c tr ph n t e ọ ấ ả ừ ầ ử
Resize
V i CSS3 b n có th thay đ i kích thớ ạ ể ổ ước ph n t v i thu c tính resize.ầ ử ớ ộ
V iớ đo n mã sau, b n sẽ th y dạ ạ ấ ưới cùng bên ph i c a th div#ntuts xu tả ủ ẻ ấ
hi n m tệ ộ hình tam giác nh đ thay đ i kích thỏ ể ổ ước:
div#ntuts {
resize: both;