Chào các bạn như tiêu đề bài viết hôm nay mình sẽ giới thiệu một chút cho các bạn về ngôn ngữ HTML cấu trúc của nó và một số thẻ cơn bản thường dung trong HTML

 

HTML là gì ?

 

 HTML ( Hypertext Markup Language): Là ngôn ngữ đánh dấu siêu văn bản, đưa vào chuẩn web năm 1994 Tập tin HTML là một văn bản có chứa các thẻ đánh dấu (markup tags), các thẻ đánh dấu này giúp các trình duyệt Web hiểu được cách trình bày và hiển thị trang Web. Tập tin HTML có phần mở rộng (Extension) là htm hay html và có thể được tạo ra bằng bất cứ chương trình xử lý văn bản đơn giản nào.

Trong tập HTML các phần tử (Element) được đánh dấu bằng các thẻ HTML. Các thẻ này được bao bởi dấu < và dấu > Thông thường các thẻ HTML được dùng theo một cặp <tên thẻ> (thẻ bắt đầu, thẻ mở) và </tên thẻ> (thẻ kết thúc, thẻ đóng), văn bản nằm giữa cặp thẻ này là nội dung của phần tử, một số thẻ không cần thẻ kết thúc (thẻ đóng). Các thẻ HTML không phân biệt chữ hoa và chữ thường, có nghĩa là các kiểu chữ đều được xem như nhau.

 

Cấu trúc của một tập tin văn bản HTML

–          Một tập tin văn bản HTML là 1 file văn bản chứa các thẻ đánh dấu.

–          Khi bạn tạo ra một tập tin văn bản HTML thì sẽ để đuôi (mở rộng) của nó là : .html .htm

 

Ví dụ : index.html, default.html, footer.html

Cấu trúc chung của một tài liệu HTML 

 

<html>

<head>

        <title>Tiêu đề Website của bạn</title>

</head>

<body>

          Nội dung hiển thị Website

</body>

</html>

 

Trong đó

<html></html> :  Xác định phần đầu và phần kết thúc của trang HTML (HTML document)

<head></head> : Xác định phần đầu của  Website, chứa các thông tin tổng quát về website ( Như tiêu đề, mô tả, tác giả… )  và không thể hiện trên cửa sổ trình duyệt .

<body></body>: Xác định phần thân web Nơi hiển thị toàn bộ nội dung của một website được thể hiện trong màn hình trình duyệt

Elements( Phần tử):

– Là thành phần được xác định nhờ các thẻ (tag)

– Mỗi thẻ có cấu trúc <tên_thẻ>: <font>

–  Thẻ gồm thẻ đóng và thẻ mở:

<tên_thẻ>: Thẻ mở

</tên_thẻ>: Thẻ đóng

–  Thẻ không phân biệt hoa và thường: <b> giống <B>, tuy nhiên chúng ta nên thống nhất dùng chữ thường

 

Cấu trúc 1 phần tử

<tên_thẻ thuộc_tính=“giá_trị”>Nội dung</tên_thẻ>

Ví dụ: <font color=“red”> Chữ này sẽ có màu đỏ </font>

– Thuộc tính và giá trị có thể có hoặc không: <body>Nội dung</body>

– Một số thẻ không cần thẻ đóng ( Để đúng chuẩn chúng ta thêm dấu gạch chéo vào phía sau):   <br /> , <hr /> , <imrg src=“itshare24h.jpg” /> , …

 

Một số thẻ cơn bản trong HTML

1.  Thẻ <head></head>

– Vị trí: Nằm sau thẻ mở <html> và trước thẻ mở <body>

– Chứa thông tin về website( nhưng không hiển thị) cho trình duyệt, các Search Engine( Google, Yahoo, Bing,… )

2.  Thẻ <body></body>

– Vị trí:  Đứng ngay sau cặp thẻ <head></head>

– Chứa toàn bộ nội dung website( Hiển thị trên trình duyệt)

– 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( trong 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, giá trị chính là đường dẫn của ảnh.

Ví dụ:

<body background=“images/anh1.jpg”>Nội  dung website của bạn</body>

Như vậy ảnh “anh1.jpg” nằm trong folder “images” sẽ được đặt làm hình nền cho Website của bạn

+ text: Định màu chữ cho toàn bộ website

+ link: Định dạng màu của liên kết trong website( Mặc định các liên kết là màu xanh blue)

+ alink: Định dạng màu của liên kết đang hoạt động( khi nhấn giữ chuột vào liên kết đó)

+ vlink:  Định dạng màu liên kết đã ghét thăm( Mặc định liên kết chúng ta đã click vào thường có màu vàng)

 

HTML

 

 

+ leftmargin( căn lề trái),  topmargin ( căn lề trên)

Ví dụ:

<body topmargin=“50”></body>

3.  Thẻ <title></title>

– Nằm trong cặp thẻ <head>, nhằm tạo tiêu đề cho website.

Ví dụ :

<html>

<head>

<title>itshare24h.com</title>

</head>

<body>

</body>

</html>

Thì nó sẽ hiển thị trên trình duyệt của bạn 

HTML

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 đề( khác với thẻ title) cho các chuyên mục, danh mục, bàiviết,…

– Ví dụ: Ta viết các thẻ

 

<h1>heading1</h1>

 <h2>heading2</h2>

 <h3>heading3</h3>

 <h4>heading4</h4>

 <h5>heading5</h5>

 <h6>heading6</h6>

 

Khi chạy trình duyệt sẽ nhiển thị 

HTML

 

– Các bạn nên sử dụng các thẻ heading cho:

   + Danh mục menu

   + Tiêu đề bài viết

   + Chuyên mục

 

a) Thẻ định dạng đoạn văn bản <p>

– Cú pháp: <p> Đoạn văn bản</p>

– Thẻ <p> xác định cho 1 đ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), justify( căn đều).

Ví dụ: <p align=“right”> Đoạn văn bản này sẽ căn phả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ũ) .

<sub></sub>: Đưa 1 ký tự xuống dưới.

<pre></pre>: Giữ nguyên đoạn văn bản( Như khi code)

 

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( Sẽ nghiên cứu thêm ở phần CSS).

– 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:

     + 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)

ĐỂ LẠI PHẢN HỒI CỦA BẠN TẠI ĐÂY

Phản hồi về bài viết này

NO COMMENTS

LEAVE A REPLY


*