[Học HTML] Bài 05: Định dạng văn bản trong HTML

Trong bài này chúng ta sẽ tìm hiểu cách định dạng văn bản trong tài liệu HTML. Cụ thể là cách để in đậm, in nghiêng, gạch chân, màu chữ, kiểu chữ,.v.v…

Một số định dạng văn bản

Đầu tiên mình cũng xin nói thêm là để phân biệt các đoạn văn bản khác nhau thì các bạn đặt những đoạn đó trong những cặp thẻ <p> </p> là được. Bạn có thể tham khảo ví dụ sau đây bằng cách copy >> dán vào phần HTML của công cụ Codepen trên thanh menu của Hocban.vn >> xem thành quả.

Oke, như vậy là xong phần hình dung về đoạn văn rồi nhé ! Sau đây là một số định dạng thường sử dụng:

  • In đậm văn bản các bạn đặt văn bản đó vào cặp thẻ<strong>
  • In nghiên dùng cặp thẻ <i>
  • Gạch chân văn bản <u>
  • Chèn code thì đặt nó vào cặp <code>
  • Gạch ngang trang các bạn đặt văn bản trong cặp <hr>

Để xem nó thế nào thì các bạn copy đoạn code sau dán vào của công cụ Codepen trên thanh menu của Hocban.vn >> xem thành quả nhé !

Các định dạng đối với font chữ

Định dạng với font chữ bao gồm như: loại font, kích thước font, màu chữ, màu nền, canh lề văn bản,… nói chung là các định dạng như trong Microsoft Office vậy. Trong HTML thì chúng ta sẽ dùng cú pháp như sau:

<span style= "tên thuộc tính: giá trị"> nội dung </span>

Ví dụ hiển thị đoạn chữ Tịnh Nguyễn Blog thành màu đỏ bạn sẽ viết là: <span style= "color : red"> Tịnh Nguyễn Blog </span>. Trong đó color (màu sắc) là tên thuộc tính, red (màu đỏ) là giá trị. Có khá nhiều thuộc tính, nhưng sau đây mình sẽ đưa ra một số thuộc tính thường dùng:

  • Màu sắc font – color: red (đỏ), blue (xanh biển), yellow (vàng), black (đen),…hoặc sử dụng mã màu,… túm lại bạn xem thêm trên Google với từ khóa “CSS Colors” là được.
  • Loại fontfont family: Arial, Roboto, Times New Roman,…. từ khóa tìm kiếm trên Google là ” CSS font-family Property“.
  • Kích thước fontfont size: ví dụ 10px, 15px,…1 em, 1.5em, 80%, 120% thì các bạn thấy mình có đưa ra 03 đơn vị bao gồm px (pixel), em%. Tạm thời bạn cứ xài px đi, sau này sẽ tìm hiểu tiếp.
  • Canh lề văn bảntext align: left (canh đều bên trái), right (bên phải), center (chính giữa), justify (canh đều hai bên).

Để sử dụng thì các bạn ráp vào y chang cái ví dụ ở trên của mình tương ứng với thuộc tính thường dùng mình đã đưa ra. Và cách làm vẫn cứ là copy dán vào Codepen mà nghịch thôi.

Oke, thì bài này khá là hay và nhiều thứ để chúng ta nghịch đúng không nào ? Những phần này sẽ rất hữu ích trong các trường hợp bạn bình luận trên một số webiste / blog mà người ta không có hướng dẫn thêm màu, in nghiêng, in đậm, bla bla thì các bạn có thể ứng dụng chúng được rồi. Lưu ý: khung bình luận của Hocban.vn hiện không hỗ trợ chèn HTML vào bình luận :v

Bài học trước đó và tiếp theo


- TÁC GIẢ BÀI VIẾT -

Hocban.vn

Farmer at Home Garden
Bài viết bạn vừa xem được thực hiện bởi biên tập viên của Hocban.vn - chúc các bạn online vui vẻ và góp nhặt được nhiều thông tin, tư liệu hữu ích. Trân trọng !

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )