Web front-end (23) - HTML - Một số chủ đề khác

Bài trước: Web front-end (22) - HTML - Các thành phần nhúng

-----

1.1       Một số chủ đề khác

1.1.1       HTML không chỉ là ngôn ngữ đánh dấu

Tới đây, chúng ta đã biết sử dụng các phần tử HTML để tạo ra cấu trúc và thêm ngữ nghĩa cho nội dung trang web. HTML, viết tắt của HyperText Markup Language là ngôn ngữ đánh dấu siêu văn bản. Hiểu nôm na là ngôn ngữ được sử dụng để đánh dấu, nhằm tạo ra siêu văn bản, việc đánh dấu được thực hiện bằng các thẻ. Như đã biết, siêu văn bản (hypertext) là một tài liệu, nó không chỉ có văn bản mà còn có những thứ ngoài văn bản, như hình ảnh, âm thanh, video, các liên kết, hình minh họa, hoạt hình, game.

Bên cạnh việc tạo ra cấu trúc và thêm ngữ nghĩa cho nội dung, HTML còn cung cấp thêm nhiều phương thức cho phép làm việc với âm thanh, video, chức năng tương tác, lưu trữ cục bộ, làm việc ở chế độ không kết nối mạng (offline), bản đồ và nhiều chức năng khác.

Để tạo ra cấu trúc và thêm ngữ nghĩa cho nội dung, chỉ cần quan tâm tới phần tử, thuộc tính và các giá trị. Tuy nhiên, để làm một ứng dụng web thì cần phải sử dụng thêm các API. HTML5 cung cấp hàng loạt các API giúp cho việc lập trình ứng dụng web được dễ dàng hơn.

Ví dụ một số loại API của HTML5:

­– Media player API

– Session history API

– Offline web application API

– Editing API

– Drag and drop API

– Canvas API

– Web storage API

– Geolocation API

– Web workers API

– Web sockets API

Để tìm hiểu về các chủ đề API của HTML, chúng ta cần phải có kiến thức về lập trình JavaScript. Vì vậy, chúng ta sẽ quay trở lại chủ đề này ở các bài học sau.

1.1.2       Cách tìm và sửa lỗi HTML

Tới thời điểm này, nhìn lại quá trình viết mã HTML và xem kết quả trên trình duyệt thì thấy khá đơn giản. Chỉ là dùng một chương trình soạn thảo văn bản thô (ví dụ Notepad), hoặc một trình viết mã (ví dụ VS code) để viết HTML, lưu lại vào một tập tin, rồi mở tập tin đó bằng trình duyệt và xem kết quả.

Khi chúng ta chỉ xem các clip hướng dẫn hoặc đọc tài liệu và làm theo thì rất ít phát sinh lỗi. Nếu có lỗi, chỉ cần xem lại phần hướng dẫn, xem làm sai chỗ nào và làm lại là được. Ngoài ra, để kiểm tra tính hợp lệ của mã nguồn có thể sử dụng trang https://validator.w3.org/

Khi mới học, kiến thức và kĩ năng còn ít, thì nên xem và làm theo. Nó giúp dễ hình dung, dễ hiểu về đối tượng đang học. Tuy nhiên, khi đã hiểu sơ sơ rồi, thì nên tự tìm tòi, thử nghiệm, rồi tự rút ra các bài học cho bản thân. Thường thì sẽ học được nhiều hơn khi chúng ta tìm cách sửa các lỗi gặp phải lúc viết mã.

Hầu hết các trình duyệt đều có công cụ gọi là developer tools. Đây là một công cụ hữu ích, để tìm và sửa lỗi; ngoài ra nó cũng giúp chúng ta phân tích mã nguồn, để hiểu sâu hơn về HTML và nhiều thứ khác.

Để mở developer tools, cần mở trình duyệt, và sử dụng một trong các cách sau:

– Bấm tổ hợp ba phím Ctrl+Shift+I

– Bấm phím F12

