Các ví dụ cơ bản về HTML

Dưới đây là một số ví dụ về HTML và một số thẻ cơ bản được sử dụng trong HTML. Bạn đừng quá lo lắng nếu như bắt gặp các thẻ mà bạn chưa được học đến.

HTML Documents

Tất cả các tài liệu HTML đều được khai báo bằng thẻ <!DOCTYPE html>

Tất cả các trang tài liệu HTML bắt đầu bằng thẻ <html> và kết thúc bằng thẻ đóng </html>

Nội dung của tài liệu html sẽ được hiển thị trong cặp thẻ <body></body>

<!DOCTYPE html>
<html>
<body>

<h1>Đây là heading của 1 trang web</h1>
<p>Đây là nội dung văn bản: Chào mừng bạn đến với codezi.pro</p>

</body>
</html>

HTML Headings

HTML headings được định nghĩa là các thẻ từ <h1> đến <h6> bao gồm <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Trong đó thẻ <h1> đại diện cho giá trị quan trọng nhất của trang web đó (nên mỗi 1 trang cần có 1 thẻ <h1> và nên để thẻ này là duy nhất (không nên có nhiều hơn 1 thẻ <h1> trong 1 trang web)

<h1>Đây heading 1</h1>
<h2>Đây là heading 2</h2>
<h3>Đây là heading 3</h3>
<h4>Đây là heading 4</h4>
<h5>Đây là heading 5</h5>

Nội dung văn bản trong HTML

Để biểu diễn văn bản, đoạn văn trong HTML ta có thể sử dụng thẻ <p> Bên trong thẻ p có thể chứa các thẻ khác để biểu thị, diễn đạt nội dung, tuy nhiên không được chứa trong p các thẻ như div, heading,…

<p>Học lập trình HTML thật đơn giản...</p>
<p>Codezi.pro là 1 trang web vì cộng đồng.</p>

HTML link được định nghĩa bởi thẻ <a>, sử dụng khi bạn muốn tạo một đường dẫn từ trang này tới trang khác, trong cùng 1 trang web hoặc ngoài trang web của bạn

<a href="https://codezi.pro">Đây là một link</a>

Đích đến của một link được định nghĩa là giá trị của thuộc tính href

Một thẻ html thì có nhiều thuộc tính (html Attributes), các thuộc tính này bổ sung thêm thông tin cho thẻ chứa nó, và có thể được sử dụng vào nhiều mục đích khác nhau: Các thuộc tính của thẻ html – HTML Attributes

HTML Images

HTML images được định nghĩa bằng thẻ <img> thẻ này được sử dụng để hiển thị hình ảnh trên trang web html

<img src="file-hinh-anh.jpg" alt="codezi.pro" width="104" height="142">

Thuộc tính src của thẻ img có giá trị là đường dẫn của file hình ảnh. Thuộc tính alt mô tả thêm thông tin về hình ảnh, with, height là kích thước chiều rộng, chiều cao của hình ảnh hiển thị trên màn hình (có thể không phải kích thước thật của hình ảnh)

HTML Buttons

HTML buttons là nút bấm trên trang web được định nghĩa bởi thẻ <button> hoặc <input type=”button”/>. Nút được xây dựng nhằm tăng tính tương tác giữa người dùng với tài liệu HTML

<button>Hãy bấm vào em đi</button>
<input type="button" value="Click vào em phát"/>

Biểu diễn danh sách trong HTML

Danh sách trong html được định nghĩa bởi thẻ <ul> (danh sách không sắp xếp, không đánh số thứ tự), hoặc thẻ <ol> biểu diễn danh sách có thứ tự.

<ul>
  <li>Học lập trình html</li>
  <li>Học lập trình java</li>
  <li>Học lập trình web với codeZi</li>
</ul>

<ol>
  <li>CSS cơ bản</li>
  <li>Php cơ bản</li>
  <li>Lập trình web</li>
</ol>

Đấy! nhớ share nếu bạn thấy nó hữu ích cho các em.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *