Tìm hiểu ngôn ngữ html5 và thử nghiệm xây dựng phần mềm quản lý nhà khách hưng bình trường đại học vinh

TỔNG QUAN VỀ HTML

Lịch sử hình thành

HTML, viết tắt của Hyper Text Markup Language, là ngôn ngữ đánh dấu siêu văn bản dùng để tạo ra các trang web Mỗi trang trên một website được biểu diễn dưới dạng tài liệu hoặc tập tin HTML Tim Berners-Lee, người sáng tạo HTML, cũng là người phát minh ra World Wide Web và là chủ tịch của W3C (World Wide Web Consortium), tổ chức chịu trách nhiệm thiết lập các tiêu chuẩn cho môi trường Internet.

Tài liệu HTML được cấu thành từ các phần tử HTML, được xác định bằng các cặp thẻ bao gồm thẻ mở và thẻ đóng, ví dụ như và Nội dung muốn được định dạng bằng HTML sẽ được đặt bên trong cặp thẻ, chẳng hạn như Đây là chữ in đậm Tuy nhiên, một số thẻ đặc biệt như không có thẻ đóng và thông tin được khai báo thông qua các thuộc tính.

Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là html hoặc htm.

Quá trình phát triển

Nội dung của phần này đƣợc tham khảo tài liệu [7]

Vào năm 1990, HTML còn rất đơn giản và chỉ được sử dụng chủ yếu tại CERN Các công ty lớn như HP đã không nhận thấy tầm quan trọng của Web, họ cho rằng Web chỉ là công cụ cho những người đam mê công nghệ giao tiếp, trong khi điện thoại đã đủ để đáp ứng nhu cầu liên lạc.

Năm 1993, trình duyệt Mosaic ra mắt phiên bản đầu tiên, đánh dấu sự khởi đầu của việc thêm các tính năng mới cho HTML như hiển thị ảnh và form Sự phát triển này khiến internet trở thành một đề tài nóng, dẫn đến việc các nhóm lập trình viên thi nhau tạo ra các trình duyệt riêng Tuy nhiên, việc mở rộng HTML không tuân theo quy tắc chung nào.

Tháng 11-1994, trình duyệt Netscape ra đời và mau chóng thành công Nó đƣa

Phạm Đức Trung – Lê Khắc Trường – Lớp 53K2 – Khoa CNTT 6

Web trở nên dễ tiếp cận hơn với mọi người, dẫn đến sự phổ biến đến mức nhiều người lầm tưởng rằng Netscape đã tạo ra Web Cùng năm đó, tổ chức W3C được thành lập nhằm đặt tiêu chuẩn cho ngôn ngữ HTML và phát hành phiên bản HTML 2.0 Tuy nhiên, vào thời điểm này, W3C chưa có tiếng nói mạnh mẽ, và Netscape thường không tham gia vào các cuộc họp về tiêu chuẩn, phát triển HTML theo cách riêng của mình.

Vào năm 1995, Microsoft ra mắt Internet Explorer 1.0 để cạnh tranh với Netscape, đánh dấu cuộc chiến trình duyệt đầu tiên Thời điểm đó, tiêu chuẩn HTML vẫn chưa được phát triển rõ ràng Với việc cài đặt IE làm trình duyệt mặc định cho Windows, Microsoft đã tận dụng lợi thế này để vượt qua và chiếm lĩnh thị trường, đánh bại Netscape.

Với sự phát triển của Web, HTML đã trải qua nhiều nâng cấp, bắt đầu với HTML 3.2 vào năm 1997 và tiếp theo là HTML 4.0 vào năm 1999 Đến năm 2002, Internet Explorer (IE) chiếm tới 95% thị phần trình duyệt, khiến việc thiết lập một tiêu chuẩn cho HTML trở nên khó khăn, khi mà Microsoft nắm giữ quyền kiểm soát Mặc dù IE 6.0 vẫn tuân thủ tiêu chuẩn HTML 4.0, nhưng nó hoạt động theo cách riêng của mình, dẫn đến sự thay đổi rất ít trong nhiều năm qua đối với thế giới Web.