– Vào menu của trình duyệt tìm tới mục Developer tools

– Bấm chuột phải vào trang web, chọn Inspect

Vì chúng ta mới chỉ biết HTML, nên chỉ cần quan tâm tới tab Elements trên cửa sổ của developer elements.

Cửa sổ nội dung của tab Elements chính là cây DOM, cũng là nội dung mã HTML của trang web hiện tại. Xem hình minh họa,

Một số kĩ năng sử dụng developer tool nên biết:

– Dùng công cụ chọn (cái hình mũi tên phía trên, bên trái, gần chữ Elements), để chọn một đối tượng trên trang web, rồi xem mã HTML tương ứng. Hoặc chỉ cần chuột phải vào đối tượng trên trang web và chọn Inspect.

– Thay đổi nội dung trong cửa sổ Elements, rồi xem kết quả thay đổi trên giao diện.

– Sử dụng Ctrl + F để tìm kiếm một phần tử trên cửa sổ Elements (nhớ bấm chuột vào cửa sổ Elements, trước khi bấm Ctr + F, nếu không sẽ là tìm kiếm trên trang web).

– Lưu ý: các chỉnh sửa mã nguồn ở cửa sổ developer tool chỉ ảnh hưởng (áp dụng) tạm thời lên trang web ở trình duyệt, chứ nó không lưu lại vào tập tin mã nguồn.

– Tại cửa sổ của developer tools, bấm vào dấu ba chấm ở góc trên bên phải, chọn dock side để xem các cửa sổ ở nhiều chế độ khác nhau.

– Tại cửa sổ của developer tools, bấm vào biểu tượng có hai hình chữ nhật ở góc trên bên trái để xem trang web ở các thiết bị khác nhau, với kích thước màn hình khác nhau. Sau khi chọn thiết bị, chọn thêm chế độ xoay ngang và dọc để quan sát (biểu tượng nút xoay ở góc trên bên phải).

1.1.3       Chú thích

Chú thích (comment) là những phần ghi thêm vào mã nguồn khi lập trình, giúp các lập trình viên dễ dàng hiểu mã nguồn và làm việc hiệu quả hơn. Khi biên dịch, trình duyệt sẽ không biên dịch và không thực thi nội dung chú thích, dựa vào tính chất này có thể sử dụng chú thích để vô hiệu một vài đoạn mã trong quá trình chạy kiểm tra, sửa lỗi.

Để chú thích trong HTML, sử dụng kí hiệu <!-- --> để bọc lại phần nội dung chú thích.

[HTML]

<body>

            <div><!-- phần nội dung -->

                        <p>Phần nội dung trang web</p>

            </div><!-- /phần nội dung -->

</body>

[Kết quả]

Khi xem trang web kết quả, nội dung nằm trong phần chú thích sẽ không được hiển thị.

Chú thích không cho phép lồng nhau, nghĩa là không thể có chú thích này nằm trong chú thích kia. Ví dụ,

[HTML]

<div><!-- phần <!-- nội --> dung -->

            <p>Phần nội dung trang web</p>

</div><!-- /phần nội dung -->

[Kết quả]

Khi xem trang web kết quả, một phần nội dung chú thích sẽ được hiển thị.

Lưu ý, không được thêm khoảng trắng vào giữa dấu < và dấu ! trong thẻ mở của chú thích. Ví dụ,

[HTML]

<div>< !-- phần  nội dung -->

            <p>Phần nội dung trang web</p>

</div><!-- /phần nội dung -->

[Kết quả]

Khi xem trang web kết quả, phần nội dung chú thích sẽ được hiển thị.

Chú thích gồm nhiều hàng

Để chú thích cho nhiều hàng, chỉ cần đặt thẻ mở (<!--) ở trước hàng đầu tiên và đặt thẻ đóng (-->) ở sau hàng cuối cùng. Ví dụ,

[HTML]

