HTML (8) - Phần mềm lập trình web

Bài trước: HTML (7) - Bố cục một trang web

-----

11.        Phần mềm lập trình web

11.1       Phân loại phần mềm lập trình

Như đã biết, trong quá trình tạo ra một ứng dụng web (hoặc một ứng dụng nói chung), chúng ta cần phải có:

- Công cụ để viết mã nguồn

- Công cụ dịch mã nguồn

- Công cụ và môi trường chạy thử ứng dụng

Có những công cụ chỉ giúp bạn làm được một công việc, ví dụ chỉ để viết mã nguồn, hoặc chỉ để dịch mã nguồn, hoặc chỉ để chạy thử ứng dụng. Tuy nhiên, cũng có công cụ giúp bạn có thể làm được nhiều công việc, vừa viết mã, dịch mã nguồn và chạy thử ứng dụng. Thậm chí có công cụ còn có khả năng tự động viết mã.

Ví dụ, muốn làm một ứng dụng web (phía client), chúng ta cần notepad để viết mã nguồn, trình duyệt web để dịch và thực thi mã nguồn.

Có thể chia các phần mềm lập trình thành nhiều loại:

- Phần mềm soạn thảo văn bản thô (text editor)

- Trình viết mã (code editor)

- Phần mềm phát triển tích hợp (IDE)

- Công cụ lập trình trực tuyến

- Các công cụ sinh mã tự động (dựa trên AI, dựa trên mô hình)

Xem hình minh họa.

Khi mới học làm web, bạn có thể lựa chọn các phần mềm viết mã đơn giản, để có thể dễ dàng hiểu được bản chất của các ngôn ngữ lập trình, quá trình thực thi mã nguồn, và nhanh nhớ các thẻ HTML, tên hàm, từ khóa. 

Tuy nhiên, khi làm việc, thì nên chọn phần mềm giúp thao tác nhanh, hiệu quả, phù hợp với ngôn ngữ lập trình và môi trường làm việc thực tế.

Phần mềm soạn thảo văn bản thô

Mã nguồn của các ứng dụng chỉ là văn bản thô hay văn bản thuần (plain text), do vậy có thể sử dụng bất kì trình soạn thảo nào cho phép tạo mới, nhập và lưu văn bản thô là có thể viết mã nguồn được.

Văn bản thô là văn bản không bao gồm thông tin định dạng (in đậm, màu sắc, gạch chân). Ví dụ, khi soạn thảo văn bản bằng Microsoft Word, nó đã tự động thêm vào các thông tin định dạng cho văn bản, vì vậy không thể dùng Microsoft Word để viết mã nguồn.

Text editor là trình soạn thảo văn bản thô, cho phép lập trình viên viết mã nguồn và lưu lại thành một tập tin. Ưu điểm của text editor là gọn, nhẹ, dễ sử dụng và thường có sẵn trong các hệ điều hành.

Ví dụ: Notepad, Notepad++, Vim

Trình viết mã

Trình viết mã (code editor) có chức năng cơ bản giống với một phần mềm soạn thảo văn bản thô. Tuy nhiên, nó cho phép tích hợp thêm các chức năng mở rộng, giúp việc soạn thảo, lập trình, lưu trữ, dịch mã nguồn được thuận tiện và linh hoạt hơn.

Các chức năng mở rộng của code editor so với text editor:

- Chức năng tô màu mã nguồn, giúp lập trình viên dễ dàng nhận ra các thành phần trong mã nguồn như từ khóa, tên biến, chuỗi, giá trị.

- Chức năng hỗ trợ gõ mã nguồn nhanh, tự động hoàn thành lệnh

- Chức năng kiểm tra lỗi cú pháp

- Tích hợp trình quản lý phiên bản (version control)

- Liên kết với chương trình dịch

- Tích hợp AI

- Các tính năng mở rộng khác

Ví dụ: VS code, Sublime Text, WebStorm, Cursor

Phần mềm phát triển tích hợp

IDE (Integrated Development Environment – môi trường phát triển tích hợp, hay phần mềm phát triển tích hợp) là phần mềm mạnh mẽ nhất dùng để lập trình, trong đó đã được tích hợp sẵn rất nhiều các thành phần liên quan đến quá trình phát triển phần mềm, từ viết mã, dịch mã, tìm và sửa lỗi, quản lý phiên bản, đóng gói.

Trong IDE đã được tích hợp sẵn các thành phần như code editor, debugger (trình sửa lỗi), trình dịch mã, máy ảo, trình quản lý phiên bản và nhiều công cụ khác.

IDE có nhiều loại, có loại phức tạp của các công ty lớn, cũng có loại đơn giản; có loại miễn phí, có loại phải trả phí. Tùy theo nhu cầu sử dụng để lựa chọn IDE cho phù hợp.

Ví dụ: Visual Studio, Eclipse, PHPStorm, Pycharm.

