Các thẻ định dạng kiểu chữ và văn bản trong html


Tự học html css javascript 23/10/2015 Cùng chuyên mục

Trong một trang html - phần nội dung (content) là chủ yếu - bạn sẽ cần trình bày chữ - đoạn văn rất nhiều. Các thẻ (tag) hay được vận dụng như kiểu chữ (font) - chữ đậm ( b ) - màu chữ ( font color ) - xuống dòng ( br ) - ...

Các Thẻ Dùng Cho Kiểu Chữ (Font Style)

Xuống dòng

Bình thường nội dung của văn bản sẽ hiểu thị theo kích thước (độ rộng) của đoạn văn bản - nếu điền hết sẽ xuống dòng. Tuy nhiên, nếu chúng ta muốn trình bày đoạn văn bản đẹp (theo mọi kích thước) - hoặc ngắt dòng để điều khiển thị đoạn văn bản theo ý mình - sử dụng thẻ <br> .

Cú pháp:
<br> 
Ví dụ: 

<p>
	Dòng thứ 1<br>
	Dòng thứ 2
</p>

Làm Chữ In Đậm

Để in đậm một đoạn văn bản chúng ta sử dụng 2 thẻ <b><strong> để thực hiện:
Cú pháp:
<b> Nhập văn bản vào bạn muốn làm đậm</b>
hoặc
<Strong> Nhập đoạn văn bản bạn muốn làm đậm</Strong>
Ví dụ 1: Làm chữ "streampow", "xử lý chuỗi", "mảng" in đậm

<p>
	<b>streampow</b> - sức mạnh tự học - php: <strong>xử lý chuỗi</strong> - khai báo, sử dụng các hàm xử lý <b>mảng</b>
</p>

Làm Chữ In Nghiêng

Chữ in nghiêng hoặc in đậm có tác dụng nhấn mạnh một câu - một số từ trong đoạn văn bản - nhằm gây sự chú ý cho người đọc, đánh dấu đây là các nội dung quan trọng cần ghi nhớ, lưu ý. 
Cú pháp:
<i>đoạn văn bản cần in nghiêng</i>
Ví dụ 2: Làm chữ - "tự học" in nghiêng

<p>
	Các bạn cần đọc kỹ ví dụ - sau đó tự mình nhớ lại và gõ vào file html - nếu không nhớ thì mới mở lại trang
	web để xem - như vậy mới có sức mạnh <i>tự học</i> - các ví dụ đơn giản, không nên trông chờ video hoặc
	hình ảnh minh họa.
</p>

Thay Đổi Kích Thước Chữ

Để thay đổi cỡ chữ tương đối của một từ hay một nhóm từ so với các văn bản xung quanh, ta dùng cú pháp sau:
Cú pháp:
<big> Nhập văn bản vào bạn muốn tăng cỡ chữ lớn hơn </big>
<small> Nhập văn bản bạn muốn giảm cỡ chữ bé hơn <small>

Tạo dòng chữ thấp - chỉ số dưới (sub)

Để tạo các dòng chữ thấp tương ứng với chỉ số dưới ta dùng thẻ Sub sau đây.
Cú pháp:
<sub> Nhập chữ hay kí hiệu bạn muốn chỉnh thấp </sub>

Tạo dòng chữ cao - chỉ số trên (sup)

Để tạo dòng chữ cao tương ứng với chỉ số trên ta dùng thẻ sup như sau:
Cú pháp:
<sup> Nhập chữ hay kí hiệu bạn muốn chỉnh cao </sup>

Ví dụ 3: Thay đổi kích thước chữ, tạo chỉ số trên, chỉ số dưới

<p>
	Thay đổi cỡ chữ <big>chữ lớn</big> - <small>chữ nhỏ</small>
	Các dạng chỉ số - hay dùng trong công thức hóa học, toán học - chỉ số dưới H<sub>2</sub>O - chỉ số trên x<sup>2</sup>
</p>

Gạch ngang và gạch dưới chữ

Tạo chữ gạch ngang - nhằm nhấn mạnh một nội dung mang tính "hủy bỏ - nhắc nhở không nên" - tạo chữ gạch dưới có tác dụng nhấn mạnh ( như cách dùng chữ đậm, chữ in nghiêng).
Cú pháp:
<Strike> Nhập văn bản cần gạch bỏ </Strike>
<u> Nhập đoạn văn bản cần gạch dưới </u>

Tạo chữ dạng riêng

Để nhấn mạnh hay làm nổi bật đoạn văn bản ta dùng thẻ sau.
Cú pháp:
<em> Đoạn văn bản cần nhấn mạnh </em>

Tạo dạng chữ bị xoá