<body>

            <!-- div>

                        <p>Phần nội dung này tạm thời không được hiển thị</p>

            </div> -->

            <div><!-- phần nội dung -->

                        <p>Phần nội dung trang web</p>

            </div><!-- /phần nội dung -->

</body>

[Kết quả]

Dòng chữ “Phần nội dung này tạm thời không được hiển thị” sẽ không được hiển thị.

Chú thích có điều kiện

Là loại chú thích chỉ có tác dụng trên trình duyệt Internet Explorer, các trình duyệt khác khi gặp chú thích này sẽ bỏ qua chúng.

Trình duyệt Internet Explorer từ phiên bản 5 (IE5) tới phiên bản 9 (IE9) sẽ hỗ trợ loại chú thích này.

Ví dụ,

[HTML]

<body>

            <!--[if IE 9]>

                        <p>Bạn đang sử dụng trình duyệt IE9</p>

            <![endif]-->

                        <p>Từ IE10 trở đi, không còn hỗ trợ chú thích có điều kiện nữa</p>

            </body>

[Kết quả]

- Nếu trình duyệt là IE9 thì sẽ xuất thêm dòng chữ “Bạn đang sử dụng trình duyệt IE9”

Chú thích bằng thẻ <comment>

Một số trình duyệt cho phép sử dụng thẻ <comment> để tạo chú thích.

Sử dụng chú thích để che đoạn script

Sẽ học JavaScript sau, tuy nhiên cũng nên biết cách sử dụng này.

Với các trình duyệt cũ, có thể sử dụng chú thích của HTML để che đi đoạn mã JavaScript (hoặc VBScript) trong trường hợp trình duyệt không hỗ trợ đoạn script. Điều này giúp trang web hoạt động tốt trên các trình duyệt cũ.

Ví dụ,

[HTML]

<head>

                        <title>Lam web</title>

                        <meta charset="utf-8">

                        <script>

                        <!--

                                    document.write('chào bạn!');

                        //-->

                        </script>

            </head>

            <body></body>

[Kết quả]

Khi chạy đoạn mã trên, JavaScript sẽ xuất câu “chào bạn!” ra màn hình.

Ở đoạn mã trên nếu  trình duyệt có hỗ trợ script, thì dấu “//” là chú thích của script, do vậy dấu “-->” không được thực hiện. Nếu trình duyệt không hỗ trợ script thì cặp dấu <!-- …--> sẽ vô hiệu đoạn mã script.

Sử dụng chú thích để che đoạn CSS

Sẽ học CSS sau, tuy nhiên cũng nên biết cách sử dụng này.

Với các trình duyệt cũ, có thể sử dụng chú thích của HTML để che đi đoạn mã CSS trong trường hợp trình duyệt không hỗ trợ đoạn CSS. Điều này giúp trang web hoạt động tốt trên các trình duyệt cũ.

Ví dụ,

[HTML]

<head>

                        <title>Lam web</title>

                        <meta charset="utf-8">

                        <style>

                                    <!--

                                    .vi-du {

                                                border: 1px solid red;

                                    }

                                    //-->

                        </style>

            </head>

            <body>

                        <p class="vi-du">Chào bạn.</p>

            </body>

[Kết quả]

Ở đoạn mã trên nếu  trình duyệt có hỗ trợ CSS, thì dấu “//” là chú thích của CSS, do vậy dấu “-->” không được thực hiện. Nếu trình duyệt không hỗ trợ CSS thì cặp dấu <!-- …--> sẽ vô hiệu đoạn mã của CSS.

Chạy thử đoạn mã trên, vì mặc định trình duyệt có hỗ trợ CSS, nên kết quả là chữ “Chào bạn.” được bao bởi hình chữ nhật màu đỏ.

Chú ý: mặc dù chú thích không hiển trị trên trang web, tuy nhiên khi vào chế độ view source thì  vẫn thấy, để đảm bảo an toàn và giảm kích thước mã nguồn nên gỡ bỏ chú thích trước khi xuất bản website.

