Khái niệm, thẻ, thuộc tính trong HTML

  Nguyễn Dương       15 tháng 4, 2019
lượt xem


I. Khái niệm HTML

HTML là viết tắt của HyperText Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản, được thiết kế ra để tạo ra các trang web với các thông tin được trình bày trên World Wide Web
- HTML  trở thành một chuẩn internet do tổ chức World Wide Web Consortium (W3C) duy trì. 
- Phiên bản mới nhất của HTMLHTML 5 (12/2016)
- HTML sử dụng các thẻ để mô tả dữ liệu => Dựa vào đó trình duyệt sẽ hiển thị dữ liệu. 
(*) Lưu ý: HTML không phải là ngôn ngữ lập trình mà là ngôn ngữ đánh dấu văn bản, mô tả dữ liệu.

II. Cấu trúc HTML

HTML tạo ra bố cục của một Website, nó có cấu trúc dạng như sau:

<!doctype html>
<html>
     <head>
             <meta charset="uft-8">
             <title> tiêu đề trang web </title>
     </head>

     <body>
              Nội dung trang web
     </body>
</html>
Trong đó:
- <!doctype html> là phần khai báo kiểu dữ liệu kiểu html để trình duyệt biết.
- <html></html> là cặp thẻ bao trọn toàn bộ nội dung của trang web. 
- <head></head> là phần khai báo thông tin trang web, giới thiệu trang web.
- <title></title> là phần tiêu đề của trang web. Hiển thị ở thanh tiêu đề của trình duyệt web.
- <body></body> là phần chứa nội dung của trang web, chứa đoạn mã html để hiển thị nội dung lên trang web.

III. Thẻ trong HTML

1. Khái niệm thẻ trong HTML

- Thẻ trong HTML là một cấu trúc dùng để tạo nên nội dung của trang web.
- Thẻ HTML gồm có 2 loại là thẻ kép và thẻ đơn.
+ Thẻ kép có dạng như sau: <tên_thẻ> nội dung thẻ </tên_thẻ>Thẻ kép gồm có một thẻ mở và một thẻ đóng. Thẻ đóng sẽ có dấu "/" ở trước tên thẻ.
Ví dụ: <b> Chung cư mini </b>. Thẻ này có tác dụng in đậm văn bản, vậy dòng chữ Chung cư mini sẽ được in đậm.
+ Thẻ đơn có dạng như sau: < tên_thẻ  danh_sách_thuộc_tính />
Ví dụ: <img src="tramanh.jpg" />. Trong đó, img là tên thẻ, có nghĩa là image (hình ảnh). Còn src là thuộc tính của thẻ, viết tắt của chữ source (nguồn). tramanh.jpg là tên file hình ảnh trong cùng thư mục.

2. Thuộc tính của thẻ HTML

<tên_thẻ thuộc_tính 1="giá trị 1" thuộc_tính 2="giá trị 2"> nội dung </tên_thẻ>
<tên_thẻ thuộc_tính 1="giá trị 1" thuộc_tính 2="giá trị 2" />
Giữa tên thẻ và thuộc tính ngăn cách nhau bởi dấu cách trống. Giữa 2 thuộc tính cũng được ngăn cách bởi dấu cách trống. Giá trị của thuộc tính phải đặt trong dấu ngoặc kép.
Hiện nay các lập trình viên rất ít khi sử dụng thuộc tính để mô tả dữ liệu, thay vào đó người ta sử dụng CSS để mô tả. Trừ trường hợp rất cần thiết như dùng để mô tả, đánh dấu dữ liệu mở rộng, thuộc tính dùng để định danh, xác định đối tượng hoặc thuộc tính tự đặt thêm... Ví dụ như thuộc tính src của thẻ img 

3. Một số thẻ HTML

Trong nội dung bài viết này mình chỉ chia sẻ một số thẻ dùng định dạng văn bản cho các bạn biết sơ bộ về thẻ trong html thôi, ngoài ra còn có rất nhiều thẻ khác mình sẽ chia sẻ dưới dạng danh sách ở bài viết sau. 
<p> ... </p>: Thẻ xác định một đoạn văn bản. Viết tắt của chữ paragraph.
<b> ... </b>: In đậm nội dung văn bản.
<i> ... </i>: In nghiêng nội dung văn bản.
<u> ... </u>: Gạch chân đoạn văn bản.
<br />: Dùng để ngắt dòng (xuống dòng). 
<center> ... </center>: Căn giữa cho đoạn văn bản.

Các bạn hãy thử làm một ví dụ tương tự như sau:
Ta được kết quả là:

Các bạn có thể thấy trên thanh tiêu đề của trình duyệt web có dòng chữ ship hàng chính hãng, vì nó được đặt trong thẻ <title> và </title> của phần <head> và </head>. Trang có 2 đoạn văn bản vì được xác định bởi 2 cặp thẻ <p> ... </p>. Đoạn văn nằm trong thẻ <b> ... </b> đã được in đậm. Còn thẻ <br /> có tác dụng xuống dòng. 

Rất đơn giản đúng không nào. ^^
Hãy đóng góp ý kiến của bạn vào phần bình luận bên dưới để mình hoàn thiện các bài viết hơn nhé. ^^
logoblog

Bài viết liên quan

Nhận xét bài viết

Có một câu nói mà mình rất thích đó là: "Những gì chúng ta biết trong ngày hôm nay, ngày hôm sau sẽ lỗi thời. Nếu ngừng học tập thì chúng ta sẽ ngừng phát triển".
Con người ta muốn biết, muốn hiểu, muốn thành công thì phải học, học thật nhiều, học suốt đời.

Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!

Lưu ý không spam link dưới mọi hình thức

Bạn có thể bình luận bằng 3 chế độ:
- Tài khoản Gmail
- Ẩn danh
- Tên tự tạo

Không có nhận xét nào:

Đăng nhận xét