Chọn code editor hay IDE

Trong một số trường hợp, khi mới học lập trình (ví dụ học lập trình web front-end), bạn được khuyến khích sử dụng các phần mềm soạn mã nguồn đơn giản (text editor) để nhớ các thẻ HTML, các lệnh CSS. Tuy nhiên, để tăng tốc độ viết mã, nâng cao tính chuyên nghiệp thì bạn phải làm quen và sử dụng code editor hoặc IDE.

Việc lựa chọn giữa code editor hay IDE phụ thuộc vào thói quen, sở thích, yêu cầu của từng công việc, dự án, nhóm làm việc.

Code editor thường gọn nhẹ, miễn phí. Muốn sử dụng các chức năng mở rộng thì bạn phải tự thêm vào. Một code editor thường hỗ trợ cho nhiều ngôn ngữ lập trình khác nhau.

IDE thường có kích thước lớn, có bản miễn phí và có phí, các chức năng được được tích hợp sẵn, sử dụng thuận tiện, dễ dàng. Mỗi IDE thường hỗ trợ cho một hoặc một vài ngôn ngữ lập trình nhất định.

Bảng sau là một số phần mềm được dùng nhiều trong lập trình:

Code Editor	IDE
Visual Studio Code Vim Sublime Text  Cursor Notepad++  Emacs Windsurf	Visual Studio Eclipse Webstorm PhpStorm

Công cụ lập trình trực tuyến

Ngoài các công cụ lập trình đã giới thiệu ở trên, bạn cũng có thể sử dụng môi trường lập trình trực tuyến trên Internet. Đó là các trang web, cho phép bạn nhập mã nguồn, dịch mã nguồn và xuất kết quả ngay trên môi trường web. Thực tế, trang web chỉ là nơi cho phép lập trình viên nhập mã nguồn, sau đó mã nguồn được gửi về server để dịch, thực thi và cuối cùng kết quả sẽ được hiển thị lại lên trang web.

Ưu điểm của môi trường lập trình trực tuyến là bạn không cần phải cài đặt, dễ dàng cộng tác, chia sẻ mã nguồn thuận lợi, miễn phí.

Tuy nhiên, môi trường lập trình trực tuyến cũng có một số bất lợi như bắt buộc phải có kết nối Internet khi lập trình. Tốc độ mạng không ổn định sẽ ảnh hưởng rất lớn đến hiệu quả lập trình. Môi trường lập trình do nhà cung cấp thiết lập sẵn, nên người học không có cơ hội để tìm hiểu chi tiết về cách hoạt động, sự phối hợp giữa các thành phần tham gia vào quá trình viết mã, dịch mã, chạy chương trình và xuất kết quả.

Môi trường lập trình trực tuyến thích hợp cho việc dạy và học lập trình, tìm hiểu về ngôn ngữ lập trình, chia sẻ mã nguồn; trao đổi và cộng tác trong lập trình.

Sau đây là một số công cụ cho phép bạn lập trình trực tuyến:

Replit	Codepen	Codesandbox	OnlineGDB
Codeshare	Jsfiddle	Jsbin	Sqlfiddle

Công cụ sinh mã tự động

Công cụ sinh mã tự động là những phần mềm, công cụ hoặc kỹ thuật cho phép tự động tạo ra mã nguồn. Thay vì bạn phải viết từng dòng mã, các công cụ này dựa trên một số thông tin đầu vào như thông tin cấu hình, mô hình thiết kế, lược đồ cơ sở dữ liệu hoặc các mô tả bằng ngôn ngữ tự nhiên để tạo ra mã nguồn.

Một số công cụ sinh mã tự động:

- Các framework (ví dụ Ruby on Rails, Laravel, Express.js)

- Các ORM

- Các công cụ có tích hợp AI (ChatGPT, Gemini, Cursor, Github Copilot)

Bạn cần học cách viết yêu cầu (prompt, rule), để có thể ra lệnh cho các công cụ sinh mã.

Lưu ý: ở giai đoạn học làm ứng dụng, bạn chỉ nên sử dụng các công cụ sinh mã tự động như là một công cụ hỗ trợ quá trình học. Bạn vẫn phải tự học để hiểu các khái niệm, ý nghĩa từng dòng mã; tự làm thực hành thật nhiều để nhớ, hiểu và thuần thục các kỹ năng lập trình. Vì con người vẫn là đối tượng sau cùng phải chịu trách nhiệm về các dòng mã của chương trình.

11.2 Sử dụng phần mềm lập trình

Trong nghề lập trình, để chọn được phần mềm phù hợp, sử dụng hiệu quả, bạn cần phải biết các thông tin và kỹ năng cơ bản sau:

- Tính tương thích của phần mềm với các họ hệ điều hành (Windows, macOS, Linux)

- Phần mềm hỗ trợ làm việc với các ngôn ngữ lập trình nào

- Phần mềm miễn phí hay có phí

