Đang tải... (xem toàn văn)
Giải thích các phần tử cấu thành một tag HTMLMô tả về khai báo DOCTYPECác thẻ cơ bản trong HTMLCác kiểu dữ liệu, thuộc tính, và thực thể trong HTML5Thẻ chứa và thẻ đơnGiải thích về vai trò của HTML5 trên các thiết bị Mobile
NexTGen Web Bài 02: Giới thiệu HTML5 HTML5/ Giới thiệu HTML51 Mục tiêu Giải thích phần tử cấu thành tag HTML Mô tả khai báo DOCTYPE Các thẻ HTML Các kiểu liệu, thuộc tính, thực thể HTML5 Thẻ chứa thẻ đơn Giải thích vai trò HTML5 thiết bị Mobile © Aptech Ltd. HTML5/ Giới thiệu HTML5 Giới thiệu HTML HTML viết tắt Hyper Text Markup Language, ngôn ngữ đánh dấu dùng chủ yếu để tạo hiển thị trang Web siêu văn trình duyệt nào. Tất phần tử HTML5 tổ chức việc sử dụngcác thẻ(tag) Sử dụng thẻ (tag) ta có thể: Điều khiển hiển thị hình thức trình bày nội dung trang. Xuất tất thứ giới từ nội dung văn đơn giản đến đa phương tiện phong phú truy xuất thông tin trực tuyến cách chèn liên kết vào tài liệu HTML © Aptech Ltd. Tạo biểu mẫu trực tuyến để thu thập thông tin người dùng, quản lý giao dịch . Introduction to the HTML5 / Session Lịch sử phát triển 1-2 HTML phát triển năm qua với đời tiêu chuẩn chi tiết kỹ thuật mới. HTML 5.0 HTML 4.0 HTML 3.2 HTML 3.0 © Aptech Ltd. Introduction to the Web / Session Lịch sử phát triển 2-2 HTML5 phiên ngôn ngữ đánh dấu siêu văn (HTML). HTML5 vẫn giữ lại đặc điểm HTML4 bổ sung thêm đặc tả trội XHTML, DOM cấp 2, đặc biệt JavaScript. HTML5 bổ sung tính để thể sử dụng thiết bị di động điện thoại thông minh máy tính bảng. © Aptech Ltd. Introduction to the HTML5 / Session Các tính HTML5 Web Web workers workers API API được đưa đưa thêm thêm vào vào Có Có các control control mới cho cho nhằm nhằm hỗ hỗ trợ trợ tiến tiến trình trình nền (background) (background) form form để để không không làm làm ảnh ảnh hưởng hưởng đến đến tiến tiến trình trình chính Phần Phần tử tử và có có sẵn sẵn cho cho media media playback playback (phương (phương tiện tiện truyền truyền thông) thông) Các Các tính tính năng của Web Web socket socket API API cung cung cấp cấp kết kết HTML HTML 5 nối nối liên liên tục tục giữa máy máy chủ chủ và máy máy khách khách Cung Cung cấp cấp hỗ hỗ trợ trợ lưu lưu trữ trữ cục cục bộ Phần Phần tử tử được sử sử dụng dụng cho cho việc việc đồ đồ họa họa © Aptech Ltd. Introduction to the Web / Session Các Các phần phần tử tử nội nội dung dung giúp giúp cấu cấu trúc trúc tài tài liệu liệu Phương pháp tiếp cận linh hoạt HTML5 Cung Cung cấp cấp các tính tính năng mới trong Cung Cung cấp cấp chức chức năng bộ nhớ nhớ đệm đệm CSS CSS như bộ chọn chọn được cải cải tiến, tiến, và lưu lưu trữ trữ phía phía client client bóng bóng đổ đổ vv vv Sử Sử dụng dụng tính tính năng Web Web worker worker để để làm làm Cung Cung cấp cấp các tính tính năng mới cho cho các ứng ứng dụng dụng điện điện thoại thoại di di động động cho cho JavaScript JavaScript thêm thêm hiệu hiệu quả HTML HTML 5 Giúp Giúp tạo tạo ra các Internet Internet clients clients phong phong Giúp Giúp loại loại bỏ bỏ các plug-in plug-in (như (như phú phú bằng việc việc sử sử dụng dụng sử sử dụng dụng các Flash) Flash) và sử sử dụng dụng hỗ hỗ trợ trợ cho cho audio audio plug-in plug-in như Flash Flash và video video Cung Cung cấp cấp các phần phần tử tử mô mô tả tả ngữ ngữ nghĩa nghĩa © Aptech Ltd. Introduction to the Web / Session Cách làm việc HTML Trình duyệt tải tài liệu mà gồm có đánh dấu HTML CSS Trình duyệt tạo mô hình nội tại(internal model) tài liệu có chứa phần tử HTML sau tải trang Trình duyệt tải mã JavaScript thực chúng sau tải trang API cho phép truy cập vào audio, video, công nghệ cần thiết khác để xây dựng ứng dụng © Aptech Ltd. Introduction to the Web / Session Phần tử (element) 1-2 Các phần tử tổ chức nội dung trang Web theo dạng phân cấp, dạng cấu trúc HTML. Nó bao gồm thẻ (tag), thuộc tính (attribute), nội dung. Các thẻ biểu thị cho bắt đầu kết thúc phần tử HTML. Thẻ bắt đầu gồm có ngoặc nhọn mở(). Thuộc tính cặp name/value mô tả phần tử định dạng nội dung. Thẻ kết thúc viết giống thẻ bắt đầu, có dấu gạch chéo (/) phía trước tên phần tử. © Aptech Ltd. HTML5/ Giới thiệu HTML5 Phần tử (element) 2-2 © Aptech Ltd. Hình sau hiển thị cấu trúc phần tử HTML. HTML5/ Giới thiệu HTML5 10 DOCTYPE Thông báo cho trình duyệt số phiên HTML tài liệu bạn. Đây khai báo tài liệu HTML5 trước mã HTML khác viết. Cho phép trình duyệt để xác nó trình bày nội dung trang web bạn. DOCTYPE khai báo HTML5 © Aptech Ltd. Nó cú pháp HTML5 phiên tương lai sau HTML. DOCTYPE tương thích với trình duyệt cũ. HTML5/ Giới thiệu HTML5 13 Các thẻ 1-6 Một tài liệu HTML tạo lên từ phần tử, thẻ thuộc tính khác nhau, chúng nội dung định dạng. HTML ngôn ngữ trình bày có cấu trúc. Đánh dấu cấu trúc cấu trúc nội dung, Thẻ cấu trúc xác định cấu trúc trang, đánh dấu trình bày cách định dạng. Một trang HTML lưu với phần mở rộng .html. Cấu trúc tài liệu HTML bao gồm số phần tử sau: HTML © Aptech Ltd. Phần tử HTML phần tử gốc đánh dấu bắt đầu tài liệu HTML. Nó bao gồm thẻ bắt đầu thẻ kết thúc có dạng tương ứng. Nó phần tử chứa lớn chứa phần tử khác bên trong. HTML5/ Giới thiệu HTML5 14 Các thẻ 2-6 HEAD Phần tử HEAD cung cấp thông tin trang web từ khoá (Keyword) ngôn ngữ sử dụng. Keywords thuật ngữ quan trọng trang web, sử dụng máy tìm kiếm để xác định trang web có liên quan đến tiêu chí tìm kiếm. TITLE © Aptech Ltd. Phần tử TITLE cho phép bạn xác định tiêu đề trang web, Phần tử có dạng . Tiêu đề hiển thị Tiêu đề (Title) trình duyệt Web. Thẻ TITLE đặt bên phần tử HEAD. HTML5/ Giới thiệu HTML5 15 Các thẻ 3-6 META Thẻ meta sử dụng để hiển thị thông tin liệu. Trong HTML5, nội dung thẻ medta sử dụng để xác định character encoding. Thẻ mới: UTF-8 mã hóa ký tự thường sử dụng để hỗ trợ nhiều bảng chữ cái. Có số thuộc tính khác liên quan đến thẻ meta có thể sử dụng để khai báo thông tin chung trang. Thông tin không hiển thị trình duyệt. Thẻ Meta cung cấp cho công cụ tìm kiếm, trình duyệt, dịch vụ web với thông tin đó cần thiết để xem trước có tóm tắt liệu có liên quan tài liệu bạn. © Aptech Ltd. HTML5/ Giới thiệu HTML5 16 Các thẻ 4-6 LINK Thẻ sử dụng để mối liên hệ tài liệu nguồn tài nguyên bên ngoài. Nó sử dụng để kết hợp với stylesheets. Thuộc tính type kiểu nội dung file mà nó liên kết tới, ví dụ ‘text/css’ trỏ tới file stylesheet. Thuộc tính type không dùng HTML5, CSS khai báo mặc đinh chuẩn style cho HTML5. Do vậy cú pháp là: © Aptech Ltd. HTML5/ Giới thiệu HTML5 17 Các thẻ 5-6 SCRIPT Với HTML5, JavaScript ngôn ngữ kịch mặc đinh chuẩn. Thuộc tính type bỏ thẻ script. Thẻ script là: Ví dụ: HTML Webinar © Aptech Ltd. HTML5/ Giới thiệu HTML5 18 Các thẻ 6-6 BODY Phần tử Body cho phép bạn thêm nội dung vào hiển thị Bạn có thể hiển thị nội dung cách sử dụng định dang lề, màu chữ, màu nền. © Aptech Ltd. Ví dụ. HTML5/ Giới thiệu HTML5 19 Các loại liệu 1-2 Một kiểu liệu xác định loại liệu gán cho thuộc tính kiểu nội dung mà nó hiển thị trang. Các kiểu liệu giúp xác định loại định dạng màu sắc độ dài liệu. Bảng mô tả loại nội dung khác nhau. Mô tả Kiểu liệu Text Strings Quy định cụ thể nội dung văn bản, đọc người sử dụng. Uniform Resource Identifiers Xác định vị trí trang web tập tin mạng. (URIs) Colors Xác định màu sắc áp dụng cho nội dung trang web. Lengths Xác định khoảng cách phần tử HTML. Giá trị chiều dài Pixels, dài, MultiLength. Pixel tham khảo chấm nhỏ hình. Xác định loại nội dung hiển thị trang web. Các loại nội dung bao gồm 'text / html "để hiển thị Content Types văn bản,' image / gif 'để hiển thị hình ảnh định dạng gif.,' Video / mpg 'để hiển thị tập tin video có định dạng mpg © Aptech Ltd. HTML5/ Giới thiệu HTML5 20 Các loại liệu 2-2 Hình sau liệt kê kiểu liệu khác nhau: Kiểu nội dung Độ dài Kiểu chuỗi Các kiểu liệu HTML Màu sắc © Aptech Ltd. HTML5/ Giới thiệu HTML5 URIs 21 Các thuộc tính Các thuộc tính HTML giúp cung cấp vài thông tin thêm cho phần tử. Bảng sau liệt kê vài thuộc tính chung sử dụng phần tử HTML5. Thuộc tính © Aptech Ltd. Mô tả class Chỉ tên lớp cho phần tử. contextmenu Chỉ menu ngữ cảnh cho phần tử. dir Chỉ hướng văn có cho nội dung. draggable Chỉ chức kéo phần tử. dropzone Xác định xem liệu kéo chép, di chuyển, liên kết, giảm. style Chỉ CSS nội tuyến cho phần tử. title Chỉ thông tin thêm phần tử HTML5/ Giới thiệu HTML5 22 Các thực thể HTML Trong HTML, có số kí tự có ý nghĩa đặc biệt, hiển thị trực tiếp trình duyệt. Để hiển thị kí tự này, cần phải sử dụng kí tự thực thể (character entity) để thay thế. Những thực thể có thể hiển thị trang web HTML5 cách sử dụng cú pháp sau : &entity_name; Hoặc &#entity_number; Bảng cho thấy số thực thể HTML thường sử dụng. Kết © Aptech Ltd. Mô tả Tên thực thể Mã số thực thể (hệ 16) non-breaking space < less than < < > greater than > > & ampersand & & € euro € € © copyright © © HTML5/ Giới thiệu HTML5 23 Bố cục trang Web HTML HTML có vùng head(đầu) chứa phần tử không diện vùng body(thân) có chứa phần tử có diện tài liệu. HTML trước cung cấp nhiều thẻ khác để xây dựng tổ chức nội dung vùng body tài liệu. Thẻ phần tử thường sử dụng để trình bày liệu cách có tổ chức Thẻ phần tử sử dụng để hiển thị nội dung hình ảnh, liên kết, văn bản, menu, form, vv. HTML gồm có phần tử để xác định tổ chức phần body tài liệu. © Aptech Ltd. Introduction to the Web / Session 24 Bố cục trang Web HTML Vùng Vùng để để đặt đặt logo, logo, tên, tên, phụ phụ đề, đề, Vùng Vùng chứa chứa các liên liên kết kết cho cho và mô mô tả tả ngắn ngắn về trang trang web web việc việc điều điều hướng hướng (navigation) (navigation) Vùng Vùng chứa chứa danh danh sách sách sản sản phẩm, phẩm, mô mô tả tả sản sản phẩm, phẩm, blog blog hoặc các thông thông tin tin khác khác Vùng Vùng chứa chứa các liên liên kết kết dẫn dẫn đến đến số danh danh mục mục hiện có có bên bên trong web web Bao Bao gồm gồm tác tác giả, giả, tên tên công công ty, ty, các liên liên kết kết site site hoặc liên liên kết kết bên bên ngoài liên liên quan quan đến đến quy quy tắc, tắc, điều điều khoản khoản và điều điều kiện, kiện, bản đồ đồ vị vị trí trí và các dữ liệu liệu khác khác © Aptech Ltd. Introduction to the Web / Session 25 HTML5 thiết bị Mobile HTML5 giúp tạo tốt phong phú ứng dụng điện thoại di động cách sử dụng API hỗ trợ tính ứng dụng web tiên tiến cho trình duyệt di động. Điện thoại thông minh thời đại với Apple iOS Google Android hệ điều hành hỗ trợ trình duyệt tương thích HTML5. HTML5 cố gắng để tích hợp tất tính để triển khai ứng dụng điện thoại di động mà tương thích tất tảng. HTML5 cung cấp tính chức kéo-và-thả, video nhúng ứng dụng, khả chí ẩn. Như HTML5 tương thích với hầu hết hệ điều hành di động, tối đa 30% chi phí cho phát triển cho hệ thống điều hành khác tiết kiệm. Ngoài ra, có phụ thuộc giảm thành phần bên thứ ba, làm giảm chi phí cấp giấy phép. Tất thành phần cần thiết có sẵn thông qua trình duyệt HTML5. © Aptech Ltd. HTML5/ Giới thiệu HTML5 26 Lợi ích HTML5 với việc phát triển Mobile Các lợi ích HTML5 với việc phát triển Mobile là: HTML5 tích hợp APIs, vậy không đòi hỏi phải bổ sung thêm plug-in cho trình duyệt mobile. Phát triển điện thoại di động dễ dàng yêu cầu kiến thức HTML5, CSS JavaScript Có phát triển ngày tăng HTML5 cho ứng dụng di động khả tương thích nâng cao nó. HTML5 tương thích với hầu hết tảng hệ điều hành. HTML5 dựa ứng dụng di động có thể chạy trình duyệt Android, iOS, Blackberry, Windows Phone, hệ điều hành di động khác. Chi phí phát triển để tạo ứng dụng HTML5 thấp. Các ứng dụng dựa vị trí đồ có hỗ trợ lớn HTML5. Các chương trình bên thứ ba không cần thiết HTML5. © Aptech Ltd. HTML5/ Giới thiệu HTML5 27 Tổng kết Một phần tử tổ chức nội dung trang web phân cấp, tạo thành cấu trúc HTML bản. DOCTYPE cho trình duyệt loại tài liệu bạn. Một kiểu liệu quy định loại giá trị gán cho thuộc tính loại nội dung mà để hiển thị trang web. Thực thể nhân vật đặc biệt dành riêng HTML. Một phần tử chứa bao gồm thẻ bắt đầu, nội dung, phần tử, thẻ kết thúc. Một phần tử độc lập bao gồm thẻ bắt đầu thuộc tính thẻ kết thúc /> mà không có nội dung. HTML5 cung cấp tính chức kéo-và-thả, video nhúng ứng dụng, thậm chí khả ngoại tuyến cho thiết bị di động. © Aptech Ltd. HTML5/ Giới thiệu HTML5 28 [...]... trong HTML5 © Aptech Ltd HTML5 / Giới thiệu về HTML5 26 Lợi ích của HTML5 với việc phát triển Mobile Các lợi ích của HTML5 với việc phát triển Mobile là: HTML5 đã tích hợp các APIs, do vậy không đòi hỏi phải bổ sung thêm các plug-in cho các trình duyệt mobile Phát triển điện thoại di động dễ dàng hơn khi chỉ yêu cầu kiến thức về HTML5 , CSS và JavaScript Có một sự phát triển ngày càng tăng của HTML5 cho... trong HTML5 , vì CSS đã được khai báo mặc đinh là chuẩn style cho HTML5 Do vậy cú pháp mới là: © Aptech Ltd HTML5 / Giới thiệu về HTML5 17 Các thẻ cơ bản 5- 6 SCRIPT Với HTML5 , JavaScript là ngôn ngữ kịch bản mặc đinh và chuẩn Thuộc tính type được bỏ đi trong thẻ script Thẻ script mới là: Ví dụ: ... charset="UTF-8"> HTML Webinar © Aptech Ltd HTML5 / Giới < /html> thiệu về HTML5 18 Các thẻ cơ bản 6-6 BODY Phần tử Body cho phép bạn thêm nội dung vào và hiển thị Bạn có thể hiển thị nội dung bằng cách sử dụng các định dang căn lề, màu chữ, màu nền © Aptech Ltd Ví dụ HTML5 / Giới thiệu về HTML5 19 Các loại dữ... là một khai báo mới trong HTML5 © Aptech Ltd Nó là cú pháp mới trong HTML5 cũng như các phiên bản trong tương lai sau này của HTML DOCTYPE cũng tương thích với các trình duyệt cũ HTML5 / Giới thiệu về HTML5 13 Các thẻ cơ bản 1-6 Một tài liệu HTML được tạo lên từ các phần tử, các thẻ và các thuộc tính khác nhau, chúng chỉ ra nội dung và các định dạng HTML là ngôn ngữ trình bày... định dạng Một trang HTML lưu với phần mở rộng html Cấu trúc cơ bản của tài liệu HTML bao gồm một số phần tử chính như sau: HTML © Aptech Ltd Phần tử HTML là phần tử gốc đánh dấu sự bắt đầu của một tài liệu HTML Nó bao gồm thẻ bắt đầu và thẻ kết thúc có dạng và < /HTML> tương ứng Nó là phần tử chứa lớn nhất chứa các phần tử khác bên trong HTML5 / Giới thiệu về HTML5 14 Các thẻ cơ bản... HTML5 / Giới thiệu về HTML5 20 Các loại dữ liệu 2-2 Hình sau liệt kê các kiểu dữ liệu khác nhau: Kiểu nội dung Độ dài Kiểu chuỗi Các kiểu dữ liệu cơ bản trong HTML Màu sắc © Aptech Ltd HTML5 / Giới thiệu về HTML5 URIs 21 Các thuộc tính Các thuộc tính HTML giúp cung cấp một vài thông tin thêm cho các phần tử Bảng sau liệt kê một vài thuộc tính chung sử dụng trong các phần tử HTML5 Thuộc tính Mô tả class... lớp cho một phần tử Chỉ ra thông tin thêm về phần tử HTML5 / Giới thiệu về HTML5 22 Các thực thể trong HTML Trong HTML, có một số kí tự có ý nghĩa đặc biệt, không thể hiển thị trực tiếp ra trình duyệt Để hiển thị những kí tự này, cần phải sử dụng kí tự thực thể (character entity) để thay thế Những thực thể này có thể được hiển thị trên một trang web HTML5 bằng cách sử dụng cú pháp sau đây : &entity_name;... loại phần tử HTML: là thẻ chứa(container) và thẻ độc lập(standalone) Một thẻ chứa bao gồm thẻ bắt đầu, nội dung, các phần tử con và thẻ kết thúc Tất cả các phần tử cơ bản của HTML đều là phần tử chứa Phần tử độc lập bao gồm thẻ bắt đầu, các thuộc tính và kết thúc bằng /> mà không có bất kỳ nội dung nào © Aptech Ltd HTML5 / Giới thiệu về HTML5 11 Cấu trúc một tài liệu HTML 5 ... nó HTML5 là tương thích với hầu hết các nền tảng hệ điều hành HTML5 dựa trên ứng dụng di động có thể chạy trên các trình duyệt của Android, iOS, Blackberry, Windows Phone, và hệ điều hành di động khác Chi phí phát triển để tạo ra các ứng dụng trong HTML5 là thấp Các ứng dụng dựa trên vị trí và bản đồ sẽ có sự hỗ trợ lớn hơn trong HTML5 Các chương trình của bên thứ ba không cần thiết trong HTML5 ©... Aptech Ltd Introduction to the Web / Session 1 25 HTML5 và các thiết bị Mobile HTML5 giúp tạo ra tốt hơn và phong phú hơn các ứng dụng điện thoại di động bằng cách sử dụng các API hỗ trợ các tính năng ứng dụng web tiên tiến cho các trình duyệt di động Điện thoại thông minh thời đại mới với Apple iOS và Google Android là hệ điều hành hỗ trợ trình duyệt tương thích HTML5 HTML5 sẽ cố gắng để tích hợp tất cả . f?.%0@%%=J=$A=BB% Phương pháp tiếp cận mới và linh hoạt của HTML5 HTML 5 HTML 5 Giúp loại bỏ các plug-in (như Flash) và sử dụng hỗ trợ cho audio và video Giúp loại bỏ các plug-in (như Flash) và sử dụng hỗ trợ cho. ?.%0@%%=A=BB% Cấu trúc một tài liệu HTML 5 <!DOCTYPE HTML& gt; < ;html& gt; <head> <meta http-equiv="Content-Type" content="text /html& quot; charset=UTF-8" /> <title>Your. A.N 7FG$OB!4K!7//B0Q!7FG.:;$<07!F7%I"! D4$!N Aptech Ltd. e?.%0@%%=J=$A=BB% Các tính năng mới của HTML5 Các tính năng của HTML 5 Các tính năng của HTML 5 Phần tử <canvas> được sử dụng cho việc đồ họa Phần tử <canvas>