Tổng quan HTML

02/05/2019

Bài sau » « Bài trước

Đừng lo lắng nếu các ví dụ dưới đây chứa các thẻ (tags) mà bạn chưa biết. 

Chúng tôi sẽ đề cập ở các bài học tiếp theo.

HTML Documents - Trang tài liệu HTML

Tất cả các trang tài liệu HTML phải bắt đầu với khai báo: <!DOCTYPE html>

Trang tài liệu HTML bắt đầu với <html> và kết thúc với </html>

Phần nội dung hiển thị của trang tài liệu html nằm trong cặp thẻ <body></body>

<!DOCTYPE html> <html> <head> <title>Bài học HTML đầu tiên</title> </head> <body> <h1>Đây là tiêu đề h1</h1> <p>Đây là đoạn văn bản. </p> </body> </html>

HTML Heading - Thẻ tiêu đề HTML

Thẻ tiêu đề trong HTML được định nghĩa từ thẻ <h1> đến <h6>.

Thẻ <h1> định nghĩa tiêu đề quan trọng nhất. Và độ quan trọng giảm dần đến thẻ <h6>.

<h1>Đây là thẻ h1</h1> <h2>Đây là thẻ h2</h2> <h3>Đây là thẻ h3</h3> <h4>Đây là thẻ h4</h4> <h5>Đây là thẻ h5</h5> <h6>Đây là thẻ h6</h6>

Và đây là kết quả hiển thị:

Chú ý: Trình duyệt (Browsers) sẽ tự động thêm vào các khoảng trắng (margin) trên và dưới các thẻ h1-h6.

Thẻ tiêu đề rất quan trọng

Các bộ máy tìm kiếm dùng tiêu đề để index (lập chỉ mục) cấu trúc và nội dung trang web của bạn. Người dùng cũng đọc lướt các tiêu đề để đoán nội dung của bạn. Vì vậy, Các thẻ tiêu đề này rất quan trọng cho SEO cho website của bạn.

Chú ý: Chỉ sử dụng HTML headings cho các tiêu đề. Không được sử dụng các thẻ tiêu đề chỉ để các đoạn text TO LÊN hoặc im đậm

HTML Paragraphs - Đoạn văn bản trong HTML

Đoạn văn bản trong HTML được định nghĩa bằng thẻ <p>

<p>Đây là một đoạn văn bản</p> <p>Đây là một đoạn văn bản khác.</p>

Chú ý: Trình duyệt (Browsers) sẽ tự động thêm vào các khoảng trắng (margin) trên và dưới thẻ <p>.

Chú ý: Trong đoạn văn bản có chứa nhiều khoảng trắng, nằm trên nhiều dòng khác nhau. Trình duyệt sẽ tự động bỏ qua chúng.

Chú ý: Số dòng của đoạn văn bản phụ thuộc vào độ rộng của trình duyệt. Thay đổi độ rộng của trình duyệt thì số dòng của đoạn văn bản cũng sẽ thay đổi theo.

HTML Line Breaks - Ngắt dòng trong HTML

Sử dụng thẻ <br> để ngắt dòng mà không cần phải tạo đoạn văn bản mới. Thẻ <br> là thẻ mở, không cần phải có thẻ đóng ở cuối.

<p>Đây là <br>đoạn văn bản <br>được ngắt dòng.</p>

Kết quả hiển thị :

Đây là
đoạn văn bản
được ngắt dòng.


HTML Links - Liên kết trong HTML

Liên kết trong HTML được định nghĩa bằng thẻ <a>

Trang đích của liên kết được mô tả trong thuộc tính <href>.

Thuộc tính (Attributes) được dùng để mô tả thông tin của các thẻ HTML. Bạn sẽ tìm hiểu phần này ở bài học sau.

<a href="https://www.google.com">Tìm kiếm trên google</a>

HTML Images - Hình ảnh trong HTML

Hình ảnh trong HTML được định nghĩa bằng thẻ img.

Các thuộc tính cơ bản: đường dẫn hình (src), Mô tả hình (alt), chiều rộng hình (width) và chiều cao hình (height).

<img src="hinh01.jpg" alt="Hình của tôi" width="200" height="100" />

HTML Buttons

Nút trong HTML được định nghĩa bằng thẻ <button>

<button>Click vào đây</button>

HTML Lists - Danh sách trong HTML

Danh sách trong HTML có 2 loại: Có thứ tự dùng thẻ <ol> (dạng số), không có thứ tự dùng thẻ <ul> (dạng biểu tượng)

<ol> <li>Trà</li> <li>Sữa</li> <li>Cà phê</li> </ol>

  1. Trà
  2. Sữa
  3. Cà phê

<ul> <li>Trà</li> <li>Sữa</li> <li>Cà phê</li> </ul>

  • Trà
  • Sữa
  • Cà phê
Bài sau » « Bài trước
Back to top