tìm hiểu về html5 và css 3, ứng dụng để viết 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ệ Thống
Phân Tích Thiết Kế Hệ 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ị
HTML được biết đến là một loại ngôn ngữ dùng để mô tả hiển thị
các trang web.
các trang web.

*Hyper Text Markup Language chính là HTML (Viết tắt)
*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ự
* 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
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
* 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
* Để 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
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
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 để
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
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ả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ế
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
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
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ử
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.
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
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ư
một plugin như
Flash
Flash
hoặc
hoặc
Silverlight
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à
- 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ó
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à,
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.
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,
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ó
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!
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)
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
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ì
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
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
kỳ font nào bạn muốn. Font sẽ được lấy từ một địa chỉ nào đó trên
internet.
internet.

Joomla!
Joomla!

là một hệ quản trị nội dung mã nguồn mở. Joomla! cho phép
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
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.
hoặc Intranet.

Joomla!
Joomla!
có các đặc tính cơ bản là: bộ đệm trang (
có các đặc tính cơ bản là: bộ đệm trang (
page caching
page caching
) để tăng
) để tăng
tốc độ hiển thị, lập chỉ mục, đọc tin RSS (
tốc độ hiển thị, lập chỉ mục, đọc tin RSS (
RSS feeds
RSS feeds
), trang dùng để in,
), 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
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ữ.
ngôn ngữ.

Các Thành Phần của JOOMLA
Các Thành Phần của JOOMLA

Front-end (Frontpage)

Front-end (Frontpage)
: Là các trang Web mà mọi người sẽ được thấy khi
: 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.
truy cập vào Web Site của bạn.

Back-end (Admin)
Back-end (Admin)
: Là phần quản lý Web Site dành cho các Quản trị, chủ
: Là phần quản lý Web Site dành cho các Quản trị, chủ
nhân của Web Site
nhân của Web Site

Template
Template
(Temp): Là giao diện, khuông dạng, kiểu mẫu, hình thức được
(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 để
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
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 :
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ả
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

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ả.
kiếm thông tin của độc giả.
Yêu cầu đặt ra cho hệ thống:
Yêu cầu đặt ra cho hệ thống:

Hỗ trợ độc giả :
Hỗ trợ độc giả :
•
Có được những thông tin hữu ích.

Hỗ trợ cho thành viên:
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 Website tin tức gồm 2 hoạt động chính:

Hoạt động của độc giả
Hoạt động của độc giả

Hoạt động của người quản lý
Hoạt động của người quản lý

Hoạt động của độc giả:
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
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
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
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
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
bài viết

Đọc tin tức
Đọc tin tức
Hoạt động của người quản lý:
Hoạt động của người quản lý:

Hướng dẫn tìm kiếm tin tức
Hướng dẫn tìm kiếm tin tức

Quản lý tin tức
Quản lý tin tức

Phê duyệt tin tức
Phê duyệt tin tức

Tiếp nhận ý kiến của độc giả

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