Tìm hiểu HTML5 và CSS3 Ứng dụng để xây dựng một website đơn giản

Sinh Viên: Lê Duy Khánh
L p: CĐ K7cớ
Giáo Viên H ng D n: Nguy n Qu c B oướ ẫ ễ ố ả
B môn: K thu t máy tínhộ ỹ ậ
Đề Tài: Tìm hiểu HTML5 và CSS3
Ứng dụng để xây dựng một website đơn giản




Gi i Thi u Đ Tàiớ ệ ề
Gi i Thi u Đ Tàiớ ệ ề




Phân Tích Thi t K H ế ế ệ
Phân Tích Thi t K H ế ế ệ
Th ngố
Th ngố




K t Lu n và H ng Phát Tri nế ậ ướ ể
K t Lu n và H ng Phát Tri nế ậ ướ ể

 Gi I THI U V HTML5 VÀ CSS3Ớ Ệ Ề

M C TIÊU VÀ YÊU C U KHI XÂY D NG WEBSITEỤ Ầ Ự
 Gi I THI U V JOOMLAỚ Ệ Ề

 Gi I THI U V HTML VÀ CSSỚ Ệ Ề

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ể ể ả ầ ấ ẻ

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.ể ơ ả ả ế ệ ế ế
Gi I THI U V HTML VÀ CSSỚ Ệ Ề
HTML5 và CSS3 là nh ng công ngh m i nh t cho ng d ng vi c thi t ữ ệ ớ ấ ứ ụ ệ ế
k web. 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.ườ ử ụ ư ể
Gi I THI U V HTML5 VÀ CSS3Ớ Ệ Ề

HTML5 s cho phép b n xem video, nghe nh c, ch i game mà không c n s d ng ẽ ạ ạ ơ ầ ử ụ
m t plugin nh ộ ư Flash ho c ặ Silverlight.
- 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ình duy 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!ẽ ế ạ ấ ệ ớ

CSS3 cho phép b n áp d ng nhi u hình n n lên m t ph n t (element)ạ ụ ề ề ộ ầ ử

V i CSS3 b n có th thay đ i kích th c ph n t v i thu c tính ớ ạ ể ổ ướ ầ ử ớ ộ

N u CSS2 b n b h n ch v i các font nh Arial, Verdana , Tahoma ế ở ạ ị ạ ế ớ ư
vì ph n l n các máy tính có các font này thì CSS3 b n có th s d ng ầ ớ ở ạ ể ử ụ
b t kỳ font nào b n mu n. Font s đ c l y t m t đ a ch nào đó trên ấ ạ ố ẽ ượ ấ ừ ộ ị ỉ
internet.

Joomla! là m t h qu n tr n i dung mã ngu n m . Joomla! cho phép ộ ệ ả ị ộ ồ ở
ng i s d ng có th d dàng xu t b n các n i dung c a h lên ườ ử ụ ể ễ ấ ả ộ ủ ọ
Internet ho c Intranet. ặ

Joomla! có các đ c tính c b n là: b đ m trang (ặ ơ ả ộ ệ page caching) đ tăng ể
t c đ hi n th , l p ch m c, đ c tin RSS (ố ộ ể ị ậ ỉ ụ ọ RSS feeds), trang dùng đ in, ể
b n tin nhanh, blog, di n đàn, bình ch n, l ch bi u, tìm ki m và h tr ả ễ ọ ị ể ế ỗ ợ
đa ngôn ng . ữ

Các Thành Ph n c a JOOMLAầ ủ

Front-end (Frontpage): Là các trang Web mà m i ng i s đ c th y ọ ườ ẽ ượ ấ
khi truy c p vào Web Site c a b n. ậ ủ ạ

Back-end (Admin): Là ph n qu n lý Web Site dành cho các Qu n tr , ch ầ ả ả ị ủ
nhân c a Web Siteủ


Template (Temp): Là giao di n, khuông d ng, ki u m u, hình th c đ c ệ ạ ể ẫ ứ ượ
thi t k đ trình bày n i dung c a trang Web và có các v trí đ nh s n đ ế ế ể ộ ủ ị ị ẵ ể
tích h p các b ph n, thành ph n c a trang Webợ ộ ậ ầ ủ
M c tiêu xây d ng h th ng :ụ ự ệ ố

Nh m đáp ng đ c nhu c u c p nh t tin t c m i c a ằ ứ ượ ầ ậ ậ ứ ớ ủ
đ c giộ ả

Thông tin luôn đ c c p nh t m i và luôn đáp ng ượ ậ ậ ớ ứ
đ c nhu c u tim ki m thông tin c a đ c gi .ượ ầ ế ủ ộ ả
Yêu c u đ t ra cho h th ng:ầ ặ ệ ố

H tr đ c gi : ỗ ợ ộ ả
•
Có đ c nh ng thông tin h u ích.ượ ữ ữ

