Các thẻ cơ bản trong HTML


Tự học html css javascript 19/10/2015 Cùng chuyên mục

Giới thiệu cú pháp - khái niệm cơ bản về thẻ (tag) trong HTML như tên, thuộc tính,... một số thẻ cơ bản như html, h1, h2 ... title, body, danh sách không thứ tự ul - có thứ tự ol - đoạn văn bản p.

Nội dung tìm hiểu:

  • Khái niệm về thẻ và thuộc tính (attribute) của thẻ (tag) trong HTML
  • Các thẻ cơ bản trong HTML như: <html>, <head>, <title>, <body>, <h1>, <h2>
  • Tạo danh sách: có thứ tự với thẻ <ol> - không thứ tự với thẻ <ul> - danh sách định nghĩa: <dd>
  • Thẻ xác định đoạn văn bản <p> - đường kẻ ngang - <hr>

Thẻ Và Các Thuộc Tính Của Thẻ

Khái Niệm Thẻ Trong HTML

Thẻ (tag) là những câu lệnh được viết giữa dấu nhỏ hơn (<) và dấu lớn hơn (>) hay còn gọi là dấu móc nhọn, quy định cách hiển thị văn bản. Có 2 loại thẻ: Thẻ mở (open tag) và thẻ đóng (close tag), đoạn văn bản hiển thị nằm giữa hai thẻ này, cả thẻ mở và thẻ đóng đều được viết như nhau nhưng thẻ đóng có thêm một dấu /  phía trước.

Hình 1: Phân tích một thẻ HTML

Trong hình trên:

  • h1 là tên của thẻ
  • class="foo" là thuộc tính của thẻ
  • News là phần nội dung của thẻ

Nội dung của thẻ sẽ hiển thị theo tên của thẻ ( về độ lớn của chữ - font size, quy định khoảng cách đến phần tử phía trước - phía sau: margin - ... ) - để điều chỉnh các thông số khác với mặc định có thể thay đổi thông qua các thuộc tính. 

Thuộc Tính Của Thẻ

Thuộc tính tác động lên phần nội dung của thẻ. Thuộc tính được nhập vào giữa thẻ và dấu lớn hơn cuối cùng. Thường thì chúng ta dùng nhiều thuộc tính trong một thẻ. Các thuộc tính được viết không cần thứ tự và cách nhau một khoảng trắng. Tên thuộc tính được viết bằng ký tự thường - giá trị được đặt trong dấu nháy đơn ' ' hoặc dấu nháy kép " ".

Trong hình 1: 

  • Tên thuộc tính là class
  • Gía trị của thuộc tính là foo

Thẻ Lồng Nhau

Các thẻ có thể được lồng trong nhau - theo đó phần văn bản nằm trong thẻ bên trong - sẻ hiển thị theo các thuộc tính riêng biệt của thẻ đó - còn lại sẽ chịu ảnh hưởng của thẻ bên ngoài.

Ví dụ: 

<p><b>Thẻ: </b> khai báo đoạn văn bản</p>

Sẽ có kết quả:

Thẻ: khai báo đoạn văn bản

Với thẻ p các ký tự sẽ có định dạng chữ thường - cỡ chữ lấy theo mặc định ( nếu không quy định ) - còn với thẻ b các ký tự sẽ có định dạng chữ in đậm.

 Các Thẻ Cơ Bản Trong HTML

Thẻ Xác Định Mã HTML

Cú pháp:
<html> Các nội dung của trang HTML </html>
Trước thẻ <html> sẽ có thẻ khai báo phiên bản của mã HTML (HTML 4.01 hay HTML 5: là 2 phiên bản mới nhất, được sử dụng phổ biến hiện nay)

HTML 4.01 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">

HTML 5:
<!DOCTYPE html>

Trong các bài viết học HTML ở streampow.net - sẽ sử dụng phiên bản HTML 5. 

(*) - các thẻ khác đều nằm trong thẻ html

Thẻ Xác Định Phần Đầu Cho Trang HTML

Cú pháp:
<head> Phần đầu trang HTML </head>
Thẻ xác định phần đầu của văn bản HTML, để chứa các thông tin giới thiệu sơ bộ về trang web như tiêu đề (title) - loại mã hóa ký tự (metacharset) - đường dẫn javascript - đường dẫn css - từ khóa (meta keyword) - mô tả ngắn gọn (meta description) ...

Thẻ Xác Định Tiêu Đề Cho Trang HTML