Cú pháp:
<del> Nhập vào đoạn văn bản cần xoá </del>
<s> Nhập đoạn văn bản cần xoá </s>

Tạo dạng chữ chèn vào

Cú pháp:
<ins> định dạng chữ mới chèn thêm </ins>


Thẻ vận dụng cho hiệu ứng font chữ

Chọn font chữ cho văn bản

Để chọn font chữ (kiểu chữ như arial - time new roman - ...) cho đoạn văn bản cần trình bày ta dùng thẻ font như sau
Cú pháp:
<font face =“fontname1, fontname2”>văn bản cần hiển thị văn bản đã chọn</font>
fontname1 là kiểu chữ được chọn đầu tiên. Gõ tên đầy đủ của kiểu chữ mà ta muốn, fontname2 là kiểu chữ ưu tiên thứ 2 nếu như người truy cập không cài đặt kiểu chữ thứ nhất. Mỗi tên kiểu chữ phải được ngăn cách với tên đứng trước bằng dấu phẩy. Có thể thêm fontname3, fontname4… cho các kiểu chữ ưu tiên tiếp theo. 
Ví dụ 4: 

<font face =“Times new roman, Arial”> Văn bản cần định dạng bởi font
chữ</font>.

Đổi cỡ chữ văn bản

Khi cần thay đổi cỡ một số chữ, chúng ta có thể làm theo hai cách: chọn cỡ chữ ngay hay điều chỉnh cho vùng chữ được to hơn hay nhỏ hơn các chữ xung quanh.
Cú pháp:
<font size= “n”> nhập văn bản mà bạn cần điều chỉnh cỡ chữ </font>
Giá trị của n nhận từ 1 đến 7.

(*) - Nếu chọn cỡ chữ cho toàn trang - bạn đặt <font face> các đoạn văn bản - nếu chỉ áp dụng cho một đoạn văn bản thì đoạn văn bản chịu tác dụng nằm trong cặp thẻ <font></font>
Ví dụ 5:Chọn định dạng kiểu chữ và cỡ chữ của đoạn văn bản

<p>
	<font face = Arial, size = 3> Đoạn văn bản - Arial font </font>
</p>
<p>
	<font face = Times new roman, size = 4> Đoạn văn bản font - Times new roman font </font>
</p>

Chọn cỡ chữ mặc định.

Khi muốn thống nhất một cỡ chữ nhất định trên trang Web, ta thường sử dụng thẻ sau đây.
Cú pháp:
<basefont size= "n">
n nhận giá trị từ 1 đến 7, cỡ chữ mặc định là 3.

(*) - thẻ basefont không được hỗ trợ trong HTML 5

Đổi màu chữ

Một trong những cách làm nổi bật văn bản là đổi màu chúng. Bạn có thể đổi một phần văn bản thành thành màu khác và phần còn lại là màu đen.
Cú pháp:
<font color = “#rrggbb”> Nhập văn bản bạn muốn đổi màu </font>

Trong đó:rrggbblà số thập lục phân biểu hiện màu mong muốn,rrlà giá trị
thập lục phân giành cho màu đỏ, ggcho xanh lá cây, bb cho xanh dương.

<font color = “308F9E”>

Tương ứng R là 48 (hệ 16=30), G là 148 (hệ 16=8F), và B là 158 (hệ 16=9E) do đó giá trị trong hệ thập lục phân tương ứng là 308F9E. Tuy nhiên ta có thể thay đổi các giá trị R, G, B trong bảng màu để được các giá trị màu khác nhau, hoặc là:

<font color= “color”> Nhập văn bản bạn muốn đổi màu </font>

color là 1 trong 140 màu định sẵn.
Ví dụ 6: Đổi màu chữ đỏ cho đoạn văn bản

<font color= “Red”> , đoạn văn bản được tác động bởi thẻ sẽ có màu đỏ.</font>

Làm chữ nhấp nháy

Để tạo ra các hiệu ứng về chữ như nhấp nháy ta có thể dùng với thẻ sau
Cú pháp:
<blink> Nhập đoạn văn bản cần nhấp nháy </blink>


Tổng Kết

Trong bài này các bạn tìm hiểu các thẻ liên quan đến kiểu chữ trong văn bản - đây là các thẻ được sử dụng nhiều, bạn bạn cần thực hành nhiều (thay đổi các giá trị thuộc tính và kết hợp các thẻ với nhau). Tập cách tra bảng màu - nhớ một số tên màu để tiện sử dụng.

Trong bài sau các bạn sẽ tìm hiểu về căn lề, tạo nền trang, chèn ảnh trong HTML - hoàn tất việc trình bày đoạn văn bản. 



Bài liên quan:



Bình luận:


tự học html