NTM Solutions

Facebook Youtube Google+

Thứ Bảy, 3 tháng 12, 2016

TỰ HỌC HTML – BÀI 4 – TIÊU ĐỀ VÀ ĐOẠN VĂN

HTML Tiêu đề

Tiêu đề của đoạn văn được xác đinh bằng các thẻ từ <h1> đến <h6
<h1> xác định tiêu đề quan trọng nhất (size lớn nhất) của đoạn văn. <h6> xác định tiêu đề ít quan trọng nhất của đoạn văn (size nhỏ nhất).

Ví dụ:

Gõ đoạn mã HTML sau nằm trong cặp thẻ <body>
<h1>Tiêu đề 1</h1>
<h2>Tiêu đề 2</h2>
<h3>Tiêu đề 3</h3>
<h4>Tiêu đề 4</h4>
<h5>Tiêu đề 5</h5>
<h6>Tiêu đề 6</h6>Try it Yourself »
Chú ý: Trình duyệt sẽ tự động thêm vài ký tự khoảng trắng ở trước và sau tiêu đề .

Tiêu đề là quan trọng

Các công cụ tìm kiếm sử dụng các tiêu đề để xác lập cấu trúc và nội dung trang web của bạn.
Người sử dụng lướt web thông qua các tiêu đề. Vì vậy nó rất quan trọng trong việc định cấu trúc của sites.


Thẻ <h1> thường được dùng cho các tiêu đề chính, kế đến là <h2>, rồi <h3>, v.v.
Chú ý: chỉ nên sử dụng thẻ tiêu đề cho phần tiêu đề.Tránh dùng thẻ tiêu đề chỉ để làm to hay đậm chữ.

HTML Đường ngắt trang

Thẻ <hr> dùng để ngắt 1 trang HTML và dùng để thể hiện 1 đường gạch dài.
Thẻ <hr> được dùng để chia cắt các nội dung khác nhau trong 1 trang HTML.

Ví dụ:

<h1>Tiêu đề 1</h1>
<p>Nội dung</p>
<hr>
<h2>Tiêu đề 2</h2>
<p>Nội dung.</p>
<hr>Try it Yourself »

HTML các thành phần trong thẻ head

Trong HTML thẻ <head> không liên quan gì tới headings (tiêu đề).
Thẻ <head> đặt bên trong cặp thẻ <htm> và đặt trước thẻ <body>
Trong thẻ <head> thường chứa các thẻ sau:
<meta> chứa thông tin của trang web. Thẻ này thường không hiển thị.
<title> chứa phần hiển thị trên thanh tiêu đề của trình duyệt (title bar).
<style> chứa phần định dạng kiểu dáng của trang web.

Ví dụ:

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>

HTML Đoạn văn

Dùng thẻ <p> để chứa đoạn văn.

Ví dụ:

<p>Đây là 1 đoạn văn.</p>
<p>Đây là 1 khúc khác.</p>
Chú ý: Trình duyệt sẽ tự động thêm 1 vài ký tự khoảng trắng trước và sau đoạn văn.

HTML Hiển thị

  • Bạn không thể nào chắc chắn cách hiển thị của HTML.
  • Chỉ cần thay đổi kích cỡ màn hình thay đổi kích cỡ cửa sổ thì kết quả hiển thị sẽ thay đổi.
  • Trình duyệt sẽ tự động xóa các dòng trắng hay khoảng trắng dư thừa.

Ví dụ:

<p>
Đây là 1 đoạn văn
chứa rất nhiều dòng trắng
nhưng trình duyệt đã bỏ qua nó.
<p>
Đây là 1 đoạn văn
chứa         nhiều khoảng trắng
trong mã         nguồn,
nhưng        trình duyệt
bỏ qua nó.
</p>

Đừng quên thẻ đóng

Hầu hết các trình duyệt hiện nay đều bỏ qua lỗi thiếu thẻ đóng

Ví dụ:

<p>This is a paragraph.<p>This is another paragraph.Try it Yourself »
Việc quên đóng thẻ sẽ tạo ra nhiều kết quả không mong muốn của người viết code.

HTML Thẻ ngắt dòng

Dùng thẻ <br> nếu bạn muốn xuống dòng nhưng không tạo đoạn văn mới.

Ví dụ:

<p>Đây là <br>1 đoạn văn<br>với ngắt dòng</p>
Thẻ <br> là 1 thẻ rỗng nên không cần thẻ đóng </br>

HTML Thẻ <pre>

Bài thơ này sẽ bị xếp thành 1 dòng.

Ví dụ:

<p>
  Trên trời có triệu vì sao.

  Xếp thành 4 chữ "Vì sao yêu nàng?"

  Dưới đất có vạn con người.

  Mà sao chỉ có 1 người tôi yêu.
</p>

nhưng nếu ta dùng thẻ <pre> sẽ tự động giữ lại các khoảng trắng và xuống dòng cùng với 1 font mặc định (thường là Courier)

Ví dụ:

<pre>
  Trên trời có triệu vì sao.

  Xếp thành 4 chữ "Vì sao yêu nàng?"

  Dưới đất có vạn con người.

  Mà sao chỉ có 1 người tôi yêu.
</pre>