![[HỌC HTML 02] LÀM QUEN VÀ TIẾP CẬN QUA CÁC VÍ DỤ](https://lenhatthanh.com/wp-content/uploads/2019/01/Lê-Nhật-Thanh-dot-Com-770x300.png "[HỌC HTML 02] LÀM QUEN VÀ TIẾP CẬN QUA CÁC VÍ DỤ")
Trong bài này, bạn sẽ được tiếp cận với các vị dụ về HTML. Nhưng có một số thẻ HTML bạn chưa được học (cái này nhiều lắm), thì bạn cũng đừng lo lắng, vì bạn sẽ được học trong những bài kế tiếp. Bạn hãy học HTML một cách tốt nhất vì đây là nên tảng của lập trình web
#1 HTML DOCUMENTS
Như trong bài #01 – GIỚI THIỆU KHOÁ HỌC, bạn đã nghe về HTML document. Và bạn có thể hiểu đơn giản, một trang HTML có thẻ <html> là một HTML document.
Tất cả HTML document đều được bắt đầu với thẻ <!DOCTYPE html>, thẻ này là gì thì bạn tham khảo ngay bài một. Và ngay sau đó là cặp thẻ <html> để bắt đầu và kết thúc document.
Và những phần mà bạn thấy ngoài trình duyệt sẽ được nằm trong thẻ <body>.
Xem ví dụ sau:
See the Pen VgpoRw by lenhatthanh20 (@lenhatthanh20) on CodePen.
#2 HTML HEADING
Heading hay còn gọi là tiêu đề là một trong những thẻ thông dụng nhất trong HTML, mình cũng đã giới thiệu trong bài #01.
Trong HTML, chúng ta có tất cả 6 thẻ heading, từ <h1> đến <h6>.
Chúng ta định nghĩa rằng, thẻ <h1> sẽ định nghĩa cho heading quan trọng nhất, còn thẻ <h6> định nghĩa cho heading ít quan trọng nhất.
Xem ví dụ sau về các thẻ heading.
See the Pen rPmBao by lenhatthanh20 (@lenhatthanh20) on CodePen.
#3 ĐOẠN VĂN TRONG HTML
Một đoạn văn (paragraph) ở trong HTML được định nghĩa bởi thẻ <p>. Chúng ta cùng xem ví dụ:
See the Pen daWbOG by lenhatthanh20 (@lenhatthanh20) on CodePen.
#4 LIÊN KẾT (LINK) TRONG HTML
Dành cho những bạn chưa biết link là gì, khi bạn click chuột vào một nút nhấn, trình duyệt đưa bạn đến một trang HTML khác, thì bạn có thể gọi nút nhấn đó là một link.
Link trong HTML được định nghĩa bằng thẻ <a>. Cùng xem ví dụ.
See the Pen jdmNav by lenhatthanh20 (@lenhatthanh20) on CodePen.
Trong thẻ <a> này, link mà sau khi bạn click vô sẽ chuyển hướng được chỉ định ở trong thuộc tính href. Như trong ví vụ trên, khi bạn click vào link, trình duyệt sẽ chuyển hướng bạn đến trang web https://lenhatthanh.com.
Mình vừa nhắc tới khái niệm thuộc tính (attribute). Attribute được sử dụng rất nhiều để cung cấp thêm thông tin cho phần tử HTML. Và bạn sẽ học về các thuộc tính này nhiều hơn của các tập sau.
#5 HTML IMAGE
Khi bạn lướt một trang web nào đó (ví dụ facebook), bạn sẽ thường xuyên thấy những hình ảnh trên web.
Hình ảnh trong HTML được định nghĩa bằng thẻ <img>.
See the Pen Odmbpg by lenhatthanh20 (@lenhatthanh20) on CodePen.
Bạn có thấy điều gì đặc biệt trong thẻ <img> phía trên không? Bạn có thể nhận ra thẻ này không có thẻ đóng, nó là single tag. Và trong HTML có một số thẻ như vậy.
Trong thẻ <img> phía trên có 3 thuộc tính bạn cần phải biết:
src– file ảnh để hiển thị.alt– alternative text, đây là thuộc tính thay thế. Bạn có thể hiểu đơn giản, khi một website không thẻ tải ảnh (trong thuộc tínhsrc) thì nội dụng trong thuộc tính alt sẽ hiển thị. Và thuộc tính này cũng rất quan trọng trong các kĩ thuật SEO cho website.width– chiều rộng của ảnh sẽ hiển thị.height– chiểu cao của ảnh sẽ hiển thị.
#6 NÚT NHẤN TRONG HTML
Nút nhấn (button) được sử dụng rất nhiều trong website. Phần tử HTML này chắc hẳn bạn đã thấy rất nhiều.
Nút nhấn trong HTML được mô tả bởi thẻ <button>.
See the Pen BMRpqe by lenhatthanh20 (@lenhatthanh20) on CodePen.
Hãy nhớ lại, khi bạn click vào một button nào đó, thì trình duyệt sẽ thực thi một hành động nào đó, trong lập trình web, người ta gọi là xử lý sự kiện, và bạn sẽ được học trong khóa học Javascript.
#6 HỌC HTML LISTS
List trong HTML (danh sách) được mô tả bằng 2 thẻ <ul> (unordered list – danh sách không được sắp xếp) hoặc <ol> (ordered list – danh sách được sắp xếp). Bên trong 2 thẻ này sẽ là thẻ <li> (list items). Xem ví dụ sau để hiểu thêm về 2 loại list này.
See the Pen QYvdYw by lenhatthanh20 (@lenhatthanh20) on CodePen.
#7 KẾT
Qua các ví dụ trên đây, cùng với những giải thích ngắn gọn của mình, thì bạn có thể hiểu được phần nào về HTML, cách thức nó hoạt động trên trình duyệt web.
Vậy là chúng ta đã qua được 2 bài trong series học HTML, mời bạn đón xem bài tiếp theo.
