Nội dung bài viết
Đăng ký học lập trình C++
Tại STDIO bạn được dạy nền tảng lập trình tốt nhất.
Đăng ký học
Nguyễn Nghĩa Với một trang web thì không thể thiếu được những đoạn văn bản, những dòng tiêu đề. Những dòng văn bản trên website đó được thể hiện bởi những thẻ HTML. Vậy những thẻ đó sử dụng như thế nào, bài viết này sẽ giúp các bạn biết và sử dụng được một số thẻ định dạng văn bản cơ bản để các bạn có thẻ áp dụng vào trang web của chính mình.

Giới thiệu

Với một trang web thì không thể thiếu được những đoạn văn bản, những dòng tiêu đề. Những dòng văn bản trên website đó được thể hiện bởi những thẻ HTML. Vậy những thẻ đó sử dụng như thế nào, bài viết này sẽ giúp các bạn biết và sử dụng được một số thẻ định dạng văn bản cơ bản để các bạn có thẻ áp dụng vào trang web của chính mình.

Tiền đề bài viết

Bài viết nằm trong chương trình tự học HTML của stdio.vn.

Đối tượng hướng đến

Những lập trình viên bắt đầu với việc lập trình web căn bản với HTML.

Cấu trúc một phần tử HTML

Đa số các thẻ trong HTML đều có cấu trúc như sau:

<tagname atrtibute="value" >Content</tagname>

Giải thích:

tagname: Là tên của thẻ được html định nghĩa sẵn, mỗi thẻ được bắt đầu bởi cặp thẻ đóng mở <>, </>.

attribute: Là thuộc tính của thẻ html, cung cấp các thông tin về thẻ html đó, thuộc tính luôn luôn nằm trong thẻ mở <>. Mỗi thẻ html có thể có nhiều attribute khác nhau, ví dụ như thể <img> có thuộc tính là height width quy định chiều cao và chiều rộng của một hình ảnh.

value: Là giá trị đi kèm với attribute. Ví dụ height="500".

Content: Chính là nội dung của html. Nằm giữa cặp thẻ đóng mở.

Ví dụ đầy đủ:

<a href="http://stdio.vn/">Trang chủ Stdio.vn</a>

Tuy nhiên trong html vẫn có 1 số thẻ vẩn không tuân thủ quy tắc này, ví dụ như thẻ <img />, thẻ <br /> .

Các thẻ định dạng văn bản

Sau khi đã hiểu được cấu trúc của một phần tử html, chúng ta sẽ cùng nhau tìm hiểu một số thẻ dùng để định dạng văn bản thường xuyên được sử dụng trong website.

Thẻ <h>

Html có định nghĩa cho chúng ta 1 loạt thẻ dùng để định nghĩa tiêu đề (heading) từ <h1> đến <h6> có kích thước giảm dần.

Các thẻ tiêu đề có cấu trúc là: <hx>Nội dung tiêu đề</hx>

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 2: Các Thẻ Định Dạng Văn Bản</title>
	</head>
	<body>
		<h1>Heading 1</h1>
		<h2>Heading 2</h2>
		<h3>Heading 3</h3>
		<h4>Heading 4</h4>
		<h5>Heading 5</h5>
		<h6>Heading 6</h6>
	</body>
</html>

Kết quả khi chạy bởi trình duyệt

ss_1

Thẻ <p>

Thẻ p (paragraph) dùng để định nghĩa một đoạn văn, và có cấu trúc <p>Nội dung đoạn văn</p>.

<p>This is a paragraph</p>
<p>This is another paragraph</p> 

Mỗi thẻ p sẽ tương ứng với một đoạn văn, sau mỗi thẻ p thì tự động xuống hàng. Vì sau lại có như vậy thì tôi sẽ đề cập đến ở phần cuối của bài viết này.

ss_2

Một số lưu ý: Đối với tất cả các thẻ html, nội dung của các thẻ đó các bạn có sử dụng nhiều khoảng trắng liên tiếp, tab xuống dòng thì trình duyệt chỉ xét là một khoảng trắng mà thôi. Chúng ta xét một số ví dụ để hiểu rõ hơn.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 2: Các Thẻ Định Dạng Văn Bản</title>
	</head>
	<body>
		<p>Đoạn văn có sử   dụng nhiều    khoảng trắng liên tiếp, tab
				xuống 	dòng, nhưng trình    	duyệt chỉ hiểu là 1 khoảng trắng.
		</p>
		<p>Đoạn văn gồm có nhiều dòng:
		Dòng 1
		Dòng 2
		Dòng 3
		</p>
	</body>