- Cách tải và cài đặt

- Sử dụng thuần thục các chức năng trên giao diện người dùng

- Cài đặt và chọn tông màu giao diện (theme) theo ý thích

- Thuần thục các thao tác với thư mục và tập tin

- Định dạng mã nguồn tự động

- Sử dụng gợi ý trong lúc viết mã (IntelliSense)

- Gõ bàn phím bằng 10 ngón tay

- Dịch và chạy mã nguồn

- Tìm, cài đặt và gỡ bỏ các chức năng mở rộng (extensions)

- Học các kỹ năng soạn thảo mã nguồn nhanh (ví dụ gõ tắt, tạo văn bản ngẫu nhiên, sử dụng đa con trỏ)

- Cách viết các yêu cầu (prompt, rule) cho các công cụ sinh mã tự động

11.3 Xem và đọc thêm

Hỏi chatbot, tìm kiếm trên Google hoặc Youtube các từ khóa này, để đọc và xem thêm: text editor, code editor, IDE, difference between code editor vs IDE

11.4 Bài tập và câu hỏi

Bài tập

Bài tập 11.1: Sử dụng thuần thục một phần mềm lập trình (code editor hoặc IDE). Ví dụ VS code.

Tìm kiếm thông tin để trả lời các câu hỏi và thực hiện (thực hành) được các yêu cầu sau: 

- Tính tương thích của phần mềm với các họ hệ điều hành (Windows, macOS, Linux)

- Phần mềm hỗ trợ làm việc với các ngôn ngữ lập trình nào

- Phần mềm miễn phí hay có phí

- Cách tải và cài đặt

- Sử dụng thuần thục các chức năng trên giao diện người dùng

- Cài đặt và chọn tông màu giao diện (theme) theo ý thích

- Thuần thục các thao tác với thư mục và tập tin

- Định dạng mã nguồn tự động

- Sử dụng gợi ý trong lúc viết mã (IntelliSense)

- Gõ bàn phím bằng 10 ngón tay

- Dịch và chạy mã nguồn

- Tìm, cài đặt và gỡ bỏ các chức năng mở rộng (extensions)

- Học các kỹ năng soạn thảo mã nguồn nhanh (ví dụ gõ tắt, tạo văn bản ngẫu nhiên, sử dụng đa con trỏ)

Bài tập 11.2: Gõ bàn phím bằng 10 ngón tay. Tốc độ tối thiểu 40 từ/phút (wpm – word per minute).

Bài tập 11.3: Viết 3 yêu cầu (prompt) để chatbot hỗ trợ bạn trong việc học lập trình với HTML.

Câu hỏi

Câu 11a: Các loại phần mềm dùng để viết mã trong làm web gồm?

A. Text editor, Microsoft Word, IDE, Web browser

B. Text editor, Code editor, Web browser, Acrobat

C. Mspaint, Web browser, Code editor, IDE

D. Web browser, Text editor, Code editor, IDE 

Câu 11b: Phát biểu nào sau đây là đúng?

A. IDE thường có dung lượng lớn hơn code editor

B. Không thể dịch mã chương trình bằng IDE

C. Tất cả IDE đều là phần mềm có phí

D. VS code là một IDE 

Câu 11c: ______ is the software that is designed specifically to help developers in coding. These are actually the text editors with some additional functionalities to manage and edit code.

A. Debugger

B. Text editor

C. Code editor

D. IDE

Câu 11d: _____is a software application that provides comprehensive facilities to computer programmers for software development. An _____ normally consists of at least a source code editor, build automation tools and a debugger.

A. IDE

B. Code editor

C. Debugger

D. Compiler

Câu 11e: Trong các phần mềm lập trình, IntelliSense là gì?

A. Là thành phần bổ sung của công ty Intel

B. Là thành phần dịch mã lệnh

C. Là chương trình gỡ lỗi 

D. Là thành phần đưa ra các mô tả ngắn hoặc gợi ý khi viết mã nguồn 

-----

Bài sau: HTML (9) - Một số phần tử HTML khác

HTML (7) - Bố cục một trang web

Bài trước: HTML (6) - Hiển thị văn bản

-------

10.       Bố cục một trang web

Nhắc lại một chút, nhiệm vụ của HTML là sử dụng các phần tử của nó để tạo ra cấu trúc và thêm ngữ nghĩa cho tài liệu HTML. Mục đích của việc này là để phục vụ cho các công việc tiếp theo, như hiển thị nội dung, trang trí bằng CSS, lập trình tương tác bằng JavaScript, quá trình biên dịch, hoạt động của các trang tìm kiếm, hoạt động của các ứng dụng đọc tự động, phân tích dữ liệu được thuận lợi và hiệu quả.

Một tài liệu HTML với cấu trúc hợp lý và có ngữ nghĩa là một yếu tố quan trọng giúp chúng ta có được một trang web thành phẩm hoàn hảo cả về bố cục, màu sắc, hiệu ứng, nội dung, và trải nghiệm người dùng.

