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

Định dạng văn bản trong HTML

Đị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ả.

<p> Lorem ipsum dolor sit amet, malorum vulputate
    ei eum, vitae virtute vulputate sea cu, harum bonorum
    eam et. Voluptua percipit postulant te eos, eum veri
    petentium ad, ei soluta populo iisque sea. 
</p>
<p> Eam oportere deterruisset definitiones eu, in enim
    eros has. Veniam causae forensibus ea mea. Pro 
    natum ancillae temporibus ei, nibh constituto
    dissentiet mei ut, est ne nisl noster. Ius id populo
    labitur nominavi. Novum comprehensam eam ut, ut
    unum commodo debitis vim, eum cu docendi comprehensam.
</p>

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é !

 Đây là chữ <strong> in đậm</strong> và chữ <i>in nghiêng </i>. 
Còn gạch chân thì nó <u> như thế này</u> các bạn 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

3.7/5 - (4 votes)




Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 80% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+