Hello HTML CSS3 (part 1 – HTML)
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (888.27 KB, 28 trang )
Môn: Giao Tiếp Người Máy
Seminar: Hello! HTML & CSS3
(Part 1 – HTML)
Mục tiêu:
1.
2.
3.
4.
5.
Giới thiệu HMTL5
HTML5 form
Dynamic Graphic
Audio and video
Tổng quan HTML5 API
I.
Giới thiệu HTML5
Định nghĩa HTML5: là một chuẩn để cấu trúc và hiện diện nội dung trên
WWW. Là những thành phần đánh dấu/ cú pháp mơi, thẻ mới các công nghệ
mới có tác dụng cung cấp tính năng mạnh mẽ cho bộ công cụ tạo ra website
hữu dụng và tinh xảo.
Các thành phần mới trong HTML5:
+ Thành phần chính: <header>, <nav>, <section>, <article>, <aside>,
<footer>
+Thành phần mới bổ sung:
- <video> và <audio>: cho phép nhúng video và file âm thanh trong trang
web, không cần sử dụng đến plug-in của trình duyệt.
Cú pháp: <video src= ” ” width =“ “ height=“ “ ></video>
<audio src=“ “ control preload=“ “></audio>
- <canvas>: <canvas id=“ “></canvas>
- Web form: Thành phần form mới trong HTML khi được thực thi sẽ giúp
quá trình làm việc với các form dễ dàng hơn.
-Một số thành phần mới khác:
<figure>, <figurecaption>: gán nhán( hoặc chú thích) cho hình ảnh.
<hgroup>: nhóm các thành phần vào các thành phần hợp lý.
Khai báo DOCTYPE: kiểm tra hợp lệ các tài liệu
<! DOCTYPE html>
Phần tử nội dung (content) của HTML5:
- Phần tử <header>: Đại diện cho một nhóm hỗ trợ, giới thiệu or định hướng
<header>
Title
</header>
-
Phần tử <nav> : chứa các thành phần định hướng cho web
<nav>
<ul>
<li> </li>
</ul>
</nav>
- Phần tử <section>: biểu diễn một vùng chung của tài liệu hoặc ứng dụng
- Phần tử <article>: thành phần tự chứa trong một tài liệu , trang, ứng dụng…
Phần tử này có thể có một <header>, <footer>
<article>
<header>
Nôi dung h2
</header></article>
-Phần tử <aside>: sử dụng cho vùng sidebar của website, vùng nội dung liên
quan bên trong phần tử <section>
<aside id=“ ”>
Nội dung h2
Văn bản
</aside>
-Phần tử <footer>: Không thuộc lớp các phần tử chia đoạn, có thể có nhiều
footer trên một trang web.
<footer id=“f1”>
@Copyright LTX
</footer>
Các mô hình nội dung HTML5 (The HTML5 content model):
Xác định giá trị sử dụng của các phần tử tại một ví trí cụ thể
-
Flow Content: Đại diện cho các phần tử được coi là nội dung của trang web
Sectioning Content: Xác định phạm vi của các header và footer
Heading Content: Chứa các phần tử tiêu đề chuẩn, bổ sung thêm <hgroup>
Phrasing Content: là văn bản của tài liệu bao gồm các phần tử đánh dấu văn
bản bên trong đoạn văn
Embedded Content: Là một dung nhập một tài nguyên khác như hình ảnh hay
video.
Interactive Content: Là những phần tử sử dùng để tương tác người dùng
Metadata Content: Là phần nội dung thiết lập cách trình bày hoặc hành vi các
nội dung có trên trang web, thiết lập quan hệ giữa các tài liệu thường chứa từ
khóa hoặc mô tả cho trang web.
II. HTML5 forms
Định nghĩa: Form là thành phần cơ bản của ứng dụng web , bổ sung thêm chức
năng để phát triển web.
Cấu trúc mã form:
<form id=“ “ action=“” method=“post”>
</form>
+ id: cho phép kiểu form với CSS
+ Action: Nơi gửi dữ liệu của người dùng để xử lý
+ Method: Xác định phương thức gửi dữ liệu giá trị POST/GET
- Làm việc với thành phần <lable>: Tăng khả năng truy cập cho form.
-Làm việc với thành phần <fieldset>: Nhóm các phần tử form trên trang, kết
hợp với <legend> để thêm tiêu đề cho form
-Thêm điểu khiển <input> mới và thuộc tính : Để sắp xếp dữ liệu các website dể
dàng, dữ liệu có thể gửi tự động tới một cơ sở dữ liệu xác định.
-Làm việc với thành phần <datalist>: Xác định một danh sách tùy chọn cho input
-Một số thành phần mới trong điều khiển input:
III.Dynamic Graphic
Sử dụng <canvas> để kéo các khối hình, văn bản và hình ảnh và làm việc
với phần tử này như thế nào?
Canvas là hàm API vẽ 2 chiều của HTML5.
+ Hình vẽ sử dụng Canvas: Cập nhật trong thời gian thực và lưu dưới dạng .png
+ Sử dụng <canvas> để xác định bề mặt vẽ (hướng vẽ, hình dạng, màu sắc và
dòng kết quả với Javascript.
+ Luôn làm việc với Javascript
+ Các bước làm việc với Canvas:
- Định nghĩa thành phần canvas trong HTML
- Tham chiếu bối cảnh vẽ cho các phần tử đó như một biến trong
javascript
+ Khởi tạo: <canvas id=“canvas1” width=“200” height=“100” style=“ “>
</canvas>
Kết hợp với Javascript:
var c=document.getElementById(“canvas1”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=“ “;
</script>
- getContext(“2d”) phương thức vẽ đường path, hình hôp, hình ảnh…
Ưu điểm của <canvas> :
+ Cho phép tạo grapic, hình động, các đối tượng đồ họa bằng mã
+ Khả năng mạnh mẽ, làm game, tính linh hoạt, đồ thị, vector….
+ Không phải sử dụng thêm plugin
Vẽ đường path: tạo các hình dạng cơ sở: hình chữ nhật, đường thẳng, đường
cong, hình tròn
Vẽ hình chữ nhật:
Vẽ đường thẳng:
Vẽ text:
Vẽ Gradient:
IV. Audio and Video:
Vì sao audio và video lại quan trọng với website?
Cách thêm audio và video vào trang web
Điều khiển video với javascript
Thêm video và âm thanh vào trang web tạo nên trang web hấp dẫn hơn, thu
hút sự truy cập của người dùng.
Trước khi có HTML5 phải sử dụng plug-in của công ty thứ 3 như; flash,
Microsoft Silverlight…
HTML5 chèn audio và video:
+ Cung cấp thành phần HTML video chạy trên trình duyệt
+ Tích hợp thêm javascript
+ Các thuộc tính phổ biến:
Câu lệnh:
Thuộc tính autoplay: Thuộc tính quy định với trìh duyệt đoạn video sẽ
được chơi
ngay khi trang được load.
Cung cấp các điều khiển cho video và audio:
Thuộc tính control: cung cấp trình điều khiển video các trình duyệt
khác nhau
Thuộc tính repload : Cho phép tải đoạn video ngay khi tải trang web, giảm thời
gian tải video
Thuộc tính audio : Cho phép tắt tiếng của video, giá tri ‘muted’
Thuộc tính loop : Kích hoạt đoạn video phát lại
Thuộc tính poster: Chỉ định cho trình duyệt load hình ảnh ban đầu của video
Thuộc tính width, height: Chỉ định kích thước của video
Thêm các thuộc tính để video được hỗ trợ trên nhiều trình duyệt:
- Có nhiều định dạng, codec cho video nhưng không phải lúc nào cũng hỗ trợ
HTML5 video hiển thị trên các trình duyệt
- Định dạng Ogg:
+ Định dạng theo mã nguồn mở.
+ Được hỗ trợ bởi các trình duyệt: Chrome, FireFox, Opera
- Định dạng Mp4:
+ Sử dụng codec H.264 và âm thanh sử dụng codec AAC
+ Được hỗ trợ bởi IE, Safari, iOS và Android
- Để đoạn video ở cả hai định dạng Ogg và Mp4 sẽ giúp hiển thị tốt trên các
trình duyệt và thiết bị.
- Thêm thuộc tính type codecs: mô tả cấu trúc kiểu file ogg, mp4
Điều khiển audio và video với javascript: Khởi tạo hàm trong javascript
để thực hiện các sự kiện play, pause,…
Một số trình duyệt hỗ trợ:
V. Tổng quan về HTML API
API (Application Programming Interfaces) – giao diện lập trình ứng dụng
- Là cách tạo ra các ứng dụng sử dụng các thành phần được dựng sẵn.
- Không chỉ áp dụng trong phat triển web mà còn cả các ngôn ngữ kịch bản.
- Mục đích chính của API: chuẩn hóa cơ chế làm việc và đơn giản hóa các nhiệm
vụ lập trình phức tạp
- Một số HMTL API: Drag and Drop, Web Storage, Microdata, Geolocation
API Geolocation:
- Giúp xác định vị trí địa lý của trình duyệt web
- Thông tin được gửi dữ liệu dưới dạng dữ liệu liên quan dựa trên vị trí
- Geolocation hiện tại đang được kích hoạt trong một số trình duyệt hiên đại
Ví dụ: flick.com/map
