Ngôn ngữ đánh dấu siêu văn bản (HTML) là công nghệ cốt lõi của Web từ đầu những năm 1990. Tim Berners-Lee đã tạo ra HTML vào năm 1989 như một cách đơn giản nhưng hiệu quả để mã hóa các tài liệu điện tử. Trên thực tế, mục đích ban đầu của trình duyệt Web là phục vụ như một trình đọc các tài liệu như vậy. Hai thập kỷ sau, chính trình duyệt đã trở thành một cổng thông tin vào thế giới phương tiện trực tuyến. Đó là lý do tại sao HTML5 không chỉ là một bản sửa đổi HTML khác, mà là một tiêu chuẩn toàn diện cho cách các trang Web hoạt động .
Để hiểu rõ hơn điều gì làm cho HTML5 trở nên độc đáo, hãy quay ngược đồng hồ lại một chút. Trở lại năm 1994, HTML vẫn còn trong bản sửa đổi đầu tiên, Mosaic và Netscape thống trị thị trường trình duyệt và hầu hết mọi người vẫn chưa trải nghiệm thứ mới này được gọi là World Wide Web. Năm đó, người sáng tạo HTML Berners-Lee đứng đầu một nhóm tiêu chuẩn Web mới được thành lập được gọi là World Wide Web Consortium (W3C).
Mặc dù W3C là một cơ quan quản lý tiêu chuẩn được tôn trọng ngày nay, nhưng các công ty thương mại trong thị trường trình duyệt những năm 1990 phần lớn đã bỏ qua các tiêu chuẩn đó và tự đốt cháy con đường của họ. Đến năm 1995, W3C đã công bố bản sửa đổi thứ hai của tiêu chuẩn HTML, và công ty web mới là Microsoft đã giành được vị thế với trình duyệt Internet Explorer (IE) của mình. Microsoft phần lớn phớt lờ các tiêu chuẩn, và Netscape phải vật lộn để duy trì một thị phần đáng nể trong khi IE bắt đầu thống trị [nguồn: Harris].
Trong những cuộc chiến trình duyệt ban đầu này, các nhà phát triển web đã gặp nhiều thách thức trong việc giữ cho các trang web của họ tương thích với từng phiên bản mới của các trình duyệt chính cũng như với các trình duyệt Opera và Apple Safari ít được sử dụng hơn. Mặc dù W3C đã xuất bản HTML 3.2 vào năm 1997, tiếp theo là HTML 4 vào năm 1998, việc tuân theo các tiêu chuẩn dường như ít quan trọng hơn việc theo kịp các tính năng dành riêng cho trình duyệt. Điều này tiếp diễn cho đến năm 2003 khi Mozilla Foundation do cộng đồng định hướng đã phá vỡ xu hướng này. Sau khi phát hành trình duyệt Mozilla ban đầu, tiếp theo là trình duyệt Firefox vào năm 2004, Mozilla nhanh chóng chiếm được vị thế thống trị của IE. Ngoài ra, các trình duyệt mới này thực sự tuân theo các tiêu chuẩn W3C hiện có trong khi làm như vậy.
Trong khi Firefox của Mozilla tiếp tục phát triển bằng cách sử dụng tiêu chuẩn HTML 4 cũ kỹ, Mozilla đã cùng với Apple và Opera vào năm 2004 để thành lập một nhóm có tên là Nhóm làm việc về Công nghệ Ứng dụng Siêu văn bản Web (WHATWG). Mục tiêu của WHATWG là giữ cho sự phát triển HTML tồn tại. Mặc dù ban đầu còn do dự, W3C đã tham gia vào quá trình hồi sinh HTML vào năm 2006. Cùng nhau, WHATWG và W3C đã kết hợp các đặc tả hiện có cho HTML và XHTML và phát triển thêm chúng để tạo ra đặc tả HTML5 mới. Thông số kỹ thuật đó hiện đang được duy trì và xuất bản bởi W3C [nguồn: W3C , WHATWG ].
Bài viết này khám phá công nghệ HTML5 mới này. Chúng ta sẽ xem xét XHTML và các công nghệ khác đã đi vào HTML5 và trình bày những điểm cơ bản về cách sử dụng HTML5 để tạo nội dung Web hấp dẫn, tuân thủ các tiêu chuẩn. Chúng tôi cũng sẽ kiểm tra một số cách thú vị mà mọi người đang sử dụng HTML5 trên Web. Hãy bắt đầu bằng cách xem xét các mục tiêu của HTML5 và lý do tại sao nó không chỉ là HTML.
- HTML5 vượt xa HTML
- Công nghệ nền tảng HTML5
- Nội dung HTML cơ bản
- Các hình thức
- Yếu tố ngữ nghĩa
- Yếu tố truyền thông và đối thủ Flash
- Canvas
- Tạo Giao diện với CSS3
- JavaScript như một thành phần trung tâm
- Công nghệ ứng dụng web
- Các bằng chứng đột phá về khái niệm
HTML5 vượt xa HTML
Tự nó, HTML tập trung vào việc trình bày các tài liệu tĩnh, nghĩa là văn bản, liên kết và một số thứ khác. Thông qua HTML 4, tiêu chuẩn HTML giống với cú pháp HTML được sử dụng để thực hiện mục tiêu này. Tiêu chuẩn HTML5 có mục tiêu rộng hơn nhiều để mô tả nội dung, kiểu dáng và giao diện ứng dụng đằng sau một trang Web khi nó được tải trong trình duyệt của bạn. Cụ thể hơn, HTML5 thiết lập một cú pháp duy nhất để tương tác với tất cả các phần tử mà trang Web đã tải vào bộ nhớ máy tính của bạn.
Có một điểm nhầm lẫn tiềm ẩn mà chúng ta nên làm rõ về thuật ngữ "HTML5" trước khi tiếp tục. Có một phiên bản mới của chính ngôn ngữ đánh dấu được gọi là HTML5. Tuy nhiên, ngôn ngữ đó chỉ là một phần của tiêu chuẩn rộng hơn có chung tên HTML5. Bài viết này đề cập đến tất cả các thành phần của tiêu chuẩn HTML5, trong đó ngôn ngữ HTML5 là trung tâm.
Với sự khác biệt đó, làm cách nào để trình duyệt tải một trang được viết theo tiêu chuẩn HTML5 mới hơn chứ không phải ngôn ngữ HTML 4 lâu đời? Rốt cuộc, chúng ta thường chỉ dựa vào trình duyệt của mình để tải các trang Web mà không cần lo lắng về HTML đằng sau chúng. Câu trả lời rất đơn giản: Miễn là bản thân trình duyệt có thể hỗ trợ HTML5, nó có thể xử lý bất cứ thứ gì bạn ném vào nó mà không cần phân biệt giữa các bản sửa đổi HTML.
Để biến điều kỳ diệu này thành hiện thực, tiêu chuẩn HTML5 tích hợp các phiên bản mới của nhiều công nghệ cùng hoạt động hướng tới các mục tiêu chung. Những mục tiêu này bao gồm những điều sau:
- Giữ ngôn ngữ đơn giản và trực quan
- Đảm bảo mã dễ đọc và dễ bảo trì
- Giải quyết các trang dưới dạng ứng dụng tương tác thay vì tài liệu tĩnh
- Dựa vào Trang tính kiểu xếp tầng (CSS) để tạo kiểu nội dung
- Công nhận JavaScript như một thành phần kịch bản trung tâm cho các trang Web
- Đưa nội dung động từ các công nghệ phía máy chủ như PHP và ASP
Bây giờ bạn biết rằng HTML5 không chỉ là đánh dấu HTML, chúng ta hãy xem xét các công nghệ nền tảng trong tiêu chuẩn này.
Công nghệ nền tảng HTML5
Một ngôn ngữ đánh dấu sử dụng một loạt các thẻ để đánh dấu các phần tử trong một tệp. Việc đánh dấu dựa trên một số loại mô hình xác định những yếu tố đó là gì và cách sử dụng chúng. Vì HTML luôn là về mã hóa tài liệu, nó dựa trên một thứ gọi là mô hình đối tượng tài liệu (DOM). DOM được kết hợp trong chính ứng dụng trình duyệt Web. Vì vậy, ngôn ngữ đánh dấu chỉ là một cách đưa ra các hướng dẫn cho trình duyệt dựa trên một mô hình mà nó đã hiểu.
Để hiểu rõ hơn về mối quan hệ giữa DOM và HTML, hãy nghĩ DOM như một hộp tem cao su. Mỗi tem là một phần tử khác nhau trong DOM. Mỗi trang được viết bằng HTML chỉ là một loạt các dấu ấn được tạo ra từ các con tem, được điền bằng nội dung tùy chỉnh của riêng bạn. Trình duyệt Web có thể hiển thị bất kỳ thứ gì được tạo ra từ các tem trong hộp đó.
Về mặt kỹ thuật, DOM là một giao diện lập trình ứng dụng (API) cung cấp một cách trung lập về nền tảng để xử lý các tài liệu HTML hoặc XML. (Ngôn ngữ đánh dấu có thể mở rộng, hoặc XML, trông tương tự như HTML, nhưng nó cho phép lập trình viên thêm một tập hợp các phần tử tùy chỉnh mà bạn có thể sử dụng trong tài liệu.) Tiêu chuẩn HTML5 yêu cầu DOM được gọi là DOM5 HTML. Được chuẩn bị cho sự phát triển của HTML5, các phiên bản mới nhất của trình duyệt Chrome , Firefox , IE, Safari và Opera đều có thể xử lý các trang dưới DOM5 HTML.
Một nền tảng quan trọng khác cho HTML5 là các loại Tiện ích mở rộng Thư Internet Đa năng ( MIME ) liên quan. MIME là một tiêu chuẩn của Lực lượng Đặc nhiệm Kỹ thuật Internet (IETF) để cảnh báo phần mềm có khả năng kết nối Internet về loại nội dung mà nó đang cố gắng xử lý. Điều này thường tương ứng với một loại tệp cụ thể, chẳng hạn như tài liệu HTML hoặc tệp âm thanh MP3.
Các nhà phát triển web chỉ định các kiểu MIME khi họ mã hóa một trang Web. Thao tác này sẽ nhắc trình duyệt tải các tệp tương ứng một cách thích hợp theo loại của chúng. Có hai kiểu MIME kết hợp với HTML DOM5 để tạo nền tảng cho tiêu chuẩn HTML5 mới: kiểu MIME HTML (văn bản / html) và kiểu MIME XML (ứng dụng / xhtml + xml). HTML5 bao gồm các cập nhật trong cú pháp cho cả hai loại MIME này.
Tóm lại, các công nghệ cơ bản trong tiêu chuẩn HTML5 là HTML DOM5 và các kiểu MIME tương thích với HTML5 cho HTML và XML. Tiếp theo, hãy chuyển sang cách kết hợp một trang Web với nhau bằng HTML5.
Nội dung HTML cơ bản
Tối thiểu, HTML5 bao gồm phiên bản 5 của cú pháp HTML cơ bản. Mã mẫu trong thanh bên trên trang này cho biết mã HTML này có thể trông như thế nào đối với một trang Web cơ bản. Khi bạn đang duyệt Web, hãy sử dụng tùy chọn "Xem nguồn" hoặc tùy chọn tương tự trong trình duyệt của bạn để xem HTML (và mã khác) được tải để tạo trang bạn hiện đang xem. Tất cả mã được hiển thị trong ví dụ của chúng tôi cũng tương thích ngược với HTML 4, có nghĩa là nó không có bất kỳ bổ sung mới nào có sẵn trong HTML5.
Mặc dù nó không xuất hiện trong tất cả các trang Web, nhưng bạn nên bắt đầu tệp HTML của mình với khai báo loại tài liệu (doctype) như được minh họa trong ví dụ. Điều này xác nhận rằng trình duyệt sẽ mong đợi HTML chuẩn khi diễn giải tài liệu. Một số nhà phát triển dựa vào các phần mở rộng của tiêu chuẩn HTML, sử dụng các tệp định nghĩa loại tài liệu (DTD). Nếu đúng như vậy, nhà phát triển chỉ định vị trí của DTD như một phần của loại tài liệu này.
Bên cạnh loại tài liệu, mã còn lại trong ví dụ là cú pháp HTML chuẩn. Nếu bạn không quen với cú pháp này, hãy xem bài viết Cách trang web hoạt động .
Vì vậy, có gì mới đối với các phần tử cơ bản này trong HTML5? Đây là danh sách và chúng ta sẽ xem xét kỹ hơn từng thứ trong các trang tiếp theo.
- Các phần tử biểu mẫu mới và cập nhật - thiết lập cấu trúc biểu mẫu và xử lý đầu vào biểu mẫu từ người dùng
- Yếu tố ngữ nghĩa - xác định nội dung dựa trên vai trò của nó trong một trang Web
- Yếu tố phương tiện - nhúng âm thanh, video và các phương tiện tương tác khác mà không cần tiện ích mở rộng trình duyệt của bên thứ ba
- Các phần tử Ruby - hỗ trợ quốc tế hóa cho các trang Web ngôn ngữ Châu Á
Các hình thức
Mặc dù các biểu mẫu (các phần của trang Web nơi người dùng có thể nhập dữ liệu cụ thể, như tên, địa chỉ, v.v.) là một phần của các phần tử sớm nhất có sẵn trong HTML, chúng thiếu nhiều tính năng hữu ích trước HTML5. Để bù đắp điều này, các nhà phát triển bên thứ ba đã tạo ra phần mềm biểu mẫu Web làm cho các biểu mẫu HTML cơ bản dường như gần như lỗi thời. Tuy nhiên, HTML5 đã thổi luồng sinh khí mới vào các biểu mẫu với các phần tử biểu mẫu mới, các kiểu đầu vào và thuộc tính cho các phần tử hiện có.
Không phân biệt cú pháp cũ và mới, chúng ta hãy xem xét cách tiếp cận tổng thể để tạo biểu mẫu cho trang Web của bạn bằng HTML5. Dưới đây là một số bước được đề xuất để bắt đầu:
- Thiết lập một khối biểu mẫu bằng cách sử dụng
- Chỉ định một khối trường trong biểu mẫu bằng cách sử dụng
- Bố trí từng trường trong tập hợp trường bằng cách sử dụng
- Trong mỗi thẻ nhãn, hãy thêm tên trường như bạn muốn nó được hiển thị cùng với thẻ cho chính trường.
- Sử dụng thuộc tính type trong thẻ đầu vào () nhắc trình duyệt xác thực thông tin đầu vào của người dùng dựa trên kiểu đó. Điều này giúp loại bỏ nhu cầu về mã bổ sung để xử lý xác thực và nhắc nhập lại. HTML5 bao gồm các loại đầu vào sau: ngày, giờ, ngày giờ, ngày giờ địa phương, tháng, tuần, số, e-mail, điện thoại, url, phạm vi, màu sắc và tìm kiếm. Bạn cũng có thể sử dụng thuộc tính mẫu với biểu thức chính quy để tạo mẫu xác thực tùy chỉnh.
- Chỉ ra các trường bắt buộc bằng cách thêm thuộc tính bắt buộc cho một phần tử đầu vào.
- Sử dụng thuộc tính lấy nét tự động để đặt một phần tử đầu vào cụ thể làm phần tử đầu tiên trong biểu mẫu. Đây là nơi trình duyệt Web sẽ tự động đặt con trỏ của người dùng sau khi tải biểu mẫu.
- Sử dụng thuộc tính trình giữ chỗ nếu muốn để thêm gợi ý văn bản về những gì cần nhập vào một trường nhất định.
- Đặt kiểu CSS cho ": Required" và ": invalid" để người dùng có dấu hiệu trực quan về việc thiếu thông tin hoặc thông tin đầu vào sẽ không xác thực cho một loại đầu vào nhất định.
Kiểm tra hướng dẫn tham chiếu HTML5 cập nhật để biết danh sách đầy đủ các phần tử biểu mẫu và các thuộc tính của chúng. Ngoài ra, lưu ý rằng hỗ trợ cho một số trường biểu mẫu khác nhau giữa các trình duyệt Web. Đảm bảo kiểm tra biểu mẫu của bạn trong từng loại trình duyệt mà bạn muốn trang Web của mình hỗ trợ.
Trong khi các phần tử biểu mẫu HTML có nhiều tính năng hơn trong phiên bản 5, thì loại phần tử tiếp theo là hoàn toàn mới trong HTML5.
Yếu tố ngữ nghĩa
Các yếu tố ngữ nghĩa trong HTML5, như tên gọi của chúng, là những yếu tố đề cập đến ý nghĩa của một số nội dung nhất định. Chỉ sử dụng thẻ thôi là không đủ, vì hầu hết các trang Web ngày nay chứa nhiều loại nội dung khác nhau trên một trang. Các nhà phát triển web cần áp dụng các quy tắc riêng biệt về cách mỗi loại nội dung sẽ trông như thế nào hoặc hoạt động như thế nào.
Không có các yếu tố ngữ nghĩa, các nhà phát triển Web đã sử dụng
Theo thời gian, một số loại nội dung nhất định trở nên rất phổ biến trên các trang Web, chẳng hạn như đầu trang, chân trang, menu và các điểm điều hướng. HTML5 kết hợp chúng bằng cách thêm các yếu tố ngữ nghĩa tiêu chuẩn. Điều này có nghĩa là bạn có thể chia khối của mình thành các phần tử ngữ nghĩa hữu ích thay vì một loạt
Sau đây là danh sách các phần tử trang ngữ nghĩa với định nghĩa ngắn gọn về mỗi phần tử. Hãy nhớ tìm một tham chiếu HTML5 mà bạn có thể tin tưởng để có danh sách đầy đủ các thuộc tính hợp lệ và các phần tử con cho mỗi phần tử ngữ nghĩa.
Các phần tử khối:
- phần - một phân chia trang chung được sử dụng để giúp chia nhỏ một khối nội dung lớn hơn
- bài viết - nội dung ban đầu từ nguồn bên ngoài, đôi khi được thêm động khi tải trang bằng cách sử dụng tập lệnh tổng hợp
- đầu trang và chân trang - các khối xuất hiện ở đầu và cuối mỗi trang
- hgroup - một nhóm gồm nhiều tiêu đề liên quan, chẳng hạn như tiêu đề và phụ đề
- menu - danh sách các lệnh (xem phần tử lệnh) và các thuộc tính chỉ định hành vi của menu
- nav - xác định một khối hoàn toàn dành cho điều hướng trang Web, thường là một số danh sách liên kết không có thứ tự đến các trang khác trên trang web
- địa chỉ - bao gồm thông tin liên hệ của tác giả của nội dung trong một khối, chẳng hạn như một bài báo, phần hoặc toàn bộ nội dung trang
- sang một bên - chỉ ra rằng nội dung nên được coi như một thanh bên
Các phần tử nội tuyến:
- tóm tắt và chi tiết - chuyển đổi giữa một đoạn giới thiệu / tóm tắt và chi tiết đầy đủ cho cùng một nội dung
- hình và mô tả - các phần tử được sử dụng để áp dụng hành vi phổ biến cho hình ảnh, bất kể phần tử phương tiện nào (img, svg hoặc canvas) được sử dụng để bao gồm chúng
- thời gian - văn bản đại diện cho ngày lịch, giờ đồng hồ hoặc cả hai, được định dạng để trình duyệt có thể điều chỉnh chênh lệch múi giờ nếu cần
- lệnh - một nhãn và một hành vi được liên kết với nhãn đó khi bạn sử dụng bàn phím hoặc chuột để tương tác với nó, thường được sử dụng bên trong một khối menu
- dfn - một thuật ngữ được định nghĩa trong nội dung
- wbr - thẻ cho biết vị trí có thể chấp nhận để ngắt văn bản trong một từ khi nó nằm trên nhiều dòng
Các phần tử ngữ nghĩa được tạo ra như một sự cải tiến so với các phần tử HTML chung chung hơn. Tuy nhiên, loại phần tử mới tiếp theo nhằm mục đích thay thế hoàn toàn cho các tiện ích mở rộng phương tiện của bên thứ ba trong trình duyệt Web.
Khoảng trống hay Không có khoảng trống?
Bạn có thể nhận thấy rằng khi chúng tôi đề cập đến các phiên bản HTML khác, chẳng hạn như HTML 4, có một khoảng trắng trước số, trong khi không có khoảng trắng trong các tham chiếu đến HTML5. Đã có nhiều cuộc thảo luận và tranh luận về vấn đề này trong cộng đồng HTML, nhưng cuối cùng, cả WHATWG và W3C đều chấp nhận HTML5 làm cách viết chính thức để giữ cho tài liệu được nhất quán.
Yếu tố truyền thông và đối thủ Flash
Một trong những tính năng được nhắc đến nhiều nhất của HTML5 là cách tiếp cận mới của nó để nhúng phương tiện vào một trang Web . Chúng ta sẽ xem xét một số ứng dụng tuyệt vời của tính năng HTML5 này ở phần sau của bài viết này. HTML5 hoàn thành việc nhúng này mà không yêu cầu plugin trình duyệt bên ngoài. Sau đây là các phần tử đa phương tiện có sẵn trong HTML5:
- âm thanh - nhúng âm thanh vào trang và bao gồm các thuộc tính để chỉ định cách phát nó; các định dạng tệp được hỗ trợ sẽ khác nhau giữa các trình duyệt Web
- video - nhúng video vào trang và bao gồm các thuộc tính để chỉ định cách phát video đó; các định dạng tệp được hỗ trợ sẽ khác nhau giữa các trình duyệt Web
- nguồn - được sử dụng với các phần tử âm thanh hoặc video để xác định nguồn; nhiều nguồn có thể được chỉ định cho một mặt hàng
- nhúng - nhúng và chỉ định loại phương tiện cho nội dung có thể thiếu hỗ trợ trong các phần tử phương tiện khác
- canvas - dành một phần của trang hoặc màn hình máy tính, nơi JavaScript có thể vẽ hình ảnh; sắp tới, chúng ta sẽ tìm hiểu thêm về cách hoạt động của tính năng mới quan trọng này
- svg - nhúng đồ họa vectơ được mã hóa bằng ngôn ngữ đánh dấu SVG, cho phép chúng được chia tỷ lệ động đến khu vực của trang mà chúng được tải mà không làm giảm bất kỳ chất lượng đồ họa nào
Khi HTML5 phát triển, các chuyên gia thị trường đặt câu hỏi liệu nó có thay thế được Flash, hiện do Adobe kiểm soát hay không. Flash là một trình phát đa phương tiện mà bạn có thể thêm làm plugin vào trình duyệt Web của mình. Bởi vì Flash có tất cả các tính năng cần thiết cho một trang web để nhúng các loại phương tiện khác nhau, các trang web như YouTube đã phụ thuộc vào nó trong nhiều năm. Thậm chí có một số ứng dụng Web hoàn toàn dựa vào Flash để cung cấp năng lượng cho các giao diện tương tác của chúng. Việc áp dụng Flash phổ biến vào năm 2007 đến nỗi, khi phát hành chiếc iPhone được nhiều người mong đợi của Apple, nhiều người tiêu dùng đã rất buồn khi biết rằng hệ điều hành của nó , Apple iOS, không hỗ trợ Flash.
Khi Google , được cho là thương hiệu lớn nhất trên Internet, bắt đầu phát triển các ứng dụng của mình với HTML5, những người ủng hộ Flash đã chú ý. Trước HTML5, mối đe dọa duy nhất đối với sự thống trị của Flash là các nhà phát triển ứng dụng Web sẵn sàng xây dựng và duy trì các lựa chọn thay thế HTML / JavaScript tùy chỉnh. Với HTML5, những tùy chỉnh rườm rà như vậy không còn cần thiết khi tạo ra trải nghiệm truyền thông tương tác với công nghệ Flash đối thủ.
Vậy, ai sẽ thắng: Flash hay HTML5? Câu trả lời ngắn gọn là, "Không." Mỗi công nghệ đều có những tính năng, ưu điểm và nhược điểm riêng. Ngoài ra, Adobe và Google đã làm việc trên các công cụ chuyển đổi Flash sang HTML5. Tại thời điểm viết bài này, có vẻ như mặc dù HTML5 đang đạt được vị thế, nhưng Flash cũng có khả năng duy trì sự phổ biến của riêng nó trong một thời gian.
Chuyển sang trang tiếp theo, nơi chúng tôi sẽ chia nhỏ phần tử canvas và cách sử dụng nó trong các trang Web HTML5 của bạn.
Canvas
Một trong những tính năng mới quan trọng nhất của HTML5 là canvas. Tính năng canvas cho phép bạn xác định một phần của trang Web , vẽ nội dung bên trong nó và thêm chức năng tương tác. Tất cả điều này có thể thực hiện được thông qua sự kết hợp của mã HTML và JavaScript . Hãy xem ba phần bạn sẽ cần để thiết lập canvas trong HTML5:
Phần 1: Sử dụng
width = "400"
height = "300>
Nếu bạn thấy văn bản này, trình duyệt của bạn
không có hỗ trợ canvas HTML5.
Phần 2: Tạo JavaScript để vẽ nội dung vào canvas. Sau đó, chúng ta sẽ tìm hiểu cách thêm và quản lý mã JavaScript được liên kết với một trang Web HTML5. Ở đây, chúng ta hãy xem xét một số JavaScript mẫu mà bạn có thể sử dụng cho các đối tượng canvas. Đoạn mã sau đây vẽ một hình chữ nhật trong canvas ở trên:
function drawRectangle () {
var targetCanvas = document.getElementById ("sampleCanvas");
var directContext = sampleCanvas.getContext ("2d");
directContext.fillStyle = "blue";
directContext.fillRect (50, 25, 150, 100);
}
Hàm này vẽ một hình chữ nhật đặc màu xanh trong canvas của bạn. Hai dòng "var" tạo ra các biến bạn có thể sử dụng. Đầu tiên (targetCanvas) xác định phần tử canvas mà bạn đang nhắm mục tiêu bằng cách sử dụng ID của nó từ HTML. Cái thứ hai (directContext) thiết lập bối cảnh hai chiều để vẽ. Hãy nghĩ về bối cảnh như một lớp kính trong suốt được đặt trên tấm vải và bạn sẽ gọi các hàm để vẽ trên tấm kính đó.
Dòng "fillStyle" xác định màu xanh lam theo tên mà HTML nhận dạng và liên kết với một trong các màu được đặt tên của nó. Bạn cũng có thể sử dụng bất kỳ màu, mẫu hoặc độ dốc nào như khi viết mã kiểu trong HTML hoặc CSS. Dòng "fillRect" vẽ hình chữ nhật bắt đầu từ một khoảng lệch từ phía trên bên trái, hai số đầu tiên là các hiệu số x và y như thể phía trên bên trái của canvas ở tọa độ (0,0). Hai số thứ hai lần lượt cho biết chiều rộng và chiều cao của hình chữ nhật.
Phần 3: Gọi hàm JavaScript từ mã HTML. Điều này liên kết hai mảnh với nhau. Bạn có thể gọi hàm ngay khi trang Web tải, điều này rất hợp lý nếu bạn đang sử dụng canvas để vẽ nội dung trang tương tác cần xuất hiện ngay khi tải trang. Một tùy chọn khác là tạo nút, menu hoặc phần tử khác trong HTML để kích hoạt sự kiện vẽ. Sau đây là ví dụ về một nút mà bạn có thể sử dụng để chạy tập lệnh mẫu ở trên:
Dive Into HTML5 có một hướng dẫn dễ làm theo để tạo các phần tử canvas cho các trang Web của bạn. Ngoài ra, tham chiếu HTML5 đáng tin cậy sẽ cung cấp nhiều tài nguyên để vẽ đồ họa phức tạp, cả tĩnh và chuyển động. Nếu bạn muốn sử dụng rộng rãi canvas trong HTML5, bạn cần phải lập trình thoải mái trong JavaScript. Tiếp theo, hãy khám phá cách CSS3 tạo ra giao diện của một trang Web HTML5.
Tạo Giao diện với CSS3
Mỗi phần tử HTML có một số thuộc tính mà bạn sử dụng trong mã để sửa đổi giao diện hoặc chức năng của phần tử đó. Kiểu và các thuộc tính liên quan điều chỉnh kích thước, màu sắc, vị trí, đường viền và các khía cạnh vật lý khác của phần tử. Trải qua nhiều năm tuổi thọ của trang Web, các nhà phát triển trang web đã áp dụng rộng rãi phương pháp tách biệt phong cách khỏi nội dung. Bằng cách tách biệt này, các nhà phát triển được hưởng những lợi thế sau:
- Ít mã cần duy trì hơn: Nhiều phần tử trên nhiều trang Web có thể chia sẻ các kiểu giống nhau mà không cần lặp lại mã kiểu cho mỗi trang.
- Bảo trì dễ dàng hơn theo thời gian: Cập nhật lên kiểu mới hoặc sửa kiểu hiện có có nghĩa là chỉ thay đổi một đoạn mã kiểu thay vì cập nhật từng phần tử bằng mã đó.
Do đó, trong khi việc tạo kiểu có thể được đặt cùng với mã HTML, sự lựa chọn phổ biến hơn cho các nhà phát triển Web là sử dụng Trang tính kiểu xếp tầng (CSS) để quản lý tất cả mã tạo kiểu được liên kết với một trang Web. HTML cho mỗi trang có thể tham chiếu đến một hoặc nhiều biểu định kiểu, mà trình duyệt của bạn sẽ tải khi trang tải. Các biểu định kiểu này, ở dạng tệp CSS, nhằm bắt chước những gì bạn có thể nhập bằng cách sử dụng