H tr cho thành viên:ỗ ợ
›
Đ an toàn cho h tr ng thì h th ng s c p cho thành ể ệ ố ệ ố ẽ ấ
viên m t m t kh u đ ng i qu n tr có th truy c p vào ộ ậ ẩ ể ườ ả ị ể ậ
m c qu n lý, thao tác trên c s d li u (nh b sung, ụ ả ơ ở ữ ệ ư ổ
c p nh t tin t c …)ậ ậ ứ
 S Đ PHÂN C P CH C NĂNGƠ Ồ Ấ Ứ
 S Đ TH C TH LIÊN K TƠ Ồ Ự Ể Ế
 S Đ M C Đ NH, D I Đ NH, KHUNG Ơ Ồ Ứ Ỉ ƯỚ Ỉ
C NHẢ
 PHÂN TÍCH H TH NGỆ Ố
Ho t đ ng c a Website tin t c g m 2 ho t đ ng chính:ạ ộ ủ ứ ồ ạ ộ

Ho t đ ng c a đ c giạ ộ ủ ộ ả


Ho t đ ng c a ng i qu n lýạ ộ ủ ườ ả
Ho t đ ng c a đ c gi : ạ ộ ủ ộ ả

M t khách đ c gi khi truy c p vào website, h s đ t v n đ trang ộ ộ ả ậ ọ ẽ ặ ấ ề
website có nh ng thông tin gì, thông tin v nh ng v n đ nào, cách tìm ữ ề ữ ấ ề
ki m tin t c nh th nàoế ứ ư ế

Khách hàng có th vào các chuyên m c ho c nhóm tin đ tìm ki m các ể ụ ặ ể ế
bài vi t ế

Đ c tin t cọ ứ
Ho t đ ng c a ng i qu n lý:ạ ộ ủ ườ ả

H ng d n tìm ki m tin t cướ ẫ ế ứ

Qu n lý tin t cả ứ

Phê duy t tin t cệ ứ

Ti p nh n ý ki n c a đ c giế ậ ế ủ ộ ả

Qu n lý website tin t c ả ứ
Qu n lý bài ả
vi tế
C p ậ
nh t ậ
tin
Phê
duy t ệ

tin
Tìm
ki mế
Tìm ki mế
Tìm
ki m ế
theo
nhóm
Tìm
ki m ế
theo ch ủ
đề
Tìm
ki m ế
theo t ừ
khóa
Hi n th tinể ị
Hi n ể
th ị
theo
trang
chủ
Hi n ể
th ị
theo
nhóm
Hi n ể
th ị
theo
ch ủ

đề
Qu n lý ả
danh m cụ
C p ậ
nh t ậ
nhóm
tin
C p ậ
nh t ậ
danh
m cụ
Qu n lý ả
website tin t cứ
Đ c giộ ả
Ng i ườ
qu n lýả
Tìm ki mế
Tin t cứ
Yêu c uầ
H i đápồ
Qu n lý bài ả
vi tế
Ng i đ a tinườ ư
Tin t cứ
Nhóm tin
Danh m cụ
Qu n lý ả
danh
m cụ
Tìm ki mế

Đ c giộ ả
Hi n th ể ị
tin
Tin trang chủ
Qu n lý thành viênả
Qu n lý thành viênả
Ng i đ a tinườ ư
C p ậ
nh tậ
Tin trang chủ Tin t cứ Danh m cụ
Nhóm tin
Tìm ki mế
Phê duy tệ
T
ì
m

k
i
m
ế
K
t

q
u
ế
ả
P
h

ê

d
u
y
t
ệ
Qu n lý ả
website
Nhóm tin
Tin trang
chủ
Ch đủ ề
Hi n th ể ị
trang chủ
Hi n th ể ị
theo nhóm
Hi n th ể ị
theo ch ủ
đề
Tin t cứ
Qu n lý ả
website
TK theo
nhóm
TK Theo
t khóaừ
TK theo
ch đủ ề
Ng i đ a tinườ ư

Đ c giộ ả
Tin trang
chủ
Tin t cứ Danh m cụ
Thông tin thành viên
Nhóm tin
C p nh t ậ ậ
nhóm tin
C p nh t ậ ậ
danh m cụ
Ng i qu n lýườ ả
Danh m cụ
Nhóm tin
Tin t cứ
#Id_tintuc
Tin_trangchu
Tieu_de
Tac_gia
Bi_danh
Thoigian_tao
Cap_nhat
Hinh_anh
Video
Lien_ket
Id_nhomtin
Id_danhmuc
Id_tacgia
Nhóm tin
#id_nhomtin
ten_nhom

ngay_tao
Danh m cụ
#id_danhmuc
ten_danhmuc
id_nhomtin
Tác giả
#id_tacgia
Ten_tacgia
Bi_danh
Dia_chi
ngay_sinh

 K t Lu nế ậ
 H ng Phát Tri nướ ể