ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
CHƯƠNG TRÌNH ĐÀO TẠO THẠC SĨ CNTT QUA MẠNG
________________
BÁO CÁO THU HOẠCH MÔN HỌC
PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC
TRONG TIN HỌC
Đề tài: Nguyên lý sáng tạo được ứng
dụng trong HTML 5 và CSS 3
Giáo viên hướng dẫn: GS.TSKH Hoàng Kiếm
Sinh viên thực hiện: Du Chí Hào
Mã số sinh viên: CH1101083
Tp. HCM 2012
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 1
Lời nói đầu
Khoa học và công nghệ là đặc trưng của thời đại, nghiên cứu khoa học đã trở
thành hoạt động sôi nổi và rộng khắp trên phạm vi toàn cầu. Các thành tựu của khoa
học hiện đại đã làm thay đổi bộ mặt thế giới. Khoa học và công nghệ đã trở thành động
lực thúc đẩy sự tiến bộ nhân loại. Cùng với nghiên cứu khoa học hiện đại, mọi người
đang chú ý đến phương pháp nhận thức khoa học, coi đó là nhân tố quan trọng để phát
triển khoa học.
HTML và CSS trong những bước đầu tiên phát triển và cho đến nay, đã tạo ra
được bước phát triển đột phá trong việc chia sẻ tài nguyên và thông tin trên internet.
HTML và CSS đã mang đến một thế giới muôn màu cho người dùng, cũng như là sự
đơn giản, dễ hiểu, tường minh trong từng thẻ lệnh cho những nhà phát triển web. Đó là
lý do em chọn đề tài này để em được củng cố, mở rộng kiến thức, phân tích các
nguyên lý sáng tạo được áp dụng trong HTML 5 và CSS 3. Từ đó, em sẽ vận dụng
chúng vào trong thực tế một cách hiệu quả nhất.
Em xin chân thành cám ơn thầy GS.TSKH Hoàng Kiếm đã truyền đạt những
kiến thức quý báu cho em về bộ môn “Phương pháp nghiên cứu khoa học trong tin
học” để em có thể hoàn thành bài thu hoạch này.
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 2
Mục lục
PHẦN I : HTML5 ....................................................................................................... 3
I. Giới thiệu về HTML .......................................................................................... 3
1. Lịch sử phát triển của HTML ...................................................................... 3
2. Các nguyên tắc sáng tạo áp dụng trong giai đoạn đầu của HTML ................ 4
II. Những điểm mới trong HTML 5 ..................................................................... 5
1. Doctype và charset mới ............................................................................... 5
2. Cấu trúc mới của HTML 5 .......................................................................... 6
3. Các dạng biểu mẫu nhập liệu mới ................................................................ 6
4. Các thẻ HTML mới khác ............................................................................. 8
5. Sử dựng javascript API mới ........................................................................ 8
6. Inline SVG .................................................................................................. 8
7. Web Storage và Application Cache ............................................................. 9
III. Các nguyên tắc sáng tạo được áp dụng trong HTML 5 ................................. 10
1. Nguyên tắc rẻ thay cho đắt ........................................................................ 10
2. Nguyên tắc kết hợp ................................................................................... 10
3. Nguyên tắc phân nhỏ ................................................................................. 11
4. Nguyên tắc tách khỏi ................................................................................. 11
5. Nguyên tắc vạn năng ................................................................................. 11
6. Nguyên tắc dự phòng ................................................................................ 12
7. Nguyên tắc sử dụng trung gian .................................................................. 12
8. Nguyên tắc thực hiện sơ bộ ....................................................................... 12
PHẦN II : CSS 3 ....................................................................................................... 13
I. Giới thiệu về CSS ............................................................................................ 13
1. Lịch sử phát triển của CSS ........................................................................ 13
2. Các nguyên tắc sáng tạo trong giai đoạn đầu của CSS ............................... 13
II. Những điểm mới trong CSS 3 ....................................................................... 14
1. Hiệu ứng bo tròn ....................................................................................... 14
2. Một số lựa chọn mới cho CSS ................................................................... 15
3. Tính năng mới cho Background ................................................................ 15
4. Hiệu ứng biến đổi hình dạng thẻ ................................................................ 16
5. Đổ bóng cho text ....................................................................................... 17
6. Hiệu ứng trong suốt ................................................................................... 17
7. Hiệu ứng phối màu .................................................................................... 17
8. Hiệu ứng chuyển động .............................................................................. 18
III. Các nguyên tắc sáng tạo được ứng dụng trong CSS 3 ................................... 18
1. Nguyên tắc chuyển sang chiều khác .......................................................... 18
2. Nguyên tắc phân nhỏ ................................................................................. 19
3. Nguyên tắc rẻ thay cho đắt ........................................................................ 19
4. Nguyên tắc vạn năng ................................................................................. 19
5. Nguyên tắc thay đổi màu sắc ..................................................................... 19
PHẦN III : Kết luận................................................................................................... 20
PHẦN IV : Tài liệu tham khảo .................................................................................. 21
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 3
PHẦN I : HTML5
I. Giới thiệu về HTML
1. Lịch sử phát triển của HTML
HTML (HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn
bản) là ngôn ngữ nền tảng của web. HTML được Tim Berners-Lee phát triển
vào năm 1989 ở viện thí nghiệm CERN - Thụy sỹ. Điều này đã đánh dấu một
bước phát triển mới cho xã hội thông tin. Ban đầu, ông làm việc cho viện thí
nghiệm CERN mà việc thí nghiệm phải hợp tác nghiên cứu với nhiều viện khác
trên thế giới. Tim đã nãy sinh ra ý tưởng là cho phép các nhà nghiên cứu có thể
tham khảo dữ liệu từ một nơi mà dữ liệu được tập hợp và tổ chức lại sao cho khi
đang đọc tài liệu này, nhà nghiên cứu có thể xem tài liệu liên quan bằng cách
nhấn vào một liên kết được hiển thị trên màn hình.
HTML được phát triển dựa trên ngôn ngữ Standard Generalized Markup
Language (SGML). SGML là một hệ thống tổ chức và gắn thẻ cơ bản của một
tài liệu. Ngôn ngữ này không quy định những định dạng, nguyên tắc mà nó chỉ
quy định cụ thể các quy tắc cho các thẻ (Theo wikipedia).
Tuy nhiên, đến năm 1990, phiên bản HTML đầu tiên mới được tung ra
và gần như sau một năm, ngôn ngữ HTML mới được ứng dụng. Tháng 4 năm
1993, trình duyệt đầu tiên Mosaic xuất hiện và nhóm Mosaic đã mở rộng thêm
một số thẻ mới như image, v.v…
HTML đã trải qua 4 phiên bản gồm HTML phiên bản đầu tiên (1990),
HTML 2 (1994), HTML 3 (1995), HTML 4 (1997).
Vào năm 1994, tập đoàn tài chính World Wide Web (W3C) được thành
lập với người đứng đầu là Tim Berners-Lee đã đứng ra hỗ trợ cho sự phát triển
của HTML. Qua các phiên bản phát triển, HTML ngày càng có nhiều thẻ mới,
tính năng mới cũng như là tính đơn giản hóa ngày càng cao.
HTML 4 đươc phát triển vào năm 1997 và là phiên bản thành công nhất
được sử dụng phổ biến cho đến hiện nay. Với rất nhiều thẻ mới như Button,
FieldSet, Frame, Iframe, Legend, Span v.v… Ngoài ra, HTML 4 còn hỗ trợ hiển
thị hầu hết ngôn ngữ trên thế giới dựa trên chuẩn Universal Character Set. Thay
vì các phiên bản trước chỉ hiển thị theo chuẩn ISO-8859-1. HTML 4 còn hỗ trợ
một số tính năng quan trọng sau:
Đã hỗ trợ ngôn ngữ lập trình của client-script và có thể nhúng thêm
các tập tin script bên ngoài vào. Hỗ trợ các sự kiện client-script như
onclick, onchange v.v… cho các thẻ.
Đặc biệt là HTML4 hỗ trợ CSS với các thuộc tính mới ID, Class và
Style. Ba thuộc tính này giúp các thẻ liên kết với các style được khai
báo trong CSS. Ví dụ:
Ta có 1 CSS là: .header { font-size: small; }
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 4
Trên 1 trang web, ta có thẻ <span id = “header”>Header</span>
Như vậy, khi trình duyệt hiển thị nội dung trang web, chữ “Header”
sẽ to và in đậm hơn so với các chữ khác.
Việc tích hợp với CSS này rất có ý nghĩa quan trọng cho các nhà thiết
kế web. Họ có thể sử dụng những CSS chung cho các thẻ có kiểu
hiển thị như nhau và có thể thoải mái sáng tạo giao diện mà không
tốn công sức như trước đây (khai báo các thuộc tính kiểu cho từng
thẻ).
HTML4 còn hỗ trợ nhiều hơn cho thẻ table với các thẻ table mới như
<THead>, <TFood>, <TBody>
2. Các nguyên tắc sáng tạo áp dụng trong giai đoạn đầu của HTML
- Nguyên tắc kết hợp:
Tim Berners-Lee đã có ý tưởng kết hợp và tập trung các tài liệu
nghiên cứu lại với nhau để dễ dàng tra cứu thông tin.
Kết hợp được HTML với CSS để dễ dàng thao tác các style dùng
chung cho các thẻ HTML.
Kết hợp với client-script như javascript hay vbscript để giúp cho
trang web thêm phần linh động, giúp kiểm tra tính hợp lệ trước khi
gửi yêu cầu xuống server xử lý, giảm thiểu việc truyền tải những
thông tin không cần thiết.
- Nguyên tắc thay đổi màu sắc:
Trong các thẻ HTML, một số thuộc tính giúp thay đổi màu sắc cho
một trang web như các thuộc tính bgcolor, fontcolor.
- Nguyên tắc phẩm chất cục bộ:
Mỗi thẻ HTML có những tính năng riêng và có các thuộc tính riêng
của từng thẻ.
- Nguyên tắc chứa trong:
Các thuộc tính được chứa bên trong các thẻ HTML.
Ví dụ:
<table width=”200px”></table>
Thuộc tính width được chứa trong thẻ table.
Ngoài ra, các thẻ HTML còn được chứa trong thẻ HTML khác. Việc
này rất có lợi trong việc canh chỉnh từng khu vực làm việc hiển thị
trên trang web và việc ẩn hiện một khu vực làm việc thay vì ẩn hiện
nhiều thẻ cùng lúc.