Như đã biết, cấu trúc cơ bản của một tài liệu HTML gồm các phần tử html, head, title và body. Trong đó, phần tử body chứa toàn bộ nội dung sẽ hiển thị ra màn hình, đó là phần nội dung các trang web. Trang web ở dạng mã nguồn được gọi là tài liệu HTML.

Nội dung của trang web rất đa dạng, ví dụ, có thể là một tờ báo, trang blog, trang thông tin của một công ty, giao diện game, các sản phẩm của một cửa hàng. Phần này sẽ tập trung tìm hiểu cách tạo ra một trang web có bố cục cơ bản nhất. Dựa trên đó, bạn có thể tùy chỉnh cho từng trang web cụ thể.

Ở những phần trước, bạn đã tìm hiểu các phần tử: p, heading, list, pre, blockquote, figure, figcaption, đây được xem như là các nguyên liệu để tạo nên nội dung web. Phần này sẽ tìm hiểu các phần tử để tổ chức các nội dung lại với nhau, để tạo thành các vùng nội dung lớn hơn.

10.1 Các phần tử tạo bố cục trang web

Trước khi HTML5 ra đời, để nhóm (grouping) các phần tử lại với nhau, nhằm tạo các vùng lớn hơn của một trang web, người ta thường sử dụng phần tử div. Tuy nhiên, HTML5 đã cung cấp hàng loạt các phần tử, với ngữ nghĩa rõ ràng hơn, để chia (sectioning) nội dung thành các vùng (section) riêng biệt, phần này sẽ tìm hiểu các phần tử như: main, header, footer, section, article, nav, aside, address.

Khi đọc tài liệu tiếng Anh, thường rất khó hiểu và hay nhập nhằng giữa hai từ “nhóm” (grouping) và “chia” (sectioning). Ngẫm nghĩ kĩ, thì thấy “nhóm” cũng là “chia”, mà “chia” cũng là “nhóm”. Tại sao vậy, tại vì nhóm những cái nhỏ lại, cũng có nghĩa là đã chia chúng ra khỏi cái lớn và ngược lại, chia nhỏ một cái lớn, cũng có nghĩa là tạo ra những nhóm nhỏ.

Xem hình ví dụ về “nhóm” và “chia”,

Để dễ hiểu về các phần tử tạo bố cục trang web, phần này minh họa theo bố cục (layout) của một trang web cơ bản. Trang web này được chia thành các vùng: Main content, Header, Sidebars, Footer. Xem hình minh họa,

Vùng nội dung chính (main content)

Vùng nội dung chính là phần quan trọng nhất của một trang web, chứa nội dung liên quan đến chủ đề của trang đó.

Trong một website, các vùng tiêu đề (masthead, header), khung nội dung bổ trợ (sidebar), vùng quảng cáo (ad), và vùng cuối/chân trang (footer) thường xuất hiện nhiều lần, trong nhiều trang web (web page). Riêng vùng nội dung chính (main) chỉ xuất hiện một lần.

Để dễ hiểu, bạn hãy mở một trang web bất kỳ để quan sát. Ví dụ trang https://www.w3schools.com/html/default.asp

Bạn thử bấm vào các mục ở khung Sidebar, ví dụ HTML Introduction, HTML Editors, để quan sát sự thay đổi nội dung của vùng Main. Bạn sẽ thấy, nội dung của vùng Main thay đổi sau mỗi lần bấm, trong khi các vùng còn lại vẫn giữ nguyên. Sau mỗi lần bấm, bạn cũng thấy sự thay đổi nội dung thanh địa chỉ (URL) của trình duyệt, điều đó có nghĩa là bạn (có thể) đã chuyển qua-lại giữa các trang web khác nhau của một website.

Trong HTML, bạn sử dụng phần tử main để tạo vùng Main.

Ví dụ,

<body>

     <header>...</header>

     <main>

          <h1>Nội dung chính của trang</h1>

          <!-- các nội dung khác -->

     </main>

</body>

Các phần tử header, sidebar, và các phần tử xuất hiện ở nhiều trang, thì không nên để trong phần tử main. Phần tử main không nên lồng trong các phần tử article, aside, header, footer và nav.

Phần đầu và phần chân (headers và footers)

Đây là hai phần tử được đặt ở đầu và cuối của một vùng nội dung, nhằm tạo ra cấu trúc rõ ràng cho vùng nội dung đó.

Phần đầu (headers)

Phần tử header thường dùng để chứa nội dung giới thiệu, tuy nhiên, trong thực tế nó có thể chứa mọi thứ, miễn là liên quan đến mục đích giới thiệu, ví dụ logo, tiêu đề, khẩu hiệu, thanh điều hướng. Phần tử này thường được đặt ở đầu của trang web, hoặc phía trên cùng của một vùng (section) hoặc một bài viết (article).

