ĐẠ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

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.

MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC

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.

1

ĐẠ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ụ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 Sử dựng javascript API mới ........................................................................ 8 5. 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 Tính năng mới cho Background ................................................................ 15 3. 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

MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC

2

ĐẠ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

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ẻ.

MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC

 Đặ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; }

3

ĐẠ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

Trên 1 trang web, ta có thẻ Header 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ư

, ,

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ụ:

Thuộc tính width được chứa trong thẻ table.

MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC

 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.

4

ĐẠ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

- Nguyên tắc tách khỏi:

 Có thể thấy được rằng các comments là các phần riêng trong 1 trang HTML, nó không hiển thị trên trình duyệt mà chỉ có nhiệm vụ lưu lại các ghi chú hoặc giải thích trong đoạn mã HTML.  Việc tách CSS ra thành một ngôn ngữ riêng thay vì tích hợp thành các thuộc tính trong các thẻ HTML.

- Nguyên tắc phân nhỏ:  Chia các thẻ thành nhiều phần như Header, Body. Mỗi phần đảm nhận những chức năng riêng.

- Nguyên tắc đồng nhất:

 Mỗi trang HTML đều phải khai báo đầu tiên là và phiên bản được sử dụng trong trang đó. Ví dụ: Nếu trang web sử dụng HTML 3.2 Final thì phải khai báo là:

 Mỗi thẻ HTML khi khai báo thì phải có một thẻ đóng. Ví dụ: Example.

- Nguyên tắc dự phòng:

 HTML đã hỗ trợ rất nhiều về việc chèn các ký tự vào nội dung hiển thị mà không được hỗ trợ trong siêu văn bản như các ký tự “<” và “>”. Nếu muốn sử dụng những kí tự đặc biệt này, chúng ta phải dùng mã hóa tương ứng. Ví dụ: “<”  “<”, “>”  “>”, “&” hoặc “&”  “&”.

 Có những đoạn HTML sẽ rất phức tạp vì một thẻ có thể có rất nhiều thẻ con bên trong. Điều đó sẽ gây cho người đọc rất khó hiểu. Nên thẻ

Tài liệu liên quan

Tài liêu mới