</html>

Kết quả hai đoạn văn bản nằm trên 2 dòng

ss_3

Để xuống dòng ta dùng thẻ <br /> ngay chổ nào mà chúng ta muốn xuống dòng.

<p> Đoạn văn gồm có nhiều dòng: <br />
	Dòng 1 <br />
	Dòng 2 <br />
	Dòng 3 <br />
</p>

Thẻ <pre>

Mặc định thì trình duyệt sẽ bỏ qua tất cả các khoảng trắng liên tiếp, tab, xuống dòng và chỉ hiểu là cách nhau bởi dấu cách, để giữ nguyên format thì htlm có định nghĩa cho chúng ta cặp thẻ pre để làm được việc đó.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 2: Các Thẻ Định Dạng Văn Bản</title>
	</head>
	<body>
		<pre>
			for(int i = 0; i < 10; i++)
			{
				printf("%s", "Lập trình HTML");
			}
		</pre>
	</body>
</html>

Kết quả:

ss_4

Thẻ <q>

Thẻ q dùng để trích dẫn trực tiếp một lời nói, lời dẫn trực tiếp.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 2: Các Thẻ Định Dạng Văn Bản</title>
	</head>
	<body>
		<p>
			<q>Công cha như núi Thái Sơn <br />
			Nghĩa mẹ như nước trong nguồn chảy ra.</q>
		</p>
	</body>
</html>

Kết quả

ss_6

Thẻ định dạng chữ viết

Thẻ <b>

Thẻ b (bold) dùng để định dạng chữ in đậm.

<p>Họ tên: <b>Nguyễn Văn Nghia</b></p>

Thẻ <i>

Thẻ i (italic) dùng để định dạng chữ in nghiêng.

<p>Khoa: <i>Khoa học máy tính</i></p>

Thẻ <u>

Thẻ u (underline) dùng để định dạng chữ gạch dưới.

<p>Trường: <u>Đại học công nghệ thông tin</u></p>

Có thể kết hợp các thẻ u, i, b với nhau

<p>Địa chỉ: <b><u><i>KTX khu B DHQG, Tp.HCM</i></u></b>

ss_5

Thẻ <sub>

Đôi khi trong website của chúng ta cần ghi những chỉ số dưới, như là công thức hóa học chẳng hạn. Thẻ sub được html cung cấp giúp chúng ta biểu diễn chỉ số dưới:

<p>2H<sub>2</sub> + O<sub>2</sub> -> 2H<sub>2</sub>0 </p>

Kết quả

ss_7

Thẻ <sup>

Tương tự thẻ sub thì thẻ sup đùng để định nghĩa chỉ số trên. Dưới đây tôi ví dụ với một phương trình.

<p>f(x) = 2x<sup>3</sup> + 5x<sup>2</sup> + 6x</p>

Kết quả

ss_8

inline và block

HTML có phân ra thành hai loại thẻ, đó là inline và block:

inline

Các thẻ inline là các thẻ có nội dung của nó cùng nằm trên 1 dòng, thường dùng để trình bày nội dùng cho website.

Ví dụ:

<p><i>In nghiên</i>, <b>In đậm</b>, <u>Gạch chân</u><p>

thẻ i, b, u là các thẻ inline nên nội dung của nó sẽ cùng nằm trên 1 dòng.

ss_9

Các thẻ inline phổ biến: i, u, b, span, a, sub, sup, strong, code, em.

block

Các thẻ block sẽ nằm trên những dòng riêng biệt, thường dùng để trình bày bố cục cho website.

Ví dụ:

<h3>Các thẻ HTML</h3>
<p>HTML có định nghĩa cho chúng ta những thẻ...</p>

h3 p là những thẻ block nên sẽ nằm ở những dòng riêng biệt

ss_10

Các thẻ block phổ biến: hx, p, div, ol, ul

Lời kết

Trên đây tôi đã cùng các bạn tìm hiểu và sử dụng những thẻ định dạng cơ bản trong website thông qua những ví dụ. Hy vọng qua bài viết này các bạn có thể xây dụng được một website đơn giản sử dụng những kiến thức trong bài viết này.

 

THẢO LUẬN
ĐÓNG