Ví dụ, sử dụng phần tử header để chứa logo, tiêu đề của trang web và thanh điều hướng,

[HTML]

<header>

            <img src="/images/logo.png">

            <h1>Trang blog của Tèo</h1>

            <nav>

                        <ul>

                                    <li><a href="">Home</a></li>

                                    <li><a href="">Blog</a></li>

                                    <li><a href="">About</a></li>

                        </ul>

            </nav>

</header>

Trong một article, phần tử header thường được dùng để chứa: tiêu đề, tác giả, và ngày xuất bản của bài viết.

<article>

            <header>

                        <h1>Tiêu đề bài viết</h1>

                        <p>người viết Nguyễn Văn Tèo</p>

                        <p>ngày xuất bản: 11/11/2022</p>

            </header>

            <p>...phần nội dung bài viết…</p>

</article>

Phần chân (footers)

Phần tử footer dùng để chứa các thông tin ở cuối một trang web, cuối một vùng (section) hoặc cuối một bài viết (article). Phần tử footer thường chứa tên tác giả, thông tin bản quyền (copyright), các tài liệu liên quan, hoặc các điều hướng (navigation).

Phần tử footer đặt ở cuối trang thì sẽ là thông tin kết thúc của toàn trang, tuy nhiên, nó cũng có thể được đặt ở cuối một section, article, nav, hoặc aside và sẽ là thông tin kết thúc của chính phần tử chứa nó. Mặc dù gọi là “phần chân” tuy nhiên không nhất thiết phải luôn luôn đặt footer ở cuối của các phần tử chứa nó, quan trọng là ngữ nghĩa của các nội dung mà phần tử footer chứa.

Ví dụ, phần chân của một bài viết trên blog,

[HTML]

<article>

            <header>

                        <h1>Tiêu đề bài viết</h1>

                        <p>người viết Nguyễn Văn Tèo</p>

                        <p>ngày xuất bản: 11/11/2018</p>

            </header>

            <p>...phần nội dung bài viết…</p>

            <footer>

                        <p><small>Copyright &copy;2018 Tèo.</small></p>

                        <nav>

                                    <ul>

                                                <li><a href="">Previous</a></li>

                                                <li><a href="">Next</a></li>

                                    </ul>

                        </nav>

            </footer>

</article>

Phân vùng (section)

Với một tài liệu dài, bạn nên chia nhỏ nó ra thành nhiều phần thì sẽ dễ hiển thị và dễ đọc hơn.

Giả sử nội dung của trang web là một cuốn sách, thì việc chia nội dung thành nhiều chương sẽ giúp bạn làm việc với nó thuận tiện và chuyên nghiệp hơn; hoặc một trang báo với nhiều tin tức thì việc chia thành các chuyên mục (ví dụ: thể thao, văn hóa, giáo dục) cũng giúp nó trở nên chuyên nghiệp, dễ đọc. Để thực hiện việc chia này, bạn sử dụng phần tử section.

Phần tử section dùng để chia nội dung thành các vùng theo các chủ đề khác nhau. Mỗi phần tử section thường bao gồm heading (h1-h6) và phần nội dung. Có thể hiểu nôm na, phần tử section được sử dụng để liệt kê nội dung, giống như vai trò liệt kê các mục trong danh sách của phần tử li.

Cú pháp,

<section>

                        <h1>Tên chủ đề</h1>

                        <p>Nội dung của chủ đề</p>

            </section>      

Ví dụ,

[HTML]

<section>

                        <h1>Chương 1</h1>

                        <p>Nội dung của chương 1</p>

            </section>

            <section>

                        <h1>Chương 2</h1>

                        <p>Nội dung của chương 2</p>

            </section>      

Một ví dụ về phần tử section, lấy từ W3Schools,

[HTML]

<section>

  <h1>WWF</h1>

  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>

</section>

<section>

  <h1>WWF's Panda symbol</h1>

  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>

</section>

Ví dụ, sử dụng phần tử section để liệt kê các bài viết trên blog,

[HTML]

 <section>

    <h2>Tiêu đề bài viết 1</h2>

    <p>Trích đoạn của bài viết 1</p>

  </section>

  <section>

    <h2>Tiêu đề bài viết 2</h2>

    <p>Trích đoạn của bài viết 2</p>

  </section>

<section>

    <h2>Tiêu đề bài viết 3</h2>

    <p>Trích đoạn của bài viết 3</p>

  </section>

Tuy nhiên, nếu chỉ đơn thuần chia nội dung trang web thành các vùng để định dạng, trang trí, xử lý tương tác, thì nên sử dụng phần tử div thay vì section.

Bài viết (article)

Phần tử article cũng có chức năng chia nội dung thành các vùng như phần tử section, tuy nhiên, có một điều khác là phần nội dung nằm trong phần tử article có thể tồn tại độc lập (không liên quan đến các nội dung khác), và có thể được sử dụng lại ở nơi khác. Ngay tên của phần tử đã phản ánh tính chất của nó, article là một bài viết.

