Trong chương này, chúng ta sẽ trình bày một số ví dụ HTML cơ bản. Đừng lo lắng nếu chúng tôi sử dụng các thẻ mà bạn chưa tìm hiểu về nó, chúng ta sẽ cùng giải thích về nó và hiểu nó hơn sau các bài tiếp theo.
Nội dung chính
1. Tài liệu HTML
Tất cả các tài liệu HTML phải bắt đầu bằng khai báo loại tài liệu: <!DOCTYPE html>
Bản thân tài liệu HTML bắt đầu bằng <html> và kết thúc bằng </html>.
Phần hiển thị của tài liệu HTML nằm giữa <body> và </body>.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading CAFEDEV</h1>
<p>My first paragraph CAFEDEV.</p>
</body>
</html> 2. Mô tả <!DOCTYPE>
Khai báo <!DOCTYPE> thể hiện loại tài liệu và giúp trình duyệt hiển thị chính xác các trang web.
<!DOCTYPE> Nó chỉ phải xuất hiện một lần, ở đầu trang (trước bất kỳ thẻ HTML nào).
Khai báo <!DOCTYPE> không phân biệt chữ hoa chữ thường.
Khai báo <!DOCTYPE> cho HTML5 là:
<!DOCTYPE html>
3. HTML Headings(Tiêu đề)
Các tiêu đề HTML được xác định bằng các thẻ <h1> tới <h6>
<h1> xác định tiêu đề quan trọng nhất. <h6> xác định tiêu đề ít quan trọng nhất
Ví dụ:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3> 4. HTML Paragraphs(Đoạn văn bản)
Các đoạn HTML được xác định bằng thẻ <p> :
<p>This is a paragraph.</p>
<p>This is another paragraph.</p> 5. HTML Links(Liên kết)
Liên kết HTML được xác định bằng thẻ <a>:
Ví dụ:
<a href="https://cafedev.vn/">This is a link</a> Đích của liên kết được chỉ định trong thuộc tính href.
Các thuộc tính được sử dụng để cung cấp thông tin bổ sung cho các thành phần của HTML.
Bạn sẽ tìm hiểu thêm về các thuộc tính trong một chương sau.
6. HTML Images
Hình ảnh trong HTML được xác định bằng thẻ <img>.
Tệp nguồn (src), văn bản thay thế (alt), width và height được cung cấp dưới dạng các thuộc tính:
<img src="cafedev.jpg" alt="cafedev.vn" width="104" height="142"> 7. Làm cách nào để xem nguồn của HTML(hay code HTML)?
Bạn đã bao giờ nhìn thấy một trang web và tự hỏi “Này! Làm thế nào mà họ làm điều đó?”
- Xem mã nguồn HTML:
Nhấp chuột phải vào trang HTML và chọn “View Page Source” (trong Chrome) hoặc “View Source” (trong Edge) hoặc tương tự trong các trình duyệt khác. Điều này sẽ mở một cửa sổ chứa code nguồn HTML của trang đó.
- Kiểm tra một phần tử HTML:
Nhấp chuột phải vào một thành phần nào đó (hoặc một vùng trống) và chọn “Inspect” hoặc “Inspect Element” để xem các thành phần nào được tạo thành (bạn sẽ thấy cả HTML và CSS). Bạn cũng có thể chỉnh sửa HTML hoặc CSS nhanh chóng trong bảng Elements or Styles.
Thực hành liền luôn bạn ơi.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