1.1.4       Bài tập và thực hành

Bài tập 1. Viết lại các đoạn mã trong phần lý thuyết.

Bài tập 2. Làm theo clip sau: https://www.youtube.com/watch?v=x4q86IjJFag

1.1.5       Xem và đọc thêm

[1] HTML APIs, https://www.youtube.com/watch?v=EEhohSp0if4&list=PLyuRouwmQCjlBGMxI_0Ly_Dw-vrniOYNh

[2] Developer tools: https://www.youtube.com/watch?v=x4q86IjJFag

[3] Chú thích: https://www.youtube.com/watch?v=JG0pdfdKjgQ-

----

Cập nhật: 16/5/2024

Bài sau: Web front-end (24) - HTML - Tập làm dự án_DA1 (thiết kế)

-----

Tải tài liệu đầy đủ: Tự học HTML căn bản

-----

LIÊN HỆ TÁC GIẢ

Web front-end (22) - HTML - Các thành phần nhúng

Bài trước: Web front-end (21) - HTML - Form label, bố cục, bài tập

-----

1.1       Các thành phần nhúng

Thành phần nhúng, tiếng Anh là embedded media hay embedded content.

Trong lĩnh vực web, thành phần nhúng được hiểu là các nội dung trên trang web mà được lấy từ nơi khác, hoặc nội dung không phải là văn bản được chèn vào trang web. Ví dụ: ảnh, iframe, object, embed, video, audio, canvas đều được gọi là thành phần nhúng.

Chúng ta đã tìm hiểu cách chèn ảnh vào trang web ở chương trước. Vì vậy, phần này chúng ta sẽ tìm hiểu về các thành phần nhúng khác, gồm:

– Iframe: là một cửa sổ riêng biệt, nhúng vào trang web, dùng để thực thi mã HTML lấy từ nơi khác

– Object, embed: là các phần tử nhúng đa năng, dùng để nhúng nhiều loại dữ liệu khác nhau cho trang web.

– Video, audio: bộ phát hình ảnh và âm thanh cho trang web

– Canvas: cho phép lập trình viên tạo ra hoạt cảnh, hoặc các tương tác giống như game.

1.1.1       Iframe

Phần tử iframe được sử dụng để nhúng các tài liệu HTML riêng biệt hoặc các tài nguyên web khác vào trang hiện thời.

Nói cách khác, bạn sử dụng iframe để nhúng các khung (frame), hay cửa sổ (window-in-a-window) vào trang web. Nội dung của khung này có thể là một trang web khác hoặc một đối tượng bất kì. Nội dung được nhúng không làm ảnh hưởng đến phần còn lại của trang web. Ví dụ nhúng một video từ Youtube, một bản đồ từ Google maps.

Iframe là viết tắt của inline frame, là các khung nội tuyến, có thể đặt các khung này ở vị trí bất kì trong trang web.

Cú pháp của phần tử iframe tương tự như phần tử img, cũng gồm: thuộc tính src xác định địa chỉ nguồn của nội dung, width và height xác định chiều rộng và chiều cao của khung. Phần nội dung của phần tử iframe sẽ được hiển thị khi trình duyệt không hỗ trợ iframe. Lưu ý: nội dung của iframe tức là phần nằm giữa hai thẻ <iframe></iframe> chứ không phải nội dung do thuộc tính src trỏ tới.

Ví dụ dưới đây sẽ hiển thị trang danh-sach.html trong một khung của trang index.html,

[danh-sach.html]

<!DOCTYPE html>

<html><head></head>

<body>

  <p>Một số kiến thức cần học web front-end:</p>

  <ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

    <li>React</li>

  </ul>

</body>

</html>

[index.html]

<!DOCTYPE html>

<html lang="en">

<head></head>