Năm 2004, sự ra đời của Firefox đã tạo ra một bước ngoặt mới trong thị trường trình duyệt, với tốc độ nhanh hơn Internet Explorer (IE) và tuân thủ các tiêu chuẩn web Sự xuất hiện của các trình duyệt thế hệ tiếp theo như Opera, Safari và Google Chrome đã khởi động cuộc chiến trình duyệt lần thứ hai, đánh dấu sự cạnh tranh quyết liệt giữa IE và các đối thủ mới.

Cấu trúc trang HTML

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Tiêu đề trang Web

Phạm Đức Trung – Lê Khắc Trường – Lớp 53K2 – Khoa CNTT 7

Phần thân trang Web

Cấu trúc cơ bản của trang HTML có dạng như sau, thường gồm 3 phần:

- : Phần khai báo chuẩn của html

- : Phần khai báo ban đầu, khai báo về meta, title, css, javascript…

Phần là nơi chứa nội dung chính của trang web, hiển thị thông tin cho người dùng Mỗi trang web có cấu trúc khác nhau, có thể là một cột, hai cột hoặc nhiều cột Dưới đây là ví dụ về một trang đơn giản sử dụng hai cột để bố trí nội dung.

Phần đầu của trang web bao gồm logo, câu slogan, các liên kết, banner quảng cáo, nút bấm và các form ngắn như form tìm kiếm, tạo nên một giao diện hấp dẫn và dễ dàng truy cập cho người dùng.

Phần liên kết toàn cục (global navigation) là yếu tố quan trọng trong thiết kế trang web, giúp người dùng dễ dàng truy cập đến các trang chính Nó không chỉ chứa các liên kết đến những trang quan trọng mà còn có thể bao gồm các liên kết con (sub navigation) để hỗ trợ điều hướng hiệu quả hơn.

- Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar)

- Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem

- Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang

