Bài 18: kết hợp các thẻ ngoại tuyến và nội tuyến với nhau | Học HTML

Ở bài học này mình sẽ hướng dẫn cho các bạn cách kết hợp các thẻ ngoại tuyến với thẻ nội tuyến lại với nhau để tạo lên một bài viết hoàn chỉnh có đủ các yếu tố như in đâm, in nghiêng...,

Đầu tiên chúng ta phải phân biệt thẻ ngoại tuyết và thẻ nội tuyến.
▪ Thẻ ngoại tuyến: là các thẻ khi hiển thị trên trình duyệt thì nó sẽ tự động xuống dòng và bắt đầu một dòng mới.
▪ Thẻ nội tuyến: là các thẻ khi hiển thị trên trình duyệt thì nó sẽ nằm trên cùng một hàng.

Tình đến bài học hôm nay thì các bạn cũng đã biết qua các thẻ cơ bản nhất trong HTML như thẻ văn bản, thẻ in đậm, thẻ in nghiêng, các thẻ nhấn mạnh, thẻ tiêu đề..., dưới đây là một bài viết mà các bạn có thể dùng các thẻ đã học để làm ra như bài viết này.

Thần đồng sở hữu tài năng "không tưởng" trước khi lên 10

Akrit Jaswal, người Ấn Độ có chỉ số IQ là 146, được mệnh danh là “cậu bé thông minh nhất thế giới”.
 Akrit Jaswal nổi tiếng khi trực tiếp thực hiện một ca mổ tại nhà cho một cô gái bị bỏng lúc mới 7 tuổi. Trí thông minh tuyệt đỉnh của cậu bé này tập trung vào nghiên cứu y học và trở thành sinh viên trẻ tuổi nhất được nhận vào học tại trường Đại học Y ở Ấn Độ (Đại học Punjab) khi 12 tuổi.

Sau đây chúng tôi sẽ trình bày các thẻ mà bạn đã học tại "hoclaptrinhhtml2018" thành một bài viết khi hiển thị giống như bài viết ở trên và các bạn hãy xem cách trình như sau.

<h1>Thần đồng sở hữu tài năng "không tưởng" trước khi lên 10</h1>
<p><b>Akrit Jaswal</b>, người Ấn Độ có chỉ số IQ là 146, được mệnh danh là “<i>cậu bé thông minh nhất thế giới</i>”.
</br>
Akrit Jaswal <b>nổi tiếng</b> khi trực tiếp thực hiện một ca mổ tại nhà cho một cô gái bị bỏng lúc mới 7 tuổi. Trí thông minh tuyệt đỉnh của cậu bé này tập trung vào nghiên cứu y học và trở thành sinh viên trẻ tuổi nhất được nhận vào <i>học tại trường Đại học Y ở Ấn Độ</i> (Đại học Punjab) khi 12 tuổi.</p>

Giải thích:
▪ Đoạn văn "Thần đồng sở hữu tài năng "không tưởng" trước khi lên 10" được bao bọc bởi căp thẻ <h1>...</h1>vì nó là đoạn văn mô tả ngắn quan trọng nhất của bài viết, và các tiêu đề của bài viết đều năm trên đầu của mỗi bài viết.

▪ Đoạn văn "Akrit Jaswal, người Ấn Độ có chỉ số IQ là 146, được mệnh danh là “cậu bé thông minh nhất thế giới”.
Akrit Jaswal nổi tiếng khi trực tiếp thực hiện một ca mổ tại nhà cho một cô gái bị bỏng lúc mới 7 tuổi. Trí thông minh tuyệt đỉnh của cậu bé này tập trung vào nghiên cứu y học và trở thành sinh viên trẻ tuổi nhất được nhận vào học tại trường Đại học Y ở Ấn Độ (Đại học Punjab) khi 12 tuổi."
 Như đã học để trình bày một đoạn văn ngắn hoặc dài thì ta phải dùng cặp thẻ <p> nên ở nội dung trên ta xác định đó là đoạn văn này ta đặt nó nằm trong cặp thẻ <p>...</p>.

✴ Lưu ý: ở trên mình áp dụng 2 thẻ <h1> và thẻ <p> hai thẻ này thuộc nhòm thẻ ngoại tuyến nên khi hiển thị nó sẽ tự động xuống dòng và bắt đầu một dòng mới.

Như các bạn thấy trong đoạn văn nằm trong cặp thẻ <p>...</p> nó có những từ như in đậm, in nghiêng. Như đã nói các thẻ thuộc nhóm thẻ nội tuyến khi hiển thị nó sẽ nằm trên cùng một hàng cho nên bạn chỉ cần dùng các cặp thẻ in đậm hay in nghiêng bao bọc các từ cần in đâm hay in nghiêng văn bản nằm trong cặp thẻ <p>...</p> như chúng tôi đã trình bày ở trên và các bạn cũng có thể áp dụng với các thẻ nội tuyến khác.

✴ Kết luận: với những kiến thức hiện tại các bạn chỉ làm ra những bài viết vô cùng đơn giản, một bài viết hoàn chỉnh phải có đủ các yếu tô như hình ảnh, các siêu liên kết, form..., nhưng các bạn đừng lo đến với học lập trình html 2018 bạn sẽ được học hết.

Chúc bạn thành công