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

Trang 1

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

Trang 2

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 3

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 4

Một tài liệu HMTL phải bắt đầu bằng thẻ <html>, 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ở (<) và đóng (>)

• 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ướctên thẻ

Trang 5

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 <html> 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 6

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ệtweb

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ổitrộ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ư <video>, <audio> và các thành phần <canvas>, 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ư, <section>, <article>, <header>, <nav> đượ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 <!DOCTYPE> phải được đặt đầu tiên trong tài liệu HTML trước cả thẻ

<html>

Khai báo <!DOCTYPE> 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 7

Trong HTML 4.01 khai báo <!DOCTYPE> 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 <!DOCTYPE> trong HTML5

Khai báo <!DOCTYPE> trong HTML4.01 Strict

Khai báo <!DOCTYPE> trong XHTM1.1

Trang 8

Html5 sekleton

<article> Định nghĩa một mục nội dung trong tài liệu

<aside> Định nghĩa nội dung phần bên cạnh nội dung trang web

<dbi> Đị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

<details> Định nghĩa một phần phụ thêm mà người dùng có thể hiển thị hoặc

ẩn

<dialog> Định nghĩa một hộp dialog hoặc cửa sổ

<figcaption> Định nghĩa tiêu đề của phần tử ảnh <figure>

<figure> Định nghĩa phần tử chứa ảnh, đồ thị…

<footer> Định nghĩa footer của văn bản hoặc một phần của văn bản

<header> Định nghĩa header của văn bản hoặc một phần của văn bản

<main> Định nghĩa nội dung chính của văn bản

<mark> Định nghĩa đoạn text được đánh dấu, nhấn mạnh, highlighted

<menuitem> Định nghĩa một menu item mà người dùng có thể gọi từ một pupup

menu

<meter> Định nghĩa tỷ lệ trong một phạm vi

<nav> Định nghĩa phần chứa các liên kết trong văn bản

<progress> Định nghĩa tiến trình của một nhiệm vụ

<section> Định nghĩa một khu vực, một phần trong tài liệu

Trang 9

<summary> Định nghĩa phần đầu nhìn thấy của thẻ <details>

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 10

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 11

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ẻ <canvas> đượ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

Trang 12

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

Phục thuộc vào độ phân giải Không phụ thuộc vào độ phân giải

Không hỗ trợ xử lý sự kiện Hỗ trợ xử lý sự kiện

Nghèo nàn khả năng hiển thị text Phù hợp với các ứng dụng có vùng hiển thị

lớn(google map)Bạn có thể lưu ảnh dưới dạng png hoặc

Phù hợp với game graphic Không phù hợp với ứng dụng game

2.2.6 New media elements

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 14

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 15

3.2 Giao diện trang web.

3.3 HTML5 new input types and attributes

Giao diện

Trang 17

Trang 22

video và audio chỉ có thể được trình diễn sử dụng plugin (như flahs) </p>

Your browser does not support the video tag

Your browser does not support the audio element </audio>

</p>

</body>

</article>

Trang 23

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

•

Định dạng
Số trang	23
Dung lượng	506,54 KB