(local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,

Footer của trang web là phần quan trọng, thường bao gồm thông tin liên hệ như tên công ty, địa chỉ, số điện thoại, và email Ngoài ra, footer còn chứa các thông tin về bản quyền và có thể bao gồm các liên kết toàn trang hoặc banner liên kết.

Phạm Đức Trung – Lê Khắc Trường – Lớp 53K2 – Khoa CNTT 8

Nhƣợc điểm

Thẻ div rất linh hoạt nhưng thường bị lạm dụng, khiến việc phân biệt giữa các thẻ div cho menu, nội dung và footer trở nên khó khăn Việc sử dụng id và class để xác định chức năng của từng thẻ làm cho mã trở nên phức tạp Nếu có các thẻ riêng biệt cho menu, nội dung và footer, đoạn mã sẽ trở nên đơn giản và dễ quản lý hơn.

Việc viết mã JavaScript để kiểm tra lỗi cho các kiểu dữ liệu như email, ngày sinh và mật khẩu là rất quan trọng vì mỗi ứng dụng có yêu cầu và cách thức xử lý khác nhau Điều này giúp đảm bảo tính chính xác và an toàn cho dữ liệu người dùng, đồng thời cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi ngay lập tức khi có lỗi.

Phạm Đức Trung – Lê Khắc Trường – Lớp 53K2 – Khoa CNTT 9

Khi chèn file Adobe Flash, video, ta lại phải đi tìm một đoạn dài loằng ngoằng để nhúng chúng vào trang HTML

Adobe Flash không còn phù hợp cho việc hiển thị trên các thiết bị di động, vì iOS không hỗ trợ Flash cho iPhone và Android 4.x trở lên cũng ngừng hỗ trợ công nghệ này Trong khi đó, việc lướt web trên di động ngày càng trở nên phổ biến.

Phạm Đức Trung – Lê Khắc Trường – Lớp 53K2 – Khoa CNTT 10

TÌM HIỂU VỀ HTML5

Khái niệm

HTML5 là phiên bản mới nhất và là thế hệ tiếp theo của ngôn ngữ đánh dấu siêu văn bản (HTML), đang trong quá trình phát triển và hoàn thiện từ các phiên bản trước, như HTML 4.01 ra mắt năm 1999 Đây là phiên bản thứ năm của HTML, được phát triển từ năm 1990 và được chuẩn hóa thành HTML4 vào năm 1997, chính thức xuất hiện vào tháng.

12 năm 2012 Tuy nhiên, nhiều phiên bản trình duyệt mới hiện nay đã có hỗ trợ các phần tử, thẻ mới có trong HTML5.[8]

HTML5 is the product of collaboration between the W3C (World Wide Web Consortium) and the WHATWG (Web Hypertext Application Technology Working Group) While W3C focused on XHTML 2.0 (an extended markup language), WHATWG concentrated on forms and applications.

Năm 2006, họ quyết định hợp tác và tạo ra phiên bản mới của HTML, đó là HTML5.[8]

Một số điểm mới trên HTML5:

- Giảm thiểu nhu cầu sử dụng các plugins (trình cắm) bên ngoài, với HTML5, sẽ không cần đến các công nghệ độc quyền

- Thêm các thẻ đánh dấu mới để dần thay thế cho các mã lập trình

- Công cụ thiết kế mới

- Khả năng hoạt động xuyên suốt giữa các trình duyệt.

Xu hướng

Cách đây 5 năm, Adobe Flash là điều kiện cần thiết để xem phim và chơi game trên nền Web, với nhiều trang Web yêu cầu người dùng cài đặt Flash để truy cập.

HTML5 ra đời đã đánh dấu sự kết thúc của Adobe Flash, loại bỏ hoàn toàn công nghệ này sau gần 20 năm thống trị Với những ưu điểm vượt trội, HTML5 cho phép xử lý nội dung đa phương tiện như âm thanh và video trực tiếp trên nền Web mà không cần cài đặt thêm bất kỳ plugin nào.

Adobe Flash làm giảm hiệu suất máy và tiêu tốn nhiều năng lượng, ảnh hưởng đến thời gian sử dụng pin của thiết bị di động Ngược lại, HTML5 nhẹ nhàng hơn và sử dụng ít tài nguyên phần cứng, giúp tiết kiệm điện năng hiệu quả hơn.

Phạm Đức Trung – Lê Khắc Trường – Lớp 53K2 – Khoa CNTT 11

YouTube đã chuyển sang sử dụng HTML5 thay vì Adobe Flash, khi các trình duyệt lớn như Firefox và Chrome sẽ ngừng hỗ trợ Flash trong thời gian tới Điều này hứa hẹn một thế giới Internet thân thiện hơn, mở ra nhiều cơ hội mới cho những người làm quảng cáo, những người biết nắm bắt thời cơ kịp thời.

Lý do chọn

Nội dung phần này đƣợc tham khảo tại tài liệu [10]

Tất cả chúng ta đều mong muốn sở hữu một trang web năng động và tương tác tốt, đáp ứng nhu cầu người dùng và mang lại trải nghiệm thú vị khi tương tác với nội dung Thẻ trong HTML5 cho phép bạn thể hiện khả năng tương tác và hình ảnh động, điều mà trước đây chỉ có thể thực hiện trên các ứng dụng như Adobe Flash.

HTML5 không chỉ có thẻ mà còn cung cấp nhiều API hữu ích, cho phép phát triển các ứng dụng Web năng động và nâng cao trải nghiệm người dùng.

2.3.2 Phát triển ứng dụng game

Bạn có thể phát triển trò chơi bằng thẻ trong HTML5, một công cụ tuyệt vời cho việc xây dựng ứng dụng game trên điện thoại Nếu bạn đã từng tạo ra các trò chơi, HTML5 sẽ giúp bạn thực hiện điều đó một cách dễ dàng và thân thiện.

Adobe Flash trước đó thì chắc chắn bạn sẽ cảm thấy thích thú khi xây dựng các ứng dụng game trên HTML5

2.3.3 Hỗ trợ mọi trình duyệt

Các trình duyệt hiện đại như IE9, Chrome, Firefox và Safari được tối ưu hóa để hiển thị tốt nhất các tính năng của HTML5 Ngay cả khi sử dụng các trình duyệt cũ hơn với thẻ Doctype của HTML5, nội dung vẫn có thể được trình bày một cách hiệu quả.

HTML5 đang được cải tiến để trở nên thân thiện hơn với các nhà thiết kế website, giúp họ dễ dàng tương tác với những trình duyệt cũ Việc này được thực hiện thông qua việc thêm một đoạn Javascript, cho phép các trình duyệt này hỗ trợ các yếu tố mới của HTML5.

Ƣu điểm

Công nghệ di động đang ngày càng phổ biến, với số lượng người dùng và truy cập qua các thiết bị di động tăng nhanh chóng trong những năm gần đây Xu hướng thiết kế và phát triển ứng dụng phù hợp với thiết bị di động trở thành một yêu cầu thiết yếu HTML5 là công cụ tiên tiến nhất, được phát triển để tối ưu hóa cho các trang web và ứng dụng di động.

Trình duyệt di động được tối ưu hóa hoàn hảo nhờ vào HTML5, với các thẻ meta mạnh mẽ, cung cấp cho các nhà thiết kế web công cụ hiệu quả để cải thiện trải nghiệm trên điện thoại và màn hình cảm ứng nhỏ.

Nội dung phần này đƣợc tham khảo từ tài liệu [11]

2.4.1 HTML5 làm giảm tầm quan trọng của các plug-ins

Trước đây, Web chủ yếu gắn liền với các plug-in và add-on của trình duyệt, khuyến khích sự sáng tạo và trải nghiệm người dùng Âm thanh, hình ảnh động và nhiều thủ thuật khác được tích hợp trên Web thông qua các plug-ins do Sun, Adobe, RealAudio, Microsoft và nhiều công ty khác phát triển Giao diện mở của plug-ins cho phép mọi người dễ dàng trải nghiệm và thêm tính năng mới.

Cuộc chiến giữa Adobe Flash và HTML5 đang diễn ra quyết liệt, với HTML5 đang nổi lên như một sức mạnh mới đáng gờm Mặc dù JavaFX là một công cụ thiết kế trực quan lý tưởng, nhưng việc học cú pháp mới có thể không hấp dẫn khi JavaScript và Canvas đã hoạt động hiệu quả Do đó, các plug-in dường như đang dần bị lãng quên trong bối cảnh này.

Plug-ins có thể biến mất hoặc không còn được sử dụng, nhưng điều này phụ thuộc vào nhu cầu của người dùng Nếu bạn chỉ cần vẽ hình ảnh đơn giản, Canvas sẽ là lựa chọn tốt nhất Tuy nhiên, nếu bạn muốn tạo ra một thế giới 3-D phức tạp như trong các trò chơi sử dụng Adobe Flash và Shockwave, bạn vẫn cần đến plug-in để kết nối trực tiếp với video và vận hành các trò chơi 3-D.

Phạm Đức Trung – Lê Khắc Trường – Lớp 53K2 – Khoa CNTT 13

2.4.2 HTML5 hỗ trợ đồ họa tương tác

Web cũ chỉ cho phép tải hình ảnh qua các file GIF hoặc JPG, trong khi web mới sử dụng Canvas để xây dựng hình ảnh Điều này mở ra cơ hội cho nhiều thư viện đồ họa đẹp, giúp tăng tính tương tác cho website.

Hiện nay, JavaScript không chỉ có khả năng tính toán mà còn có thể tạo ra hình ảnh từ dữ liệu, mang đến sự sống động cho các ứng dụng Các lập trình viên đang tận dụng thời gian để phát triển những giải pháp sáng tạo Gần đây, Adobe đã bắt đầu phát triển đồ họa tinh xảo cho HTML5, mở ra những khả năng mới cho việc thiết kế đồ họa, hứa hẹn sẽ mang đến những sản phẩm tinh vi hơn trong tương lai.

2.4.3 HTML5 cho phép các ứng dụng kết nối tới khu vực lưu trữ file

Người lập trình Web thường lưu trữ nhiều thông tin trong cookies, với 300 cookies tương đương 4096 byte Bộ công cụ Dojo trước đây sử dụng plug-in Flash để trưng dụng lựa chọn từ ổ đĩa, nhưng hiện nay chỉ cần sử dụng HTML5 là đủ.

Lập trình viên có khả năng lưu trữ nội dung tùy ý, giúp việc cài đặt ứng dụng trở nên dễ dàng hơn, tương tự như các ứng dụng cũ Các ứng dụng này có thể chạy mã JavaScript từ kho lưu trữ HTML5 ngoại tuyến và vẫn hoạt động hiệu quả ngay cả khi có kết nối Internet.

Phương pháp này không làm gián đoạn hoạt động phát triển nhóm “đám mây”, vì dữ liệu có thể hoạt động như lưu trữ thông minh Lập trình game cho phép lưu trữ theo vùng các mô tả và hình ảnh minh họa, giúp tiết kiệm thời gian tải thông tin nhiều lần.

Dữ liệu sẽ được lưu trữ trong các tệp tin hệ thống, khiến việc khôi phục trở nên khó khăn Do đó, người dùng sẽ gặp nhiều trở ngại khi muốn chuyển dữ liệu từ máy này sang máy khác.

2.4.4 HTML5 sẽ đơn giản hóa chia nhỏ dữ liệu với cyborg data

HTML chỉ giúp trình duyệt định vị dữ liệu, nhưng Microformats trong HTML5 mang lại các phương pháp tinh vi để cải thiện khả năng phân tích dữ liệu, từ đó tăng cường giá trị của trang web trong kết quả tìm kiếm.

Phạm Đức Trung – Lê Khắc Trường – Lớp 53K2 – Khoa CNTT 14

Microformats đã mang lại nhiều giải pháp cho lập trình viên, mặc dù không ai có thể dự đoán chính xác mức độ ảnh hưởng của chúng đối với sự phát triển của Web.

2.4.5 HTML5 giúp hợp nhất các địa chỉ Đối với máy chủ Web, địa chỉ máy tính của chúng ta đơn thuần chỉ là những con số ẩn danh Chuẩn HTML5 cho phép các trình duyệt định vị vị trí của người dùng Tuy nhiên, nó sẽ không hoạt động với các máy bàn (hoạt động với GPS hoặc Wifi), nhƣng nó lại hoạt động tốt với smartphone cầm tay

2.4.6 HTML5 làm video của Web đẹp hơn

Chuẩn HTML5 cho phép lập trình viên dễ dàng tích hợp video vào trang web, đồng thời cung cấp các ứng dụng cho jQuery và PHP, thay thế cho Adobe Flash, Silverlight và JavaFX.

HTML4, HTML5, XHTML

Nội dung này đƣợc tham khảo từ tài liệu [12]

HTML4, được phát triển bởi Tim Berners-Lee vào năm 1990, là phiên bản HTML lâu đời nhất và vẫn còn được sử dụng đến ngày nay Phiên bản này có cú pháp tương đối lỏng lẻo, trong đó thẻ đóng chỉ là tham số, bắt đầu bằng thẻ mở.

Phạm Đức Trung – Lê Khắc Trường – Lớp 53K2 – Khoa CNTT 16 văn bản, bạn có thể không cần sử dụng thẻ đóng nếu sử dụng HTML4

Cú pháp lỏng lẻo của HTML4 đã tạo ra khó khăn cho các trình duyệt trong việc biên dịch chính xác, khiến nó trở nên không còn đáng tin cậy Để khắc phục vấn đề này, phiên bản XHTML đã ra đời, mặc dù vẫn dựa trên HTML4 Hiện nay, một phần lớn các website vẫn sử dụng XHTML Để phân biệt, bạn có thể kiểm tra mã nguồn của trang web bằng cách nhấn chuột phải và chọn “view source” hoặc “view page source”, và bạn sẽ thấy đoạn mã này ở đầu trang.

XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> Đoạn mã này cho bạn biết trang Web đang sử dụng phiên bản XHTML bằng cách khai báo loại văn bản (doctype definition – dtd) để trình duyệt biên dịch đúng

Một số website cũ, khi xem mã nguồn bạn sẽ thấy chúng vẫn đang sử dụng HTML4

HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

XHTML, viết tắt của eXtensible Hypertext Markup Language, là một phương ngữ của XML, một ngôn ngữ đánh dấu tổng quát Sự khác biệt chính giữa XHTML và HTML4 là tất cả các thẻ phải được đóng lại sau khi mở Ngoài ra, còn có những quy định nghiêm ngặt về việc lồng ghép các thẻ, và việc tuân thủ những quy tắc này là rất quan trọng.

Các trình duyệt không xử lý các giả lập mà sẽ bỏ qua các đoạn mã lỗi khi biên dịch Tất cả các thẻ trong XHTML đều tương tự như HTML4, điều này lý giải tại sao XHTML trở thành ngôn ngữ phổ biến trong cộng đồng các nhà phát triển web chuyên nghiệp.

HTML5 là một tiêu chuẩn mới vẫn đang đƣợc phát triển (mặc dù đã trở nên phổ

HTML5 mang đến nhiều tính năng mới quan trọng, phản ánh cách chúng ta sử dụng Web hiện nay, đặc biệt là sự gia tăng sử dụng thiết bị di động Các nhà phát triển web ngày càng áp dụng HTML5 rộng rãi, cho phép tạo ra nhiều nội dung thú vị và tương tác trên các trang web.

HTML5 là một thuật ngữ rộng, bao gồm nhiều công nghệ liên quan và tích hợp những tính năng ưu việt của HTML4, đồng thời bổ sung thêm một số thẻ mới.

Một số thẻ đáng chú ý có thể liệt kê nhƣ sau:

HTML5 cho phép các nhà phát triển web nhúng video trực tiếp vào trang mà không cần plugin, khác với HTML4 yêu cầu sử dụng Adobe Flash Tính năng này rất hữu ích và hấp dẫn cho các nhà phát triển, đặc biệt khi người dùng có thể xem nội dung trên iPhone và iPad, thiết bị mà Apple đã chặn Adobe Flash.

Tính năng định vị địa lý (Geolocation) là một yếu tố quan trọng trong các ứng dụng web trên thiết bị di động, cho phép các trang web xác định vị trí của người sử dụng thông qua GPS trên điện thoại di động, iPad, hoặc bằng địa chỉ IP trên máy tính để bàn, cũng như thông qua Wi-Fi và Bluetooth.

Canvas là một tính năng mới cho phép thao tác đồ họa và hình ảnh trên trang web, sử dụng JavaScript để vẽ đồ họa Đây là một giải pháp thay thế cho Adobe Flash.

Các thẻ mới

Nội dung phần này đƣợc tham khảo các tài liệu [13] và [14]

- Thẻ header: để đánh dấu một phần của trang HTML là phần tiêu đề

A Simple HTML Page

Phạm Đức Trung – Lê Khắc Trường – Lớp 53K2 – Khoa CNTT 18

Content

Footer

Thẻ section được sử dụng để xác định các phần quan trọng trong nội dung của trang web, tương tự như việc chia một cuốn sách thành các chương Việc sử dụng thẻ này giúp tổ chức và phân loại thông tin một cách rõ ràng, tạo điều kiện thuận lợi cho người đọc và cải thiện khả năng tối ưu hóa công cụ tìm kiếm (SEO).

A Simple HTML Page

This is section.