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 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 Wed 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ầ ế ộ ố ụ ề ữ ạ ể ớ
1
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 đ vi t m t website đ n gi 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: T ng quan html5, css3ươ ổ
Khái ni m HTML, CSSệ
Đi m m nh c a HTML5, CSS3ể ạ ủ
Ch ng 2: Phân tích thi t k h th ngươ ế ế ệ ố
Ch ng 3ươ : Thi t k websiteế ế
S d ng joomla đ làm m t website tin t cử ụ ể ộ ứ
ng HTML5 và CSS3 vào trong các bài vi tứ ế
Ch ng 4ươ : K t lu n và h ng phát tri 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 Thái Nguyên đã 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 ừ ặ ệ ầ Nguy n Qu c B oễ ố ả 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.ướ ẫ ự ế ậ ỉ ả ề
2
CH NG 1ƯƠ : T NG QUAN V HTML5 VÀ CSSỔ Ề
1. C b n v HTML và CSSơ ả ề
1.1. HTML:
1.1.1. Đ 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ể ể ả ầ ấ ẻ
1.1.2. 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.ồ ộ ủ ệ
3
- Các thu c tính c a th HTMLộ ủ ẻ
Nh 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 c a trang HTML: <body>. V i m t thu c tính thêm vào là bgcolor, b n cóủ ớ ộ ộ ạ
th báo cho trình duy t bi t r ng màu n n c a trang này là màu đ , gi ng nhể ệ ế ằ ề ủ ỏ ố ư
sau: <body bgcolor="red"> ho c <body bgcolor="#E6E6E6"> (#E6E6E6 là giá trặ ị
hex c a màu)ủ
Th này s xác đ nh d ng b ng HTML:<table> v i m t thu c tính đ ngẻ ẽ ị ạ ả ớ ộ ộ ườ
vi n ề
(border), b n có th báo cho trình duy t bi t r ng b ng s không có đ ngạ ể ệ ế ằ ả ẽ ườ
vi n: <table border="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, "red" ho c 'red'ấ ặ ặ
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 đ c dùng. Víậ ổ ế ơ ể ơ ư ể ượ
d trong 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='ban"tay"den'
1.1.3. C b n v các th HTML:ơ ả ề ẻ
Nh ng th quan tr ng nh t trong HTML là nh ng th xác đ nh Heading,ữ ẻ ọ ấ ữ ẻ ị
đo n văn và xu ng dòng.ạ ố
Headings
Headings đ c đ nh d ng v i hai th <h1> đ n <h6>. <h1> xác đ nhượ ị ạ ớ ẻ ế ị
heading l n nh t. <h6> xác đ nh heading nh nh tớ ấ ị ỏ ấ
<h1>Đây là heading</h1>
<h2>Đây là heading</h2>
HTML s t đ ng thêm m t dòng tr ng tr c và sau m i heading.ẽ ự ộ ộ ắ ướ ỗ
4
Đoạn văn – paragraphs
Paragraphs đ c đ nh d ng b i th <p>.ượ ị ạ ở ẻ
<p>Đây là đo n văn</p>ạ
<p>Đây là m t đo n văn khác</p>ộ ạ
HTML s t đ ng thêm m t dòng tr ng tr c và sau m i heading.ẽ ự ộ ộ ắ ướ ỗ
Line Breaks - xu ng dòngố
Th <br> đ c s d ng khi b n 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 khác. Th <br> s t o ra m t l n xu ng dòng khiố ắ ầ ộ ạ ẻ ẽ ạ ộ ầ ố
b n vi t nó.ạ ế
<p>Đây <br> là m t đo<br>đo n văn v i th xu ng hàng</p>ộ ạ ớ ẻ ố
Th <br> là m t th tr ng, nó không c n th đóng dẻ ộ ẻ ố ầ ẻ ạng </br>
L 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. B n có th s d ng chúộ ẽ ượ ỏ ở ệ ạ ể ử ụ
thích đ gi i thích v code c a b n, đ sau này b n có ph i quay l i ch nh s aể ả ề ủ ạ ể ạ ả ạ ỉ ử
gì thì cũng d nh h n.ễ ớ ơ
<!-- Chú thích trong này -->ở
B n c n m t d u ch m than ! ngay sau d u nh h n nh ng không c n ạ ầ ộ ấ ấ ấ ỏ ơ ư ầ ở
dấu
l n h n.ớ ơ
Các ký t đ c bi t trong HTMLự ặ ệ
M t vài ký t t ng t nh d u nh h n <, có m t ý nghĩa đ c biộ ự ươ ự ư ấ ỏ ơ ộ ặ ệt trong
HTML, và do đó không th đ c s d ng nh là ch đ c. Do v y đ hi n thể ượ ử ụ ư ữ ượ ậ ể ể ị
đ c d u nh h n < trong HTML chúng ta ph i s d ng nh ng ký t đ c bi t.ượ ấ ỏ ơ ả ử ụ ữ ự ặ ệ
B i vì d u < xác đ nh đi m b t đ u c a m t th HTML. Nên n u b n mu nở ấ ị ể ắ ầ ủ ộ ẻ ế ạ ố
trình duy t hi n th ký t đó b n ph i thêm và code c a nó nh ng ký t đ cệ ể ị ự ạ ả ủ ữ ự ặ
bi t.ệ
M t ký t đ c bi t có 3 ph n: Ký hi u (&), tên c a ký t ho c m t d u # vàộ ự ặ ệ ầ ệ ủ ự ặ ộ ấ
m t dãy s và cu i cùng là d u ch m ph y ;ộ ố ố ấ ấ ẩ
5