<body>

            <h1>Minh họa một khung hiển thị độc lập</h1>

            <iframe src="danh-sach.html" width="400" height="250">

                        Trình duyệt của bạn không hỗ trợ iframe. Xem nội dung của Danh sách tại đây <a href="danh-sach.html">Danh

                                    sách</a></iframe>

</body>

</html>

[Kết quả]

Ví dụ, để nhúng một khung phát clip từ youtube vào trang web, làm như sau: mở một clip trên youtube, để ý ở phía dưới của clip có nút SHARE, bấm vào nút SHARE để mở cửa sổ Share, bấm tiếp vào EMBED, để ý sẽ thấy toàn bộ đoạn mã của phần tử iframe, bấm COPY, dán đoạn mã này vào mã nguồn của một trang web mới, mở trang web mới để xem kết quả.

Cần tìm hiểu thêm vấn đề bảo mật khi sử dụng iframe, vì thông qua nội dung nhúng, người xấu có thể gài mã độc vào trang web và thực thi các hành động không mong đợi. Có thể sử dụng thuộc tính sandbox để không cho phép thực thi một số hành động trong iframe như hiển thị form, pop up, script.

1.1.2       Object và Embed

Trong làm web, plug-in là một thuật ngữ dùng để gọi các gói phần mềm, nó cung cấp thêm các chức năng mà trình duyệt không có. Các plug-in thường là các phần mềm của bên thứ ba (third-party) cung cấp. Tại sao gọi là bên thứ ba? Hai bên còn lại là ai? Theo tôi hiểu thì, bên thứ nhất là những người tạo ra trình duyệt, bên thứ hai là người tạo ra trang web hoặc ứng dụng web. Lý do phải dùng tới plug-in là do trước đây, các trình duyệt rất hạn chế trong việc hiển thị các định dạng dữ liệu không phải là văn bản, ví dụ như Java applets, Flash movie, RealMedia và thậm chí cả ảnh định dạng JPEG.

Có hai cách để nhúng các plug-in vào trang web, một là dùng phần tử object, hoặc hai là dùng phần tử embed. Object được sử dụng để nhúng nhiều loại đối tượng dữ liệu khác nhau, trong khi embed chỉ sử dụng để nhúng các plug-in.

Hai phần tử object và embed hiện nay ít được sử dụng, chúng được thay thế bằng các API. Các trình duyệt trên điện thoại thông minh và trình duyệt Microsoft Edge không còn hỗ trợ plug-in.

Ví dụ dưới đây sử dụng phần tử object để chèn một ảnh SVG, đồng thời cũng dự phòng một ảnh PNG nếu ảnh SVG không hiển thị được,

<object data="picture.svg" type="image/svg+xml">

    <img src="picture.png" alt="">

</object>

Ví dụ dưới đây sử dụng phần tử embed,

<embed type="video/quicktime"

src="movies/hekboy.mov"

width="320" height="256">

1.1.3       Video và Audio

Trước đây, các trình duyệt vẫn chưa tự xử lý được kiểu dữ liệu video và âm thanh, nên cần dùng tới các gói phần mềm bổ sung (plug-in).

Hiện nay, trình duyệt đã được bổ sung thêm hai phần tử để xử lý video và âm thanh là video và audio. Tuy nhiên, các trình duyệt chưa thống nhất với nhau về các định dạng âm thanh và video sẽ được hỗ trợ.

Khi nhúng âm thanh và video, bạn cần quan tâm tới hai yếu tố, một là âm thanh và video đã được mã hóa theo kiểu gì, và hai là kiểu tập tin chứa âm thanh và video.

Mã hóa âm thanh và video (thường gọi là codec, viết tắt của code/decode hoặc compress/decompress) là quá trình chuyển âm thanh/video sang dạng bit (0, 1) và thuật toán nén. Một số kiểu mã hóa phổ biến MP3, H.264, Vorbis, Theora, VP8, AAC.

