Tiêu đề (Headings) là thành phần quan trọng trong một tập tin HTML. Bài viết này bao gồm giới thiệu về các thẻ của tiêu đề cũng như nhắc lại các thẻ quan trọng liên quan và các bài tập về tiêu đề.
1. Phần lý thuyết
1.1 Tiêu đề (Headings) trong HTML
Tiêu đề được định nghĩa bằng các thẻ <h1> đến <h6>.
<h1> xác định tiêu đề quan trọng nhất, <h6> xác định tiêu đề ít quan trọng nhất.
Để các bạn dễ hiểu hơn tôi sẽ ví dụ như hình bên dưới
Như hình trên các bạn thấy trình duyệt tự động thêm một khoảng trắng trước và sau tiêu đề. Và các bạn cũng thấy các tiêu đề được in đậm và cỡ chữ cũng sẽ giảm dần từ thẻ <h1> đến <h6>.
1.2 Tại sao tiêu đề (Headings) là quan trọng?
Các công cụ tìm kiếm như google chẳng hạn sử dụng tiêu đề để lập chỉ mục cấu trúc và nội dung của các trang web.
Người dùng lướt các trang web của bạn theo các tiêu đề của nó. Điều quan trọng là sử dụng tiêu đề để hiển thị cấu trúc tập tin.
<h1> tiêu đề nên được sử dụng cho tiêu đề chính, tiếp theo là <h2> tiêu đề, sau đó ít quan trọng <h3>, …
Lưu ý: Chỉ sử dụng tiêu đề trong HTML cho tiêu đề. Không sử dụng tiêu đề để làm văn bản LỚN hoặc in đậm
1.3 Thẻ <hr> trong HTML
Thẻ <hr> định nghĩa một sự phá vỡ theo chủ đề trong một trang HTML và thường được hiển thị dưới dạng một đường ngang.
Thẻ <hr> được sử dụng để tách nội dung (hoặc xác định một thay đổi) trong một trang HTML.
Để các bạn dễ hiểu hơn tôi sẽ ví dụ như hình dưới
1.4 Thẻ <head> trong HTML
Thẻ <head> không liên quan gì đến tiêu đề trong HTML.
Thẻ <head> là một vùng chứa cho siêu dữ liệu. Siêu dữ liệu HTML là dữ liệu về tập tin HTML. Siêu dữ liệu không được hiển thị. (phần này sẽ được tôi viết kỹ ở các bài sau)
Thẻ <head> được đặt giữa thẻ <html> và thẻ <body>
Để các bạn dễ hiểu tôi sẽ ví dụ như hình dưới
Như ví dụ trên tôi có dùng thẻ <meta>, thẻ này rất thường gặp và có nhiều tên thuộc tính khác nhau, về thẻ này tôi sẽ viết một bài chi tiết về nó ở các bài sau.
1.5 Làm thế nào để xem mã nguồn HTML?
Bạn đã bao giờ nhìn thấy một trang Web và tự hỏi “Làm sao họ làm được điều đó?”
Xem mã nguồn HTML:
Bạn nhấp chuột phải vào trang và chọn “View Page Source” (trong Chrome) hay “View Source” (trong IE) hoặc tương tự trong các trình duyệt khác. Thao tác này sẽ mở ra một cửa sổ chứa mã nguồn HTML của trang.
Lưu ý rằng ngoài ra các bạn có thể vào trang cần xem mã nguồn HTML và bấm tổ hợp phím Ctrl+U
Kiểm tra (Inspect) một thành phần HTML:
Nhấp chuột phải vào một phần tử (hoặc một vùng trống), và chọn “Inspect” hoặc “Inspect Element” để xem những thành phần nào được tạo thành (bạn sẽ thấy cả HTML và CSS). Bạn cũng có thể chỉnh sửa HTML hoặc CSS khi đang di chuyển trong bảng điều khiển.
Lưu ý thêm rằng ngoài ra để kiểm tra mã lệnh HTML hay debug mã lệnh javascript, bạn có thể bấm phím tắt F12 để sử dụng công cụ Chrome Developer Tools.
1.6 Các thẻ (Tags) HTML được dùng trong bài học này
| Thẻ (Tags) | Mô tả (Description) |
| <html> | là phần tử gốc của một trang HTML |
| <body> | chứa nội dung trang hiển thị |
| <head> | chứa thông tin meta về tập tin (title, scripts, styles, meta, …) |
| <h1> đến <h6> | chỉ định về tiêu đề trong HTML |
| <hr> | Xác định một sự thay đổi theo chủ đề trong nội dung (được hiển thị là một đường ngang) |
2. Các bài tập về tiêu đề
2.1 Bài tập 1 về tiêu đề
Thêm tiêu đề vào đoạn văn với dòng chữ “Liên hệ về bài viết”.
<!DOCTYPE html> <html> <body> <p>Nếu bạn cần hỗ trợ những vấn đề liên quan tới nội dung bài viết của mình, cách tốt nhất hãy bình luận bên dưới bài viết đó. Bởi vì câu trả lời dành cho bạn ở đó có thể sẽ có ích với người khác và mình cũng chỉ trả lời dưới bài viết đó (không trả lời qua phương thức khác).</p> </body> </html>
Gợi ý của bài tập 1
Gợi ý: Thêm thẻ <h1>.
Câu trả lời của bài tập 1
<!DOCTYPE html> <html> <body> <h1>Liên hệ về bài viết</h1> <p>Nếu bạn cần hỗ trợ những vấn đề liên quan tới nội dung bài viết của mình, cách tốt nhất hãy bình luận bên dưới bài viết đó. Bởi vì câu trả lời dành cho bạn ở đó có thể sẽ có ích với người khác và mình cũng chỉ trả lời dưới bài viết đó (không trả lời qua phương thức khác).</p> </body> </html>
2.2 Bài tập 2 về tiêu đề
Thêm một đường ngang giữa tiêu đề và đoạn văn.
<!DOCTYPE html> <html> <body> <h1>Liên hệ về bài viết</h1> <p>Nếu bạn cần hỗ trợ những vấn đề liên quan tới nội dung bài viết của mình, cách tốt nhất hãy bình luận bên dưới bài viết đó. Bởi vì câu trả lời dành cho bạn ở đó có thể sẽ có ích với người khác và mình cũng chỉ trả lời dưới bài viết đó (không trả lời qua phương thức khác).</p> </body> </html>
Gợi ý của bài tập 2
Gợi ý: Thêm thẻ <hr>.
Câu trả lời của bài tập 2
<!DOCTYPE html> <html> <body> <h1>Liên hệ về bài viết</h1> <hr> <p>Nếu bạn cần hỗ trợ những vấn đề liên quan tới nội dung bài viết của mình, cách tốt nhất hãy bình luận bên dưới bài viết đó. Bởi vì câu trả lời dành cho bạn ở đó có thể sẽ có ích với người khác và mình cũng chỉ trả lời dưới bài viết đó (không trả lời qua phương thức khác).</p> </body> </html>
2.3 Bài tập 3 về tiêu đề
Thêm 06 tiêu đề vào tập tin với văn bản “Hello”.
Bắt đầu với tiêu đề quan trọng nhất và kết thúc với tiêu đề ít quan trọng nhất.
<!DOCTYPE html> <html> <body> </body> </html>
Gợi ý của bài tập 3
Gợi ý: Sử dụng thẻ <h1>, <h2>, <h3>,...
Câu trả lời của bài tập 3
<!DOCTYPE html> <html> <body> <h1>Hello</h1> <h2>Hello</h2> <h3>Hello</h3> <h4>Hello</h4> <h5>Hello</h5> <h6>Hello</h6> </body> </html>
2.4 Bài tập 4 về tiêu đề
Đánh dấu văn bản dưới đây với các thẻ thích hợp:
“Học HTML” là nội dung quan trọng nhất.
“Những điều cần biết về HTML” là nội dung quan trọng nhất tiếp theo.
“HTML là gì?” có tầm quan trọng nhỏ nhất.
Các câu cuối cùng chỉ là một đoạn văn.
<!DOCTYPE html> <html> <body> Học HTML Những điều cần biết về HTML HTML là gì? HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web. </body> </html>
Gợi ý của bài tập 4
Gợi ý: Sử dụng thẻ <h1>, <h2>, <h3> và <p>.
Câu trả lời của bài tập 4
<!DOCTYPE html> <html> <body> <h1>Học HTML</h1> <h2>Những điều cần biết về HTML</h2> <h3>HTML là gì?</h3> <p>HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web.</p> </body> </html>
3. Lời cuối bài
Qua bài viết này chắc các bạn cũng biết thẻ tiêu đề là gì trong HTML và vị trí của nó nằm ở đâu trong tập tin HTML. Ở bài viết này không những tôi chỉ viết về thẻ tiêu đề, tôi còn viết về những thẻ khác liên quan đến nó. Ở bài viết sau cũng vậy, chúng ta cùng tìm hiểu về đoạn văn (Paragraphs) trong HTML và những thẻ liên quan đến nó.
The post [HTML bài 8] Tiêu đề (Headings) trong HTML appeared first on Học online.
from WordPress http://ift.tt/2w2pjJ2
via IFTTT
Không có nhận xét nào:
Đăng nhận xét