THỰC TẬP CƠ SỞ ĐỀ TÀI: Tìm hiểu html5 css3, thiết kế website đồ chơi trẻ em

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG BÁO CÁO THỰC TẬP CƠ SỞ ĐỀ TÀI: Tìm hiểu html5 css3, thiết kế website đồ chơi trẻ em L/O/G/O Giáo viên hướng dẫn: ThS Tô Hữu Nguyên Sinh viên thực hiện: Nguyễn Thị Thủy Lớp: CNTTK12B www.trungtamtinhoc.edu.vn N Nội dung báo cáo • Chương I:Tổng quan html css • Chương II: Tổng quan html5 css3 • Chương III: Xây dựng chương trình Demo thiết kế website bán đồ chơi trẻ em www.trungtamtinhoc.edu.vn Tổng Tổng quan quan về Html Html Html css ? HTML biết đến loại ngôn ngữ dùng để mô tả hiển thị trang web Html bao gồm: -Các dạng thẻ HTML -Thành phần HTML www.trungtamtinhoc.edu.vn Tổng Tổng quan quan về css css  Ưu điểm CSS  CSS tách riêng phần định dạng khỏi nội dung trang web Tính khả dụng  CSS sợi xuyên suốt trình thiết kế website  Do định nghĩa Style tách riêng khỏi nội dung trang • Các đặc tính CSS  CSS quy định cách hiển thị thẻ HTML cách quy định thuộc tính thẻ  Có thể khai báo CSS nhiều cách khác www.trungtamtinhoc.edu.vn Tổng Tổng quan quan về html5 html5 và css3 css3 • • Sự đời HTML5 HTML5 cho phép lớp ứng dụng web đời, hỗ trợ nội dung đa phương tiện tính offline mà không cần đến công nghệ độc quyền kèm www.trungtamtinhoc.edu.vn Tổng Tổng quan quan về html5 html5 và css3 css3 * Các thuộc tính HTML5 Các tính video HTML5 – cho phép đơn giản hoá việc thêm video vào trang Web * Video hiệu ứng Flash HTML5 cho phép bạn xem video mà không cần sử dụng plugin Flash Silverlight * Những lợi ích lớn với tính video HTML5 • • • Thứ nhất, miễn phí không cần cài plug-in Adobe Flash Player Thứ hai, Flash làm chậm phần máy tính bạn Sau cùng, nhiều phần mềm chạy chiếm tài nguyên hệ thống www.trungtamtinhoc.edu.vn Tổng Tổng quan quan về html5 html5 và css3 css3 *HTML5 có số mục tiêu để phân biệt với HTML HTML giữ cho cấu trúc HTML bên cạnh bổ sung thêm tập lệnh Một số trình duyệt có hỗ trợ HTML 5: Firefox, Chrome, Safari, Opera Tính tiện dụng: đặt người dùng lên hàng đầu nên cú pháp HTML5 thoải mái (dù chưa chặt chẽ XHTML), thiết kế hỗ trợ sẵn bảo mật, tách biệt phần nội dung trình bày ngày thể rõ www.trungtamtinhoc.edu.vn Tổng Tổng quan quan về css3 css3 Sự đời CSS3 • Các thuộc tính CSS3 www.trungtamtinhoc.edu.vn Tổng Tổng quan quan về css3 css3 *Các thuộc tính CSS3 • Các chọn • Bộ chọn CSS đề cập đến cách thức để định kiểu (các) phần tử HTML theo bảng định kiểu • Các hiệu ứng • Mặc dù chọn có lẽ tính làm giảm đau đầu cho nhà phát triển nhiều nhất, cải tiến mà người muốn nhìn thấy hiệu ứng sáng chói có sẵn www.trungtamtinhoc.edu.vn Tổng Tổng quan quan về css3 css3 *Các bố trí nhiều cột Các cách bố trí nhiều cột CSS3 tính đến văn trải rộng số cột, giống bạn thấy tờ báo Các phông chữ Web Các phông chữ Web thực đề xuất cho CSS2 có sẵn Microsoft Internet Explorer từ phiên Các tính khác CSS3 bao gồm nhiều tính khác, gồm hỗ trợ cho giá trị màu mới, đặc biệt HSL 10 www.trungtamtinhoc.edu.vn XÂY XÂY DỰNG DỰNG CHƯƠNG CHƯƠNG TRÌNH TRÌNH DEMO DEMO Giao diện trang web 11 www.trungtamtinhoc.edu.vn XÂY XÂY DỰNG DỰNG CHƯƠNG CHƯƠNG TRÌNH TRÌNH DEMO DEMO • Mục đăng kí 12 www.trungtamtinhoc.edu.vn XÂY XÂY DỰNG DỰNG CHƯƠNG CHƯƠNG TRÌNH TRÌNH DEMO DEMO •

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