Kiểu tập tin chứa âm thanh/video (hay còn gọi là định dạng của thùng chứa – container format) là định dạng tập tin dùng để chứa âm thanh/video đã được mã hóa cùng với các thông tin mô tả (metadata) đi kèm. Thông thường một kiểu tập tin sẽ hỗ trợ nhiều hơn một kiểu mã hóa (codec type).

Ví dụ, một số kết hợp giữa kiểu tập tin (container), định dạng âm thanh (audio) và định dạng video:

– MPEG-4 container + H.264 video codec + AAC audio codec; phần mở rộng của tập tin có dạng .mp4, .m4v

– WebM container + VP8 video codec + Vorbis audio codec; phần mở rộng của tập tin có dạng .webm

– WebM container + VP9 video codec + Opus audio codec; phần mở rộng của tập tin có dạng .webm

– Ogg container + Theora video codec + Vorbis audio codec; phần mở rộng của tập tin có dạng .ogv

Ví dụ, một số kết hợp giữa kiểu tập tin (container), và định dạng âm thanh (audio):

– MP3: cả container và codec đều là MP3; phần mở rộng của tập tin có dạng .mp3

– WAV: cả container và codec đều là WAV; phần mở rộng của tập tin có dạng .wav

– Ogg container + Vorbis audio codec; phần mở rộng của tập tin có dạng .ogg hoặc .oga

– MPEG-4 + AAC audio codec; phần mở rộng của tập tin có dạng .m4a

– WebM container + Vorbis audio codec; phần mở rộng của tập tin có dạng .webm

– WebM container + Opus audio codec; phần mở rộng của tập tin có dạng .webm

Thêm video vào trang web

Sử dụng phần tử video để nhúng một video vào trang web. Ví dụ,

<video src="canonind.mp4" width="640" height="480" poster="canonind.jpg" controls autoplay>

        Trình duyệt của bạn không hỗ trợ HTML5 video. Vui lòng bấm vào đây để xem <a href="canonind.mp4">MP4 video</a>

    </video>

Một số thuộc tính của phần tử video:

– width, height: chiều rộng và chiều cao của khung video, tính bằng px

– poster: hình ảnh hiển thị trước khi phát video

– controls: hiển thị thanh điều khiển video

– autoplay: video sẽ tự chạy sau khi trình duyệt tải xong video từ server về. Không nên để video được phát tự động, mà nên để cho người dùng chủ động phát video khi họ muốn. Thực tế, nhiều trình duyệt luôn luôn thiết lập chế độ không phát video tự động, do vậy, mặc dù có thuộc tính “autoplay” nhưng trình duyệt sẽ không phát video. Nếu muốn phát tự động cần thêm thuộc tính “muted” cho thẻ <video>. Ví dụ:

<video autoplay muted>

...

</video>

Để tăng tính tương thích, sử dụng phần tử source trong phần tử video. Phần tử source trỏ tới các tập tin video khác nhau, trình duyệt sẽ chọn video phù hợp để phát. Ví dụ,

<video id="video" controls poster="img/poster.jpg">

    <source src="clip.webm" type="video/webm">

    <source src="clip.mp4" type="video/mp4">

    <source src="clip.ogg" type="video/ogg">

    <a href="clip.mp4">Download the MP4 of the clip.</a>

</video>

Với phần tử video, bạn có thể tùy biến, thay đổi phần giao diện các nút điều khiển bằng CSS và thay đổi các chức năng bằng JavaScript. 

Thêm âm thanh (audio) vào trang web

Để thêm âm thanh vào trang web sử dụng phần tử audio, với các thuộc tính tương tự như phần tử video, chỉ khác là không có các thuộc tính width, height, và poster (vì khi trình duyệt phát âm thanh thì không cần khung hình như khi phát video). Ví dụ,

<audio controls>

    <source src="horse.ogg" type="audio/ogg">

    <source src="horse.mp3" type="audio/mpeg">

   Trình duyệt không hỗ trợ chức năng này.

  </audio>

Trong đó,

– Thuộc tính controls để hiển thị thanh điều khiển, gồm các nút play, pause, volume

