Trong thế giới phức tạp của phát triển web, sự hiểu biết về các thẻ HTML là chìa khóa quan trọng để xây dựng và thiết kế trang web hiệu quả. HTML là lớp nền tảng cơ bản đóng vai trò quan trọng trong việc định rõ cấu trúc và nội dung của một trang web. Trong thực tế, các thẻ HTML không chỉ đơn giản là các đoạn mã, mà chúng là các công cụ mạnh mẽ giúp xây dựng không gian trải nghiệm đa dạng trên Internet.
Dưới đây là một cái nhìn tổng quan về HTML và một số thẻ thông dụng, từ những thẻ cơ bản xác định đối tượng đến những thẻ linh hoạt hỗ trợ việc hiển thị nội dung và tương tác người dùng. Hãy cùng bắt đầu hành trình khám phá các công cụ quan trọng này để hiểu rõ hơn về cách chúng ta có thể tận dụng chúng trong quá trình phát triển và thiết kế trang web.
1. HTML là gì? HTML có phải là một ngôn ngữ lập trình không?
HTML viết tắt của Hypertext Markup Language – tạm dịch là ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong Website. . HTML cung cấp các thẻ và các phần tử để mô tả các thành phần khác nhau của một trang web, như văn bản, hình ảnh, liên kết, biểu đồ, biểu mẫu, và nhiều hơn nữa.
Như vậy, HTML không phải là một ngôn ngữ lập trình mà thực sự chỉ đơn giản là một ngôn ngữ đánh dấu. Ngôn ngữ lập trình thường được sử dụng để tạo ra các chương trình và ứng dụng có khả năng thực hiện các nhiệm vụ tính toán và xử lý logic phức tạp. Ngược lại, HTML chủ yếu là một ngôn ngữ đánh dấu được sử dụng để cấu trúc và định dạng nội dung trên trang web.
HTML đặt ra cấu trúc cho các phần tử trên trang, nhưng nó không có khả năng thực hiện các chức năng tính toán hay xử lý logic. HTML thường được kết hợp với ngôn ngữ lập trình như JavaScript để tạo ra trang web động và tương tác. Khi so sánh, ngôn ngữ lập trình thường cung cấp khả năng điều khiển máy tính, trong khi đó HTML chỉ định cách hiển thị thông tin trên trang web.
2. Các thẻ HTML thông dụng cơ bản
Bài trước đó, chúng ta đã khởi đầu với một trang web HTML đơn giản để tìm hiểu về cấu trúc cơ bản của HTML. Chúng ta đã sử dụng các thẻ như <html>, <head>, và <body> để bao quát trang web, cũng như các thẻ như <title> để đặt tiêu đề cho trang. Mục tiêu là hiểu cách HTML đóng vai trò trong việc xác định cấu trúc và nội dung của một trang web.
Bài này sẽ mở rộng kiến thức của chúng ta và đi sâu hơn vào các thẻ HTML thông dụng. Chúng ta sẽ khám phá cách sử dụng các thẻ để định nghĩa tiêu đề, đoạn văn bản, liên kết, hình ảnh, danh sách, và nhiều phần tử khác. Các thẻ này là những thành phần chính để tạo ra một trang web đầy đủ tính năng và thú vị.
a. Thẻ <!DOCTYPE>
Khai báo thẻ <!DOCTYPE> để thể hiện loại tài liệu và giúp trình duyệt hiển thị trang web một cách chính xác.
Nó chỉ được xuất hiện một lần, ở đầu trang (trước bất kỳ thẻ HTML nào).
Thẻ <!DOCTYPE> không phân biệt chữ hoa chữ thường.
Câu lệnh <!DOCTYPE> cho HTML5 là:
b. Thẻ tiêu đề HTML
Tiêu đề HTML được xác định bằng thẻ <h1> đến <h6>. Trong đó thẻ <h1> xác định tiêu đề quan trọng nhất. Thẻ <h6> xác định tiêu đề ít quan trọng nhất:
c. Thẻ đoạn HTML
Thẻ <p> trong HTML được sử dụng để đánh dấu một đoạn văn bản hoặc một đoạn văn bản độc lập trên trang web. "p" đứng cho "paragraph" - đoạn văn, và thẻ này giúp tổ chức và định dạng văn bản thành các đoạn chú ý, giúp trang web trở nên dễ đọc hơn.
Cú pháp cơ bản của thẻ <p> như sau:
d. Liên kết HTML
Thẻ <a> trong HTML được sử dụng để tạo liên kết (Link) giữa các trang web hoặc giữa các phần khác nhau trong cùng một trang giúp chúng ta tạo các liên kết để người dùng có thể chuyển hướng đến các trang khác hoặc tới các vùng cụ thể trong trang hiện tại.
Cú pháp cơ bản của thẻ <a> như sau:
Trong đó, đích của liên kết được chỉ định trong thuộc tính “href”. Trong ví dụ này, khi người dùng nhấp vào liên kết “Đây là liên kết tới học viện công nghệ CNET”, họ sẽ được chuyển hướng đến (https://cnet.edu.vn/khoa-hoc-lap-trinh-web-php-laravel-tai-hai-phong)
Bên cạnh việc tạo liên kết đến các trang web bên ngoài, thẻ <a> cũng có thể được sử dụng để tạo liên kết đến các tài nguyên nội bộ, như một đoạn văn bản hoặc hình ảnh trong trang hiện tại.
e. Hình ảnh HTML
Thẻ <img> trong HTML được sử dụng để nhúng hình ảnh vào trang web. Thẻ này cho phép hiển thị đồ họa và hình ảnh, làm cho trang web trở nên hấp dẫn và có tính tương tác cao hơn.
- src: Là thuộc tính bắt buộc, xác định đường dẫn URL hoặc đường dẫn tương đối đến hình ảnh.
- alt: Là thuộc tính bắt buộc, chứa mô tả về hình ảnh, sẽ được hiển thị nếu hình ảnh không thể tải hoặc nếu người dùng không thấy được hình ảnh.
Những thẻ trên là những khối xây dựng cơ bản của mỗi trang web và tạo nên nền tảng cho việc xây dựng trải nghiệm người dùng đa dạng và tương tác. Khi kết hợp với các ngôn ngữ khác như CSS và JavaScript, HTML giúp tạo ra những trang web đẹp mắt và chức năng. Hãy khám phá thêm về HTML để nắm vững ngôn ngữ này và tận dụng toàn bộ tiềm năng của nó trong thiết kế Web.
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
