CÁC VÍ DỤ HTML CĂN BẢN
Trong bày này, chúng ta tìm hiểu một số ví dụ HTML cơ bản. Bạn hãy quan sát và thực hành theo nhé!
Tài liệu HTML
Tất cả các tài liệu HTML sẽ bắt đầu với một tuyên bố dạng tài liệu là <!DOCTYPE html>
Tài liệu HTML bắt đầu bằng thẻ mở <html> và kết thúc bằng thẻ đóng </html>
Phần hiển thị của tài liệu HTML nằm trong cặp thẻ mở và đóng <body> </body>
Hãy mở trình soạn thảo HTML làm ví dụ sau và xem kết quả.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Khai báo <! DOCTYPE>
<!DOCTYPE> Khai báo bắt đầu một tài liệu, và giúp các trình duyệt Web hiển thị chính xác. Được xuất hiện một lần, ở đầu trang (trước bất kỳ thẻ HTML nào).
<!DOCTYPE> Không hiển thị trực tiếp
<!DOCTYPE> Chúng ta khai báo trong HTML5 là <!DOCTYPE html>
Tiêu đề HTML
Các tiêu đề HTML được xác định bằng các thẻ <h1> đến <h6>
<h1> Xác định tiêu đề quan trọng nhất.
<h6> Xác định tiêu đề ít quan trọng hơn.
Hãy mở trình soạn thảo HTML làm ví dụ sau và xem kết quả.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 3</h4>
<h5>This is heading 3</h5>
<h6>This is heading 3</h6>
</body>
</html>
Đoạn văn HTML
Các đoạn trong HTML được xác định bằng thẻ <p>
Hãy mở trình soạn thảo HTML làm ví dụ sau và xem kết quả.
<!DOCTYPE html>
<html>
<body> <p>This is a paragraph.</p> <p>This is another paragraph.</p>
<body>
<html>
Liên kết trong HTML
Các liên kết HTML được xác định bằng thẻ <a>
Hãy mở trình soạn thảo HTML làm ví dụ sau và xem kết quả.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.workonlinevn.com">This is a link</a>
<body>
<html>
Đích của liên kết được chỉ định trong href thuộc tính.
Các thuộc tính được sử dụng để cung cấp thông tin bổ sung về các phần tử HTML.
Bạn sẽ tìm hiểu thêm về các thuộc tính trong bài sau.
Hình ảnh trong HTML
Hình ảnh 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.
Hãy mở trình soạn thảo HTML làm ví dụ sau và xem kết quả.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML links are defined with the a tag:</p>
<img src="picture.jpg" alt="workonlinevn.com"
width="104" height="142">
<body>
<html>
Làm thế nào để xem nguồn HTML?
Bạn đã bao giờ truy cập vào một Website và tự hỏi, họ làm được trang web này bằng gì? Bạn hãy thực hiện bằng cách xem mã nguồn và kiểm tra phần tử bằng các thao tác sau đây.
🌐 Xem mã nguồn HTML
Nhấp chuột phải vào Websitevvà chọn "Xem nguồn trang".
Thao tác này sẽ mở ra một cửa sổ chứa mã nguồn HTML của trang.
🌐 Kiểm tra một phần tử HTML
Để kiểm tra phần tử HTML bạn nhấp chuột phải vào trang và chọn "Kiểm tra phần tử" (View page source) để xem những phần tử 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 một cách nhanh chóng trong bảng phần tử hoặc kiểu mở ra.