– Phần tử source trỏ tới các tập tin âm thanh với định dạng khác nhau, trình duyệt sẽ duyệt từ trên xuống và phát tập tin đầu tiên mà nó có hỗ trợ

– Phần văn bản “Trình duyệt không hỗ trợ chức năng này” sẽ được hiển thị nếu trình duyệt không hỗ trợ phần tử audio

Cũng giống như phần tử video, sử dụng phần tử source để trỏ tới các định dạng âm thanh khác nhau, để đảm bảo tính tương thích của trình duyệt.

1.1.4       Canvas

Như ở phần đầu đã nói tới, canvas cho phép lập trình viên tạo ra hoạt cảnh, hoặc các tương tác giống như game.

Canvas là phần tử mới của HTML5, đi kèm với nó là bộ thư viện Canvas API.

Phần tử canvas sẽ tạo ra một vùng riêng biệt trên trang web, cho phép lập trình viên sử dụng các hàm của JavaScript để vẽ đường thẳng, hình khối, tô màu, nhập văn bản, tạo hoạt hình và nhiều đối tượng khác. Ngoài ra, chúng ta cũng có thể sử dụng canvas để hiển thị các hình minh họa.

Với canvas, chúng ta có thể làm được nhiều việc hơn nữa, nhờ nó cho phép lập trình bằng ngôn ngữ JavaScript. Có thể tạo ra game, hoạt hình, thậm chí một ứng dụng hoàn chỉnh. Tất cả đều sử dụng khả năng biên dịch và thực thi mã JavaScript của trình duyệt mà không phải sử dụng thêm các plug-in.

Canvas hỗ trợ kĩ thuật vẽ dựa trên lưới ảnh (grid of pixels), chứ không dựa trên kĩ thuật SVG.

Hiện nay, hầu hết các trình duyệt đang có hỗ trợ canvas.

Vì chưa được học JavaScript, nên phần này chủ yếu cho chúng ta những trải nghiệm đơn giản với phần tử canvas.

Đoạn mã sau sẽ tạo một khung cho canvas với chiều dài và chiều rộng xác định trước, cùng với nội dung sẽ được xuất ra trình duyệt nếu canvas không được hỗ trợ.

            <canvas width="600" height="400" id="canvas-dau-tien">

                        Trinh duyet khong ho tro Canvas. Ban nen su dung trinh duyet Chrome, Firefox hoac MS Edge.

            </canvas>

Khi xem kết quả trên trình duyệt bạn sẽ không thấy có gì xuất hiện. Muốn có thứ gì đó xuất hiện, thì chúng ta phải lập trình bằng JavaScript.

