HTML căn bản – Code trang HTML cơ bản nhất – Học HTML

2
2060

Bố cục HTML Căn Bản là những tag rất quan trọng và được sắp xếp một cách hợp lý, rõ ràng để trang chạy tốt và không phát sinh lỗi. Ở bài viết này mình sẽ nói sơ qua về cấu trúc dữ liệu cũng như bố cục của một trang HTML căn bản – Code HTML Cơ Bản dễ hiểu và ngắn gọn nhất cho các bạn tham khảo.

Những ví dụ dưới đây nói sơ qua về bố cục cần thiết và một số thẻ thường sử dụng.Bạn sẽ được học chi tiết các thẻ đó trong các bài tiếp theo.

Bố cục HTML

Hãy dán đoạn ví dụ sau đây vào trình soạn thảo HTML và chạy để xem thử:

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang - HoanTN.Com</title>
</head>
<body>
<h1>Đây là đề mục lớn</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
 
</html>

Tất cả các tài liệu HTML đầu tiên cần phải khai báo kiểu: <!DOCTYPE html>.

Trang HTML bắt đầu thẻ <html> và kết thúc bằng </html>.

Thẻ <head> được sử dụng để chứa dữ liệu về Metadata (  thường được dùng để định nghĩa tiêu đề của trang, gọi css, gọi scripts hay cung cấp những thông tin khác ) và kết thúc bằng </head>.

Phần hiển thị nội dung ở giữa thẻ <body> và </body>.

Đề mục trong HTML

Hãy dán đoạn ví dụ sau đây vào trình soạn thảo HTML và chạy để xem thử:

<!DOCTYPE html>
<html>
<body>
 
<h1>Đây là đề mục 1</h1>
<h2>Đây là đề mục 2</h2>
<h3>Đây là đề mục 3</h3>
<h4>Đây là đề mục 4</h4>
<h5>Đây là đề mục 5</h5>
<h6>Đây là đề mục 6</h6>
 
</body>
</html>

Đề mục trong HTML được định nghĩa bằng các thẻ từ <h1> đến <h6>. Kích cỡ chữ đề mục cũng khác nhau, lớn nhất là 1 và nhỏ dần đến 6. Bạn có thể chỉnh sửa phong cách của đề mục bằng css để hiển thị theo ý của bạn.

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

Để hiểu rõ hơn trước tiên bạn cần định nghĩa đoạn văn bản là gì, cái này mình sẽ không nói thêm.Hãy dán đoạn ví dụ sau đây vào trình soạn thảo HTML và chạy để xem thử:

<!DOCTYPE html>
<html>
<body>
 
<p>Đây là đoạn văn bản.</p>
<p>Đây là đoạn văn bản nữa.</p>
<p>Đây cũng là đoạn văn bản khác nữa.</p>
 
</body>
</html>

Những đoạn văn bản trong HTML được định nghĩa bằng thẻ <p> và kết thúc bằng </p>.

Liên kết trong HTML

Hãy dán đoạn ví dụ sau đây vào trình soạn thảo HTML và chạy để xem thử:

<!DOCTYPE html>
<html>
<body>
 
<a href="https://hoantn.com" title="đây là thuộc tính thêm của thẻ a">Đây là một liên kết</a>
 
</body>
</html>

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

Địa chỉ liên kết được quy định trong thuộc tính href.

title là thuộc tính thêm của thẻ <a> có thể dùng nhiều thuộc tính khác nhau để sử dụng theo mục đích của bạn.

Các thuộc tính được sử dụng để cung cấp thêm thông tin cho các thẻ HTML.

Ảnh trong HTML

Hãy dán đoạn ví dụ sau đây vào trình soạn thảo HTML và chạy để xem thử:

<!DOCTYPE html>
<html>
<body>
 
<img src="https://hoantn.com/wp-content/uploads/2018/06/HoanTN-Com.png" alt="HoanTN.Com" width="200" height="72">
 
</body>
</html>

Ảnh trong HTML được định nghĩa bằng thẻ <img>. Để hiển thị ảnh bắt buộc phải sử dụng thuộc tính src còn các thuộc tính khác có thể không cần dùng đến ảnh vẫn hiển thị.

(src) là nguồn để lấy ảnh, (alt) là văn bản thay thế cho ảnh, và kích thước (width và height) được gọi là các thuộc tính trong thẻ, có thể dùng nhiều thuộc tính khác nhau để sử dụng theo mục đích của bạn.

Các thuộc tính được sử dụng để cung cấp thêm thông tin cho các thẻ HTML.

Tổng kết:

Trên đây là một số thẻ HTML cơ bản thường được sử dụng cũng như bố cục cần thiết và chức năng của nó trong một trang HTML. Nếu có bất kỳ thắc mắc hay góp ý gì về bài viết này hãy để lại bình luận cho tôi phía dưới nhé.

Chúc các bạn học tốt với HTML ^^.

2 BÌNH LUẬN

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây