[Series Html] Bài 2: Các thẻ Html cơ bản.

Ủng hộ AnonyHome Team
Chờ một chút: bạn thấy bài viết có ích chứ? Hãy chia sẻ nó với mọi người nhé!

Chào các bạn! Tiếp tục series học Html cơ bản, chúng ta sẽ đến với bài 2. Trong bài này chúng ta cùng tìm hiểu về các thẻ html cơ bản.

[Series Html] Bài 2: Các thẻ Html cơ bản. - Học html cơ bản - AnonyHome

Bắt đầu thôi…

1) Thẻ <head>.

 – Vị trí: sau thẻ mở Html và trước thẻ mở <body>.
 – Chứa các thông tin về Website như tiêu đề, tác giả… .

2) Thẻ <body>.

 – Vị trí: Sau cặp thẻ <head></head>.
 – Chứa toàn bộ nội dung của website.
 – Một số thuộc tính của thẻ <body>:
 + bgcolor: Định dạng màu nền website, giá trị gồm tên màu(tiếng Anh), mã màu trong hệ Hex, mã màu RGB.

  Ví dụ: <body bgcolor=”red”>Nền website có màu đỏ</body>
 + background: Định dạng ảnh nền cho website, giá trị chính là đường dẫn của ảnh.
  Ví dụ 1:<body background=”image.jpg”>

  Ví dụ 2: Trên màn hình Desktop mình có một file “bai2.html” và một thư mục có tên “images” trong thư mục này chứa 1 file ảnh có tên “img1.jpg” (Như hình bên dưới).

[Series Html] Bài 2: Các thẻ Html cơ bản. - Học html cơ bản - AnonyHome

 Như vậy để file ảnh “img1.jpg” có thể làm ảnh nền cho file “bai2.html” thì file “bai2.html” được viết như đoạn code sau: 

<!DOCTYPE html>
<html>
<head>
<title>Bài học Html buổi 2</title>
<meta charset="utf-8">
</head>
<body background="images/img1.jpg">
Ví dụ về ảnh nền trong Web
</body>
</html>


Kết quả nhận được khi ta chạy file “bai2.html” trên trình duyệt như sau:

[Series Html] Bài 2: Các thẻ Html cơ bản. - Học html cơ bản - AnonyHome



 + Ngoài ra còn một số các thuộc tính khác của thẻ <body> các bạn có thể tìm hiểu thêm trên Google.

3) Thẻ <title>.

 – Vị trí nằm trong cặp thẻ <head></head>.
 – Để tạo tiêu đề cho website.

4) Các thẻ heading.

 – Gồm 6 thẻ từ <h1> đến <h6> theo chiều kích thước giảm dần.
 – Là thẻ xác định tiêu đề cho các chuyên mục, danh nục, bài viết…(lưu ý khác với thẻ <title>).

Ví dụ: 

<!DOCTYPE html>
<html>
<head>
<title>Ví dụ</title>
</head>
<body>
<h1>Ví dụ thẻ h1 </h1>
<h2>Ví dụ thẻ h2 </h2>
<h3>Ví dụ thẻ h3 </h3>
<h4>Ví dụ thẻ h4 </h4>
<h5>Ví dụ thẻ h5 </h5>
<h6>Ví dụ thẻ h6 </h6>
</body>
</html>

Kết quả nhận được như sau.


[Series Html] Bài 2: Các thẻ Html cơ bản. - Học html cơ bản - AnonyHome

5) Một số thẻ định dạng văn bản.
    a) Thẻ <p> dùng để định dạng đoạn văn bản.

   – Cú pháp: <p> đoạn văn </p>.
   – Dùng để xác định cho một đoạn văn bản và tự động xuống dòng.
   – Các thuộc tính:
     +align căn chỉnh đoạn văn gồm các giá trị: center(căn giữa), left(căn trái), right(căn phải), justifi(căn đều).

     Ví dụ: <p align=“left”> Đoạn văn bản này sẽ căn trái</p>

    b) Thẻ định dạng ký tự

 – <b></b>: In đậm
 – <i></i>: In nghiêng
 – <u></u>: Gạch chân
 – <s></s>: Gạch ngang
 – <sup></sup>: Đưa 1 ký tự lên trên( mũ) . AX2+ BX+C= 0
 – <sub></sub>: Đưa 1 ký tự xuống dưới. H2O
 – <pre></pre>: Giữ nguyên đoạn văn bản( Như khi code).

Ví dụ: 

<!DOCTYPE html>
<html>
<head>
<title>Ví dụ</title>
</head>
<body>
<p><b>Ví dụ thẻ in đậm </b></p>
<p><i>Ví dụ thẻ in nghiêng </i></p>
<p><u>Ví dụ thẻ gạch chân </u></p>
<p><s>Ví dụ thẻ gạch ngang </s></p>
<p>2<sup>2</sup>=4.</p>
<p>H<sub>2</sub>O. </p>
<p><pre>
Ví dụ
về đoạn văn bản được giữ nguyên

</pre></p>
</body>
</html>

Kết quả: 

[Series Html] Bài 2: Các thẻ Html cơ bản. - Học html cơ bản - AnonyHome



c) Thẻ định dạng font chữ.

– Cú pháp: <font> Nội dung cần định dạng </font>
– Thuộc tính:
+ Color: Màu chữ. Ví dụ: red, green, #FFFFFF( Hệ hex).
+ Size: Kích thước chữ.
+ Face: Quy định font chữ. Như: Arial, Tahoma, “Time New Roman”

Ví dụ: <font color=“green” size=“5” face=“Arial”> Ví dụ font chữ </font>

6. Một số thẻ khác.

– Thẻ <div>:
Là 1 thẻ quan trọng trong HTML, được sử dụng để phân chia các lớp trong website
thay cho việc dùng bảng( table) như trước đây. 

– Thẻ xuống dòng <br>:
Trong HTML để xuống 1 dòng mới ta phải sử dụng thẻ xuống dòng <br> hoặc <br />
( Theo chuẩn XHTML). Có 1 số thẻ mặc định nội dung bên trong xuống dòng như:
<p>, <div>, <h1> đến <h6>,…

– Thẻ kẻ ngang <hr />:
+ tạo ra 1 đường kẻ ngang trên website của bạn

Thuộc tính thẻ <hr/>:
+ size: Độ lớn của đường kẻ( độ dày). Đơn vị Pixel
+ width: Độ lớn chiều ngang của đường kẻ( Pixel)
+ color: Màu của đường kẻ
+ align: Căn chỉnh vị trí của đường kẻ. Center( giữa website),
left( trái),
right( phải)
 ví dụ <hr size=”7″ width=”200″ align=”left” color=”red” />

Kết thúc bài 2 tại đây. Trong bài này AnonyHome đã giới thiệu cho các bạn các thẻ html cơ bản nhất. Trong bài học tiếp theo chúng ta sẽ nghiên cứu về hình ảnh và liên kết trong html.
Chúc các bạn học tập tốt! 
Mọi ý kiến các bạn vui lòng để lại trong mục bình luận bên dưới.

Share
0 0 vote
Vui lòng đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
XEM THÊM
Bài 1: Html và cấu trúc.1)…
0
Bạn thích bài viết chứ? Hãy để lại bình luận.x
()
x