Cú pháp:
<title> Nội dung tiêu đề của trang HTML</title>
Nội dung thẻ tiêu đề sẽ hiển thị lên nút tab của trình duyệt. 
(*) Thẻ title nằm trong thẻ head

Thẻ Xác Định Phần Thân Cho Trang HTML

Cú pháp:
<body> Phần thân trang HTML </body>
Phần thân sẽ là phần chính hiển thị nội dung trang HTML cho người xem. 

Thẻ Xác Định Các Danh Mục (khối văn bản) của Trang Web

Các danh mục (heading) thường được hiển thị to và đậm hơn để phân biệt chúng với các phần còn lại của văn bản. với ý nghĩa nó là tên của đoạn văn bản - một khối văn bản (gồm nhiều đoạn văn). Có sáu kích thước hiển thị danh mục từ H1 đến H6 - theo mức độ giảm dần. 

Ví dụ: Các thẻ cơ bản trong HTML

<!Doctype html> <!-- Khai báo phiên bản sử dụng html 5-->
<HTML> <!--thẻ khai báo bắt đầu mã html-->
<HEAD> <!--thẻ khai báo bắt đầu phần head ( phần đầu ) -->
<TITLE>HTML - Hello World</TITLE> <!-- Tiêu đề trang web -->
</HEAD> <!-- kết thúc phần head -->
<BODY> <!-- bắt đầu phần thân -->
<H1> Hello World 1</H1>
<H2> Hello World 2</H2>
<H3> Hello World 3</H3>
<H4> Hello World 4</H4>
<H5> Hello World 5</H5>
<H6> Hello World 6</H6>
</BODY> <!-- kết thúc phần thân -->
</HTML> <!-- kết thúc mã html-->

Hình 2: Các thẻ cơ bản trong HTML - h1 ... h6

Thẻ Xác Định Đoạn Văn Bản Trong Trang Web

Cú pháp:
<p> Nội dung của văn bản </p>

Khi cần trình bày một nội dung văn bản nào đó, chúng ta đặt các văn bản nằm trong thẻ p. 

(*) - Thẻ p thường đặt nằm sau các thẻ heading ( h1, h2, h3, h4, h5, h6)

Thẻ Tạo Đường Thẳng

Cú pháp:
<hr> 

Thường dùng thẻ hr để chia tác các đoạn văn bản thành từng khối. Thẻ hr có các thuộc tính:

Thuộc tính Mô tả
align Chỉ định vị trí: căn trái (left) - phải (right) - căn giữa (center)
width Độ dài của đường thường - tính bằng pixel ( ví dụ: 100px ) hoặc phần trăm ( ví dụ: 30%)
size Độ dày của đường thằng - tính bằng pixel 
noshade Chỉ định hiển thị bằng màu đặc (solid) hay có đổ bóng

Thẻ Tạo Danh Sách

Danh sách dùng để nhóm dữ liệu một cách logic. Chúng ta có thể thêm các danh sách vào tài liệu HTML để nhóm các thông tin có liên quan lại với nhau.

Ví dụ:

Hoa Hồng
Hoa Lan
Qủa Cam
Qủa Táo

Có thể được gom nhóm thành:

Hoa:

Hoa Hồng
Hoa Lan

Qủa:

Qủa Cam
Qủa Táo

Các loại danh sách mà bạn có thể chèn vào tài liệu HTML là:

  • Danh sách không thứ tự
  • Danh sách có thứ tự
  • Danh sách định nghĩa

Thẻ Tạo Danh Sách Không Thứ Tự

Đây là loại danh sách đơn giản nhất mà bạn có thể thêm vào tài liệu HTML. Danh sách không thứ tự là một “bulleted list”. Các mục được bắt đầu bằng dấu chấm tròn “bullet”. Danh sách không thứ tự được nằm trong cặp thẻ <UL>… </UL>. Mỗi mục trong danh sách được đánh dấu bằng thẻ <LI> </LI>. LI được viết tắt của từ List Item ( phần tử của danh sách)

Thẻ Tạo Danh Sách Có Thứ Tự

Danh sách có thứ tự nằm trong cặp thẻ <OL>… </OL>. Danh sách có thứ tự cũng hiển thị các mục danh sách. Sự khác nhau là các mục danh sách hiển thị theo thứ tự được tạo ra một cách tự động.

Ví dụ:

