Tìm hiểu HTML5 và xây dựng một trang web đơn giản bằng HTML5

Tìm hiểu HTML5 và xây dựng một trang web đơn giản bằng HTML5

Đại Học Bách Khoa Hà Nội Viện Công Nghệ Thông Tin Và Truyền Thông Báo cáo bài tập lớn môn MẠNG MÁY TÍNH Đề số 4: Tìm hiểu HTML5 và xây dựng một trang web đơn giản bằng HTML5 Giảng viên: ThS. Bùi Trọng Tùng Hà Nội-2015 Mạng máy tính 2015 MỤC LỤC 1. HTML là gì? 1.1. Giới thiệu. HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là “ngôn ngữ đánh dấu siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế để tạo nên các trang web với các mẩu thông tin được trình trên World Wide Web. HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản chính thức mới nhất của HTML là 4.01 (1999). Sau đó các nhà phát triển đã thay thế nó bằng XHTML. Hiện nay HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web. Trang 2 Mạng máy tính 2015 HTML không phải là một ngôn ngữ lập trình, nó là ngôn ngữ đánh dấu sử dụng các thẻ HTML để biễu diễn trang web. Mỗi tài liệu HTML (HTML document) là một trang web. Các thẻ HTML còn được gọi là các phần tử HTML (hay HTML element) 1.2. Lịch sử. Ngày nay, HTML đã trở thành ngôn ngữ chủ yếu để xây dựng, thiết kế các trang web. HTML được tạo lần đầu tiên bởi Berners-Lee năm 1991 nhưng phiên bản “HTML 2.0” là chuẩn HTML đầu tiên được công bố chính thức năm 1995. HTML 4.01 là một phiên bản lớn của HTML được công bố năm 1999 và là phiên bản được sử dụng rộng rãi nhất cho đến tận ngày nay. Hiện tại chúng ta có phiên bản HTML5 là một sự mở rộng của HTML 4.01 và đã được công bố chính thức vào năm 2012. 1.3. Cấu trúc tài liệu HTML Một tài liệu HTML thường có cấu trúc như sau. Trang 3 Mạng máy tính 2015 Một tài liệu HMTL phải bắt đầu bằng thẻ , và thường được chia thành 2 phần chính là phần đầu (header) và phần thân (body). Phần header bao gồm các thông tin về tài liệu, như là bộ ký tự sử dụng, tiêu để của trang web, những liên kết đến file được sử dụng trong tài liệu như CSS hoặc javascript… Phần body trình bày nôi dung trang web. 1.4. HTML Tags Như đã nói trước đó, HTML là một ngôn ngữ đánh dấu, sử dụng các thẻ khác nhau để định đạng nội dung. HTML tag là từ khóa (tag name) được bao quanh bởi cặp dấu mở (). • HTML tag thường đi theo cặp • Thẻ đầu tiên được gọi là thẻ bắt đầu (start tag) và thẻ thứ 2 được gọi là thẻ kết thúc (end tag) • Thẻ kết thúc được viết tương tự thẻ bắt đầu nhưng them đấu gạch chéo (/) trước tên thẻ. Trang 4 Mạng máy tính 2015 1.5. XHTML. XHTML (viết tắt của tiếng Anh Extensible HyperText Markup, “ngôn ngữ đánh dấu siêu văn bản mở rộng”) là một ngôn ngữ đánh dấu có cùng khả năng như HTML, nhưng có cú pháp chặt chẽ hơn. Nỗ lực tách phần nội dung ra khỏi phần hình thức trình bày của trang HTML đã đưa đến sự xuất hiện của các chuẩn mới như XHTML. Các chuẩn này nhấn mạnh vào việc sử dụng thẻ đánh dấu vào việc xác định cấu trúc tài liệu như phần đề mục, đoạn văn, khối văn bản trích dẫn và các bảng chứ không khuyên dung các thẻ đánh dấu mang tính chất trình bày trực quan như , . Những mã mang tính chất trình bày đó đã được loại bỏ khỏi HMTL4.01 Strict và các đặc tả XHTML nhằm tạo điều kiện cho CSS. CSS cung cấp một giải pháp nhằm giúp tách cấu trúc HTML ra khỏi phần trình bày nội dung của nó. Một số điểm khác biệt giữa HTML và XHTML • Các phần tử phải được lồng nhau đúng cách: Trong HTML các phần tử có thể được lồng nhau không đúng thứ tự nhưng trong XHTML không cho phép điều đó. • Phải có đặt ở dạng chuẩn (well formed): Tất cả các phần tử XHTML phải được đặt lồng bên trong phần tử gốc . Tất cả các phần tử khác có thể có các phần tử con. Các phần tử con phải đi theo cặp và phải được đặt lồng nhau đúng cách bên trong phần tử mẹ. • Tên gọi của thẻ đều phải viết thường: Do XHTML kế thừa cú pháp của XML và mỗi trang XHTML có phần biệt chữ hoa chữ thường, điều này không có trong HTML. • Tất cả các phần tử phải được đóng: Trong HTML chấp nhận một số phần tử không phải đóng nhưng XHTML yêu cầu tất cả các thẻ phải được đóng. • Các giá trị của thuộc tính phải được đặt trong dấu nháy kép: HTML chấp nhận một số thuộc tính có thể không đặt trong dấu nháy kép nhưng XHTML yêu cầu phải thực hiện điều này. • Việc tối giản thuộc tính là bị nghiêm cấm. 1.6. DHTML HTML động hay DHTML (viết tắt tiếng Anh: Dynamic HTML) là một thể hiện của việc tạo ra một trang Web bằng cách kết hợp các thành phần: ngôn ngữ đánh dấu HTML tĩnh, ngôn ngữ kịch bản máy khách (như javascript) và ngôn ngữ trình diễn CSS và DOM. Trang 5 Mạng máy tính 2015 2. HTML5. 2.1. Giới thiệu. HTML5 là thế hệ thứ 5 của ngôn ngữ HTML, xuất hiện vào tháng 12 năm 2012, là một ứng viên được giới thiệu bởi W3C. Mục tiêu cốt lõi khi thiết kế ngôn ngữ là cải thiện khả năng hỗ trợ cho đa phương tiện mới nhất trong khi vẫn giữ nó dễ dàng đọc được bởi con người và luôn hiểu được bởi các thiết bị và các chương trình máy tính như trình duyệt web. HTML vẫn giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm các đặc tả nổi trội của XHTML, DOM cấp 2, đặc biệt là JavaScript. Là phiên bản tiếp sau của HTML 4.01, HTML5 phản ánh thực tế rằng HTML và XHTML được sử dụng phổ biến trên World Wide Web là một hỗn hợp các tính năng với các thông số kỹ thuật khác nhau, được giới thiệu bởi nhiều nhà sản xuất phần mềm, cùng với các sản phẩm phần mềm được giới thiệu như trình duyệt web, những người thành lập phổ biến thực tế và có quá nhiều lỗi cú pháp trong các văn bản web. Đây là một nỗ lực để xác định một ngôn ngữ đánh dấu duy nhất có thể được viết bằng cú pháp HTML hoặc XHTML. Nó bao gồm các mô hình xử lý chi tiết để tang tính tương thích, mở rộng, cải thiện và chuẩn hóa các đánh dấu có sẵn cho tài liệu, và đưa ra các đánh dấu mới và giới thiệu giao diện lập trình ứng dụng (API) để tạo ra các ứng dụng web phức tạp. Cùng một lý do như vậy, HTML5 là một ứng viên tiềm năng cho nền tảng di động. Đặc biệt HTML5 có thêm nhiều tính năng cú pháp mới. Chúng bao gồm các thẻ mới như , và các thành phần , cũng như sự tích hợp các đồ họa vector có khả năng mở rộng nội dung và MatML cho các công thức toán học. Những tính năng này được thiết kế để làm cho nó dễ dàng bao quát, xử lý đa phương tiện và nội dung đồ họa trên Web mà không cần phải dùng đến quền sở hữu bổ sung và APIs. Các yếu tố mới khác như, , , , được thiết kế để làm phong phú thêm nội dung ngữ nghĩa của tài liệu. HTML5 cũng xác định cụ thể một số các xử lý cần thiết cho các tài liệu không hợp lệ để các lỗi cú pháp sẽ được xử lý thống nhất của tất cả các trình duyệt phù hợp và các tác nhân người dùng khác. 2.2. Những điểm mới trong HTML5 2.2.1. Khai báo DOCTYPE trong HMTL5 là rất đơn giản. Khai báo phải được đặt đầu tiên trong tài liệu HTML trước cả thẻ Khai báo không phải là một thẻ HTML, nó là câu lệnh để trình duyệt web biết về phiên bản HTML được sử dụng để viết tài liệu. Trang 6 Mạng máy tính 2015 Trong HTML 4.01 khai báo tham chiếu đến DTD, bởi vì HTML 4.01 dựa trên SGML. DTD xác định những cú pháp, quy định cho ngôn ngữ đánh dấu, dựa vào đó để trình duyệt sinh ra nội dung chính xác. HTML5 không dựa trên SGML, do đó không yêu cầu tham chiếu đến DTD. Khai báo trong HTML5 Khai báo trong HTML4.01 Strict Khai báo trong XHTM1.1 2.2.2. Cấu trúc văn bản HTML4 HTML4 sử dụng các thẻ div để cấu trúc văn bản. HTML5 HTML5 sử dụng một bộ các thẻ để xác định rõ hơn các khối nội dung chính để cấu trúc một văn bản. Trang 7 Mạng máy tính 2015 Html5 sekleton tag description Định nghĩa một mục nội dung trong tài liệu Định nghĩa nội dung phần bên cạnh nội dung trang web Định nghĩa một phần text có thể được định dạng khác hướng với những text khác. Định nghĩa một phần phụ thêm mà người dùng có thể hiển thị hoặc ẩn. Định nghĩa một hộp dialog hoặc cửa sổ Định nghĩa tiêu đề của phần tử ảnh Định nghĩa phần tử chứa ảnh, đồ thị… Định nghĩa footer của văn bản hoặc một phần của văn bản Định nghĩa header của văn bản hoặc một phần của văn bản Định nghĩa nội dung chính của văn bản Định nghĩa đoạn text được đánh dấu, nhấn mạnh, highlighted Định nghĩa một menu item mà người dùng có thể gọi từ một pupup menu Định nghĩa tỷ lệ trong một phạm vi Định nghĩa phần chứa các liên kết trong văn bản Định nghĩa tiến trình của một nhiệm vụ Định nghĩa một khu vực, một phần trong tài liệu Trang 8 Mạng máy tính 2015 Định nghĩa phần đầu nhìn thấy của thẻ 2.2.3. New input types HTML5 thêm nhiều thẻ định nghĩa kiểu input yêu cầu từ người dùng trong thẻ form. Ví dụ nếu chúng ta thêm thuộc tính type = “email” vào thẻ input thì trình duyệt chỉ cho phép user nhập vào định dạng hợp lệ của email. Những kiểu input mới được giới thiệu trong HMTL5 Trang 9 Mạng máy tính 2015 2.2.4. New input attributes HTML5 thêm nhiều thuộc tính mới của thẻ input, giúp người lập trình dễ dàng hiển thị nội dung theo ý muốn. Trang 10 Mạng máy tính 2015 Syntax HTML5 cho phép 4 kiểu cú pháp khác nhau đối với sử dụng thuộc tính trong thẻ. Ví dụ 4 kiểu cú pháp sử dụng thuộc tính trong thẻ input. 2.2.5. HTML5 Graphics Canvas Thẻ được sử dụng để vẽ đồ họa trên trang web sử dụng javascript. Canvas là một vùng hình chữ nhật trên trang web, mặc định sẽ không có viền (border) và không có nội dung. Cú pháp: Canvas có một vài phương thức để vẽ đường thẳng, hình tròn, hình chữ nhật, text hoặc thêm ảnh. Ví dụ: vẽ một hình chữ nhật sử dụng javascript HTML5 SVG SVG là một ngôn ngữ để miêu tả 2D graphics trong XML. SVG là dựa trên XML, nghĩa là mỗi phần tử là có sẵn bên trong SVG DOM, bạn có thể đính kèm xử lý sự kiện javascript cho một thành phần. Trang 11 Mạng máy tính 2015 Trong SVG, mỗi hình vẽ được nhớ như một đối tượng, nếu thuộc tính của một đối tượng SVG thay đổi, trình duyệt sẽ tự động vẽ lại. So sánh Canvas và SVG Canvas Phục thuộc vào độ phân giải Không hỗ trợ xử lý sự kiện Nghèo nàn khả năng hiển thị text Bạn có thể lưu ảnh dưới dạng .png hoặc .jpg Phù hợp với game graphic SVG Không phụ thuộc vào độ phân giải Hỗ trợ xử lý sự kiện Phù hợp với các ứng dụng có vùng hiển thị lớn(google map) Sinh ra chậm nếu nó phức tạp Không phù hợp với ứng dụng game 2.2.6. New media elements Video Trước HMTL5 không có chuẩn để trình diễn video trên web. Video chỉ có thể chạy được bằng cách sử dụng plugin (giống như flash). Phần tử xác định chuẩn nhúng video vào trang web. Cú pháp: Thuộc tính controls thêm vào có thể điều khiển video như chạy, dừng và âm lượng. Hiện tại có 3 định dạng video được hỗ trợ là: MP4, WebM và Ogg: Trang 12 Mạng máy tính 2015 Adio Trước HMTL5, không có chuẩn để trình diễn audio trên web. File Audio chỉ có thể trình diễn sử dụng plug-in (như flash). Phần tử xác định chuẩn nhúng audio vào trang web. Cú pháp: Hiện tại có 3 định dạng file audio được hỗ trợ cho phần tử là: Mp3, Wav, và Ogg. New Media Elemts Trang 13 Mạng máy tính 2015 3. Xây dựng webside. 3.1. Cấu trúc trang web Trang web được xây dựng dựa trên cấu trúc sau: • Phần header: Thể hiện tiêu đề chính của trang web • Phần nav: trình bày những liên kết tới các phần nội dung chính của trang web là các article • Phần section: gồm nhiều article nhỏ, là thân chính thể hiện nội dung của trang web. • Phần article: chứa những phần nội dung được chia nhỏ của trang web. • Phần aside: chứa ảnh, nội dung phụ thêm của trang web. • Phần footer: thể hiện footer của trang web. Trang 14 Mạng máy tính 2015 3.2. Giao diện trang web. 3.3. HTML5 new input types and attributes Giao diện Trang 15 Mạng máy tính 2015 Code: new input types and attributes First name: Last name: Email: Phone Number: Trang 16 Mạng máy tính 2015 Birthday: 3.4. HTML5 Graphics Giao diện Code Trang 17 Mạng máy tính 2015 HTML5 Graphics Canvas Example Draw Line Draw Circle Draw Text Clear Trang 18 Mạng máy tính 2015 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var drawCircleButton = document.getElementById("drawCircleButton"); drawCircleButton.addEventListener("click", drawCircle); var drawTextButton = document.getElementById("drawTextButton"); drawTextButton.addEventListener("click", drawText); var drawLineButton = document.getElementById("drawLineButton"); drawLineButton.addEventListener("click", drawLine); var clearButton = document.getElementById("clearButton"); clearButton.addEventListener("click", clear); function drawCircle() { ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); } function drawLine() { ctx.moveTo(0, 0); Trang 19 Mạng máy tính 2015 ctx.lineTo(200, 100); ctx.stroke(); } function drawText() { ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.fillText("Hello World", 10, 50); } function clear() { ctx.clearRect(0, 0, c.width, c.height); } 3.5. HTML5 Media Giao diện Trang 20 Mạng máy tính 2015 Code HTML5 Media Trước HTML5, không có chuẩn để trình diễn video và audio trên web Trang 21 Mạng máy tính 2015 video và audio chỉ có thể được trình diễn sử dụng plugin (như flahs) Video Your browser does not support the video tag. Audio Your browser does not support the audio element. Trang 22 Mạng máy tính 2015 Tài liệu tham khảo. • Internet & world wide web how to program, 5th, Paul Deitel, Harvey Deitel, Abbey Deitel. • Css3 the missing manual, 3th, David Sawyer McFarland • http://www.w3schools.com/html/html5_intro.asp • http://vi.wikipedia.org/wiki/HTML • http://en.wikipedia.org/wiki/HTML5 • Trang 23 [...]... chuẩn nhúng audio vào trang web Cú pháp: Hiện tại có 3 định dạng file audio được hỗ trợ cho phần tử là: Mp3, Wav, và Ogg New Media Elemts Trang 13 Mạng máy tính 2015 3 Xây dựng webside 3.1 Cấu trúc trang web Trang web được xây dựng dựa trên cấu trúc sau: • Phần header: Thể hiện tiêu đề chính của trang web • Phần nav: trình bày những liên kết tới các phần nội dung chính của trang web là các article... gồm nhiều article nhỏ, là thân chính thể hiện nội dung của trang web • Phần article: chứa những phần nội dung được chia nhỏ của trang web • Phần aside: chứa ảnh, nội dung phụ thêm của trang web • Phần footer: thể hiện footer của trang web Trang 14 Mạng máy tính 2015 3.2 Giao diện trang web 3.3 HTML5 new input types and attributes Giao diện Trang 15 Mạng máy tính 2015 Code: ... diễn video trên web Video chỉ có thể chạy được bằng cách sử dụng plugin (giống như flash) Phần tử xác định chuẩn nhúng video vào trang web Cú pháp: Thuộc tính controls thêm vào có thể điều khiển video như chạy, dừng và âm lượng Hiện tại có 3 định dạng video được hỗ trợ là: MP4, WebM và Ogg: Trang 12 Mạng máy tính 2015 Adio Trước HMTL5, không có chuẩn để trình diễn audio trên web File Audio chỉ... máy tính 2015 Syntax HTML5 cho phép 4 kiểu cú pháp khác nhau đối với sử dụng thuộc tính trong thẻ Ví dụ 4 kiểu cú pháp sử dụng thuộc tính trong thẻ input 2.2.5 HTML5 Graphics Canvas Thẻ được sử dụng để vẽ đồ họa trên trang web sử dụng javascript Canvas là một vùng hình chữ nhật trên trang web, mặc định sẽ không có viền (border) và không có nội dung Cú pháp: Canvas có một vài phương thức để vẽ... nhật, text hoặc thêm ảnh Ví dụ: vẽ một hình chữ nhật sử dụng javascript HTML5 SVG SVG là một ngôn ngữ để miêu tả 2D graphics trong XML SVG là dựa trên XML, nghĩa là mỗi phần tử là có sẵn bên trong SVG DOM, bạn có thể đính kèm xử lý sự kiện javascript cho một thành phần Trang 11 Mạng máy tính 2015 Trong SVG, mỗi hình vẽ được nhớ như một đối tượng, nếu thuộc tính của một đối tượng SVG thay đổi, trình... 0); Trang 19 Mạng máy tính 2015 ctx.lineTo(200, 100); ctx.stroke(); } function drawText() { ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.fillText("Hello World", 10, 50); } function clear() { ctx.clearRect(0, 0, c.width, c.height); } 3.5 HTML5 Media Giao diện Trang 20 Mạng máy tính 2015 Code HTML5 Media Trước HTML5, ... audio element Trang 22 Mạng máy tính 2015 Tài liệu tham khảo • Internet & world wide web how to program, 5th, Paul Deitel, Harvey Deitel, Abbey Deitel • Css3 the missing manual, 3th, David Sawyer McFarland • http://www.w3schools.com/html /html5_ intro.asp • http://vi.wikipedia.org/wiki/HTML • http://en.wikipedia.org/wiki /HTML5 • Trang 23 ... Media Giao diện Trang 20 Mạng máy tính 2015 Code HTML5 Media Trước HTML5, không có chuẩn để trình diễn video và audio trên web Trang 21 Mạng máy tính 2015 video và audio chỉ có thể được trình diễn sử dụng plugin (như flahs) Video ... Phone Number: Trang 16 Mạng máy tính 2015 Birthday: 3.4 HTML5 Graphics Giao diện Code Trang 17 Mạng máy tính 2015 HTML5 Graphics Canvas Example ... Wav, Ogg New Media Elemts Trang 13 Mạng máy tính 2015 Xây dựng webside 3.1 Cấu trúc trang web Trang web xây dựng dựa cấu trúc sau: • Phần header: Thể tiêu đề trang web • Phần nav: trình bày liên... dung trang web article • Phần section: gồm nhiều article nhỏ, thân thể nội dung trang web • Phần article: chứa phần nội dung chia nhỏ trang web • Phần aside: chứa ảnh, nội dung phụ thêm trang web. .. phiên HTML5 hứa hẹn mang lại diện mạo cho Web Trang Mạng máy tính 2015 HTML ngôn ngữ lập trình, ngôn ngữ đánh dấu sử dụng thẻ HTML để biễu diễn trang web Mỗi tài liệu HTML (HTML document) trang web