Trong thực tế, phần tử article thường dùng để chứa một bài viết trên diễn đàn, báo điện tử, tạp chí, blog, hoặc chứa một bình luận của người dùng.

Ví dụ, sử dụng phần tử article để tạo một bài viết trên blog,

[HTML]

<article>

  <h1>Tiêu đề của bài viết</h1>

    <ul>

      <li>Tên tác giả</li>

      <li>Thuộc thể loại: Bài viết mới</li>

    </ul>

   <p>

    Phần nội dung của bài viết

  </p>

 </article>

Bài viết gồm nhiều phần (article chứa section)

Nếu một article gồm nhiều nội dung, có thể chia nội dung thành các section.

Ví dụ,

<article>

                        <h1>Tiêu đề của bài viết</h1>

                        <ul>

                                    <li>Tên tác giả</li>

                                    <li>Thuộc thể loại: Bài viết mới</li>

                        </ul>

                        <section>

                                    <h2>Mở đầu</h2>

                                    <p>Nội dung của phần mở đầu</p>

                        </section>

                        <section>

                                    <h2>Nội dung 1</h2>

                                    <p>Nội dung 1 của bài viết</p>

                        </section>

<section>

                                    <h2>Nội dung 2</h2>

                                    <p>Nội dung 2 của bài viết</p>

                        </section>

                        <section>

                                    <h2>Kết luận</h2>

                                    <p>Nội dung của phần kết luận</p>

                        </section>

            </article>

Một vùng chứa nhiều bài viết (section chứa article)

Ngược lại, một section cũng có thể chứa nhiều article.

Ví dụ,

[HTML]

<section>

<h2>Các bài viết mới</h2>

<article>

  <h1>Tiêu đề của bài viết 1</h1>

    <ul>

      <li>Tên tác giả 1</li>

      <li>Thuộc thể loại: Bài viết mới</li>

    </ul>

   <p>

    Phần nội dung của bài viết 1

  </p>

 </article>

 

<article>

  <h1>Tiêu đề của bài viết 2</h1>

    <ul>

      <li>Tên tác giả 1</li>

      <li>Thuộc thể loại: Bài viết mới</li>

    </ul>

   <p>

    Phần nội dung của bài viết 2

  </p>

 </article>

</section>

Thông tin bổ trợ (aside)

Phần tử aside được sử dụng để chứa các thông tin có liên quan đến nội dung chính, được đặt bên cạnh nội dung chính (trên, dưới, trái, phải). Aside có nghĩa là bổ sung thêm. Về mặt trực quan có thể hình dung phần tử aside giống với sidebar (thanh bên) trên giao diện web, tuy nhiên, hai cái này không phải là một. Aside mang tính bổ trợ về mặt ngữ nghĩa, trong khi sidebar có nghĩa là đặt ở bên cạnh khi hiển thị.

Trong thực tế, phần tử aside thường được dùng để chứa trích dẫn (quote), thông tin thêm (background information), danh sách các liên kết, phát biểu (callouts), hoặc bất cứ thứ gì liên quan (mà không quan trọng) đến tài liệu.

Ví dụ, sử dụng phần tử aside để liệt kê các liên kết liên quan tới phần nội dung,

[HTML]

<h1>Một số kĩ năng sinh viên nên chuẩn bị</h1>

<p>Trong thời gian học tại trường Đại học, các bạn nên trang bị cho mình những thứ sau, để khi ra trường có thể tự tin làm việc, và hạnh phúc trong công việc.</p>

<p>Những thứ các bạn nên để ý là: kiến thức chuyên môn và cuộc sống, kĩ năng làm nghề, kĩ năng làm việc, kĩ năng sống; thái độ trong giao tiếp, trong công việc và thái độ với nghề mà mình đang theo đuổi.</p>

<aside>

<h2>Một số cuốn sách về định hướng nên đọc</h2>

<ul>

<li>Khuyến học</li>

<li>Cà phê cùng Tony</li>

<li>Khởi hành</li>

<li>Đúng việc</li>

<li>Trên đường băng</li>

<li>Code dạo ký sự</li>

</ul>

</aside>

Điều hướng (navigation)

Phần tử nav được sử dụng để chứa các liên kết (link) điều hướng, thường được sử dụng để tạo trình đơn (menu) ngang, dọc. Lưu ý, không phải mọi liên kết đều phải đặt trong phần từ nav. Nav là viết rút gọn của navigation.

Ví dụ,

[HTML]

<nav>

<a href="#">Home</a> |    

<a href="#">About</a> |

<a href="#">Blog</a> |

<a href="#">Sign in</a>

</nav>

Thông tin liên hệ (address)