BÁO CÁO THỰC TẬP CƠ SỞ

ĐỀ TÀI :

Tìm hiểu html5 và css3, thiết kế website đồ

chơi trẻ em

Giáo viên hướng dẫn: ThS Tô Hữu Nguyên Sinh viên thực hiện: Nguyễn Thị Thủy Lớp: CNTTK12B

N ội dung báo cáo

• Chương I:Tổng quan về html và css

• Chương II: Tổng quan html5 và css3

• Chương III: Xây dựng chương trình Demo thiết kế

website bán đồ chơi trẻ em

Tổng quan về Html

Html và css là gì ?

HTML được biết đến là một loại ngôn ngữ dùng để

mô tả hiển thị các trang web

Html bao gồm:

-Các dạng thẻ HTML

-Thành phần HTML.

Tổng quan về css

 Ư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 Tính khả dụng

 CSS là một sợi chỉ xuyên suốt trong quá trình thiết kế

một website

 Do định nghĩa các Style có thể được tách riêng ra khỏi

nội dung của trang

• Các đặc tính cơ bản của CSS

 CSS quy định cách hiển thị của các thẻ HTML bằng

cách quy định các thuộc tính của các thẻ đó

 Có thể khai báo CSS bằng nhiều cách khác nhau

Tổng quan về html5 và css3

• Sự ra đời của HTML5

• HTML5 sẽ cho phép một lớp ứng dụng web mới ra

đời, hỗ trợ nội dung đa phương tiện và các tính năng

offline mà không cần đến những công nghệ độc

quyền đi kèm

Tổng quan về html5 và css3

* Các thuộc tính mới trong HTML5

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

* Video và hiệu ứng Flash

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 lợi ích lớn với tính năng video của HTML5

• Thứ nhất, nó là miễn phí và không cần cài plug-in Adobe

Flash Player.

• Thứ hai, Flash có thể làm chậm 1 phần máy tính của bạn.

• Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy

và chiếm tài nguyên hệ thống

Tổng quan về html5 và css3

*HTML5 có một số mục tiêu để phân biệt nó với HTML

HTML 5 vẫn giữ cho mình những cấu trúc cơ bản như

HTML nhưng bên cạnh đó bổ sung thêm các tập lệnh mới

Một số trình duyệt có hỗ trợ HTML 5: Firefox, Chrome,

Safari, Opera

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õ

Tổng quan về css3

• Các thuộc tính mới

trong CSS3

Sự ra đời của CSS3

Tổng quan về css3

*Các thuộc tính mới trong CSS3

• Bộ chọn CSS đề cập đến cách thức để định kiểu

(các) phần tử HTML theo một bảng định kiểu

• Mặc dù các bộ chọn mới có lẽ là những tính năng

làm giảm đau đầu cho các nhà phát triển nhiều

nhất, những cải tiến mà mọi người muốn nhìn

thấy là các hiệu ứng mới sáng chói có sẵn

Tổng quan về css3

*Các bố trí nhiều cột

Các cách bố trí nhiều cột CSS3 tính đến văn bản được trải rộng

trên một số cột, giống như bạn có thể thấy trong một tờ báo

Các phông chữ Web

Các phông chữ Web đã thực sự được đề xuất cho CSS2 và đã

có sẵn trong Microsoft Internet Explorer từ phiên bản 5

Các tính năng mới khác

CSS3 cũng bao gồm nhiều tính năng mới khác, gồm sự hỗ trợ

cho các giá trị màu mới, đặc biệt là HSL

XÂY DỰNG CHƯƠNG TRÌNH DEMO XÂY DỰNG CHƯƠNG TRÌNH DEMO

Giao diện trang web

XÂY DỰNG CHƯƠNG TRÌNH DEMO

• Mục đăng kí

XÂY DỰNG CHƯƠNG TRÌNH DEMO

• Đăng nhập

XÂY DỰNG CHƯƠNG TRÌNH DEMO

• Giỏ hàng

Kết luận

Kết luận

 Kết quả đạt được

 Xây dựng thiết kế giao diện website bán đồ chơi trẻ em

 Thiết kế các chức năng của hệ thốngBảo mật mạng

bằng giao thức VACLs

 Giao diện thân thiện, dễ sử dụng

 Đưa hệ thống vào thử nghiệm trên hosting

Hướng phát triển của đề tài

 Mở rộng trang web với quy mô lớn hơn, có nhiều

ứng dụng hợp lý hơn

 Xây dựng website có khả năng thay đổi giao diện,

nội dung theo thời gian

Em Xin Chân Thành

Cảm Ơn !