Bài 1: Làm quen với các thẻ HTML cơ bản
Các thẻ heading
Bất kỳ tài liệu nào cũng đều bắt đầu với một heading. Bạn có thể sử dụng các kích cỡ khác nhau cho heading của bạn. HTML cũng có 6 cỡ khác nhau cho heading, sử dụng các thẻ cơ bản là <h1>, <h2>, <h3>, <h4>, <h5>, và <h6>. Trong khi hiển thị bất cứ một heading nào, các trình duyệt sẽ thêm (để cách) một dòng trước và một dòng sau heading đó.Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Khi chạy, code trên sẽ hiển thị kết quả:
Thẻ đoạn văn
Thẻ <p> cung cấp cách cấu trúc văn bản của bạn vào các paragraph (đoạn văn) khác nhau. Mỗi một paragraph trong văn bản sẽ ở trong một thẻ mở <p> và một thẻ đóng </p> như ví dụ bên dưới.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Chạy đoạn code này sẽ hiển thị kết quả:
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
Thẻ ngắt dòng
Bất cứ khi nào bạn sử dụng thẻ <br /> thì các đối tượng theo sau nó sẽ bắt đầu từ dòng tiếp theo. Thẻ này là một ví dụ cho một khoảng trống (empty) trong tài liệu, tại đó bạn không cần các thẻ mở và đóng vì sẽ không có gì trong đó.
Thẻ <br /> có một khoảng trống giữa hai ký từ br và dấu gạch chéo theo sau. Nếu bạn bỏ sót khoảng trống này, các trình duyệt cũ hơn sẽ gặp vấn đề trong việc hiển thị sự ngắt dòng, trong khi nếu bạn quên dấu gách chéo theo sau và chỉ sử dụng <br> thì sẽ không có hiệu lực trong XHTML.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Chạy đoạn code sẽ hiển thị kết quả sau:
Hello
You delivered your assignment ontime.
Thanks
Mahnaz
You delivered your assignment ontime.
Thanks
Mahnaz
Căn chỉnh nội dung trung tâm
Bạn có thể sử dụng thẻ <center> để nhập bất kỳ nội dung vào phần trung tâm (thân bài) của trang hoặc của bất kỳ ô nào trong bảng.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
TChạy đoạn code sẽ hiển thị kết quả sau:
This text is not in the center.
This text is in the center.
Các dòng ngang
Các đường ngang cách dòng được sử dụng để ngăn cách các khu vực trong tài liệu. Thẻ<hr> tạo một dòng ngang từ vị trí hiện tại trong tài liệu đến lề phải và do đó tạo ra một dòng ngắt.
Ví dụ, bạn muốn có một dòng ngang để ngăn cách 2 paragraph:
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
Nó sẽ hiển thị kết quả sau khi bạn chạy đoạn code trên:
This is paragraph one and should be on top
This is paragraph two and should be at bottom
Thẻ <hr /> là một ví dụ cho một khoảng trống trong tài liệu, tại đó bạn không cần các thẻ đóng và mở bởi vì không có đối tượng nào trong đó.
Thẻ <hr /> có một khoảng trống giữa 2 ký tự hr và dấu gạch chéo. Nếu bạn bỏ quên khoảng trống, các trình duyệt cũ sẽ khó khăn trong việc hiển thị các đường ngang, trong khi đó, nếu bạn quên ký tự dấu gạch chéo và chỉ sử dụng <hr> thì sẽ không có hiệu lực trong XHTML.
Duy trì định dạng
Đôi khi bạn muốn văn bản của bạn tuân theo một định dạng mà đã được viết trong HTML. Trong những trường hợp này, bạn có thể sử dụng thẻ xác định định dạng trước là <pre>.
Khi đó, bất kỳ văn bản nào xuất hiện trong thẻ mở <pre> và thẻ đóng </pre> sẽ duy trì cái định dạng trong tài liệu nguồn.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
Bạn thử sử dụng code tương tự mà không sử dụng 2 thẻ <pre>...</pre> để so sánh sự khác nhau trong kết quả hiển thị.
Các khoảng trống không ngắt
Giả sử bạn muốn sử dụng cụm từ "12 Angry Men." Bạn không muốn một trình duyệt Web chia (ngắt) cụm từ trên thành "12, Angry" và "Men" ở hai dòng:
An example of this technique appears in the movie "12 Angry Men."
Trong tình huống này bạn không muốn trình duyệt ngắt văn bản của bạn, bạn nên sử dụng khoảng trống không ngắt thay vì sử dụng một khoảng trống thông thường. Ví dụ khi gõ code "12 Angry Men" vào một paragraph, bạn nên dùng đoạn code tương tự như sau:
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
Các bài viết trong Loạt hướng dẫn học lập trình HTML ( đang cập nhật... )
Share This:
Jillur Rahman
I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.
No Comment to " Bài 1: Làm quen với các thẻ HTML cơ bản "