Phần tử address được sử dụng để chứa các thông tin liên lạc với tác giả của bài viết hoặc người đăng bài viết. Phần tử này thường được để ở cuối của tài liệu, cuối vùng hoặc cuối bài viết. Phần tử address nên đặt trong phần tử footer.

Lưu ý: nội dung trong phần tử address thường là liên kết tới một email, trang thông tin tác giả, hoặc một website khác, chứ rất hiếm khi là một địa chỉ cư trú, hoặc địa chỉ văn phòng.

Ví dụ,

<address>

Đóng góp bởi <a href="../authors/teo/">Văn Tèo</a>,

<a href="http://www.nhaxuatban.com/">Nhà Xuất Bản</a>

</address>

10.2 Xem và đọc thêm

Hỏi chatbot, tìm kiếm trên Google hoặc Youtube các từ khóa này, để đọc và xem thêm: main HTML element, header HTML element, footer HTML element, section HTML element, article HTML element, nav HTML element, aside HTML element, address HTML element.

10.3       Bài tập và câu hỏi

Bài tập

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

Bài tập 10.2: Sử dụng các phần tử HTML đã học để tạo phần nội dung của một trang báo. Ví dụ, tuoitre.vn.

Yêu cầu:

- Tối thiểu phải sử dụng các phần tử đã học trong phần Hiển thị văn bản và Tổ chức trang nội dung.

- Không nhất thiết phải làm toàn bộ nội dung của trang báo, chỉ cần làm một phần nhỏ để minh họa cho các nội dung đã học.

Bài tập 10.3: Sử dụng các phần tử HTML đã học, để tạo phần nội dung của một trang dạy về công nghệ. Ví dụ, https://www.w3schools.com/html/default.asp

Yêu cầu:

- Tối thiểu phải sử dụng các phần tử đã học trong phần Hiển thị văn bản và Tổ chức trang nội dung.

- Không nhất thiết phải làm toàn bộ nội dung của trang báo, chỉ cần làm một phần nhỏ để minh họa cho các nội dung đã học.

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

Bài tập 10.2: Tạo nội dung trang báo bằng HTML.

- Tạo thư mục dự án

/layout_tuoitre_html

-- layout_tuoitre_html.html

-- images

- Mở một trang báo trên trình duyệt. Ví dụ: tuoitre.vn

- Sử dụng Developer tools để xem mã nguồn và phân tích bố cục của trang.

- Trang web gồm các vùng header, main (section có id là content), footer.

<!-- header -->

        <header>

            <!-- header-top -->

            <section>

                <ul>

                    <li><a href="#"><img src="images/logoTTTV.png"></a></li>

                   <li>...</li>                   

                    <li>Hotline: 0918.033.133</li> <li>Đặt báo</li>

                    <li>Quảng cáo</li> <li>Đăng nhập | Đăng ký</li>  

                </ul>

            </section>

             <!-- end header-top -->

 

            <!-- header-middle -->

            <section>

                <ul>

                    <li>Youtube báo tuổi trẻ</li>

                    <li>Cần biết</li> <li>Nhà đất</li>

                </ul>

                <div>Tìm kiếm tin tức</div>

            </section>

            <!-- end header-middle -->

 

            <!-- banner-top -->

            <section> <!-- banner cho quảng cáo --> </section>

            <!-- end banner-top -->

 

            <!-- header-bottom -->

            <section>

             <nav>

                <ul>

                        <li>Media</li> <li>Thời sự</li> <li>Thế giới</li>

                        <li>Pháp luật</li> <li>Kinh doanh</li>

                        <li>Công nghệ</li> <li>Xe</li> <li>Du lịch</li>

                </ul>

            </nav>

            </section>

            <!-- end header-bottom -->

        </header>

        <!-- end header -->

 

        <!-- main -->

        <main>

            <!-- tin-chính -->

            <article>

                <img src="images/anh_main.jpg">

                <h2>Chủ tịch HĐND TP.HCM: 'Biến nguy thành cơ để phục hồi kinh tế - xã hội'</h2>

                <p>UBND TP Hà Nội ....bàn thành phố.</p>

                <p>Từ 1-7, khi Hà Nội thí điểm mô hình chính quyền đô thị, .... các quận và thị 

                xã Sơn Tây </p>

            </article>

            <!-- end tin-chính -->

            

            <!-- ds-các-tin-mới -->

            <section> <ul> <li></li> </ul> </section>

            <!-- end ds-các-tin-mới -->

 

            <!-- các-tin-khác -->

            <section> <ul> <li></li> </ul> </section>

            <!-- end các-tin-khác -->

 

        </main>

        <!-- end main -->

 

         <!-- footer -->

        <footer>

            <!-- footer-icon -->

            <section> </section>

            <!-- end footer-icon -->

 

            <!-- footer-middle -->

            <section> </section>

            <!-- end footer-middle -->

 

            <!-- footer-bottom -->

            <section> </section>

            <!-- end footer-bottom -->

        </footer>

         <!-- end footer -->

 

