Trắc hẳn ai cũng biết một trang web thì không thể nào thiếu đi HTML và HTML làm
nên cấu trúc của một trang web, như bài viết các bạn đang đọc bài viết này thì
cũng được viết bằng html.
đây là cấu trúc cơ bản của một trang HTML, chúng được cấu tạo từ các kí tự nằm
bên trong dấu < > , chúng được gọi là element ( HTML element ), các phần
tử này được tạo thành từ 2 thẻ đó là thẻ đóng và mở.
 |
| cơ bản của html |
hôm nay mình xin giới thiệu sơ cho mọi người về cấu trúc cơ bản của một trang
HTML cơ bản nhá.
HTML là gì ???
HTML là chữ viết tắt của cụm từ Hyper Text Markup Language ( Ngôn ngữ đánh dấu
siêu văn bản) được sử dụng để tạo một trang web, trên một website có thể sẽ
chứa nhiều trang và mỗi trang được quy ra là một tài liệu HTML. HTML là một
trong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website. HTML đã trở
thành một chuẩn mực của Internet do tổ chức World Wide Web Consortium (W3C)
duy trì.
Lưu ý: HTML không phải là ngôn ngữ lập trình.
Tại sao phải sử dụng html trong thiết kế website ???
nói nôm na cho dẽ hiểu thì html là một siêu văn bản cấu tạo nên một cấu
của website ( được xem là bộ khung của website ), đây là ngôn ngữ duy nhất mà
các trình duyệt cốc cốc , chrome, opera .... có thể hiểu và thực hiện
được,
cấu trúc cơ bản của HTML ???
<html>
<head>
<title>Đây là nhan đề của một bài viết</title>
</head>
<body>
<h1>Đây là tiêu đề chính</h1>
<p>Đây là đoạn văn để giới thiệu nội dung phần còn lại của trang, nếu nội dung dài thì có thể chia thành nhiều tiêu đề phụ.<p>
<h2>Đây là tiêu đề phụ</h2>
<p>Một bài viết nên có 1 vài tiêu đề phụ, điều đó giúp co cấu trúc bài viết được rõ ràng, người đọc dễ hiểu hơn.</p>
<h2>Đây là một tiêu đề phục khác cùng cấp với tiêu đề phụ bên trên</h2>
</body>
</html>
ví dụ: mình có thẻ mở là : <html>
thẻ đóng là : </ html >
thêm một vài ví vụ nữa: <p></p>; <span>
</span>....
tuy nhiên trong nhiều trường hợp thì sẽ có những element bị thiếu cả thẻ đóng
và mở.
ví dụ: <img> : thẻ này thì không có thẻ đóng nhưng để kết thúc thẻ
<img> thì chúng ta thêm dấu / vào ở cưới thì chúng sẽ trong như này:
<img/> thì lúc này thẻ img vừa là thẻ đóng và vừa là thẻ mở đó
nha.
một vài ví vụ; </meta> ; </br>; </hr> ...
Element Trong HTML
Ở trên ta đã biết đến khái niệm HTML element. Bây giờ chúng ta sẽ tìm hiểu sâu hơn về nó.
- Các thẻ ở đây hoạt động giống như các vùng chứa, nó chứa thông tin nằm giữa 2 thẻ mở và đóng.
- Các ký tự trong ngoặc cho ta biết loại thẻ, mục đích của thẻ. Ví dụ: trong các thẻ ở trên p là viết tắt của đoạn văn (paragraph).
- Thẻ mở <p> được cấu tạo bởi dấu nhỏ hơn nằm bên trái, tiếp đến là kí tự "p" và cuối cùng là dấu lớn hơn.
- Thẻ đóng </p> được cấu tạo cơ bản giống thẻ mở của nó nhưng nó thêm "/" vào trước kí tự "p".
Body, Head & Title
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tiêu đề/Nhan đề bài viết </title>
</head>
<body>
Nội dung của trang sẽ nằm ở đây
</body>
</html>
-
<!DOCTYPE html>Khai báo đây là một file có định dạng là HTML5 để giúp trình duyệt biết bạn đang dùng phiên bản html bao nhiêu, có cũng được, không có cũng được nhưng sẽ bị hạn chế nhiều thẻ mới, thuộc tính trong thẻ mà trình duyệt không phát hiện được. -
Thẻ
<html>Cấu trúc file html -
Thẻ
<body>Nằm sau thẻ<head>, có thẻ đóng</body>nằm trước</html>. Body là nơi chứa những gì mà mọi người sẽ thấy trên trang như thanh menu, banner, quảng cáo. -
Thẻ
<head>Nằm sau thẻ<html>, có thẻ đóng</head>, nó chứa những thẻ khai báo thông tin cho trang như tiêu đề, mô tả, bảng mã ký tự.headkhông hiển thị nội dung những gì nó chứa đựng ra ngoài. -
Thuộc tính (attribute)
charsetnằm trong thẻ meta có nhiệm vụ khai báo bảng mã, ngôn ngữ tiếng việt nên dùngUTF-8 -
Thẻ
<title>dùng để khai báo tiêu đề của trang, và gần như đây là bắt buộc phải có trong một file html. -
Design by @KiMiDev
