Bài giảng Thiết kế Website - Chương 5 giới thiệu các ngôn ngữ HTML5, CSS3 và JQUERY. Trong chương này người học sẽ lần lượt tìm hiểu các nội dung như: Ngôn ngữ HTML 5, ngôn ngữ CSS 3, ngôn ngữ Jquery. Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.
Trang 1Chương 5 NGÔN NGỮ HTML5, CSS3 VÀ JQUERY
KHOA CAO ĐẲNG THỰC HÀNH
THIẾT KẾ WEBSITE
(Chuyên ngành: Quản Trị Mạng Máy Tính
Trang 31 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
Trang 44
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
Trang 51.1 GIỚI THIỆU VỀ 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
Trang 66
1.1 GIỚI THIỆU VỀ HTML 5
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
Trang 88
1.1 GIỚI THIỆU VỀ HTML 5
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
Trang 9Sau đâ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 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
1.1 GIỚI THIỆU VỀ HTML 5
Trang 111.2 HTML 5 Tag
Cấu trúc trang của HTML5
Trang 1212
1.2 HTML 5 Tag
Các thẻ mới của HTML5 so với HTML 4
Trang 131.2 HTML 5 Tag
Các thẻ mới của HTML5 so với HTML 4(tt)
Trang 1414
1.3 HTML 5 Audio & HTML 5 Video
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)
Trang 151.3 HTML 5 Audio & HTML 5 Video
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ụ:
Trang 1616
1.3 HTML 5 Audio & HTML 5 Video
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
Trang 171.4 HTML 5 Drag & Drop
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.
Trang 18{ 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>
Trang 191.4 HTML 5 Drag & Drop
<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>
Trang 2020
1.4 HTML 5 Drag & Drop
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
Trang 21ontext.arc(centerX,centerY,radius,0,2*Math.PI,false);
Hình tròn tạo bởi SVG
Trang 231.5 HTML 5 CANVAS & HTML 5 SVG
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
Có thể ứng dụng canvas trong rất nhiều lĩnh vực như:
đồ hoạ, game, trình chiếu,
Trang 2424
1.5 HTML 5 CANVAS & HTML 5 SVG
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>
Trang 251.6 HTML 5 FORM
Trang 2626
1.7 HTML 5 API
API(Application Progamming Interfaces-giao diện lập trình ứng dụng):
Trang 271.7 HTML 5 API
HTML5 API Geolocation: Giúp xác định vị trí địa lý của trình duyệt
Trang 2828
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ó
Trang 292 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
Trang 3030
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
Trang 31sau đó 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
Trang 3232
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
Trang 332.2 ĐƯỜNG VIỀN (BORDER)
border-radius
Trang 3434
2.2 ĐƯỜNG VIỀN (BORDER)
Box-shadow
Trang 3636
2.2 ĐƯỜNG VIỀN (BORDER)
Boder-image
Trang 372.3 HIỆU ỨNG CHO VĂN BẢN- Text Effects
Bổ sung thêm một số tính năng mới:
Trang 392.3 HIỆU ỨNG CHO VĂN BẢN- Text Effects
word-wrap
Trang 412.4 TRANSFORM – TRANSITION- ANIMATION 2.4.2 Transition
Sử dụng link để thực hiện transition
Trang 4242
2.4 TRANSFORM – TRANSITION- ANIMATION 2.4.2 Transition
Trang 432.4 TRANSFORM – TRANSITION- ANIMATION 2.4.2 Transition
Demo CSS3 xoay hình
Trang 4444
2.4 TRANSFORM – TRANSITION- ANIMATION 2.4.2 Transition
Trang 452.4 TRANSFORM – TRANSITION- ANIMATION 2.4.3 Animation
Trang 4646
2.4 TRANSFORM – TRANSITION- ANIMATION 2.4.3 Animation
Trang 472.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)
Trang 5050
3 NGÔN NGỮ JQUERY
3.1 Giới thiệu về Jquery ?
3.2 Download và sử dụng Jquey
Trang 513.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
John Resig
3.1.1 JQuery là gì?
Trang 5252
3.1 GIỚI THIỆU VỀ JQUERY
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
Trang 533.1 GIỚI THIỆU VỀ JQUERY
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ú
Trang 5454
3.1 GIỚI THIỆU VỀ JQUERY
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
Trang 553.1 GIỚI THIỆU VỀ JQUERY
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
Trang 573.2 DOWNLOAD VÀ SỬ DỤNG JQUERY 3.2.2 Sử dụng Jquery
Chuẩn bị 1 tài liệu HTML mẫu như sau:
Trang 5858
3.2 DOWNLOAD VÀ SỬ DỤNG JQUERY 3.2.2 Sử dụng Jquery
Chèn trong cặp thẻ <head> đoạn jQuery sau:
Trang 593.2 DOWNLOAD VÀ SỬ DỤNG JQUERY
3.2.2 Sử dụng Jquery
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