- Chèn các nội dung vào mỗi vùng, gồm hình ảnh, ul, section, article, các phần tử tạo nội dung khác.

Bài tập 10.3:

- Tạo thư mục dự án

/layout_w3schools_html

-- layout_w3schools_html.html

-- images

- Mở trang https://www.w3schools.com/html/default.asp

- Sử dụng Developer tools để xem mã nguồn và phân tích bố cục của trang

- Viết lại phần nội dung HTML, tạm thời bỏ qua các thuộc tính class, id không cần thiết

- Viết một số thông tin cho phần tử head, để ý kích thước của icon sẽ hiển thị trên tab trình duyệt (48 x 48 px)

<head>

    <meta charset="utf-8">

    <title>HTML tutorial</title>

    <meta name="Keywords" content="HTML, Python, CSS, SQL, How to, PHP">

    <meta name="Description" content="Well organized and easy to understand Web building tutorials">

    <link rel="icon" href="images/favicon.ico" type="image/x-icon">

</head>

- Viết mã cho phần body. Khi xem mã nguồn của trang w3schools, bạn có thể thấy đoạn mã cho khung quảng cáo (ad) nằm phía trên cùng, hãy lướt qua đoạn mã quảng cáo, để tìm tới vùng header.

- Bạn không tìm thấy thẻ header, nhưng bạn sẽ thấy 2 div có tên (id) là pagetop và topnav (top navigation). Có thể xem pagetop và topnav là 2 phần tử con của phần tử header.

- Logo họ dùng kĩ thuật CSS để hiển thị, do chưa học CSS, nên sẽ tìm và tải logo dạng hình ảnh của w3schools từ trên mạng (kích thước 255 x 255 px)

- Bạn tiếp tục sử dụng Developer tools và View page source, để tạo ra tài liệu HTML cho trang w3schools.

- Dưới đây là một kết quả tham khảo.

[layout_w3schools_html.html]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>HTML tutorial</title>

    <meta name="Keywords" content="HTML, Python, CSS, SQL, How to, PHP">

    <meta name="Description" content="Well organized and easy to understand Web building tutorials">

    <link rel="icon" href="images/favicon.ico" type="image/x-icon">

</head>

<body>

    <header>

        <img src="images/logo.png" alt="" title="Home">

        <div id="pagetop">

            <a href="#">Tutorials</a>

            <a href="#">References</a>

            <a href="#">Exercises</a>

            <a href="#">Videos</a>

            <div>

                <a href="#">Log in</a>

            </div>

            <div>

                <a href="#">Free Website</a>

                <a href="#">Get Certified</a>

                <a href="#">Upgrade</a>

            </div>

        </div>

        <nav id="topnav">

            <a href="#">HTML</a>

            <a href="#">CSS</a>

            <a href="#">JavaScript</a>

            <a href="#">SQL</a>

        </nav>

    </header>

    <div id="sidenav">

        <h2>HTML Tutorials</h2>

        <a href="#">HTML HOME</a>

        <a href="#">HTML Introduction</a>

        <a href="#">HTML Editors</a>

        <a href="#">HTML Basic</a>

        <a href="#">HTML Elements</a>

    </div>

    <main>

        <h1>HTML Tutorial</h1>

        <div>

            <a href="#">< Home</a>

            <a href="#">Next ></a>

        </div>

        <div>

            <p>HTML is the standard markup language for Web pages.</p>

            <p>With HTML you can create your own Website.</p>

            <p>HTML is easy to learn - You will enjoy it!</p>

            <a href="#">Study our free HTML Tutorial »</a>

        </div>

    </main>

    <footer>

        <div>

            <p>W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.

                Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.

                While using W3Schools, you agree to have read and accepted our

                <a href="#">cookie and privacy policy</a>.<br><br>

                <a href="#">Copyright 1999-2022</a> by Refsnes Data. All Rights Reserved.<br>

                <a href="#">W3Schools is Powered by W3.CSS</a>.<br><br></p>

        </div>

    </footer>

</body>

</html>

Câu hỏi

Câu hỏi 10a: The content inside the ______ element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

A. main

B. article

C. section

D. header

Câu hỏi 10b: The ______ element represents a container for introductory content or a set of navigational links.

A. head

B. footer

C. header

D. article

Câu hỏi 10c: The _______ element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).

A. aside

B. main

C. section

D. article

Câu hỏi 10d: The ______  element identifies content that is separate from, but tangentially related to, the surrounding content. In print, its equivalent is a sidebar, but it couldn’t be called “sidebar” because putting something on the “side” is a presentational description, not semantic.

A. main

B. aside

C. section

D. article

Câu hỏi 10e: The ______ element is used to create an area for contact information for the author or maintainer of the document. It is generally placed at the end of the document or in a section or article within a document.

A. footer

B. header

C. aside

D. address

-----

Bài sau: HTML (8) - Phần mềm lập trình web