<!Doctype html> <!-- Khai báo phiên bản sử dụng html 5-->
<HTML> <!--thẻ khai báo bắt đầu mã html-->
<HEAD> <!--thẻ khai báo bắt đầu phần head ( phần đầu ) -->
<meta charset="UTF-8">
<TITLE>HTML - Hello World</TITLE> <!-- Tiêu đề trang web -->
</HEAD> <!-- kết thúc phần head -->
<BODY> <!-- bắt đầu phần thân -->
<H1>Thẻ tạo danh sách không thứ tự</H1>
<p><!--thẻ xác định đoạn văn bản-->
	Đây là loại danh sách đơn giản nhất mà bạn có thể thêm vào tài liệu HTML
	<hr align="left" width="50%"> <!--thẻ tạo đường thẳng-->
	<h3>Hoa</h3>
	<ul> <!-- bắt đầu thẻ tạo danh sách không thứ tự-->
		<li>Hoa Hồng</li> <!--một phần tử của danh sách-->
		<li>Hoa Lan</li>
	</ul> <!-- kế thúc danh sách không thứ tự-->
	<h3>Qủa</h3>
	<ul> 
		<li>Qủa Cam</li>
		<li>Táo</li>
	</ul> 
</p>
<H1>Thẻ tạo danh sách có thứ tự</H1>
<p>
	<h3>Ngày trong tuần:</h3>
	<OL> <!--bắt đầu thẻ tạo danh sách có thứ tự-->
		<LI>Thứ 2</LI>
		<LI>Thứ 3</LI>
		<LI>Thứ 4</LI>
		<LI>Thứ 5</LI>
		<LI>Thứ 6</LI>
	</OL> <!-- kết thúc thẻ tạo danh sách có thứ tự-->
</p>
</BODY> <!-- kết thúc phần thân -->
</HTML> <!-- kết thúc mã html-->

Hình 3: Thẻ tạo danh sách trong HTML

Các thuộc tính dùng để định nghĩa hệ thống số:

Thuộc tính  Thẻ
Upper Roman (số La Mã - chữ hoa) <LI TYPE = I>
Lower Roman (số La Mã - chữ thường) <LI TYPE = i>
Uppercase (a-z - chữ hoa) <LI TYPE = A>
Lowercase (a-z - chữ thường) <LI TYPE = a>
Bắt đầu với một số khác lớn hơn 1 <OL START = n>

Ví dụ: 

<OL> 
<LI> Monday</LI>
	<OL>
		<LI TYPE = "i"> Introduction to HTML</LI>
		<LI TYPE = "i"> Creating Lists</LI>
	</OL>
<LI> Tuesday</LI>
	<OL>
		<LI TYPE = "A"> Creating Tables</LI>
		<LI TYPE = "A"> Inserting Images</LI>
	</OL>
<LI> Wednesday</LI>
	<OL START = 5>
		<LI> Creating forms</LI>
		<LI> Working with Frames</LI>
	</OL>
<LI> Thursday</LI>
<LI> Friday</LI>
<UL>
	<LI type="disc">Mặc định</LI>
	<LI type="circle">Hình tròn</LI>
	<LI type="square">Hình Vuông</LI>
</UL>
</OL>

Thẻ Tạo Danh Sách Định Nghĩa

Danh sách định nghĩa được dùng để tạo ra một danh sách các điều khoản và các định nghĩa của chúng. Danh sách định nghĩa nằm trong cặp thẻ <DL>… </DL>. Thẻ <DT> được dùng để chỉ ra điều khoản còn thẻ <DD> được dùng để chỉ ra định nghĩa cho điều khoản đó.

Ví dụ:

<DL> <!-- bắt đầu danh sách định nghĩa-->
	<DT> Sunday HTML và JavaScript <!--định nghĩa-->
		<DD> The first day of the week <!-- điều khoản-->
	<DT> HTML 
	<DD> Hyper Text Markup Language
		<DT> Internet
	<DD> A network of networks
		<DT> TCP/IP
	<DD> Transmission Control Protocol / Internet Protocol 
</DL> <--kết thúc danh sách định nghĩa-->



Hình 4: Thẻ tạo danh sách trong HTML

Tổng Kết

Bài này các bạn cần nắm:

  • Khái niệm cơ bản về thẻ trong html
  • Biết và sử dụng một số thẻ cơ bản trong html
  • Xác định được từng phần của một tài liệu html: phần xác định phiên bản, phần đầu, phần thân



Bài liên quan:



Bình luận:


tự học html