THIẾT KẾ WEBSITE - thayphet.netthayphet.net/application/upload/products/05.Chuong05moi.pdf ·...

1

Chƣơng 5

NGÔN NGỮ HTML5, CSS3 VÀ JQUERY

www.thayphet.net - [email protected] © Dương Thành Phết

KHOA CAO ĐẲNG THỰC HÀNH

THIẾT KẾ WEBSITE (Chuyên ngành: Quản Trị Mạng Máy Tính

2 2

© Dương Thành Phết

NỘI DUNG

www.thayphet.net - [email protected]

1. Ngôn ngữ HTML 5

2. Ngôn ngữ CSS 3

3. Ngôn ngữ Jquery

3

© Dương Thành Phết http://www.thayphet.net

1. NGÔN NGỮ HTML 5

1.1. Giới thiệu về HTML 5

1.2. HTML 5 Tag

1.3. HTML 5 Audio & HTML 5 Video

1.4. HTML 5 Drag & Drop

1.5. HTML 5 Canvas & HTML 5 SVG

1.6. HTML 5 Form

1.7. HTML5 API

1.8. HTML 5 trong tương lai

4


1.1. GIỚI THIÊU VỀ HTML 5

- HTML5 là phiên bản sửa đổi thứ 5 của ngôn ngữ HTML

5



- Phát triển bởi nhóm Web Hypertext Application

Technology Working Group (WHATWG) từ 10/2009,

dưới dự án Web Applications 1.0, hoàn thiện năm 2002

- Về kỹ thuật dự kiến sẽ được hoàn thiện vào tận năm

2022.

6



Ngữ nghĩa

Thiết bị truy cập

Hiệu năng

Đa phương tiện

Kết nối

Đồ họa 3D,hiệu ứng

Css3

1.1.1. ƢU ĐIỂM Lưu trữ

7



HTML5 giảm bớt sự phụ thuộc vào các công nghệ độc

quyền như Flash.

HTLM5 còn cho phép giao tiếp 2 chiều với máy chủ, vì

thế các nhà phát triển có thể thử nghiệm game, chat, điều

khiển từ xa….

8



HTML5 – Mang đến sức sống mới cho Web

- Có khả năng hỗ trợ API (Application Programming

Interface) và DOM (Document Object Model) sẽ cho phép

dễ dàng mở rộng.

- Hỗ trợ tốt trên nhiều thiết bị nhơ các trình duyệt phổ

biến: Firefox, Chrome, Opera, Internet Explorer, Android.

9


Sau đây là 9 tiện ích của HTML5:

HTML5 làm giảm tầm quan trọng của các plug-ins

HTML5 hỗ trợ đồ họa tương tác

HTML5 cho phép các ứng dụng kết nối tới khu vực lưu

trữ file

HTML5 sẽ đơn giản hóa chia nhỏ dữ liệu.

HTML5 giúp hợp nhất các địa chỉ

HTML5 làm video của Web đẹp hơn

HTML5 tạo ra wiget chat

HTML5 có thể tăng khả năng bảo mật

HTML5 đơn giản hóa việc phát triển web


10



1.1.2 Nhược điểm HTML5:

Còn nhiều phiên bản cũ của trình duyệt, hệ điều

hành chưa hỗ trợ HTML5.

11


1.2. HTML 5 Tag

Cấu trúc trang của HTML5

12


1.2. HTML 5 Tag

Các thẻ mới của HTML5 so với HTML 4

13


1.2. HTML 5 Tag

Các thẻ mới của HTML5 so với HTML 4(tt)

14



Tag video <video src=”">Dòng thông báo</video>

Đoạn text nằm bên trong <video> … </video> sẽ hiển thị

khi trình duyệt không hỗ trợ tag <video>

<video src="demovideo.ogg" controls="controls">

</video>

Đoạn phim được hiển thị bằng thẻ video (không cần 1 plug-in nào)

15



Tag Audio

Thẻ <audio> hỗ trợ play 3 định dạng phổ biến như mp3,

wav, ogg và tùy thuộc vào trình duyệt:

Browser MP3 Wav Ogg

Internet Explorer 9 Yes No No

Firefox 4.0 No Yes Yes

Google Chrome 6 Yes Yes Yes

Apple Safari 5 Yes Yes No

Opera 10.6 No Yes Yes

<audio src=“Cogaisaigonditaidan.mp3" autoplay controls></audio>

Ví dụ:

16



Các thuộc tính

Attribute Value Description

autoplay autoplay Tự động play khi file audio

đã sẵn sàng.

controls controls Hiện thanh điều khiển.

loop loop Lặp lại file audio tương tự

repeat .

preload auto metadata none Tự động play khi load trang

src URL Đương dẫn file audio

17



Là khả năng kéo và thả một đối tượng. Các trình duyệt hỗ

trợ tính năng này. .

18



<head>

<style type="text/css">

#div1 {

width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

<script type="text/javascript">

function allowDrop(ev)

{ ev.preventDefault(); }

function drag(ev)

{ ev.dataTransfer.setData("Text",ev.target.id); }

function drop(ev)

{

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

ev.preventDefault();

}

</script>

</head>

19



<body style="text-align:center">

<p>Bạn hãy rê chuột kéo hình HTML5VN.NET vào

khung bên trái:</p>

<div id="div1" ondrop="drop(event)"

ondragover="allowDrop(event)"></div>

<br />

<img id="drag1" src="Hinh.jpg" draggable="true"

ondragstart="drag(event)" width="336" height="69" />

</body>

20



Giải thích:

- Thuộc tính draggable=”true” sẽ cho phép đối tượng

có khả năng được kéo và thả.

- Khi sự kiện Drag xảy ra, chúng ta gọi

hàm drag(event) và hàm setData() để thiết lập giá trị

khi Drag.

- Trong khi chúng ta đang Drag thì mặc định chúng ta

không thể thả xuống một đối tượng khác trong WEB vì

thế ta phải gọi hàm event.preventDefault().

- Khi Drop đối tượng ta gọi hàm drop(event) để thực

hiện sự kiện.

21


1.5. HTML 5 CANVAS & HTML 5 SVG

1.5.1 HTML 5 SVG (vẽ các hình học bằng vector)

Dùng thẻ <svg> </svg> bao bọc các thẻ hình học như

<circle>, <rect>, <text>,….

VD: Để vẽ một vòng tròn sử dụng phương thức arc() và

xác định góc bắt đầu từ 0 và góc kết thúc như 2 * PI.

ontext.arc(centerX,centerY,radius,0,2*Math.PI,false);

Hình tròn tạo bởi SVG

22



1.5.1 HTML 5 SVG (vẽ các hình học bằng vector)

Thẻ Công dụng

<rect> Vẽ hình chữ nhật

<circle> Vẽ hình tròn

<ellipse> Vẽ hình ellipse

<line> Vẽ đường thẳng

<polygon> Vẽ đa giác

<text> Vẽ chữ

23



1.5.2 HTML 5 CANVAS (Vẽ đồ họa)

Một hình ảnh đươc vẽ trên canvas

Một game 3D sử dụng canvas

chạy trên nền web

Có thể ứng dụng canvas trong rất nhiều lĩnh vực như:

đồ hoạ, game, trình chiếu,..

24



1.5.2 HTML 5 CANVAS (Vẽ đồ họa)

Thẻ canvas định nghĩa một vùng chữ nhật để làm việc.

Có thể vẽ lên canvas các hình như đương thẳng, hình

chữ nhật, hình tròn, văn bản,... bằng các hàm

Javascript.

Các trình duyệt các phiên bản sau này đểu hỗ trợ

Canvas.

Để tạo ra một đối tượng canvas.

<canvas id="myCanvas" width="200" height="100">

</canvas>

25


1.6. HTML 5 FORM

26


1.7. HTML 5 API

API(Application Progamming Interfaces-giao diện lập

trình ứng dụng):

27


1.7. HTML 5 API

HTML5 API Geolocation: Giúp xác định vị trí địa lý của trình duyệt.

28


1. 8. HTML 5 TRONG TƢƠNG LAI

Nên sử dụng HTML 5 ngay từ bây giơ, đó chính là

tương lai của công nghệ web.

Càng ngày sẽ càng có nhiều công ty, doanh nghiệp

ứng dụng HTML5 vào công nghệ của mình và tương

lai bạn sẽ tìm thấy thành công.

HTML5 về cơ bản chỉ là HTML, không khó.

29


2. NGÔN NGỮ CSS 3

2.1. Giới thiệu CSS3

2. 2. Đương viền (border)

2.3. Hiệu ứng cho văn bản

2.4. Giao diện ngươi dùng

2.5. Tạo multiple columns

2.6. Hình nền

30


2.1. GIỚI THIÊU VỀ CSS3

2.1.1. KHÁI NIÊM CSS VÀ CSS3

CSS - Cascading Style Sheets

Định nghĩa cách hiển thị một tài liệu HTML.

Đặc biệt hữu ích trong việc thiết kế Web.

CSS3 là phiên bản mới nhất của CSS

Hoàn toàn tương thích với các phiên bản trước

CSS3 được chia thành module, các thành phần cũ

được chia nhỏ và bổ sung các thành phần mới.

31


2.1. GIỚI THIÊU VỀ CSS3

2.1.2. LỊCH SỬ RA ĐỜI

Phiên bản CSS đầu tiên được phát hành bởi

W3c (1996)

CSS 2 được W3c phát hành vào 5/1998

sau đó là CSS 2.1 sửa lỗi cho CSS2

CSS3 lần đầu được công bố vào 6 – 1999

vẫn đang được tiếp tục phát triển, và hoàn

thiện cho đến nay

32


2.2. ĐƢỜNG VIỀN (BORDER)

Tạo ra đương viền được bo tròn ở 4 góc

Tạo bóng mơ như một chiếc hộp

Tạo viền của một bức ảnh

Các thuộc tính:

border-radius

box-shadow

border-image

33



border-radius

34



Box-shadow

35



Sử dụng hình ảnh thay thề cho các kiểu đương viền

bình thương

border-image: source slide width outset repeat

Border-image

Slide: phần bù bên trong của hình border

Outset: số lượng diện tích mà hình border mở rộng

36



Boder-image

37


2.3. HIÊU ỨNG CHO VĂN BẢN- Text Effects

Bổ sung thêm một số tính năng mới:

hanging-punctuation

punctuation-trim

text-align-last

text-emphasis

text-justify

text-outline

text-overflow

text-shadow

text-wrap

word-break

word-wrap

Ví dụ về: text-shadow, word-wrap

38



Text-shadow

Thứ tự thuộc giá trị: Bóng ngang, bóng đứng, khoảng cách mờ và

màu sắc

39



word-wrap

40


2.4. TRANSFORM – TRANSITION- ANIMATION

2.4.1. Transform

Cho phép xoay, kéo dãn, kéo nghiên thành phần trên trang

41



2.4.2. Transition

Sử dụng link để thực hiện transition

42



2.4.2. Transition

43



2.4.2. Transition

Demo CSS3 xoay hình

44



2.4.2. Transition

45



2.4.3. Animation

46



2.4.3. Animation

47


2.5. TẠO MULTIPLE COLUMNS

Có 4 tính năng để trình bày multiple column trong CSS3:

số lượng cột, chiều rộng, khoảng cách từng cột và

khoảng cách đương viền

column-count (số cột)

column-width (chiều rộng cột)

column-gap (khoảng cách so với viền)

column-rule (viền)

Lưu ý là phải thêm định dạng browser trước các thuộc

tính (-webkit-, -moz-, -o-, …)

48


2.5. TẠO MULTIPLE COLUMNS

column-count:3;

column-width:110px;

column-gap: 20px;

column-rule: 1px solid #d6d6d6;

Ví dụ: chia 3 cột, mỗi cột rộng 110px, khoảng cách giữa

các cột 20px có đượng kẻ giữa các cột

49


2.6. HÌNH NỀN

Thông thương ta chỉ sử dụng 1 màu hay 1 hình ảnh

làm nền cho web hay 1 khung nào đó.

Multiple Background cho phép sử dụng nhiều hình ảnh

cùng 1 lúc trên 1 nền.

50


3. NGÔN NGỮ JQUERY

3.1. Giới thiệu về Jquery ?

3.2. Download và sử dụng Jquey

51


3.1. GIỚI THIÊU VỀ JQUERY

jQuery là 1 Javascript Framework, tạo ra các tương

tác trên web một cách nhanh nhất.

jQuery được khởi xướng bởi John Resig (hiện là

trưởng dự án của Mozzila) vào năm 2006.

jQuery có mã nguồn mở và hoàn toàn miễn phí, có một

cộng đồng sử dụng đông, nhiều lập trình tham gia hoàn

thiện, phát triển và viết Plugin.

jQuery luôn là lựa chọn trước tiên trong công việc khi phát triển các dự án website.

John Resig

3.1.1. JQuery là gì?

52



3.1.2. Tại sao dùng jQuery?

jQuery đơn giản hóa cách viết Javascript và tăng tốc độ

xử lý các sự kiện trên trang web tiết kiệm thơi gian và

công sức.

Sử dụng jQuery giúp giải quyết tốt vấn đề xung đột

giữa các trình duyệt web.

Học jQuery rất đơn giản, nếu nắm vững CSS, bạn có

thể tiếp cận và sử dụng jQuery nhanh chóng.

53



3.1.3. Ƣu điểm jQuery?

Hỗ trợ tốt việc xử lý Dom, Ajax…

Tương thích nhiều trình duyệt web phổ biến.

Nhỏ gọn, dễ dùng.

Ít xung khắc với các thư viện Javascript khác.

Plugin phong phú.

54



3.1.4. jQuery có thể làm đƣợc những gì?

Hƣớng tới các thành phần trong HTML: jQuery cho

phép bạn chọn bất cứ thành phần nào của tài liệu một

cách dễ dàng dựa vào jQuery selector

Thay đổi giao diện của một trang web: jQuery giúp

trang web có thể hiển thị tốt trên hầu hết các trình

duyệt.

Thay đổi nội dung của tài liệu: jQuery có thể thêm

hoặc bớt nội dung trên trang, thậm chí cả cấu

trúc HTML.

55



3.1.4. JQuery có thể làm đƣợc những gì? (tt)

Tƣơng tác với ngƣời dùng: jQuery cho nhiều

phương thức để tương tác với ngươi dùng và tối giản

các mã Event trong code HTML.

Tạo hiệu ứng động: jQuery cho phép sử dụng rất

nhiều hiệu ứng động như mơ dần, slideUp,

slideDown…

Hỗ trợ Ajax: Là công nghệ ngày càng trở nên phổ

biến, nó giúp ngươi thiết kế web tạo ra những trang

web tương tác cực tốt và nhiều tính năng.

56


3.2. DOWNLOAD VÀ SỬ DỤNG JQUERY

3.2.1. Download jQuery

Truy cập vào http://jquery.com để Download phiên

bản mới nhất. Lưu lại với file: .js

http://jquery.com/

http://jquery.com/

http://jquery.com/

http://jquery.com/

http://jquery.com/

57



3.2.2. Sử dụng Jquery

Chuẩn bị 1 tài liệu HTML mẫu như sau:

58




Chèn trong cặp thẻ <head> đoạn jQuery sau:

59




Kết quả của đoạn mã trên là khi bạn click vào button “click

me” thì đoạn văn bản ở sau nó sẽ bị mơ dần và ẩn đi.

60


TÀI LIÊU THAM KHẢO

1. http://www.w3schools.com/

2. http://slides.html5rocks.com/

3. http://www.slideshare.net/

4. http://www.vn-zoom.com/

5. http://learn.jquery.com/

http://www.w3schools.com/



http://slides.html5rocks.com/



http://www.slideshare.net/

http://www.vn-zoom.com/f138/share-tai-lieu-huong-dan-hoc-html5-css3-tieng-viet-2609783.html



http://learn.jquery.com/

61

THE END

www.thayphet.net - [email protected] © Dương Thành Phết

KHOA CAO ĐẲNG THỰC HÀNH

THIẾT KẾ WEBSITE (Chuyên ngành: Quản Trị Mạng Máy Tính

THIẾT KẾ WEBSITE - thayphet.netthayphet.net/application/upload/products/05.Chuong05moi.pdf ·...

Documents

Transcript of THIẾT KẾ WEBSITE - thayphet.netthayphet.net/application/upload/products/05.Chuong05moi.pdf ·...