Chúng ta sẽ sử dụng ngôn ngữ JavaScript, gọi các hàm của Canvas API để vẽ một khuôn mặt. Bạn hãy chép đoạn mã sau, để ở phía dưới của đoạn mã tạo khung canvas.

    <script type="text/javascript">

        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {

            canvasApp();

        }

        function canvasApp() {

            var theCanvas = document.getElementById('canvas-dau-tien');

            var my_canvas = theCanvas.getContext('2d');

            my_canvas.strokeRect(0, 0, 200, 225)

            // to start, draw a border around the canvas

            //draw face

            my_canvas.beginPath();

            my_canvas.arc(100, 100, 75, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

            // circle dimensions

            my_canvas.strokeStyle = "black"; // circle outline is black

            my_canvas.lineWidth = 3; // outline is three pixels wide

            my_canvas.fillStyle = "yellow"; // fill circle with yellow

            my_canvas.stroke(); // draw circle

            my_canvas.fill(); // fill in circle

            my_canvas.closePath();

            // now, draw left eye

            my_canvas.fillStyle = "black"; // switch to black for the fill

            my_canvas.beginPath();

            my_canvas.arc(65, 70, 10, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

            // circle dimensions

            my_canvas.stroke(); // draw circle

            my_canvas.fill(); // fill in circle

            my_canvas.closePath();

            // now, draw right eye

            my_canvas.beginPath();

            my_canvas.arc(135, 70, 10, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

            // circle dimensions

            my_canvas.stroke(); // draw circle

            my_canvas.fill(); // fill in circle

            my_canvas.closePath();

            // draw smile

            my_canvas.lineWidth = 6; // switch to six pixels wide for outline

            my_canvas.beginPath();

            my_canvas.arc(99, 120, 35, (Math.PI / 180) * 0, (Math.PI / 180) * -180, false);

            // semicircle dimensions

            my_canvas.stroke();

            my_canvas.closePath();

            // Smiley Speaks!

            my_canvas.fillStyle = "black"; // switch to black for text fill

            my_canvas.font = '20px _sans'; // use 20 pixel sans serif font

            my_canvas.fillText("Xin chao canvas!", 45, 200); // write text

        }

    </script>

Lưu lại tập tin mã nguồn, mở nó bằng trình duyệt, bạn sẽ thấy một mặt cười xuất hiện, như hình sau:

1.1.5       Bài tập và thực hành

Bài tập 1. Viết lại các đoạn mã trong phần lý thuyết.

Bài tập 2. Bạn đang làm website cho một cửa hàng, hãy sử dụng iframe để nhúng google maps, cho biết vị trí của cửa hàng vào cuối website. Nhờ vậy, khách hàng dễ dàng tìm được đường đến  cửa hàng.

[Gợi ý làm bài tập]

Bài tập 2.

– Tạo sẵn một trang web, ví dụ index.html

– Mở trang web: https://www.google.com/maps

– Gõ địa chỉ của cửa hàng vào thanh tìm kiếm, ví dụ “Sách cũ Hoa Giấy Đà Lạt”

– Bên cạnh (phía trái) của dòng chữ tìm kiếm, sẽ xuất hiện 3 sọc ngang màu đen > Bấm chuột vào đó > Chọn mục “Chia sẻ hoặc nhúng bản đồ”. Xem hình minh họa.

– Cửa sổ Chia sẻ xuất hiện, chọn tab Nhúng bản đồ

– Bạn có thể điều chỉnh hoặc chọn lựa kích thước bản đồ to hoặc nhỏ tùy nhu cầu.

– Sau khi đã chọn được kích thước bản đồ, bạn bấm vào mục Sao chép HTML hoặc chọn và chép mã nguồn trong mục <iframe src=“http…”

– Dán mã nguồn vào trang index.html để xem kết quả.

Cách nhúng bản đồ này đơn giản, tuy nhiên bạn không thể thêm được các thông tin khác vào bản đồ.

1.1.6       Xem và đọc thêm

– [1] Jenifer Niederst Robbins, Learning Web Design, O’Reilly, 2018, trang 215 – 232

– [2][view] https://www.youtube.com/watch?v=DBaZPyXNgpA

– [3] Iframe: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

1.1.7       Câu hỏi ôn tập

Câu 1. The _____ HTML element represents a nested browsing context, embedding another HTML page into the current one.

A. <canvas>

B. <iframe>

C. <video>

D. <object>

Câu 2. The HTML _____ element is used to draw graphics on a web page.

A. <iframe>

B. <object>

C. <video>

D. <canvas>

Câu 3. The _____ tag defines a container for an external resource. The external resource can be a web page, a picture, a media player, or a plug-in application.

A. <canvas>

B. <video>

C. <object>

D. <iframe>

Câu 4. The _____ tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.

A. <canvas>

B. <video>

C. <iframe>

D. <embed>

Đáp án: 1(B), 2(D), 3(C), 4(D)

-----

Cập nhật: 16/5/2024

Bài sau: Web front-end (23) - HTML - Một số chủ đề khác

-----

Tải tài liệu đầy đủ: Tự học HTML căn bản

-----

LIÊN HỆ TÁC GIẢ